/* ============================================================
   Klarna — UX handbook · Quiz de opción múltiple · v4
   Una carta BLANCA "handbook": pregunta en negro suave, opciones
   en lista vertical (cuerpo gris, bullet de círculo, hairlines
   ROSA finas entre ellas), marca Klarna (swoosh + wordmark) +
   etiqueta rosa "ux handbook" como único branding. UN solo
   cluster de control arriba a la derecha (progreso + botón).
   Chrome plano, mínimo. Fondo de vídeo del caso en loop + scrim.
   Vanilla CSS, sin build, sin librerías.
   ============================================================ */

/* ------------------------------------------------------------
   FUENTE GELION — pesos reales en /assets/font/
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-thin.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelion';
  src: url('../../assets/font/gelion-bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Marca Klarna (del home: rosa #FEB3C8, rojo #750202) */
  --pink:      #FEB3C8;
  --pink-alt:  #FFB3C7;
  --pink-line: rgba(254,127,165,0.55);
  --line:      rgba(0,0,0,0.12);       /* divisores GRISES, rectos */
  --card:      #FFFFFF;
  --klarna-red:#750202;

  /* Texto dentro de la carta */
  --ink:   #1B1B1B;   /* pregunta: negro suave */
  --grey:  #6E6E6E;   /* cuerpo / opciones / por qué: gris */
  --grey-soft: #9A9A9A;

  /* Semánticos: acierto = VERDE · error = GRIS (nada de rojo) */
  --do:   #1FA463;    /* verde check */
  --dont: #9A9A9A;    /* gris para la cruz/errores (sin rojo) */

  --font: 'Gelion', system-ui, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toolkit de micro-interacciones: decel suave + muelle con rebote. */
  --ease-decel: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --card-w: clamp(300px, 92vw, 440px);

  /* Diámetro ÚNICO para TODOS los círculos (bullets de opción, marcas
     check/cruz, botón de control, puntos del resultado, reinicio,
     chevron del índice): estética coherente. */
  --circle: 26px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  background: var(--pink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   FONDO — vídeos del caso en loop con crossfade + scrim rosa
   ============================================================ */
.bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: var(--pink);
  pointer-events: none;
}
.bg__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.2s ease;   /* crossfade largo entre clips */
  transform: scale(1.06);
}
.bg__video.active { opacity: 0.5; }
/* Velo intermedio progresivo (igual que Inditex): capa de blur entre el
   vídeo y la carta, para coherencia y legibilidad. */
.bg__veil {
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bg__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(254,179,200,0.12), transparent 64%),
    linear-gradient(180deg,
      rgba(254,179,200,0.58),
      rgba(254,179,200,0.42) 42%,
      rgba(254,179,200,0.68));
}
@media (prefers-reduced-motion: reduce) {
  .bg__video { transform: none; transition: opacity 0.4s ease; }
}

/* La UI funcional va por encima del fondo */
.stage { position: relative; z-index: 1; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   STAGE + DECK — baraja de cartas centrada (efecto Tinder)
   ============================================================ */
.stage {
  flex: 1 1 auto;
  display: flex;
  /* "safe center": si la carta es más alta que el viewport, no se recorta
     por arriba/abajo — cae a inicio y el stage hace scroll. */
  align-items: safe center;
  justify-content: center;
  padding: clamp(16px, 5vw, 40px);
  overflow-y: auto;
  scrollbar-width: none;
}
.stage::-webkit-scrollbar { display: none; }
.deck {
  position: relative;
  width: var(--card-w);
}

/* ============================================================
   CARD — carta blanca; la viva sobre dos fantasma de stack
   ============================================================ */
.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3.4vw, 20px);
  padding: clamp(22px, 6vw, 32px);
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(117, 2, 2, 0.05),
    0 14px 40px rgba(117, 2, 2, 0.12);
  text-align: left;
  isolation: isolate;
}
/* Fantasma del stack: detrás, escaladas y bajadas, sin contenido */
.card--ghost {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(117, 2, 2, 0.08);
}
/* Asoman por abajo (stack tipo Tinder): bajadas + escaladas. */
.card--ghost-1 { transform: translateY(16px) scale(0.955); opacity: 0.9; }
.card--ghost-2 { transform: translateY(32px) scale(0.91);  opacity: 0.7; }
/* Tarjeta COMPACTA: hugea su contenido y lo ancla abajo (sin el hueco blanco
   sobrante que dejaba el min-height alto). */
.card--live { position: relative; z-index: 2; will-change: transform, opacity;
  min-height: 0; justify-content: flex-end; }

/* Tinder: la carta sale rotando hacia un lado; la nueva entra desde
   atrás del stack escalando al frente. */
.card--live.swipe-out {
  transition: transform 0.4s var(--ease-decel), opacity 0.4s var(--ease-decel);
  transform: translateX(-130%) rotate(-12deg);
  opacity: 0;
}
/* La carta nueva asciende desde el fondo del stack con un muelle suave
   (overshoot mínimo) → se siente que "encaja" al frente, no que aparece. */
.card--live.swipe-in {
  animation: cardIn 0.62s var(--ease-spring) both;
}
@keyframes cardIn {
  0%   { transform: translateY(22px) scale(0.93); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* Cartas fantasma del stack: avanzan un punto al salir la viva, reforzando
   la sensación de baraja que "sube". Vuelven a su sitio con el muelle. */
.deck.is-swapping .card--ghost-1 { transform: translateY(8px) scale(0.975); opacity: 0.95; }
.deck.is-swapping .card--ghost-2 { transform: translateY(20px) scale(0.93); opacity: 0.8; }
.card--ghost { transition: transform 0.4s var(--ease-decel), opacity 0.4s var(--ease-decel); }
@media (prefers-reduced-motion: reduce) {
  .card--live.swipe-out { transition: opacity 0.2s ease; transform: none; }
  .card--live.swipe-in { animation: none; }
  .card--ghost { transition: none; }
  .deck.is-swapping .card--ghost-1 { transform: translateY(16px) scale(0.955); }
  .deck.is-swapping .card--ghost-2 { transform: translateY(32px) scale(0.91); }
}

/* ---- Pregunta (sin contador en pantalla) ---- */
.card__statement {
  font-weight: 600;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
/* El JS enfoca la pregunta al avanzar (lector de pantalla); sin anillo azul. */
.card__statement:focus, .card__statement:focus-visible { outline: none; }

/* ============================================================
   ENTRADA COREOGRAFIADA — al aparecer una carta, sus elementos
   entran en cascada con un ligero desfase: primero la PREGUNTA
   (palabra a palabra), y después cada LÍNEA de respuesta, una
   tras otra. Cadencia deliberada y elegante (no de golpe).
   ============================================================ */
.card__statement .word { display: inline-block; will-change: transform, opacity;
  animation: kWordIn 0.5s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes kWordIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.opt.opt--enter { animation: kLineIn 0.54s var(--ease) both; animation-delay: var(--enter-d, 0ms); }
@keyframes kLineIn { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .card__statement .word, .opt.opt--enter { animation: none !important; }
}

/* ============================================================
   OPCIONES — lista vertical de frases completas.
   Cada opción en su línea, con bullet de círculo a la izquierda
   y hairline ROSA entre opciones, como los puntos del handbook.
   ============================================================ */
.options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
/* Sin línea separadora bajo la ÚLTIMA opción; y sin su padding inferior, para
   que el hueco bajo la última respuesta iguale al padding lateral de la carta
   (antes el padding de la opción se sumaba al de la carta y sobraba abajo). */
.opt:last-child { border-bottom: none; padding-bottom: 0; }
/* Opción: texto a la izquierda (flex:1) + MARCA siempre a la derecha,
   centrada verticalmente. Divisores grises RECTOS (sin border-radius).
   Tipografía más grande y fina. */
.opt {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 16px);
  width: 100%;
  min-height: 58px;
  padding: clamp(14px, 3.4vw, 17px) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--grey);
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: color 160ms var(--ease), transform 140ms var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Press táctil de la opción: hundido sutil al pulsar (no en estado respondido). */
.options:not(.answered) .opt:active { transform: scale(0.985); transition-duration: 120ms; }
.opt__label { flex: 1 1 auto; order: 1; }
/* Marca SIEMPRE a la derecha, un poco más grande, centrada */
.opt__icon {
  display: inline-flex;
  width: var(--circle);
  height: var(--circle);
  flex: 0 0 auto;
  order: 2;
  color: var(--grey-soft);
  transition: color 160ms var(--ease);
}
.opt__icon svg { width: 100%; height: 100%; display: block; }

@media (hover: hover) {
  .options:not(.answered) .opt:hover { color: var(--ink); }
  .options:not(.answered) .opt:hover .opt__icon { color: var(--ink); }
}
.options.answered .opt { pointer-events: none; }
.opt:focus-visible { outline: 2px solid var(--klarna-red); outline-offset: -2px; }

/* --- Estados tras responder: SOLO color de tipografía e icono,
   sin cambio de fondo. Los botones quedan disabled; Chromium pinta
   el texto de un <button:disabled> en gris vía su UA stylesheet, así
   que forzamos el color con !important para ganar esa regla. --- */
.options.answered .opt[data-state="correct"],
.options.answered .opt[data-state="correct"] .opt__icon { color: #1FA463 !important; }
.options.answered .opt[data-state="correct"] { font-weight: 400; }
.options.answered .opt[data-state="wrong"],
.options.answered .opt[data-state="wrong"] .opt__icon { color: #9A9A9A !important; }
.options.answered .opt[data-state="muted"] { opacity: 0.5; }
.options.answered .opt { cursor: default; }
.options.answered .opt[data-state="muted"],
.options.answered .opt[data-state="correct"],
.options.answered .opt[data-state="wrong"] { transition: color 220ms var(--ease), opacity 220ms var(--ease); }

/* --- DIBUJO + POP de la marca (check/cruz) al responder ---
   El círculo y el trazo se "dibujan" (stroke-dashoffset) y el icono entra con
   un muelle suave. La fila correcta hace además un asentamiento (settle). */
.options.answered .opt[data-state="correct"] .opt__icon,
.options.answered .opt[data-state="wrong"] .opt__icon {
  animation: markPop 360ms var(--ease-spring) both;
}
.options.answered .opt__icon svg circle,
.options.answered .opt__icon svg path {
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  animation: markDraw 460ms var(--ease-decel) 60ms both;
}
/* El círculo arranca un poco antes que el trazo interior. */
.options.answered .opt__icon svg circle { animation-delay: 40ms; }
.options.answered .opt__icon svg path  { animation-delay: 220ms; }
@keyframes markPop  { 0% { transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes markDraw { from { stroke-dashoffset: var(--len, 60); } to { stroke-dashoffset: 0; } }
/* Asentamiento de la fila correcta: leve respiro de muelle al confirmarse. */
.options.answered .opt[data-state="correct"] { animation: correctSettle 460ms var(--ease-spring) both; }
@keyframes correctSettle { 0% { transform: scale(1); } 28% { transform: scale(1.012); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .options.answered .opt[data-state="correct"],
  .options.answered .opt[data-state="wrong"],
  .options.answered .opt[data-state="correct"] .opt__icon,
  .options.answered .opt[data-state="wrong"] .opt__icon,
  .options.answered .opt__icon svg circle,
  .options.answered .opt__icon svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ============================================================
   INTRO — primera tarjeta (estilo sensa.co): diagrama + de qué va
   ============================================================ */
.intro { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: clamp(6px, 2vw, 18px) 0; animation: whyIn 0.4s var(--ease) both; }
.intro__kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-soft); font-weight: 600; }
.intro__diagram { width: 100%; max-width: 240px; }
.intro__diagram svg { width: 100%; height: auto; display: block; }
.intro__title { font-weight: 600; font-size: clamp(22px, 6vw, 30px); letter-spacing: -0.03em; color: var(--ink); line-height: 1.12; }
.intro__text { font-weight: 300; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.5; color: var(--grey); max-width: 34ch; }
.intro__start { margin-top: 6px; font-family: inherit; font-weight: 600; font-size: 15px; color: #17120F;
  background: #FFB3C7; border: 0; border-radius: 999px; padding: 13px 32px; cursor: pointer;
  transition: filter .2s var(--ease), transform .2s var(--ease); }
.intro__start:hover { filter: brightness(1.04); transform: translateY(-1px); }
.intro__start:active { transform: translateY(0); }

/* ============================================================
   BARRA DE RESPUESTA — justo bajo la pregunta: explicación a la
   IZQUIERDA + botón siguiente a la DERECHA, con separador arriba.

   RESERVA DE ESPACIO (sin salto): la barra existe SIEMPRE en el
   flujo (no se oculta con display:none), por eso la carta ya tiene
   su altura final desde el primer render. Antes de responder está
   invisible y sin interacción (visibility:hidden + opacity:0); al
   responder añadimos .is-revealed y aparece SIN cambiar la altura.
   Reservamos sitio para ~2–3 líneas de explicación + el botón con
   min-height, así nunca crece la carta al revelar.
   ============================================================ */
.answerbar {
  display: flex; align-items: flex-start; gap: clamp(12px, 3vw, 18px);
  margin-top: 2px;   /* sin línea divisoria entre enunciado y explicación */
  /* Sitio reservado: alto del botón vs. ~3 líneas de explicación, el que
     sea mayor manda. clamp() acompaña el tamaño de fuente responsive. */
  min-height: max(var(--circle), clamp(60px, 12vw, 70px));
  /* Estado por defecto: presente en el layout pero no visible ni
     interactivo. La carta reserva su espacio desde el inicio. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease);
}
.answerbar.is-revealed {
  opacity: 1;
  visibility: visible;
}
.card__why {
  flex: 1 1 auto; text-align: left;
  font-weight: 300; font-size: clamp(13px, 3.7vw, 15px); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--grey); text-wrap: pretty;
}
/* Reveal palabra a palabra: cada palabra es un <span class="word"> que
   sube y aparece con un leve desfase (stagger). Sutil, sobre el gris del
   handbook; sin saltos porque el bloque ya tiene su sitio reservado. */
.card__why .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  /* Cada palabra sube con un muelle muy contenido (overshoot mínimo) y aparece;
     el desfase escalonado se calcula en JS y se acelera de forma natural. */
  animation: wordIn 0.46s var(--ease-spring) both;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
@keyframes wordIn {
  0%   { opacity: 0; transform: translateY(0.42em); }
  60%  { opacity: 1; transform: translateY(-0.04em); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Movimiento reducido: texto instantáneo, sin animación ni desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .card__why .word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.nextbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle); height: var(--circle);
  border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: transform 160ms var(--ease-spring), background 180ms var(--ease), color 180ms var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nextbtn > svg { width: 14px; height: 14px; display: block; transition: transform 220ms var(--ease-spring); }
.nextbtn:active { transform: scale(0.9); transition-duration: 120ms; }
.nextbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .nextbtn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
  .nextbtn:hover > svg { transform: translateX(2px); }   /* la flecha "tira" hacia delante */
}

@media (prefers-reduced-motion: reduce) {
  .answerbar { transition: none; }
  .intro { animation: none; }
}

/* ============================================================
   RESULTADO — al terminar el set
   ============================================================ */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(8px, 3vw, 14px) 0 0;
  animation: whyIn 360ms var(--ease) both;
}
/* Cabecera del resultado: puntuación (izq) · puntos como DIVISOR (centro,
   ocupan el ancho) · reiniciar (der). Compacto, sin línea aparte. */
.result__top { display: flex; align-items: center; width: 100%; padding-bottom: 12px; }
/* Una sola fila: puntos a la izquierda repartidos a lo ancho + el reset como
   un punto más al final (mismo diámetro/espaciado/alineación). */
.scoredots { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; flex-wrap: nowrap; }
.scoredot { width: var(--circle); height: var(--circle); flex: 0 0 auto; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line); box-sizing: border-box;
  animation: dotPop 0.44s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
/* Acierto = VERDE relleno · Error = GRIS OUTLINE (contorno, no relleno). */
.scoredot--ok { background: var(--do); border-color: var(--do); }
.scoredot--bad { background: transparent; border-color: var(--dont); }
@keyframes dotPop { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
/* Reinicio = MISMO icono y círculo que el desplegable (chevron) del índice,
   un punto más al final de la fila (mismo diámetro). */
.restart { width: var(--circle); height: var(--circle); flex: 0 0 auto; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--grey);
  display: grid; place-items: center; transition: border-color .2s var(--ease), color .2s var(--ease); }
.restart { transition: border-color .2s var(--ease), color .2s var(--ease), transform 140ms var(--ease-spring); }
.restart:hover { border-color: var(--grey-soft); color: var(--ink); transform: translateY(-2px); }
.restart:active { transform: scale(0.9); transition-duration: 120ms; }
.restart svg { width: 13px; height: 13px; display: block; }

/* Índice de respuestas — filas desplegables (releer la ronda).
   SIN máscara/scroll interno ni fundido inferior: el contenido fluye de
   borde a borde dentro de la carta (el stage hace scroll si hace falta),
   sin doble máscara/gradiente al fondo. */
.recap { width: 100%; margin-top: 0; padding-bottom: 0;
  text-align: left; }
.recap__row { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  font-family: inherit; color: var(--ink); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; }
.recap__ic { width: var(--circle); height: var(--circle); flex: 0 0 auto; }
.recap__ic svg { width: 100%; height: 100%; display: block; }
.recap__ic--ok { color: var(--do); }
.recap__ic--bad { color: var(--dont); }
.recap__q { flex: 1 1 auto; font-weight: 400; font-size: 14px; line-height: 1.32; letter-spacing: -0.01em; }
/* Flecha expandir DENTRO de un círculo (mismo lenguaje que reset/dots). */
.recap__chev { width: var(--circle); height: var(--circle); flex: 0 0 auto; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--grey); display: grid; place-items: center;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); }
.recap__chev svg { width: 13px; height: 13px; display: block; }
.recap__row:hover .recap__chev { border-color: var(--grey-soft); }
.recap__row[aria-expanded="true"] .recap__chev { transform: rotate(180deg); border-color: var(--grey); }
.recap__detail { padding: 2px 2px 14px; border-bottom: 1px solid var(--line); animation: whyIn 0.3s var(--ease) both; }
/* Sin el último divisor: la línea tras la última pregunta sobra. */
.recap__row:last-of-type { border-bottom: 0; }
.recap__detail:last-of-type { border-bottom: 0; }
.recap__opt { font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--grey); margin-bottom: 7px; }
.recap__opt span { display: block; font-weight: 500; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--grey-soft); margin-bottom: 2px; }
.recap__opt.is-ok { color: var(--do); }
.recap__opt.is-bad { color: var(--dont); }
.recap__why { font-weight: 300; font-size: 12.5px; line-height: 1.45; color: var(--grey); margin-top: 8px; }
@keyframes whyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .result { animation: none; }
  .scoredot { animation: none; }
}

/* Al mostrar el resultado, oculta la mecánica del quiz (el reiniciar
   vive integrado dentro del propio resultado). */
.card.is-done .card__statement,
.card.is-done .options,
.card.is-done .answerbar {
  display: none;
}
/* En resultado la carta se ajusta a su contenido (no fuerza 540px, que
   en pantallas bajas se salía y "cortaba" el resultado por abajo). */
.card.is-done { min-height: 0; }

/* ============================================================
   RESPONSIVE — 360 / 414 / 768 / 1280
   ============================================================ */
@media (min-width: 600px) {
  :root { --card-w: clamp(420px, 60vw, 480px); }
}
@media (min-width: 1000px) {
  :root { --card-w: 460px; }
}
@media (max-height: 640px) {
  .card { gap: 12px; }
  .opt { min-height: 50px; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — desactiva los pequeños muelles/presses de
   las micro-interacciones (los estados de color/foco se mantienen).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .opt, .nextbtn, .nextbtn > svg, .restart, .recap__chev { transition: none; }
  .options:not(.answered) .opt:active,
  .nextbtn:active, .nextbtn:hover, .nextbtn:hover > svg,
  .restart:hover, .restart:active { transform: none; }
}