/* ═══════════════════════════════════════════════════════════════
       QUIZ THENOMBA · capa sobre nomba-tokens.css
       Estética: editorial delineada (outline) sobre cream, acento lima.
       Títulos → Beaufort Pro · cuerpo → Inter. Mobile-first.
       ═══════════════════════════════════════════════════════════════ */
    :root, [data-theme='nomba'] {
      --font-display: 'Beaufort Pro', Georgia, serif;   /* override de marca */
      --q-maxw: 600px;
      --q-line: rgba(28, 18, 13, 0.16);                 /* borde delineado */
      --q-line-soft: rgba(28, 18, 13, 0.10);
    }
    html { scroll-behavior: smooth; background:#150D09; }
    body {
      font-size: 16px;
      min-height: 100dvh;
      display: flex; flex-direction: column;
      /* nomba-tokens.css pone aquí el degradado CREMA de la página del test
         (`body{background:var(--grad-page)}`). Hay que anularlo a mano: con solo
         quitar la regla, gana el token y el test vuelve a salir claro. Y tiene
         que ser transparente, no un color, para que se vea el ::before de abajo. */
      background: transparent;
      color: var(--seed-page, #F7F8E5);
    }


    /* ── Chrome bar (logo) ──────────────────────────────────────── */
    .topbar {
      background: var(--grad-chrome);
      border-bottom: 0;
      box-shadow: var(--shadow-chrome);
      display: flex; align-items: center; justify-content: center;
      height: 56px; padding: 0 16px;
      position: sticky; top: 0; z-index: 20;
      /* `relative` para anclar la barra, y overflow visible para que la
         burbuja del contador pueda salir por debajo. */
      overflow: visible;
    }
    .topbar img { height: 18px; display: block; }

    /* ── Layout ─────────────────────────────────────────────────── */
    #app {
      width: 100%; max-width: var(--q-maxw);
      margin: 0 auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
      flex: 1; display: flex; flex-direction: column;
    }
    .screen { flex: 1; display: flex; flex-direction: column; justify-content: center; }

    /* ── Progreso ─────────────────────────────────────────────────
       La barra sube a lo más alto de la página, pegada al borde superior y a
       sangre: es una LÍNEA, no un widget. El contador y el botón de volver no
       ocupan sitio hasta que hacen falta — aparecen al pasar por encima. Así
       el test empieza con la pregunta, que es lo único que importa. */
    /* La barra vive EN la línea gris del borde inferior de la cabecera: no es
       un widget, es esa línea que se va llenando. El número no ocupa sitio —
       aparece al pasar por encima, en una burbuja de cristal con la cola hacia
       la barra, como un mensaje. */
    /* Anclada al borde inferior de la cabecera. */
    #barra-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
    .progress-top {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
      height: 3px;
    }
    .progress-top .track {
      position: absolute; inset: 0; overflow: visible;
      background: rgba(247,248,229,.10);
    }
    .progress-top .fill {
      display: block; height: 100%; width: 0;
      background: var(--grad-accent, #E8644D);
      box-shadow: 0 0 10px rgba(232,100,77,.55);
      transition: width .45s cubic-bezier(.22,1,.36,1);
    }
    /* Zona sensible: 22px por debajo de la línea, para que el hover no exija
       puntería sobre 3 píxeles. */
    .progress-top::after { content:''; position:absolute; top:-6px; left:0; right:0; height:26px; }

    .progress-top .count {
      position: absolute; top: 14px; left: 50%; transform: translate(-50%, -4px);
      opacity: 0; pointer-events: none;
      font-size: 12px; font-weight: 600; letter-spacing: .04em;
      font-variant-numeric: tabular-nums; white-space: nowrap;
      color: var(--seed-page, #F7F8E5);
      padding: 7px 14px; border-radius: 16px;
      background: rgba(247,248,229,.10);
      border: 1px solid rgba(247,248,229,.18);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      box-shadow: 0 8px 24px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
      transition: opacity .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
    }
    /* La cola de la burbuja, apuntando a la barra. */
    .progress-top .count::before {
      content: ''; position: absolute; top: -5px; left: 50%; margin-left: -5px;
      width: 10px; height: 10px; transform: rotate(45deg);
      background: rgba(247,248,229,.10);
      border-left: 1px solid rgba(247,248,229,.18);
      border-top: 1px solid rgba(247,248,229,.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .progress-top:hover .count,
    .progress-top:focus-within .count { opacity: 1; transform: translate(-50%, 0); }

    .progress-top .btn-back {
      position: absolute; top: 12px; left: 14px; width: 30px; height: 30px;
      font-size: 14px; opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
      border-color: rgba(247,248,229,.18); background: rgba(247,248,229,.08);
      color: rgba(247,248,229,.8);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .progress-top:hover .btn-back,
    .progress-top:focus-within .btn-back { opacity: 1; pointer-events: auto; }

    /* En táctil no hay hover: la burbuja se queda puesta. */
    @media (hover: none) {
      .progress-top .count { opacity: 1; transform: translate(-50%, 0); }
      .progress-top .btn-back { opacity: .85; pointer-events: auto; }
    }

    /* ── Progreso (antiguo, sin usar) ────────────────────────────── */
    .progress { display: flex; align-items: center; gap: 12px; padding: 6px 2px 18px; }
    .progress .track {
      flex: 1; height: 6px; border-radius: var(--radius-pill);
      background: rgba(28, 18, 13, 0.08);
      border: 1px solid var(--q-line-soft);
      overflow: hidden;
    }
    .progress .fill {
      display: block; height: 100%; width: 0;
      background: var(--grad-accent);
      box-shadow: 0 0 8px rgba(232, 100, 77, 0.55);
      border-radius: var(--radius-pill);
      transition: width .4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .progress .count {
      font-size: 12px; font-weight: 600; color: var(--text-tertiary);
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .btn-back {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: var(--radius-pill);
      border: 1px solid var(--q-line); background: rgba(253, 253, 250, 0.6);
      color: var(--text-secondary); font-size: 16px; line-height: 1;
      transition: border-color var(--motion-fast), background var(--motion-fast);
    }
    .btn-back { position: relative; }
    /* El círculo se queda en 34 px por composición, pero el dedo necesita 44:
       se amplía el área pulsable sin tocar el dibujo. */
    .btn-back::after { content: ''; position: absolute; top: 50%; left: 50%;
      width: 44px; height: 44px; transform: translate(-50%, -50%); }
    .btn-back:hover { border-color: var(--border-strong); background: var(--bg-surface); }

    /* ── Tarjeta principal delineada ────────────────────────────── */
    .qcard {
      background: rgba(253, 253, 250, 0.55);
      backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
      border: 1.5px solid var(--q-line);
      border-radius: 18px;
      padding: 26px 20px 22px;
      box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 30px -14px rgba(28,18,13,0.14);
      text-align: center;
    }
    .qcard .eyebrow { display: block; margin-bottom: 12px; }
    h1.q-title {
      font-family: var(--font-display);
      font-weight: 500; font-size: clamp(22px, 5.6vw, 28px);
      line-height: 1.18; letter-spacing: -0.01em;
      color: var(--text-primary);
      margin: 0 0 20px; text-align: center;
    }
    .q-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: -8px 0 22px; }

    /* ── Opciones (multiple_choice / opinion / poll) ────────────── */
    .opts { display: flex; flex-direction: column; gap: 10px; }
    .opt {
      display: flex; align-items: center; justify-content: center;
      min-height: 56px; padding: 14px 16px;
      background: rgba(253, 253, 250, 0.66);
      border: 1.5px solid var(--q-line);
      border-radius: var(--radius-xl);
      font-size: 15px; font-weight: 500; line-height: 1.35;
      color: var(--text-primary); text-align: center;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: border-color var(--motion-base), background var(--motion-base),
                  transform var(--motion-fast), box-shadow var(--motion-base);
    }
    @media (hover: hover) {
      .opt:hover { border-color: rgba(28,18,13,0.34); transform: translateY(-1px); box-shadow: var(--shadow-md); }
    }
    .opt:active { transform: scale(0.99); }
    .opt.is-selected {
      border-color: var(--accent-pressed);
      background: var(--accent-bg);
      box-shadow: 0 0 0 3px rgba(232, 100, 77, 0.28);
    }
    .opt:disabled { cursor: default; }
    .opt:disabled:not(.is-selected) { opacity: 0.45; }

    /* ── this_or_that · tarjetas grandes enfrentadas ────────────── */
    .duel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .duel .opt {
      flex-direction: column; gap: 8px;
      min-height: 120px; padding: 18px 12px;
      font-family: var(--font-display); font-weight: 500;
      font-size: 16px; line-height: 1.3;
    }
    .duel .opt .opt-kicker {
      font-family: var(--font-sans); font-size: 10px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary);
    }
    .duel.duel-2 { position: relative; }
    .duel.duel-2 .opt { min-height: 170px; }
    .duel.duel-2::after {
      content: 'VS';
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
      background: var(--chrome-base); color: var(--seed-lime);
      font-family: var(--font-display); font-size: 12px; font-weight: 500;
      border-radius: var(--radius-pill); border: 2px solid var(--seed-page);
      box-shadow: var(--shadow-md); pointer-events: none;
    }

    /* ── image_choice ───────────────────────────────────────────── */
    .grid-img { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid-img .opt { flex-direction: column; gap: 10px; padding: 10px 10px 14px; align-items: stretch; }
    .opt-media {
      aspect-ratio: 4 / 3; width: 100%;
      border: 1px solid var(--q-line-soft); border-radius: 10px;
      overflow: hidden; display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .opt-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .opt-media.ph-a { background: var(--grad-accent-soft); }
    .opt-media.ph-b { background: var(--grad-azure-soft); }
    .opt-media .ph-glyph {
      font-family: var(--font-display); font-weight: 500;
      font-size: 34px; color: var(--text-secondary); opacity: 0.85;
    }
    .grid-img .opt-label { font-size: 13.5px; line-height: 1.35; text-align: center; }

    /* ── scale · escala 1–N ─────────────────────────────────────── */
    .scale-panel {
      border: 1.5px solid var(--q-line); border-radius: var(--radius-xl);
      background: rgba(253, 253, 250, 0.66);
      padding: 20px 16px; margin-bottom: 16px;
      min-height: 96px; display: flex; align-items: center; justify-content: center;
    }
    .scale-panel p {
      margin: 0; font-family: var(--font-display); font-weight: 500;
      font-size: 18px; line-height: 1.35; color: var(--text-primary); text-align: center;
    }
    .scale-wrap { padding: 4px 6px 0; }
    input.scale[type='range'] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
    }
    input.scale::-webkit-slider-runnable-track {
      height: 8px; border-radius: var(--radius-pill);
      background: rgba(28, 18, 13, 0.10); border: 1px solid var(--q-line-soft);
    }
    input.scale::-moz-range-track {
      height: 8px; border-radius: var(--radius-pill);
      background: rgba(28, 18, 13, 0.10); border: 1px solid var(--q-line-soft);
    }
    input.scale::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 28px; height: 28px; margin-top: -11px;
      border-radius: var(--radius-pill);
      background: var(--grad-accent); border: 2px solid var(--chrome-base);
      box-shadow: 0 2px 8px rgba(28,18,13,0.28), 0 0 0 4px rgba(232,100,77,0.22);
    }
    input.scale::-moz-range-thumb {
      width: 24px; height: 24px; border-radius: var(--radius-pill);
      background: var(--grad-accent); border: 2px solid var(--chrome-base);
      box-shadow: 0 2px 8px rgba(28,18,13,0.28), 0 0 0 4px rgba(232,100,77,0.22);
    }
    .scale-ticks { display: flex; justify-content: space-between; padding: 2px 8px 14px; }
    .scale-ticks span {
      font-size: 11px; font-weight: 600; color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }
    .scale-ticks span.on { color: var(--accent-text-dark); }

    /* ── video_question ─────────────────────────────────────────── */
    .q-media-frame {
      aspect-ratio: 16 / 9; width: 100%;
      border: 1.5px solid var(--q-line); border-radius: var(--radius-xl);
      overflow: hidden; margin-bottom: 20px;
      background: var(--grad-chrome);
      display: flex; align-items: center; justify-content: center; position: relative;
    }
    .q-media-frame video, .q-media-frame iframe, .q-media-frame img {
      width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
    }
    .media-ph { text-align: center; color: var(--chrome-text-dim); padding: 12px; }
    .media-ph .ph-play {
      width: 52px; height: 52px; margin: 0 auto 10px;
      border: 1.5px solid rgba(247,248,229,0.35); border-radius: var(--radius-pill);
      display: flex; align-items: center; justify-content: center;
    }
    .media-ph .ph-play::after {
      content: ''; margin-left: 4px;
      border-left: 14px solid var(--seed-lime);
      border-top: 9px solid transparent; border-bottom: 9px solid transparent;
    }
    .media-ph p { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

    /* ── CTA + botones (centrados) ──────────────────────────────── */
    .actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
    .cta {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; min-height: 54px; padding: 14px 24px;
      background: linear-gradient(180deg, rgba(240,138,116,0.98) 0%, rgba(232,100,77,1) 100%);
      border: 1px solid rgba(176,63,44,0.55);
      border-radius: var(--radius-xl);
      color: var(--text-on-accent) !important;
      font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
      box-shadow: 0 2px 8px rgba(176,63,44,0.30), inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(100,30,20,0.22);
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast);
    }
    .cta:hover:not(:disabled) { background: linear-gradient(180deg, rgba(240,138,116,1) 0%, rgba(212,81,59,1) 100%); transform: translateY(-1px); }
    .cta:active:not(:disabled) { transform: translateY(0.5px); }
    .cta:disabled { opacity: 0.5; cursor: not-allowed; }
    .cta.is-loading { pointer-events: none; }
    .btn-ghost-line {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 46px; padding: 10px 22px; width: 100%;
      background: transparent; border: 1.5px solid var(--q-line);
      border-radius: var(--radius-xl);
      color: var(--text-secondary); font-size: 14px; font-weight: 600;
      cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast);
    }
    .btn-ghost-line:hover { border-color: var(--border-strong); color: var(--text-primary); background: rgba(253,253,250,0.7); }

    /* ── Formulario de lead ─────────────────────────────────────── */
    .form { text-align: left; margin-top: 4px; }
    .field { margin-bottom: 14px; }
    .field label {
      display: block; font-size: 12px; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-tertiary); margin-bottom: 6px;
    }
    .field input[type='text'], .field input[type='email'], .field input[type='tel'], .field select {
      display: block; width: 100%; height: 52px; padding: 0 14px;
      font-size: 16px; font-family: inherit; color: var(--text-primary);
      background: rgba(253, 253, 250, 0.8);
      border: 1.5px solid var(--q-line); border-radius: var(--radius-xl);
      outline: none; -webkit-appearance: none; appearance: none;
      transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
    }
    .field input:focus, .field select:focus {
      border-color: rgba(176, 63, 44, 0.7);
      box-shadow: 0 0 0 3px rgba(232, 100, 77, 0.25);
    }
    .field input.is-invalid { border-color: var(--error); }
    .field input.is-invalid:focus { box-shadow: 0 0 0 3px var(--error-bg); }
    .field .ferr { display: none; color: var(--error); font-size: 12.5px; font-weight: 500; margin: 6px 2px 0; }
    .field.show-err .ferr { display: block; }
    .phone-row { display: flex; gap: 8px; }
    .phone-row select {
      width: 122px; flex: none; padding: 0 6px; text-align: center;
      background-image: none; cursor: pointer;
      font-size: 14px !important; font-variant-numeric: tabular-nums;
    }
    .phone-row input { flex: 1; min-width: 0; }
    .consent {
      display: flex; align-items: flex-start; gap: 10px;
      text-align: left; margin: 18px 0 4px; padding: 14px;
      border: 1.5px dashed var(--q-line); border-radius: var(--radius-xl);
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: border-color var(--motion-base), background var(--motion-base);
    }
    .consent:has(input:checked) { border-style: solid; border-color: var(--accent-pressed); background: var(--accent-bg); }
    .consent input { margin-top: 1px; width: 18px; height: 18px; }
    .consent span { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
    .consent a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .form-msg { min-height: 18px; font-size: 13px; font-weight: 500; color: var(--error); text-align: center; margin-top: 10px; }

    /* ── Spinner / loading ──────────────────────────────────────── */
    .spinner {
      width: 18px; height: 18px; flex: none;
      border: 2.5px solid rgba(28, 18, 13, 0.25); border-top-color: var(--chrome-base);
      border-radius: var(--radius-pill); animation: spin 0.8s linear infinite;
    }
    .spinner.lg { width: 34px; height: 34px; border-width: 3px; margin: 40px auto; border-color: rgba(28,18,13,0.15); border-top-color: var(--accent-pressed); }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Éxito / gracias ────────────────────────────────────────── */
    .check-ring {
      width: 74px; height: 74px; margin: 0 auto 18px;
      border-radius: var(--radius-pill);
      background: var(--grad-accent); border: 2px solid var(--chrome-base);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 8px rgba(232, 100, 77, 0.22), var(--shadow-md);
      animation: scaleIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .check-ring svg { width: 32px; height: 32px; stroke: var(--chrome-base); }

    /* ── Resultado ──────────────────────────────────────────────── */
    .r-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px; border-radius: var(--radius-pill);
      background: var(--accent-bg); border: 1px solid var(--accent-border);
      color: var(--accent-text-dark);
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 18px;
    }
    .r-portrait {
      width: 108px; height: 108px; margin: 0 auto 18px;
      border-radius: var(--radius-pill);
      background: var(--grad-chrome);
      border: 2px solid var(--chrome-base);
      box-shadow: 0 0 0 6px rgba(232, 100, 77, 0.35), var(--shadow-lg);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 500;
      font-size: 38px; color: var(--seed-lime);
    }
    .r-name {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(28px, 7vw, 36px); line-height: 1.1; letter-spacing: -0.01em;
      margin: 0 0 6px; color: var(--text-primary);
    }
    .r-year { font-size: 13px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.08em; margin-bottom: 16px; }
    .r-quote {
      font-family: var(--font-display); font-style: italic; font-weight: 400;
      font-size: 18px; line-height: 1.45; color: var(--text-secondary);
      margin: 0 auto 16px; max-width: 42ch;
    }
    .r-blurb { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0 auto 8px; max-width: 46ch; }
    .r-divider { height: 1px; background: var(--q-line-soft); margin: 22px 0; }


    /* ── Intro / portada ────────────────────────────────────────── */
    .intro-kicker { margin-bottom: 14px; }
    /* NOTA fuentes: los OTF de Beaufort son Medium/Light uprights y
       Regular/Heavy ITALIC → titulares SIEMPRE weight 500 (como en home);
       el 400 itálico se usa a propósito en la cita del resultado. */
    .intro-title {
      font-family: var(--font-display); font-weight: 500;
      font-size: clamp(30px, 8vw, 42px); line-height: 1.08; letter-spacing: -0.015em;
      margin: 0 0 16px; color: var(--text-primary);
    }
    .intro-meta {
      display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 4px;
    }
    .fine { color: var(--text-muted); font-size: 11.5px; line-height: 1.5; text-align: center; margin-top: 14px; }
    .fine a { color: var(--text-tertiary); }

    @media (min-width: 480px) {
      .qcard { padding: 34px 30px 28px; }
      .cta, .btn-ghost-line { width: auto; min-width: 260px; }
    }

    /* ── Escritorio ──────────────────────────────────────────────
       El test nació mobile-first y se quedó en una columna de 600 px:
       en un monitor de 1920 parecía una captura de móvil centrada en
       el vacío. Aquí la tarjeta toma el ancho que le corresponde, la
       tipografía sube de escala y las opciones pasan a dos columnas
       —cuatro respuestas apiladas en vertical es lo que más delataba
       el layout de teléfono—. La columna de TEXTO no se ensancha:
       .q-sub y compañía siguen midiendo en ch para no pasar de 65
       caracteres por línea, que es donde se deja de leer cómodo. */
    @media (min-width: 900px) {
      :root, [data-theme='nomba'] { --q-maxw: 860px; }
      .topbar { height: 64px; }
      .topbar img { height: 22px; }
      #app { padding: 32px 24px 48px; }
      .qcard { padding: 48px 56px 42px; border-radius: 22px; }
      h1.q-title { font-size: 34px; margin-bottom: 26px; }
      .q-sub { font-size: 16.5px; max-width: 56ch; margin-left: auto; margin-right: auto; }

      /* Dos columnas, pero solo cuando hay número par de opciones y no es
         un duelo (el duelo YA es de dos y tiene su propio tratamiento). */
      .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .opts.opts-impar { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
      .opt { min-height: 68px; font-size: 16px; padding: 16px 20px; }

      .duel { gap: 16px; }
      .duel .opt { min-height: 200px; }
      .grid-img { gap: 14px; }

      /* El naipe es el héroe del resultado: en escritorio se ve entero. */
      .naipe { width: 300px; height: 460px; }
      .naipe .n-centro .n-emb { width: 132px; height: 132px; }
      .naipe .n-nombre { font-size: 25px; }
      .naipe .n-idx { font-size: 27px; }
      .naipe .n-centro { inset: 60px 28px 52px; }
    }

    /* ══ TEMA OSCURO DEL TEST ═══════════════════════════════════════════
       El test nació sobre crema y todo —tarjeta, opciones, bordes, estados—
       estaba calculado para fondo claro. Con la escena detrás hay que
       invertirlo entero: si solo se oscurece el fondo, las tarjetas blancas
       tapan la imagen y el efecto se pierde.
       Van juntas aquí, y no repartidas, para que se vea de un vistazo qué
       cambia respecto al tema claro. */
    :root, [data-theme='nomba'] {
      --q-line:      rgba(247,248,229,.16);
      --q-line-soft: rgba(247,248,229,.10);
    }
    .qcard {
      background: rgba(33,20,15,.55);
      border-color: var(--q-line);
      box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -30px rgba(0,0,0,.8);
      backdrop-filter: blur(16px) saturate(150%);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
    }
    /* El titular manda: es la pregunta. Beaufort, más cuerpo y la misma
       opacidad de antes — solo crece. */
    h1.q-title {
      color: var(--seed-page, #F7F8E5);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(26px, 4.4vw, 40px);
      line-height: 1.12;
      letter-spacing: -.015em;
      margin-bottom: 26px;
      text-wrap: balance;
    }
    @media (min-width: 900px) { h1.q-title { margin-bottom: 32px } }
    .q-sub, .fine { color: rgba(247,248,229,.62); }
    .eyebrow { color: rgba(247,248,229,.45); }

    .opt {
      background: rgba(247,248,229,.05);
      border-color: var(--q-line);
      color: var(--seed-page, #F7F8E5);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    @media (hover: hover) {
      .opt:hover { background: rgba(247,248,229,.10); border-color: rgba(232,100,77,.42); }
    }
    .opt.is-selected {
      background: rgba(232,100,77,.14); border-color: var(--accent, #E8644D);
      color: var(--seed-page, #F7F8E5);
    }
    .opt-kicker { color: rgba(232,100,77,.9); }
    .opt-label { color: rgba(247,248,229,.86); }
    .media-ph { background: rgba(247,248,229,.05); border-color: var(--q-line); }
    .q-media-frame { background: #170E0A; border-color: var(--q-line); }

    /* La portada usaba --text-primary, que sigue siendo el verde oscuro del
       tema claro: sobre fondo oscuro el titular se volvía invisible. Y las
       insignias venían de los tokens claros. */
    .intro-title { color: var(--seed-page, #F7F8E5); }
    .intro-meta .badge {
      background: rgba(247,248,229,.07); border: 1px solid var(--q-line);
      color: rgba(247,248,229,.78);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .intro-meta .badge-accent { border-color: rgba(232,100,77,.42); color: #E8644D; }

    .form label { color: rgba(247,248,229,.75); }
    .form input, .form select {
      background: rgba(247,248,229,.05); border-color: var(--q-line);
      color: var(--seed-page, #F7F8E5);
    }
    .form input::placeholder { color: rgba(247,248,229,.42); }
    .btn-back { border-color: var(--q-line); background: rgba(247,248,229,.06); color: rgba(247,248,229,.75); }
    .btn-ghost-line { border-color: var(--q-line); color: rgba(247,248,229,.8); }

    /* ══ LAS OPCIONES ═══════════════════════════════════════════════════
       Esto es lo que el usuario toca veinte veces seguidas: es la pieza que
       decide si el test se siente como un formulario o como un juego. */

    /* Tipografía: Beaufort, más grande, y el mismo peso visual que el titular
       para que la opción no parezca letra pequeña frente a la pregunta. */
    .opt, .duel .opt {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(16px, 2.1vw, 19px);
      line-height: 1.34;
      letter-spacing: -.005em;
    }
    .opts .opt { min-height: 72px; padding: 18px 22px; gap: 14px; }

    /* El icono acompaña, no compite: va en lima muy apagada y solo se
       enciende cuando la opción está elegida o bajo el cursor. En duotone el
       segundo trazo hereda la opacidad, así que basta con el color. */
    .opt-ico {
      flex: 0 0 auto; font-size: 26px; line-height: 1;
      color: rgba(232,100,77,.55);
      transition: color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .duel .opt .opt-ico { font-size: 30px; margin-bottom: 4px; }
    @media (hover: hover) { .opt:hover .opt-ico { color: #E8644D; transform: scale(1.08); } }
    .opt.is-selected .opt-ico { color: #E8644D; }

    /* El duelo iba a 200 px de alto fijo y con el texto flotando en medio:
       en pantallas bajas se salía y en altas dejaba un hueco enorme. Ahora la
       altura la marca el contenido, con un mínimo razonable. */
    .duel .opt { min-height: 132px; padding: 22px 20px; justify-content: center; }
    .duel.duel-2 .opt { min-height: 132px; }
    @media (min-width: 900px) {
      .duel .opt, .duel.duel-2 .opt { min-height: 148px; }
      .opts .opt { min-height: 84px; }
    }

    /* La escena de la pregunta, dentro de la caja, al pasar por encima.
       Es el detalle que convierte una lista de botones en un objeto: la opción
       se llena de la atmósfera de lo que estás decidiendo. Va al 25 % con un
       velo de cristal por encima para que el texto no pierda contraste. */
    .opt { position: relative; overflow: hidden; isolation: isolate; }
    .opt::before {
      content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
      background: var(--q-escena, none) center/cover no-repeat;
      opacity: 0; transform: scale(1.06);
      transition: opacity .38s ease, transform .6s cubic-bezier(.22,1,.36,1);
    }
    .opt::after {
      content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
      backdrop-filter: blur(7px) saturate(130%);
      -webkit-backdrop-filter: blur(7px) saturate(130%);
      background: linear-gradient(180deg, rgba(21,13,9,.24), rgba(21,13,9,.44));
      opacity: 0; transition: opacity .38s ease;
    }
    @media (hover: hover) {
      .opt:hover::before { opacity: .25; transform: none; }
      .opt:hover::after  { opacity: 1; }
    }
    .opt.is-selected::before { opacity: .25; transform: none; }
    .opt.is-selected::after  { opacity: 1; }

    /* Al elegir: un filete de luz alrededor de la caja, con brillo contenido.
       No parpadea ni rebota — confirma. */
    .opt.is-selected {
      border-color: var(--accent, #E8644D);
      box-shadow:
        0 0 0 1px rgba(232,100,77,.55),
        0 0 22px -4px rgba(232,100,77,.45),
        0 0 60px -22px rgba(232,100,77,.5);
      animation: opt-elegida 520ms cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes opt-elegida {
      0%   { box-shadow: 0 0 0 1px rgba(232,100,77,.9), 0 0 0 0 rgba(232,100,77,.5); }
      55%  { box-shadow: 0 0 0 1px rgba(232,100,77,.75), 0 0 34px -2px rgba(232,100,77,.6); }
      100% { box-shadow: 0 0 0 1px rgba(232,100,77,.55), 0 0 22px -4px rgba(232,100,77,.45),
                         0 0 60px -22px rgba(232,100,77,.5); }
    }
    @media (prefers-reduced-motion: reduce) {
      .opt::before, .opt::after { transition: none }
      .opt.is-selected { animation: none }
    }

    /* ══ TRANSICIONES ═══════════════════════════════════════════════════
       El test cambia de pregunta veinte veces. Si cada cambio es un salto,
       se siente como recargar una página; si encadena, se siente como pasar
       de escena. Eso es la mitad de la diferencia entre un formulario y un
       juego.

       Dos capas de fondo alternándose: la nueva escena entra por encima con
       un fundido largo mientras la vieja sigue ahí debajo. Cambiar la imagen
       de un solo `background` da el parpadeo de blanco que se veía. */
    body::before, body::after {
      content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-position: center; background-size: cover; background-repeat: no-repeat;
      transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
    }
    body::before { background-image:
      linear-gradient(180deg, var(--velo-alto) 0%, var(--velo-medio) 40%, var(--velo-bajo) 100%),
      var(--fondo-a, none); opacity: var(--op-a, 1); }
    body::after  { background-image:
      linear-gradient(180deg, var(--velo-alto) 0%, var(--velo-medio) 40%, var(--velo-bajo) 100%),
      var(--fondo-b, none); opacity: var(--op-b, 0); }

    /* El velo, en dos intensidades. Durante el TEST tapa fuerte: encima hay
       preguntas que leer y la escena no puede competir con ellas. En el
       RESULTADO se afloja, porque ahí la escena de su época es parte de lo que
       se está enseñando —y aun así no baja de lo que el texto necesita para
       leerse sin esfuerzo—. */
    :root {
      --velo-alto: rgba(21,13,9,.82);
      --velo-medio: rgba(21,13,9,.70);
      --velo-bajo: rgba(21,13,9,.95);
    }
    :root.fondo-resultado {
      --velo-alto: rgba(21,13,9,.60);
      --velo-medio: rgba(21,13,9,.72);
      --velo-bajo: rgba(21,13,9,.93);
    }

    /* La tarjeta entra desde abajo y sale hacia arriba: hay dirección, se
       avanza. Antes solo aparecía. */
    .screen { animation: escena-entra 560ms cubic-bezier(.22,1,.36,1) both; }
    @keyframes escena-entra {
      from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(3px); }
      to   { opacity: 1; transform: none; filter: none; }
    }
    /* Las opciones caen escalonadas detrás del titular. */
    .opts .opt, .duel .opt, .grid-img .opt {
      animation: opcion-entra 460ms cubic-bezier(.22,1,.36,1) both;
      animation-delay: calc(var(--i, 0) * 65ms + 160ms);
    }
    @keyframes opcion-entra {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .screen, .opts .opt, .duel .opt, .grid-img .opt { animation: none }
      body::before, body::after { transition: none }
    }