/* Brando Cantillo — blanco, rojo, negro.
   Movimiento según Emil Kowalski: ease-out fuerte, respuestas <300ms, press a .97, sin animar desde 0. */
:root{
  --white:#FFFFFF;
  --paper:#F3F3F1;
  --black:#0A0A0A;
  --ink:#111111;
  --red:#E3001B;
  --red-deep:#B30016;
  --gray:#5E5E5E;
  --line:rgba(10,10,10,.12);
  --line-inv:rgba(255,255,255,.16);
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --nav:72px;
  --gut:clamp(20px,5vw,80px);
  --wrap:1280px;
  --r:18px;
}
@media (max-width:640px){:root{--nav:60px}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.skip{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.skip:focus{clip-path:none;width:auto;height:auto;left:16px;top:12px;z-index:100;background:var(--black);color:#fff;padding:10px 14px;border-radius:8px}
.measure{max-width:62ch}

/* ---------------- Navegación ---------------- */
.nav{position:fixed;inset:0 0 auto;height:var(--nav);z-index:50;display:flex;align-items:center;background:var(--white);border-bottom:1px solid var(--line);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.nav.on-dark{background:var(--black);color:#fff;border-bottom-color:var(--line-inv)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;font-stretch:115%;letter-spacing:-.02em;font-size:19px;white-space:nowrap}
.logo i{width:12px;height:12px;background:var(--red);border-radius:50%;display:block}
.menu{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:15px;font-weight:500;position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .2s var(--ease-out)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;place-items:center}
.burger span{display:block;width:16px;height:2px;background:currentColor;position:relative;transition:transform .25s var(--ease-out)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;transition:transform .25s var(--ease-out)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:900px){
  .burger{display:grid}
  .menu{position:fixed;inset:var(--nav) 0 0 0;background:var(--black);color:#fff;flex-direction:column;gap:0;padding:24px var(--gut);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease-out)}
  .menu.open{opacity:1;transform:none;pointer-events:auto}
  .menu a{display:block;font-size:34px;font-weight:800;font-stretch:112%;letter-spacing:-.02em;padding:16px 0;border-bottom:1px solid var(--line-inv)}
  .menu a::after{display:none}
  .nav .btn-nav{display:none}
}

/* ---------------- Botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font:inherit;font-weight:650;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease,border-color .2s ease;will-change:transform}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-deep)}
.btn--line{border-color:currentColor;color:inherit;background:transparent}
.btn--line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-black .btn--line:hover,.hero .btn--line:hover{background:#fff;color:var(--black);border-color:#fff}
.btn svg{width:18px;height:18px;transition:transform .2s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn-nav{height:44px;padding:0 20px;font-size:15px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){.btn-row .btn{width:100%}}

/* ---------------- Tipografía de sección ---------------- */
.sec{padding:clamp(96px,11vw,150px) 0}
.on-black{background:var(--black);color:#fff}
.on-paper{background:var(--paper)}
.on-red{background:var(--red);color:#fff}
.h2{font-weight:850;font-stretch:118%;font-size:clamp(40px,6.4vw,92px);line-height:.94;letter-spacing:-.04em;margin:0 0 28px;text-wrap:balance}
.h2 .muted{color:var(--gray)}
.on-black .h2 .muted{color:rgba(255,255,255,.5)}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--gray);margin:0;max-width:52ch}
.on-black .lead{color:rgba(255,255,255,.72)}
.on-red .lead{color:rgba(255,255,255,.9)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin:0 0 22px}
.kicker::before{content:"";width:28px;height:2px;background:var(--red)}
.on-red .kicker::before{background:#fff}

/* ---------------- HERO (inicio) ---------------- */
.hero{background:var(--black);color:#fff;min-height:100svh;padding-top:var(--nav);position:relative;overflow:hidden;display:grid}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:0;min-height:calc(100svh - var(--nav))}
.hero-copy{padding:clamp(40px,6vw,90px) 0 clamp(48px,7vw,96px);position:relative;z-index:2}
.hero h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(64px,10.4vw,176px);line-height:.84;letter-spacing:-.055em;text-transform:uppercase}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln span{display:inline-block}
.hero h1 .red{color:var(--red)}
.hero .role{font-size:clamp(26px,3vw,44px);font-weight:800;font-stretch:108%;letter-spacing:-.015em;line-height:1.05;margin:30px 0 16px;max-width:18ch}
.hero .sub{color:rgba(255,255,255,.72);font-size:clamp(17px,1.4vw,19px);max-width:46ch;margin:0 0 30px}
.hero-photo{position:relative;height:100%;min-height:520px;align-self:stretch;margin-right:calc(-1 * var(--gut));cursor:none}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-photo .bw{filter:grayscale(1) contrast(1.15) brightness(.82)}
.hero-photo .color{clip-path:circle(var(--rad,0px) at var(--mx,55%) var(--my,32%));transition:clip-path .35s var(--ease-out)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,rgba(10,10,10,0) 28%),linear-gradient(0deg,var(--black) 0%,rgba(10,10,10,0) 22%);pointer-events:none}
.lens-ring{position:absolute;left:var(--mx,55%);top:var(--my,32%);width:calc(var(--rad,0px)*2);height:calc(var(--rad,0px)*2);border:1.5px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;transition:width .35s var(--ease-out),height .35s var(--ease-out)}
.hero-hint{position:absolute;right:24px;bottom:24px;z-index:3;font-size:13px;color:rgba(255,255,255,.6)}
.scroll-cue{position:absolute;left:var(--gut);bottom:22px;font-size:13px;color:rgba(255,255,255,.55);display:flex;gap:10px;align-items:center;z-index:3}
.scroll-cue i{width:1px;height:28px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-28px;width:1px;height:28px;background:var(--red);animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{to{top:28px}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-photo{order:-1;min-height:58svh;margin:0 calc(-1 * var(--gut));cursor:auto}
  .hero-photo::after{background:linear-gradient(0deg,var(--black) 0%,rgba(10,10,10,0) 45%)}
  .hero-copy{margin-top:-120px;padding-top:0}
  .hero-hint{display:none}
  .scroll-cue{display:none}
}
/* Entrada orquestada del nombre (una sola, al cargar) */
.js .hero h1 .ln span{transform:translateY(105%)}
.js .hero .role,.js .hero .sub,.js .hero .btn-row{opacity:0;transform:translateY(16px)}
.loaded .hero h1 .ln span{transform:none;transition:transform 1s var(--ease-out)}
.loaded .hero h1 .ln:nth-child(2) span{transition-delay:.08s}
.loaded .hero .role,.loaded .hero .sub,.loaded .hero .btn-row{opacity:1;transform:none;transition:opacity .7s ease,transform .8s var(--ease-out)}
.loaded .hero .role{transition-delay:.35s}.loaded .hero .sub{transition-delay:.45s}.loaded .hero .btn-row{transition-delay:.55s}

/* ---------------- Cinta de cargos ---------------- */
.ticker{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;border-block:1px solid var(--red-deep)}
.ticker-track{display:inline-flex;gap:0;animation:tick 38s linear infinite;padding:18px 0}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-weight:850;font-stretch:120%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(22px,2.6vw,34px);padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.ticker span::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------- Escalera de cargos ---------------- */
.ladder-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:start}
.ladder-intro{position:sticky;top:calc(var(--nav) + 48px)}
.big-number{display:flex;align-items:baseline;gap:14px;margin-top:40px}
.big-number b{font-size:clamp(96px,13vw,190px);font-weight:900;font-stretch:125%;line-height:.8;letter-spacing:-.06em;color:var(--red)}
.big-number span{font-size:20px;font-weight:650;line-height:1.2;max-width:10ch}
.ladder{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.ladder::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:var(--line-inv)}
.ladder::after{content:"";position:absolute;left:8px;top:14px;width:2px;height:calc((100% - 28px) * var(--fill,0));background:var(--red)}
.rung{position:relative;padding:22px 0 26px;border-bottom:1px solid var(--line-inv)}
.rung::before{content:"";position:absolute;left:-34px;top:34px;width:18px;height:18px;border-radius:50%;background:var(--black);border:2px solid rgba(255,255,255,.35);transition:background-color .3s ease,border-color .3s ease,transform .3s var(--ease-out);z-index:1}
.rung.lit::before{background:var(--red);border-color:var(--red);transform:scale(1.1)}
.rung h3{margin:0;font-size:clamp(34px,4.6vw,64px);font-weight:850;font-stretch:118%;letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.28);transition:color .4s ease}
.rung.lit h3{color:#fff}
.rung p{margin:8px 0 0;color:rgba(255,255,255,.6);font-size:16px;max-width:44ch}
.rung.next h3{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55)}
.rung.next.lit h3{-webkit-text-stroke-color:var(--red)}
.rung.next::before{border-style:dashed}
@media (max-width:900px){.ladder-wrap{grid-template-columns:1fr}.ladder-intro{position:relative;top:0}}

/* ---------------- Cómo te ayudo ---------------- */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.help{position:relative;display:flex;flex-direction:column;min-height:560px;border-radius:var(--r);overflow:hidden;background:var(--black);color:#fff;text-decoration:none;isolation:isolate;
  transition:transform .3s var(--ease-out)}
.help:hover{transform:translateY(-4px)}
.help:active{transform:scale(.985)}
.help img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease-out),filter .5s ease;filter:grayscale(1) brightness(.6)}
.help:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.62)}
.help::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.1) 100%)}
.help .tag{margin:28px 28px 0;align-self:flex-start;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.help .body{margin-top:auto;padding:28px}
.help h3{font-size:clamp(28px,2.6vw,38px);line-height:1;font-weight:850;font-stretch:112%;letter-spacing:-.03em;margin:0 0 14px}
.help p{margin:0 0 18px;color:rgba(255,255,255,.78);font-size:16px}
.help ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:6px;font-size:15px;color:rgba(255,255,255,.85)}
.help li{display:flex;gap:10px}
.help li::before{content:"";flex:none;width:6px;height:6px;margin-top:.65em;border-radius:50%;background:var(--red)}
.help .go{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:15px}
.help .go svg{width:18px;height:18px;transition:transform .2s var(--ease-out)}
.help:hover .go svg{transform:translateX(4px)}
.help .bar{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.help:hover .bar{transform:scaleX(1)}
@media (max-width:1000px){.help-grid{grid-template-columns:1fr}.help{min-height:460px}}

/* ---------------- Quién soy ---------------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:center}
.about figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;position:relative}
.about figure img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about figure figcaption{position:absolute;left:16px;bottom:16px;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
.creds{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.creds li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.creds svg{width:28px;height:28px;color:var(--red)}
.creds b{display:block;font-size:19px;font-weight:750;letter-spacing:-.01em}
.creds span{color:var(--gray);font-size:16px}
@media (max-width:900px){.about{grid-template-columns:1fr}}

/* ---------------- Manifiesto ---------------- */
.manifesto-stage{height:240vh}
.manifesto-sticky{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:center}
.manifesto figure{margin:0;height:min(72svh,660px);border-radius:var(--r);overflow:hidden}
.manifesto figure img{width:100%;height:100%;object-fit:cover;object-position:35% 30%}
.manifesto blockquote{margin:0;font-size:clamp(26px,3.1vw,46px);line-height:1.12;font-weight:780;font-stretch:108%;letter-spacing:-.025em}
.manifesto .w{opacity:.14;transition:opacity .3s linear}
.manifesto .w.on{opacity:1}
.manifesto .w.hl.on{color:var(--red)}
.manifesto cite{display:block;font-style:normal;font-size:15px;color:rgba(255,255,255,.55);margin-top:24px}
@media (max-width:900px){.manifesto-stage{height:auto}.manifesto-sticky{position:relative;top:0;height:auto;grid-template-columns:1fr;padding:96px 0}.manifesto figure{height:420px}}

/* ---------------- Marcas construidas (marquesina grande) ---------------- */
.brands{overflow:hidden}
.brand-rail{display:flex;flex-direction:column;gap:8px;margin-top:48px}
.brand-row{display:flex;white-space:nowrap;width:max-content;animation:tick 30s linear infinite}
.brand-row.rev{animation-direction:reverse;animation-duration:36s}
.brands:hover .brand-row{animation-play-state:paused}
.brand-row span{font-size:clamp(48px,8vw,124px);font-weight:900;font-stretch:125%;letter-spacing:-.05em;line-height:1.05;text-transform:uppercase;padding-right:.5em;display:inline-flex;align-items:center;gap:.5em}
.brand-row span::after{content:"";width:.28em;height:.28em;background:var(--red);border-radius:50%}
.brand-row.rev span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.brand-row span:hover{color:var(--red);-webkit-text-stroke-color:var(--red)}

/* ---------------- Columnas (listas) ---------------- */
.col-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.post-list{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.on-black .post-list{border-color:var(--line-inv)}
.post-row{border-bottom:1px solid var(--line)}
.on-black .post-row{border-color:var(--line-inv)}
.post-row a{display:grid;grid-template-columns:160px 1fr 40px;gap:28px;align-items:center;padding:30px 0;text-decoration:none;position:relative}
.post-row a::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.post-row a:hover::before{transform:scaleX(1)}
.post-row time{font-size:14px;color:var(--gray)}
.on-black .post-row time{color:rgba(255,255,255,.5)}
.post-row h3{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);font-weight:760;font-stretch:106%;letter-spacing:-.02em;line-height:1.15}
.post-row p{margin:0;color:var(--gray);font-family:var(--serif);font-size:18px;max-width:64ch}
.on-black .post-row p{color:rgba(255,255,255,.6)}
.post-row .cat{display:inline-block;font-size:13px;font-weight:600;color:var(--red);margin-bottom:8px}
.post-row .arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:background-color .2s ease,color .2s ease,transform .25s var(--ease-out)}
.post-row .arrow svg{width:16px;height:16px}
.post-row a:hover .arrow{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-45deg)}
@media (max-width:760px){.post-row a{grid-template-columns:1fr;gap:4px}.post-row .arrow{display:none}}
.empty{padding:36px 0;color:var(--gray)}

/* ---------------- Contacto ---------------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:center}
.contact figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1.05}
.contact figure img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.contact .h2{font-size:clamp(44px,6.8vw,104px)}
.direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.direct a{font-size:15px;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);transition:background-color .2s ease,color .2s ease}
.direct a:hover{background:#fff;color:var(--red)}
@media (max-width:900px){.contact{grid-template-columns:1fr}.contact figure{aspect-ratio:4/3}}

/* ---------------- Footer ---------------- */
footer.site{background:var(--black);color:rgba(255,255,255,.7);padding:72px 0 40px;font-size:15px}
footer.site .top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-inv)}
footer.site .name{font-size:clamp(40px,6vw,88px);font-weight:900;font-stretch:125%;letter-spacing:-.05em;line-height:.9;color:#fff;text-transform:uppercase;margin:0}
footer.site .name b{color:var(--red)}
footer.site nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px;align-content:start}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:rgba(255,255,255,.45)}

/* ---------------- Revelado sutil ---------------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ---------------- Página Marketing ---------------- */
.mk-hero{background:var(--white);padding-top:var(--nav);min-height:100svh;display:grid;align-items:center;overflow:hidden}
.mk-hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center;padding:56px 0}
.mk-hero h1{margin:0 0 24px;font-weight:900;font-stretch:122%;font-size:clamp(48px,7.4vw,124px);line-height:.88;letter-spacing:-.05em;text-wrap:balance}
.mk-hero h1 em{font-style:normal;color:var(--red)}
.mk-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--red)}
.mk-photo img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.08);transition:transform .6s var(--ease-out)}
.mk-photo .sticker{position:absolute;right:16px;top:16px;background:var(--black);color:#fff;font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px}
@media (max-width:900px){.mk-hero .grid{grid-template-columns:1fr}.mk-photo{aspect-ratio:4/4.4}}

.analogy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:start}
.analogy dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line-inv)}
.analogy dl div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-inv)}
.analogy dt{font-weight:700;color:#fff}
.analogy dd{margin:0;color:rgba(255,255,255,.7)}
@media (max-width:900px){.analogy{grid-template-columns:1fr}.analogy dl div{grid-template-columns:1fr;gap:4px}}

/* Tarjetas apiladas al hacer scroll */
.stack{position:relative;margin-top:56px}
.stack-card{position:sticky;top:calc(var(--nav) + 28px + var(--i) * 18px);min-height:440px;border-radius:24px;padding:clamp(28px,4vw,56px);margin-bottom:28px;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:start;
  background:var(--white);border:1px solid var(--line);transform-origin:50% 0;box-shadow:0 -10px 40px rgba(0,0,0,.06)}
.stack-card:nth-child(2){background:var(--black);color:#fff;border-color:var(--black)}
.stack-card:nth-child(3){background:var(--red);color:#fff;border-color:var(--red)}
.stack-card:nth-child(4){background:var(--paper)}
.stack-card:nth-child(5){background:var(--black);color:#fff;border-color:var(--black)}
.stack-card .n{font-size:clamp(90px,12vw,180px);font-weight:900;font-stretch:125%;line-height:.78;letter-spacing:-.06em;color:var(--red)}
.stack-card:nth-child(3) .n{color:#fff}
.stack-card h3{font-size:clamp(32px,4vw,58px);font-weight:850;font-stretch:115%;letter-spacing:-.035em;line-height:1;margin:0 0 16px}
.stack-card p{margin:0 0 20px;font-size:18px;max-width:52ch;opacity:.85}
.stack-card ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.stack-card li{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1.5px solid currentColor;opacity:.9}
@media (max-width:760px){.stack-card{grid-template-columns:1fr;min-height:0;top:calc(var(--nav) + 16px + var(--i) * 10px)}}

/* Formatos (chips interactivos) */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.format{border:1.5px solid var(--line);border-radius:var(--r);padding:28px;background:var(--white);transition:border-color .2s ease,transform .25s var(--ease-out),background-color .2s ease;cursor:default}
.format:hover{border-color:var(--ink);transform:translateY(-3px)}
.format b{display:block;font-size:22px;font-weight:780;letter-spacing:-.015em;margin-bottom:6px}
.format span{color:var(--gray);font-size:16px}
.format i{display:block;width:36px;height:4px;background:var(--red);margin-bottom:18px;transition:width .35s var(--ease-out)}
.format:hover i{width:72px}
@media (max-width:900px){.formats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.formats{grid-template-columns:1fr}}

.legal-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,96px);align-items:center}
.legal-band figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.legal-band figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.legal-band{grid-template-columns:1fr}}

/* ---------------- Páginas de columnas ---------------- */
.page-head{padding:calc(var(--nav) + 80px) 0 40px;background:var(--black);color:#fff}
.page-head h1{font-weight:900;font-stretch:125%;font-size:clamp(56px,10vw,150px);letter-spacing:-.055em;line-height:.86;margin:0 0 22px;text-transform:uppercase}
.page-head h1 b{color:var(--red)}
.page-head .lead{color:rgba(255,255,255,.72)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.filters a{text-decoration:none;font-size:15px;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.filters a:active{transform:scale(.97)}
.filters a:hover{background:rgba(255,255,255,.1)}
.filters a[aria-current="page"]{background:var(--red);border-color:var(--red);color:#fff}

.progress{position:fixed;top:var(--nav);left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--read,0));background:var(--red);z-index:49}
.article-head{padding:calc(var(--nav) + 64px) 0 36px;max-width:900px;margin-inline:auto}
.crumbs{font-size:14px;color:var(--gray);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--red);font-weight:600}
.article-head h1{font-weight:850;font-stretch:110%;font-size:clamp(36px,5.6vw,70px);letter-spacing:-.04em;line-height:1;margin:22px 0}
.article-head .dek{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);line-height:1.45;color:var(--gray);margin:0}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:15px;color:var(--gray)}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.byline strong{color:var(--ink);display:block}
.article-layout{display:grid;grid-template-columns:220px minmax(0,680px);gap:60px;justify-content:center;padding-bottom:80px}
.toc{position:sticky;top:calc(var(--nav) + 32px);align-self:start;font-size:14px}
.toc p{margin:0 0 10px;font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;border-left:2px solid var(--line)}
.toc a{text-decoration:none;color:var(--gray);display:block;padding-left:14px;margin-left:-2px;border-left:2px solid transparent;line-height:1.35;transition:color .2s ease}
.toc a.active{color:var(--ink);border-left-color:var(--red)}
.prose{font-family:var(--serif);font-size:21px;line-height:1.72;color:#1d1d1d}
.prose h2{font-family:var(--display);font-weight:800;font-stretch:108%;font-size:32px;letter-spacing:-.025em;line-height:1.1;margin:2em 0 .6em;color:var(--ink);scroll-margin-top:calc(var(--nav) + 24px)}
.prose h3{font-family:var(--display);font-weight:700;font-size:23px;margin:1.8em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--red);text-underline-offset:3px}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:4px solid var(--red);font-size:26px;line-height:1.4;font-style:italic;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.2em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.faq{margin-top:3em;border-top:1px solid var(--line);padding-top:1.5em}
.faq h2{margin-top:0}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:var(--display);font-weight:650;font-size:19px;cursor:pointer}
.faq details p{margin:.6em 0 0}
.sources{font-family:var(--display);font-size:15px;color:var(--gray);margin-top:3em}
.share{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 0}
.share a{font-size:15px;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);transition:border-color .2s ease,transform .16s var(--ease-out)}
.share a:hover{border-color:var(--ink)}
.share a:active{transform:scale(.97)}
.author-box{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center;background:var(--paper);border-radius:var(--r);padding:26px;margin-top:50px}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.author-box p{margin:4px 0 0;color:var(--gray);font-size:16px;line-height:1.5}
@media (max-width:980px){.article-layout{grid-template-columns:minmax(0,1fr)}.toc{display:none}.prose{font-size:19px}}

/* ---------------- Movimiento reducido ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero h1 .ln span,.js .hero .role,.js .hero .sub,.js .hero .btn-row,.js .reveal{opacity:1!important;transform:none!important}
  .manifesto-stage{height:auto}.manifesto-sticky{position:relative;top:0;height:auto;padding:96px 0}
  .manifesto .w{opacity:1}
  .stack-card{position:relative;top:0}
  .brand-row{flex-wrap:wrap;width:auto;white-space:normal}
  .ladder::after{height:calc(100% - 28px)}
  .rung h3{color:#fff}
}

/* ---------------- Casos políticos (pestañas) ---------------- */
.cases{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);margin-top:56px;align-items:start}
.case-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.case-list button{all:unset;box-sizing:border-box;cursor:pointer;padding:22px 0 22px 22px;border-bottom:1px solid var(--line);font-size:clamp(22px,2.3vw,30px);font-weight:780;font-stretch:108%;letter-spacing:-.02em;line-height:1.1;position:relative;color:rgba(17,17,17,.4);transition:color .2s ease,padding-left .3s var(--ease-out)}
.case-list button small{display:block;font-size:13px;font-weight:600;letter-spacing:0;color:var(--gray);margin-bottom:6px;font-stretch:100%}
.case-list button::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease-out)}
.case-list button:hover{color:var(--ink)}
.case-list button[aria-selected="true"]{color:var(--ink);padding-left:30px}
.case-list button[aria-selected="true"]::before{transform:scaleY(1)}
.case-list button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.case-list button:active{transform:scale(.99)}
.case-panels{position:relative}
.case{background:var(--black);color:#fff;border-radius:24px;padding:clamp(28px,4vw,52px);min-height:440px}
.case:not([hidden]){animation:caseIn .45s var(--ease-out)}
@keyframes caseIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.case-office{display:inline-block;margin:0 0 18px;font-size:13px;font-weight:700;background:var(--red);padding:6px 12px;border-radius:999px}
.case h3{font-size:clamp(28px,3.2vw,44px);font-weight:850;font-stretch:112%;letter-spacing:-.03em;line-height:1.02;margin:0 0 28px;max-width:22ch}
.case dl{margin:0;display:grid}
.case dl div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line-inv)}
.case dt{font-weight:700;color:var(--red)}
.case dd{margin:0;color:rgba(255,255,255,.8)}
@media (max-width:900px){.cases{grid-template-columns:1fr}.case-list{flex-direction:row;overflow-x:auto;gap:8px;border:0;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
  .case-list button{flex:none;scroll-snap-align:start;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;font-size:18px;min-width:220px}
  .case-list button::before{display:none}.case-list button[aria-selected="true"]{padding-left:16px;border-color:var(--red);background:var(--red);color:#fff}
  .case-list button[aria-selected="true"] small{color:rgba(255,255,255,.85)}
  .case dl div{grid-template-columns:1fr;gap:4px}.case{min-height:0}}

/* ---------------- Casos de creadores ---------------- */
.creators{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.creator{border-radius:24px;padding:clamp(26px,3vw,40px);background:var(--paper);display:flex;flex-direction:column;transition:transform .3s var(--ease-out),background-color .3s ease,color .3s ease}
.creator:nth-child(2){background:var(--black);color:#fff}
.creator:nth-child(3){background:var(--red);color:#fff}
.creator:hover{transform:translateY(-4px)}
.c-name{font-size:clamp(30px,3vw,44px);font-weight:900;font-stretch:120%;letter-spacing:-.04em;line-height:1;text-transform:uppercase;margin-bottom:18px}
.c-format{font-size:15px;margin:0 0 14px;opacity:.85}
.creator > p{margin:0 0 18px;font-size:17px}
.creator ul{margin:auto 0 0;padding:18px 0 0;list-style:none;display:grid;gap:12px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.3)}
.creator li{display:flex;gap:10px;font-size:15px;line-height:1.5}
.creator li::before{content:"";flex:none;width:7px;height:7px;margin-top:.6em;border-radius:50%;background:var(--red)}
.creator:nth-child(3) li::before{background:#fff}
@media (max-width:1000px){.creators{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.case:not([hidden]){animation:none}}

.home-faq{margin-top:0;border-top:1px solid var(--line);padding-top:0}
.home-faq details{padding:20px 0}
.home-faq summary{font-size:clamp(18px,1.6vw,22px);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"+";color:var(--red);font-size:26px;line-height:1;transition:transform .25s var(--ease-out)}
.home-faq details[open] summary::after{transform:rotate(45deg)}
.home-faq p{color:var(--gray);font-size:17px;margin:12px 0 0;max-width:60ch}