/* ============================================================
   QUIZ — cuestionario (compartido)
   ------------------------------------------------------------
   GENERADO — no editar a mano.
   Fuente: assets-src/shared/quiz.css
   Regenerar: npm run assets:build   ·   verificar: npm run assets:check
   ============================================================ */

/* ============================================================
   RUMBO — ¿Calificas? Quiz Takeover
   Full-screen navy takeover: trust panel (left, ≥1024px) +
   white quiz card. The clicked CTA morphs into it (.cta-morph,
   driven by rumbo.js via the Web Animations API).
   ============================================================ */

.quiz-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(120% 130% at 78% 8%, var(--navy-700) 0%, var(--navy) 42%, var(--navy-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.quiz-overlay.open { opacity: 1; pointer-events: auto; }

/* CTA morph element (created on the fly by rumbo.js) */
.cta-morph { position: fixed; z-index: 999; pointer-events: none; will-change: transform, border-radius, opacity; }

/* Trust side panel — injected by rumbo.js, desktop only */
.quiz-side { display: none; }
@media (min-width: 1024px) {
  .quiz-side {
    display: flex; flex-direction: column; gap: 26px;
    max-width: 430px; color: #fff;
    opacity: 0; transform: translateX(-14px);
    transition: opacity .45s ease .15s, transform .45s ease .15s;
  }
  .quiz-overlay.open .quiz-side { opacity: 1; transform: none; }
}
.quiz-side h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.12; letter-spacing: -.012em; color: #fff;
}
.quiz-side .qs-sub { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.6; max-width: 400px; }
.qs-feature { display: flex; gap: 15px; align-items: flex-start; }
.qs-feature .qs-ic {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(var(--accent-rgb),.22);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.qs-feature .qs-ic svg { width: 24px; height: 24px; }
.qs-feature h3 { font-size: 16px; font-weight: 700; color: #fff; }
.qs-feature p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.55; margin-top: 3px; max-width: 340px; }
.qs-quote { margin-top: 4px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.qs-quote blockquote { font-size: 16.5px; line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.92); }
.qs-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.qs-quote .qs-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--blue), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.qs-quote .qs-name { font-weight: 700; font-size: 14px; color: #fff; }
.qs-quote .qs-role { font-size: 12.5px; color: rgba(var(--accent-rgb),.9); }

.quiz-modal {
  background: var(--surface); width: 100%; max-width: 560px;
  max-height: min(92vh, 760px); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 30px 90px rgba(var(--brand-deepest-rgb),.5);
  transform: translateY(24px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.quiz-overlay.open .quiz-modal { transform: none; }

/* Header */
.quiz-head {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 14px; flex: none;
}
.quiz-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quiz-brand { display: inline-flex; align-items: center; gap: 9px; }
.quiz-brand .rose { width: 26px; height: 26px; }
.quiz-brand .qb-txt { font-weight: 800; font-size: 15px; color: var(--navy); }
.quiz-brand .qb-txt span { color: var(--blue); }
.quiz-close { width: 36px; height: 36px; border-radius: 50%; background: #EEF3F9; display: flex; align-items: center; justify-content: center; transition: background .18s ease; }
.quiz-close:hover { background: #DFE8F2; }
.quiz-close svg { width: 16px; height: 16px; }

/* Progress */
.quiz-progress-wrap { display: flex; align-items: center; gap: 12px; }
.quiz-progress { flex: 1; height: 7px; background: var(--line); border-radius: 7px; overflow: hidden; }
.quiz-progress .bar { height: 100%; width: 14%; background: linear-gradient(90deg, var(--blue), var(--blue-link)); border-radius: 7px; transition: width .4s cubic-bezier(.2,.7,.2,1); }
.quiz-step-label { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Body (scrollable per screen) */
.quiz-body { flex: 1; overflow-y: auto; padding: 28px 24px; }

/* El desplegable de países necesita que el body le haga sitio.
   ------------------------------------------------------------
   En escritorio el modal NO tiene `height`: sólo `max-height`, así que se
   dimensiona por contenido. El paso de país tiene muy poco —eyebrow, <h3> y un
   input—, y el body colapsa a 141 px. `.rc-list` mide 282 px y es
   `position: absolute`, o sea que no cuenta como contenido y no empuja nada:
   la recortan `.quiz-body{overflow-y:auto}` y después `.quiz-modal{overflow:hidden}`.

   Medido en producción el 2026-08-10 a 1280×800 y 1440×1000: la lista
   sobresalía 269 px del body, quedaba una franja visible de 14 px —justo el
   encabezado «AMÉRICA LATINA»— y CERO de las diez primeras opciones recibían el
   clic; la primera se lo llevaba `.quiz-back`. Confirmado por Miguel en un
   escritorio real.

   En móvil no pasa porque `@media (max-width: 540px)` le da `height: 100%` al
   modal y el body se queda con 608 px. Esta regla es inerte ahí.

   Los dos números salen de medir, no de tantear:

   · 420px  = 288 de lista + ~104 de lo que va encima dentro del body + margen.
   · 190px  = alto de `.quiz-head` (104) + `.quiz-foot` (83) + holgura. Restarlo
              de la altura máxima del modal (92vh) deja el techo real del body,
              así que el modal nunca supera su propio `max-height` y el pie
              —con «Continuar» dentro— no se corta jamás.

   Un `420px` fijo cortaba el pie a 1280×650. Un `min(420px, 58vh)` salvaba el
   pie pero dejaba «🌐 Otro», la última opción, fuera de alcance incluso con
   scroll: 122 de 123. La forma derivada llega a las 123 en los cuatro viewports
   probados y mantiene el pie dentro.

   La lista conserva su propio scroll (`max-height: 288px; overflow-y: auto`).
   Que sobresalga unos píxeles del body no importa: lo que se exige es que las
   123 sigan siendo ALCANZABLES, no que quepan a la vez.

   Sólo mientras el combobox está abierto: cerrado, la geometría es la de
   siempre. */
.quiz-body:has(.rc-input[aria-expanded="true"]) {
  min-height: min(420px, calc(92vh - 190px));
}
.quiz-screen { display: none; animation: q-fade .4s ease; }
.quiz-screen.active { display: block; }
@keyframes q-fade { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

.quiz-screen .q-eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.quiz-screen h3 { font-size: clamp(20px, 3vw, 25px); font-weight: 800; letter-spacing: -.018em; margin: 8px 0 6px; line-height: 1.18; text-wrap: balance; }
.quiz-screen .q-help { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

/* ---------- Carga: estrella de marca + anillo cometa ----------
   Archivo COMPARTIDO: esto se sirve a Rumbo y a Green North. No nombrar
   una marca acá — cada una resuelve su estrella y sus colores por token.
   Reemplaza el texto "Cargando…". El anillo es un conic-gradient con
   máscara radial (hueco al centro) que gira; la estrella de marca va
   encima, sin máscara (elemento aparte, no se recorta). El @property
   hace respirar la cola; sin soporte, el anillo igual gira por transform. */
@property --q-tail { syntax: "<percentage>"; initial-value: 58%; inherits: false; }

.quiz-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 260px;
}
.quiz-spinner { position: relative; width: 112px; aspect-ratio: 1; }
.quiz-spinner-ring {
  --q-lw: 8px;                       /* grosor del anillo */
  --q-tail: 58%;                     /* fallback si @property no está soportado */
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 6%,
    var(--blue) 24%,
    var(--blue-link) 46%,
    var(--sky) var(--q-tail),
    transparent var(--q-tail));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--q-lw)), #000 calc(100% - var(--q-lw)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--q-lw)), #000 calc(100% - var(--q-lw)));
  animation: quiz-spin 1s linear infinite, quiz-tail 2.4s ease-in-out infinite;
}
/* El símbolo #rose es el compass mark del design system y su cuerpo por
   defecto es blanco (invisible sobre la tarjeta). Fijamos las variables de
   marca para que renderice sobre blanco, como el logo del header.
   Los tokens los resuelve cada marca, y se pueden verificar:
     Rumbo        public/assets/rumbo-tokens.css   --navy: #041E42
     Green North  assets-src/brands/green-north.css --navy: var(--green)
                                                    --blue: var(--action)
   Por eso el mismo bloque sale azul en un sitio y verde en el otro sin
   duplicar una sola regla. */
.quiz-spinner-logo {
  position: absolute; inset: 0; margin: auto; width: 46%; height: 46%;
  --rose-hi: var(--navy);
  --rose-n-hi: var(--blue);
  --rose-ring: var(--blue);
  animation: quiz-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes quiz-spin { to { transform: rotate(360deg); } }

/* Anillo compacto para el botón de envío (mismo gesto, escala de botón). */
.q-spin {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 8%, rgba(255,255,255,.35) 34%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: quiz-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .q-spin { animation-duration: 2.4s; } }
@keyframes quiz-tail { 0%, 100% { --q-tail: 64%; } 50% { --q-tail: 40%; } }
@keyframes quiz-logo-pulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-spinner-ring { animation: quiz-spin 2.6s linear infinite; }
  .quiz-spinner-logo { animation: none; }
}

/* Options */
.q-opts { display: grid; gap: 11px; }
.q-opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 17px 18px; border: 2px solid var(--line); border-radius: 16px;
  background: var(--surface); transition: all .16s ease; font-family: inherit; width: 100%;
}
.q-opt:hover { border-color: var(--blue); background: var(--wash); }
.q-opt.sel { border-color: var(--blue); background: var(--wash); box-shadow: inset 0 0 0 1px var(--blue); }
.q-opt .q-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; transition: all .16s ease; }
.q-opt.multi .q-mark { border-radius: 8px; }
.q-opt.sel .q-mark { background: var(--blue); border-color: var(--blue); }
.q-opt .q-mark svg { width: 13px; height: 13px; opacity: 0; transition: opacity .16s ease; }
.q-opt.sel .q-mark svg { opacity: 1; }
.q-opt .q-txt { font-weight: 600; font-size: 15.5px; color: var(--navy); }
.q-opt .q-sub { font-weight: 500; font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.q-opt .q-emoji { font-size: 20px; flex: none; }

/* ── Selector de país dentro del quiz ────────────────────────────────────────
   El widget lo monta `shared/countries/country-selector.ts` y su hoja base
   (`country-select.css`) deja a propósito el alto, el borde y el radio en
   manos del campo que lo contiene: así el mismo selector se mete en `.bf-field`
   de consulta y en `.q-field` del quiz sin dos estilos de input compitiendo.

   Dentro del quiz ese campo es `.q-country`, y no tenía estilo ninguno: el
   selector heredaba el input pelado del navegador y quedaba minúsculo al lado
   de unas opciones de 17 px de padding y 2 px de borde.

   Aquí se le da la talla de `.q-opt`, que es la referencia de calidad de esta
   pantalla. NO se toca el widget, ni sus clases, ni su comportamiento: sólo
   se estiliza lo que ya emite. Todo por token, sin literales de marca.
   ────────────────────────────────────────────────────────────────────────── */
.q-country { margin-top: 4px; }

.q-country .rc-input {
  padding: 17px 44px 17px 18px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.q-country .rc-input::placeholder { color: var(--muted); font-weight: 500; }
.q-country .rc-input:hover { border-color: var(--blue); }
/* Foco visible de verdad: el anillo interior repite el que usa `.q-opt.sel`. */
.q-country .rc-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.q-country .rc-caret { right: 18px; width: 16px; height: 16px; margin-top: -8px; color: var(--navy); }

/* La lista: separada del campo, con sombra propia para que se lea por encima
   de las opciones, y con tope de altura para que en móvil no se salga. */
.q-country .rc-list {
  margin-top: 8px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(var(--brand-deepest-rgb), .16);
  max-height: min(46vh, 320px);
  padding: 6px;
}
.q-country .rc-group {
  padding: 10px 12px 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Cada país, con el mismo alto cómodo que una opción del test: 48 px de
   objetivo táctil, que es lo mínimo razonable en móvil. */
.q-country .rc-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  /* 52 px de objetivo táctil: por encima del mínimo de 44-48, que en una
     lista larga que se recorre con el pulgar se queda corto. */
  min-height: 52px;
}
.q-country .rc-opt .rc-flag { font-size: 21px; line-height: 1; flex: none; }
.q-country .rc-opt .rc-name { font-weight: 600; }
.q-country .rc-opt.act { background: var(--wash); }
.q-country .rc-opt.sel { background: var(--wash); box-shadow: inset 0 0 0 2px var(--blue); }
.q-country .rc-empty { padding: 18px 14px; font-size: 14px; color: var(--muted); }

/* Country select */
.q-select {
  width: 100%; padding: 16px 18px; border: 2px solid var(--line); border-radius: 16px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--navy);
  background: var(--surface); -webkit-appearance: none; appearance: none;
  background-image: var(--caret-svg);
  background-repeat: no-repeat; background-position: right 16px center;
}
.q-select:focus { outline: none; border-color: var(--blue); }

/* Capture form */
.q-fields { display: grid; gap: 13px; }
.q-field label { display: block; font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 7px; }
.q-field input {
  width: 100%; padding: 15px 16px; border: 2px solid var(--line); border-radius: 14px;
  font-family: inherit; font-size: 15.5px; font-weight: 500; color: var(--navy); background: var(--surface);
  transition: border-color .16s ease;
}
.q-field input:focus { outline: none; border-color: var(--blue); }
.q-field input::placeholder { color: #9AA7B5; font-weight: 500; }
.q-field.err input { border-color: var(--error); }
.q-field .q-err-msg { display: none; color: #C22B2B; font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.q-field.err .q-err-msg { display: block; }

/* Consentimiento.
   ------------------------------------------------------------
   El texto lo pone el flujo publicado, así que puede ser largo y de dos
   líneas: la casilla no se encoge (`flex: none`) y el texto envuelve a su
   lado. `align-items: flex-start` la deja arriba, alineada con la primera
   línea, no centrada respecto al párrafo.

   Sin literales de color: `--action` la resuelve cada marca —azul en Rumbo,
   verde en Green North— y `accent-color` hace que el propio control nativo
   se pinte con ella, sin reimplementar una casilla a mano. */
.q-field.q-consent { margin-top: 2px; }
.q-field.q-consent .q-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 500; font-size: 13.5px; line-height: 1.45;
  color: var(--text); margin-bottom: 0; cursor: pointer;
}
.q-field.q-consent .q-check input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--action, var(--blue)); cursor: pointer;
}
.q-field.q-consent.err .q-check input { outline: 2px solid var(--error); outline-offset: 2px; }

/* Preferencia de contacto.
   Se parece a `.q-opt` a propósito —para el visitante es la misma idea— pero
   NO lo reutiliza: `.q-opt` arrastra el auto-avance del renderer de pantallas,
   y aquí saltaría de pantalla en mitad de la captura. Sólo tokens semánticos:
   cada marca resuelve los suyos, y el guardrail de #85 lo sigue vigilando. */
.q-field.q-pref { margin-top: 2px; }
.q-pref-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-pref-opt {
  flex: 1 1 auto; padding: 11px 14px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--surface); font-family: inherit;
  font-weight: 600; font-size: 14px; color: var(--navy); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.q-pref-opt:hover { border-color: var(--blue); background: var(--wash); }
.q-pref-opt.sel {
  border-color: var(--blue); background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.q-pref-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Footer / nav */
.quiz-foot {
  padding: 16px 24px 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
}
/* «Anterior». En las preguntas de elección única y en la de país ya no hay
   «Continuar» —el clic envía— y éste queda como único control explícito del
   pie, así que necesita cuerpo: un enlace de 14 px era fácil de no ver. Mismo
   lenguaje que `.q-opt` —borde de 2, radio, hover al azul— para que se lea como
   un control, sin competir con las opciones. */
.quiz-back {
  font-weight: 700; font-size: 14px; color: var(--navy);
  min-height: 48px; padding: 12px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.quiz-back:hover { border-color: var(--blue); background: var(--wash); }
.quiz-back:focus-visible { outline: none; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.quiz-back:disabled { opacity: .5; }
.quiz-back svg { width: 15px; height: 15px; }
.quiz-back[hidden] { visibility: hidden; }
.quiz-next { padding: 13px 28px; }
.quiz-next:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.quiz-reassure { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.quiz-reassure svg { width: 14px; height: 14px; }

/* ---------- RESULT SCREEN ---------- */
.q-result { text-align: center; padding: 8px 0; }
.q-result .result-star {
  width: 96px; height: 96px; margin: 0 auto 18px; position: relative;
  animation: star-pop .6s cubic-bezier(.2,1.4,.4,1);
}
@keyframes star-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.q-result .result-star::after {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--action-rgb),.22), transparent 65%);
  animation: star-glow 2.4s ease-in-out infinite; z-index: -1;
}
@keyframes star-glow { 0%,100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.q-result .r-eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.q-result h3 { font-size: clamp(23px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 10px 0; line-height: 1.15; }
.q-result h3 .visa-name { color: var(--blue); }
.q-result .r-desc { font-size: 15px; color: var(--muted); max-width: 420px; margin: 0 auto 22px; line-height: 1.6; }
.r-next { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; max-width: 440px; margin: 0 auto 22px; text-align: left; }
.r-next h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); margin-bottom: 12px; }
.r-next li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; font-weight: 500; color: var(--text); padding: 5px 0; }
.r-next li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.q-result .r-honesty { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Confetti canvas */
.confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Mobile menu drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; padding: 20px;
}
.mobile-menu.open { transform: none; }
.mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mm-close { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.mm-close svg { width: 18px; height: 18px; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { font-size: 19px; font-weight: 700; color: var(--navy); padding: 16px 0; border-bottom: 1px solid var(--line); }
.mm-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 540px) {
  .quiz-modal { max-height: 100vh; height: 100%; border-radius: 0; max-width: 100%; }
  .quiz-overlay { padding: 0; }
}