/* =====================================================================
   Desarrolla Restaurante — hoja de estilos
   Dirección: base neutra (crema/carbón), color de marca como acento,
   escala tipográfica amplia, separación por espacio y filete en lugar
   de tarjetas flotantes.
   Estructura: tokens · base · utilidades · botones · bloques 0-12 · flotantes
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Neutros: son la superficie de la página. */
  --paper: #f7f4ef;
  --paper-2: #ede8e0;
  --white: #ffffff;
  --carbon: #17151c;
  --carbon-deep: #0f0e13;

  --ink: #17151c;
  --ink-soft: #5b5568;
  --ink-mute: #8b8496;
  --line: #ddd6cb;

  /* Sobre carbón. */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-soft: rgba(255, 255, 255, 0.62);
  --on-dark-mute: rgba(255, 255, 255, 0.38);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Marca: de aquí en adelante es ACENTO, no superficie.
     El degradado vive únicamente en el botón primario; ahí es señal
     de acción. Repetido en eyebrows y fondos dejaba de significar algo. */
  --accent: #f23d4c;
  --purple: #2a1750;
  --magenta: #bd45bf;
  --orange: #f29f05;
  --dr-gradient: linear-gradient(100deg, #f23d4c 0%, #bd45bf 55%, #f29f05 100%);

  --ok: #1a8f4c;
  --wa: #25d366;

  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-script: 'Caveat', cursive;

  /* Escala: rango amplio a propósito. Un titular debe funcionar como
     elemento gráfico, no solo como texto. */
  --fs-display: clamp(2.6rem, 5.9vw, 5rem);
  --fs-h2: clamp(1.95rem, 4.4vw, 3.4rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-num: clamp(3.6rem, 8.5vw, 7.5rem);
  --fs-micro: 0.72rem;

  --maxw: 1280px;
  --maxw-narrow: 720px;
  --pad-section: clamp(72px, 10vw, 136px);

  --radius: 12px;
  --radius-pill: 999px;
  --header-h: 68px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 20px;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: 900; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

section { scroll-margin-top: calc(var(--header-h) + 12px); }

::selection { background: var(--accent); color: #fff; }

/* ---------- 3. UTILIDADES ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.container-narrow { max-width: var(--maxw-narrow); }

.section-lead {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  max-width: 52ch;
}

/* Antetítulo. Sin degradado: era ruido cromático repetido diez veces. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-micro);
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--ink-mute);
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}

.eyebrow-dark { color: var(--ink-mute); }
.on-dark .eyebrow { color: var(--on-dark-mute); }

/* Caveat parte mal las dos palabras y deja "no" huérfano en una línea. */
.script-accent {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.08em;
  line-height: 0.85;
  color: var(--accent);
  white-space: nowrap;
}

/* El tachado es un fondo y no un text-decoration para poder dibujarlo de
   izquierda a derecha cuando el cierre entra en pantalla. */
.strike {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 100% 0.09em;
  opacity: 0.55;
}

.js .strike { background-size: 0% 0.09em; transition: background-size 0.7s var(--ease-out) 0.9s; }
.js .is-in .strike { background-size: 100% 0.09em; }

/* Cifra protagonista. Solo se usa con datos reales. */
.stat-num {
  font-size: var(--fs-num);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.05em;
  display: block;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.on-dark .rule { border-top-color: var(--line-dark); }

/* ---------- 3b. MOVIMIENTO ----------
   Aparición progresiva al hacer scroll. El estado oculto se aplica solo con
   <html class="js"> (lo pone un script del <head>): si el JS falla, la página
   se ve entera en lugar de quedarse en blanco.
   Referencias: edicaomia.com.br (textos que entran escalonados y con curva
   larga) y dynexo.io (titulares que suben palabra por palabra desde una
   máscara, cifras que cuentan, texto que se enciende al leerlo). */
:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(4px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.9s var(--ease-out),
              filter 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Titulares palabra por palabra. script.js envuelve cada palabra en una
   máscara; se recorta con clip-path y no con overflow para no mover la línea
   base (overflow:hidden en un inline-block la baja al borde inferior). */
.split-mascara {
  display: inline-block;
  clip-path: inset(-0.35em -0.12em -0.24em -0.12em);
}

.split-unidad { display: inline-block; }

.js [data-split] .split-unidad {
  transform: translateY(150%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms) + 80ms);
}

.js .is-in [data-split] .split-unidad,
.js [data-split].is-in .split-unidad { transform: none; }

/* Hijos que entran uno detrás de otro (listas, credenciales). */
.js [data-escalonar] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 90ms + 150ms);
}

.js .is-in [data-escalonar] > *,
.js [data-escalonar].is-in > * { opacity: 1; transform: none; }

/* Texto que se enciende a medida que se lee. */
[data-iluminar] { --luz-apagada: rgba(23, 21, 28, 0.17); }
.on-dark [data-iluminar] { --luz-apagada: rgba(255, 255, 255, 0.2); }
.js [data-iluminar] .luz { color: var(--luz-apagada); transition: color 0.45s ease; }
.js [data-iluminar] .luz.is-lit { color: inherit; }

[hidden] { display: none !important; }

/* ---------- 4. BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

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

/* El degradado de marca vive solo aquí. */
.btn-primary {
  background: var(--dr-gradient);
  color: #fff;
  box-shadow: 0 6px 18px rgba(242, 61, 76, 0.22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(242, 61, 76, 0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn-ghost:hover { background: var(--paper-2); }

.on-dark .btn-ghost,
.quiz-nav .btn-ghost {
  color: var(--ink-soft);
  border-color: var(--line);
}

.btn-whatsapp {
  background: var(--carbon);
  color: #fff;
  box-shadow: none;
}

.btn-whatsapp:hover { transform: translateY(-2px); background: #221e2b; }

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 18px 38px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- 5. BLOQUE 0 · CABECERA ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 244, 239, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.logo-link { display: inline-flex; }
.logo { height: 32px; width: auto; }

/* Barra de lectura bajo la cabecera (como la de dynexo.io). Va atada al
   scroll con animation-timeline, sin JS; donde el navegador no lo soporta
   simplemente no aparece. */
.header-progreso {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--dr-gradient);
  transform-origin: 0 50%;
  transform: scaleX(0);
  display: none;
}

@supports (animation-timeline: scroll()) {
  .header-progreso {
    display: block;
    animation: progreso-lectura linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progreso-lectura { to { transform: scaleX(1); } }

/* ---------- 6. BLOQUE 1 · HERO ---------- */
/* Claro y asimétrico. El morado saturado de antes competía con el CTA
   y leía como campaña, no como consultora. */
.hero {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 88px);
}

/* Dos columnas del mismo peso, centradas en vertical: el mensaje a la
   izquierda y la pregunta 1 a la derecha. Antes la foto iba anclada abajo
   y dejaba medio hero vacío arriba a la derecha. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* Más chico que el display del resto de la página: el titular ya no es
   el cierre del hero, le abre paso a la pregunta 1. */
.hero h1 { margin-bottom: 22px; font-size: clamp(2.4rem, 4.2vw, 3.8rem); }

.hero-sub {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 40ch;
  margin-bottom: 14px;
}

.hero-sub strong { color: var(--ink); font-weight: 700; }

/* Tarjeta de contacto del hero (2026-10-07). Junta en una pieza la línea
   del fundador y la salida a WhatsApp: el botón verde suelto se veía pesado
   y ajeno al resto de la página. Superficie blanca como la tarjeta del quiz,
   el verde solo en el sello de la foto y en el botón chico. Toda la tarjeta
   es el enlace. El botón usa #0e7a40 (contraste 5,4:1 con blanco); el verde
   de WhatsApp (#25d366) queda para el sello, sin texto encima. */
.hero-contacto {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 540px;
  margin-top: 26px;
  padding: 12px 12px 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink-soft);
  text-decoration: none;
  box-shadow: 0 18px 36px -30px rgba(23, 21, 28, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-contacto:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 122, 64, 0.35);
  box-shadow: 0 22px 40px -28px rgba(14, 122, 64, 0.45);
}

.hero-contacto:focus-visible { outline: 3px solid var(--wa); outline-offset: 3px; }

.hc-foto { position: relative; flex: 0 0 auto; }

.hc-foto img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* Sello de WhatsApp sobre la foto: dice "esta persona contesta por aquí". */
.hc-sello {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 0 0 2px var(--white);
}

.hc-sello svg { width: 12px; height: 12px; fill: #fff; }

.hc-texto {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
}

.hc-texto strong { color: var(--ink); font-weight: 700; }

.hc-aval {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.hc-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: #0e7a40;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

.hc-cta svg { width: 18px; height: 18px; fill: #fff; }
.hc-corto, .hc-extra { display: none; }
.hero-contacto:hover .hc-cta { background: #0b6635; }
.js .hero-contacto { animation-delay: 0.56s; }

/* "todavía no" y su punto viajan como una sola pieza del titular partido:
   como dos piezas, en laptops de 1366 px el punto bajaba solo a otra línea. */
.sin-corte { white-space: nowrap; }

/* El sello late tres veces cuando termina de entrar el hero, para que el ojo
   encuentre la tarjeta. Con movimiento reducido no se mueve. */
.hc-sello { animation: hc-latido 1.6s ease-out 1.6s 3; }

@keyframes hc-latido {
  0% { box-shadow: 0 0 0 2px var(--white), 0 0 0 2px rgba(37, 211, 102, 0.6); }
  100% { box-shadow: 0 0 0 2px var(--white), 0 0 0 12px rgba(37, 211, 102, 0); }
}

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

/* El quiz es la acción del hero: va en tarjeta para que pese lo mismo que
   el titular de al lado. Más compacto que la antigua sección 5 para que la
   primera respuesta entre en el primer pantallazo del celular. */
.hero-quiz {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: 0 24px 48px -32px rgba(23, 21, 28, 0.35);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.quiz-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.quiz-titulo {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
}

.hero-quiz .progreso-texto { margin: 0; }
.hero-quiz .progreso-barra { margin-bottom: 22px; }
.hero-quiz .pregunta legend { font-size: clamp(1.2rem, 2.1vw, 1.6rem); margin-bottom: 18px; }
.hero-quiz .opcion { padding: 14px 18px; margin-bottom: 8px; font-size: 0.95rem; background: var(--paper); }

/* Entrada del hero al cargar: el titular sube palabra por palabra (script.js)
   y el resto entra escalonado. Todo termina antes del segundo: la pregunta 1
   es la acción de la página y no puede hacerse esperar. */
.js .hero-copy > :not(h1) { animation: entra-hero 0.9s var(--ease-out) backwards; }
.js .hero-copy .eyebrow { animation-delay: 0.05s; }
.js .hero-sub { animation-delay: 0.5s; }

/* Pantallas bajas de escritorio (laptops de 768 px o menos de alto, ventanas
   no maximizadas): menos aire arriba y un titular algo menor, para que el
   botón de WhatsApp entre en la primera vista. */
@media (min-width: 1001px) and (max-height: 820px) {
  .hero { padding-block: 28px 40px; }
  .hero h1 { font-size: clamp(2.2rem, 3.5vw, 3.1rem); margin-bottom: 16px; }
  .hero-contacto { margin-top: 18px; }
}
.js .hero-quiz { animation: entra-quiz 1s var(--ease-out) 0.28s backwards; }

/* Mientras script.js no parte el titular en palabras, no se muestra: evita
   que se vea un instante entero, desaparezca y vuelva a entrar. Si el JS no
   llega, a los 2,5 s aparece igual. */
.js .hero h1[data-split]:not([data-partido]) {
  visibility: hidden;
  animation: mostrar-igual 0s 2.5s forwards;
}

@keyframes mostrar-igual { to { visibility: visible; } }

@keyframes entra-hero {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
}

@keyframes entra-quiz {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
}

/* Final del diagnóstico: un "¡Listo!" que celebra (check + confeti) y que es
   todo un enlace a la ficha para quien vuelve a subir después de leer. */
.hero-quiz { position: relative; transition: box-shadow 0.6s ease, border-color 0.6s ease; }

.hero-quiz.is-completo {
  border-color: rgba(242, 61, 76, 0.35);
  box-shadow: 0 0 0 4px rgba(242, 61, 76, 0.08), 0 24px 48px -32px rgba(23, 21, 28, 0.35);
}

.quiz-hecho {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 26px 18px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.25s ease;
}

.quiz-hecho:hover { transform: translateY(-3px); background: var(--paper-2); }
.quiz-hecho:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.qh-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dr-gradient);
  box-shadow: 0 10px 24px -8px rgba(242, 61, 76, 0.55);
  animation: qh-pop 0.7s var(--ease-pop) both;
}

/* Onda que se expande una vez detrás del check. */
.qh-check::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: qh-onda 1.1s ease-out 0.35s;
}

.qh-check svg { width: 40px; height: 40px; }

.qh-check path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: qh-trazo 0.45s ease-out 0.4s forwards;
}

.qh-titulo {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3rem);
  line-height: 1;
  color: var(--accent);
  animation: qh-sube 0.6s var(--ease-out) 0.3s backwards;
}

.qh-texto {
  max-width: 30ch;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  animation: qh-sube 0.6s var(--ease-out) 0.42s backwards;
}

.qh-cta {
  margin-top: 8px;
  pointer-events: none; /* el clic es del enlace entero */
  animation: qh-sube 0.6s var(--ease-out) 0.54s backwards;
}

.quiz-hecho:hover .qh-cta {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(242, 61, 76, 0.3);
}

/* Al volver a verlo después de bajar, el botón hace un guiño. */
.quiz-hecho.is-guino .qh-cta { animation: qh-guino 0.9s var(--ease-pop); }

@keyframes qh-pop {
  from { transform: scale(0) rotate(-40deg); }
}

@keyframes qh-onda {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes qh-trazo { to { stroke-dashoffset: 0; } }

@keyframes qh-sube {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes qh-guino {
  0%, 100% { transform: none; }
  30% { transform: translateY(-4px) scale(1.05); }
  60% { transform: translateY(0) scale(0.98); }
}

/* Lienzo del confeti: fijo sobre todo, sin atrapar clics. */
.confeti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70;
}

/* ---------- 7. BLOQUE 2 · AUTORIDAD ---------- */
/* Antes: seis viñetas del mismo tamaño, con siete marcas metidas en una
   frase corrida. Era el activo de credibilidad más fuerte tipografiado
   como pie de página. Ahora: cifra grande + muro de marcas + credenciales
   comprimidas a una línea. */
.autoridad {
  background: var(--carbon);
  color: var(--on-dark);
  padding: clamp(56px, 7vw, 96px) 0;
}

.autoridad-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.autoridad-cifra .stat-num { color: #fff; font-variant-numeric: tabular-nums; }

/* Sin esto la cinta de logos (más ancha que la columna) ensancha la grilla. */
.autoridad-marcas { min-width: 0; }

.autoridad-cifra p {
  margin: 16px 0 0;
  color: var(--on-dark-soft);
  font-size: 0.95rem;
  max-width: 22ch;
  line-height: 1.45;
}

.marcas-label {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin: 0 0 22px;
}

/* Logos: todos en blanco (vienen así desde assets/marcas/). La altura de
   cada uno va en su --h para que pesen parecido a la vista: un logo
   cuadrado necesita más alto que uno apaisado. Sin JS o con movimiento
   reducido, quedan quietos en varias filas. */
.marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 22px;
}

.marcas li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 clamp(20px, 2.6vw, 36px);
}

.marcas li:first-child { padding-left: 0; }

.marcas img {
  height: var(--h, 40px);
  width: auto;
  max-width: none;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.marcas img:hover { opacity: 1; transform: scale(1.06); }

/* La cinta: script.js duplica los logos y la lista se corre la mitad de su
   ancho, así el final empalma con el principio sin salto. Se detiene al
   pasar el mouse. */
.marquesina.is-activa {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  overflow: hidden;
}

.marcas.is-cinta {
  flex-wrap: nowrap;
  width: max-content;
  animation: cinta 34s linear infinite;
}

.marcas.is-cinta li:first-child { padding-left: clamp(20px, 2.6vw, 36px); }
.marquesina:hover .marcas.is-cinta { animation-play-state: paused; }

@keyframes cinta { to { transform: translateX(-50%); } }

.credenciales {
  list-style: none;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  font-size: 0.84rem;
  color: var(--on-dark-soft);
}

.credenciales li {
  position: relative;
  padding-left: 15px;
}

.credenciales li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 8. BLOQUE 3 · EL ESPEJO ---------- */
/* Sin tarjetas: filete superior, índice y cita. La separación la da
   el espacio, no una sombra. */
.espejo { padding: var(--pad-section) 0; background: var(--paper); }

.espejo-head { max-width: 46ch; margin-bottom: clamp(40px, 5vw, 68px); }

.frases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
}

/* Cada frase: índice y la frase en grande arriba, y debajo su escena
   animada (Christopher pidió el título encima de la gráfica). */
.frase { margin: 0; }

.frase-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.frase-num {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--carbon);
  color: #fff;
  letter-spacing: 0.08em;
}

.frase h3 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 17ch;
  /* Dos líneas siempre: así las tres escenas arrancan a la misma altura. */
  min-height: 2.36em;
}

/* ---- Escenario común ----
   Desde el 2026-09-29 (segunda vuelta) las escenas son objetos reales del
   día a día de un dueño, no paneles oscuros de "dashboard": el cuaderno de
   caja escrito a lapicero, el celular con notificaciones junto a la libreta
   de reservas, el grupo de WhatsApp del local. Pedido de Christopher: que no
   se vean "hechas con IA".
   Todo se mide en cqw (1 % del ancho de la escena) para que cada objeto
   escale igual en una tarjeta de 300 px que en una de 400 px.

   El tiempo de cada escena es UNA sola variable, --t, que va de 0 a 1 en
   bucle mientras la tarjeta está a la vista (.is-playing). Cada pieza dice en
   qué momento entra con su --ini y calcula su avance --p. Sin animación
   (fuera de pantalla o con movimiento reducido) --t vale 0,9: todo ya está
   escrito y todavía no empezó el borrado del final del bucle. Ese cuadro ya
   cuenta la historia completa. */
@property --t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.9;
}

.escena {
  --tinta: #1f3a8a;          /* lapicero azul */
  --tinta-roja: #cf2f3a;
  --fin: calc(1 - clamp(0, (var(--t) - 0.94) / 0.05, 1)); /* se borra al final del bucle */
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 18px;
  overflow: hidden;
  container-type: inline-size;
  font-size: 12px;
  line-height: 1.3;
  /* Mostrador: beige cálido con grano, como una foto y no como un degradado. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 30% 0%, #efe7da 0%, #e3d8c7 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 28, 0.06);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.frase:hover .escena {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 28, 0.06), 0 22px 40px -26px rgba(60, 40, 20, 0.45);
}

.frase.is-playing .escena { animation: escena-tiempo var(--dur, 9s) linear infinite; }

@keyframes escena-tiempo {
  from { --t: 0; }
  to { --t: 1; }
}

/* Avance de cada pieza: 0 antes de su --ini, 1 una vez que terminó de entrar. */
.escena [style*="--ini"] { --p: clamp(0, (var(--t) - var(--ini)) / var(--vel, 0.06), 1); }

/* Hoja de papel rayado (cuaderno y libreta). */
.papel {
  position: absolute;
  background-color: #fffdf7;
  background-image:
    linear-gradient(90deg, transparent var(--margen, 0), rgba(214, 70, 70, 0.45) var(--margen, 0), rgba(214, 70, 70, 0.45) calc(var(--margen, 0) + 1px), transparent calc(var(--margen, 0) + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--r) - 1px), rgba(84, 125, 186, 0.32) calc(var(--r) - 1px) var(--r));
  background-position: 0 0, 0 var(--arriba);
  background-repeat: no-repeat, repeat;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 16px 26px -16px rgba(70, 50, 30, 0.5);
  font-family: var(--font-script);
  color: var(--tinta);
  line-height: var(--r);
}

/* Lo escrito aparece de izquierda a derecha, como si se estuviera escribiendo. */
.escrito { clip-path: inset(-40% calc((1 - var(--p)) * 116% - 16%) -40% -5%); }

/* ---- 01 · La caja: el cuaderno del cierre de mes ---- */
.cuaderno {
  --r: 7cqw;
  --arriba: 7.5cqw;
  --margen: 9cqw;
  left: 13%;
  right: 13%;
  top: 6%;
  bottom: -10%;
  padding: var(--arriba) 5cqw 0 11.5cqw;
  border-radius: 3px 3px 0 0;
  rotate: -2.5deg;
  font-size: max(14px, 4.6cqw);
}

/* Agujeros del espiral. */
.cuaderno::before {
  content: '';
  position: absolute;
  top: 2cqw;
  left: 5%;
  right: 5%;
  height: 2.2cqw;
  background: radial-gradient(circle, #d8cfbf 0 42%, transparent 48%) 0 0 / 4.6cqw 100% repeat-x;
}

.cq-titulo {
  margin: 0;
  height: var(--r);
  font-weight: 700;
  font-size: 1.12em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.cq-lineas {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: var(--fin);
}

.cq-lineas li {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: var(--r);
  padding-right: 1cqw;
}

.cq-lineas li > span { position: relative; top: 0.5cqw; font-weight: 600; }

/* La raya de la suma, a mano: apenas torcida. */
.cq-total::before {
  content: '';
  position: absolute;
  left: 38%;
  right: 0;
  top: 0.3cqw;
  height: 2px;
  border-radius: 2px;
  background: var(--tinta);
  rotate: -1.2deg;
}

.cq-total > span { font-weight: 700 !important; }

.cq-circulo {
  position: absolute;
  right: -5.2cqw;
  top: -1.6cqw;
  width: 17cqw;
  height: 10cqw;
  overflow: visible;
}

.cq-circulo path {
  fill: none;
  stroke: var(--tinta-roja);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--t) - 0.63) / 0.09, 1));
}

.cq-nota {
  position: absolute;
  left: 34%;
  top: calc(var(--arriba) + 8 * var(--r) - 1cqw);
  color: var(--tinta-roja);
  font-weight: 700;
  font-size: 1.1em;
  rotate: -5deg;
  opacity: calc(clamp(0, (var(--t) - 0.72) / 0.04, 1) * var(--fin));
}

/* ---- 02 · Las redes: el celular lleno de likes y la libreta vacía ---- */
.celular {
  position: absolute;
  left: 6%;
  top: 7%;
  width: 49%;
  height: 110%;
  padding: 1.5cqw;
  border-radius: 7cqw;
  background: #1c1c1f;
  rotate: -4deg;
  box-shadow: 0 20px 30px -18px rgba(40, 30, 20, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.pantalla {
  height: 100%;
  padding: 5.5cqw 2.4cqw 0;
  border-radius: 5.6cqw;
  overflow: hidden;
  color: #fff;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Fondo de pantalla: una foto desenfocada, en tonos de cocina. */
  background:
    radial-gradient(60% 40% at 25% 30%, rgba(255, 214, 160, 0.55), transparent 70%),
    radial-gradient(70% 50% at 80% 80%, rgba(120, 70, 40, 0.6), transparent 70%),
    linear-gradient(165deg, #b49a7e 0%, #86705d 50%, #4f433b 100%);
}

.cel-hora {
  margin: 0;
  text-align: center;
  font-size: 10.5cqw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cel-fecha {
  margin: 1cqw 0 3.6cqw;
  text-align: center;
  font-size: 2.7cqw;
  opacity: 0.9;
}

.notis { opacity: var(--fin); }

/* Cada notificación nueva entra arriba y empuja a las anteriores. */
.noti {
  max-height: calc(var(--p) * 30cqw);
  margin-bottom: calc(var(--p) * 1.5cqw);
  opacity: var(--p);
  overflow: hidden;
}

.noti > div {
  padding: 1.9cqw 2.4cqw;
  border-radius: 3.4cqw;
  background: rgba(250, 248, 245, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #1c1c1e;
  font-size: max(9px, 2.75cqw);
  line-height: 1.3;
}

.noti .noti-app {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  margin-bottom: 0.5cqw;
  font-size: 0.86em;
  color: rgba(0, 0, 0, 0.5);
}

.noti-app b { color: #1c1c1e; font-weight: 600; }
.noti-app span { margin-left: auto; }

/* Ícono de Instagram. */
.noti-app i {
  flex: 0 0 auto;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 1cqw;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.libreta {
  --r: 6.4cqw;
  --arriba: 4cqw;
  --margen: 7cqw;
  left: 55%;
  top: 11%;
  width: 39%;
  height: 84%;
  padding: var(--arriba) 2.4cqw 0 8.5cqw;
  border-radius: 2px;
  rotate: 3deg;
  font-size: max(12px, 4cqw);
}

.lib-titulo { margin: 0; height: var(--r); font-weight: 700; font-size: 1.12em; }

.lib-horas { list-style: none; margin: 0; padding: 0; }

.lib-horas li {
  position: relative;
  height: var(--r);
  font-weight: 600;
}

.lib-horas li > span { position: relative; top: 0.5cqw; }

/* La única reserva del día, cancelada. */
.lib-cancelada {
  position: relative;
  margin-left: 1.6cqw;
  color: var(--tinta);
}

.lib-cancelada::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -4%;
  top: 55%;
  height: 2px;
  background: var(--tinta-roja);
  rotate: -3deg;
  transform-origin: 0 50%;
  scale: clamp(0, (var(--t) - 0.8) / 0.05, 1) 1;
}

/* ---- 03 · El día a día: el grupo de WhatsApp del local ---- */
.escena-duenio {
  --dur: 10s;
  background: #efeae2;
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #111b21;
}

.wa-cabecera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 2.4cqw 3.4cqw;
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 20, 26, 0.1);
}

.wa-flecha { width: 4.2cqw; height: 4.2cqw; fill: #54656f; flex: 0 0 auto; }

.wa-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: #dfe5e7;
}

.wa-avatar svg { width: 5cqw; height: 5cqw; fill: #fff; }

.wa-titulo { min-width: 0; }
.wa-nombre { display: block; font-weight: 600; font-size: max(11px, 3.5cqw); line-height: 1.2; }

.wa-sub {
  position: relative;
  display: block;
  height: 1.35em;
  font-size: max(9px, 2.7cqw);
  color: #667781;
}

.wa-sub > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.wa-escribiendo { color: #1fa855; opacity: 0; }

.wa-chat {
  position: absolute;
  left: 0;
  right: 0;
  top: 13cqw;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 3.2cqw 2.6cqw;
  opacity: var(--fin);
}

/* Cada mensaje nuevo crece desde abajo y sube a los anteriores, como en el
   chat de verdad; los primeros terminan escondidos bajo la cabecera. */
.msj {
  flex: 0 0 auto;
  max-height: calc(var(--p) * 34cqw);
  opacity: var(--p);
  overflow: hidden;
}

.msj .burbuja {
  width: fit-content;
  max-width: 82%;
  margin-bottom: 1.5cqw;
  padding: 1.3cqw 2.3cqw 1.1cqw;
  border-radius: 0.6cqw 2.4cqw 2.4cqw 2.4cqw;
  background: #fff;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: max(10px, 3.2cqw);
  line-height: 1.35;
}

.burbuja b { display: block; font-size: 0.86em; font-weight: 600; color: var(--c, #1fa855); }

.burbuja time {
  float: right;
  margin: 0.55em 0 0 2.2cqw;
  font-size: 0.7em;
  line-height: 1;
  color: #667781;
}

.msj-mio .burbuja {
  margin-left: auto;
  border-radius: 2.4cqw 0.6cqw 2.4cqw 2.4cqw;
  background: #d9fdd3;
}

.msj-mio time svg { width: 1.5em; height: 0.9em; margin-left: 0.25em; fill: #53bdeb; vertical-align: -0.1em; }

/* "Cocina está escribiendo…" en los huecos entre mensaje y mensaje. */
.is-playing .wa-escribiendo { animation: wa-escribe 10s linear infinite; }
.is-playing .wa-miembros { animation: wa-miembros 10s linear infinite; }

@keyframes wa-escribe {
  0%, 5.5% { opacity: 1; }
  6%, 15.5% { opacity: 0; }
  16%, 21.5% { opacity: 1; }
  22%, 31.5% { opacity: 0; }
  32%, 37.5% { opacity: 1; }
  38%, 47.5% { opacity: 0; }
  48%, 53.5% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes wa-miembros {
  0%, 5.5% { opacity: 0; }
  6%, 15.5% { opacity: 1; }
  16%, 21.5% { opacity: 0; }
  22%, 31.5% { opacity: 1; }
  32%, 37.5% { opacity: 0; }
  38%, 47.5% { opacity: 1; }
  48%, 53.5% { opacity: 0; }
  54%, 100% { opacity: 1; }
}

.espejo-cierre {
  margin: clamp(44px, 5vw, 72px) 0 0;
  max-width: 40ch;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- 9. BLOQUE 4 · LAS DOS CAPAS ---------- */
.capas {
  padding: var(--pad-section) 0;
  background: var(--carbon);
  color: var(--on-dark);
}

.capas h2 { color: #fff; max-width: 20ch; }

/* Desplegables: una fila por capa con el nombre en grande. El detalle se
   abre al tocar el título. La altura se anima con grid-template-rows
   (0fr → 1fr), que no necesita medir nada en JS. */
.capas-lista {
  margin-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--line-dark);
}

.capa { border-bottom: 1px solid var(--line-dark); }

.capa-titulo { margin: 0; font-size: inherit; letter-spacing: normal; }

.capa-toggle {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  width: 100%;
  padding: clamp(26px, 3.4vw, 42px) 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capa-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.capa-num {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.capa-nombre {
  flex: 1;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform 0.45s var(--ease-out), color 0.3s ease;
}

.capa-toggle:hover .capa-nombre { transform: translateX(10px); }

/* "+" que gira y se vuelve "−" al abrir. */
.capa-icono {
  position: relative;
  flex: 0 0 auto;
  width: clamp(44px, 5vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.55s var(--ease-out);
}

.capa-icono::before,
.capa-icono::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.55s var(--ease-out);
}

.capa-icono::after { transform: rotate(90deg); }

.capa-toggle:hover .capa-icono { border-color: #fff; }

.capa.is-abierta .capa-icono {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(180deg);
}

.capa.is-abierta .capa-icono::after { transform: rotate(0deg); }

.capa-detalle { display: grid; grid-template-rows: 1fr; }

.js .capa-detalle {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out);
}

.js .capa.is-abierta .capa-detalle { grid-template-rows: 1fr; }

.capa-detalle-inner { min-height: 0; overflow: hidden; }

/* Cerrado también sale del árbol de accesibilidad, no solo de la vista. */
.js .capa-detalle-inner { visibility: hidden; transition: visibility 0s linear 0.6s; }
.js .capa.is-abierta .capa-detalle-inner { visibility: visible; transition-delay: 0s; }

.capa dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0 0 clamp(30px, 3.5vw, 44px) calc(0.85rem * 2.2 + clamp(14px, 2.4vw, 28px));
}

.js .capa-dato {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}

.js .capa.is-abierta .capa-dato { opacity: 1; transform: none; }
.js .capa.is-abierta .capa-dato:nth-child(1) { transition-delay: 0.12s; }
.js .capa.is-abierta .capa-dato:nth-child(2) { transition-delay: 0.2s; }
.js .capa.is-abierta .capa-dato:nth-child(3) { transition-delay: 0.28s; }
.js .capa.is-abierta .capa-dato:nth-child(4) { transition-delay: 0.36s; }

.capa-dato { padding-top: 14px; border-top: 2px solid var(--accent); }

.capa dt {
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--on-dark-mute);
}

.capa dd {
  margin: 8px 0 0;
  color: var(--on-dark);
  font-size: 0.97rem;
  line-height: 1.5;
}

/* Cita ancla: tipografía grande, no una caja morada. */
.frase-ancla {
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0 0 0 clamp(20px, 3vw, 38px);
  border-left: 3px solid var(--accent);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: #fff;
  max-width: 30ch;
}

/* ---------- 10. BLOQUE 5 · PIEZAS DEL QUIZ (viven en el hero) ---------- */
/* Barra de avance: con el degradado de marca a lo ancho de toda la pista
   (100cqw), así cada tramo nuevo revela el color que le toca. Crece con un
   leve rebote y un brillo la cruza cada vez que avanza. */
.progreso-barra {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  overflow: hidden;
  container-type: inline-size;
  transition: box-shadow 0.5s ease;
}

.progreso-barra span {
  position: relative;
  display: block;
  height: 100%;
  width: 25%;
  min-width: 7px;
  border-radius: inherit;
  background: var(--dr-gradient);
  background-size: 100cqw 100%;
  overflow: hidden;
  transition: width 0.75s var(--ease-pop);
}

.progreso-barra span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
}

.progreso-barra.is-avanza span::after { animation: brillo-barra 0.9s ease 0.15s; }

.progreso-barra.is-completa { box-shadow: 0 0 0 4px rgba(242, 61, 76, 0.1), 0 0 18px rgba(242, 61, 76, 0.35); }

@keyframes brillo-barra { to { transform: translateX(100%); } }

#progreso-num { display: inline-block; }
.progreso-texto.is-cambia #progreso-num { animation: num-sube 0.45s var(--ease-pop); }
.progreso-texto.is-hecho { color: var(--ok); animation: qh-sube 0.5s var(--ease-out); }

@keyframes num-sube { from { opacity: 0; transform: translateY(70%); } }

/* Cada pregunta nueva entra de lado (desde la derecha al avanzar, desde la
   izquierda al volver) y sus respuestas caen una detrás de otra. Se usa
   fill "backwards" para que al terminar mande el estilo normal y el hover
   de cada opción siga funcionando. */
.pregunta.entra legend { animation: pregunta-in 0.55s var(--ease-out) backwards; }
.pregunta.entra .opcion { animation: pregunta-in 0.55s var(--ease-out) backwards; }
.pregunta.entra .opcion:nth-of-type(1) { animation-delay: 0.07s; }
.pregunta.entra .opcion:nth-of-type(2) { animation-delay: 0.13s; }
.pregunta.entra .opcion:nth-of-type(3) { animation-delay: 0.19s; }
.pregunta.entra .opcion:nth-of-type(4) { animation-delay: 0.25s; }
.pregunta.desde-atras { --desde: -32px; }

@keyframes pregunta-in {
  from { opacity: 0; transform: translateX(var(--desde, 32px)); }
}

/* La respuesta tocada late antes de pasar a la siguiente. */
.opcion.is-elegida { animation: elegir 0.4s var(--ease-pop); background: rgba(242, 61, 76, 0.06) !important; }

@keyframes elegir {
  35% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

#quiz-form.is-sale { animation: quiz-sale 0.35s ease forwards; }

@keyframes quiz-sale { to { opacity: 0; transform: translateY(-10px); } }

.progreso-texto {
  margin: 12px 0 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-mute);
}

.pregunta { border: none; margin: 0; padding: 0; }

.pregunta legend {
  display: block;
  width: 100%;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 28px;
  padding: 0;
}

.pregunta-kicker {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.98rem;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.opcion:hover { border-color: var(--ink-mute); transform: translateX(3px); }

.opcion input[type="radio"] {
  margin: 4px 0 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.opcion:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Solo con teclado: al avanzar, script.js enfoca la primera opción de la
   pregunta nueva, y con :focus-within esa opción parecía ya elegida. */
.opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.quiz-nav { margin-top: 26px; display: flex; justify-content: flex-start; }

.opcional { font-weight: 500; color: var(--ink-mute); }

/* ---------- 11. BLOQUE 6 · RESULTADO ---------- */
.resultado {
  padding: var(--pad-section) 0;
  background: var(--paper);
}

.resultado-card { max-width: var(--maxw-narrow); }

.resultado-tag {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--carbon);
  padding: 8px 16px;
  margin-bottom: 22px;
}

.tag-interna { background: var(--carbon); }
.tag-externa { background: var(--accent); }
.tag-ambas   { background: var(--purple); }
.tag-base    { background: var(--ok); }

.resultado h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

.resultado-lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  margin-bottom: 34px;
  max-width: 52ch;
}

.resultado-bloque {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 22px;
}

.resultado-bloque h3 {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 14px;
}

/* Tres pasos cortos, uno por línea, con un check de marca. */
.resultado-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.resultado-pasos li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.resultado-pasos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(242, 61, 76, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23f23d4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.resultado-nota {
  margin: 26px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  max-width: 56ch;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.resultado-nota strong { color: var(--ink); }

.resultado-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

/* ---------- 12. BLOQUE 7 · FORMULARIO ---------- */
.registro { padding: var(--pad-section) 0; background: var(--paper-2); }

.registro-copy { max-width: 44ch; margin-bottom: 40px; }
.registro-copy p { color: var(--ink-soft); }

/* Sin sombra: el formulario se separa por superficie y filete. */
.registro-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 44px);
  max-width: var(--maxw-narrow);
  /* Al pasar de bloque o abrir la agenda se hace scroll hasta aqui: sin esto
     la cabecera fija tapa la barra de pasos y el titulo. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.form-progreso { display: flex; gap: 8px; margin-bottom: 32px; }

/* Cada tramo se dibuja de izquierda a derecha al llegar a él; los pasos
   hechos quedan en verde con su check. */
.fp-paso {
  position: relative;
  flex: 1;
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding-top: 12px;
  border-top: 3px solid var(--line);
  transition: color 0.4s ease;
}

.fp-paso::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out), background 0.4s ease;
}

.fp-paso.is-active { color: var(--accent); }
.fp-paso.is-active::before { transform: scaleX(1); }
.fp-paso.is-done { color: var(--ok); }
.fp-paso.is-done::before { transform: scaleX(1); background: var(--ok); }
.fp-paso.is-done::after { content: '\00a0✓'; }

/* Al cambiar de bloque, sus campos entran uno detrás de otro. */
.form-bloque.entra > * {
  animation: fila-in 0.55s var(--ease-out) backwards;
  animation-delay: calc(var(--k, 0) * 60ms);
}

@keyframes fila-in { from { opacity: 0; transform: translateY(16px); } }

.form-bloque { border: none; margin: 0; padding: 0; }

.form-row { margin-bottom: 22px; }

.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
  color: var(--ink);
}

.form-row textarea { resize: vertical; min-height: 100px; }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 61, 76, 0.14);
}

.form-row .is-invalid {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 61, 76, 0.14);
}

.form-hint {
  display: block;
  margin-top: 7px;
  font-size: 0.82rem;
  color: var(--ink-mute);
}

.form-nav { display: flex; gap: 12px; margin-top: 28px; }
.form-nav .form-next,
.form-nav [type="submit"] { flex: 1; }

.form-feedback {
  margin: 18px 0 0;
  font-weight: 600;
  min-height: 1.2em;
}

.form-feedback.success { color: var(--ok); }
.form-feedback.error { color: var(--accent); }
.form-feedback a { color: inherit; }

.form-legal {
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

/* Preguntas de opciones (áreas y facturación): fichas que se tocan en vez de
   listas desplegables. Las áreas admiten varias; la facturación, una sola, y
   al tocarla el formulario avanza solo. */
.form-grupo { border: none; padding: 0; min-width: 0; }

.form-grupo legend {
  display: block;
  padding: 0;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.form-grupo > .form-hint { margin: 0 0 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.chip { position: relative; cursor: pointer; }

/* La casilla real queda invisible pero sigue ahí: teclado y lectores de
   pantalla la usan igual. Lo que se ve es el span. */
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.chip span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chip span::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 5px;
  background: center / 12px no-repeat;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip input[type="radio"] + span::before { border-radius: 50%; }

.chip:hover span { border-color: var(--ink-mute); transform: translateY(-1px); }

.chip input:checked + span {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: rgba(242, 61, 76, 0.05);
  animation: elegir 0.4s var(--ease-pop);
}

.chip input:checked + span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-grupo.is-invalid legend { color: var(--accent); }
.form-grupo.is-invalid .chip span { border-color: rgba(242, 61, 76, 0.55); }

/* ---- La agenda: aparece en lugar de la ficha cuando n8n la confirma ---- */
.agenda {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 44px);
  max-width: var(--maxw-narrow);
  animation: fila-in 0.6s var(--ease-out) backwards;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.agenda-cabecera { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }

.agenda-sello {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ok);
  animation: qh-pop 0.7s var(--ease-pop) both;
}

.agenda-sello svg { width: 30px; height: 30px; }

.agenda-sello path {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: qh-trazo 0.45s ease-out 0.4s forwards;
}

.agenda-kicker {
  margin: 2px 0 4px;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ok);
}

.agenda-titulo { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 0 0 6px; }
.agenda-titulo:focus { outline: none; }
.agenda-sub { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-mute); }

/* Días: una fila que se desliza de lado en celular. */
.agenda-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -2px 14px;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.agenda-dia {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 70px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.agenda-dia small,
.agenda-dia span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.2s ease;
}

.agenda-dia strong { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.agenda-dia:hover { border-color: var(--ink-mute); transform: translateY(-1px); }

.agenda-dia[aria-pressed="true"] { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.agenda-dia[aria-pressed="true"] small,
.agenda-dia[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.7); }

.agenda-dia:focus-visible,
.agenda-hora:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.agenda-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  min-height: 96px;
  align-content: start;
}

.agenda-hora {
  padding: 11px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.agenda-hora:hover { border-color: var(--accent); color: var(--accent); }

.agenda-hora[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: elegir 0.4s var(--ease-pop);
}

/* Al cambiar de día, las horas caen una detrás de otra. */
.agenda-horas.entra .agenda-hora {
  animation: fila-in 0.4s var(--ease-out) backwards;
  animation-delay: calc(var(--k, 0) * 22ms);
}

/* Mientras llegan los horarios: bloques grises que brillan. */
.agenda-esqueleto {
  height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper) 50%, var(--paper-2) 100%) 0 0 / 200% 100%;
  animation: esqueleto 1.2s linear infinite;
}

.agenda-esqueleto.es-dia { flex: 0 0 auto; width: 70px; height: 76px; border-radius: 12px; }

@keyframes esqueleto { to { background-position: -200% 0; } }

.agenda-confirmar {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  animation: fila-in 0.45s var(--ease-out) backwards;
}

.agenda-elegido { margin: 0 0 14px; color: var(--ink-soft); }
.agenda-elegido strong { color: var(--ink); }

.agenda-feedback { margin: 14px 0 0; font-weight: 600; min-height: 1.2em; }
.agenda-feedback:empty { display: none; }
.agenda-feedback.error { color: var(--accent); }
.agenda-feedback a { color: inherit; }

.agenda-alterna { margin: 16px 0 0; font-size: 0.86rem; color: var(--ink-mute); }
.agenda-alterna a { color: var(--ink-soft); font-weight: 700; }

/* Sin horarios o sin conexión con el calendario: salida a la página de
   reservas de Google, que mira el mismo calendario. */
.agenda-vacia { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }
.agenda-vacia .btn { margin-top: 14px; }

/* Reunión confirmada. */
.agenda-hecha { display: grid; justify-items: center; gap: 10px; padding: 6px 0; text-align: center; }

.agenda-hecha h3 {
  margin: 4px 0 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2.3rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--accent);
  animation: qh-sube 0.6s var(--ease-out) 0.3s backwards;
}

.agenda-hecha p { margin: 0; max-width: 40ch; color: var(--ink-soft); animation: qh-sube 0.6s var(--ease-out) 0.5s backwards; }

.agenda-hecha .agenda-cuando {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 800;
  color: var(--ink);
  animation-delay: 0.42s;
}

.agenda-hecha .agenda-meet { font-size: 0.88rem; }
.agenda-hecha .agenda-meet a { color: var(--accent); font-weight: 700; }

/* ---------- 15. BLOQUE 11 · CIERRE ---------- */
.cierre {
  padding: var(--pad-section) 0;
  background: var(--carbon);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}

/* El cierre es la única sección centrada de la página: es una firma, no un
   bloque de lectura. El ancho lo fija cada elemento, no el contenedor. */
.cierre-inner {
  margin-inline: auto;
  text-align: center;
}

.cierre-frase {
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: #fff;
  max-width: 17ch;
  margin: 0 auto 26px;
}

.cierre p {
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin: 0 auto 34px;
}

/* ---------- 16. BLOQUE 12 · PIE ---------- */
.site-footer {
  background: var(--carbon-deep);
  color: var(--on-dark-soft);
  padding: clamp(48px, 5vw, 72px) 0 36px;
  font-size: 0.88rem;
  border-top: 1px solid var(--line-dark);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.logo-footer { height: 28px; margin-bottom: 14px; }

.footer-claim {
  color: var(--on-dark-mute);
  max-width: 32ch;
  margin: 0;
}

.footer-contacto { display: flex; flex-direction: column; gap: 9px; }

.footer-contacto a,
.footer-legal a {
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-contacto a:hover,
.footer-legal a:hover { color: #fff; }

.footer-telefono {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}

.footer-telefono svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: 0 0 auto;
}

.footer-redes { display: flex; gap: 10px; margin-top: 12px; }

.footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.footer-redes svg { width: 17px; height: 17px; fill: currentColor; }

.footer-redes a:hover {
  color: var(--carbon);
  background: #fff;
  border-color: #fff;
}

.footer-legal p { margin: 0 0 8px; color: var(--on-dark-mute); }

/* ---------- 17. F1 · WHATSAPP FLOTANTE ---------- */
/* En carbón, no en verde: el verde de WhatsApp era el color más saturado
   de la página y no pertenece a la marca. El glifo mantiene el reconocimiento. */
.wa-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--carbon);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 28px rgba(23, 21, 28, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
              background-color 0.2s ease, color 0.2s ease;
}

.wa-flotante.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wa-flotante:hover { transform: translateY(-2px); }

.wa-flotante svg {
  width: 21px;
  height: 21px;
  fill: var(--wa);
  flex: 0 0 auto;
  transition: fill 0.2s ease;
}

/* El flotante cruza secciones crema y secciones carbón. Con un solo color se
   perdía contra el cierre y el pie, así que se invierte según el bloque que
   tenga detrás (lo conmuta script.js). */
.wa-flotante.is-sobre-oscuro {
  background: var(--paper);
  color: var(--carbon);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* El verde de marca no alcanza contraste sobre crema; sobre fondo claro va el
   tono oscuro de WhatsApp, que mantiene el reconocimiento del glifo. */
.wa-flotante.is-sobre-oscuro svg { fill: #0b7a4b; }

/* ---------- 18. PÁGINA LEGAL ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px) 90px;
}

.legal h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 10px; }
.legal h2 { font-size: 1.2rem; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.96rem; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .actualizado { font-size: 0.82rem; color: var(--ink-mute); }
.legal a { color: var(--accent); }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-quiz { max-width: 640px; }

  .autoridad-grid { grid-template-columns: 1fr; gap: 34px; }
  .frases { grid-template-columns: 1fr; gap: 44px; max-width: 520px; }
  .capa dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --fs-display: clamp(2.1rem, 10vw, 2.9rem); }

  .logo { height: 26px; }
  .site-header .btn-sm { padding: 9px 15px; font-size: 0.76rem; white-space: nowrap; }

  .hero-sub { max-width: none; }
  /* En celular manda la pregunta: el subtítulo se va para que la primera
     respuesta quede a la vista sin hacer scroll. */
  .hero { padding-block: 20px 40px; }
  .hero-grid { gap: 20px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { margin-bottom: 14px; }
  .hero-sub { display: none; }
  /* En celular la tarjeta va en dos filas: foto + nombre arriba, botón a
     todo el ancho abajo. En una sola fila el nombre se partía en dos líneas
     y la credencial ocupaba cuatro. */
  .hero-contacto { flex-wrap: wrap; margin-top: 4px; padding: 12px; gap: 10px 12px; border-radius: 16px; }
  .hc-foto img { width: 46px; height: 46px; }
  .hc-texto { font-size: 0.84rem; }
  .hc-aval { font-size: 0.74rem; }
  .hc-largo { display: none; }
  .hc-corto { display: inline; }
  .hc-cta { flex-basis: 100%; justify-content: center; padding: 11px 16px; font-size: 0.92rem; }
  .hc-extra { display: inline; }
  .hero-quiz { padding: 18px 14px; border-radius: 14px; }
  .hero-quiz .pregunta legend { font-size: 1.15rem; margin-bottom: 14px; }
  .hero-quiz .opcion { padding: 12px 14px; font-size: 0.92rem; }


  .marcas li { height: 50px; padding: 0 18px; }
  .marcas img { height: calc(var(--h, 40px) * 0.82); }
  .capa dl { grid-template-columns: 1fr; padding-left: 0; gap: 18px; }
  .quiz-hecho { padding: 22px 12px 18px; }

  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { width: 100%; }
  .resultado-cta .btn { width: 100%; }
  .cierre .btn,
  .hero .btn-lg { width: 100%; }

  .fp-paso { font-size: 0.6rem; letter-spacing: 0.04em; }
  .chips-lista { grid-template-columns: 1fr; }
  .agenda-horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-cabecera { gap: 12px; }

  .footer-inner { grid-template-columns: 1fr; }

  .wa-flotante { right: 14px; bottom: 14px; padding: 14px; }
  .wa-texto { display: none; }
}

/* ---------- 20. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .js [data-split] .split-unidad,
  .js [data-escalonar] > * { opacity: 1; transform: none; }
  .js [data-iluminar] .luz { color: inherit; }
  .js .strike { background-size: 100% 0.09em; }
  /* Las escenas del espejo se quedan en su cuadro final. */
  .escena, .escena * { animation: none !important; }
  .header-progreso { display: none; }
}