/**
 * Cuestionario a pantalla completa — Medical Rhapsody
 *
 * Se copió la ESTRUCTURA del referente (pantalla completa, una pregunta,
 * tarjetas tocables, cálculo animado), no su estética. La paleta y las
 * tipografías son las de la marca: sin hex crudo, todo por var(--…).
 *
 * Nota sobre el desplazamiento: el documento nunca se desplaza —solo el lienzo
 * interno, y solo cuando el contenido no cabe—. Eso mantiene la sensación de
 * pantalla fija sin dejar inalcanzable la pantalla de contacto en un móvil
 * pequeño, que es lo que pasaría con overflow:hidden a secas.
 */

/* Mientras el cuestionario está activo, el sitio desaparece: nada compite con
   la pregunta. Vuelve entero cuando llega el informe. */
body.quiz-activo { overflow: hidden; }
body.quiz-activo .nav-bar,
body.quiz-activo footer,
body.quiz-activo .whatsapp-float,
body.quiz-activo .skip-link { display: none !important; }

.quiz {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-soft);
}

/* ── Cromo mínimo ────────────────────────────────────────────────────────── */

.quiz__progreso {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-border-soft);
  z-index: 2;
}
.quiz__progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width var(--duration-normal) var(--ease-out);
}

.quiz__atras {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-soft);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.quiz__atras:hover { color: var(--color-primary); border-color: var(--color-primary); }
.quiz__atras:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Lienzo ──────────────────────────────────────────────────────────────── */

.quiz__lienzo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* `safe` evita el recorte clásico del flex centrado: cuando el contenido no
     cabe —la pantalla de contacto en un móvil pequeño— un `center` a secas
     desborda por ARRIBA y deja el título inalcanzable, porque no se puede
     desplazar hacia atrás. Con `safe` se alinea al inicio en ese caso. */
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  /* El espacio de arriba deja libre el botón de volver: su alto más su
     separación, más un respiro. Con un valor fijo el título le quedaba pegado. */
  padding: calc(var(--space-5) + 2.75rem + var(--space-6)) var(--space-5) var(--space-10);
  text-align: center;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.quiz__lienzo[data-saliendo] { opacity: 0; transform: translateY(-6px); }
.quiz__lienzo > * { width: 100%; max-width: 34rem; }

/* ── Portada ─────────────────────────────────────────────────────────────── */

.quiz__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stat);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.quiz__h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
}
.quiz__h1 em { font-style: normal; color: var(--color-accent); }
.quiz__intro {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-8);
  max-width: 32rem;
}
.quiz__nota {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  margin: var(--space-5) auto 0;
  max-width: 30rem;
}

/* ── Pregunta y opciones ─────────────────────────────────────────────────── */

.quiz__pregunta {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: 0 auto var(--space-4);
  max-width: 26ch;
}
/* Al cambiar de pantalla se mueve el foco al encabezado para que un lector de
   pantalla anuncie la pregunta nueva. Ese foco es programático, no lo pidió
   nadie con el tabulador, así que no lleva anillo: en un texto no interactivo
   se lee como un error de la página. Los elementos que SÍ se tabulan —las
   opciones, los botones, los campos— conservan el suyo. */
.quiz__lienzo [tabindex='-1']:focus { outline: none; }

.quiz__ayuda {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-6);
  max-width: 44ch;
}

.quiz__opciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.quiz__opcion {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  color: var(--color-text-dark);
  text-align: left;
  /* Solo transform y opacidad-adyacentes: nada de transition-all. */
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.quiz__opcion:hover {
  border-color: var(--color-accent-border-h);
  background: var(--color-accent-subtle);
}
.quiz__opcion:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.quiz__opcion:active { transform: scale(0.99); }
.quiz__opcion[data-elegida='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.quiz__letra {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
}
.quiz__opcion[data-elegida='true'] .quiz__letra,
.quiz__opcion:hover .quiz__letra {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.quiz__opcion-texto small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.quiz__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.quiz__cta:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-cta-hover); }
.quiz__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.quiz__cta:active { transform: translateY(1px); }

.quiz__saltar {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quiz__saltar:hover { color: var(--color-primary); }
.quiz__saltar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.quiz__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

.quiz__textarea {
  width: 100%;
  min-height: 7rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-dark);
  resize: vertical;
}
.quiz__textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ── Pausas narrativas ───────────────────────────────────────────────────── */

.quiz__pausa-titulo {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-serif);
  color: var(--color-primary);
  margin: 0 auto var(--space-5);
  max-width: 20ch;
}
.quiz__pausa-texto {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-8);
  max-width: 40ch;
}

/* ── Contacto ────────────────────────────────────────────────────────────── */

.quiz__form { text-align: left; }
.quiz__campo { margin-bottom: var(--space-4); }
.quiz__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 30rem) { .quiz__fila { grid-template-columns: 1fr; gap: 0; } }

.quiz__consiente {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-4) 0 var(--space-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-text-dark);
}
.quiz__consiente input { margin-top: 0.25rem; flex: 0 0 auto; accent-color: var(--color-accent); }
.quiz__consiente a { color: var(--color-accent); }
.quiz__form .quiz__cta { width: 100%; margin-top: var(--space-4); }
.quiz__miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz [aria-invalid='true'] { border-color: var(--color-error); }

.quiz__estado {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-text-muted);
  text-align: center;
}
.quiz__estado[data-tono='error'] { color: var(--color-error); }

/* ── Cálculo ─────────────────────────────────────────────────────────────── */

.quiz__calculo { display: flex; flex-direction: column; align-items: center; }

.quiz__anillo { position: relative; width: 9rem; height: 9rem; margin-bottom: var(--space-8); }
.quiz__anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz__anillo-base {
  fill: none;
  stroke: var(--color-border-soft);
  stroke-width: 6;
}
.quiz__anillo-arco {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
}
.quiz__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-primary);
}
.quiz__calculo-quieto {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

.quiz__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz__paso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  transition: opacity var(--duration-normal) var(--ease-out);
}
.quiz__paso[data-estado='pendiente'] { opacity: 0; }
.quiz__paso[data-estado='activo'] { opacity: 1; color: var(--color-text-dark); }
.quiz__paso[data-estado='hecho'] { opacity: 1; color: var(--color-text-muted); }

.quiz__paso-marca {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-soft);
}
.quiz__paso[data-estado='activo'] .quiz__paso-marca {
  border-color: var(--color-accent);
  border-top-color: transparent;
  animation: quiz-gira 0.9s linear infinite;
}
.quiz__paso[data-estado='hecho'] .quiz__paso-marca {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
/* El check, con dos bordes girados. Un degradado en diagonal parecía una cuña
   de tarta, no un visto bueno. */
.quiz__paso[data-estado='hecho'] .quiz__paso-marca::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--color-bg-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes quiz-gira { to { transform: rotate(360deg); } }

/* ── Menos movimiento ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .quiz__lienzo,
  .quiz__progreso span,
  .quiz__opcion,
  .quiz__cta,
  .quiz__paso { transition: none; }
  .quiz__paso[data-estado='activo'] .quiz__paso-marca { animation: none; }
  .quiz__paso[data-estado='pendiente'] { opacity: 0.35; }
}