/* Estilo común de la guía: manual de campo de una columna, fotogramas de película donde irán las fotos */
:root{
  --bg:#EEF3F4; --surface:#FFFFFF; --sunk:#E2EAEC; --ink:#10232B; --muted:#4E646C; --line:#C9D6DA;
  --water:#0C6A80; --water-soft:#D5EBF0; --water-ink:#08495A;
  --ok:#256B30; --ok-soft:#DDEFDD; --warn:#9A4507; --warn-soft:#FBEBD6; --bad:#B42318; --bad-soft:#F8DEDA;
  --film:#0B1214; --film-ink:#E8EEEF; --film-muted:#8FA2A7; --gold:#E8B04A;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C171B; --surface:#13232A; --sunk:#0F1D22; --ink:#E4EEF0; --muted:#94AAB1; --line:#243B43;
  --water:#4FB6CF; --water-soft:#123843; --water-ink:#9FDCEB;
  --ok:#6CC27A; --ok-soft:#173222; --warn:#F0A65A; --warn-soft:#3A2814; --bad:#F2877B; --bad-soft:#3D1A17;
  --film:#05090A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C171B; --surface:#13232A; --sunk:#0F1D22; --ink:#E4EEF0; --muted:#94AAB1; --line:#243B43;
  --water:#4FB6CF; --water-soft:#123843; --water-ink:#9FDCEB;
  --ok:#6CC27A; --ok-soft:#173222; --warn:#F0A65A; --warn-soft:#3A2814; --bad:#F2877B; --bad-soft:#3D1A17;
  --film:#05090A; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 var(--body);margin:0}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px;padding-block:0 64px}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:2.1rem;font-weight:800}
h3{font-size:1.35rem;font-weight:700}
p{margin:0}
a{color:var(--water)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,label:focus-within{outline:3px solid var(--water);outline-offset:2px;border-radius:6px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.frame{position:relative;background:var(--film);color:var(--film-ink);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;max-width:100%;display:grid;align-content:end;padding:18px;isolation:isolate}
.frame::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 75% 30%,color-mix(in srgb,var(--gold) 28%,transparent),transparent 60%),
  radial-gradient(80% 60% at 20% 100%,rgba(0,0,0,.6),transparent 70%)}
.frame::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px)}
.frame .lbl{font:600 .72rem/1 var(--mono);letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.frame .desc{font-size:.95rem;color:var(--film-ink);max-width:52ch;margin-top:6px}
.frame.hero{aspect-ratio:auto;min-height:360px;border-radius:0 0 var(--r) var(--r);margin-inline:-16px;padding:28px 20px}
.hero h1{font-size:clamp(3rem,11vw,5.2rem);font-weight:800;letter-spacing:-.01em;color:var(--film-ink)}
.hero .eyebrow{font:600 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero .lead{font-size:1.2rem;max-width:36ch;color:var(--film-ink);margin-top:10px}
.hero .ph{font:600 .7rem/1.3 var(--mono);color:var(--film-muted);margin-top:18px;letter-spacing:.08em}
.hero .legend{margin-top:14px}

.legend{display:flex;flex-wrap:wrap;gap:8px}
.lv{display:inline-flex;align-items:center;gap:6px;font:600 .78rem/1 var(--mono);padding:6px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface);white-space:nowrap}
.lv::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.l1{color:var(--ok)} .l2{color:var(--warn)} .l3{color:var(--bad)}

nav.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
nav.toc ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
nav.toc ul::-webkit-scrollbar{display:none}
nav.toc a{display:block;white-space:nowrap;text-decoration:none;color:var(--ink);font:600 .85rem/1 var(--body);padding:8px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
nav.toc a:hover{border-color:var(--water);color:var(--water)}

section{padding-block:40px 8px;display:grid;gap:18px;scroll-margin-top:64px}
.sec-head{display:grid;gap:6px}
.sec-no{font:600 .8rem/1 var(--mono);color:var(--water);letter-spacing:.1em}
.intro{color:var(--muted);max-width:62ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;min-width:0;align-content:start}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
ul.plain{margin:0;padding-left:1.2em;display:grid;gap:6px}
.small{font-size:.95rem;color:var(--muted)}

.fact .big{font:600 2.3rem/1 var(--mono);color:var(--water)}
.fact .k{font:700 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.time{display:grid;border-left:3px solid var(--water);margin-left:8px}
.time .ev{position:relative;padding:0 0 16px 18px;display:grid;gap:2px}
.time .ev::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--water)}
.time .h{font:600 .9rem/1.2 var(--mono);color:var(--water)}

.weeks{display:grid;gap:8px}
.wk{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.wk .w{font:600 .85rem/1.2 var(--mono);color:var(--water)}

.zone{display:grid;gap:8px}
.zone .z{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:10px;padding:14px}
.zone .d{font:600 1.15rem/1.1 var(--mono);color:var(--c)}
.zone .d small{display:block;font:600 .7rem/1.3 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

.note{border-radius:10px;padding:12px 14px;display:grid;gap:4px;font-size:.98rem}
.note .t{font:700 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tip{background:var(--sunk)} .tip .t{color:var(--water)}
.warn{background:var(--warn-soft)} .warn .t{color:var(--warn)}
.danger{background:var(--bad-soft)} .danger .t{color:var(--bad)}
.good{background:var(--ok-soft)} .good .t{color:var(--ok)}

.myth{display:grid;gap:10px}
.myth .m{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--bad);border-radius:10px;padding:14px}
.myth .m .x{font:700 1.1rem/1.2 var(--display);color:var(--bad)}

.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .75rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sunk)}
tr:last-child td{border-bottom:0}
td .num{font-weight:600;color:var(--water)}

ol.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:8px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
ol.steps li::before{content:counter(s);font:600 .9rem/30px var(--mono);text-align:center;width:30px;height:30px;border-radius:50%;background:var(--water);color:var(--surface)}

details.more{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.more>summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 1.15rem/1.2 var(--display)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font:600 1.3rem/1 var(--mono);color:var(--water)}
details.more[open]>summary::after{content:"–"}
details.more>.in{padding:0 16px 16px;display:grid;gap:12px}

.check{display:grid;gap:8px}
.check label{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--water);flex:none;margin-top:2px}
.check label:has(input:checked){background:var(--water-soft);border-color:transparent}
.check label:has(input:checked) span{text-decoration:line-through;color:var(--muted)}
.progress{display:flex;align-items:center;gap:12px}
.progress .track{flex:1;height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.progress .fill{height:100%;background:var(--water);width:0;transition:width .3s}
.sources{font-size:.9rem;color:var(--muted)} .sources ul{display:grid;gap:4px;padding-left:1.1em;margin:0}
footer{margin-top:40px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
@media (max-width:480px){.zone .z{grid-template-columns:1fr;gap:6px}.wk{grid-template-columns:1fr;gap:4px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Fotos reales dentro de los fotogramas (bancos gratuitos; créditos en fotos/creditos.json) */
.frame.con-foto::before{background:linear-gradient(to top,rgba(5,9,10,.88) 0%,rgba(5,9,10,.55) 38%,rgba(5,9,10,.12) 72%,rgba(5,9,10,0) 100%)}
.frame.con-foto:not(.hero)::before{background:linear-gradient(to bottom,rgba(5,9,10,.28),rgba(5,9,10,0) 22%)}
.frame.con-foto h1,.frame.con-foto .lead,.frame.con-foto .eyebrow,.frame.con-foto .lbl,.frame.con-foto .desc{text-shadow:0 1px 3px rgba(0,0,0,.75)}
.frame.con-foto::after{display:none}
.frame > img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;max-width:none}
.frame .cred{position:absolute;top:8px;right:10px;font:500 .6rem/1 var(--mono);letter-spacing:.04em;color:#E8EEEF;background:rgba(5,9,10,.55);padding:4px 6px;border-radius:4px}
.frame.con-foto .ph{display:none}

/* Datos destacados y mitos (formato corto: <div class="fact"><b>dato</b><span>texto</span></div>; <p class="m">mito</p><p class="r">realidad</p>) */
.fact:not(.card){background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:6px;align-content:start;min-width:0}
.fact>b{font:600 2rem/1.05 var(--mono);color:var(--water);font-variant-numeric:tabular-nums}
.fact>span{font-size:.95rem;color:var(--muted)}
.myth p.m{font:700 1.15rem/1.25 var(--display);color:var(--ink)}
.myth p.m::before{content:"MITO";display:block;font:700 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--bad);margin-bottom:4px}
.myth p.r{margin:-6px 0 6px;padding:12px 14px;border-left:5px solid var(--ok);background:var(--ok-soft);border-radius:10px}
.myth p.r::before{content:"REALIDAD";display:block;font:700 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--ok);margin-bottom:4px}