/* ============================================================
   LA AMENAZA LIBERTARIA — Expediente AlterLab
   Investigación visual en 4 actos · scroll-driven
   Identidad: dossier desclasificado · oscuro + bone · 4 acentos
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#0a0b10;
  --bg-2:#0c0d14;
  --panel:#12131c;
  --panel-2:#171925;
  --line:  rgba(244,241,233,.12);
  --line-2:rgba(244,241,233,.055);

  --ink:   #ece9e1;
  --bone:  #f5f1e8;
  --muted: #9a9b93;
  --muted-2:#666760;

  --c1:#e6a23c; --c1b:#ffc46b;   /* I  · Atlas    — ámbar  */
  --c2:#e6519f; --c2b:#ff86c4;   /* II · Laje     — magenta*/
  --c3:#27c6c2; --c3b:#6ceeea;   /* III· Honduras — cian   */
  --c4:#f15a3a; --c4b:#ff8567;   /* IV · Crisis   — rojo   */

  --accent: var(--bone);
  --accent-b: var(--bone);

  --f-disp:"Archivo", system-ui, sans-serif;
  --f-sans:"Archivo", system-ui, -apple-system, sans-serif;
  --f-serif:"Fraunces", Georgia, serif;
  --f-mono:"Space Mono", ui-monospace, monospace;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(15px,1.04vw,17px); line-height:1.62; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }
canvas{ display:block }
em{ font-style:italic }
::selection{ background:var(--accent); color:#0a0b10 }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{ font-family:var(--f-disp); font-weight:800; line-height:1.02; letter-spacing:-.02em }
.mono{ font-family:var(--f-mono); font-weight:400 }
.center{ text-align:center }
.dim{ color:var(--muted-2) }
.hl{ color:var(--bone); position:relative; white-space:nowrap }
.c1{ color:var(--c1b) } .c2{ color:var(--c2b) } .c3{ color:var(--c3b) } .c4{ color:var(--c4b) }

.kick{
  font-family:var(--f-mono); font-size:.74rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em; margin-bottom:1.1em;
}
.kick::before{ content:"//"; opacity:.8 }
.kick.center{ display:flex; justify-content:center }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,64px) }

/* ---------- Ambiente ---------- */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; mix-blend-mode:overlay;
}
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-4%,2%)} 50%{transform:translate(3%,-4%)} 75%{transform:translate(-2%,3%)} 100%{transform:translate(0,0)} }
.vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.45));
  mix-blend-mode:multiply;
}

/* Cursor follower */
.cursor{ position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--accent);
  border-radius:50%; transform:translate(-50%,-50%); z-index:9000; pointer-events:none;
  transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s; opacity:0;
  mix-blend-mode:difference; }
.cursor.on{ opacity:.8 }
.cursor.tap{ width:54px; height:54px; background:rgba(245,241,232,.08) }
@media (hover:none){ .cursor{ display:none } }

/* ============ Preloader ============ */
#load{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease),visibility .8s; }
#load.done{ opacity:0; visibility:hidden }
.load__inner{ width:min(80vw,360px); text-align:center }
.load__seal{ width:84px; height:84px; margin:0 auto 26px; color:var(--bone) }
.load__seal .ls-ring{ fill:none; stroke:var(--line); stroke-width:1.5 }
.load__seal .ls-ring2{ fill:none; stroke:var(--c1); stroke-width:1.5; stroke-dasharray:4 6; transform-origin:center; animation:spin 9s linear infinite }
.load__seal .ls-a,.load__seal .ls-bar{ fill:none; stroke:var(--bone); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:120; stroke-dashoffset:120; animation:draw 1.6s var(--ease) forwards }
.load__seal .ls-bar{ animation-delay:.5s; stroke-dasharray:30; stroke-dashoffset:30 }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes spin{ to{ transform:rotate(360deg) } }
.load__txt{ display:flex; align-items:baseline; justify-content:space-between; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.load__pct{ color:var(--bone); font-size:.9rem }
.load__bar{ margin-top:12px; height:2px; background:var(--line); overflow:hidden }
.load__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4)) }

/* ============ HUD ============ */
.hud{ position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px); transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease);
  border-bottom:1px solid transparent; transform:translateY(-110%); }
.hud.show{ transform:translateY(0) }
.hud.scrolled{ background:rgba(10,11,16,.72); backdrop-filter:blur(14px); border-color:var(--line-2) }
.hud__brand{ display:flex; align-items:center; gap:11px; min-width:0 }
.hud__seal{ width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,var(--accent),transparent 70%); position:relative }
.hud__seal::after{ content:""; position:absolute; inset:7px; border-radius:50%; border:1.5px solid var(--accent); opacity:.7 }
.hud__brandtx{ display:flex; flex-direction:column; line-height:1.1; min-width:0 }
.hud__brandtx b{ font-family:var(--f-disp); font-weight:800; font-size:.82rem; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hud__brandtx small{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2) }
.hud__act{ display:flex; align-items:center; gap:10px; margin-left:auto; padding-right:8px }
.hud__num{ font-family:var(--f-mono); font-size:.7rem; color:var(--accent); border:1px solid var(--line); border-radius:6px; padding:3px 8px }
.hud__title{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.hud__menu{ display:none; font-size:1.15rem; color:var(--ink); width:40px; height:40px; place-items:center }

/* ============ Spine (índice lateral) ============ */
.spine{ position:fixed; right:max(18px,2vw); top:50%; transform:translateY(-50%); z-index:480;
  display:flex; flex-direction:column; gap:2px; padding:10px 0; }
.spine::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); transform:translateX(-50%); z-index:-1 }
.spine__node{ display:flex; align-items:center; gap:12px; justify-content:flex-end; padding:9px 0; position:relative; color:var(--muted-2); transition:color .3s }
.spine__rn{ font-family:var(--f-mono); font-size:.66rem; width:18px; text-align:center }
.spine__node::after{ content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted-2); background:var(--bg); transition:.3s var(--ease) }
.spine__lb{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:0; transform:translateX(8px);
  transition:.3s var(--ease); white-space:nowrap; pointer-events:none }
.spine__node:hover{ color:var(--c) } .spine__node:hover .spine__lb{ opacity:1; transform:translateX(0) }
.spine__node:hover::after{ border-color:var(--c) }
.spine__node.active{ color:var(--c) }
.spine__node.active::after{ background:var(--c); border-color:var(--c); box-shadow:0 0 14px var(--c); transform:scale(1.25) }
.spine__node.active .spine__lb{ opacity:1; transform:translateX(0) }

/* ============ Sheet (índice móvil) ============ */
.sheet{ position:fixed; inset:0; z-index:600; background:rgba(8,9,13,.92); backdrop-filter:blur(16px);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:clamp(24px,8vw,60px);
  opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s }
.sheet.open{ opacity:1; visibility:visible }
.sheet__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color:var(--muted) }
.sheet__head button{ font-size:1.3rem; color:var(--ink) }
.sheet a{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid var(--line-2);
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.3rem,5vw,2rem); color:var(--ink); transition:color .25s }
.sheet a span{ font-family:var(--f-mono); font-size:.8rem; color:var(--c,var(--muted)); width:32px; flex:none }
.sheet a:hover{ color:var(--c,var(--bone)) }
.sheet__home{ margin-top:14px; font-size:1rem !important; color:var(--muted) !important; font-family:var(--f-mono) !important; font-weight:400 !important }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-block:90px }
.hero__net{ position:absolute; inset:0; z-index:0; width:100%; height:100% }
.hero__grad{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(230,162,60,.10), transparent 60%),
    radial-gradient(55% 55% at 12% 88%, rgba(39,198,194,.10), transparent 60%),
    radial-gradient(50% 40% at 92% 92%, rgba(241,90,58,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,11,16,.45), rgba(10,11,16,.20) 38%, var(--bg)); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,64px) }
.hero__top{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:30px }
.stamp{ font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c4b); border:1px solid color-mix(in srgb,var(--c4) 50%,transparent); padding:7px 13px; border-radius:6px;
  position:relative; transform:rotate(-1.5deg); background:color-mix(in srgb,var(--c4) 9%,transparent) }
.hero__meta{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.hero__title{ font-family:var(--f-disp); font-weight:900; font-size:clamp(2.9rem,11.5vw,9.5rem); line-height:.9;
  letter-spacing:-.045em; color:var(--bone); margin:0 0 .35em -.02em }
.hero__title .ln{ display:block; overflow:hidden }
.hero__title .ln:last-child{ color:transparent; -webkit-text-stroke:1.4px var(--bone); position:relative }
.hero__dek{ font-family:var(--f-serif); font-weight:400; font-size:clamp(1.15rem,2.4vw,1.85rem); line-height:1.45;
  color:var(--ink); max-width:30ch; margin-bottom:clamp(34px,5vw,54px) }
.hero__dek em{ color:var(--bone); font-style:italic }
.hero__legend{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:920px }
.lg{ display:flex; align-items:center; gap:13px; padding:16px 18px; background:rgba(15,16,23,.78); backdrop-filter:blur(6px);
  position:relative; transition:background .35s var(--ease) }
.lg::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--c); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease) }
.lg:hover{ background:rgba(22,24,33,.9) } .lg:hover::before{ transform:scaleY(1) }
.lg__rn{ font-family:var(--f-disp); font-weight:900; font-size:1.5rem; color:var(--c); line-height:1; flex:none }
.lg__tx{ display:flex; flex-direction:column; line-height:1.2; min-width:0 }
.lg__tx b{ font-family:var(--f-disp); font-weight:700; font-size:.92rem }
.lg__tx small{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.hero__cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column;
  align-items:center; gap:10px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.hero__cue-ln{ width:1px; height:42px; background:var(--line); position:relative; overflow:hidden }
.hero__cue-ln i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--bone); animation:cue 2s var(--ease-io) infinite }
@keyframes cue{ 0%{ top:-50% } 60%,100%{ top:100% } }

/* ============ INTRO / MANIFIESTO ============ */
.intro{ position:relative; padding-block:clamp(80px,14vh,170px) }
.intro__lead{ font-family:var(--f-serif); font-weight:400; font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:1.16;
  letter-spacing:-.015em; color:var(--bone); max-width:18ch; margin-bottom:1.4em }
.intro__lead .hl{ font-style:italic; color:var(--c2b) }
.intro__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); max-width:980px; margin-left:auto }
.intro__cols p{ color:var(--muted); font-size:1.04rem }
.intro__cols p b{ color:var(--ink); font-weight:600 }
.intro__cols em{ color:var(--bone) }

.tactics{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:clamp(46px,6vw,84px) }
.tac{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 18px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s }
.tac::before{ content:""; position:absolute; left:0; top:0; right:0; height:2px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease) }
.tac:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 40%,transparent) } .tac:hover::before{ transform:scaleX(1) }
.tac svg{ width:1.55rem; height:1.55rem; color:var(--c); display:block; margin-bottom:14px }
.tac b{ display:block; font-family:var(--f-disp); font-weight:700; font-size:1.02rem; margin-bottom:6px }
.tac span{ font-size:.82rem; color:var(--muted); line-height:1.45 }
.intro__tag{ margin-top:42px; font-size:.82rem; letter-spacing:.04em; color:var(--muted-2); text-align:center }

/* ============ ACT (compartido) ============ */
.act{ position:relative; padding-block:clamp(70px,11vh,150px) }
.act{ --accent:var(--bone) }
.act--1{ --accent:var(--c1); --accent-b:var(--c1b) }
.act--2{ --accent:var(--c2); --accent-b:var(--c2b) }
.act--3{ --accent:var(--c3); --accent-b:var(--c3b) }
.act--4{ --accent:var(--c4); --accent-b:var(--c4b) }
/* tinte de fondo por acto */
.act::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(80% 50% at 50% 0%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 70%) }

.act__open{ display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,54px); align-items:start; margin-bottom:clamp(48px,7vw,96px) }
.act__rn{ position:sticky; top:120px }
.act__rn span{ display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(4rem,12vw,11rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px var(--accent); opacity:.55 }
.act__kick{ display:block; font-family:var(--f-mono); font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-b); margin-bottom:18px }
.act__title{ font-family:var(--f-disp); font-weight:900; font-size:clamp(2.6rem,7.5vw,6.4rem); line-height:.94; letter-spacing:-.035em; color:var(--bone) }
.act__title .ln{ display:block; overflow:hidden }
.act__sub{ font-family:var(--f-serif); font-size:clamp(1.1rem,2vw,1.5rem); line-height:1.45; color:var(--ink); max-width:46ch; margin-top:.9em }
.act__tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px }
.ttag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-b);
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent); background:color-mix(in srgb,var(--c) 9%,transparent);
  padding:6px 11px; border-radius:100px }
.ttag::before{ content:"⌁ "; opacity:.7 }

/* kicks/headings dentro de actos heredan el acento */
.act .kick{ color:var(--accent-b) }
.act h3{ font-size:clamp(1.5rem,3.3vw,2.7rem); line-height:1.04; color:var(--bone); letter-spacing:-.025em }
.act h3 .c1,.act h3 .c2,.act h3 .c3,.act h3 .c4{ color:var(--accent-b) }

/* pull quote compartido */
.pull{ margin:clamp(40px,6vw,80px) auto 0; max-width:30ch; text-align:center; padding:0 20px }
.pull p{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.22; color:var(--bone) }
.pull p::before{ content:"“"; color:var(--c) } .pull p::after{ content:"”"; color:var(--c) }
.pull cite{ display:block; margin-top:18px; font-family:var(--f-mono); font-size:.74rem; font-style:normal; letter-spacing:.04em; color:var(--muted) }

/* ============ Voz del cronista (narrativa literaria) ============ */
.chronicle{ max-width:64ch; position:relative; padding-left:clamp(18px,2.4vw,32px) }
.chronicle::before{ content:""; position:absolute; left:0; top:.55em; bottom:.4em; width:2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 8%,transparent)) }
.chronicle p{ font-family:var(--f-serif); font-weight:400; font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.62; color:var(--ink) }
.chronicle p + p{ margin-top:1.05em }
.chronicle em{ font-style:italic; color:var(--bone) }
.chronicle b,.chronicle strong{ color:var(--bone); font-weight:600 }
.chronicle--lead{ margin-bottom:clamp(46px,6vw,86px) }
.chronicle--lead p:first-child{ font-size:clamp(1.34rem,2.4vw,1.95rem); line-height:1.34; color:var(--bone); margin-bottom:.65em }
.chronicle--center{ max-width:58ch; margin:0 auto clamp(28px,4vw,46px); padding-left:0; text-align:center }
.chronicle--center::before{ left:50%; top:-26px; bottom:auto; width:34px; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--accent),transparent) }
/* puente de transición entre fases */
.chronicle--bridge{ max-width:54ch; margin:clamp(46px,6vw,84px) auto 0; padding-left:0; text-align:center }
.chronicle--bridge::before{ left:50%; top:-30px; bottom:auto; width:1px; height:42px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--accent)) }
.chronicle--bridge p{ font-style:italic; font-size:clamp(1.08rem,1.6vw,1.32rem); color:var(--ink) }
.chronicle--bridge em{ font-style:normal; color:var(--accent-b) }

/* ============ EXP I · Origin timeline ============ */
.origin{ position:relative; margin-bottom:clamp(60px,9vw,110px) }
.origin__line{ position:absolute; left:0; right:0; top:26px; height:1px; background:var(--line) }
.origin__line i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c1),transparent); }
.origin__steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px) }
.origin__steps li{ position:relative; padding-top:54px }
.origin__steps li::before{ content:""; position:absolute; left:0; top:21px; width:11px; height:11px; border-radius:50%; background:var(--c1); box-shadow:0 0 0 5px color-mix(in srgb,var(--c1) 18%,transparent) }
.origin__y{ position:absolute; top:0; left:22px; font-family:var(--f-mono); font-weight:700; font-size:1rem; color:var(--c1b) }
.origin__steps p{ color:var(--muted); font-size:.96rem }
.origin__steps b{ color:var(--ink); font-weight:600 } .origin__steps em{ color:var(--bone); font-style:italic }

/* ============ EXP I · Expansión + dotgrid ============ */
.expand{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; margin-bottom:clamp(60px,9vw,120px) }
.expand__txt p{ color:var(--muted) } .expand__txt b{ color:var(--ink); font-weight:600 }
.expand h3{ margin:.4em 0 .7em }
.expand__nums{ display:flex; gap:clamp(20px,3vw,40px); margin-top:30px; flex-wrap:wrap }
.bignum b{ display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(2rem,4vw,3.2rem); line-height:1; color:var(--c1b) }
.bignum span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-top:8px; display:block }
.expand__grid{ position:relative }
.dotgrid{ display:grid; grid-template-columns:repeat(25,1fr); gap:6px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel) }
.dotgrid i{ width:100%; aspect-ratio:1; border-radius:50%; background:var(--muted-2); opacity:.22; transition:opacity .5s var(--ease),background .5s,box-shadow .5s }
.dotgrid i.on{ opacity:1; background:var(--c1); box-shadow:0 0 6px color-mix(in srgb,var(--c1) 70%,transparent) }
.dotgrid__cap{ display:block; margin-top:12px; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); text-align:center }

/* ============ EXP I · Flow map ============ */
.flow{ margin-bottom:clamp(40px,7vw,90px) }
.flow__h{ margin:.3em auto 0; max-width:20ch }
.flowmap{ position:relative; width:100%; aspect-ratio:1000/460; margin:clamp(30px,5vw,54px) 0; min-height:320px }
.flowmap__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.fm-link{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); opacity:.5 }
.fm-link.draw{ animation:fmdraw 1.4s var(--ease) forwards }
@keyframes fmdraw{ to{ stroke-dashoffset:0 } }
.fm-node{ position:absolute; transform:translate(-50%,-50%); text-align:center; background:rgba(14,15,22,.92);
  border:1px solid var(--line); border-radius:10px; padding:9px 13px; width:max-content; max-width:170px; backdrop-filter:blur(4px) }
.fm-node b{ display:block; font-family:var(--f-disp); font-weight:700; font-size:.82rem; color:var(--ink); line-height:1.1 }
.fm-node span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.02em; color:var(--muted-2) }
.fm-don{ border-color:color-mix(in srgb,var(--c1) 22%,transparent) }
.fm-dark{ border-color:color-mix(in srgb,var(--c1) 55%,transparent); box-shadow:0 0 26px -8px var(--c1) }
.fm-dark b{ color:var(--c1b) }
.fm-sat{ border-color:var(--line-2) }
.fm-hub{ width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px solid var(--c1); background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--c1) 22%,transparent), rgba(14,15,22,.95) 70%);
  box-shadow:0 0 50px -10px var(--c1); padding:0 }
.fm-hub__seal{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; color:var(--c1b); opacity:.8 }
.fm-hub b{ font-size:1.05rem; color:var(--bone) }
.flow__note{ max-width:64ch; margin:0 auto; text-align:center; font-size:.8rem; color:var(--muted-2); line-height:1.6 }

/* ============ EXP I · Nodo mexicano ============ */
.mxnode{ background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c1) 5%,transparent),transparent); padding-block:clamp(40px,6vw,80px); border-block:1px solid var(--line-2) }
.mxnode__head{ max-width:60ch; margin-bottom:clamp(30px,4vw,52px) }
.mxnode__head h3{ margin:.3em 0 .6em } .mxnode__head p{ color:var(--muted) } .mxnode__head b{ color:var(--ink); font-weight:600 }
.mxgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.mxc{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:.4s var(--ease) }
.mxc:hover{ border-color:color-mix(in srgb,var(--c1) 40%,transparent); transform:translateY(-4px) }
.mxc__k{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c1b) }
.mxc h4{ font-size:1.25rem; margin:10px 0 12px; color:var(--bone) }
.mxc p{ color:var(--muted); font-size:.92rem } .mxc b{ color:var(--ink); font-weight:600 }

/* ============ EXP II · Laje ============ */
.laje{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,64px); align-items:center; margin-bottom:clamp(56px,8vw,110px) }
.laje__txt h3{ margin:.3em 0 .7em } .laje__txt p{ color:var(--muted) }
.laje__txt b{ color:var(--ink); font-weight:600 } .laje__txt em{ color:var(--bone); font-style:italic }
.laje__books{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px }
.laje__books span{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); padding:7px 12px; border:1px solid var(--line); border-radius:7px;
  position:relative; padding-left:24px }
.laje__books span::before{ content:"\F02A"; font-family:"bootstrap-icons"; position:absolute; left:9px; color:var(--c2b); font-size:.7rem }
.idcard{ background:var(--panel); border:1px solid color-mix(in srgb,var(--c2) 30%,transparent); border-radius:16px; padding:24px;
  position:relative; overflow:hidden }
.idcard::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent,transparent 18px,color-mix(in srgb,var(--c2) 4%,transparent) 18px,color-mix(in srgb,var(--c2) 4%,transparent) 19px); pointer-events:none }
.idcard__top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.idcard__dot{ width:8px; height:8px; border-radius:50%; background:var(--c2); box-shadow:0 0 10px var(--c2) }
.idcard__face{ width:74px; height:74px; border-radius:12px; margin:18px 0; display:grid; place-items:center; font-size:2.4rem; color:var(--c2b);
  background:color-mix(in srgb,var(--c2) 14%,transparent); border:1px solid color-mix(in srgb,var(--c2) 30%,transparent) }
.idcard h4{ font-size:1.4rem; color:var(--bone); margin-bottom:14px }
.idcard ul{ list-style:none; display:flex; flex-direction:column; gap:0 }
.idcard li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line-2); font-size:.84rem }
.idcard li span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2) }
.idcard li b{ color:var(--ink); font-weight:600; text-align:right }

/* ============ EXP II · Faro ============ */
.faro{ background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c2) 6%,transparent),transparent); padding-block:clamp(50px,7vw,96px); border-block:1px solid var(--line-2); margin-bottom:clamp(50px,8vw,100px) }
.faro__h{ margin:.2em auto 0; max-width:22ch } .faro__sub{ max-width:62ch; margin:1.1em auto 0; color:var(--muted) }
.faro__chart{ max-width:760px; margin:clamp(40px,5vw,60px) auto 0; position:relative }
.fc-row{ display:grid; grid-template-columns:130px 1fr auto; gap:16px; align-items:center; margin-bottom:14px }
.fc-lb{ font-size:.72rem; color:var(--muted); text-align:right }
.fc-track{ height:14px; background:var(--panel); border:1px solid var(--line); border-radius:100px; overflow:hidden }
.fc-bar{ display:block; height:100%; width:0; border-radius:100px; transition:width 1.4s var(--ease) }
.fc-bar--a{ background:var(--muted-2) }
.fc-bar--b{ background:linear-gradient(90deg,var(--c2),var(--c2b)); box-shadow:0 0 24px -4px var(--c2) }
.fc-row--big .fc-track{ height:26px }
.fc-v{ font-family:var(--f-mono); font-weight:700; font-size:.84rem; color:var(--ink); min-width:64px }
.fc-row--big .fc-v{ color:var(--c2b); font-size:1rem }
.fc-mult{ text-align:center; margin-top:26px }
.fc-mult b{ display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(3rem,8vw,5.5rem); line-height:1; color:var(--c2b);
  text-shadow:0 0 50px color-mix(in srgb,var(--c2) 45%,transparent) }
.fc-mult span{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.faro__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:920px; margin:clamp(40px,5vw,56px) auto 0 }
.fstat{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 20px; text-align:center }
.fstat b{ display:block; font-family:var(--f-disp); font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--bone); margin-bottom:8px }
.fstat span{ font-size:.82rem; color:var(--muted); line-height:1.45 }

/* ============ EXP II · Milicias ============ */
.militia{ margin-bottom:clamp(50px,8vw,100px) }
.militia h3{ margin:.2em 0 1.2em }
.militia__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.milc{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3vw,32px); transition:.4s var(--ease) }
.milc:hover{ border-color:color-mix(in srgb,var(--c2) 35%,transparent) }
.milc header{ display:flex; align-items:center; gap:14px; margin-bottom:14px }
.milc__flag{ font-size:1.6rem; filter:saturate(1.1) }
.milc h4{ font-size:1.4rem; color:var(--bone) }
.milc p{ color:var(--muted); font-size:.94rem; margin-bottom:20px }
.milc__data{ display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid var(--line-2); padding-top:18px }
.milc__data b{ display:block; font-family:var(--f-disp); font-weight:800; font-size:1.15rem; color:var(--c2b); line-height:1.1; margin-bottom:5px }
.milc__data span{ font-size:.76rem; color:var(--muted) }

/* ============ EXP II · Covid ============ */
.covid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px); align-items:center; margin-bottom:clamp(50px,8vw,100px) }
.covid__txt h3{ margin:.3em 0 .6em } .covid__txt p{ color:var(--muted) }
.cbar{ display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:16px }
.cbar__l{ font-size:.84rem; color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.cbar__l small{ font-family:var(--f-mono); font-size:.66rem; color:var(--muted-2); text-transform:none }
.cbar i{ display:block; height:34px; width:0; border-radius:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--c2) 55%,#3a2030),var(--c2));
  position:relative; transition:width 1.2s var(--ease); display:flex; align-items:center; justify-content:flex-end }
.cbar i b{ font-family:var(--f-mono); font-weight:700; font-size:.78rem; color:var(--bone); padding-right:10px }
.covid__cap{ display:block; margin-top:8px; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2) }

/* ============ EXP II · Tipología ============ */
.typo h3{ margin:.2em 0 1.2em }
.typo__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.tcard{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 20px; transition:.4s var(--ease) }
.tcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c2) 35%,transparent) }
.tcard__fl{ font-size:1.5rem; display:block; margin-bottom:14px }
.tcard h4{ font-size:1.1rem; color:var(--bone) }
.tcard__role{ display:block; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c2b); margin:7px 0 12px }
.tcard p{ font-size:.86rem; color:var(--muted) }

/* ============ EXP III · Trigger ============ */
.trigger{ margin-bottom:clamp(50px,8vw,100px) }
.trigger__card{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,3vw,40px); align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,4vw,44px) }
.trigger__l .mono,.trigger__r .mono{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.trigger__l h3,.trigger__r h3{ font-size:clamp(1.4rem,3vw,2.1rem); margin:8px 0 12px; color:var(--bone) }
.trigger__r h3{ color:var(--c3b) }
.trigger p{ color:var(--muted); font-size:.92rem } .trigger b{ color:var(--ink); font-weight:600 }
.trigger__arrow{ font-size:1.6rem; color:var(--c3); display:grid; place-items:center }
.trigger__arrow i{ animation:nudge 1.8s var(--ease) infinite }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }

/* ============ EXP III · Actores ============ */
.actors{ margin-bottom:clamp(50px,8vw,100px) }
.actors h3{ margin:.2em 0 1.2em }
.actors__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
.dossier{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 18px; position:relative; transition:.4s var(--ease) }
.dossier:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c3) 40%,transparent) }
.dossier__hd{ display:flex; justify-content:space-between; align-items:center; color:var(--c3b); margin-bottom:14px }
.dossier__hd i{ font-size:1.2rem } .dossier__hd .mono{ font-size:.66rem; color:var(--muted-2) }
.dossier h4{ font-size:1.02rem; color:var(--bone); line-height:1.1 }
.dossier__role{ font-family:var(--f-mono); font-size:.64rem; color:var(--c3b); margin:6px 0 10px; letter-spacing:.02em }
.dossier p:last-child{ font-size:.82rem; color:var(--muted) }

/* ============ EXP III · Audios interceptados ============ */
.intercepts{ background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c3) 5%,transparent),transparent); padding-block:clamp(50px,7vw,96px); border-block:1px solid var(--line-2); margin-bottom:clamp(50px,8vw,100px) }
.intercepts__h{ margin:.2em auto 0; max-width:24ch }
.ic-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:clamp(36px,5vw,52px) auto 0 }
.ic{ background:rgba(8,14,15,.6); border:1px solid color-mix(in srgb,var(--c3) 20%,transparent); border-radius:14px; padding:22px 24px; position:relative; overflow:hidden }
.ic::before{ content:"REC"; position:absolute; top:14px; right:18px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; color:var(--c3b);
  display:flex; align-items:center; gap:6px }
.ic::after{ content:""; position:absolute; top:15px; right:46px; width:7px; height:7px; border-radius:50%; background:var(--c3); animation:rec 1.4s steps(1) infinite }
@keyframes rec{ 50%{ opacity:.2 } }
.ic__wave{ display:flex; align-items:center; gap:2px; height:38px; margin-bottom:18px; opacity:.9 }
.ic__wave i{ flex:1; min-width:2px; background:var(--c3); border-radius:2px; height:var(--h,30%); opacity:.55; transform-origin:center;
  animation:wv 1.3s var(--ease-io) infinite alternate; animation-delay:var(--d,0s) }
.ic.playing .ic__wave i{ opacity:.9 }
@keyframes wv{ to{ transform:scaleY(1.5) } }
.ic blockquote{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.32; color:var(--bone); margin-bottom:16px }
.ic figcaption{ display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line-2); padding-top:12px }
.ic figcaption b{ font-family:var(--f-disp); font-weight:700; font-size:.92rem; color:var(--c3b) }
.ic figcaption .mono{ font-size:.66rem; color:var(--muted) }

/* ============ EXP III · Célula / dinero ============ */
.cell{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center; margin-bottom:clamp(50px,8vw,100px) }
.cell__txt h3{ margin:.3em 0 .6em } .cell__txt p{ color:var(--muted) } .cell__txt b{ color:var(--ink); font-weight:600 }
.cell__money{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px }
.mrow{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line-2) }
.mrow:first-child{ border-top:0 }
.mrow__src{ font-size:.9rem; color:var(--ink) }
.mrow__amt{ font-family:var(--f-disp); font-weight:800; font-size:1.4rem; color:var(--c3b) }
.mrow--ghost .mrow__amt{ color:var(--muted-2); -webkit-text-stroke:0 }
.mrow--ghost .mrow__src{ color:var(--muted) }
.mrow__to{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); font-size:.78rem; letter-spacing:.04em; color:var(--c3b); text-align:right }

/* ============ EXP III · Lo vendido ============ */
.sold{ margin-bottom:clamp(50px,8vw,100px) }
.sold h3{ margin:.2em 0 1.1em }
.sold__list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px }
.sold__list li{ display:flex; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 24px; transition:.4s var(--ease) }
.sold__list li:hover{ border-color:color-mix(in srgb,var(--c3) 35%,transparent) }
.sold__list i{ font-size:1.4rem; color:var(--c3b); flex:none; margin-top:3px }
.sold__list b{ display:block; font-family:var(--f-disp); font-weight:700; font-size:1.05rem; color:var(--bone); margin-bottom:6px }
.sold__list span{ font-size:.86rem; color:var(--muted); line-height:1.5 }

/* ============ EXP III · Forense ============ */
.forensic h3{ margin:.2em auto 0; max-width:22ch }
.forensic__cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; margin:clamp(34px,5vw,48px) auto 0 }
.fcol{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px 26px }
.fcol--yes{ border-color:color-mix(in srgb,var(--c3) 30%,transparent) }
.fcol--no{ border-color:color-mix(in srgb,#9a9b93 22%,transparent) }
.fcol__tag{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:16px }
.fcol--yes .fcol__tag{ color:var(--c3b) }
.fcol__meter{ height:8px; background:var(--bg); border-radius:100px; overflow:hidden; margin-bottom:18px }
.fcol__meter i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--c3),var(--c3b)); transition:width 1.3s var(--ease) }
.fcol__meter--no i{ background:linear-gradient(90deg,#5a5b54,#9a9b93) }
.fcol p{ color:var(--muted); font-size:.92rem } .fcol b{ color:var(--ink); font-weight:600 } .fcol i+p{ } .fcol p i{ font-style:italic }
.forensic__note{ max-width:64ch; margin:clamp(30px,4vw,42px) auto 0; text-align:center; font-size:1rem; color:var(--muted); line-height:1.6 }
.forensic__note b{ color:var(--bone) } .forensic__note i{ font-style:italic; color:var(--ink) }

/* ============ EXP IV · Dashboard ============ */
.dash{ margin-bottom:clamp(50px,8vw,100px) }
.dash__tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:18px }
.dtab{ display:flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:.84rem; color:var(--muted);
  padding:11px 18px; border:1px solid var(--line); border-radius:100px; transition:.3s var(--ease) }
.dtab small{ font-size:.72rem; opacity:.7 }
.dtab__fl{ font-size:1.1rem }
.dtab:hover{ color:var(--ink); border-color:var(--line) }
.dtab.is-active{ color:#0a0b10; background:var(--c4); border-color:var(--c4); font-weight:700 }
.dtab.is-active small{ color:#0a0b10; opacity:.75 }
.dpanel{ display:none; animation:fade .5s var(--ease) }
.dpanel.is-active{ display:block }
@keyframes fade{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.dpanel__lead{ max-width:60ch; margin-bottom:30px }
.dpanel__lead h3{ font-size:clamp(1.6rem,3.4vw,2.6rem) } .dpanel__lead .c4{ color:var(--c4b) }
.dpanel__lead p{ color:var(--muted); margin-top:.6em }
.dgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px }
.dstat{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 22px }
.dstat b{ display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1; color:var(--c4b); margin-bottom:12px }
.dstat span{ font-size:.84rem; color:var(--muted); line-height:1.45 }
.dstat--alarm{ border-color:color-mix(in srgb,var(--c4) 40%,transparent); background:color-mix(in srgb,var(--c4) 7%,var(--panel)) }
.dledger{ background:var(--bg-2); border:1px solid var(--line); border-left:2px solid var(--c4); border-radius:0 12px 12px 0; padding:22px 26px }
.dledger__k{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c4b); display:block; margin-bottom:10px }
.dledger p{ color:var(--muted); font-size:.92rem; line-height:1.6 }

/* ============ EXP IV · Tres líneas ============ */
.threelines .kick{ margin-bottom:1.6em }
.tl3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tl3c{ padding:28px 26px; border:1px solid var(--line); border-radius:14px; background:var(--panel); position:relative }
.tl3c__n{ font-family:var(--f-disp); font-weight:900; font-size:2.4rem; color:transparent; -webkit-text-stroke:1.4px var(--c4); opacity:.6; display:block; margin-bottom:10px }
.tl3c h4{ font-size:1.2rem; color:var(--bone); margin-bottom:10px }
.tl3c p{ color:var(--muted); font-size:.9rem }

/* ============ SÍNTESIS ============ */
.synth{ position:relative; padding-block:clamp(80px,12vh,170px) }
.synth__h{ font-family:var(--f-disp); font-weight:900; font-size:clamp(3rem,9vw,7rem); letter-spacing:-.04em; color:var(--bone); line-height:.9 }
.synth__sub{ max-width:58ch; margin:1.2em auto 0; color:var(--muted); font-size:1.05rem }
.webwrap{ position:relative; margin:clamp(40px,6vw,70px) 0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg-2) }
.webcanvas{ width:100%; height:clamp(420px,60vh,620px); display:block }
.webwrap__legend{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center;
  padding:14px; background:linear-gradient(0deg,rgba(10,11,16,.85),transparent); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase }
.webwrap__legend span{ color:var(--muted); display:inline-flex; align-items:center; gap:7px }
.webwrap__legend span::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c,var(--muted)) }
.webwrap__rec::before{ display:none !important }
.webwrap__rec{ color:var(--bone) !important }
.synth__close{ max-width:40ch; margin:clamp(40px,6vw,70px) auto 0; text-align:center }
.synth__big{ font-family:var(--f-serif); font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.28; color:var(--bone) }
.synth__sign{ margin-top:24px; font-size:.8rem; color:var(--muted); letter-spacing:.02em }

/* ============ Buttons ============ */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; padding:15px 26px; border-radius:100px; transition:.3s var(--ease) }
.btn i{ transition:transform .3s }
.btn--primary{ background:var(--bone); color:#0a0b10; font-weight:700 }
.btn--primary:hover{ box-shadow:0 0 40px -6px rgba(245,241,232,.5); transform:translateY(-2px) } .btn--primary:hover i{ transform:translateX(4px) }
.btn--ghost{ border:1px solid var(--line); color:var(--ink) }
.btn--ghost:hover{ border-color:var(--bone); color:var(--bone) }

/* ============ Cierre ============ */
.end{ border-top:1px solid var(--line); padding-block:clamp(50px,7vw,90px) 40px; position:relative }
.end__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(40px,6vw,70px) }
.end__meta{ max-width:80ch; margin:0 auto; text-align:center }
.end__sources{ font-size:.72rem; line-height:1.7; color:var(--muted-2) } .end__sources b{ color:var(--muted) }
.end__disc{ margin-top:18px; font-size:.78rem; line-height:1.6; color:var(--muted-2) } .end__disc b{ color:var(--muted) }
.end__brand{ margin-top:clamp(40px,6vw,70px); text-align:center; font-family:var(--f-disp); font-weight:900;
  font-size:clamp(2rem,11vw,9rem); line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--line) }

/* ============ Fuentes / referencias ============ */
.sources{ padding-block:clamp(54px,8vw,104px); border-top:1px solid var(--line) }
.sources__h{ margin:.2em auto 0; max-width:20ch }
.sources__intro{ max-width:62ch; margin:1em auto 0; color:var(--muted); font-size:.95rem }
.sources__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:clamp(34px,4vw,54px) }
.srccol{ --c:var(--bone) }
.srccol h4{ font-family:var(--f-disp); font-weight:700; font-size:1.02rem; color:var(--bone); display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:15px; border-bottom:1px solid var(--line) }
.srccol h4 b{ font-family:var(--f-disp); font-weight:900; color:var(--c); font-size:1.2rem }
.srccol ul{ list-style:none; display:flex; flex-direction:column; gap:13px }
.srccol a{ display:block; font-size:.84rem; line-height:1.35; color:var(--muted); transition:color .25s }
.srccol a span{ display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; color:var(--c); margin-top:3px; opacity:.8 }
.srccol a::after{ content:" ↗"; color:var(--c); opacity:.6 }
.srccol a:hover{ color:var(--ink) } .srccol a:hover span{ opacity:1 }
/* enlace de fuente en línea (dentro de los datos) */
.srcref{ font-family:var(--f-mono); font-size:.82em; color:var(--accent-b); white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent); transition:color .25s,border-color .25s }
.srcref::after{ content:"↗"; margin-left:2px; font-size:.9em }
.srcref:hover{ color:var(--bone); border-color:var(--bone) }
.intercepts__src{ text-align:center; margin:16px 0 0; font-family:var(--f-mono); font-size:.78rem; color:var(--muted) }
@media (max-width:980px){ .sources__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:540px){ .sources__grid{ grid-template-columns:1fr } }

/* ============ Reveal system ============ */
html.js [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease),transform .8s var(--ease) }
html.js [data-reveal].is-in{ opacity:1; transform:none }
html.js [data-reveal-line]{ display:block; transform:translateY(105%); transition:transform .9s var(--ease) }
html.js [data-reveal-line].is-in{ transform:none }
html.js [data-reveal-words] .w{ display:inline-block; opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
html.js [data-reveal-words].is-in .w{ opacity:1; transform:none }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .spine{ display:none }
  .tactics{ grid-template-columns:repeat(2,1fr) }
  .typo__grid,.actors__grid{ grid-template-columns:repeat(2,1fr) }
  .faro__stats,.tl3,.mxgrid{ grid-template-columns:1fr }
  .dgrid{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .hud__menu{ display:grid }
  .hud__act{ display:none }
  .expand,.laje,.covid,.cell{ grid-template-columns:1fr; gap:34px }
  .laje__side{ max-width:340px }
  .militia__grid,.ic-list,.sold__list,.forensic__cols,.intro__cols{ grid-template-columns:1fr }
  .hero__legend{ grid-template-columns:1fr 1fr }
  .origin__steps{ grid-template-columns:1fr; gap:0 }
  .origin__line{ left:5px; right:auto; top:0; bottom:0; width:1px; height:auto }
  .origin__steps li{ padding-top:0; padding-left:34px; padding-bottom:30px }
  .origin__steps li::before{ left:0; top:5px }
  .origin__y{ position:static; display:block; margin-bottom:8px }
  .act__open{ grid-template-columns:1fr } .act__rn{ position:static }
  .act__rn span{ font-size:5rem }
}
@media (max-width:720px){
  .hero__cue{ display:none }
  .hero{ padding-block:84px 64px }
  /* Flowmap → flujo vertical */
  .flowmap{ aspect-ratio:auto; min-height:0; display:flex; flex-direction:column; align-items:center; gap:10px }
  .flowmap__svg{ display:none }
  .fm-node{ position:static !important; transform:none !important; left:auto !important; top:auto !important; width:100%; max-width:360px; text-align:center }
  .fm-node:not(.fm-hub)::after{ content:"↓"; display:block; color:var(--c1); opacity:.5; margin-top:10px; font-size:1rem }
  .fm-hub{ width:100%; max-width:360px; height:auto; border-radius:14px; padding:18px }
  .dgrid{ grid-template-columns:1fr }
  .trigger__card{ grid-template-columns:1fr; text-align:center }
  .trigger__arrow{ transform:rotate(90deg) }
  .actors__grid,.typo__grid{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .hero__legend{ grid-template-columns:1fr }
  .tactics{ grid-template-columns:1fr }
  .dash__tabs{ flex-direction:column } .dtab{ justify-content:center }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  html.js [data-reveal],html.js [data-reveal-line],html.js [data-reveal-words] .w{ opacity:1 !important; transform:none !important }
  .dotgrid i{ opacity:1 }
}