/* Paleta: verde de bosque sobre papel frío; el ámbar solo aparece en datos */
:root{
  --bg:#f5f6f3;--panel:#ffffff;--ink:#17201c;--mute:#56625c;--line:#d9ded9;
  --verde:#0f4c3a;--vivo:#1d7556;--suave:#e5eee8;--ambar:#9c6b16;--on:#ffffff;
  --halo:rgba(29,117,86,.12);--halo-calido:rgba(156,107,22,.09);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --suave-t:.18s var(--ease-out);
  --display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"Literata",Georgia,serif;
}
:root[data-theme="dark"]{
  --bg:#151513;--panel:#1e1d1a;--ink:#eeeae1;--mute:#b4aea2;--line:#3b3832;
  --verde:#d4c28f;--vivo:#ead9aa;--suave:#2b2924;--ambar:#d0a75e;--on:#171613;
  --halo:rgba(212,194,143,.09);--halo-calido:rgba(208,167,94,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.7 var(--texto);transition:background .3s,color .3s}
a{color:var(--verde);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--suave-t),background-color var(--suave-t),border-color var(--suave-t)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--vivo);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* Barra */
.barra{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;height:54px}
.nombre{display:inline-flex;align-items:center;font:700 1rem var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.monograma{display:none}
.barra nav{display:flex;align-items:center;gap:26px;font:600 .9rem var(--display)}
.barra nav a{display:flex;align-items:center;min-height:44px;padding:0;color:var(--mute);text-decoration:none;box-shadow:inset 0 -2px transparent;transition:color var(--suave-t),box-shadow var(--suave-t)}
.barra nav a:hover{color:var(--ink)}
.barra nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px var(--verde)}
#tema{cursor:pointer;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;transition:background-color var(--suave-t),transform .14s var(--ease-out)}
#tema:hover{background:var(--suave)}
#tema:active{transform:scale(.95)}
#tema svg{width:18px;height:18px}
#tema .sol{display:none}
:root[data-theme="dark"] #tema .sol{display:block}
:root[data-theme="dark"] #tema .luna{display:none}

/* Portada: una declaración personal con un trazo económico propio. */
.portada{position:relative;overflow:hidden;isolation:isolate;background:#0c503d;color:#f5f2e8}
:root[data-theme="dark"] .portada{background:#173d31}
.portada::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 100%}
.portada .wrap{display:block;position:relative;padding-top:48px;padding-bottom:0}
.hero-identidad{position:relative;z-index:2;max-width:1040px}
.hero-identidad>*{opacity:0;animation:entrada-portada .66s var(--ease-out) forwards}
.hero-identidad>*:nth-child(2){animation-delay:.07s}.hero-identidad>*:nth-child(3){animation-delay:.14s}.hero-identidad>*:nth-child(4){animation-delay:.21s}
@keyframes entrada-portada{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-nombre{font:700 .86rem/1 var(--display);margin:0 0 18px;color:#e7ba57}
.hero-identidad h1{font:600 clamp(2.8rem,5vw,4.7rem)/.98 var(--texto);font-variation-settings:"opsz" 72;letter-spacing:-.04em;margin:0;max-width:18ch;text-wrap:balance}
.hero-presentacion{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.5;max-width:72ch;margin:20px 0 0;color:rgba(245,242,232,.82)}
.hero-acciones{margin-top:24px}
.hero-primario{background:#f5f2e8;border-color:#f5f2e8;color:#173d31}
.hero-primario:hover{background:#e7ba57;border-color:#e7ba57;color:#173d31}
.hero-secundario{border-color:rgba(245,242,232,.48);color:#f5f2e8}
.hero-secundario:hover{background:rgba(245,242,232,.1);border-color:#f5f2e8}
.hero-trazo{display:block;width:100%;height:96px;margin-top:4px;overflow:visible}
.trazo-guia{fill:none;stroke:rgba(245,242,232,.1);stroke-width:1}
.trazo-economia{fill:none;stroke:#e7ba57;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dibujar-trazo 1.45s .34s var(--ease-in-out) forwards}
@keyframes dibujar-trazo{to{stroke-dashoffset:0}}
.hero-coordenadas{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid rgba(245,242,232,.24)}
.hero-coordenadas div{padding:13px 16px 16px;border-right:1px solid rgba(245,242,232,.18)}
.hero-coordenadas div:first-child{padding-left:0}.hero-coordenadas div:last-child{border-right:0}
.hero-coordenadas dt{font:600 .78rem var(--display);color:rgba(245,242,232,.58)}
.hero-coordenadas dd{margin:3px 0 0;font:600 .98rem var(--display);color:#f5f2e8}
h1{font:600 clamp(2.8rem,6vw,4.4rem)/1 var(--texto);font-variation-settings:"opsz" 72;letter-spacing:-.025em;margin:0 0 24px}
.entrada{font-size:1.2rem;line-height:1.6;max-width:34ch;margin:0 0 28px}
dl.datos{margin:0 0 32px;font:500 .95rem/1.45 var(--display)}
dl.datos div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
dl.datos div:last-child{border-bottom:1px solid var(--line)}
dl.datos dt{color:var(--mute)}
dl.datos dd{margin:0}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.boton{font:600 .98rem var(--display);padding:11px 18px;border-radius:4px;text-decoration:none;border:1.5px solid var(--verde)}
.boton.lleno{background:var(--verde);color:var(--on)}
.boton.lleno:hover{background:var(--vivo);border-color:var(--vivo)}
.boton.borde{color:var(--verde)}
.boton.borde:hover{background:var(--suave)}

/* Gráfico de crecimiento */
.laboratorio{border-bottom:1px solid var(--line)}
.wrap-lab{display:grid;grid-template-columns:minmax(220px,3fr) minmax(0,7fr);gap:64px;max-width:1120px;margin:0 auto;padding:76px 24px 88px;align-items:start}
.lab-intro h2{font:700 clamp(1.9rem,3vw,2.6rem)/1.08 var(--display);letter-spacing:-.04em;margin:0 0 16px}
.lab-intro p{margin:0;color:var(--mute);max-width:28ch}
.vitrina{min-width:0}
.vitrina-tabs{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;padding:2px}
.vitrina-tabs button{min-height:38px;padding:7px 13px;border:1px solid transparent;border-radius:99px;background:transparent;color:var(--mute);font:600 .82rem var(--display);cursor:pointer;white-space:nowrap;transition:color var(--suave-t),background-color var(--suave-t),border-color var(--suave-t),transform .14s var(--ease-out)}
.vitrina-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.vitrina-tabs button:active{transform:scale(.97)}
.vitrina-panel.lamina{margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--panel) 86%,transparent);box-shadow:0 18px 60px rgba(15,20,18,.08);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
.vitrina-panel[hidden]{display:none}
.lamina svg{width:100%;height:auto;display:block;overflow:visible;margin-top:8px}
.fig-titulo{font:700 1.15rem/1.3 var(--display);letter-spacing:-.01em;margin:0}
.fig-sub{margin:4px 0 0;color:var(--mute);font-size:.98rem}
.eje{stroke:var(--mute);stroke-width:1.5}
.txt{font:500 13px var(--display);fill:var(--mute)}
.txt-n{font:700 22px var(--display);fill:var(--ink);font-variant-numeric:tabular-nums}
.b-a{fill:var(--ambar);opacity:.75}
.b-b{fill:var(--verde)}
.parcial{opacity:.45}
.guia{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 5}
.control{display:flex;align-items:center;gap:16px;margin-top:14px;font:600 .95rem var(--display)}
.control label{white-space:nowrap}
.control output{min-width:5.5ch;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{flex:1;accent-color:var(--verde);height:28px;touch-action:pan-y;cursor:pointer}
.atajos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.atajos button{cursor:pointer;font:500 .9rem var(--display);color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:4px;padding:5px 12px;touch-action:manipulation;transition:background-color var(--suave-t),border-color var(--suave-t),color var(--suave-t)}
.atajos button:hover{border-color:var(--mute);color:var(--ink)}
.atajos button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lectura{margin:14px 0 0;font-size:.98rem;color:var(--mute);min-height:4.2em}
.lectura a{white-space:nowrap}
.proyecto-destacado{min-height:492px;display:flex;flex-direction:column;justify-content:center}
.proyecto-destacado h2{font:600 clamp(1.65rem,3vw,2.35rem)/1.12 var(--texto);letter-spacing:-.025em;margin:8px 0 18px;max-width:19ch}
.proyecto-destacado>p:not(.fig-kicker){max-width:47ch;margin:0;color:var(--mute)}
.fig-kicker,.sobrelinea{font:700 .78rem/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ambar);margin:0}
.cifras-proyecto{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:34px 0}
.cifras-proyecto div{padding-top:12px;border-top:1px solid var(--line)}
.cifras-proyecto dt{font:700 clamp(1.35rem,3vw,1.8rem)/1 var(--display);color:var(--ink)}
.cifras-proyecto dd{margin:6px 0 0;color:var(--mute);font-size:.82rem;line-height:1.3}
.enlace-flecha{align-self:flex-start;font:700 .95rem var(--display)}
.enlace-flecha span{display:inline-block;transition:transform .18s var(--ease-out)}

/* Secciones */
section.bloque{padding:64px 0;border-top:1px solid var(--line)}
h2{font:700 clamp(1.6rem,3vw,2.1rem)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 8px}
.sub{color:var(--mute);margin:0 0 28px;max-width:56ch}

/* Filas: contexto a la izquierda, contenido a la derecha */
.filas{margin:24px 0 0}
.fila{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:40px;padding:26px 0;border-bottom:1px solid var(--line);transition:transform .22s ease,border-color .22s ease}
.fila:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--verde) 45%,var(--line))}
.fila:first-child{border-top:1px solid var(--line)}
.fila dt{font:700 1.2rem var(--display);letter-spacing:-.015em}
.fila dd{margin:0;max-width:62ch}
.proyecto .tipo{margin:0;font:700 1.05rem/1.35 var(--display)}
.proyecto .tipo span{font-weight:500;color:var(--mute)}
.proyecto h3{font:600 1.35rem/1.25 var(--texto);letter-spacing:-.01em;margin:0 0 10px;max-width:40ch}
.proyecto p{margin:0;max-width:62ch}
.proyecto .enlaces{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:14px;font:600 .95rem var(--display)}
.proyectos-entrada{background:color-mix(in srgb,var(--panel) 54%,transparent)}
.llamada-proyectos{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-top:10px}
.llamada-proyectos .sub{margin:12px 0 0}

/* Lo último del curso */
.curso{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
ul.ultimo{list-style:none;margin:0;padding:0}
ul.ultimo li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 10px;margin:0 -10px;border-bottom:1px solid var(--line);border-radius:8px;transition:background-color var(--suave-t),transform var(--suave-t)}
ul.ultimo li:hover{background:var(--suave);transform:translateX(4px)}
ul.ultimo li:first-child{border-top:1px solid var(--line)}
ul.ultimo a.t{font:600 1.08rem var(--display);color:var(--ink);text-decoration:none}
ul.ultimo a.t:hover{color:var(--verde);text-decoration:underline}
ul.ultimo .meta{grid-column:1;color:var(--mute);font-size:.92rem}
ul.ultimo a.sol{grid-row:1 / span 2;grid-column:2;align-self:center;font:600 .88rem var(--display)}
.mas{display:inline-block;margin-top:18px;font:600 1rem var(--display)}
.clase{border-left:3px solid var(--verde);padding:4px 0 4px 22px}
.clase h3{font:700 1.15rem/1.25 var(--display);margin:0 0 10px;letter-spacing:-.01em}
.clase p{margin:0 0 8px;font-size:1rem}
#clase-hor{white-space:pre-line;color:var(--mute)}
.clase strong{font-family:var(--display)}

/* Pie */
footer{border-top:1px solid var(--line);padding:56px 0 64px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:end}
footer h2{margin:0}
.contactos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font:600 1.05rem var(--display)}
.correo{display:inline-flex;align-items:center;gap:10px}
.copiar-correo{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 .82rem var(--display);color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:4px;padding:4px 10px;transition:color var(--suave-t),border-color var(--suave-t),background-color var(--suave-t)}
.copiar-correo svg{width:14px;height:14px}
.copiar-correo:hover{color:var(--verde);border-color:var(--verde)}
.copiar-correo.hecho{color:var(--on);background:var(--vivo);border-color:var(--vivo)}
.aviso{width:100%;color:var(--mute);font-size:.88rem;margin:8px 0 0}

@media(max-width:860px){
  .wrap{padding-left:16px;padding-right:16px}
  .barra .wrap{min-height:54px;height:auto;gap:10px}
  .nombre{font-size:.88rem;white-space:nowrap}
  .barra nav{gap:14px;font-size:.78rem}
  .barra nav a{min-height:44px}
  #tema{width:44px;height:44px}
  .portada .wrap{padding-top:36px}
  .hero-identidad h1{font-size:clamp(2.35rem,10vw,3.4rem);line-height:1;max-width:15ch}
  .hero-presentacion{margin-top:18px;font-size:1rem}
  .hero-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .hero-acciones .hero-primario{grid-column:1 / -1}
  .hero-trazo{height:72px;margin-top:5px}
  .hero-coordenadas{grid-template-columns:1fr 1fr}
  .hero-coordenadas div{padding:10px 10px 12px;border-bottom:1px solid rgba(245,242,232,.18)}
  .hero-coordenadas div:nth-child(2){border-right:0}.hero-coordenadas div:nth-child(3){padding-left:0;border-bottom:0}.hero-coordenadas div:nth-child(4){border:0}
  .wrap-lab{grid-template-columns:1fr;gap:34px;padding:58px 16px 64px}
  .lab-intro p{max-width:46ch}
  .proyecto-destacado{min-height:430px}
  .llamada-proyectos{align-items:flex-start;flex-direction:column}
  .curso{grid-template-columns:1fr;gap:32px}
  .fila{grid-template-columns:1fr;gap:6px}
  section.bloque{padding:52px 0}
}
@media(max-width:520px){.barra nav{gap:11px}.barra nav a{font-size:.74rem}.nombre{font-size:.85rem}.hero-acciones .boton{text-align:center;padding-left:10px;padding-right:10px;font-size:.86rem}.hero-coordenadas dd{font-size:.84rem}.hero-coordenadas dt{font-size:.72rem}}
@media(hover:none){
  .vitrina-panel:hover,.fila:hover,ul.ultimo li:hover{transform:none}
}
@media(hover:hover) and (pointer:fine){
  .vitrina-panel:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--verde) 45%,var(--line));box-shadow:0 24px 70px rgba(15,20,18,.13)}
  .enlace-flecha:hover span{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .hero-identidad>*{opacity:1;transform:none}
  .trazo-economia{stroke-dashoffset:0}
  .vitrina-panel:hover,.fila:hover,ul.ultimo li:hover{transform:none}
}

/* Accesibilidad */
.saltar{position:absolute;left:16px;top:-64px;z-index:20;background:var(--verde);color:var(--on);padding:10px 18px;border-radius:0 0 6px 6px;font:600 .95rem var(--display);text-decoration:none}
.saltar:focus{top:0;color:var(--on)}
#principal:focus{outline:none}
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}