/* =====================================================================
   EZ Culinary Guest Intelligence — Encuesta conversacional
   Contexto: FRONT OF HOUSE (mundo linen cálido). Nunca el tema oscuro
   del Control Room. Ver .claude/skills/ez-design-system/SKILL.md
   ---------------------------------------------------------------------
   Concepto: "conversación con alma de casa". Una pregunta a la vez,
   pregunta grande en Fraunces, mucho aire, y el elemento insignia de
   cada casa flotando DETRÁS del contenido a <=8% de opacidad.

   REGLA DE ORO: cada animación acelera la percepción de avance o se
   elimina. prefers-reduced-motion apaga TODO (y revela el botón
   Continuar en todas las pantallas, para que nadie quede atorado).
   ===================================================================== */

:root {
  /* --- Sistema linen heredado (Paso 4, no se reinventa) --- */
  --linen: #F7F4EF;
  --porcelain: #FFFFFF;
  --ink: #23201C;
  --stone: #59524B;   /* AA sobre las 6 paletas: peor caso 5.24:1 (Catrinas).
                         #6E675E daba 3.43 sobre dusk-4 y no pasaba. */
  --hairline: #E7E1D8;
  --ez: #33544D;

  /* --- Lienzo por casa: linen teñido con el alma de la marca --- */
  --canvas: var(--linen);
  --canvas-2: #FFFFFF;

  /* --- "El atardecer de cada casa" (aprobado en la ronda 2) ---------------
     El lienzo no es plano: es un degradado que nace claro arriba y cae hacia
     los bordes, como la luz que se va. Cada casa declara sus cuatro paradas y
     esta única regla lo pinta: el sistema es idéntico para las 6, el color es
     de cada una. Default = linen, para que una casa sin atardecer definido
     siga viéndose bien. */
  --dusk-1: #FDFBF7;   /* cenit, arriba al centro */
  --dusk-2: #F7F4EF;
  --dusk-3: #F1ECE3;
  --dusk-4: #EBE5D9;   /* borde, lo más profundo */

  /* --- Marca dinámica (feedback.js las sobreescribe) --- */
  --brand: var(--ez);
  --on-brand: #FFFFFF;
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--porcelain));
  --brand-line: color-mix(in srgb, var(--brand) 55%, var(--ink));
  --accent-2: var(--brand);

  --error: #B3261E;
  --error-soft: #FBEAE8;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Radios: por casa se pueden ampliar (Dulce es la más redonda) */
  --r-card: 18px;
  --r-ctl: 14px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(35, 32, 28, .05), 0 6px 24px rgba(35, 32, 28, .06);
  --tap: 44px;

  /* ------------------------------------------------------------------
     DWELL: cuánto se queda la pantalla después de una selección de un
     toque, para que el invitado VEA su confirmación antes del avance.
     El pulso de confirmación dura 250ms, así que este valor debe ser
     mayor: 450ms = 250 de pulso + 200 de reposo. Ajustable desde el
     preview con ?dwell=350|450|550 (window.EZ_DWELL_MS).
     ------------------------------------------------------------------ */
  --dwell: 450ms;
  --pulse: 250ms;
}

/* =====================================================================
   TEMAS POR CASA — atardecer art-dirigido, 4 paradas por casa.
   Cada atardecer es una hora del día de esa casa, no un color plausible:
   Cielo amanece, Viva es tarde de terracota, Catrinas cae en rosa de
   galería, Blue Tequila anochece, Añejo es dorado de celebración, Dulce
   es luz de heladería. Verificados contra WCAG (ver tabla en el commit).
   ===================================================================== */

/* CIELO — "un pedazo de cielo": oro sereno sobre linen casi blanco.
   Amanecer: la luz entra sin estridencia. */
[data-house="cielo"] {
  --canvas: #FBF8F1; --canvas-2: #FFFFFF; --accent-2: #B8892C;
  --dusk-1: #FEFCF6; --dusk-2: #FAF4E7; --dusk-3: #F5EDDC; --dusk-4: #EFE5CE;
}

/* VIVA — "la casa de Jalisco": rojo cálido y orgulloso.
   Tarde de terracota: el sol bajo sobre barro cocido. */
[data-house="viva"] {
  --canvas: #FDF6F2; --canvas-2: #FFFFFF; --accent-2: #A8121C;
  --dusk-1: #FEF8F5; --dusk-2: #FBEDE7; --dusk-3: #F8E3DA; --dusk-4: #F2D5C9;
}

/* CATRINAS — "la galería festiva": magenta editorial.
   La más atrevida del grupo: el rosa entra más y más pronto. */
[data-house="castrinas"] {
  --canvas: #FDF4FA; --canvas-2: #FFFFFF; --accent-2: #A50C5E;
  --dusk-1: #FEF7FB; --dusk-2: #FAE9F3; --dusk-3: #F6DCEC; --dusk-4: #EFCBE2;
}

/* BLUE TEQUILA — "la noche azul". APROBADO en ronda 2.
   El linen se enfría hacia navy sin irse a oscuro. */
[data-house="blue_tequila"] {
  --canvas: #EDEFF9; --canvas-2: #FFFFFF; --accent-2: #5B5FC8;
  --dusk-1: #F5F6FC; --dusk-2: #E9ECF7; --dusk-3: #E1E5F2; --dusk-4: #D8DCEC;
}

/* AÑEJO — "la celebración": oro reposado que cae hacia un verde de agave.
   El verde entra en el atardecer, no solo en la UI: con un dorado puro su
   lienzo quedaba a 19 unidades RGB del de Cielo (medido) y las dos casas
   se confundían. Con el verde-oro la distancia sube a 46 y cada una se
   lee por sí sola — además es más fiel a su dosier (oro + verde). */
[data-house="anejo"] {
  --canvas: #FBF9EC; --canvas-2: #FFFFFF; --accent-2: #0A7A36;
  --dusk-1: #FCFBEF; --dusk-2: #F5F2D6; --dusk-3: #EAEAC2; --dusk-4: #D9DEA6;
}

/* DULCE — "el postre": rosa que cae hacia un susurro de teal, como un
   helado de dos sabores. La más redonda y la más juguetona. */
[data-house="dulce"] {
  --canvas: #FDF5FB; --canvas-2: #FFFFFF; --accent-2: #1E8FA0;
  --dusk-1: #FFF9FC; --dusk-2: #FDEEF7; --dusk-3: #F5EAF6; --dusk-4: #E8EDF0;
  --r-card: 26px; --r-ctl: 20px;   /* matiz de marca: bordes más redondos */
}

/* Comparación: ?canvas=flat vuelve al lienzo plano, por si quieres
   contrastar el atardecer contra el fondo liso. */
html[data-canvas="flat"] body { background: var(--canvas); }

/* =====================================================================
   BASE
   ===================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* El atardecer de la casa (ver --dusk-*). `fixed` para que no se desplace
     con el scroll: es el cielo del lugar, no parte del contenido. */
  background: radial-gradient(120% 80% at 50% -10%,
    var(--dusk-1) 0%, var(--dusk-2) 42%, var(--dusk-3) 78%, var(--dusk-4) 100%) fixed;
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  transition: background .6s ease;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  /* --kb lo publica feedback.js con el alto del teclado SÓLO cuando el
     navegador no encogió el layout por su cuenta (iOS). Al crecer el padding,
     el documento se vuelve más alto que el viewport y aparece scroll real:
     el botón deja de estar atrapado detrás del teclado. En Android, donde
     interactive-widget ya resolvió, --kb vale 0 y esto no hace nada. */
  /* Las inset de zona segura son la contraparte obligatoria de
     viewport-fit=cover del <meta>: "cover" extiende el lienzo HASTA los
     bordes físicos, incluidos el notch y la barra de inicio del iPhone. Sin
     estas reservas, el botón del fondo queda debajo de esa barra y el gesto
     de deslizar del sistema se come el toque. En cualquier aparato sin
     recortes, env() vale 0 y esto no cambia un pixel. */
  padding-left: max(var(--s5), env(safe-area-inset-left));
  padding-right: max(var(--s5), env(safe-area-inset-right));
  padding-bottom: calc(var(--s8) + var(--kb, 0px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* =====================================================================
   CAPA DE FONDO DE MARCA — el elemento insignia, detrás de todo
   ===================================================================== */

.brand-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;              /* recorta la copia de arriba de la deriva */
  opacity: 0;
  transition: opacity .8s ease;

  /* ------------------------------------------------------------------
     ZONA SEGURA DERIVADA DEL TEXTO REAL.
     Los radios NO son un porcentaje del viewport: los mide feedback.js
     sobre el bloque .q + .q-sub de la pantalla activa y los escribe en
     --safe-*. Un elipse relativo (118% x 74%) dejaba márgenes en desktop
     pero en 400px se tragaba la composición entera.
     Los fallbacks solo cubren el instante previo a la primera medición.
     El seguro es esto; el trabajo lo hace la composición (ver art-narrow).
     ------------------------------------------------------------------ */
  --safe-l: 0px;  --safe-lf: 0px;   --safe-rf: 0px;   --safe-r: 0px;
  --safe-t: 0px;  --safe-tf: 0px;   --safe-bf: 0px;   --safe-b: 0px;

  /* Dos bandas cruzadas: una horizontal y una vertical, ambas atenuadas solo
     dentro del rect del texto (más una pluma de 26px). Al componerlas con
     `add`, la protección existe únicamente donde AMBAS coinciden — o sea el
     texto — y basta salir de cualquiera de las dos para volver al 100%. Así
     los costados siguen libres en pantallas anchas y el alto libre del
     teléfono queda intacto. */
  -webkit-mask-image:
    linear-gradient(to right, #000 0, #000 var(--safe-l), rgba(0,0,0,.03) var(--safe-lf),
      rgba(0,0,0,.03) var(--safe-rf), #000 var(--safe-r), #000 100%),
    linear-gradient(to bottom, #000 0, #000 var(--safe-t), rgba(0,0,0,.03) var(--safe-tf),
      rgba(0,0,0,.03) var(--safe-bf), #000 var(--safe-b), #000 100%);
  mask-image:
    linear-gradient(to right, #000 0, #000 var(--safe-l), rgba(0,0,0,.03) var(--safe-lf),
      rgba(0,0,0,.03) var(--safe-rf), #000 var(--safe-r), #000 100%),
    linear-gradient(to bottom, #000 0, #000 var(--safe-t), rgba(0,0,0,.03) var(--safe-tf),
      rgba(0,0,0,.03) var(--safe-bf), #000 var(--safe-b), #000 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Composición por viewport: la angosta NO es la ancha escalada, es otra
   composición con menos piezas, más grandes y ancladas a bordes. */
.bg-art.art-narrow { display: none; }
@media (max-width: 719px) {
  .bg-art.art-wide { display: none; }
  .bg-art.art-narrow { display: block; }
}
.brand-bg.on { opacity: var(--bg-strength, .10); }

.bg-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* La deriva mueve la composición una altura completa; como hay dos copias
   apiladas, al terminar el ciclo el resultado es idéntico al inicio: lluvia
   infinita sin costura. Con elementos de tamaños distintos el descenso SÍ se
   percibe (un mosaico uniforme, al moverse, se ve igual que quieto). */
.drift { animation: bt-rain 72s linear infinite; will-change: transform; }
/* --vh lo declara cada capa SVG con la altura de SU viewBox (ancha 680,
   angosta 720). Si se dejara fijo, la composición angosta daría un salto
   visible al cerrar el ciclo. */
@keyframes bt-rain {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--vh, 680px)); }
}

/* Intensidad de la insignia. APROBADA en ronda 2: B (10%), que con la
   opacidad por elemento da un rango efectivo de 3.0% a 8.2% — se percibe al
   entrar sin leerla y respeta el techo de 8% del brief. Es el default (el
   valor de reserva de --bg-strength); ?bg=a|b|c sigue disponible para
   comparar. */
[data-bg="a"] { --bg-strength: .07; }   /* susurro   — máx. efectivo ~5.7% */
[data-bg="b"] { --bg-strength: .10; }   /* APROBADA  — máx. efectivo ~8.2% */
[data-bg="c"] { --bg-strength: .15; }   /* presente  — rompe el techo (~12%) */

/* --- BLUE TEQUILA: lluvia lenta de calaveritas en línea fina ---------
   SVG inline propio (dibujado aquí, no copiado de ninguna web).
   Dos calaveritas por baldosa en posiciones distintas para que el
   repeat no se lea como cuadrícula. Deriva descendente infinita: la
   baldosa mide 96px, así que animar background-position 0 -> 96px
   es perfectamente cíclico (sin salto visible).
   Opacidad total: 7% (dentro del techo de 8%).                        */
/* Hoja de agave azul: una insinuación en el margen, no una planta.
   Se recorta contra el borde y respira apenas. */
.brand-bg.house-blue_tequila .agave {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -56px;
  width: 208px; height: 268px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'%3E%3Cg fill='none' stroke='%231F2150' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M100 250C100 180 96 120 84 60'/%3E%3Cpath d='M100 250C86 190 62 150 26 122'/%3E%3Cpath d='M100 250C114 190 138 150 174 122'/%3E%3Cpath d='M100 250C92 176 76 128 48 78'/%3E%3Cpath d='M100 250C108 176 124 128 152 78'/%3E%3Cpath d='M100 250C100 200 108 140 122 54'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
  animation: bt-sway 26s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes bt-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

/* =====================================================================
   HEADER PERSISTENTE
   ===================================================================== */

/* El inset superior evita que el encabezado quede bajo el notch / la barra de
   estado: con viewport-fit=cover el lienzo empieza en el borde físico. */
.app-head { padding: calc(var(--s5) + env(safe-area-inset-top)) 0 var(--s4); }

.head-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
}

.icon-btn {
  appearance: none;
  width: var(--tap); height: var(--tap);
  flex: none;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .2s ease;
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand-line); }
.back-btn.hidden { visibility: hidden; }

.house { display: flex; align-items: center; gap: var(--s3); flex: 1; min-width: 0; }
.house-logo {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: var(--porcelain) center / 78% no-repeat;
  transition: background-color .4s ease;
}
.house-logo.dark-tile { background-color: var(--brand); border-color: transparent; }
.house-logo.empty { display: none; }
/* En 375px el nombre largo ("Blue Tequila + Tacos") competía con el toggle de
   idioma y se truncaba. Escala con el ancho y solo entonces recorta. */
.house-name {
  font-weight: 700;
  font-size: clamp(13px, 3.7vw, 15px);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.lang-toggle {
  display: flex;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--porcelain);
}
.lang-opt {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  padding: 0 11px; min-height: 32px;
  background: transparent; color: var(--stone);
  transition: background .18s ease, color .18s ease;
}
.lang-opt[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

/* --- Progreso --- */
.progress-wrap { margin-top: var(--s4); opacity: 0; transition: opacity .3s ease; }
.progress-wrap.visible { opacity: 1; }

.track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
}
.bar {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width .4s cubic-bezier(.16, .84, .28, 1);
}
/* Mini-destello al completar un paso: acelera la sensación de avance. */
.bar.flash { animation: bar-flash 420ms ease-out; }
@keyframes bar-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 70%, transparent); }
  100% { box-shadow: 0 0 10px 3px transparent; }
}

.track-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--s2);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone);
}
.promise { font-weight: 600; letter-spacing: .04em; opacity: .85; }

/* =====================================================================
   PANTALLAS + TRANSICIÓN
   La saliente se desvanece .18s hacia arriba 6px; la entrante entra
   .24s desde abajo 10px. Sensación: la conversación fluye adelante.
   ===================================================================== */

/* La conversación vive en el centro óptico, no pegada al header: con una sola
   pregunta por pantalla, anclarla arriba deja un vacío enorme abajo y se
   siente formulario. Centrada se siente diálogo. */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe center" evita el clásico agujero de centrar con flex: si el
     contenido no cabe —y con el teclado abierto el alto disponible se parte a
     la mitad— un `center` normal desborda hacia ARRIBA también, y esa parte
     queda inalcanzable porque no se puede scrollear antes del inicio. Con
     "safe" el navegador cae a `flex-start` en cuanto hay desbordamiento.
     Los navegadores que no lo entienden se quedan con la línea anterior. */
  justify-content: safe center;
  padding: var(--s6) 0;
}
/* En la pantalla densa el contenido manda: centrarlo empujaría el botón
   pegajoso fuera de sitio y desperdiciaría alto. */
.stage:has(#screen-areas.active) { justify-content: flex-start; padding-top: var(--s3); }

.screen { display: none; }
.screen.active { display: block; }
.screen.entering { animation: scr-in .24s cubic-bezier(.16,.84,.28,1) both; }
.screen.leaving  { display: block; animation: scr-out .18s ease both; pointer-events: none; }

@keyframes scr-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scr-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }

/* --- Tipografía de pregunta: grande, Fraunces, con aire --- */
.q {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(27px, 7.6vw, 37px);
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
.q-sub {
  color: var(--stone);
  font-size: 15px;
  margin: 0 0 var(--s8);
  max-width: 34ch;
}

/* El foco se mueve al encabezado de cada pantalla para que los lectores de
   pantalla anuncien la pregunta nueva. Pero un encabezado no es un control:
   el aro de foco del navegador ahí es ruido visual. Se quita el aro sin
   quitar el foco (la ayuda de accesibilidad se conserva intacta). */
.q:focus, .q:focus-visible { outline: none; }

.mini-label {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s3);
}
.mini-label.sp { margin-top: var(--s6); }
.hint { font-size: 13px; color: var(--stone); margin: -6px 0 var(--s3); }

/* =====================================================================
   CASA — tarjetas "posavasos"
   ===================================================================== */

.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.loc-card {
  appearance: none; font: inherit; color: inherit; cursor: pointer;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--canvas-2);
  padding: var(--s4) var(--s3) var(--s3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  min-height: 132px;
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease, transform .16s ease, opacity .2s ease;
}
.loc-card .loc-logo {
  width: 100%; height: 62px;
  border-radius: 12px;
  background: center / contain no-repeat;
  background-origin: content-box;
  padding: 4px;
}
.loc-card.dark-tile .loc-logo { background-color: var(--tile, #1F2150); }
.loc-card .loc-name { font-weight: 700; font-size: 14px; text-align: center; }
.loc-card:active { transform: scale(.98); }

/* =====================================================================
   RATING — pastillas numéricas con cascada
   ===================================================================== */

.rate-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }

.rate-btn {
  appearance: none; font: inherit; cursor: pointer;
  font-size: 20px; font-weight: 800;
  min-height: 60px;
  border-radius: var(--r-ctl);
  border: 1.5px solid var(--hairline);
  background: var(--canvas-2);
  color: var(--ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .2s ease;
}
/* Cascada: los números <= elegido se encienden con 30ms de retraso entre sí.
   Comunica "registré tu respuesta" más rápido que un solo cambio de color. */
.rate-btn.lit {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  transition-delay: var(--lag, 0ms);
}
.rate-anchors {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--stone);
  margin-top: var(--s2);
}

/* =====================================================================
   SELECCIÓN — pulso único + los no elegidos bajan a 60%
   ===================================================================== */

.is-picked { animation: pick-pulse var(--pulse) cubic-bezier(.3,1.4,.5,1) both; }
@keyframes pick-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* Añejo es la casa más enérgica: su pulso late un poco más vivo. */
[data-house="anejo"] .is-picked { animation-name: pick-pulse-lively; }
@keyframes pick-pulse-lively {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  70%  { transform: scale(.985); }
  100% { transform: scale(1); }
}

.dimmed { opacity: .6; }

/* Matiz Añejo: la casa más festiva reacciona un poco más viva. */
[data-house="anejo"] .chip,
[data-house="anejo"] .rate-btn { transition-duration: .12s; }

/* =====================================================================
   ÁREAS — "el acordeón"
   Las 6 etiquetas visibles desde el primer instante (alcance honesto).
   Solo la fila activa está expandida; al tocar colapsa a píldora con su
   número y sube la siguiente. "Una pregunta a la vez" DENTRO de una
   sola pantalla, para no partir las 6 en 6 pantallas.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ECONOMÍA VERTICAL — solo en la pantalla de áreas.
   Es la más densa del flujo: 6 filas + título + subtítulo + botón. Medido en
   375x812, el contenido arrancaba al 38.5% del alto y "Continuar" caía en
   771px, o sea fuera del corte en un teléfono real (la barra del navegador se
   come ~120px). Se recorta cabecera y espaciado SIN tocar la línea del 5 y el
   2 (intocable) y sin bajar de 44px de área táctil.
   --------------------------------------------------------------------- */
#screen-areas .q {
  font-size: clamp(23px, 6vw, 29px);
  line-height: 1.13;
  margin-bottom: var(--s2);
}
#screen-areas .q-sub {
  font-size: 14px;
  margin-bottom: var(--s4);
  max-width: 38ch;
}

/* El botón se ANCLA al pie del viewport en esta pantalla. Recortar píxeles no
   alcanzaba: 6 filas de 44px táctiles + título + subtítulo + botón no caben en
   un teléfono real (~610px útiles tras la barra del navegador). En vez de
   comprimir hasta lo ilegible, el botón deja de depender del scroll: siempre
   está ahí, y las filas pueden respirar. El degradado evita que el contenido
   se corte en seco por detrás. */
#screen-areas .actions {
  position: sticky;
  /* Se pega por ENCIMA de la barra de inicio, no en el borde físico. Un
     sticky en bottom:0 con viewport-fit=cover queda debajo de esa barra, y
     ahí el gesto de deslizar del sistema se come el toque: el botón se ve
     pero no responde, que es peor que no verlo. El padding del shell no
     ayuda aquí — sticky se ancla al viewport, no a la caja del contenedor. */
  bottom: env(safe-area-inset-bottom);
  margin-top: var(--s5);
  /* Desvanecido alto y con muchas paradas: el corte duro se notaba porque la
     zona opaca tapaba de golpe las calaveritas del fondo. Ahora la banda de
     fundido mide ~54px y las paradas siguen una curva suave, así que la
     transición es imperceptible. --canvas-fade permite que cada variante de
     lienzo declare su color REAL al pie (el degradado nocturno no termina en
     el mismo tono con el que empieza). */
  padding: 54px 0 14px;
  background: linear-gradient(to top,
    var(--canvas-fade) 0%,
    var(--canvas-fade) 42%,
    color-mix(in srgb, var(--canvas-fade) 88%, transparent) 60%,
    color-mix(in srgb, var(--canvas-fade) 55%, transparent) 76%,
    color-mix(in srgb, var(--canvas-fade) 20%, transparent) 89%,
    transparent 100%);
}

/* El tono con el que se funde la barra anclada es el del PIE del atardecer
   (--dusk-4), no el del inicio: si usara --canvas, el degradado terminaría en
   un azul más claro que el fondo real de esa zona y la costura se vería. */
:root { --canvas-fade: var(--dusk-4, var(--canvas)); }
html[data-canvas="flat"] { --canvas-fade: var(--canvas); }

.areas { display: flex; flex-direction: column; gap: 5px; }

.area-row {
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: var(--canvas-2);
  overflow: hidden;
  transition: border-color .2s ease;
}
.area-row.open { border-color: var(--brand-line); }
.area-row.answered { border-color: color-mix(in srgb, var(--brand) 40%, var(--hairline)); }

.area-head {
  /* border:0 es OBLIGATORIO, no cosmético: `appearance:none` NO quita el borde
     por defecto del navegador en <button> (2px outset negro). El overflow
     oculto del contenedor lo recortaba contra la esquina redondeada y se veía
     como una franja oscura pegada al borde izquierdo. */
  appearance: none; border: 0;
  font: inherit; color: inherit; cursor: pointer;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: var(--tap);
  padding: 0 var(--s4);
  background: transparent;
  text-align: left;
}
.area-name { font-weight: 700; font-size: 15px; }

/* Píldora con el número elegido */
.area-pill {
  min-width: 30px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800;
  background: var(--brand); color: var(--on-brand);
  padding: 0 9px;
}
.area-pill.empty { background: transparent; color: var(--stone); font-weight: 700; opacity: .55; }

.area-body { display: none; padding: 0 var(--s3) var(--s2); }
.area-row.open .area-body { display: block; }
.area-body .rate-row { gap: 6px; }
.area-body .rate-btn { min-height: var(--tap); font-size: 16px; }

/* Anclas de escala dentro del acordeón: quitan la duda de "¿5 es bueno?".
   Absorben el padding inferior que se recortó arriba, así que el costo neto
   de altura es ~4px, y solo en la fila abierta (una a la vez). */
.area-body .rate-anchors {
  font-size: 10.5px;
  letter-spacing: .02em;
  margin-top: 3px;
  opacity: .8;
}

/* =====================================================================
   CHIPS
   ===================================================================== */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  appearance: none; font: inherit; cursor: pointer;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: var(--canvas-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  min-height: var(--tap);
  transition: border-color .16s ease, background .16s ease, opacity .2s ease;
}
/* Seleccionado: RELLENO de marca con texto on-brand (blanco o tinta, el de
   mayor contraste WCAG — la misma lógica de luminancia del resto). Antes solo
   se contorneaba y la selección se leía débil. */
.chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

/* =====================================================================
   TEXTO / CONTACTO
   ===================================================================== */

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 16px; /* evita el zoom de iOS */
  color: var(--ink);
  background: var(--canvas-2);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-ctl);
  padding: 13px 15px;
  transition: border-color .16s ease;
}
textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
textarea::placeholder, input::placeholder { color: #A39B8F; }
textarea:focus, input:focus { border-color: var(--brand-line); }

.reveal-link {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--brand-line);
  padding: var(--s3) 0;
  min-height: var(--tap);
  text-align: left;
}
.secondary-wrap { margin-top: var(--s2); }
.problem-block { margin-top: var(--s6); }

.consent-row {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-ctl);
  background: var(--canvas-2);
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--brand);
  flex: none;
}
.consent-row label { font-size: 14.5px; font-weight: 600; }
.contact-fields { margin-top: var(--s5); }
.contact-fields .mini-label { margin-top: var(--s4); }

/* =====================================================================
   ERRORES
   ===================================================================== */

.field-error {
  display: none;
  color: var(--error);
  background: var(--error-soft);
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  padding: 10px 12px;
  margin-top: var(--s3);
}
.field-error.visible { display: block; }

/* =====================================================================
   BOTONERA
   ===================================================================== */

.actions {
  display: flex; align-items: center; gap: var(--s4); margin-top: var(--s8);
  /* Aire por debajo cuando el JS lo trae a la vista con el teclado abierto:
     sin esto el botón queda pegado al borde del teclado y no invita a tocarse. */
  scroll-margin-bottom: 18px;
}

.btn {
  appearance: none; font: inherit; cursor: pointer;
  font-size: 16px; font-weight: 800; letter-spacing: .01em;
  border: 0;
  border-radius: var(--r-ctl);
  min-height: 54px;
  padding: 0 var(--s6);
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  background: var(--brand);
  color: var(--on-brand);
  transition: filter .15s ease, background .3s ease;
}
.btn:not(:disabled):active { filter: brightness(.94); }
.btn:disabled { cursor: default; opacity: .75; }

/* En pantallas de un toque el avance es automático, así que este botón
   está oculto... salvo con prefers-reduced-motion, donde el auto-avance
   se apaga y el botón es la ÚNICA forma de seguir. */
.btn.only-reduced { display: none; }

.spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid color-mix(in srgb, var(--on-brand) 40%, transparent);
  border-top-color: var(--on-brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Foco visible en todo control */
textarea:focus-visible, input:focus-visible, .chip:focus-visible, .rate-btn:focus-visible,
.loc-card:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .lang-opt:focus-visible,
.area-head:focus-visible, .reveal-link:focus-visible {
  outline: 2.5px solid var(--brand-line);
  outline-offset: 2px;
}

/* =====================================================================
   GRACIAS + celebración de marca (una vez, 1.2s, luego quieto)
   ===================================================================== */

.screen.thanks { position: relative; text-align: center; padding-top: var(--s8); }
.thanks-wrap { position: relative; z-index: 1; }
.thanks-logo {
  display: block;
  width: 78px; height: 78px;
  margin: 0 auto var(--s6);
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background: var(--porcelain) center / 76% no-repeat;
}
.thanks-logo.dark-tile { background-color: var(--brand); border-color: transparent; }
.screen.thanks .q { font-weight: 560; }
.screen.thanks .q-sub { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   CELEBRACIÓN — el único momento del flujo donde una animación "gratuita"
   está justificada: es el premio, no fricción. La versión anterior era un
   solo destello radial que se desvanecía a opacidad 0 en 1.2s: literalmente
   imperceptible. Ahora es un BRINDIS: las calaveritas de la casa suben y se
   desvanecen en cascada, sobre un halo índigo. Una sola vez, ~1.6s, y queda
   quieto para siempre.
   --------------------------------------------------------------------- */
.celebrate {
  position: absolute;
  inset: -30px -20px auto;
  height: 340px;
  pointer-events: none;
  overflow: hidden;
}

/* Halo del brindis. Va en TODAS las casas usando su propio acento: estaba
   escrito solo para .house-blue_tequila, así que las otras cinco celebraban
   sin halo y su brindis quedaba a media fuerza. El selector ahora es
   genérico y el color lo pone --accent-2 de cada casa. */
.celebrate[class*="house-"]::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px 170px at 50% 34%,
    color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 72%);
  animation: celebrate-glow 1.6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes celebrate-glow {
  0%   { opacity: 0; transform: scale(.82); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.14); }
}

/* Las calaveritas del brindis: sueltas desde abajo, en cascada. */
.celebrate .spark {
  position: absolute;
  bottom: 26px;
  width: 26px; height: 30px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 22' fill='none' stroke='%231F2150' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 10c0-5.2 4.2-9.4 9.4-9.4S18.8 4.8 18.8 10c0 3.1-1.1 5.2-3.1 6.4v2.9c0 1.1-.9 2-2 2h-8.6c-1.1 0-2-.9-2-2v-2.9C1.1 15.2 0 13.1 0 10z'/%3E%3Ccircle cx='5.7' cy='9.2' r='2.3'/%3E%3Ccircle cx='13.1' cy='9.2' r='2.3'/%3E%3Cpath d='M9.4 12.6v2.1M6.5 19.3v2M9.4 19.3v2M12.3 19.3v2'/%3E%3C/svg%3E");
  opacity: 0;
  animation: celebrate-rise 1.5s cubic-bezier(.25,.6,.3,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes celebrate-rise {
  0%   { opacity: 0; transform: translateY(28px) scale(.7) rotate(var(--r, 0deg)); }
  22%  { opacity: .55; }
  70%  { opacity: .38; }
  100% { opacity: 0; transform: translateY(-190px) scale(1.05) rotate(calc(var(--r, 0deg) * -1.6)); }
}

.debug-box {
  display: none;
  margin-top: var(--s6);
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  background: var(--canvas-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: var(--s3);
  color: var(--stone);
}
body.debug-on .debug-box { display: block; }

.ez-footer {
  text-align: center;
  font-size: 11.5px;
  /* SIN opacity: mezclaba el texto con el lienzo y el contraste real caía a
     2.6-3.2:1 en las 6 casas. El tono ya es secundario por sí mismo. */
  color: var(--stone);
  margin-top: var(--s8);
}

/* =====================================================================
   HONEYPOT — invisible para humanos, presente para bots.
   Fuera del flujo visual pero SIEMPRE en el DOM.
   ===================================================================== */

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* =====================================================================
   REDUCED MOTION — apaga TODO el movimiento y revela el botón
   Continuar en las pantallas de un toque (si no, el invitado se queda
   atorado esperando un auto-avance que ya no va a ocurrir).
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .brand-bg { opacity: .05 !important; }        /* queda estático, sin deriva */
  .btn.only-reduced { display: inline-flex; }   /* la salida siempre disponible */
  .screen.leaving { display: none; }
}

/* Pantallas cortas: menos aire para que la pregunta y la respuesta
   quepan sin scroll en teléfonos pequeños. */
@media (max-height: 700px) {
  .q-sub { margin-bottom: var(--s6); }
  .actions { margin-top: var(--s6); }
  .stage { padding-top: var(--s4); }
}