:root{--bg:#fff;--ink:#000;--mute:#6b6b6b;--line:#e4e4e4;--soft:#f5f5f5;--yellow:#f2d400;--green:#00c234;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--yellow);color:#000}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line);z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.25rem}
.brand img{display:block;height:2rem;width:auto}
nav{display:flex;gap:1.6rem;font-size:.95rem}
nav a{padding:.4rem 0;color:var(--mute);background:linear-gradient(var(--green),var(--green)) left bottom/0 1px no-repeat;transition:background-size .25s,color .2s}
nav a:hover{color:var(--ink);background-size:100% 1px}
nav a[aria-current]{color:var(--ink);background-size:100% 1px;background-image:linear-gradient(var(--ink),var(--ink))}
#menu{display:none;background:none;border:1px solid var(--line);color:inherit;font:inherit;font-size:.95rem;padding:.4rem .8rem;cursor:pointer}
main{min-height:70vh;padding:4.5rem 0 6rem}
h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.05;letter-spacing:-.03em;font-weight:700;margin:0 0 1.5rem}
h2{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:3rem 0 .75rem}
p{max-width:38rem;margin:0 0 1.1rem}
.lead{font-size:1.3rem;line-height:1.45;max-width:34rem}
.mute{color:var(--mute)}
.hero{padding:2rem 0 3rem}
.hero svg{display:block;width:100%;max-width:56rem;height:auto}
.hero svg path{stroke:var(--ink);stroke-width:1.2;fill:var(--ink)}
@media (prefers-reduced-motion:no-preference){
.hero svg path{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;animation:draw 2.2s ease-out forwards,ink .7s 1.7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes ink{to{fill-opacity:1}}}
.cursor{display:inline-block;width:.55em;height:2px;background:var(--yellow);margin-left:.15em;vertical-align:baseline}
.btn{display:inline-block;border:1px solid var(--ink);padding:.8rem 1.4rem;font-weight:500;font:inherit;font-weight:500;background:var(--ink);color:var(--bg);cursor:pointer;transition:box-shadow .2s}
.btn.ghost{background:none;color:var(--ink)}
.btn:hover{box-shadow:3px 3px 0 var(--green)}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.list{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--ink)}
.list a{display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line);transition:padding .2s}
.list a:hover{padding-left:.6rem;border-bottom-color:var(--green)}
.list .n{color:var(--mute);font-variant-numeric:tabular-nums}
.list .t{font-size:1.25rem;font-weight:500}
.list .s{color:var(--mute);font-size:.9rem}
.ph{aspect-ratio:16/9;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);font-size:.9rem;margin:2rem 0}
dl{display:grid;grid-template-columns:8rem 1fr;gap:.5rem 1rem;max-width:30rem;margin:1.5rem 0;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
dt{color:var(--mute)}dd{margin:0}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--ink)}
.pn a:hover,.back:hover,.txt:hover{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:4px}
.back{color:var(--mute);font-size:.95rem;display:inline-block;margin-bottom:2rem}
.txt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.5rem;margin-top:2.5rem}
.cols h2{margin-top:0}
.time{list-style:none;padding:0;margin:2.5rem 0 0;max-width:40rem}
.time li{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.time b{font-variant-numeric:tabular-nums}
form{max-width:32rem;margin-top:2.5rem;display:grid;gap:1.2rem}
label{display:grid;gap:.35rem;font-size:.95rem;font-weight:500}
input,textarea{font:inherit;color:inherit;background:var(--bg);border:0;border-bottom:1px solid var(--ink);padding:.6rem 0;border-radius:0;width:100%}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--green);box-shadow:0 1px 0 var(--green)}
textarea{min-height:7rem;resize:vertical}
footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--mute);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:760px){#menu{display:block}nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem 1.5rem 1rem}nav.open{display:flex}nav a{padding:.7rem 0;background:none!important;font-size:1.1rem}
.list a{grid-template-columns:2.5rem 1fr}.list .s{grid-column:2}main{padding-top:3rem}}

/* Modo oscuro (colores invertidos) */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;--bg:#000;--ink:#fff;--mute:#9a9a9a;--line:#262626;--soft:#101010;--yellow:#ffe433;--green:#00ff41}
#tema{font:inherit;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:999px;padding:.3rem 1rem;cursor:pointer;transition:box-shadow .2s}
#tema:hover{box-shadow:0 0 0 1px var(--green)}
footer .wrap{align-items:center}
/* Todo centrado */
header .wrap{justify-content:center}
main{text-align:center}
p,.lead,.hero svg,.list,.time,dl,form{margin-left:auto;margin-right:auto}
.list{max-width:46rem}
.list a,.time li,dl,form{text-align:left}
.row{justify-content:center}
.ph{max-width:46rem;margin-left:auto;margin-right:auto}

/* Páginas interiores: columna centrada, texto alineado a la izquierda (el inicio sigue centrado) */
main:not(.inicio){text-align:left}
main:not(.inicio) .wrap{max-width:49rem}
main:not(.inicio) :is(p,.lead,.list,.time,dl,form,.ph){margin-left:0;margin-right:0}
main:not(.inicio) :is(.list,.ph,.time){max-width:none}

/* Historia, Apoyo, Contacto y Recomendaciones: título a la izquierda, contenido a la derecha */
.split{display:grid;grid-template-columns:minmax(13rem,1fr) 2fr;gap:2rem 4.5rem;text-align:left;align-items:start}
.split .side{position:sticky;top:7rem}
.split h1{font-size:clamp(2rem,4.2vw,3.1rem)}
.split p,.split .lead,.split .list,.split .time,.split form{margin-left:0;margin-right:0}
.split .lead{font-size:1.15rem;color:var(--mute)}
.split .cont>:first-child{margin-top:.6rem}
.split .cont>p:first-child{font-size:1.3rem;line-height:1.45}
.split .list,.split .time{max-width:none}
.split .cols{grid-template-columns:1fr;gap:0;border-top:1px solid var(--ink)}
.split .cols>div{padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--line)}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:1rem}.split .side{position:static}}

/* Historia: línea de tiempo con años grandes */
.pg-historia{text-align:left}
.pg-historia p,.pg-historia .lead{margin-left:0;margin-right:0}
.pg-historia .time{max-width:none;margin:3.5rem 0 0}
.pg-historia .time li{grid-template-columns:minmax(8rem,1fr) 2fr;gap:.4rem 2rem;padding:1.8rem 0;align-items:baseline}
.pg-historia .time li:first-child{border-top-color:var(--ink)}
.pg-historia .time b{font-size:clamp(2.2rem,6vw,4rem);line-height:1;letter-spacing:-.03em}
.pg-historia .time span{font-size:1.15rem;max-width:30rem}
/* Apoyo: título centrado y tres columnas */
.pg-apoyo .cols{margin-top:3.5rem;gap:2.5rem}
.pg-apoyo .cols>div{border-top:1px solid var(--ink);padding-top:1.2rem;text-align:left}
.pg-apoyo .cols p{margin-left:0;margin-right:0}
/* Recomendaciones: cuadrícula de cuatro bloques */
.pg-recomendaciones{text-align:left}
.pg-recomendaciones p,.pg-recomendaciones .lead{margin-left:0;margin-right:0}
.pg-recomendaciones .list{display:grid;grid-template-columns:1fr 1fr;max-width:none;margin:3rem 0 0;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.pg-recomendaciones .list li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pg-recomendaciones .list a{display:block;padding:2rem 1.5rem 2.5rem;border:0;min-height:11rem;transition:background .2s,box-shadow .2s}
.pg-recomendaciones .list a:hover{padding-left:1.5rem;background:var(--soft);box-shadow:inset 0 -1px 0 var(--green)}
.pg-recomendaciones .list .t{display:block;font-size:1.5rem}
.pg-recomendaciones .list .s{display:block;margin-top:.5rem}
@media (max-width:760px){.pg-historia .time li,.pg-recomendaciones .list{grid-template-columns:1fr}.pg-recomendaciones .list a{min-height:0}}

/* Historia minimal: solo años; el icono despliega la línea de tiempo */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-historia{text-align:center}
.hist{--ys:clamp(2.6rem,8vw,5.5rem);padding-top:3rem}
.hist-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1.5rem}
.hist-grid::before{content:"";position:absolute;left:0;top:calc(var(--ys) + 1.75rem);height:1px;width:0;background:var(--ink);transition:width .9s ease}
.hist-y{display:block;margin:0 auto;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit;font-size:var(--ys);font-weight:700;letter-spacing:-.04em;line-height:1;transition:color .2s}
.hist-y:hover{color:var(--mute)}
.hist-dot{display:block;position:relative;width:9px;height:9px;border-radius:50%;background:var(--ink);margin:calc(1.75rem - 4px) auto 0;transform:scale(0);transition:transform .3s}
.hist-c p{margin:1rem auto 0;max-width:16rem;color:var(--mute);opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
.hist.open .hist-grid::before{width:100%}
.hist.open .hist-dot,.hist-c.on .hist-dot{transform:scale(1)}
.hist.open .hist-c p,.hist-c.on p{opacity:1;transform:none}
.hist-btn{background:none;border:0;padding:.5rem;margin-top:2.5rem;color:var(--mute);cursor:pointer;line-height:0;opacity:.6;transition:color .2s,opacity .2s,transform .4s}
.hist-btn:hover{color:var(--ink);opacity:1}
.hist.open .hist-btn{transform:rotate(180deg);color:var(--ink);opacity:1}
.hist-btn circle{fill:var(--bg)}
@media (max-width:760px){.hist-grid{grid-template-columns:1fr;gap:2.5rem}.hist-grid::before{display:none}.hist-dot{margin-top:1rem}}

/* Historia: años más pequeños para que quepan seis o más en una fila */
.hist{--ys:clamp(1.6rem,4.2vw,3rem)}
.hist-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 1rem}
.hist-c p{font-size:.95rem;line-height:1.5}
@media (max-width:760px){.hist{--ys:2.4rem}.hist-grid{grid-auto-flow:row;grid-auto-columns:auto;gap:2.25rem}}

/* Historia: años aún más pequeños y con más aire entre ellos */
.hist{--ys:clamp(1.3rem,2.6vw,1.9rem)}
.hist-grid{gap:0 3rem}
.hist-y{letter-spacing:-.02em}
.hist-c p{font-size:.9rem}
@media (max-width:760px){.hist{--ys:2rem}.hist-grid{gap:2.25rem}}

/* Icono de la línea de tiempo: gráfica al alza, sin giro al abrir */
.hist.open .hist-btn{transform:none}

/* ===== Adaptación a tablet y móvil ===== */
img,svg{max-width:100%}
h1,h2,p,a,span,dd{overflow-wrap:break-word}
.pn{flex-wrap:wrap}
@keyframes hin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Tablet */
@media (max-width:1000px){
.split{gap:2rem 2.5rem}
.hist-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.75rem 2rem}
.hist-grid::before{display:none}
.hist{--ys:clamp(1.7rem,4.4vw,2.3rem)}
.hist-dot{display:none;margin-top:1rem}
.hist-c p{display:none;opacity:1;transform:none}
.hist.open .hist-dot,.hist-c.on .hist-dot{display:block}
.hist.open .hist-c p,.hist-c.on p{display:block;animation:hin .4s}
}
/* Móvil */
@media (max-width:760px){
header .wrap{min-height:3.5rem}
#menu{padding:.55rem 1.2rem}
nav{text-align:center;max-height:calc(100vh - 3.5rem);overflow-y:auto}
nav a{padding:.85rem 0}
.hist-grid{grid-template-columns:1fr;gap:2.25rem}
.hist{--ys:2rem;padding-top:1.5rem}
.hist-btn{padding:.8rem}
.lead{font-size:1.15rem}
.split .cont>p:first-child{font-size:1.15rem}
h2{margin-top:2.25rem}
.cols{gap:2rem}
dl{grid-template-columns:6rem 1fr}
input,textarea{font-size:1rem}
main{padding-bottom:4rem}
}
/* Móvil pequeño */
@media (max-width:480px){
.wrap{padding:0 1.1rem}
main{padding-top:2.25rem}
.hero{padding:1rem 0 2rem}
.row{flex-direction:column}
.row .btn{text-align:center}
form .btn{width:100%}
.list a{padding:1rem 0}
.list .t{font-size:1.1rem}
.pg-recomendaciones .list a{padding:1.4rem 1.1rem 1.6rem}
.pn{flex-direction:column;gap:.9rem}
.time li{grid-template-columns:1fr}
footer .wrap{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}