/* Una sola columna, una pregunta por pantalla; el mapa del sistema (generalista al centro, 10 áreas alrededor) abre y cierra el recorrido. */
:root{
  --bg:#F6F3EC; --surface:#FFFDF8; --ink:#1B2A27; --muted:#5B6B66; --line:#DDD7C9;
  --green:#0F5C52; --on-green:#FFFDF8; --green-soft:#DCEBE7;
  --amber:#E9A92B; --amber-soft:#FBEFD3; --hot:#B4491F; --hot-soft:#F8E1D6; --error:#A3261A;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F2420; --surface:#16322C; --ink:#EEF3EF; --muted:#A9BDB6; --line:#34574F;
  --green:#6FD0B8; --on-green:#0F2420; --green-soft:#1F4A41;
  --amber:#F2BC52; --amber-soft:#4A3B17; --hot:#F08A5D; --hot-soft:#4C2A1C; --error:#FF9C8F; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0F2420; --surface:#16322C; --ink:#EEF3EF; --muted:#A9BDB6; --line:#34574F;
  --green:#6FD0B8; --on-green:#0F2420; --green-soft:#1F4A41;
  --amber:#F2BC52; --amber-soft:#4A3B17; --hot:#F08A5D; --hot-soft:#4C2A1C; --error:#FF9C8F; color-scheme:dark }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:calc(20px + env(safe-area-inset-top, 0px)); padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
.wrap{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.marca{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.marca b{ color:var(--ink); font-weight:700; letter-spacing:.02em; }
.avance{ display:flex; gap:4px; }
.avance i{ flex:1; height:5px; border-radius:3px; background:var(--line); }
.avance i.h{ background:var(--green); }
.ojo{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--green); margin:0; }
h1,h2{ font-family:var(--serif); font-weight:700; line-height:1.15; text-wrap:balance; margin:0; }
h1{ font-size:clamp(30px, 8vw, 42px); }
h2{ font-size:clamp(24px, 6.4vw, 30px); }
p{ margin:0; max-width:60ch; }
.sub{ color:var(--muted); }
#pantalla{ display:flex; flex-direction:column; gap:18px; animation:entra .28s ease-out; }
@keyframes entra{ from{ transform:translateY(8px); opacity:.4 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ #pantalla{ animation:none } .nodo,.rayo{ transition:none !important } }

.campo{ display:flex; flex-direction:column; gap:6px; }
.campo label,.campo .l{ font-weight:600; font-size:15px; }
.campo small{ color:var(--muted); font-size:13px; }
input[type=text],input[type=tel],input[type=email],textarea{ font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; }
textarea{ min-height:96px; resize:vertical; }
input:focus-visible,textarea:focus-visible,button:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font:inherit; font-size:15px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
  border-radius:999px; padding:9px 14px; cursor:pointer; }
.chip[aria-pressed=true]{ background:var(--green); border-color:var(--green); color:var(--on-green); font-weight:600; }

.sit{ display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.sit q{ quotes:"«" "»"; font-family:var(--serif); font-size:19px; line-height:1.3; }
.frec{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.frec button{ font:inherit; font-size:13.5px; line-height:1.2; color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
  border-radius:10px; padding:10px 4px; cursor:pointer; min-height:52px; }
.frec button[aria-pressed=true]{ font-weight:700; }
.frec button[data-v="0"][aria-pressed=true]{ background:var(--green-soft); border-color:var(--green); }
.frec button[data-v="1"][aria-pressed=true]{ background:var(--amber-soft); border-color:var(--amber); }
.frec button[data-v="2"][aria-pressed=true]{ background:var(--amber); border-color:var(--amber); color:#1B2A27; }
.frec button[data-v="3"][aria-pressed=true]{ background:var(--hot); border-color:var(--hot); color:var(--on-green); }

.nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:4px; }
.btn{ font:inherit; font-weight:700; border-radius:12px; padding:14px 22px; cursor:pointer; border:1.5px solid var(--green);
  background:var(--green); color:var(--on-green); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn.sec{ background:transparent; color:var(--green); }
.btn.txt{ background:transparent; border-color:transparent; color:var(--muted); padding:14px 8px; font-weight:600; }
.aviso{ font-size:13.5px; color:var(--muted); }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); }
.check input{ width:20px; height:20px; margin-top:1px; accent-color:var(--green); flex:none; }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.mapa{ width:100%; max-width:440px; margin:0 auto; display:block; }
.mapa text{ font-family:var(--sans); font-size:12.5px; fill:var(--ink); }
.mapa .cen{ fill:var(--green); } .mapa .cent{ fill:var(--on-green); font-weight:700; font-size:11.5px; }
.rayo{ stroke:var(--line); transition:stroke .4s, stroke-width .4s; }
.nodo{ fill:var(--surface); stroke:var(--line); stroke-width:1.5; transition:fill .4s; }
.n1 .nodo{ fill:var(--amber-soft); stroke:var(--amber); } .n1 .rayo{ stroke:var(--amber); }
.n2 .nodo{ fill:var(--amber); stroke:var(--amber); } .n2 .rayo{ stroke:var(--amber); }
.n3 .nodo{ fill:var(--hot); stroke:var(--hot); } .n3 .rayo{ stroke:var(--hot); }
.dol text{ font-weight:700; }

.opc{ display:flex; flex-direction:column; gap:8px; }
.opc button{ font:inherit; text-align:left; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; cursor:pointer; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.opc button[aria-pressed=true]{ border-color:var(--hot); background:var(--hot-soft); font-weight:700; }
.opc span{ font-size:13px; color:var(--muted); font-weight:500; text-align:right; }
.opc .dos{ display:flex; flex-direction:column; gap:2px; text-align:left; color:var(--ink); font-size:16px; }
.opc .dos small{ color:var(--muted); font-size:13.5px; font-weight:500; }
.opc button[aria-pressed=true] .dos b{ font-weight:800; }
.cartas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:8px; }
.carta{ font:inherit; font-size:15px; line-height:1.35; text-align:left; color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px 12px 40px; cursor:pointer; position:relative; min-height:64px; }
.carta::before{ content:""; position:absolute; left:13px; top:14px; width:16px; height:16px; border:1.5px solid var(--line); border-radius:5px; background:var(--bg); }
.carta[aria-pressed=true]{ border-color:var(--hot); background:var(--hot-soft); }
.carta[aria-pressed=true]::before{ background:var(--hot); border-color:var(--hot); box-shadow:inset 0 0 0 3px var(--hot-soft); }
.cifra .ojo{ margin-bottom:2px; }
.grupo{ display:flex; flex-direction:column; gap:8px; }
.grupo .ojo{ color:var(--muted); }

.fila{ display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:4px 12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
.fila h3{ margin:0; font-size:16px; font-weight:700; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fila p{ grid-column:1 / -1; font-size:14.5px; color:var(--muted); }
.fila p.usa{ color:var(--green); font-weight:600; font-size:14px; }
.fila p.usa.falta{ color:var(--muted); font-weight:500; }
.barra{ height:8px; border-radius:4px; background:var(--line); overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--amber); } .barra i.n3{ background:var(--hot); }
.tag{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.tag.a{ background:var(--hot); color:var(--on-green); } .tag.b{ background:var(--amber-soft); color:var(--ink); } .tag.c{ background:var(--green-soft); color:var(--ink); }
.cifra{ background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:4px; }
.cifra b{ font-family:var(--serif); font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; }
.estado{ font-size:15px; font-weight:600; color:var(--green); }
.estado.mal{ color:var(--error); }