/* Estilos del sitio de EF. Los tokens vienen de assets/ds/colors_and_type.css; aquí no se hardcodean colores. */

:root{
  --s-bg:var(--ef-bone);--s-fg:var(--ef-ink);--s-fg2:var(--ef-slate);--s-fg3:var(--ef-steel);
  --s-line:rgba(11,11,15,.14);--s-strong:var(--ef-ink);--s-mark:var(--ef-cyan-deep);--s-marksm:var(--ef-cyan-ink);
  --c1-bg:var(--ef-white);--c1-fg:var(--ef-ink);--c1-fg2:var(--ef-slate);--c1-line:var(--border);
  --c2-bg:var(--ef-ink);--c2-fg:var(--ef-white);--c2-fg2:var(--ef-mist);--c2-mark:var(--ef-cyan);
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:clamp(16px,4vw,48px);
}
html[data-modo="oscuro"]{
  --s-bg:var(--ef-graphite);--s-fg:var(--ef-white);--s-fg2:var(--ef-mist);--s-fg3:var(--ef-mist);
  --s-line:rgba(255,255,255,.16);--s-strong:var(--ef-white);--s-mark:var(--ef-cyan);--s-marksm:var(--ef-cyan);
  --c1-bg:var(--ef-ink);--c1-fg:var(--ef-white);--c1-fg2:var(--ef-mist);--c1-line:rgba(255,255,255,.2);
  --c2-bg:var(--ef-cyan);--c2-fg:var(--ef-ink);--c2-fg2:var(--ef-ink);--c2-mark:var(--ef-ink);
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--ef-ink);overflow-x:hidden;font-family:var(--font-sans);color:var(--ef-white)}
a{color:inherit;text-decoration:none;border-bottom:0}a:hover{color:inherit}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

#ef-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;display:block;pointer-events:none}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;height:64px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gut);background:var(--ef-ink);border-bottom:1px solid rgba(255,255,255,.12);box-sizing:border-box}
.nav .logo{display:block;line-height:0}
.nav .logo img{height:26px;width:auto;display:block}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ef-mist);transition:color 160ms var(--ease)}
.nav-links a:hover{color:var(--ef-cyan)}
.toggle{display:flex;align-items:center;gap:10px;background:transparent;color:var(--ef-white);border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:9px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all 160ms var(--ease)}
.toggle:hover{border-color:var(--ef-cyan);color:var(--ef-cyan)}
.toggle .pill{display:block;width:26px;height:14px;border:1px solid currentColor;border-radius:999px;position:relative}
.toggle .knob{position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:left 160ms var(--ease)}
html[data-modo="oscuro"] .toggle .knob{left:14px}

/* Secciones */
section{position:relative}
.sec-light{background:var(--s-bg);color:var(--s-fg);padding:clamp(72px,10vw,140px) var(--gut)}
.sec-dark{background:var(--ef-ink);color:var(--ef-white);padding:clamp(72px,10vw,140px) var(--gut)}

/* Hero */
#hero{min-height:100vh;box-sizing:border-box;background-color:var(--ef-ink);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;display:flex;align-items:flex-end;padding:120px var(--gut) 56px}
.hero-in{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ef-mist)}
.eyebrow .sl,.sl{color:var(--ef-cyan)}
h1.big{margin:0;font-size:clamp(36px,11.6vw,56px);line-height:1;letter-spacing:.02em;text-transform:uppercase;font-weight:700;color:var(--ef-white);display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:760px){h1.big{font-size:clamp(72px,8vw,120px)}}
.ab{display:grid;max-width:100%}
.ab>span{grid-area:1/1}
.ab .a1{color:var(--ef-violet-soft);opacity:.9;animation:efAbA 6s ease-in-out infinite;pointer-events:none}
.ab .a2{color:var(--ef-cyan);opacity:.9;mix-blend-mode:screen;animation:efAbB 6s ease-in-out infinite;pointer-events:none}
.ab .a3{color:var(--ef-white)}
.l2{display:flex;flex-wrap:wrap;column-gap:.28em;max-width:100%}
@keyframes efAbA{0%,100%{transform:translate(-3px,0)}50%{transform:translate(-5px,1px)}}
@keyframes efAbB{0%,100%{transform:translate(3px,0)}50%{transform:translate(5px,-1px)}}
/* Hero rotativo: todas las frases se apilan en la misma celda, así el alto es el de la más larga y nada salta */
.frases{display:grid;max-width:100%}
.frases>.fr{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;opacity:0;visibility:hidden;transition:opacity 380ms var(--ease),visibility 0s linear 380ms}
.frases>.fr.on{opacity:1;visibility:visible;transition:opacity 380ms var(--ease) 120ms,visibility 0s}
.frases>.fr.on .ab .a1{animation:efAbA 6s ease-in-out infinite,efInA .7s cubic-bezier(.2,.7,.2,1)}
.frases>.fr.on .ab .a2{animation:efAbB 6s ease-in-out infinite,efInB .7s cubic-bezier(.2,.7,.2,1)}
@keyframes efInA{from{transform:translate(-22px,0)}}
@keyframes efInB{from{transform:translate(22px,0)}}
.eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.hero-ctl{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--ef-mist)}
.hero-ctl[hidden]{display:none}
.hero-ctl button{font:inherit;letter-spacing:inherit;color:var(--ef-white);background:none;border:1px solid rgba(255,255,255,.28);padding:4px 10px;cursor:pointer;text-transform:uppercase;transition:border-color 160ms var(--ease),color 160ms var(--ease)}
.hero-ctl button:hover,.hero-ctl button:focus-visible{border-color:var(--ef-cyan);color:var(--ef-cyan)}
.hero-ctl .hf-pause{margin-left:4px;border-color:transparent;padding-left:0}
.lead-hero{margin:0;max-width:640px;font-size:clamp(18px,1.7vw,24px);font-weight:300;line-height:1.5;color:var(--ef-mist)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.hero-foot .ironia{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--ef-white)}
.link-cy{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ef-cyan);transition:color 160ms var(--ease)}
.link-cy:hover{color:var(--ef-cyan-bright)}

/* Pasos */
.pasos{border-top:2px solid var(--s-strong)}
.paso{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 32px;padding:36px 0;border-bottom:1px solid var(--s-line)}
@media (min-width:760px){.paso{grid-template-columns:96px minmax(0,1fr) minmax(0,2fr)}}
.paso .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--s-fg3);padding-top:10px}
.paso h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:700;letter-spacing:.01em}
.paso h2 .m{color:var(--s-mark)}
.paso p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--s-fg2);max-width:620px}

/* CO- */
#co{border-top:1px solid var(--s-line)}
.co-in{display:flex;flex-direction:column;gap:clamp(56px,8vw,112px)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 48px}
@media (min-width:760px){.split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-fg3)}
.lbl .m{color:var(--s-marksm)}
.col{display:flex;flex-direction:column;gap:48px}
.big-p{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.15;font-weight:700;letter-spacing:-.005em;text-wrap:balance}
.verbos{border-top:2px solid var(--s-strong)}
.verbos div{padding:18px 0;border-bottom:1px solid var(--s-line);font-size:clamp(24px,2.8vw,40px);line-height:1.1;font-weight:700;letter-spacing:.01em}
.verbos .m{color:var(--s-mark)}
.ofertas{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){.ofertas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oferta{border-radius:8px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:300px;transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.oferta:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.oferta.o1{background:var(--c1-bg);color:var(--c1-fg);border:1px solid var(--c1-line)}
.oferta.o2{background:var(--c2-bg);color:var(--c2-fg);border:1px solid var(--c2-bg)}
.oferta .top{display:flex;flex-direction:column;gap:16px}
.oferta .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.o1 .k{color:var(--ef-violet)}.o2 .k{color:var(--c2-mark)}
.oferta h3{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:700}
.o1 h3 .m{color:var(--ef-cyan-ink)}
html[data-modo="oscuro"] .o1 h3 .m{color:var(--ef-cyan)}
.oferta p{margin:0;font-size:17px;line-height:1.55}
.o1 p{color:var(--c1-fg2)}.o2 p{color:var(--c2-fg2)}
.btn{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:15px 24px;border-radius:2px;transition:all 120ms var(--ease);cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-line{border:1px solid var(--c1-fg);color:var(--c1-fg);background:transparent}
.btn-line:hover{background:var(--c1-fg);color:var(--c1-bg)}
.btn-cy{background:var(--ef-cyan);color:var(--ef-ink);border:0;padding:16px 24px}
.btn-cy:hover{background:var(--ef-cyan-bright)}
.btn-cy:active{background:var(--ef-cyan-deep)}
.glos{border-top:2px solid var(--s-strong)}
.glos .fila{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--s-line)}
@media (min-width:760px){.glos .fila{grid-template-columns:130px minmax(0,1fr) minmax(0,1.6fr)}}
.tag{justify-self:start;display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;padding:5px 10px;border-radius:2px;border:0;text-transform:uppercase}
.tag.cy,.t-ESTUDIO{background:var(--ef-cyan);color:var(--ef-ink)}
.tag.in,.t-FICCIÓN{background:var(--ef-indigo);color:var(--ef-white)}
.tag.vi,.t-TALLER{background:var(--ef-violet);color:var(--ef-white)}
.glos .e{font-size:20px;font-weight:700;line-height:1.25}
.glos .d{font-size:16px;line-height:1.55;color:var(--s-fg2)}

/* Manifiesto */
#manifiesto{background:var(--ef-ink);color:var(--ef-white);min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,10vw,140px) var(--gut)}
.mf-in{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.mf-h{margin:0;font-size:clamp(34px,5.2vw,76px);line-height:1.05;font-weight:700;letter-spacing:.005em;max-width:1000px}
.mf-sl{font-size:clamp(34px,5.2vw,76px);line-height:1;font-weight:700;color:var(--ef-cyan)}
.mf-p{margin:0;font-size:clamp(20px,2.2vw,30px);line-height:1.4;font-weight:300;max-width:860px;color:var(--ef-white)}
.mf-p.v{color:var(--ef-violet-soft)}
.mf-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;margin-top:clamp(8px,2vw,24px);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);padding:6px 0;color:var(--ef-mist);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color 160ms var(--ease),border-color 160ms var(--ease)}
.mf-btn:hover,.mf-btn:focus-visible{color:var(--ef-cyan);border-bottom-color:var(--ef-cyan);outline:none}
.mf-btn .ic{display:inline-block;width:10px;height:10px;position:relative}
.mf-btn .ic::before,.mf-btn .ic::after{content:"";position:absolute;background:currentColor;left:0;top:50%;width:10px;height:1px;transition:transform 320ms var(--ease)}
.mf-btn .ic::after{transform:rotate(90deg)}
.mf-btn[aria-expanded="true"] .ic::after{transform:rotate(0)}
.mf-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows 760ms var(--ease);scroll-margin-top:80px}
.mf-extra.open{grid-template-rows:1fr}
.mf-extra>div{overflow:hidden;min-height:0}
.mf-long{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:clamp(40px,6vw,88px) 0 clamp(8px,2vw,24px);border-top:1px solid rgba(255,255,255,.18);margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px)}
@media (min-width:900px){.mf-long{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,2.4vw,32px) 48px}.mf-long .mf-side{grid-row:1/span 20}}
.mf-side{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-mist)}
.mf-side .sl{color:var(--ef-cyan)}
.mf-long h3{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.1;font-weight:700;letter-spacing:.005em;text-wrap:balance}
.mf-long p{margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.55;font-weight:300;color:var(--ef-white);max-width:760px}
.mf-long p.fin{font-weight:700;color:var(--ef-cyan);font-size:clamp(22px,2.4vw,32px)}
.mf-long p.fin .sl{color:var(--ef-white)}
.mf-long .it{opacity:0;transform:translateY(22px);transition:opacity 620ms var(--ease),transform 620ms var(--ease);transition-delay:0ms}
.mf-extra.open .it{opacity:1;transform:none;transition-delay:calc(var(--i,0)*90ms + 240ms)}
.mf-extra:not(.open) .it{transition-duration:160ms}

/* Trabajo / mosaicos */
.trab-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:2px solid var(--s-strong);padding-bottom:24px}
.trab-head h2{margin:8px 0 0;font-size:clamp(28px,3.6vw,52px);line-height:1.1;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;padding:5px 10px;border-radius:2px;border:1px solid transparent;cursor:pointer;text-transform:uppercase;opacity:.55;transition:opacity 160ms var(--ease)}
.chip:hover,.chip.on{opacity:1}
.chip.todos{background:transparent;color:var(--s-fg);border-color:var(--s-line)}
.chip.todos.on{border-color:var(--s-strong)}
.mosaico{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}
@media (min-width:640px){.mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaico .tile:nth-child(5n+1){grid-column:span 2}}
@media (min-width:1000px){.mosaico{grid-template-columns:repeat(6,minmax(0,1fr))}.mosaico .tile{grid-column:span 2}.mosaico .tile:nth-child(5n+1){grid-column:span 4}}
.tile{display:flex;flex-direction:column;background:var(--c1-bg);color:var(--c1-fg);border:1px solid var(--c1-line);border-radius:8px;overflow:hidden;transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-2);outline:none}
.tile:is(:nth-child(5n+2),:nth-child(5n+4)){background:var(--c2-bg);color:var(--c2-fg);border-color:var(--c2-bg)}
.tile-media{height:260px;background:var(--ef-paper);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tile:nth-child(5n+1) .tile-media{height:300px}
.tile-media img{width:100%;height:100%;display:block;transition:transform 600ms var(--ease)}
.tile-media img.contain{object-fit:contain;padding:18px;box-sizing:border-box}
.tile-media img.cover{object-fit:cover}
.tile:hover .tile-media img{transform:scale(1.03)}
.tile-body{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;flex:1}
.tile-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em}
.tile .anio{color:var(--c1-fg2)}
.tile:is(:nth-child(5n+2),:nth-child(5n+4)) .anio{color:var(--c2-fg2)}
.tile h3{margin:0;font-size:clamp(20px,1.8vw,26px);line-height:1.18;font-weight:700}
.tile .res{margin:0;font-size:15px;line-height:1.5;color:var(--c1-fg2)}
.tile:is(:nth-child(5n+2),:nth-child(5n+4)) .res{color:var(--c2-fg2)}
.tile .cli{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c1-fg2)}
.tile:is(:nth-child(5n+2),:nth-child(5n+4)) .cli{color:var(--c2-fg2)}
.tile .go{font-weight:700;letter-spacing:.16em;color:var(--ef-cyan-deep)}
.tile:is(:nth-child(5n+2),:nth-child(5n+4)) .go{color:var(--ef-cyan)}
html[data-modo="oscuro"] .tile .go{color:var(--ef-cyan)}
html[data-modo="oscuro"] .tile:is(:nth-child(5n+2),:nth-child(5n+4)){background:var(--ef-cyan);color:var(--ef-ink)}
html[data-modo="oscuro"] .tile:is(:nth-child(5n+2),:nth-child(5n+4)) .anio,html[data-modo="oscuro"] .tile:is(:nth-child(5n+2),:nth-child(5n+4)) .res,html[data-modo="oscuro"] .tile:is(:nth-child(5n+2),:nth-child(5n+4)) .cli{color:var(--ef-ink)}
html[data-modo="oscuro"] .tile:is(:nth-child(5n+2),:nth-child(5n+4)) .go{color:var(--ef-ink)}
.vacio{margin-top:40px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--s-fg3);min-height:120px}

/* Cierre / contacto */
#contacto{background:var(--ef-ink);color:var(--ef-white);padding:clamp(72px,10vw,140px) var(--gut) 40px}
.cierre{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.cierre-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 48px;align-items:start}
@media (min-width:760px){.cierre-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.cierre h2{margin:0;font-size:clamp(36px,4.6vw,68px);line-height:1.04;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
.cierre .izq{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.cierre .btn-cy{padding:18px 28px}
form.f{display:flex;flex-direction:column;gap:32px}
form.f label{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-cyan)}
form.f input,form.f textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.4);color:var(--ef-white);font-family:var(--font-sans);font-size:20px;padding:8px 0;outline:none;border-radius:0;resize:vertical}
form.f input:focus,form.f textarea:focus{border-bottom-color:var(--ef-cyan)}
form.f button{align-self:flex-start;background:transparent;border:1px solid var(--ef-cyan);color:var(--ef-cyan);font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:16px 28px;border-radius:2px;cursor:pointer;transition:all 120ms var(--ease)}
form.f button:hover{background:var(--ef-cyan);color:var(--ef-ink)}
footer.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.18);padding-top:28px}
footer.pie img{height:28px;width:auto;display:block}
footer.pie span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-mist)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35)}

/* Página de caso */
.caso-hero{background-color:var(--ef-ink);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;padding:clamp(120px,14vw,180px) var(--gut) clamp(40px,5vw,64px)}
.caso-hero .wrap{display:flex;flex-direction:column;gap:28px}
.caso-hero h1{margin:0;font-size:clamp(34px,6vw,84px);line-height:1.02;letter-spacing:.015em;text-transform:uppercase;font-weight:700;color:var(--ef-white);max-width:1100px;text-wrap:balance}
.caso-hero .res{margin:0;max-width:720px;font-size:clamp(18px,1.7vw,24px);font-weight:300;line-height:1.5;color:var(--ef-mist)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px 32px;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.meta div{display:flex;flex-direction:column;gap:6px}
.meta .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-mist)}
.meta .v{font-size:17px;font-weight:700;color:var(--ef-white)}
.back{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ef-cyan);transition:color 160ms var(--ease);align-self:flex-start}
.back:hover{color:var(--ef-cyan-bright)}
.caso-body{background:var(--s-bg);color:var(--s-fg);padding:clamp(48px,7vw,96px) var(--gut) clamp(72px,10vw,140px)}
.bloque{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 48px;padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--s-line)}
.caso-body .wrap{border-top:2px solid var(--s-strong)}
@media (min-width:900px){.bloque{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.bloque h2{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.2;font-weight:700;letter-spacing:.01em}
.bloque .num{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--s-fg3);margin-bottom:10px}
.bloque .cuerpo{display:flex;flex-direction:column;gap:20px}
.bloque p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--s-fg2);max-width:700px}
.bloque ol,.bloque ul{margin:0;padding:0;list-style:none;counter-reset:li;border-top:1px solid var(--s-line);max-width:760px}
.bloque li{counter-increment:li;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--s-line);font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--s-fg2)}
.bloque li::before{content:counter(li,decimal-leading-zero);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--s-mark);padding-top:5px}
.bloque ul li::before{content:"//";font-size:13px;letter-spacing:0;font-weight:700}
.bloque .nota{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--s-fg3);max-width:700px}
figure.fig{margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
figure.fig .marco{background:var(--ef-white);border:1px solid var(--s-line);border-radius:4px;padding:clamp(8px,1.4vw,16px);display:flex;justify-content:center}
figure.fig img{display:block;max-width:100%;max-height:640px;height:auto;width:auto}
figure.fig figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--s-fg3)}
.siguiente{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:2px solid var(--s-strong);margin-top:clamp(40px,5vw,72px)}
@media (min-width:760px){.siguiente{grid-template-columns:repeat(2,minmax(0,1fr))}}
.siguiente a{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-bottom:1px solid var(--s-line);transition:color 160ms var(--ease)}
@media (min-width:760px){.siguiente a:last-child{padding-left:32px;border-left:1px solid var(--s-line);text-align:right;align-items:flex-end}}
.siguiente a:hover .t{color:var(--s-mark)}
.siguiente .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-fg3)}
.siguiente .t{font-size:clamp(18px,1.8vw,24px);font-weight:700;line-height:1.2;transition:color 160ms var(--ease)}

@media (max-width:759px){.nav-links{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* figuras Hairline incrustadas */
.tile-media iframe.hl{width:100%;height:100%;border:0;display:block;pointer-events:none}
figure.fig-hl{margin:0 0 8px}
figure.fig-hl iframe.hl{width:100%;height:clamp(300px,52vw,480px);border:1px solid var(--s-line);border-radius:4px;background:var(--ef-paper);display:block}

/* la figura va en claro sobre mosaico oscuro y en oscuro sobre mosaico claro */
.tile-media.fl{background:var(--ef-paper)}
.tile-media.fo{background:var(--ef-ink)}
html[data-modo="oscuro"] .tile-media.fl{background:var(--ef-ink)}
html[data-modo="oscuro"] .tile-media.fo{background:var(--ef-paper)}
html[data-modo="oscuro"] .tile-media iframe.hl{filter:invert(1) hue-rotate(180deg)}

/* Figuras nativas de las fichas (diagramas.py). Trazo fino, colores por token, siguen el modo claro y oscuro. */
figure.fig .marco.nat-marco{display:block;background:var(--c1-bg);color:var(--c1-fg);padding:clamp(16px,3vw,40px);container-type:inline-size}
.bloque .nat ol,.bloque .nat ul{border-top:0;max-width:none;counter-reset:none}
.bloque .nat li{counter-increment:none;display:block;grid-template-columns:none;gap:0;padding:0;border-bottom:0;font-size:15px;line-height:1.5}
.bloque .nat li::before{content:none}
.bloque .nat p{max-width:none;font-size:15px;line-height:1.5}
.nat{font-family:var(--font-sans);color:var(--c1-fg)}
.nat .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c1-fg2)}
.nat h4{margin:0;font-weight:700;font-size:clamp(16px,2vw,19px);line-height:1.2}
.nat p,.nat li{margin:0;color:var(--c1-fg2)}
.nat svg{display:block;max-width:100%;height:auto}
.nat svg .ln,.nat svg .ring,.nat svg .gr,.nat svg .ax,.nat svg .cv,.nat svg .nd,.nat svg .br{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.nat svg .ln,.nat svg .ring,.nat svg .gr{stroke:var(--c1-line)}
.nat svg .ax{stroke-width:1.25}
.nat svg .cv{stroke-width:1.5;stroke-linecap:round}
.nat svg .cv.ds{stroke-dasharray:4 4}
.nat svg .nd{fill:var(--c1-bg)}
.nat svg .mk{stroke:var(--s-mark)}
.nat svg .br.mk{fill:var(--s-mark);stroke:var(--s-mark)}
.nat svg circle.mk:not(.cv):not(.nd){fill:var(--s-mark)}
.nat svg text{font-family:var(--font-mono);font-size:8px;fill:currentColor}
.nat svg text.ej{fill:var(--c1-fg2)}

.nat-ejes{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.bloque .nat-ejes .lista{margin:0;padding:0;list-style:none;display:grid;gap:0}
.bloque .nat-ejes .lista li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:9px 0;border-top:1px solid var(--c1-line);color:var(--c1-fg)}
.bloque .nat-ejes .lista li:last-child{border-bottom:1px solid var(--c1-line)}
.nat-ejes .lista .k{padding-top:2px}

.nat-curvas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,28px)}
.nat-curvas .panel{display:flex;flex-direction:column;gap:6px}

.nat-ejes3,.nat-lineas .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
.nat-ejes3 .eje,.nat-lineas .eje{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--c1-fg)}
.nat-ejes3 .eje::before,.nat-lineas .eje::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--s-mark)}
.bloque .nat-ejes3 ul{margin:6px 0 0;padding:0;list-style:none}
.bloque .nat-ejes3 li{padding:8px 0;border-top:1px solid var(--c1-line)}
.bloque .nat-ejes3 li:first-child{border-top:0}
.nat-lineas .cab{display:flex;align-items:center;gap:14px;margin-bottom:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c1-fg2)}
.nat-lineas .tri{width:48px;flex:none;color:var(--c1-fg)}

.nat-4t .cab{padding-bottom:12px;border-bottom:1px solid var(--c1-fg);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c1-fg2)}
.bloque .nat-4t ol{margin:0;padding:0;list-style:none}
.bloque .nat-4t li{display:grid;grid-template-columns:clamp(44px,7vw,72px) 1fr;align-items:center;gap:8px;padding:16px 0;border-bottom:1px dashed var(--c1-line)}
.bloque .nat-4t li:last-child{border-bottom:0}
.nat-4t b{font-size:clamp(32px,5vw,48px);line-height:1;font-weight:700;color:var(--c1-fg)}
.bloque .nat-4t li span{color:var(--c1-fg)}

.nat-datos{display:flex;flex-direction:column;gap:18px}
.nat-datos .cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.nat-datos .cab .k{flex-basis:100%}
.nat-datos .cab>span:not(.k){font-size:15px;color:var(--c1-fg2);max-width:62ch}
.nat-datos .gran{font-size:clamp(36px,6vw,56px);line-height:1;font-weight:300;color:var(--c1-fg)}
.nat-datos .pct{display:grid;grid-template-columns:clamp(64px,10vw,96px) 1fr;grid-template-areas:"n t" ". b";gap:6px 14px;align-items:baseline}
.nat-datos .pct .n{grid-area:n;font-size:clamp(24px,3.4vw,34px);line-height:1;font-weight:300;color:var(--s-marksm)}
.nat-datos .pct .t{grid-area:t;font-size:15px;line-height:1.4;color:var(--c1-fg)}
.nat-datos .pct .bar{grid-area:b;display:block;height:5px;border:1px solid var(--c1-line);border-radius:3px;overflow:hidden}
.nat-datos .pct .bar i{display:block;height:100%;background:var(--s-mark)}
.nat-datos svg{width:100%;max-width:560px}

@container (max-width:600px){
  .nat-ejes{grid-template-columns:1fr}
  .nat-ejes svg{max-width:280px;margin:0 auto}
  .nat-ejes3,.nat-lineas .cols{grid-template-columns:1fr}
}