/* Layout: columna de lectura alineada a la izquierda; índice de cinco preguntas en filas grandes; cada tema lleva su propio tono */
:root{
  --bg:#EEEDF4; --surface:#F8F7FC; --ink:#17132B; --muted:#5C5775; --line:#D3D0E0;
  --t1:#D9481F; --t2:#0B7F80; --t3:#B82A82; --t4:#2F4FCC; --t5:#9A6200;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1080px; --read:40rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#110E1F; --surface:#1A1630; --ink:#ECEAF6; --muted:#A29DBD; --line:#2E2947;
    --t1:#FF7A52; --t2:#3CC8C2; --t3:#F062B8; --t4:#8198FF; --t5:#F2B340; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#110E1F; --surface:#1A1630; --ink:#ECEAF6; --muted:#A29DBD; --line:#2E2947;
  --t1:#FF7A52; --t2:#3CC8C2; --t3:#F062B8; --t4:#8198FF; --t5:#F2B340; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.65}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* Barra superior */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand span{font-weight:400;color:var(--muted)}
.dots{display:flex;gap:.35rem}
.dots a{font-family:var(--mono);font-size:.78rem;text-decoration:none;width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--muted)}
.dots a:hover,.dots a.on{background:var(--hue);border-color:var(--hue);color:var(--bg)}

/* Tonos por tema */
[data-t="1"]{--hue:var(--t1)}[data-t="2"]{--hue:var(--t2)}[data-t="3"]{--hue:var(--t3)}[data-t="4"]{--hue:var(--t4)}[data-t="5"]{--hue:var(--t5)}

/* Portada */
.hero{padding-block:clamp(2.5rem,7vw,5.5rem) clamp(2rem,4vw,3rem);display:grid;gap:1.5rem}
.hero .mono{color:var(--muted)}
.hero h1{font-size:clamp(2.6rem,8.2vw,6.4rem);font-weight:800;line-height:.95;letter-spacing:-.045em;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--t3)}
.hero p{max-width:34rem;font-size:1.25rem;color:var(--muted)}

/* Índice */
.index{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.index a{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:.5rem 1rem;align-items:baseline;padding-block:1.15rem;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .2s}
.index .n{font-family:var(--mono);font-size:.85rem;color:var(--hue)}
.index .q{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,3vw,2rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.index .tag{color:var(--muted);white-space:nowrap}
.index a:hover{padding-left:.6rem}
.index a:hover .q{color:var(--hue)}
@media (prefers-reduced-motion: reduce){.index a{transition:none}}
@media (max-width:640px){.index a{grid-template-columns:2.2rem minmax(0,1fr)}.index .tag{grid-column:2}}

/* Artículos */
.art{padding-block:clamp(3rem,8vw,6rem);border-top:1px solid var(--line)}
.art:first-of-type{border-top:0}
.head{display:grid;gap:1.1rem;margin-bottom:2.5rem}
.head .mono{color:var(--hue);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.head .mono::before{content:"";width:2.4rem;height:.6rem;background:var(--hue);border-radius:99px}
.head h2{font-size:clamp(2rem,5.6vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.035em;max-width:18ch}
.lede{font-size:1.3rem;line-height:1.5;max-width:var(--read);color:var(--muted)}
.cols{display:grid;grid-template-columns:minmax(0,var(--read)) minmax(0,1fr);gap:2.5rem 4rem;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
.text{display:grid;gap:1.15rem;min-width:0}
.text h3{font-size:1.35rem;font-weight:700;letter-spacing:-.015em;margin-top:1.1rem}
.text strong{font-weight:600}
.side{display:grid;gap:1.75rem;min-width:0;position:sticky;top:5rem}
@media (max-width:900px){.side{position:static}}
.note{display:grid;gap:.7rem}
.note .mono{color:var(--muted)}
.note ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:1rem;line-height:1.5}
.note li::marker{color:var(--hue)}
.src{font-size:.88rem;line-height:1.5;color:var(--muted)}

/* Figuras */
.fig{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem;display:grid;gap:1rem;margin-block:.6rem}
.fig .mono{color:var(--muted)}
.fig figcaption,.fig .cap{font-size:.95rem;line-height:1.5;color:var(--muted)}
figure{margin:0}
.bars{display:grid;gap:.8rem}
.bar{display:grid;gap:.3rem;font-family:var(--display);font-size:.95rem}
.bar div{display:flex;justify-content:space-between;gap:1rem}
.bar b{font-variant-numeric:tabular-nums}
.track{height:.9rem;background:var(--line);border-radius:99px;overflow:hidden}
.track i{display:block;height:100%;background:var(--hue);border-radius:99px}
.track i.dim{background:var(--muted)}
.big{font-family:var(--display);font-weight:800;font-size:clamp(3.2rem,9vw,5rem);line-height:.9;letter-spacing:-.04em;color:var(--hue)}
.seq{display:grid;gap:.9rem}
.seq div{display:grid;gap:.35rem}
.seq span{font-family:var(--display);font-size:.95rem}
.seq p{display:flex;gap:.3rem;flex-wrap:wrap}
.seq i{width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--hue)}
.seq i.f{background:var(--hue)}
.loop{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--display);font-size:.95rem;list-style:none;margin:0;padding:0}
.loop li{border:1.5px solid var(--hue);border-radius:99px;padding:.3rem .8rem}
.loop li:not(:last-child)::after{content:"→";margin-left:.9rem;margin-right:-1.6rem;color:var(--muted)}
.loop li:not(:last-child){margin-right:1.2rem}

/* Prueba de memoria */
.lab{border-color:var(--hue)}
.stage{min-height:7rem;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.03em}
.btn{font-family:var(--display);font-weight:700;font-size:1rem;background:var(--hue);color:var(--bg);border:0;border-radius:99px;padding:.7rem 1.4rem;cursor:pointer;justify-self:start}
.btn:hover{filter:brightness(1.1)}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opts label{font-family:var(--display);font-size:1rem;border:1.5px solid var(--line);border-radius:99px;padding:.4rem 1rem;cursor:pointer;user-select:none}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label:has(input:checked){background:var(--hue);border-color:var(--hue);color:var(--bg)}
.opts label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.verdict{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.3}

footer{border-top:2px solid var(--ink);padding-block:2.5rem 3.5rem;font-size:.95rem;color:var(--muted)}
footer .wrap{display:grid;gap:.8rem}
footer p{max-width:var(--read)}
footer .brand{color:var(--ink)}

/* --- Sitio de varias páginas --- */
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
.head h1{font-size:clamp(2rem,5.6vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.035em;max-width:18ch}
.text h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:1.6rem}
.text a,.prose a{color:var(--hue,var(--t4));text-underline-offset:3px}
.crumb{color:var(--muted);padding-top:1.5rem}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.art.page{padding-top:1.5rem}
.index .q{display:grid;gap:.45rem}
.index .q small{font-family:var(--body);font-weight:400;font-size:1.02rem;line-height:1.5;letter-spacing:0;color:var(--muted);max-width:44rem}
.more{padding-block:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line);display:grid;gap:1.2rem}
.more h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.about{padding-block:clamp(2.5rem,6vw,4rem);display:grid;gap:1rem;max-width:var(--read)}
.about h2{font-size:1.8rem;font-weight:800;letter-spacing:-.025em}
.prose{padding-block:clamp(2rem,6vw,4rem);display:grid;gap:1.1rem;max-width:var(--read)}
.prose h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1}
.prose h2{font-size:1.35rem;font-weight:700;margin-top:1.2rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.prose .mono{color:var(--muted)}
.byline{color:var(--muted);font-size:.95rem}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
footer nav a{text-decoration:none}footer nav a:hover{text-decoration:underline}
/* Espacio reservado para anuncios manuales: evita saltos de contenido */
.ad{margin-block:1.5rem;min-height:280px;display:grid;align-items:center;overflow:hidden}
.ad-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}