/* ==========================================================================
   TERRAPULSE · DIAGNÓSTICO FAMILIAR
   Sistema de diseño del quiz
   ==========================================================================

   Los tokens de marca —fondo, superficie, acento, tipografía— viven en
   /ventas.css y NO se repiten aquí: el quiz y la página de ventas son dos
   pasos del mismo embudo y tienen que verse como el mismo producto.

   Aquí solo está lo que existe únicamente en el diagnóstico: la portada, el
   progreso, las tarjetas de respuesta, el núcleo de análisis y el anillo del
   resultado.

   --------------------------------------------------------------------------
   TRES REGLAS QUE ATRAVIESAN TODO EL FICHERO
   --------------------------------------------------------------------------
   1. MÓVIL PRIMERO, Y DE VERDAD. Cada medida de aquí se decidió mirando
      390x844 y se comprobó en 320, 360, 375, 412 y 430. Lo de escritorio son
      excepciones al final de cada bloque, no al revés.

   2. CADA PASO CABE EN UNA PANTALLA. La portada hasta el botón, cada
      pregunta entera, y el resultado hasta el botón. Si algo no cabe se
      recorta el espacio, nunca el tamaño del texto.

   3. ANTES DE RESPONDER, LAS OPCIONES SON IDÉNTICAS. Ni un borde, ni un
      tono, ni un orden que insinúe cuál «puntúa mejor». Un diagnóstico que
      te deja adivinar la respuesta buena deja de medir nada — y quien lo
      note deja de creerse el resultado.
   ========================================================================== */

:root {
  --quiz-t-rapida: 180ms;
  --quiz-t-media: 340ms;
  --quiz-t-lenta: 900ms;
  --quiz-curva: cubic-bezier(0.16, 1, 0.3, 1);

  /* Estados del diagnóstico. Deliberadamente NO son los de una alerta: */
  /* TerraPulse manda alertas de verdad y confundirlas sería grave. */
  --quiz-resuelto: #57c97f;
  --quiz-pendiente: #e5a93c;
  --quiz-abierto: #d9614f;
}

[hidden] {
  display: none !important;
}

.quiz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   FONDO · profundidad sin ruido
   ========================================================================== */

.quiz-fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.quiz-fondo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -30vh;
  width: 120vw;
  height: 90vh;
  transform: translateX(-50%);
  background: radial-gradient(
    45% 50% at 50% 50%,
    rgba(69, 174, 194, 0.14) 0%,
    rgba(69, 174, 194, 0) 72%
  );
}

/*
  CURVAS DE NIVEL, AL 3%.

  Un mapa topográfico es exactamente lo que hay debajo de este producto, y
  al 3% de opacidad no se ve: se nota. Si se llegara a leer como un dibujo,
  estaría demasiado fuerte.
*/
.quiz-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    repeating-radial-gradient(circle at 22% 18%, transparent 0 38px, #ffffff 38px 39px),
    repeating-radial-gradient(circle at 78% 74%, transparent 0 46px, #ffffff 46px 47px),
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    88px 88px,
    88px 88px;
}

/* ==========================================================================
   ARMAZÓN
   ========================================================================== */

.quiz-app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.quiz-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

.quiz-marca span {
  color: var(--accent);
}

.quiz-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.quiz-pill svg {
  color: var(--accent);
  opacity: 0.85;
}

/* En pantallas muy estrechas el pill se acorta antes que empujar la marca. */
.quiz-pill-corta {
  display: none;
}

@media (max-width: 379px) {
  .quiz-pill-larga {
    display: none;
  }
  .quiz-pill-corta {
    display: inline;
  }
}

.quiz-main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/*
  Solo una escena visible a la vez.

  Y sin los 80 px de aire que /ventas.css le pone a todo <section>: en una
  página de ventas eso es el ritmo entre bloques, y aquí es un tercio de la
  pantalla del móvil regalado por encima de la imagen.
*/
.quiz-escena {
  display: none;
  padding: 0;
}
.quiz-escena.activa {
  display: block;
}

/* ==========================================================================
   PORTADA
   ==========================================================================

   EL ORDEN EN MÓVIL ES: IMAGEN → TEXTO → BOTÓN.

   Antes de leer una palabra hay que entender la situación. La foto lo dice
   sola: la familia está separada, ha pasado algo y los cuatro están mirando
   el teléfono por la misma razón. Empezar por un titular de seis líneas es
   pedir que lean para saber si les interesa leer.
   ========================================================================== */

.quiz-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 6px;
}

.quiz-hero {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--surface-1);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(69, 174, 194, 0.07);
}

/*
  SIN RECORTAR, Y SIN TOCAR LA PROPORCIÓN.

  Nada de `object-fit: cover` ni de altura fija: la imagen se muestra con la
  relación que traiga el archivo. Cualquier recorte apaisado se comería a la
  hija y a la abuela, que son media historia.

  La proporción sale de los atributos width/height del <img>, así que el
  hueco se reserva antes de que la imagen cargue —sin salto de maquetación—
  y si mañana se cambia el archivo por uno con otra forma, esto se adapta
  solo.

  Un cuadrado ocupa entre 280 y 390 px de alto según el teléfono. Se
  comprobó en 320, 360x800, 375x812, 390x844, 412x915 y 430x932: en los seis
  el botón sigue quedando dentro de la primera pantalla.
*/
.quiz-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Copy ---------------------------------------------------------------- */

.quiz-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}

.quiz-h1 {
  font-size: clamp(1.78rem, 7.6vw, 3.05rem);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin: 10px 0 0;
  text-wrap: balance;
}

/* La promesa entera va en blanco menos el remate, que es lo que duele. */
.quiz-h1 em {
  font-style: normal;
  color: var(--accent);
}

.quiz-sub {
  color: var(--text-secondary);
  font-size: clamp(0.95rem, 2.4vw, 1.12rem);
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/*
  EL BOTÓN.

  Es el mayor contraste de la pantalla y el único elemento con el color de
  marca al 100%. Radio de 16 px —no cápsula— porque en la portada del quiz
  tiene que leerse como un control de aplicación, no como un enlace de web.
*/
.quiz-cta {
  border-radius: 16px;
  min-height: 56px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.06rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 18px;
}

.quiz-cta:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

.quiz-cta:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

/* ==========================================================================
   EL BOTÓN DEL RESULTADO ESTÁ VIVO
   ==========================================================================

   Es la única salida de la pantalla final y tiene que leerse como tal. Tres
   capas lentas y superpuestas, ninguna parpadeante:

     1 · respira      un halo que crece y se apaga cada 2,8 s
     2 · destella     una luz que lo cruza en diagonal cada 4,2 s
     3 · se adelanta  la flecha avanza al pasar por encima

   Ninguna dura menos de dos segundos y media. Un botón que parpadea rápido
   se lee como un error del sistema, no como una invitación — y en una
   pantalla donde todo lo demás está quieto, basta con moverse despacio.
   ========================================================================== */

.quiz-cta-viva {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: ctaRespira 2800ms ease-in-out 900ms infinite;
}

@keyframes ctaRespira {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(69, 174, 194, 0);
  }
  45% {
    box-shadow: 0 8px 34px 2px rgba(69, 174, 194, 0.42);
  }
}

/*
  EL DESTELLO.

  Una banda clara en diagonal que cruza el botón y desaparece. Va en un
  pseudoelemento para no tocar el contenido, y `skewX` le da la inclinación
  que hace que parezca luz reflejada y no una barra deslizándose.
*/
.quiz-cta-viva::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 34%;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.48) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  animation: ctaDestella 4200ms ease-in-out 1400ms infinite;
}

@keyframes ctaDestella {
  0% {
    left: -40%;
  }
  /* Cruza en el primer 40% del ciclo y espera fuera el resto. */
  40%,
  100% {
    left: 118%;
  }
}

.quiz-cta-flecha {
  transition: transform 220ms var(--quiz-curva);
}

@media (hover: hover) {
  .quiz-cta-viva:hover .quiz-cta-flecha {
    transform: translateX(4px);
  }
}

/*
  Mientras navega, el destello se apaga: ya se le hizo caso.

  La respiración no hace falta pararla aquí — el bloque del puente, más
  abajo, le pone encima el latido de salida y esa gana por ir después.
*/
#escena-resultado.saliendo .quiz-cta-viva::after {
  animation: none;
  opacity: 0;
}

.quiz-loop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.quiz-loop svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
  opacity: 0.6;
}

.quiz-micro {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* --- Portada en escritorio ----------------------------------------------- */

/*
  A partir de 900 px el orden se invierte: copy a la izquierda, imagen a la
  derecha. No es la versión móvil estirada — en escritorio se lee de
  izquierda a derecha y el titular tiene que ser lo primero que se cruza.
*/
@media (min-width: 900px) {
  .quiz-intro {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-top: 30px;
    min-height: 66vh;
  }

  /* Cuadrada también aquí; el tope evita que crezca más que la ventana. */
  .quiz-hero {
    order: 2;
    border-radius: 24px;
    max-width: min(100%, 68vh);
    margin-inline: auto;
  }

  .quiz-intro-copy {
    order: 1;
  }

  .quiz-cta {
    width: auto;
    min-width: 300px;
  }

}

/* ==========================================================================
   NÚCLEO · el visual del análisis y del resultado
   ==========================================================================

   CAPAS INDEPENDIENTES Y NINGUNA ENCIMA DE OTRA:

     1 · fondo del centro     .core-centro
     2 · anillo (SVG)         .core-anillo
     3 · cifra                .core-cifra
     4 · rótulo fijo          .core-etiqueta
     5 · nodos                .core-nodo
     6 · brillo del estado    box-shadow de cada nodo

   La cifra y el rótulo viven DENTRO del centro y en columna: no hay forma
   de que uno caiga encima del otro. Los nodos viven fuera del centro, sobre
   el anillo. Nada se coloca «a ojo» con un z-index.
   ========================================================================== */

.core {
  position: relative;
  width: min(216px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto;
  transition:
    transform var(--quiz-t-media) var(--quiz-curva),
    opacity var(--quiz-t-media) var(--quiz-curva);
}

.core-anillo {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  overflow: visible;
}

.core-centro {
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #1b2430 0%, #0f151c 72%);
  border: 1px solid var(--border-subtle);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
}

.core-cifra {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(2.9rem, 12vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.core-cifra small {
  font-size: 0.4em;
  color: var(--text-secondary);
}

/* Debajo de la cifra y nada más. Ni un icono, ni un segundo rótulo. */
.core-etiqueta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  line-height: 1.25;
  color: var(--text-muted);
  margin-top: 7px;
  text-transform: uppercase;
}

/*
  LOS SEIS NODOS · SOLO ICONO, Y SOBRE EL ANILLO.

  Seis rótulos alrededor de un círculo de 216 px se pisan entre ellos y
  obligan a leer texto inclinado. Los nombres están abajo, en las fichas,
  donde se leen de una pasada.

  CÓMO SE COLOCAN, Y POR QUÉ ASÍ.

  Cada nodo es una capa del tamaño completo del núcleo que se GIRA entera;
  dentro, el icono está clavado a las doce en punto sobre el anillo (43% de
  la altura) y se desgira lo mismo para no salir torcido.

  Antes esto se hacía con un nodo de 0x0 y un `translate(0, -43%)`. Un
  porcentaje en `translate` se mide contra el propio elemento, y el propio
  elemento medía cero: los seis iconos caían apilados justo encima de la
  cifra. Ese era el amasijo del centro.
*/
.core-nodo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
  `top: 7%` es la clave, y no es arbitrario: el anillo del SVG tiene radio 86
  sobre un lienzo de 200, o sea el 43% del alto. El centro está en el 50%, así
  que las doce en punto caen en 50 - 43 = 7%. Poner aquí «43%» —el número que
  parece el correcto— deja los seis iconos a quince píxeles del centro, unos
  encima de otros y encima de la cifra.
*/
.core-nodo > i {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition:
    border-color var(--quiz-t-media) var(--quiz-curva),
    color var(--quiz-t-media) var(--quiz-curva),
    box-shadow var(--quiz-t-media) var(--quiz-curva);
}

.core-nodo.apagado > i {
  opacity: 0.42;
}

/*
  La entrada anima opacidad en el <i> y escala en el SVG de dentro. El
  `transform` del <i> lleva la contra-rotación y no se puede tocar: una
  animación que lo sobreescriba pone el icono del revés.
*/
.core-nodo.entra > i {
  animation: nodoEntra 420ms var(--quiz-curva) both;
}

.core-nodo.entra > i > svg {
  animation: nodoPop 420ms var(--quiz-curva) both;
  animation-delay: inherit;
}

@keyframes nodoEntra {
  from {
    opacity: 0;
  }
}

@keyframes nodoPop {
  from {
    transform: scale(0.62);
  }
}

.core-nodo[data-estado='resolved'] > i {
  border-color: rgba(87, 201, 127, 0.55);
  color: var(--quiz-resuelto);
  box-shadow: 0 0 22px rgba(87, 201, 127, 0.18);
}
.core-nodo[data-estado='medium'] > i {
  border-color: rgba(229, 169, 60, 0.55);
  color: var(--quiz-pendiente);
  box-shadow: 0 0 22px rgba(229, 169, 60, 0.16);
}
.core-nodo[data-estado='high'] > i {
  border-color: rgba(217, 97, 79, 0.6);
  color: var(--quiz-abierto);
  box-shadow: 0 0 22px rgba(217, 97, 79, 0.18);
}

@media (min-width: 900px) {
  .core {
    width: 260px;
  }
  .core-nodo > i {
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border-radius: 15px;
  }
  .core-cifra {
    font-size: 3.6rem;
  }
  .core-etiqueta {
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   PROGRESO
   ========================================================================== */

.quiz-progreso-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.quiz-barra {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 9px;
}

.quiz-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e8fa3, var(--accent));
  box-shadow: 0 0 12px rgba(69, 174, 194, 0.5);
  transition: width var(--quiz-t-media) var(--quiz-curva);
}

/* ==========================================================================
   PREGUNTA
   ========================================================================== */

.quiz-pregunta {
  max-width: 660px;
  margin: 0 auto;
  padding-top: 18px;
}

.quiz-categoria {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 24px;
}

.quiz-enunciado {
  font-size: clamp(1.28rem, 4.8vw, 1.82rem);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 10px 0 0;
  text-wrap: pretty;
}

.quiz-enunciado:focus {
  outline: none;
}

.quiz-nota {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 10px 0 0;
  text-wrap: pretty;
}

.quiz-opciones {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/*
  LA TARJETA ENTERA ES EL BOTÓN.

  Un radio de 20 px al lado de un texto de tres líneas es un blanco que se
  falla con el pulgar en un autobús. Aquí el área de toque es la tarjeta:
  nunca baja de 68 px de alto.
*/
.quiz-opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 17px 19px;
  text-align: left;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.38;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition:
    border-color var(--quiz-t-rapida) ease,
    background var(--quiz-t-rapida) ease,
    transform var(--quiz-t-rapida) ease;
}

/* Con siete opciones, la séptima pregunta necesita algo menos de aire. */
.quiz-opciones[data-tipo='multi'] {
  gap: 9px;
}

.quiz-opciones[data-tipo='multi'] .quiz-opcion {
  min-height: 58px;
  padding: 14px 18px;
}

@media (hover: hover) {
  .quiz-opcion:hover {
    border-color: rgba(69, 174, 194, 0.4);
    background: var(--surface-2);
    transform: translateY(-1px);
  }
}

.quiz-opcion:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.quiz-marcador {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--quiz-t-rapida) ease,
    background var(--quiz-t-rapida) ease;
}

.quiz-marcador svg {
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--quiz-t-rapida) var(--quiz-curva);
}

/* Multiselección: cuadrado, no círculo. La forma dice cuántas caben. */
.quiz-opcion[data-multi='1'] .quiz-marcador {
  border-radius: 7px;
}

.quiz-opcion.elegida {
  border-color: var(--accent);
  background: rgba(69, 174, 194, 0.09);
  box-shadow: 0 0 24px rgba(69, 174, 194, 0.1);
}

.quiz-opcion.elegida .quiz-marcador {
  border-color: var(--accent);
  background: var(--accent);
}

.quiz-opcion.elegida .quiz-marcador svg {
  opacity: 1;
  transform: scale(1);
}

.quiz-opcion.late {
  animation: latir 360ms var(--quiz-curva);
}

@keyframes latir {
  50% {
    transform: scale(0.985);
  }
}

/* Mientras se pasa de pregunta no se acepta nada más. */
.quiz-opciones.bloqueada {
  pointer-events: none;
}

/*
  EL BOTÓN DE LA SÉPTIMA SE QUEDA PEGADO ABAJO.

  Siete opciones no caben en una pantalla, y un botón que se va con el
  desplazamiento deja de existir para quien está eligiendo la sexta.
*/
.quiz-sticky {
  position: sticky;
  bottom: 10px;
  z-index: 3;
  margin-top: 16px;
  padding-top: 16px;
  background: linear-gradient(to top, var(--bg-primary) 58%, rgba(11, 15, 19, 0));
}

.quiz-sticky .quiz-cta {
  margin-top: 0;
}

.quiz-atras {
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 10px 2px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text-muted);
  cursor: pointer;
}

.quiz-atras:hover {
  color: var(--text-secondary);
}

/* Transiciones entre preguntas */
.quiz-pregunta.sale-izq {
  animation: saleIzq var(--quiz-t-media) var(--quiz-curva) both;
}
.quiz-pregunta.entra-der {
  animation: entraDer var(--quiz-t-media) var(--quiz-curva) both;
}
.quiz-pregunta.sale-der {
  animation: saleDer var(--quiz-t-media) var(--quiz-curva) both;
}
.quiz-pregunta.entra-izq {
  animation: entraIzq var(--quiz-t-media) var(--quiz-curva) both;
}

@keyframes saleIzq {
  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}
@keyframes entraDer {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes saleDer {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes entraIzq {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

/* ==========================================================================
   ANÁLISIS
   ========================================================================== */

.quiz-analisis {
  max-width: 560px;
  margin: 0 auto;
  padding-top: clamp(28px, 9svh, 76px);
  text-align: center;
}

/* El barrido: un arco que da vueltas mientras se encienden los nodos. */
.core-barrido {
  animation: barrido 1600ms linear infinite;
}

@keyframes barrido {
  to {
    stroke-dashoffset: -540.35;
  }
}

.quiz-analisis-titulo {
  font-size: clamp(1.08rem, 3.6vw, 1.38rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 30px 0 0;
  text-wrap: balance;
}

.quiz-analisis-frase {
  color: var(--text-secondary);
  font-size: 0.94rem;
  margin: 10px 0 0;
  min-height: 1.5em;
  transition: opacity var(--quiz-t-rapida) ease;
}

/* ==========================================================================
   RESULTADO
   ==========================================================================

   PRIMERA PANTALLA: anillo, veredicto, cuenta, tres brechas y el botón.

   Tres fichas grandes antes del botón lo empujan dos pantallas abajo, y
   quien ya entendió su resultado en tres segundos tiene que recorrerlas
   para encontrar la salida. El detalle está debajo, y lo abre quien quiera.
   ========================================================================== */

.quiz-resultado {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 14px;
}

.quiz-resultado-cabecera {
  display: grid;
  gap: 20px;
}

.quiz-resultado-texto {
  text-align: center;
}

.quiz-nivel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}

.quiz-veredicto {
  font-size: clamp(1.32rem, 5vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  text-wrap: balance;
}

.quiz-veredicto:focus {
  outline: none;
}

.quiz-cuenta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.quiz-cuenta > div {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.quiz-cuenta b {
  color: var(--text-primary);
  font-weight: 600;
}

/* Las tres brechas, en pequeño. El detalle de cada una está más abajo. */
.quiz-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.quiz-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.9;
}

.quiz-chip[data-severidad='high'] {
  color: var(--quiz-abierto);
  background: rgba(217, 97, 79, 0.1);
}
.quiz-chip[data-severidad='medium'] {
  color: var(--quiz-pendiente);
  background: rgba(229, 169, 60, 0.1);
}

.quiz-desplegar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px auto 0;
  padding: 10px 16px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--accent);
  cursor: pointer;
}

.quiz-desplegar svg {
  transition: transform var(--quiz-t-media) var(--quiz-curva);
}

.quiz-desplegar[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.quiz-detalle {
  margin-top: 8px;
  animation: sube 420ms var(--quiz-curva) both;
}

.quiz-brechas {
  display: grid;
  gap: 12px;
}

.quiz-brecha {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-align: left;
}

.quiz-brecha-icono {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}

.quiz-brecha[data-severidad='high'] .quiz-brecha-icono {
  color: var(--quiz-abierto);
  background: rgba(217, 97, 79, 0.12);
}
.quiz-brecha[data-severidad='medium'] .quiz-brecha-icono {
  color: var(--quiz-pendiente);
  background: rgba(229, 169, 60, 0.12);
}

.quiz-brecha h3 {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.quiz-brecha p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/*
  EL ESTADO NO SE DICE SOLO CON COLOR.

  Va con símbolo y con palabra. Quien no distingue el ámbar del verde tiene
  que poder leer su diagnóstico igual.
*/
.quiz-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  margin-top: 8px;
  text-transform: uppercase;
}

.quiz-hogar {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.quiz-hogar > div {
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(69, 174, 194, 0.06);
  border: 1px solid rgba(69, 174, 194, 0.22);
  text-align: left;
}

.quiz-hogar b {
  display: block;
  font-size: 0.94rem;
  margin-bottom: 4px;
}

.quiz-hogar span {
  color: var(--text-secondary);
  font-size: 0.89rem;
  line-height: 1.5;
}

.quiz-puente {
  margin-top: 20px;
  padding: 24px 22px;
  border-radius: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  text-align: center;
}

.quiz-puente h2 {
  font-size: clamp(1.06rem, 3.8vw, 1.35rem);
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.quiz-puente p {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 12px 0 0;
  text-wrap: pretty;
}

/* --- Resultado en escritorio --------------------------------------------- */

/*
  Anillo a la izquierda, lectura a la derecha. La misma lógica que en móvil
  —anillo, veredicto, cuenta, brechas, botón— puesta en dos columnas.
*/
@media (min-width: 900px) {
  .quiz-resultado {
    padding-top: clamp(30px, 9vh, 90px);
  }

  .quiz-resultado-cabecera {
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: center;
  }

  .quiz-resultado-texto {
    text-align: left;
  }

  .quiz-cuenta,
  .quiz-chips {
    justify-content: flex-start;
  }

  .quiz-cta {
    width: auto;
    min-width: 320px;
  }

  .quiz-desplegar {
    margin-left: 0;
    padding-left: 0;
  }

  .quiz-detalle {
    margin-top: 34px;
  }

  .quiz-brechas {
    grid-template-columns: repeat(3, 1fr);
  }

  .quiz-hogar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   EL PUENTE HACIA LA LANDING
   ==========================================================================

   Medio segundo, y nunca un spinner. El núcleo se encoge, el botón late y
   una frase dice qué está pasando. Una carga falsa de cuatro segundos no
   añade valor: añade cuatro segundos.
   ========================================================================== */

#escena-resultado.saliendo .core {
  transform: scale(0.94);
  opacity: 0.55;
}

#escena-resultado.saliendo .quiz-cta {
  animation: ctaLatido 560ms var(--quiz-curva);
}

@keyframes ctaLatido {
  0% {
    box-shadow: 0 0 0 0 rgba(69, 174, 194, 0.55);
  }
  100% {
    box-shadow: 0 0 0 26px rgba(69, 174, 194, 0);
  }
}

.quiz-puerta {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 15, 19, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.quiz-puerta.visible {
  opacity: 1;
}

.quiz-puerta-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.quiz-puerta-marca svg {
  animation: latidoMarca 1400ms ease-in-out infinite;
}

@keyframes latidoMarca {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.55;
  }
}

/* ==========================================================================
   ENTRADAS
   ========================================================================== */

.sube {
  animation: sube 480ms var(--quiz-curva) both;
}

@keyframes sube {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ==========================================================================
   QUIEN PIDE MENOS MOVIMIENTO, RECIBE MENOS MOVIMIENTO

   No se degrada la información: se quitan los desplazamientos y los
   destellos. Todo lo que se podía leer se sigue leyendo.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}