/**
 * Recomendación personalizada 2026 — estilos propios (el chrome vive en chrome-2026.css).
 *
 * No hay mockup de esta página: se arma con las piezas del design system ya transcritas
 * (banda oscura con trama de puntos de Nosotros/Embajadores, tarjetas numeradas de los
 * objetivos, campos del formulario de Embajadores, botones y tarjeta de producto del chrome).
 * Gutter maestro: max(56px, calc(50% - 664px)); en móvil 18px. Pedido de gerencia (18-09):
 * más aire entre bloques ("se siente todo muy comprimido") y sin la marca de tres barras.
 *
 * Trampas del tema viejo (Bricks + Automatic.css se cuelan por wp_head) que aquí se
 * neutralizan una por una: <section> centrada y en columna con gap, gap en los <div>
 * hijos de <section>, <button> con padding / min-width / display propios, <label> en
 * bloque, gris y con margen, <fieldset> y <legend> con su caja por defecto, otra fuente
 * y otra altura de línea en h1/h2/h3, `input` y `select` con borde, alto y ancho propios, y un
 * `*:focus{outline:none !important}` global (por eso el foco visible lleva !important).
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.mps-quiz-2026 { background: #FFFFFF; }

/* line-height: el tema pone en <body> una longitud (calc(6px + 2ex) ≈ 24.6px) que se hereda como
   valor absoluto e infla todo lo que no declara el suyo (eyebrows, rótulos de 11px…). */
.mpsq-main {
	display: block; width: 100%; max-width: none; margin: 0; padding: 0; line-height: normal;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif; color: #111111;
	/* Red de seguridad a 375px: si algo desborda, lo recorta main y la página no gana scroll horizontal.
	   clip (no hidden) para no convertir a main en contenedor de scroll. */
	overflow-x: hidden; overflow-x: clip;
	/* Al cambiar de paso el JS sube hasta aquí: que no quede bajo el nav pegajoso (anuncio + nav ≈ 90px). */
	scroll-margin-top: 90px;
}
body.admin-bar .mpsq-main { scroll-margin-top: 122px; }
/* El atributo hidden manda siempre: las vistas declaran display:flex y no deben "desocultarse". */
.mpsq-main [hidden] { display: none !important; }
.mpsq-main h1, .mpsq-main h2, .mpsq-main h3, .mpsq-main legend, .mpsq-main fieldset, .mpsq-main ol, .mpsq-main li,
.mpsq-main em, .mpsq-main form, .mpsq-main select, .mpsq-main option, .mpsq-main article {
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
}
.mpsq-main .mpsc-eyebrow { line-height: normal; }
.mpsq-main i { font-style: normal; }
.mpsq-b { font-weight: 800; }
.mpsq-l { font-weight: 300; }
.mpsq-l em { color: #C73D2C; }

/* Con JavaScript (html.mpsq-js, lo pone un script en <head> antes del primer pintado) se ven las
   preguntas y se esconden los enlaces por objetivo; sin JavaScript, o si quiz-2026.js no llega a
   cargar (ese script retira la clase a los 6 s), al revés. */
.mpsq-pasos-lista { display: none; }
.mpsq-js .mpsq-pasos-lista { display: flex; }
.mpsq-js .mpsq-sinjs { display: none; }
/* El botón "Empezar" va por clase y no por el atributo hidden: la clase está desde <head>, así el
   botón no aparece "de golpe" cuando carga el script (sin salto de layout en la portada). */
.mps-2026 .mpsq-empezar { display: none; }
.mpsq-js .mps-2026 .mpsq-empezar { display: inline-flex; }

/* Foco visible: el tema apaga el outline de TODO con !important; aquí se vuelve a encender. */
.mpsq-main a:focus-visible,
.mps-2026 .mpsq-empezar:focus-visible, .mps-2026 .mpsq-siguiente:focus-visible, .mps-2026 .mpsq-combo-btn:focus-visible,
.mps-2026 .mpsq-atras:focus-visible, .mps-2026 .mpsq-reiniciar:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px; }
/* Los títulos reciben el foco por programa (tabindex=-1) al cambiar de paso: sin anillo. */
.mpsq-main [data-mpsq-foco]:focus { outline: none; }

/* ============ Portada ============ */

.mpsq-portada {
	display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: none; margin: 0;
	padding: 104px max(56px, calc(50% - 664px));
	background-color: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
/* gap explícito: Automatic.css le pone gap (30px) a todo <div> hijo directo de <section>. */
.mpsq-portada-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: center; min-height: 392px; width: 100%; }
.mpsq-portada-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; min-width: 0; }
/* "RECOMENDACIÓN" son 13 letras en 800: el tamaño es fluido para que nunca se parta a mitad de palabra
   (≈ 8.6em de ancho: 66px en 1440, 41px en 901; en móvil manda el bloque de abajo). */
.mpsq-h1 {
	margin: 0; max-width: none; font-size: clamp(40px, 4.6vw, 72px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em;
	text-transform: uppercase; color: #FFFFFF; overflow-wrap: break-word;
}
.mpsq-portada-txt p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 500px; color: #D6D4D1; }
.mpsq-portada-txt p.mpsq-preelegido { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; color: #9A9A9A; }
.mpsq-preelegido b { color: #FFFFFF; font-weight: 800; }
.mpsq-portada-ctas { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
/* El tema le mete padding, min-width, display:block y text-align a todo <button>: se declara todo
   (menos display: lo gobiernan las dos reglas de arriba). */
.mps-2026 .mpsq-empezar {
	-webkit-appearance: none; appearance: none;
	flex-direction: row; align-items: center; justify-content: center;
	width: auto; min-width: 0; min-height: 0; height: 54px; margin: 0; padding: 0 36px; box-shadow: none;
	font-family: inherit; line-height: 1; text-align: center; cursor: pointer;
}
.mpsq-portada-lado { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }

/* Las cinco preguntas (solo con JS): filas numeradas, como las reglas del Estándar en la Home. */
.mpsq-pasos-lista { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #1E1E1E; }
.mpsq-pasos-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0; padding: 18px 0; border-bottom: 1px solid #1E1E1E; line-height: normal; }
.mpsq-pasos-num { font-size: 30px; font-weight: 300; line-height: 1; color: #9A9A9A; padding-top: 1px; }
.mpsq-pasos-txt { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.mpsq-pasos-txt b { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; color: #FFFFFF; }
.mpsq-pasos-txt i { font-size: 12.5px; line-height: 1.5; color: #9A9A9A; }

/* Sin JS: los cuatro objetivos como enlaces a la tienda filtrada. */
.mpsq-sinjs { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }
.mpsq-sinjs-titulo { display: block; padding: 0 0 14px; border-bottom: 1px solid #1E1E1E; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #9A9A9A; }
.mpsq-sinjs-obj {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
	padding: 18px 0; border-bottom: 1px solid #1E1E1E; text-decoration: none; color: #FFFFFF; transition: color .15s ease;
}
.mpsq-sinjs-obj:hover { color: #C73D2C; }
.mpsq-sinjs-num { font-size: 26px; font-weight: 300; line-height: 1; color: #9A9A9A; }
.mpsq-sinjs-txt { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.mpsq-sinjs-txt b { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; color: inherit; }
.mpsq-sinjs-txt i { font-size: 12.5px; line-height: 1.45; color: #9A9A9A; }
.mpsq-sinjs-obj em { color: #C73D2C; font-size: 16px; }

/* ============ Pasos y resultado: lienzo común ============ */

/* Los pasos son <form> y el resultado <section>: se declara TODO igual para que dé lo mismo. */
.mpsq-paso, .mpsq-resultado {
	display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: none; margin: 0;
	padding: 48px max(56px, calc(50% - 664px)) 112px; min-height: 680px;
	background-color: #FFFFFF; background-image: radial-gradient(rgba(0,0,0,0.045) 1px, transparent 1.2px); background-size: 3px 3px;
}

/* ---- Barra: Atrás · progreso · 01 / 04 ---- */

.mpsq-barra { display: flex; flex-direction: row; align-items: center; gap: 22px; width: 100%; margin: 0 0 64px; padding: 0 0 16px; border-bottom: 1px solid #E4E2E0; }
.mps-2026 .mpsq-atras, .mps-2026 .mpsq-reiniciar {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
	width: auto; min-width: 0; height: 44px; min-height: 0; margin: 0; padding: 0 10px 0 0;
	background: none; border: 0; border-radius: 2px; box-shadow: none; cursor: pointer;
	font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: #111111;
	transition: color .15s ease;
}
.mps-2026 .mpsq-atras:hover, .mps-2026 .mpsq-reiniciar:hover { background: none; color: #C73D2C; }
.mps-2026 .mpsq-atras em, .mps-2026 .mpsq-reiniciar em { color: #C73D2C; font-size: 16px; line-height: 1; }
.mpsq-progreso { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: 1 1 auto; max-width: 360px; margin-left: auto; }
.mpsq-progreso i { display: block; flex: 1 1 0; height: 3px; background: #E4E2E0; transition: background-color .2s ease; }
.mpsq-progreso i.mpsq-on { background: #111111; }
.mpsq-progreso-txt { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #8A8782; white-space: nowrap; }

/* ---- Pregunta: fieldset + legend (título en dos pesos) ---- */

.mpsq-campo, .mpsq-grupo { display: block; width: 100%; min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
/* <legend> tiene un dibujado propio (va "sobre" el borde del fieldset y no admite flex): flotado
   a todo el ancho se comporta como un bloque normal y lo que sigue lo limpia. */
.mpsq-legend { float: left; display: block; box-sizing: border-box; width: 100%; max-width: none; margin: 0 0 48px; padding: 0; color: #111111; }
.mpsq-legend + * { clear: both; }
.mpsq-legend-in { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mpsq-titulo {
	margin: 0; max-width: none; font-size: 48px; font-weight: 400; line-height: 0.98; letter-spacing: -0.02em;
	text-transform: uppercase; color: #111111; overflow-wrap: break-word;
}
.mpsq-ayuda { display: block; font-size: 15px; line-height: 1.6; color: #8A8782; max-width: 560px; }

/* ---- Campos de texto (nombre, WhatsApp, correo): el lenguaje del formulario de Embajadores ---- */

.mpsq-campos { display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; max-width: 760px; min-width: 0; }
#mpsq-paso-1 .mpsq-campos { max-width: none; }
.mpsq-texto { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; max-width: 520px; }
/* Bricks pone a <label> display:block, color gris y margen inferior: se declara. */
.mps-2026 .mpsq-rotulo {
	display: block; margin: 0; padding: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; color: #8A8782;
}
.mps-2026 .mpsq-rotulo i { font-weight: 500; text-transform: none; letter-spacing: 0; }
.mps-2026 .mpsq-grupo-legend { float: left; width: 100%; max-width: none; margin: 0 0 14px; }
.mpsq-grupo-legend + * { clear: both; }
/* 16px SIEMPRE: con menos, iOS hace zoom a la página al enfocar el campo. */
.mps-2026 .mpsq-input {
	-webkit-appearance: none; appearance: none;
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 56px; min-height: 0; margin: 0; padding: 0 16px;
	border: 1px solid #C9C6C1; border-radius: 2px; background: #FFFFFF; box-shadow: none; outline: none;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0; text-transform: none; color: #111111;
	transition: border-color .15s ease;
}
.mps-2026 .mpsq-input:hover { border-color: #8A8782; }
.mps-2026 .mpsq-input:focus { border-color: #111111; box-shadow: none; }
.mps-2026 .mpsq-input:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 2px; }
.mps-2026 .mpsq-input[aria-invalid="true"] { border-color: #C73D2C; }
.mps-2026 .mpsq-input::placeholder { color: #9A9A9A; opacity: 1; font-weight: 400; }
/* Teléfono: prefijo +502 fijo y visible, pegado al campo. */
.mpsq-tel { display: flex; flex-direction: row; align-items: stretch; gap: 0; width: 100%; }
.mpsq-tel-prefijo {
	flex: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; height: 56px; padding: 0 16px;
	border: 1px solid #C9C6C1; border-right: 0; border-radius: 2px 0 0 2px; background: #F5F4F2;
	font-size: 16px; font-weight: 700; line-height: 1; color: #111111;
}
.mps-2026 .mpsq-tel .mpsq-input { flex: 1 1 auto; width: auto; border-radius: 0 2px 2px 0; letter-spacing: 0.04em; }

.mpsq-error { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; color: #C73D2C; }
.mpsq-campo > .mpsq-error, .mpsq-grupo > .mpsq-error { margin-top: 16px; }
/* Honeypot: fuera de pantalla (no display:none: algunos bots saltan los campos ocultos con display). */
.mpsq-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mps-2026 .mpsq-consent {
	display: flex; flex-direction: row; align-items: flex-start; gap: 12px; max-width: 520px; margin: 40px 0 0; padding: 0; cursor: pointer;
	font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; color: #111111;
}
/* Casilla de 22px dentro de una etiqueta clicable entera: el área tocable real es toda la fila. */
.mps-2026 .mpsq-consent input[type="checkbox"] {
	flex: none; width: 22px; height: 22px; min-width: 22px; min-height: 0; margin: 0; padding: 0; cursor: pointer;
	accent-color: #C73D2C; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: auto;
}
.mps-2026 .mpsq-consent input[type="checkbox"]:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 3px; }
.mpsq-consent + .mpsq-error { margin-top: 12px; }

/* ---- Opciones: radios reales (ocultos) + tarjeta como etiqueta ---- */

.mpsq-opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; min-width: 0; margin: 0; padding: 0; }
.mpsq-opciones-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mps-2026 .mpsq-op { position: relative; display: block; min-width: 0; margin: 0; padding: 0; color: #111111; font-weight: 400; line-height: normal; cursor: pointer; }
/* El radio sigue en el DOM y en el orden de tabulación (teclado y lectores de pantalla), solo no se ve.
   El tema le daría width:100%, borde y line-height de 40px: se anula todo. */
.mps-2026 .mpsq-radio {
	position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: -1px; padding: 0;
	border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}
.mpsq-op-caja {
	position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 44px; height: 100%; min-height: 228px;
	padding: 28px 26px 26px; background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 6px;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.mpsq-op:hover .mpsq-op-caja { border-color: #111111; }
.mpsq-op-num { font-size: 46px; font-weight: 300; line-height: 1; color: #8A8782; transition: color .15s ease; }
.mpsq-op-txt { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.mpsq-op-txt b { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; color: inherit; }
.mpsq-op-txt span { font-size: 13px; line-height: 1.55; color: #8A8782; transition: color .15s ease; }
/* Marca de "elegida": un punto rojo (gerencia pidió retirar la marca de barras de todo el sitio). */
.mpsq-op-check { position: absolute; top: 26px; right: 24px; width: 10px; height: 10px; border-radius: 999px; background: #C73D2C; opacity: 0; transition: opacity .15s ease; }
/* Compactas (género, edad): sin texto de detalle, el numeral a la izquierda y menos alto. */
.mpsq-opciones-compactas .mpsq-op-caja { flex-direction: row; align-items: center; gap: 18px; min-height: 96px; padding: 22px 44px 22px 24px; }
.mpsq-opciones-compactas .mpsq-op-num { flex: none; font-size: 34px; }
.mpsq-opciones-compactas .mpsq-op-txt { flex: 1 1 auto; }
.mpsq-opciones-compactas .mpsq-op-txt b { font-size: 17px; }
.mpsq-opciones-compactas .mpsq-op-check { top: 50%; right: 20px; transform: translateY(-50%); }
/* Elegida: la tarjeta se invierte (blanco → negro), el numeral pasa a rojo y aparece el punto. */
.mpsq-radio:checked + .mpsq-op-caja { background: #0B0B0B; border-color: #0B0B0B; color: #FFFFFF; }
.mpsq-radio:checked + .mpsq-op-caja .mpsq-op-num { color: #C73D2C; }
.mpsq-radio:checked + .mpsq-op-caja .mpsq-op-txt span { color: #9A9A9A; }
.mpsq-radio:checked + .mpsq-op-caja .mpsq-op-check { opacity: 1; }
/* El anillo de foco va en la tarjeta (el radio es invisible). :focus-visible no se enciende con el mouse. */
.mpsq-radio:focus-visible + .mpsq-op-caja { outline: 2px solid #C73D2C !important; outline-offset: 3px; }

/* ---- Acciones del paso ---- */

.mpsq-acciones { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 18px; width: 100%; margin: 56px 0 0; }
/* Contorno mientras falta algo; rojo en cuanto el paso está completo (mpsq-elegido lo pone el JS). Elegir
   una tarjeta no avanza solo: este botón es SIEMPRE el que pasa al siguiente paso. */
.mps-2026 .mpsq-siguiente {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
	width: auto; min-width: 0; min-height: 0; height: 56px; margin: 0; padding: 0 32px; box-shadow: none;
	background: transparent; color: #111111; border: 1.5px solid #111111; border-radius: 2px;
	font-family: inherit; line-height: 1; text-align: center; cursor: pointer;
}
.mps-2026 .mpsq-siguiente:hover { background: #111111; color: #FFFFFF; }
.mps-2026 .mpsq-elegido .mpsq-siguiente { background: #C73D2C; border-color: #C73D2C; color: #FFFFFF; }
.mps-2026 .mpsq-elegido .mpsq-siguiente:hover { background: #B23425; border-color: #B23425; color: #FFFFFF; }
.mps-2026 .mpsq-siguiente em { font-size: 16px; line-height: 1; }

/* ============ Resultado ============ */

.mpsq-res-cab { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; margin: 0 0 64px; }
.mpsq-res-cab-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
/* "<Nombre>, esto es lo que te recomendamos para <objetivo>": una frase, no un titular de dos palabras. */
.mpsq-res-titulo {
	margin: 0; max-width: 900px; font-size: 42px; font-weight: 400; line-height: 1.04; letter-spacing: -0.02em;
	text-transform: uppercase; color: #111111; overflow-wrap: anywhere;
}
.mpsq-res-titulo #mpsq-res-obj { color: #C73D2C; }
.mps-2026 .mpsq-reiniciar { flex: none; height: auto; padding: 10px 0; }

/* ---- Oferta Grand Slam (solo si existe el producto): tarjeta destacada, antes del combo ---- */

.mpsq-oferta-slot { display: block; width: 100%; margin: 0 0 72px; }
.mpsq-oferta {
	display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; width: 100%; margin: 0; overflow: hidden;
	border-radius: 6px; background-color: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsq-oferta-img { position: relative; display: block; min-height: 320px; background: #FFFFFF; }
/* border-radius: 0 — el tema redondea toda <img>; aquí el redondeo lo da la tarjeta. */
.mpsq-oferta-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 24px; display: block; border-radius: 0; }
.mpsq-oferta-txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; min-width: 0; padding: 48px; }
.mpsq-oferta-rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #C73D2C; }
.mpsq-oferta-nombre { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; overflow-wrap: anywhere; }
.mpsq-oferta-nombre:hover { color: #FFFFFF; }
.mpsq-oferta-desc { font-size: 15px; line-height: 1.6; color: #D6D4D1; max-width: 560px; }
.mpsq-oferta-desc p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #D6D4D1; }
.mpsq-oferta-desc ul, .mpsq-oferta-desc ol { margin: 0 0 10px; padding: 0 0 0 20px; }
.mpsq-oferta-desc ul { list-style: disc outside; }
.mpsq-oferta-desc ol { list-style: decimal outside; }
.mpsq-oferta-desc li { margin: 0 0 4px; font-size: 15px; line-height: 1.6; color: #D6D4D1; }
.mpsq-oferta-desc > :last-child { margin-bottom: 0; }
.mpsq-oferta-pie { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.mpsq-oferta-precio { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #FFFFFF; }
.mpsq-oferta-precio del { color: #9A9A9A; font-size: 18px; font-weight: 400; }

/* ---- Combo ---- */

.mpsq-combo { display: flex; flex-direction: column; align-items: stretch; gap: 28px; width: 100%; min-width: 0; }
.mpsq-combo-titulo { margin: 0; max-width: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.3; color: #8A8782; }
/* Lista de productos: rejilla de 3. Cada ítem = rótulo (01 · Base) · motivo · tarjeta real · presentación. */
.mpsq-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; align-items: stretch; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; }
.mpsq-item { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; margin: 0; padding: 0; line-height: normal; }
.mpsq-item > .mpsc-card { flex: 1 1 auto; min-width: 0; }
/* Con subgrid las cuatro filas (rótulo, motivo, tarjeta, presentación) se alinean entre ítems aunque un
   motivo ocupe más líneas. Sin subgrid queda la columna flex de arriba, que también se ve bien. */
@supports (grid-template-rows: subgrid) {
	.mpsq-item { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
}
.mpsq-item-cab { display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 16px 0 0; border-top: 1px solid #111111; }
.mpsq-item-num { font-size: 30px; font-weight: 300; line-height: 1; color: #111111; }
.mpsq-item-rol { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C73D2C; }
.mpsq-item-motivo { margin: 0; font-size: 13.5px; line-height: 1.55; color: #8A8782; }
.mps-2026 .mpsq-cargando { opacity: 0.55; pointer-events: none; }

/* Presentación: selector compacto (variables) o texto (simples / una sola). */
.mpsq-pres { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.mps-2026 .mpsq-pres-rotulo { display: block; margin: 0; padding: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; color: #8A8782; }
.mpsq-pres-fija { display: block; min-height: 48px; padding: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #111111; }
/* El tema le pone a <select> su propio borde, alto de línea y ancho; iOS hace zoom con menos de 16px. */
.mps-2026 .mpsq-pres-select {
	display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 48px; min-height: 0; margin: 0; padding: 0 12px;
	border: 1px solid #C9C6C1; border-radius: 2px; background-color: #FFFFFF; box-shadow: none; outline: none; cursor: pointer;
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 16px; font-weight: 600; line-height: normal; letter-spacing: 0; text-transform: none; color: #111111;
	-webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto;
}
.mps-2026 .mpsq-pres-select:focus { border-color: #111111; }
.mps-2026 .mpsq-pres-select:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 2px; }

.mpsq-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; padding: 48px 40px; border: 1px dashed #C9C6C1; border-radius: 6px; background: #FFFFFF; }
.mpsq-vacio > span { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.mpsq-vacio p { margin: 0; font-size: 14px; line-height: 1.6; color: #8A8782; max-width: 520px; }

/* Total + acciones: panel negro con trama, como la banda de asesoría de la Home. */
.mpsq-res-pie {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: center; width: 100%;
	margin: 72px 0 0; padding: 48px; border-radius: 6px;
	background-color: #0B0B0B; color: #FFFFFF;
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.2px); background-size: 3px 3px;
}
.mpsq-total { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.mpsq-total > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #9A9A9A; }
.mpsq-total > b { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #FFFFFF; }
.mpsq-total > i { font-size: 12.5px; line-height: 1.55; color: #9A9A9A; max-width: 420px; }
.mpsq-res-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; }
.mps-2026 .mpsq-combo-btn {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
	width: 100%; min-width: 0; min-height: 0; height: 58px; margin: 0; padding: 0 24px; box-shadow: none;
	font-family: inherit; line-height: 1.1; text-align: center; white-space: normal; cursor: pointer;
}
.mps-2026 .mpsq-combo-btn:disabled { cursor: default; }
.mpsq-res-ctas .mpsc-btn { white-space: normal; text-align: center; line-height: 1.15; }
.mpsq-link-claro {
	align-self: center; margin-top: 6px; padding-bottom: 3px; border-bottom: 2px solid #C73D2C;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; color: #FFFFFF; text-decoration: none;
}
.mpsq-link-claro:hover { color: #C73D2C; }
.mpsq-link-claro em { color: #C73D2C; }

/* Resultado de "Agregar combo" (qué entró, qué falta elegir desde su ficha). */
.mpsq-nota { display: block; width: 100%; margin: 28px 0 0; padding: 16px 18px; border: 1px solid #E4E2E0; border-left: 4px solid #111111; border-radius: 2px; background: #FFFFFF; font-size: 14px; line-height: 1.55; color: #111111; }
.mpsq-nota a { color: #C73D2C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.mpsq-aviso-medico {
	display: block; width: 100%; max-width: 900px; margin: 40px 0 0; padding: 16px 18px;
	border: 1px solid #E4E2E0; border-left: 4px solid #C73D2C; border-radius: 2px; background: #FAFAF9;
	font-size: 13px; line-height: 1.6; color: #111111;
}

/* ============ Entre 901 y 1180px ============ */

@media (min-width: 901px) and (max-width: 1180px) {
	.mpsq-portada-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
	.mpsq-opciones-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mpsq-op-caja { min-height: 190px; gap: 30px; }
	.mpsq-opciones-compactas .mpsq-op-caja { min-height: 88px; }
	.mpsq-res-titulo { font-size: 34px; }
	.mpsq-lista { gap: 14px 18px; }
	.mpsq-res-pie { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; padding: 40px; }
	.mpsq-oferta-txt { padding: 36px; }
	.mpsq-oferta-nombre { font-size: 28px; }
}

/* ============ Móvil (≤ 900px) ============
   Una columna, tarjetas de opción a todo el ancho (área tocable ≥ 48px), combo en carrusel
   horizontal con snap (como los bloques móviles de la Home), campos a 16px y sin scroll horizontal
   de página a 375px. Va DESPUÉS del @supports de subgrid: a igual especificidad gana el orden. */

@media (max-width: 900px) {
	/* En móvil la barra pegajosa es solo el nav (~56px), sin la tira de anuncio. */
	.mpsq-main { scroll-margin-top: 60px; }
	body.admin-bar .mpsq-main { scroll-margin-top: 106px; }

	.mpsq-portada { padding: 64px 18px 56px; }
	.mpsq-portada-in { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; }
	.mpsq-portada-txt { gap: 22px; }
	/* 339px útiles a 375: 10vw = 37.5px → "RECOMENDACIÓN" ≈ 322px, entra en una línea. */
	.mpsq-h1 { font-size: clamp(30px, 10vw, 54px); }
	.mpsq-portada-txt p { font-size: 16px; max-width: none; }
	.mpsq-portada-txt p.mpsq-preelegido { font-size: 12px; }
	.mpsq-portada-ctas { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 12px; margin-top: 6px; }
	.mpsq-portada-ctas .mpsc-btn, .mps-2026 .mpsq-empezar { width: 100%; }
	/* Declutter móvil (21-09): "Empezar" queda como único botón; el asesor pasa a enlace centrado
	   con 44px de toque. Incluye :hover porque en táctil queda pegado y volvería el fondo blanco. */
	.mps-2026 .mpsq-portada-ctas .mpsc-btn-outline-light,
	.mps-2026 .mpsq-portada-ctas .mpsc-btn-outline-light:hover {
		align-self: center; width: auto; height: auto; min-height: 44px; padding: 0 4px;
		background: none; border-color: transparent; color: #FFFFFF; font-size: 13px; letter-spacing: 0.06em;
		text-decoration: underline; text-decoration-color: rgba(255,255,255,0.45); text-decoration-thickness: 1.5px; text-underline-offset: 6px;
	}
	/* Filas más livianas: numeral chico y centrado; sin los subtextos la portada entra en una pantalla. */
	.mpsq-pasos-lista li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 0; }
	.mpsq-pasos-num { font-size: 20px; padding-top: 0; }
	.mpsq-pasos-txt b { font-size: 15.5px; }
	/* Los subtextos ("Hombre · Mujer…") adelantan lo que cada paso ya muestra y el párrafo ya dice "cinco preguntas". */
	.mpsq-pasos-txt i { display: none; }

	/* Sin la trama de puntos: en móvil ensucia detrás de las tarjetas. */
	.mpsq-paso, .mpsq-resultado { padding: 28px 18px 72px; min-height: 0; background-image: none; }
	.mpsq-barra { gap: 14px; margin-bottom: 40px; }
	/* El paso ya se ve en la barra y en el eyebrow "Paso 01": fuera el "01 / 04" visual. El .mpsc-sr
	   ("Paso N de 4") y #mpsq-live siguen para lectores de pantalla. El contenedor sale del flujo
	   para que el ítem vacío no deje los 14px de gap al final de la barra. */
	.mpsq-progreso-txt > span[aria-hidden='true'] { display: none; }
	.mpsq-progreso-txt { position: absolute; }
	.mps-2026 .mpsq-atras { font-size: 11px; }
	.mpsq-progreso { max-width: none; }
	.mpsq-legend { margin-bottom: 32px; }
	.mpsq-legend-in { gap: 12px; }
	.mpsq-titulo { font-size: 34px; }
	.mpsq-ayuda { font-size: 14.5px; max-width: none; }

	.mpsq-campos { gap: 32px; max-width: none; }
	.mpsq-texto, .mps-2026 .mpsq-consent { max-width: none; }
	.mps-2026 .mpsq-consent { margin-top: 32px; }

	.mpsq-opciones, .mpsq-opciones-3, .mpsq-opciones-4 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* Una columna: numeral a la izquierda, texto a la derecha, punto centrado a la derecha. */
	.mpsq-op-caja, .mpsq-opciones-compactas .mpsq-op-caja { flex-direction: row; align-items: center; gap: 14px; min-height: 80px; padding: 18px 48px 18px 18px; }
	.mpsq-opciones-compactas .mpsq-op-caja { min-height: 68px; padding-top: 14px; padding-bottom: 14px; }
	.mpsq-op-num, .mpsq-opciones-compactas .mpsq-op-num { flex: none; width: 46px; font-size: 30px; }
	/* Género y Edad: el 01/02/03 es decorativo y, elegido, duplicaba el rojo con el punto. Objetivo
	   (con detalle) conserva su numeral. Misma especificidad que la de arriba: gana por orden. */
	.mpsq-opciones-compactas .mpsq-op-num { display: none; }
	.mpsq-op-txt { flex: 1 1 auto; gap: 4px; }
	.mpsq-op-txt b, .mpsq-opciones-compactas .mpsq-op-txt b { font-size: 15.5px; }
	.mpsq-op-txt span { font-size: 12.5px; line-height: 1.45; }
	.mpsq-op-check, .mpsq-opciones-compactas .mpsq-op-check { top: 50%; right: 18px; transform: translateY(-50%); }
	.mpsq-acciones { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 36px; }
	.mps-2026 .mpsq-siguiente { width: 100%; }

	.mpsq-res-cab { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 40px; }
	.mps-2026 .mpsq-reiniciar { align-self: flex-start; }
	.mpsq-res-titulo { font-size: 27px; line-height: 1.08; max-width: none; }

	.mpsq-oferta-slot { margin-bottom: 48px; }
	.mpsq-oferta { grid-template-columns: minmax(0, 1fr); }
	.mpsq-oferta-img { min-height: 0; aspect-ratio: 4 / 3; }
	.mpsq-oferta-txt { padding: 28px 22px 30px; gap: 14px; }
	.mpsq-oferta-nombre { font-size: 26px; }
	.mpsq-oferta-desc, .mpsq-oferta-desc p, .mpsq-oferta-desc li { font-size: 14px; }
	.mpsq-oferta-pie { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
	.mpsq-oferta-pie .mpsc-btn { width: 100%; }

	.mpsq-combo { gap: 20px; }
	/* Carrusel que sangra hasta los bordes: el desborde es SUYO (overflow-x en la lista), la página no gana
	   scroll horizontal. El padding-top y el margen negativo dejan sitio al anillo de foco de las tarjetas. */
	.mpsq-lista {
		display: flex; flex-direction: row; align-items: stretch; gap: 14px;
		margin: -4px -18px 0; padding: 4px 18px 10px; width: auto; min-width: 0;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.mpsq-lista::-webkit-scrollbar { display: none; }
	.mpsq-item { display: flex; flex-direction: column; flex: none; width: 276px; scroll-snap-align: start; gap: 12px; }
	.mpsq-item > .mpsc-card { flex: 1 1 auto; }
	.mpsq-item-cab { padding-top: 12px; }
	.mpsq-item-num { font-size: 26px; }
	.mpsq-item-motivo { font-size: 13px; }
	/* La tarjeta del chrome mide 250px de imagen: en el carrusel se aprieta como en la tienda móvil. */
	.mpsq-item .mpsc-card-img { height: 200px; }
	.mpsq-item .mpsc-card-nombre { font-size: 14px; overflow-wrap: anywhere; }
	.mpsq-item .mpsc-card-precio { font-size: 15px; }

	.mpsq-vacio { padding: 32px 22px; }
	.mpsq-vacio > span { font-size: 18px; }
	.mpsq-res-pie { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; padding: 32px 22px; }
	.mpsq-total > b { font-size: 42px; }
	.mpsq-total > i { max-width: none; }
	.mpsq-res-ctas .mpsc-btn { width: 100%; height: auto; min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
	.mpsq-nota { margin-top: 22px; font-size: 13.5px; }
	.mpsq-aviso-medico { margin-top: 32px; font-size: 12.5px; max-width: none; }
}

/* Al FINAL del archivo a propósito: misma especificidad que las reglas de arriba, gana por orden. */
@media (prefers-reduced-motion: reduce) {
	.mpsq-op-caja, .mpsq-op-num, .mpsq-op-txt span, .mpsq-op-check, .mpsq-progreso i, .mps-2026 .mpsq-input,
	.mps-2026 .mpsq-atras, .mps-2026 .mpsq-reiniciar, .mpsq-sinjs-obj { transition: none; }
}

/* ============ Analizando: puente de ~2,5 s entre el paso 4 y el resultado (21-09) ============ */
/* Banda oscura con trama de puntos (la de Nosotros/Embajadores): cambia el "clima" de la página y
   marca que ahora trabaja MPS, no la persona. El rojo vive solo en el progreso. */
.mpsq-analizando {
	display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; margin: 0;
	padding: 96px max(56px, calc(50% - 664px)) 112px; min-height: 680px;
	background-color: #0B0B0B; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.2px); background-size: 3px 3px;
	color: #FFFFFF;
}
.mpsq-an-in { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; max-width: 680px; }
.mpsq-main .mpsq-analizando .mpsq-titulo { color: #FFFFFF; }
.mpsq-an-titulo:focus { outline: none; }
.mpsq-main .mpsq-an-lista { list-style: none; width: 100%; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.12); }
.mpsq-main .mpsq-an-linea {
	list-style: none; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
	display: grid; grid-template-columns: 22px 130px minmax(0, 1fr); align-items: center; gap: 16px;
	opacity: 0.32; transition: opacity .25s ease;
}
.mpsq-an-linea > span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9A9A9A; }
.mpsq-an-linea > b { min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: #FFFFFF; overflow-wrap: anywhere; }
/* El indicador: aro gris (pendiente) → aro que gira con la punta roja (activa) → círculo rojo con check (lista). */
.mpsq-an-linea > i { position: relative; display: block; box-sizing: border-box; width: 22px; height: 22px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.22); }
.mpsq-main .mpsq-an-linea.mpsq-an-activa, .mpsq-main .mpsq-an-linea.mpsq-an-ok { opacity: 1; }
.mpsq-an-linea.mpsq-an-activa > i { border-color: rgba(255,255,255,0.16); border-top-color: #C73D2C; animation: mpsq-an-giro .7s linear infinite; }
.mpsq-an-linea.mpsq-an-ok > i { border-color: #C73D2C; background: #C73D2C; animation: mpsq-an-pop .28s cubic-bezier(.2,.8,.3,1.3) both; }
.mpsq-an-linea.mpsq-an-ok > i::after {
	content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; box-sizing: border-box;
	border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes mpsq-an-giro { to { transform: rotate(360deg); } }
@keyframes mpsq-an-pop { from { transform: scale(.6); } to { transform: none; } }
.mpsq-an-pie { display: flex; flex-direction: row; align-items: center; gap: 18px; width: 100%; margin-top: 22px; }
.mpsq-an-barra { position: relative; flex: 1 1 auto; height: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.mpsq-an-barra i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #C73D2C; transform: scaleX(0); transform-origin: left center; }
.mpsq-an-pct { flex: none; min-width: 64px; text-align: right; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #FFFFFF; }

@media (max-width: 900px) {
	.mpsq-analizando { padding: 56px 18px 72px; min-height: 560px; justify-content: flex-start; }
	.mpsq-main .mpsq-an-linea { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; padding: 14px 0; }
	.mpsq-an-linea > i { grid-row: 1 / span 2; }
	.mpsq-an-linea > b { font-size: 15.5px; }
	.mpsq-an-pct { font-size: 24px; min-width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.mpsq-main .mpsq-an-linea { transition: none; }
	.mpsq-an-linea.mpsq-an-activa > i, .mpsq-an-linea.mpsq-an-ok > i { animation: none; }
}