/* ============================================================
   LA COPA DEL DESPOJO · AlterLab
   Investigación visual sobre los conflictos sociales del Mundial 2026.
   Identidad propia: asfalto · tiza · sangre · oro. Scroll = experiencia.
   ============================================================ */

:root{
  /* superficies */
  --asphalt:  #0c0c0e;
  --asphalt2: #131316;
  --concrete: #1b1c20;
  --concrete2:#26272d;

  /* tinta */
  --bone:     #ece6da;
  --bone-dim: #9b988f;
  --bone-mute:#6a6862;
  --chalk:    #f7f4ee;

  /* acentos */
  --blood:    #e5392f;
  --blood-2:  #ff5347;
  --blood-deep:#9c1109;
  --gold:     #d4a548;
  --gold-2:   #f0c673;
  --ink-blue: #5b7fa6;

  --line:   rgba(236,230,218,.14);
  --line-2: rgba(236,230,218,.07);

  --font-display: "Anton", Impact, system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --gut: clamp(18px, 4.2vw, 64px);
  --maxw: 1200px;
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  background:var(--asphalt); color:var(--bone);
  font-family:var(--font-sans); font-size:clamp(16px,1.05vw,18px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* textura de concreto sutil bajo todo */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(213,165,72,.05), transparent 50%),
    radial-gradient(120% 90% at 0% 110%, rgba(229,57,47,.06), transparent 55%),
    var(--asphalt);
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }
svg{ display:block }
em{ font-style:italic; font-family:var(--font-serif) }
::selection{ background:var(--blood); color:#120302 }

.mono{ font-family:var(--font-mono); font-weight:400 }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.kicker{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--blood); margin-bottom:1.4em }
.hot{ color:var(--blood); font-style:normal }
.gold{ color:var(--gold-2) }
.dim{ color:var(--bone-mute) }
.u{ box-shadow:inset 0 -.32em 0 rgba(229,57,47,.22); }
.stroke{ -webkit-text-stroke:2px var(--chalk); color:transparent; }

/* etiquetas / chips */
.tag{ display:inline-block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; border:1px solid var(--line) }
.tag--blood{ color:var(--blood); border-color:rgba(229,57,47,.5); background:rgba(229,57,47,.08) }
.srcs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px }
.src{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
  padding:5px 11px; border:1px solid var(--line); border-radius:4px }
.src::before{ content:"▣ "; color:var(--bone-mute) }

/* ============ Capas fílmicas ============ */
.grain{ position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6.5s steps(6) infinite }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }
.vignette{ position:fixed; inset:0; z-index:58; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 48%, transparent 55%, rgba(6,6,8,.6) 90%, rgba(6,6,8,.95) 100%) }
.scan{ position:fixed; inset:0; z-index:59; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px); mix-blend-mode:multiply }
.bars{ position:fixed; left:0; right:0; z-index:62; height:clamp(14px,3vh,34px); background:var(--asphalt); pointer-events:none }
.bars.top{ top:0; box-shadow:0 1px 0 var(--line) } .bars.bot{ bottom:0; box-shadow:0 -1px 0 var(--line) }

/* ============ Cursor ============ */
.cursor,.cursor__dot{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; border-radius:50%; will-change:transform }
.cursor{ width:40px; height:40px; border:1px solid rgba(247,244,238,.6); transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s,opacity .3s; display:grid; place-items:center }
.cursor__dot{ width:5px; height:5px; background:var(--blood); transform:translate(-50%,-50%) }
.cursor.is-hot{ width:84px; height:84px; background:rgba(229,57,47,.14); border-color:var(--blood) }
.cursor__txt{ font-family:var(--font-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--chalk); opacity:0; transition:opacity .25s }
.cursor.is-hot .cursor__txt{ opacity:1 }
body.has-cursor{ cursor:none }

/* ============ Reveals (gating de seguridad) ============ */
/* sólo se ocultan si hay JS; si GSAP/AOS no cargan o hay reduce-motion, se muestran */
html.js [data-reveal]{ opacity:0 }
html.js [data-reveal="fade"]{ transform:translateY(22px) }
html.no-gsap [data-reveal]{ opacity:1 !important; transform:none !important }
.split-line, .split-word{ display:inline-block }
html.no-aos [data-aos]{ opacity:1 !important; transform:none !important }

/* ============ Preloader ============ */
#load{ position:fixed; inset:0; z-index:500; background:var(--asphalt); display:grid; place-items:center;
  color:var(--chalk); transition:opacity .9s var(--ease), visibility .9s }
#load.gone{ opacity:0; visibility:hidden }
.load__pitch{ width:min(60vw,340px); height:auto; opacity:.8 }
.load__pitch .ln{ stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; animation:draw 2.4s var(--ease-io) forwards }
.load__pitch .ln:nth-child(2){ animation-delay:.15s } .load__pitch .ln:nth-child(3){ animation-delay:.3s }
.load__pitch .ln:nth-child(5){ animation-delay:.5s } .load__pitch .ln:nth-child(6){ animation-delay:.65s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.load__meta{ position:absolute; top:var(--gut); left:var(--gut); right:var(--gut); display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim) }
.load__pct{ color:var(--chalk) }
.load__title{ position:absolute; bottom:var(--gut); left:var(--gut); font-family:var(--font-display);
  font-size:clamp(2.4rem,9vw,7rem); line-height:.86; letter-spacing:.01em }

/* ============ HUD ============ */
.hud{ position:fixed; inset:0; z-index:55; pointer-events:none }
.hud a,.hud button{ pointer-events:auto }
.hud__row{ position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:clamp(14px,2.4vw,26px) var(--gut) }
.hud__row.top{ top:clamp(14px,3vh,34px) } .hud__row.bot{ bottom:clamp(14px,3vh,34px); align-items:flex-end }

.wordmark{ display:flex; align-items:center; gap:12px }
.wordmark__dot{ width:11px; height:11px; border-radius:50%; background:var(--blood); box-shadow:0 0 14px var(--blood);
  animation:pulse 2.6s var(--ease) infinite; flex:none }
@keyframes pulse{ 0%,100%{ transform:scale(.8); opacity:.7 } 50%{ transform:scale(1.12); opacity:1 } }
.wordmark__tx{ display:flex; flex-direction:column; line-height:1 }
.wordmark b{ font-family:var(--font-mono); font-weight:500; font-size:.74rem; letter-spacing:.12em }
.wordmark small{ font-size:.58rem; letter-spacing:.18em; color:var(--bone-mute); text-transform:uppercase; margin-top:3px; font-family:var(--font-mono) }

.nav{ position:relative }
.nav__toggle{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone); padding:10px 16px; border:1px solid var(--line); border-radius:100px;
  background:rgba(12,12,14,.5); backdrop-filter:blur(10px); transition:.25s var(--ease) }
.nav__toggle:hover{ border-color:var(--blood); color:var(--blood) }
.nav__sheet{ position:absolute; top:calc(100% + 10px); right:0; width:min(78vw,300px); display:flex; flex-direction:column;
  padding:10px; border:1px solid var(--line); border-radius:14px; background:rgba(15,15,18,.92); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.3s var(--ease) }
.nav.open .nav__sheet{ opacity:1; visibility:visible; transform:none }
.nav__sheet a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px; font-size:.92rem; color:var(--bone);
  transition:background .2s, color .2s }
.nav__sheet a span{ font-family:var(--font-mono); font-size:.7rem; color:var(--bone-mute); min-width:1.6em }
.nav__sheet a:hover{ background:rgba(229,57,47,.12); color:var(--chalk) }
.nav__sheet a:hover span{ color:var(--blood) }
.nav__home{ margin-top:6px; border-top:1px solid var(--line-2); color:var(--bone-dim) !important }

.hud__act{ display:flex; flex-direction:column; gap:5px }
.hud__k{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; color:var(--blood) }
.hud__t{ font-family:var(--font-display); font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.02em; line-height:1; color:var(--chalk) }
.hud__prog{ display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.hud__bar{ width:min(34vw,260px); height:2px; background:var(--line); position:relative; overflow:hidden }
.hud__bar i{ position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--blood),var(--gold)) }
.hud__pct{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--bone-dim); font-variant-numeric:tabular-nums }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  padding:0 var(--gut) clamp(90px,16vh,170px) }
.hero__bg{ position:absolute; inset:-8% 0; z-index:-1; will-change:transform }
.hero__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05) brightness(.5) }
.hero__grad{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,12,14,.55) 0%, rgba(12,12,14,.2) 32%, rgba(12,12,14,.78) 78%, var(--asphalt) 100%) }
.hero__pitch{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.5 }
.hero__pitch .chalk{ stroke-dasharray:2400; stroke-dashoffset:2400 }
.hero__inner{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; width:100% }
.hero__kicker{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px }
.hero__kicker .mono{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim) }
.hero__title{ font-family:var(--font-display); font-size:clamp(3.4rem,15vw,13rem); line-height:.82; letter-spacing:.005em;
  text-transform:uppercase; text-shadow:0 6px 60px rgba(6,6,8,.7) }
.hero__title .ln{ display:block; overflow:hidden }
.hero__sub{ margin-top:30px; max-width:54ch; font-weight:300; font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--bone) }
.hero__sub em{ color:var(--gold-2) }
.hero__by{ margin-top:26px } .hero__by .mono{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute) }
.hero__by b{ color:var(--bone) }
.hero__scroll{ position:absolute; left:50%; bottom:clamp(30px,6vh,54px); transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px }
.hero__scroll .mono{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-dim) }
.hero__scroll-line{ width:1px; height:54px; background:var(--line); position:relative; overflow:hidden }
.hero__scroll-line i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--blood); animation:scrolldn 1.9s var(--ease-io) infinite }
@keyframes scrolldn{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(300%) } }

/* ============ MANIFIESTO ============ */
.manifesto{ padding:clamp(90px,16vh,180px) 0 }
.manifesto__lead{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.8rem,5vw,4rem); line-height:1.12;
  letter-spacing:-.01em; max-width:20ch }
.manifesto__lead .hot{ font-style:italic }
.manifesto__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,60px); margin-top:clamp(40px,7vh,80px) }
.manifesto__cols p{ font-size:clamp(1rem,1.4vw,1.18rem); color:var(--bone-dim) }
.manifesto__cols .u{ color:var(--bone) }
.manifesto__tag{ margin-top:clamp(36px,6vh,64px); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-mute) }

/* ============ Estructura de ACTO ============ */
.act{ position:relative; padding-block:clamp(70px,12vh,150px) }
.act__intro{ position:relative }
.act__head{ display:flex; align-items:center; gap:16px; margin-bottom:26px }
.act__num{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--blood); line-height:1 }
.act__label{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim);
  padding-left:16px; border-left:1px solid var(--line) }
.act__title{ font-family:var(--font-display); font-size:clamp(2.8rem,9.5vw,8.5rem); line-height:.86; text-transform:uppercase; letter-spacing:.01em }
.act__title .ln{ display:block; overflow:hidden }
.act__title.gold-title{ color:var(--gold) }
.act__lead{ margin-top:1.4em; max-width:54ch; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--bone-dim) }

.bigquote{ margin-top:clamp(40px,7vh,80px); max-width:min(96vw,74rem) }
.bigquote p{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(2rem,5.2vw,4.4rem); line-height:1.05; letter-spacing:-.015em }
.bigquote cite{ display:block; margin-top:1.4em; font-family:var(--font-mono); font-style:normal; font-size:.74rem; letter-spacing:.1em; color:var(--bone-mute) }

/* ============ Banda de cifras ============ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line);
  margin-top:clamp(56px,9vh,110px) }
.stat{ background:var(--asphalt); padding:clamp(26px,3.4vw,48px) var(--gut); display:flex; flex-direction:column; gap:14px }
.stat__n{ font-family:var(--font-display); font-size:clamp(2.8rem,6vw,5.5rem); line-height:.9; color:var(--chalk); font-variant-numeric:tabular-nums }
.stat__n small{ color:var(--blood); font-size:.5em; margin-left:.05em }
.stat__l{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); max-width:22ch }

/* ============ Sedes (scroller horizontal) ============ */
.venues{ margin-top:clamp(56px,9vh,110px); overflow:hidden }
.venues__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px }
.venues__head .kicker{ margin-bottom:0 }
.venues__intro{ font-size:clamp(1.1rem,2vw,1.5rem); font-weight:300; max-width:30ch }
.venues__track{ display:flex; gap:clamp(14px,1.6vw,24px); padding-inline:var(--gut); padding-bottom:10px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none }
.venues__track::-webkit-scrollbar{ display:none }
.venues.is-pinned .venues__track{ overflow:visible; padding-inline:var(--gut) }
.venue{ flex:0 0 min(78vw,420px); scroll-snap-align:start; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--asphalt2); display:flex; flex-direction:column }
.venue__img{ aspect-ratio:16/10; overflow:hidden }
.venue__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.04) brightness(.82); transition:transform 1s var(--ease), filter .5s }
.venue:hover .venue__img img{ transform:scale(1.06); filter:grayscale(0) brightness(.95) }
.venue__meta{ padding:clamp(18px,1.6vw,26px); display:flex; flex-direction:column; gap:7px; flex:1 }
.venue__meta h3{ font-family:var(--font-display); font-size:clamp(1.5rem,2.4vw,2.1rem); text-transform:uppercase; letter-spacing:.01em }
.venue__meta .mono{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blood) }
.venue__note{ font-size:.92rem; color:var(--bone-dim); margin-top:6px }
.venue__note b{ color:var(--bone) }

.act__note{ margin-top:clamp(56px,9vh,100px); max-width:62ch }
.act__note p{ font-size:clamp(1rem,1.4vw,1.2rem); color:var(--bone-dim) } .act__note b{ color:var(--bone) }

/* ============ Escenas con pin / parallax ============ */
.scene{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate }
.scene__bg{ position:absolute; inset:-10% 0; z-index:-2; will-change:transform }
.scene__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.05) brightness(.55) }
.scene__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.6) 48%, rgba(12,12,14,.25) 100%),
            linear-gradient(0deg, rgba(12,12,14,.85), transparent 60%) }
.scene__veil--blue{ background:linear-gradient(90deg, rgba(10,12,16,.92) 0%, rgba(12,16,22,.55) 50%, rgba(40,12,10,.25) 100%),
            linear-gradient(0deg, rgba(10,11,14,.85), transparent 60%) }
.scene__txt{ position:relative; width:100% }
.scene__big{ font-family:var(--font-serif); font-weight:600; font-size:clamp(2rem,6vw,5rem); line-height:1.02; letter-spacing:-.015em; max-width:18ch }
.scene__lead{ margin-top:1.4em; max-width:52ch; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--bone); font-weight:300 }
.scene__lead b{ color:var(--blood-2); font-weight:500 }

/* precedente histórico */
.precedent{ margin-top:clamp(70px,12vh,140px); border-top:1px solid var(--line); padding-top:clamp(40px,6vh,70px) }
.precedent__k{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--blood); margin-bottom:1.2em }
.precedent__tx{ font-family:var(--font-serif); font-size:clamp(1.5rem,3.6vw,2.8rem); line-height:1.18; max-width:24ch }
.precedent__tx .hot{ font-family:var(--font-display); font-style:normal }

/* ciudades */
.cities{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.4vw,34px); margin-top:clamp(56px,9vh,100px) }
.city{ border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.2vw,32px); background:linear-gradient(180deg,var(--asphalt2),var(--asphalt)) }
.city__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px }
.city__top h3{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.2rem); text-transform:uppercase }
.city__tag{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blood); border:1px solid rgba(229,57,47,.4); padding:5px 9px; border-radius:4px }
.city p{ font-size:.98rem; color:var(--bone-dim) } .city p b{ color:var(--bone) }
.city__fig{ margin-top:18px; border-radius:9px; overflow:hidden }
.city__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(.25) brightness(.85) }
.city__fig figcaption{ font-size:.62rem; letter-spacing:.04em; color:var(--bone-mute); padding:10px 2px 0 }
/* tarifa */
.fare{ margin-top:20px; display:flex; flex-direction:column; gap:12px }
.fare__row{ display:flex; align-items:center; gap:12px }
.fare__lbl{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); min-width:9ch }
.fare__bar{ flex:1; height:10px; background:var(--concrete); border-radius:100px; overflow:hidden }
.fare__bar i{ display:block; height:100%; width:var(--w); background:var(--bone-mute); transform-origin:left; transition:transform .2s }
.fare__row--up .fare__bar i{ background:linear-gradient(90deg,var(--blood),var(--blood-2)) }
.fare__v{ font-family:var(--font-display); font-size:1.4rem; min-width:2.6ch; text-align:right }
.fare__row--up .fare__v{ color:var(--blood) }

/* pull quote */
.pull{ margin-top:clamp(64px,11vh,130px); max-width:min(96vw,74rem) }
.pull p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1.1 }
.pull cite{ display:block; margin-top:1.3em; font-family:var(--font-mono); font-style:normal; font-size:.72rem; letter-spacing:.1em; color:var(--bone-mute) }
.pull--blue p .hot{ color:var(--blood) }

/* ============ DINERO ============ */
.over{ margin-top:clamp(56px,9vh,110px) }
.over__k{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:30px }
.over__row{ display:grid; grid-template-columns:minmax(140px,1fr) 3fr; gap:clamp(16px,3vw,42px); align-items:center; padding-block:22px; border-top:1px solid var(--line) }
.over__label b{ font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem); display:block; text-transform:uppercase }
.over__label span{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-mute); display:block; margin-top:4px }
.over__track{ position:relative; height:46px; background:var(--concrete); border-radius:6px; overflow:hidden }
.over__base{ position:absolute; inset:0 auto 0 0; width:var(--base); background:var(--concrete2); display:flex; align-items:center }
.over__base span{ padding-left:12px; font-family:var(--font-mono); font-size:.66rem; color:var(--bone-dim); white-space:nowrap }
.over__grow{ position:absolute; inset:0 0 0 0; display:flex; align-items:center; justify-content:flex-end }
.over__grow i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--gold-2),var(--blood)); opacity:.9 }
.over__to{ position:relative; padding-right:14px; font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.7rem); color:var(--chalk); z-index:1 }
.over__total{ margin-top:40px; padding-top:34px; border-top:2px solid var(--gold); display:flex; flex-direction:column; gap:12px }
.over__total-k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.over__total-n{ font-family:var(--font-display); font-size:clamp(3rem,11vw,8rem); line-height:.85; color:var(--chalk); font-variant-numeric:tabular-nums }
.over__total-s{ max-width:50ch; font-size:.95rem; color:var(--bone-dim) } .over__total-s b{ color:var(--bone) }

.tickets{ margin-top:clamp(70px,12vh,140px); border-block:1px solid var(--line); background:linear-gradient(180deg,rgba(212,165,72,.04),transparent) }
.tickets__inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; padding-block:clamp(50px,8vh,90px) }
.tickets__txt h3{ font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.6rem); line-height:.95; text-transform:uppercase; margin-bottom:.5em }
.tickets__txt p{ color:var(--bone-dim); max-width:52ch } .tickets__txt p b{ color:var(--bone) }
.tickets__resp{ margin-top:18px; font-size:.74rem; letter-spacing:.04em; color:var(--gold); text-transform:none }
.tickets__price{ text-align:center; border:1px solid var(--line); border-radius:16px; padding:clamp(28px,4vw,48px) 20px; background:var(--asphalt2) }
.tickets__cur{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--gold-2); vertical-align:top }
.tickets__big{ font-family:var(--font-display); font-size:clamp(4rem,13vw,9rem); line-height:.8; color:var(--chalk); font-variant-numeric:tabular-nums }
.tickets__lbl{ display:block; margin-top:14px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-mute) }

.myth{ margin-top:clamp(70px,12vh,140px); display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,64px); align-items:center }
.myth__k{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1em }
.myth__tx{ font-family:var(--font-serif); font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1.16 }
.myth__meter{ }
.myth__bar{ height:18px; background:var(--concrete); border-radius:100px; overflow:hidden; border:1px solid var(--line) }
.myth__fill{ display:block; height:100%; width:var(--w); background:linear-gradient(90deg,var(--gold-2),var(--gold)); box-shadow:0 0 20px rgba(212,165,72,.5) }
.myth__meter .mono{ margin-top:12px; font-size:.66rem; letter-spacing:.06em; color:var(--bone-mute) }
.myth .srcs{ grid-column:1/-1 }

/* ============ MURO ============ */
.banned{ margin-top:clamp(64px,10vh,120px) }
.banned__k{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blood); margin-bottom:26px }
.banned__list{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px); align-items:baseline }
.banned__list li{ font-family:var(--font-display); font-size:clamp(2.2rem,7vw,5.5rem); line-height:.9; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px var(--bone-dim); transition:color .4s, -webkit-text-stroke-color .4s }
.banned__list li:hover{ color:var(--blood); -webkit-text-stroke-color:var(--blood) }
.banned__note{ margin-top:30px; max-width:54ch; color:var(--bone-dim) }

.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(18px,2.4vw,30px); margin-top:clamp(56px,9vh,100px) }
.mini{ border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.4vw,32px); background:var(--asphalt2); transition:border-color .3s, transform .3s }
.mini:hover{ border-color:rgba(229,57,47,.5); transform:translateY(-4px) }
.mini i{ font-size:1.6rem; color:var(--blood); display:block; margin-bottom:14px }
.mini h4{ font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; margin-bottom:10px; letter-spacing:.01em }
.mini p{ font-size:.94rem; color:var(--bone-dim) }

/* ============ RESISTENCIA ============ */
.timeline{ list-style:none; margin-top:clamp(50px,8vh,90px); position:relative; padding-left:2px }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--blood),transparent) }
.tl{ position:relative; padding:0 0 clamp(30px,4vh,46px) clamp(34px,4vw,56px) }
.tl__dot{ position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:var(--asphalt); border:2px solid var(--blood); box-shadow:0 0 0 4px rgba(229,57,47,.12) }
.tl__date{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blood); display:block; margin-bottom:8px }
.tl__tx{ font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--bone); font-weight:300; max-width:52ch } .tl__tx b{ font-weight:500; color:var(--chalk) }

.mosaic{ margin-top:clamp(50px,8vh,90px); display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(180px,1fr); gap:clamp(10px,1.4vw,18px); padding-inline:var(--gut) }
.mosaic__cell{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--line-2) }
.mosaic__cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05) brightness(.82); transition:transform 1.1s var(--ease), filter .5s }
.mosaic__cell:hover img{ transform:scale(1.07); filter:grayscale(0) brightness(.96) }
.mosaic__cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,12,14,.5),transparent 60%); opacity:.6 }
.mosaic__cell--tall{ grid-row:span 2 } .mosaic__cell--wide{ grid-column:span 2 }

/* ============ VOCES ============ */
.voices{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px); margin-top:clamp(50px,8vh,90px) }
.voice{ border:1px solid var(--line); border-radius:16px; padding:clamp(26px,3vw,46px); background:linear-gradient(180deg,var(--asphalt2),var(--asphalt));
  display:flex; flex-direction:column; gap:24px; justify-content:space-between }
.voice blockquote{ font-family:var(--font-serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.18; position:relative; padding-top:.4em }
.voice blockquote::before{ content:"“"; position:absolute; top:-.35em; left:-.05em; font-size:3em; color:var(--blood); opacity:.3; font-style:normal }
.voice figcaption{ display:flex; flex-direction:column; gap:4px }
.voice figcaption b{ font-family:var(--font-display); font-size:1.2rem; text-transform:uppercase; letter-spacing:.02em }
.voice figcaption .mono{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-mute) }
.voice--wide{ grid-column:1/-1 }
.voice--portrait{ grid-row:span 2 }
.voice__img{ border-radius:10px; overflow:hidden; aspect-ratio:4/3 }
.voice__img img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:grayscale(.5) contrast(1.05) }

.media-note{ margin-top:clamp(56px,9vh,100px); max-width:62ch }
.media-note p{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--bone-dim) } .media-note b{ color:var(--gold-2) }

/* ============ ¿Y AHORA? (recomendaciones) ============ */
.recs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(50px,8vh,90px) }
.rec{ border:1px solid var(--line); border-radius:14px; padding:clamp(24px,2.6vw,38px); background:var(--asphalt2); position:relative; overflow:hidden; transition:border-color .3s, transform .3s }
.rec::before{ content:""; position:absolute; left:0; top:0; width:0; height:3px; background:var(--blood); transition:width .5s var(--ease) }
.rec:hover{ transform:translateY(-5px); border-color:rgba(229,57,47,.4) } .rec:hover::before{ width:100% }
.rec__n{ font-size:.74rem; letter-spacing:.2em; color:var(--blood); display:block; margin-bottom:16px }
.rec h3{ font-family:var(--font-display); font-size:clamp(1.4rem,2vw,1.8rem); text-transform:uppercase; line-height:1; margin-bottom:12px }
.rec p{ font-size:.95rem; color:var(--bone-dim) }

/* ============ CIERRE ============ */
.end{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(80% 80% at 50% 40%, #0f0f12, var(--asphalt) 75%) }
.end__pitch{ position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.6 }
.end__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); text-align:center }
.end__k{ font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--blood); margin-bottom:1.6em }
.end__quote{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(2rem,6vw,4.6rem); line-height:1.08; letter-spacing:-.01em; max-width:18ch; margin-inline:auto }
.end__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(40px,6vh,64px) }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:100px; transition:.3s var(--ease) }
.btn svg{ width:15px; height:15px }
.btn--primary{ background:var(--blood); color:#120302; font-weight:500 }
.btn--primary:hover{ box-shadow:0 0 44px rgba(229,57,47,.45); transform:translateY(-2px) }
.btn--ghost{ border:1px solid var(--line); color:var(--bone) } .btn--ghost:hover{ border-color:var(--gold); color:var(--gold-2) }
.end__meta{ margin-top:clamp(50px,8vh,80px); padding-top:30px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:18px; text-align:left }
.end__sources{ font-size:.66rem; line-height:1.9; letter-spacing:.02em; color:var(--bone-mute) } .end__sources b{ color:var(--bone-dim) }
.end__disclaimer{ font-size:.62rem; line-height:1.8; color:var(--bone-mute); opacity:.8 } .end__disclaimer b{ color:var(--bone-dim) }

/* ============ Responsive ============ */
@media (max-width:900px){
  .stats{ grid-template-columns:repeat(2,1fr) }
  .tickets__inner{ grid-template-columns:1fr; gap:30px }
  .myth{ grid-template-columns:1fr; gap:28px }
  .over__row{ grid-template-columns:1fr; gap:14px }
  .voices{ grid-template-columns:1fr }
  .voice--portrait{ grid-row:auto }
  .mosaic{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  body.has-cursor{ cursor:auto } .cursor,.cursor__dot{ display:none }
  .stats{ grid-template-columns:1fr }
  .hud__t{ display:none }
  .wordmark small{ display:none }
  .mosaic{ grid-template-columns:1fr } .mosaic__cell--tall,.mosaic__cell--wide{ grid-row:auto; grid-column:auto }
  .hero{ padding-bottom:120px }
  .end__meta{ text-align:left }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .grain,.scan{ animation:none }
  .hero__bg,.scene__bg{ inset:0 !important }
}