/* Encuesta Interlagos 2026 — diseño de la propuesta de Angela (negro + amarillo F1), sin estilos inline (CSP estricta).
   Dos temas que siguen al del dispositivo (prefers-color-scheme): oscuro y claro. Todos los colores salen de estos
   tokens; contraste WCAG AA en los dos (texto ≥ 4,5:1, bordes de controles ≥ 3:1). El amarillo es RELLENO (botones,
   opción elegida, números de bloque) con texto oscuro encima; como texto sobre fondo claro se usa --acento-texto. */
:root {
  color-scheme: dark;
  --fondo: #0b0b0b;
  --superficie: #181818;
  --superficie-2: #222222;
  --cabecera: #1e1e1e;
  --linea: #2e2e2e;
  --borde-control: #6b6b6b;
  --tinta: #f7f7f2;
  --tinta-2: #dcdcd5;
  --apagado: #b4b4ac;
  --placeholder: #8f8f88;
  --acento: #ffd400;
  --acento-2: #e6bf00;
  --acento-texto: #ffd400;
  --sobre-acento: #0b0b0b;
  --foco: #ffd400;
  --error: #ff8a80;
  --brillo: rgba(255, 212, 0, 0.12);
  --sombra-acento: rgba(255, 212, 0, 0.25);
  --barra-fija: rgba(11, 11, 11, 0.95);
  --cuadro-a: #f7f7f2;
  --cuadro-b: #0b0b0b;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --fondo: #f4f3ee;
    --superficie: #ffffff;
    --superficie-2: #f6f5f0;
    --cabecera: #fbfaf5;
    --linea: #e2dfd4;
    --borde-control: #8b887c;
    --tinta: #141414;
    --tinta-2: #2f2f2b;
    --apagado: #57564f;
    --placeholder: #6b6a62;
    --acento: #ffd400;
    --acento-2: #f0c400;
    --acento-texto: #765c00;
    --sobre-acento: #141414;
    --foco: #141414;
    --error: #b3261e;
    --brillo: rgba(255, 212, 0, 0.22);
    --sombra-acento: rgba(140, 110, 0, 0.22);
    --barra-fija: rgba(244, 243, 238, 0.96);
    --cuadro-a: #141414;
    --cuadro-b: #f4f3ee;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background-image: radial-gradient(circle at 85% -10%, var(--brillo), transparent 45%);
  background-repeat: no-repeat;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.aviso h2:focus { outline: none; }
.checker { height: 14px; background: conic-gradient(var(--cuadro-a) 25%, var(--cuadro-b) 0 50%, var(--cuadro-a) 0 75%, var(--cuadro-b) 0) 0 0 / 14px 14px; }

.hero { padding: 40px 16px 28px; max-width: 860px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; color: var(--acento-texto); }
.brand .dot { width: 9px; height: 9px; background: var(--acento); border-radius: 50%; box-shadow: 0 0 0 2px var(--sombra-acento); }
h1 {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(46px, 10vw, 92px); line-height: 0.88; margin: 16px 0 14px; letter-spacing: -0.01em;
}
h1 span { color: var(--acento-texto); display: block; }
.sub { color: var(--tinta-2); font-size: 16px; max-width: 580px; line-height: 1.55; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill { border: 1px solid var(--linea); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--tinta-2); background: var(--superficie); }

.progress-wrap { position: sticky; top: 0; z-index: 5; background: var(--barra-fija); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.progress-in { max-width: 860px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.bar { flex: 1; height: 8px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acento-2), var(--acento)); border-radius: 9px; transition: width 0.4s; }
.ptxt { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; color: var(--acento-texto); min-width: 96px; text-align: right; letter-spacing: 0.03em; }

main { max-width: 860px; margin: 0 auto; padding: 22px 16px 64px; }
.intro { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; color: var(--tinta-2); line-height: 1.55; font-size: 15px; }
.intro b { color: var(--tinta); }

section.blk { display: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; margin: 18px 0; overflow: hidden; }
section.blk.active { display: block; animation: entrar 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes entrar { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { section.blk.active { animation: none; } html { scroll-behavior: auto; } }
.blk-h { display: flex; align-items: center; gap: 14px; padding: 18px 18px; border-bottom: 1px solid var(--linea); background: var(--cabecera); }
.num {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 32px; color: var(--sobre-acento); background: var(--acento);
  min-width: 52px; height: 46px; display: grid; place-items: center; border-radius: 10px; transform: skewX(-8deg); flex-shrink: 0;
}
.num span { transform: skewX(8deg); }
.blk-h h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: 0.02em; line-height: 1; outline: none; }
.blk-h p { color: var(--apagado); font-size: 14px; margin-top: 4px; }

.q { padding: 18px 18px; border: 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.q:last-child { border-bottom: none; }
.q .t { display: block; font-weight: 600; font-size: 16px; margin-bottom: 12px; line-height: 1.4; padding: 0; float: none; width: 100%; color: var(--tinta); }
.q.done .t::before { content: '✓ '; color: var(--acento-texto); }
.ayuda { color: var(--apagado); font-size: 14px; margin: -6px 0 12px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale.nps { grid-template-columns: repeat(11, 1fr); gap: 5px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--borde-control); border-radius: 10px;
  background: var(--superficie-2); color: var(--tinta);
  cursor: pointer; font-weight: 600; font-size: 15px; transition: 0.15s; user-select: none; text-align: center; padding: 8px 10px; line-height: 1.25;
}
.scale .opt span { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; }
.scale.nps .opt span { font-size: 19px; min-height: 46px; padding: 4px; }
@media (hover: hover) { .opt span:hover { border-color: var(--acento-texto); color: var(--acento-texto); } }
.opt input:checked + span { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento-2); box-shadow: 0 6px 18px var(--sombra-acento); }
.opt input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--apagado); margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.na { margin-top: 10px; }
.chips .opt span { min-height: 44px; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 999px; }
textarea, input.txt {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--borde-control); border-radius: 12px; color: var(--tinta);
  font: 16px Inter, system-ui, sans-serif; padding: 13px 14px; resize: vertical; transition: 0.15s;
}
textarea { min-height: 92px; }
textarea:focus, input.txt:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--sombra-acento); }
::placeholder { color: var(--placeholder); opacity: 1; }

.nav { margin-top: 22px; }
.nav-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.opt span, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; background: var(--acento); color: var(--sobre-acento); border: none; border-radius: 14px;
  padding: 12px 26px; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 22px; text-transform: uppercase;
  letter-spacing: 0.03em; cursor: pointer; transition: 0.2s; box-shadow: 0 10px 30px var(--sombra-acento); text-decoration: none;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn.ghost { background: transparent; color: var(--acento-texto); border: 1px solid var(--acento-texto); box-shadow: none; font-size: 18px; padding: 10px 18px; }
.error { margin-top: 14px; color: var(--error); font-weight: 600; text-align: center; }
.hint { margin-top: 14px; color: var(--apagado); font-size: 13px; text-align: center; }

.aviso { text-align: center; padding: 64px 16px 80px; max-width: 640px; margin: 0 auto; }
.aviso-icono { font-size: 60px; }
.aviso h2 {
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 9vw, 68px); line-height: 0.92; margin: 14px 0;
}
.aviso p { color: var(--tinta-2); line-height: 1.6; margin-bottom: 18px; }
.resena { margin-top: 26px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: var(--superficie); }
.estrellas { color: var(--acento-texto); font-size: 22px; letter-spacing: 4px; margin-bottom: 14px; }

footer { border-top: 1px solid var(--linea); color: var(--apagado); font-size: 13px; text-align: center; padding: 22px 16px calc(32px + env(safe-area-inset-bottom)); }
footer a { color: var(--acento-texto); }

/* Celular: la encuesta se responde con el pulgar. Los botones quedan pegados abajo (siempre a mano, respetando la
   barra del iPhone), la portada es más corta y las grillas mantienen objetivos de 44 px o más. */
@media (max-width: 700px) {
  .hero { padding: 22px 16px 18px; }
  h1 { font-size: clamp(44px, 14vw, 64px); margin: 12px 0 10px; }
  .sub { font-size: 15px; }
  .meta { margin-top: 14px; gap: 6px; }
  .pill { font-size: 13px; padding: 5px 10px; }
  main { padding: 14px 12px 24px; }
  .intro { font-size: 14px; padding: 14px 14px; }
  section.blk { margin: 12px 0; border-radius: 14px; }
  .blk-h { padding: 14px; gap: 12px; }
  .num { min-width: 44px; height: 40px; font-size: 26px; }
  .q { padding: 16px 14px; }
  .scale.nps { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .blk-h h2 { font-size: 22px; }
  .nav {
    position: sticky; bottom: 0; z-index: 4; margin: 14px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--barra-fija); backdrop-filter: blur(8px); border-top: 1px solid var(--linea);
  }
  .nav .btn { font-size: 20px; padding: 10px 18px; min-height: 50px; }
  .nav .btn:not(.ghost) { flex: 1; }
  .nav .btn.ghost { font-size: 16px; padding: 10px 14px; }
  .error { margin-top: 8px; font-size: 14px; }
  .aviso { padding: 44px 16px 56px; }
}