/*
 * MarIA Studio — web [maria_studio] y página de estado [maria_studio_estado]
 * Todo vive bajo .maria-studio y usa los tokens del theme "maria" con fallback,
 * así también se ve bien si el theme cambia o no está. No usa clases del theme.
 */

.maria-studio {
	--ms-azul: var(--g-blue, #4285F4);
	--ms-azul-hondo: #1A73E8;
	--ms-oscuro: var(--g-dark, #202124);
	--ms-gris: var(--g-gray, #F8F9FA);
	--ms-blanco: var(--white, #FFFFFF);
	--ms-verde: var(--g-green, #34A853);
	--ms-rojo: var(--g-red, #EA4335);
	--ms-amarillo: var(--g-yellow, #FBBC05);
	--ms-gradiente: var(--gradient-primary, linear-gradient(135deg, #4285F4 0%, #1A73E8 100%));
	--ms-texto: #5F6368;
	--ms-borde: #E8EAED;
	--ms-anillo: 0 0 0 3px rgba(66, 133, 244, 0.15);
	--ms-sombra: 0 10px 30px rgba(0, 0, 0, 0.06);
	/* Duración de la animación del hero (una sola vez, al cargar). */
	--ms-dur: 5s;
	--ms-arranque: 0.6s;

	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	font-family: 'Poppins', sans-serif;
	color: var(--ms-oscuro);
}

/* El pedido y la página de estado mantienen el ancho de lectura del formulario. */
.maria-studio.ms-estado,
.maria-studio .ms-pedido,
.maria-studio .ms-preguntas {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.maria-studio *,
.maria-studio *::before,
.maria-studio *::after {
	box-sizing: border-box;
}

.maria-studio [hidden] {
	display: none !important;
}

/* Encabezado (el theme oculta .entry-title en páginas) */
.maria-studio .ms-encabezado {
	text-align: center;
	margin-bottom: 28px;
}

.maria-studio .ms-etiqueta {
	margin: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ms-azul);
}

.maria-studio .ms-titulo {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -1px;
	margin: 0 0 10px;
	color: var(--ms-oscuro);
}

.maria-studio .ms-titulo span {
	color: var(--ms-azul);
}

.maria-studio .ms-bajada {
	margin: 0 auto;
	max-width: 520px;
	font-size: 1rem;
	color: var(--ms-texto);
}

/* Barra de pasos */
.maria-studio .ms-progreso {
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0;
	counter-reset: none;
}

.maria-studio .ms-progreso-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	position: relative;
	font-size: 0.75rem;
	color: var(--ms-texto);
	margin: 0;
}

.maria-studio .ms-progreso-item::before {
	content: "";
	position: absolute;
	top: 15px;
	left: calc(-50% + 18px);
	right: calc(50% + 18px);
	height: 2px;
	background: var(--ms-borde);
}

.maria-studio .ms-progreso-item:first-child::before {
	display: none;
}

.maria-studio .ms-progreso-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	background: var(--ms-blanco);
	border: 2px solid var(--ms-borde);
	color: var(--ms-texto);
	transition: all 0.2s ease;
}

.maria-studio .ms-progreso-texto {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.maria-studio .ms-progreso-item.es-actual .ms-progreso-num {
	background: var(--ms-gradiente);
	border-color: transparent;
	color: var(--ms-blanco);
	box-shadow: 0 4px 14px rgba(66, 133, 244, 0.3);
}

.maria-studio .ms-progreso-item.es-actual {
	color: var(--ms-oscuro);
	font-weight: 600;
}

.maria-studio .ms-progreso-item.es-hecho .ms-progreso-num {
	border-color: var(--ms-azul);
	color: var(--ms-azul);
}

.maria-studio .ms-progreso-item.es-hecho::before,
.maria-studio .ms-progreso-item.es-actual::before {
	background: var(--ms-azul);
}

/* Contenedor de cada paso: tarjeta del theme (radio 24 px) */
.maria-studio .ms-form,
.maria-studio .ms-envio,
.maria-studio .ms-exito {
	background: var(--ms-blanco);
	border-radius: 24px;
	box-shadow: var(--ms-sombra);
	padding: 36px;
}

.maria-studio .ms-paso-titulo {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--ms-oscuro);
	outline: none;
}

.maria-studio .ms-paso-ayuda {
	font-size: 0.95rem;
	margin: 0 0 24px;
	color: var(--ms-texto);
}

/* Campos (patrón del formulario de comentarios del theme) */
.maria-studio .ms-grilla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.maria-studio .ms-campo {
	margin: 0 0 20px;
	min-width: 0;
}

.maria-studio fieldset.ms-campo {
	border: 0;
	padding: 0;
}

.maria-studio .ms-campo label,
.maria-studio .ms-campo legend,
.maria-studio .ms-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ms-oscuro);
	margin: 0 0 8px;
	padding: 0;
}

.maria-studio .ms-opcional {
	font-weight: 400;
	color: var(--ms-texto);
}

.maria-studio input[type="text"],
.maria-studio input[type="email"],
.maria-studio input[type="tel"],
.maria-studio input[type="url"],
.maria-studio textarea {
	display: block;
	width: 100%;
	border: 1px solid var(--ms-borde);
	border-radius: 12px;
	padding: 12px 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem; /* 16 px: evita el zoom automático de iOS */
	line-height: 1.5;
	color: var(--ms-oscuro);
	background: var(--ms-blanco);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin: 0;
}

.maria-studio textarea {
	resize: vertical;
	min-height: 60px;
}

.maria-studio input:focus,
.maria-studio textarea:focus {
	border-color: var(--ms-azul);
	outline: none;
	box-shadow: var(--ms-anillo);
}

.maria-studio .es-invalido input,
.maria-studio .es-invalido textarea,
.maria-studio input.es-invalido,
.maria-studio textarea.es-invalido {
	border-color: var(--ms-rojo);
}

.maria-studio .ms-error {
	margin: 6px 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #C5221F;
}

.maria-studio .ms-error:empty {
	display: none;
}

.maria-studio .ms-nota {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--ms-texto);
}

.maria-studio .ms-campo-anidado {
	margin-top: 14px;
}

/* Dictado por voz (el JS lo muestra solo si el navegador reconoce la voz) */
.maria-studio .ms-dictado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 8px 0 0;
}

.maria-studio .ms-dictar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 6px 14px;
	border: 1px solid var(--ms-borde);
	border-radius: 50px;
	background: var(--ms-blanco);
	color: var(--ms-oscuro);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.maria-studio .ms-dictar:hover {
	border-color: var(--ms-azul);
}

.maria-studio .ms-dictar:focus-visible {
	outline: 3px solid var(--ms-azul);
	outline-offset: 3px;
}

.maria-studio .ms-dictar svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.maria-studio .ms-dictar.es-escuchando {
	border-color: var(--ms-rojo);
	color: var(--ms-rojo);
}

.maria-studio .ms-dictar.es-escuchando svg {
	animation: ms-dicha 0.8s ease-in-out infinite alternate;
}

.maria-studio .ms-dictado .ms-nota {
	margin: 0;
}

/* Chips (radio 50 px, como los botones del theme) */
.maria-studio .ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.maria-studio .ms-chip {
	position: relative;
	margin: 0 !important;
	font-weight: 400 !important;
}

.maria-studio .ms-chip input,
.maria-studio .ms-tarjeta input,
.maria-studio .ms-formato input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.maria-studio .ms-chip span {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--ms-borde);
	border-radius: 50px;
	font-size: 0.9rem;
	background: var(--ms-blanco);
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}

.maria-studio .ms-chip:hover span {
	border-color: var(--ms-azul);
}

.maria-studio .ms-chip input:checked + span {
	background: var(--ms-azul);
	border-color: var(--ms-azul);
	color: var(--ms-blanco);
}

.maria-studio .ms-chip input:focus-visible + span,
.maria-studio .ms-tarjeta input:focus-visible + .ms-tarjeta-cuerpo,
.maria-studio .ms-formato input:focus-visible + .ms-formato-cuerpo {
	box-shadow: var(--ms-anillo);
	border-color: var(--ms-azul);
}

/* Colores */
.maria-studio .ms-colores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.maria-studio .ms-color {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border: 1px solid var(--ms-borde);
	border-radius: 50px;
	margin: 0 !important;
	font-weight: 400 !important;
	background: var(--ms-blanco);
}

.maria-studio .ms-color input[type="color"] {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.maria-studio .ms-color input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.maria-studio .ms-color input[type="color"]::-webkit-color-swatch {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}

.maria-studio .ms-color input[type="color"]::-moz-color-swatch {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}

.maria-studio .ms-color-hex {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
}

.maria-studio .ms-color-quitar {
	border: 0;
	background: none;
	color: var(--ms-texto);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
}

/* Botones secundarios y links */
.maria-studio .ms-link {
	border: 0;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ms-azul);
	cursor: pointer;
	text-decoration: none;
}

.maria-studio .ms-link:hover {
	text-decoration: underline;
}

/* Archivo simple (logo) */
.maria-studio .ms-archivo-simple {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-weight: 400 !important;
	cursor: pointer;
	position: relative;
}

.maria-studio .ms-archivo-simple input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.maria-studio .ms-archivo-boton {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--ms-azul);
	border-radius: 50px;
	color: var(--ms-azul);
	font-weight: 600;
	font-size: 0.9rem;
}

.maria-studio .ms-archivo-simple input:focus-visible + .ms-archivo-boton {
	box-shadow: var(--ms-anillo);
}

.maria-studio .ms-archivo-nombre {
	font-size: 0.9rem;
	color: var(--ms-texto);
	overflow-wrap: anywhere;
}

/* Tarjetas de modelo (radio 16 px, ítems) */
.maria-studio .ms-tarjetas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.maria-studio .ms-tarjeta {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.maria-studio .ms-tarjeta-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 24px;
	border: 2px solid var(--ms-borde);
	border-radius: 16px;
	background: var(--ms-blanco);
	transition: all 0.2s ease;
}

.maria-studio .ms-tarjeta:hover .ms-tarjeta-cuerpo {
	border-color: var(--ms-azul);
}

.maria-studio .ms-tarjeta input:checked + .ms-tarjeta-cuerpo {
	border-color: var(--ms-azul);
	background: rgba(66, 133, 244, 0.04);
	box-shadow: 0 4px 14px rgba(66, 133, 244, 0.15);
}

.maria-studio .ms-tarjeta-marca {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	background: var(--ms-gris);
	color: var(--ms-azul);
}

.maria-studio .ms-tarjeta input:checked + .ms-tarjeta-cuerpo .ms-tarjeta-marca {
	background: var(--ms-gradiente);
	color: var(--ms-blanco);
}

.maria-studio .ms-tarjeta-titulo {
	font-weight: 700;
	font-size: 1.1rem;
}

.maria-studio .ms-tarjeta-texto {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ms-texto);
}

/* Tarjetas de formato con la proporción real */
.maria-studio .ms-formatos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.maria-studio .ms-formato {
	position: relative;
	display: block !important;
	margin: 0 !important;
	font-weight: 400 !important;
	cursor: pointer;
}

.maria-studio .ms-formato-cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 18px 12px;
	border: 2px solid var(--ms-borde);
	border-radius: 16px;
	text-align: center;
	transition: all 0.2s ease;
}

.maria-studio .ms-formato:hover .ms-formato-cuerpo {
	border-color: var(--ms-azul);
}

.maria-studio .ms-formato-marco {
	display: block;
	height: 96px;
	max-width: 100%;
	border-radius: 8px;
	border: 2px dashed #BDC1C6;
	margin-bottom: 6px;
	transition: all 0.2s ease;
}

.maria-studio .ms-formato input:checked + .ms-formato-cuerpo {
	border-color: var(--ms-azul);
	background: rgba(66, 133, 244, 0.04);
}

.maria-studio .ms-formato input:checked + .ms-formato-cuerpo .ms-formato-marco {
	border-style: solid;
	border-color: transparent;
	background: var(--ms-gradiente);
}

.maria-studio .ms-formato-titulo {
	font-weight: 600;
	font-size: 0.95rem;
}

.maria-studio .ms-formato-nombre {
	font-size: 0.85rem;
	color: var(--ms-oscuro);
}

.maria-studio .ms-nowrap {
	white-space: nowrap;
}

.maria-studio .ms-formato-uso {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--ms-texto);
}

/* Dropzone */
.maria-studio .ms-dropzone {
	position: relative;
	border: 2px dashed #BDC1C6;
	border-radius: 16px;
	background: var(--ms-gris);
	padding: 28px 20px;
	text-align: center;
	transition: all 0.2s ease;
}

.maria-studio .ms-dropzone.es-arrastrando,
.maria-studio .ms-dropzone:focus-within {
	border-color: var(--ms-azul);
	background: rgba(66, 133, 244, 0.06);
}

.maria-studio .ms-dropzone input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.maria-studio .ms-dropzone-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	font-size: 1rem;
	color: var(--ms-oscuro);
}

.maria-studio .ms-dropzone-texto span {
	color: var(--ms-azul);
	font-weight: 600;
	font-size: 0.9rem;
}

.maria-studio .ms-dropzone-limites {
	margin: 12px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--ms-texto);
}

/* Lista de archivos y barras de progreso */
.maria-studio .ms-lista-archivos {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.maria-studio .ms-archivo {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 12px;
	padding: 12px 16px;
	border: 1px solid var(--ms-borde);
	border-radius: 16px;
	margin: 0;
	font-size: 0.9rem;
}

.maria-studio .ms-archivo-info {
	min-width: 0;
}

.maria-studio .ms-archivo-titulo {
	display: block;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.maria-studio .ms-archivo-meta {
	display: block;
	font-size: 0.8rem;
	color: var(--ms-texto);
}

.maria-studio .ms-archivo-quitar {
	border: 0;
	background: none;
	color: var(--ms-texto);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.maria-studio .ms-archivo-quitar:hover {
	color: var(--ms-rojo);
}

.maria-studio .ms-barra {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: 50px;
	background: var(--ms-borde);
	overflow: hidden;
}

.maria-studio .ms-barra-relleno {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ms-gradiente);
	border-radius: 50px;
	transition: width 0.2s linear;
}

.maria-studio .ms-archivo.es-ok .ms-barra-relleno {
	background: var(--ms-verde);
}

.maria-studio .ms-archivo.es-error {
	border-color: rgba(234, 67, 53, 0.4);
}

.maria-studio .ms-archivo.es-error .ms-barra-relleno {
	background: var(--ms-rojo);
}

.maria-studio .ms-archivo-estado {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ms-texto);
	white-space: nowrap;
}

.maria-studio .ms-archivo.es-ok .ms-archivo-estado {
	color: var(--ms-verde);
}

.maria-studio .ms-archivo.es-error .ms-archivo-estado {
	color: #C5221F;
}

/* Resumen */
.maria-studio .ms-resumen {
	margin: 24px 0;
	padding: 20px 24px;
	border-radius: 16px;
	background: var(--ms-gris);
	font-size: 0.9rem;
}

.maria-studio .ms-resumen:empty {
	display: none;
}

.maria-studio .ms-resumen dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 0;
}

.maria-studio .ms-resumen dt {
	font-weight: 600;
	color: var(--ms-oscuro);
}

.maria-studio .ms-resumen dd {
	margin: 0;
	color: var(--ms-texto);
	overflow-wrap: anywhere;
}

/* Términos */
.maria-studio .ms-check label {
	display: flex !important;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400 !important;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.maria-studio .ms-check input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--ms-azul);
}

.maria-studio .ms-check a {
	color: var(--ms-azul);
}

/* Navegación */
.maria-studio .ms-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--ms-borde);
}

/* Botón principal (propio: no depende de .btn-master del theme) */
.maria-studio .ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border: 0;
	border-radius: 50px;
	background: var(--ms-gradiente);
	color: var(--ms-blanco);
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

/* Sin transición de fondo: de degradado a color liso pasaría por transparente. */
.maria-studio .ms-btn:hover {
	background: var(--ms-azul-hondo);
	color: var(--ms-blanco);
	box-shadow: 0 6px 18px rgba(26, 115, 232, 0.28);
}

.maria-studio .ms-btn:focus-visible,
.maria-studio .ms-btn-secundario:focus-visible,
.maria-studio .ms-pregunta summary:focus-visible {
	outline: 3px solid var(--ms-azul);
	outline-offset: 3px;
}

.maria-studio .ms-nav .ms-btn {
	margin-left: auto;
}

.maria-studio .ms-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.maria-studio .ms-btn-secundario {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	padding: 13px 26px;
	border: 1px solid var(--ms-borde);
	border-radius: 50px;
	background: var(--ms-blanco);
	color: var(--ms-oscuro);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.maria-studio .ms-btn-secundario:hover {
	border-color: var(--ms-azul);
}

.maria-studio .ms-borrador {
	margin: 16px 0 0;
	font-size: 0.8rem;
	color: var(--ms-texto);
	text-align: center;
}

.maria-studio .ms-borrador .ms-link {
	font-size: 0.8rem;
}

/* Avisos */
.maria-studio .ms-aviso {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 6px solid var(--ms-rojo);
	border-radius: 0 16px 16px 0;
	background: #FCE8E6;
	color: #A50E0E;
	font-size: 0.95rem;
	line-height: 1.5;
}

.maria-studio .ms-aviso.es-info {
	border-left-color: var(--ms-amarillo);
	background: #FFF8E1;
	color: #614C00;
}

/* Éxito */
.maria-studio .ms-exito {
	text-align: center;
}

.maria-studio .ms-exito-icono {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 800;
	color: var(--ms-blanco);
	background: var(--ms-verde);
}

.maria-studio .ms-exito p {
	font-size: 1rem;
}

.maria-studio .ms-disclaimer {
	margin: 24px 0 0;
	padding: 16px 20px;
	border-left: 4px solid var(--ms-azul);
	border-radius: 0 12px 12px 0;
	background: rgba(66, 133, 244, 0.06);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.maria-studio .ms-link-estado {
	display: block;
	margin-top: 8px;
	color: var(--ms-azul);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

/* Página de estado [maria_studio_estado] */
.maria-studio .ms-tarjeta-estado {
	background: var(--ms-blanco);
	border-radius: 24px;
	box-shadow: var(--ms-sombra);
	padding: 36px;
}

.maria-studio .ms-cargando {
	margin: 0;
	text-align: center;
}

.maria-studio .ms-cambios-en-curso {
	margin: 0 0 24px;
}

.maria-studio .ms-cambios-en-curso p {
	margin: 6px 0 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.maria-studio .ms-videos {
	margin: 8px 0 24px;
}

.maria-studio .ms-videos-grilla {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.maria-studio .ms-video {
	margin: 0;
	flex: 1 1 220px;
	min-width: 0;
}

.maria-studio .ms-video.es-vertical {
	flex: 0 1 240px;
}

.maria-studio .ms-video.es-cuadrado {
	flex: 0 1 300px;
}

.maria-studio .ms-video.es-horizontal {
	flex: 1 1 100%;
}

.maria-studio .ms-video-marco {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ms-oscuro);
}

.maria-studio .ms-video.es-vertical .ms-video-marco {
	aspect-ratio: 9 / 16;
}

.maria-studio .ms-video.es-cuadrado .ms-video-marco {
	aspect-ratio: 1 / 1;
}

.maria-studio .ms-video-marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.maria-studio .ms-video figcaption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--ms-texto);
}

.maria-studio .ms-acciones .ms-nota {
	margin: 0;
}

.maria-studio .ms-form-cambios {
	margin-top: 8px;
}

.maria-studio .ms-datos-pedido {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 28px 0 0;
	padding: 20px 24px;
	border-radius: 16px;
	background: var(--ms-gris);
	font-size: 0.9rem;
}

.maria-studio .ms-datos-pedido:empty {
	display: none;
}

.maria-studio .ms-datos-pedido dt {
	font-weight: 600;
	color: var(--ms-oscuro);
}

.maria-studio .ms-datos-pedido dd {
	margin: 0;
	color: var(--ms-texto);
	overflow-wrap: anywhere;
}

.maria-studio .ms-whatsapp {
	margin-top: 16px;
	text-align: center;
}

.maria-studio .ms-whatsapp a {
	color: var(--ms-azul);
}

/* Prueba gratis: la invitación a la opción con IA en la página de estado */
.maria-studio [data-ms-cta-studio] a {
	color: var(--ms-azul);
	font-weight: 600;
}

.maria-studio [data-ms-cta-studio] {
	margin-top: 16px;
}

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.maria-studio .ms-trampa {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Landing: las dos opciones (prueba gratis y Studio con IA) */
.maria-studio .ms-opciones {
	margin: 0 0 24px;
}

.maria-studio .ms-opciones-titulo {
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
	color: var(--ms-oscuro);
}

.maria-studio .ms-opciones-grilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Con la prueba gratis apagada queda una sola tarjeta. */
.maria-studio .ms-opciones.es-una .ms-opciones-grilla {
	grid-template-columns: minmax(0, 1fr);
}

.maria-studio .ms-opcion {
	position: relative;
	display: block;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.maria-studio .ms-opcion input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.maria-studio .ms-opcion-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px;
	border: 2px solid var(--ms-borde);
	border-radius: 24px;
	background: var(--ms-blanco);
	box-shadow: var(--ms-sombra);
	transition: all 0.2s ease;
}

.maria-studio .ms-opcion:hover .ms-opcion-cuerpo {
	border-color: var(--ms-azul);
}

.maria-studio .ms-opcion input:checked + .ms-opcion-cuerpo {
	border-color: var(--ms-azul);
	background: rgba(66, 133, 244, 0.04);
}

.maria-studio .ms-opcion input:focus-visible + .ms-opcion-cuerpo {
	box-shadow: var(--ms-anillo);
}

.maria-studio .ms-opcion input:disabled + .ms-opcion-cuerpo {
	cursor: default;
}

.maria-studio .ms-opcion-etiqueta {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 50px;
	background: rgba(66, 133, 244, 0.1);
	color: var(--ms-azul);
	font-size: 0.85rem;
	font-weight: 600;
}

.maria-studio .ms-opcion-titulo {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ms-oscuro);
}

.maria-studio .ms-opcion-precio {
	font-weight: 600;
	color: var(--ms-oscuro);
}

.maria-studio .ms-opcion-texto {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ms-texto);
}

.maria-studio .ms-opcion-estado {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--ms-borde);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ms-oscuro);
}

/* Con sesión pero sin poder usarla (sin el grupo Studio, o la prueba gratis ya usada). */
.maria-studio .ms-opcion.es-bloqueada .ms-opcion-cuerpo {
	background: var(--ms-gris);
}

.maria-studio .ms-opcion.es-bloqueada .ms-opcion-estado {
	color: var(--ms-texto);
}

.maria-studio .ms-opcion-aviso {
	margin: 14px 0 0;
	text-align: center;
}

.maria-studio .ms-opcion-aviso a,
.maria-studio [data-ms-envio-studio] a {
	color: var(--ms-azul);
	font-weight: 600;
}

/* Acceso con el campus (login / sin permiso) y carga inicial */
.maria-studio .ms-acceso {
	background: var(--ms-blanco);
	border-radius: 24px;
	box-shadow: var(--ms-sombra);
	padding: 36px;
	text-align: center;
}

.maria-studio .ms-nav-acceso {
	justify-content: center;
	flex-wrap: wrap;
	border-top: 0;
	padding-top: 8px;
}

.maria-studio .ms-nav-acceso .ms-btn {
	margin-left: 0;
	text-decoration: none;
}

/* Ingreso en la misma página: Google o magic link (maria-auth) */
.maria-studio .ms-ingreso {
	max-width: 420px;
	margin: 20px auto 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.maria-studio .ms-ingreso .ms-ingreso-google {
	margin-left: 0;
	justify-content: center;
	text-decoration: none;
}

.maria-studio .ms-ingreso-o {
	margin: 0;
	color: var(--ms-texto);
	font-size: 0.9rem;
}

.maria-studio .ms-ingreso-email {
	display: flex;
	gap: 8px;
}

.maria-studio .ms-ingreso-email input[type="email"] {
	flex: 1;
	min-width: 0;
}

.maria-studio .ms-ingreso-email .ms-btn-secundario {
	white-space: nowrap;
}

.maria-studio .ms-ingreso-estado {
	margin: 0;
	font-size: 0.9rem;
	color: var(--ms-texto);
}

.maria-studio .ms-ingreso-estado.es-error {
	color: #c5221f;
}

.maria-studio .ms-ingreso-campus {
	margin: 24px 0 0;
	font-size: 0.85rem;
	color: var(--ms-texto);
}

.maria-studio .ms-ingreso-campus a {
	color: var(--ms-azul);
	font-weight: 600;
}

.maria-studio .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.maria-studio .ms-ingreso-email {
		flex-direction: column;
	}
}

.maria-studio .ms-cargando {
	text-align: center;
	color: var(--ms-texto);
	font-size: 0.95rem;
}

.maria-studio .ms-saludo {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--ms-oscuro);
}

.maria-studio .ms-saludo:empty {
	display: none;
}

/* Bloques numerados del formulario de una pantalla */
.maria-studio .ms-bloque {
	padding: 24px 0;
	border-bottom: 1px solid var(--ms-borde);
}

.maria-studio .ms-bloque:first-of-type {
	padding-top: 8px;
}

.maria-studio .ms-bloque .ms-paso-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.3rem;
}

.maria-studio .ms-bloque-num {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ms-blanco);
	background: var(--ms-gradiente);
}

.maria-studio .ms-campo-nota {
	margin-top: 20px;
	margin-bottom: 0;
}

.maria-studio .ms-form .ms-check {
	margin-top: 24px;
}

/* ───────────── Web [maria_studio]: hero, cómo funciona, pedido y preguntas ───────────── */

.maria-studio .ms-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: 48px;
	padding: 16px 0 24px;
}

.maria-studio .ms-hero-titulo {
	max-width: 16ch;
	margin: 0 0 20px;
	font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ms-oscuro);
}

.maria-studio .ms-hero-bajada {
	max-width: 46ch;
	margin: 0 0 32px;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ms-texto);
}

.maria-studio .ms-hero-accion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.maria-studio .ms-hero-nota {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ms-oscuro);
}

/*
 * El celular y la línea de tiempo del editor. Cada palabra del subtítulo y cada clip tienen sus
 * tiempos en --t/--d y --desde/--hasta (fracciones de --ms-dur), así todo avanza con el cabezal.
 */
.maria-studio .ms-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.maria-studio .ms-demo-celular {
	position: relative;
	z-index: 1;
	width: 232px;
	padding: 9px;
	border-radius: 34px;
	background: var(--ms-oscuro);
	box-shadow: 0 24px 48px rgba(32, 33, 36, 0.18);
}

.maria-studio .ms-demo-pantalla {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 26px;
	background: linear-gradient(165deg, #D2E3FC 0%, #8AB4F8 48%, var(--ms-azul-hondo) 100%);
}

/* Alguien hablando a cámara: cabeza y hombros. */
.maria-studio .ms-demo-persona,
.maria-studio .ms-demo-persona::before {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(32, 33, 36, 0.78);
}

.maria-studio .ms-demo-persona {
	bottom: -2%;
	width: 84%;
	height: 34%;
	border-radius: 50% 50% 0 0;
}

.maria-studio .ms-demo-persona::before {
	content: "";
	bottom: 92%;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 50%;
}

.maria-studio .ms-demo-marca {
	position: absolute;
	top: 16px;
	left: 14px;
	padding: 5px 12px;
	border-radius: 50px;
	background: var(--ms-blanco);
	color: var(--ms-oscuro);
	font-size: 0.75rem;
	font-weight: 700;
	animation: ms-aparece 0.4s ease calc(0.8 * var(--ms-dur) + var(--ms-arranque)) both;
}

.maria-studio .ms-demo-subtitulo {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6%;
	margin: 0;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--ms-blanco);
	text-shadow: 0 2px 6px rgba(32, 33, 36, 0.55);
}

.maria-studio .ms-demo-subtitulo span {
	display: inline-block;
	padding: 0 3px;
	border-radius: 6px;
	animation:
		ms-dicha 0.2s linear calc(var(--t) * var(--ms-dur) + var(--ms-arranque)) both,
		ms-resalte calc(var(--d) * var(--ms-dur)) steps(1) calc(var(--t) * var(--ms-dur) + var(--ms-arranque));
}

.maria-studio .ms-demo-linea {
	--ms-col: 84px;
	position: relative;
	width: 100%;
	max-width: 360px;
	margin-top: -28px;
	padding: 40px 14px 14px;
	border: 1px solid var(--ms-borde);
	border-radius: 16px;
	background: var(--ms-blanco);
}

.maria-studio .ms-demo-pista {
	display: grid;
	grid-template-columns: var(--ms-col) minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.maria-studio .ms-demo-pista-nombre {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ms-texto);
	white-space: nowrap;
}

.maria-studio .ms-demo-pista-carril {
	position: relative;
	height: 12px;
	border-radius: 4px;
	background: var(--ms-gris);
}

.maria-studio .ms-demo-clip {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--desde) * 100%);
	width: calc((var(--hasta) - var(--desde)) * 100%);
	border-radius: 4px;
	background: var(--ms-azul);
	animation: ms-llena calc((var(--hasta) - var(--desde)) * var(--ms-dur)) linear calc(var(--desde) * var(--ms-dur) + var(--ms-arranque)) both;
}

.maria-studio .ms-demo-pista:nth-child(2) .ms-demo-clip {
	background: var(--ms-amarillo);
}

.maria-studio .ms-demo-pista:nth-child(3) .ms-demo-clip {
	background: var(--ms-verde);
}

/* El material del cliente ya está desde el principio. */
.maria-studio .ms-demo-pista.es-base .ms-demo-clip {
	background: var(--ms-oscuro);
	animation: none;
}

.maria-studio .ms-demo-cabezal {
	position: absolute;
	top: 36px;
	bottom: 10px;
	left: calc(14px + var(--ms-col) + 8px);
	right: 14px;
	pointer-events: none;
}

.maria-studio .ms-demo-cabezal::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	margin-left: -1px;
	background: var(--ms-rojo);
	animation: ms-cabezal var(--ms-dur) linear var(--ms-arranque) both;
}

@keyframes ms-llena {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes ms-cabezal {
	from { left: 0; }
	to { left: 100%; }
}

@keyframes ms-dicha {
	from { opacity: 0.35; }
	to { opacity: 1; }
}

@keyframes ms-resalte {
	from {
		opacity: 1;
		background: var(--ms-amarillo);
		color: var(--ms-oscuro);
		text-shadow: none;
	}
}

@keyframes ms-aparece {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* Secciones */
.maria-studio .ms-seccion {
	margin-top: 80px;
}

.maria-studio .ms-seccion-titulo {
	margin: 0 0 28px;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ms-oscuro);
	outline: none;
}

/* Cómo funciona: una secuencia sobre una sola línea, como la del editor. */
.maria-studio .ms-pasos {
	counter-reset: ms-paso;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.maria-studio .ms-pasos-item {
	counter-increment: ms-paso;
	position: relative;
	margin: 0;
	padding: 36px 0 0;
	border-top: 2px solid var(--ms-borde);
}

.maria-studio .ms-pasos-item::before {
	content: counter(ms-paso);
	position: absolute;
	top: -17px;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ms-oscuro);
	color: var(--ms-blanco);
	font-size: 0.9rem;
	font-weight: 700;
}

.maria-studio .ms-pasos-titulo {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ms-oscuro);
}

.maria-studio .ms-pasos-texto {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ms-texto);
}

/* Preguntas frecuentes */
.maria-studio .ms-pregunta {
	border-bottom: 1px solid var(--ms-borde);
}

.maria-studio .ms-pregunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ms-oscuro);
	list-style: none;
	cursor: pointer;
}

.maria-studio .ms-pregunta summary::-webkit-details-marker {
	display: none;
}

.maria-studio .ms-pregunta summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ms-azul);
	transition: transform 0.2s ease;
}

.maria-studio .ms-pregunta[open] summary::after {
	transform: rotate(45deg);
}

.maria-studio .ms-pregunta p {
	max-width: 65ch;
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ms-texto);
}

/* Sin funnels publicados */
.maria-studio .ms-pronto {
	max-width: 640px;
	padding: 48px 0;
}

/* Tablet: el celular va debajo del texto. */
@media (max-width: 860px) {
	.maria-studio .ms-hero {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.maria-studio .ms-pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

/* Celular */
@media (max-width: 640px) {
	.maria-studio .ms-hero {
		padding-top: 0;
	}

	.maria-studio .ms-hero-bajada {
		font-size: 1.05rem;
	}

	.maria-studio .ms-seccion {
		margin-top: 56px;
	}

	.maria-studio .ms-seccion-titulo {
		font-size: 1.5rem;
	}

	/* En el celular los pasos van en columna, con la línea a la izquierda. */
	.maria-studio .ms-pasos {
		grid-template-columns: 1fr;
		gap: 0;
		padding-left: 16px;
	}

	.maria-studio .ms-pasos-item {
		padding: 0 0 28px 32px;
		border-top: 0;
		border-left: 2px solid var(--ms-borde);
	}

	.maria-studio .ms-pasos-item:last-child {
		padding-bottom: 0;
		border-left-color: transparent;
	}

	.maria-studio .ms-pasos-item::before {
		top: -2px;
		left: -17px;
	}

	.maria-studio {
		padding: 24px 12px 40px;
	}

	.maria-studio .ms-titulo {
		font-size: 2rem;
	}

	.maria-studio .ms-form,
	.maria-studio .ms-envio,
	.maria-studio .ms-exito,
	.maria-studio .ms-acceso {
		padding: 24px 18px;
		border-radius: 20px;
	}

	.maria-studio .ms-grilla,
	.maria-studio .ms-tarjetas,
	.maria-studio .ms-opciones-grilla {
		grid-template-columns: 1fr;
	}

	.maria-studio .ms-opcion-cuerpo {
		padding: 18px;
		border-radius: 20px;
	}

	.maria-studio .ms-formatos {
		gap: 8px;
	}

	.maria-studio .ms-formato-cuerpo {
		padding: 14px 6px;
	}

	.maria-studio .ms-formato-marco {
		height: 44px;
	}

	.maria-studio .ms-formato-uso {
		display: none;
	}

	.maria-studio .ms-progreso-texto {
		display: none;
	}

	.maria-studio .ms-progreso-item.es-actual .ms-progreso-texto {
		display: none;
	}

	.maria-studio .ms-progreso-item::before {
		left: calc(-50% + 16px);
		right: calc(50% + 16px);
	}

	.maria-studio .ms-nav .ms-btn {
		padding: 14px 26px;
	}

	.maria-studio .ms-tarjeta-estado {
		padding: 24px 18px;
		border-radius: 20px;
	}

	/* La página de estado tiene solo 4 etapas: el nombre entra */
	.maria-studio.ms-estado .ms-progreso-texto,
	.maria-studio.ms-estado .ms-progreso-item.es-actual .ms-progreso-texto {
		display: block;
		text-align: center;
		font-size: 0.7rem;
		line-height: 1.2;
	}

	.maria-studio .ms-video.es-vertical,
	.maria-studio .ms-video.es-cuadrado {
		flex: 1 1 100%;
		max-width: 320px;
		margin: 0 auto;
	}

	.maria-studio .ms-datos-pedido {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.maria-studio .ms-datos-pedido dd {
		margin-bottom: 8px;
	}

	.maria-studio .ms-resumen dl {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.maria-studio .ms-resumen dd {
		margin-bottom: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.maria-studio * {
		transition: none !important;
	}

	/* El hero queda quieto en su estado final, con una palabra resaltada como ejemplo. */
	.maria-studio .ms-demo-marca,
	.maria-studio .ms-demo-subtitulo span,
	.maria-studio .ms-demo-clip,
	.maria-studio .ms-demo-cabezal::before,
	.maria-studio .ms-dictar.es-escuchando svg {
		animation: none;
	}

	.maria-studio .ms-demo-cabezal::before {
		left: 100%;
	}

	.maria-studio .ms-demo-subtitulo span:nth-child(3) {
		background: var(--ms-amarillo);
		color: var(--ms-oscuro);
		text-shadow: none;
	}
}