/* binomio.io · estilos. Los tokens del design system de binomio, sin framework. Las letras van en el propio sitio. */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 800;font-display:swap;src:url('fuentes/AtkinsonHyperlegibleNext-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 800;font-display:swap;src:url('fuentes/AtkinsonHyperlegibleNext-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 700;font-display:swap;src:url('fuentes/Fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 700;font-display:swap;src:url('fuentes/Fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{color-scheme:light dark;--papel:#F5EFE3;--hoja:#FFFCF5;--tinta:#1E1A4B;--tinta-2:#575483;--anil:#3F35B5;--anil-hover:#2D2588;--anil-suave:#E7E5F7;--margen:#CF4A45;--cempasuchil:#F4A419;--rayado:#DCD6EE;--sombra:0 1px 0 rgba(30,26,75,.06),0 1px 3px rgba(30,26,75,.08);--marca:'Fraunces',Georgia,serif;--ui:'Atkinson Hyperlegible Next',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--papel:#14201C;--hoja:#1C2B26;--tinta:#EEF2EA;--tinta-2:#A8B7AD;--anil:#B6B2FF;--anil-hover:#D2CFFF;--anil-suave:#2A3346;--margen:#E48A8E;--cempasuchil:#F4B94A;--rayado:#2F4038;--sombra:0 0 0 1px rgba(238,242,234,.08)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.125rem/1.6 var(--ui)}
a{color:var(--anil);text-underline-offset:.18em}a:hover{color:var(--anil-hover)}
:focus-visible{outline:3px solid var(--cempasuchil);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:8px;padding:8px 12px;background:var(--hoja);border-radius:8px}.saltar:focus{left:12px}
.envoltura{width:min(100% - 40px,1080px);margin-inline:auto}
.borrador{margin:0;padding:8px 20px;background:var(--cempasuchil);color:#1E1A4B;font-weight:700;font-size:.95rem;text-align:center}
header.sitio{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0}
.marca{display:flex;align-items:center;gap:10px;font:650 1.75rem/1 var(--marca);color:var(--tinta);text-decoration:none}
.marca img{width:34px;height:34px}
nav.sitio ul{display:flex;gap:6px 20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
nav.sitio a{display:inline-block;padding:10px 2px;font-weight:700;text-decoration:none}
nav.sitio a[aria-current="page"]{color:var(--tinta);text-decoration:underline;text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--marca);font-weight:650;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,6vw,4rem)}h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}h3{font-size:1.35rem}
p{margin:0;text-wrap:pretty}
main{display:grid;gap:72px;padding:24px 0 80px}
.portada{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 0 8px;align-items:center}
@media (min-width:860px){.portada{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.portada .texto{display:grid;gap:22px;max-width:30ch}
.portada figure{margin:0;position:relative;aspect-ratio:3/2}
.portada .banda{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:18px;display:block}
.portada .explorador{position:absolute;left:50%;bottom:6%;width:42%;height:auto;transform:translateX(-50%)}
.portada .linea{font-size:clamp(1.25rem,2.4vw,1.5rem);max-width:34ch}
.pronto{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;background:var(--anil);color:var(--hoja);font-weight:700}
@media (prefers-color-scheme:dark){.pronto{color:#14201C}}
.pronto img{width:28px;height:28px;border-radius:7px}
.hoja{background:var(--hoja);border-radius:18px;box-shadow:var(--sombra);padding:clamp(20px,4vw,40px)}
.cuaderno{background-image:repeating-linear-gradient(to bottom,transparent 0 35px,var(--rayado) 35px 36px),linear-gradient(to right,transparent 0 46px,var(--margen) 46px 48px,transparent 48px);padding-left:72px}
.seccion{display:grid;gap:20px}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;gap:8px;background:var(--hoja);border-radius:18px;box-shadow:var(--sombra);padding:24px}
.pasos li::before{content:counter(paso);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--anil-suave);color:var(--anil);font:650 1.4rem/1 var(--marca)}
.exploradores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:20px;margin:0;padding:0;list-style:none}
.exploradores li{display:grid;justify-items:center;gap:8px;text-align:center;background:var(--hoja);border-radius:18px;box-shadow:var(--sombra);padding:20px 12px}
.exploradores img{width:min(100%,180px);height:auto;aspect-ratio:4/5;object-fit:contain}
.exploradores b{font-size:1.1rem}
footer.sitio{padding:32px 0 48px;border-top:1px solid var(--rayado);display:flex;gap:12px 28px;flex-wrap:wrap;color:var(--tinta-2);font-size:1rem}
footer.sitio a{font-weight:700}
.lectura{display:grid;grid-template-columns:minmax(0,260px) minmax(0,68ch);gap:48px;align-items:start}
@media (max-width:820px){.lectura{grid-template-columns:minmax(0,1fr)}}
.indice{position:sticky;top:20px;display:grid;gap:10px}
.indice ol{margin:0;padding:0 0 0 1.2em;display:grid;gap:4px}
.indice a{display:inline-block;padding:6px 0;font-weight:700}
.texto-largo{display:grid;gap:36px}
.texto-largo section{display:grid;gap:12px;scroll-margin-top:20px}
.texto-largo .pendiente{padding:14px 16px;border-radius:12px;border:2px dashed var(--tinta-2);color:var(--tinta-2);font-size:1rem}
.preguntas{display:grid;gap:16px;max-width:72ch}
.preguntas details{background:var(--hoja);border-radius:14px;box-shadow:var(--sombra);padding:4px 20px}
.preguntas summary{cursor:pointer;padding:14px 0;font-weight:700;list-style-position:outside}
.preguntas details p{padding:0 0 16px}
.correo{font:650 clamp(1.5rem,4vw,2.2rem)/1.2 var(--marca)}
/* lumen-landing · añadidos sobre la entrega 9b (mismos tokens) */
.estado{color:var(--tinta-2);font-size:1.05rem;max-width:34ch}
.boton{justify-self:start;display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:12px;background:var(--anil);color:var(--hoja);font-weight:700;text-decoration:none}
.boton:hover{background:var(--anil-hover);color:var(--hoja)}
@media (prefers-color-scheme:dark){.boton,.boton:hover{color:#14201C}}
.titulo-aviso{display:grid;gap:8px}
.meta{color:var(--tinta-2);font-size:1rem}
.texto-largo ul{margin:0;padding-left:1.3em;display:grid;gap:6px}
.texto-largo strong{font-weight:700}
.texto-largo a{overflow-wrap:anywhere}
.indice a{display:inline;padding:0}
.indice li{padding:5px 0}
.indice-movil{display:none;background:var(--hoja);border-radius:14px;box-shadow:var(--sombra);padding:4px 20px}
.indice-movil summary{cursor:pointer;padding:14px 0;font-weight:700}
.indice-movil ol{margin:0 0 14px;padding-left:1.4em;display:grid;gap:2px}
.indice-movil li{padding:6px 0}
@media (max-width:820px){nav.indice{display:none}.indice-movil{display:block}}
/* portada v2 (copy v2, P-131): historia, beneficios, capturas y cierre */
.antetitulo{margin:0;color:var(--anil);font:650 1.05rem/1.2 var(--marca);letter-spacing:.01em}
.portada .texto{max-width:34ch}
.portada .boton{margin-top:4px}
.problema p{font-size:clamp(1.15rem,2.2vw,1.35rem);max-width:52ch}
.nota{display:grid;gap:14px;max-width:68ch}
.nota p{font-size:1.1rem}
.firma{font:650 1.6rem/1 var(--marca);color:var(--tinta)}
.beneficios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px;margin:0;padding:0;list-style:none}
.beneficios li{padding:14px 0;border-top:2px solid var(--tinta);font-size:1.05rem}
.beneficios b{display:block;font:650 1.25rem/1.25 var(--marca);margin-bottom:4px}
.pasos.con-captura li{grid-template-rows:auto 1fr;align-content:start}
.pasos .captura{width:min(100%,240px);height:auto;justify-self:center;border-radius:28px;border:6px solid var(--tinta);margin-top:12px;background:var(--hoja)}
.aprende{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.aprende>div{display:grid;gap:8px;align-content:start;padding:20px 0;border-top:2px solid var(--tinta)}
.aprende p{font-size:1.1rem}
.ciencia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin:0;padding:0;list-style:none}
.ciencia li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:2px solid var(--tinta)}
.fuente{color:var(--tinta-2);font-size:.95rem}
.nohace{margin:0;list-style:none;display:grid;gap:2px;font-size:1.1rem;max-width:60ch}
.nohace li{padding:5px 0}
.cierre{justify-items:start;padding:32px 0 8px}
.cierre h2{font-size:clamp(1.8rem,4vw,2.6rem);max-width:22ch}
.cierre p{font-size:1.15rem;max-width:52ch}
.portada h1{font-size:clamp(2.1rem,5vw,3.3rem)}