/* ============================================================
   FUNGO RACE — Boceto v1
   Sistema visual: oscuro, cinematográfico, tipografía brutal.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* base */
  --ink:        #08080A;
  --ink-2:      #0E0E11;
  --ink-3:      #16161A;
  --bone:       #F4F2ED;
  --bone-dim:   #9C9A95;
  --line:       rgba(244,242,237,.14);
  --line-soft:  rgba(244,242,237,.07);

  /* marcas */
  --race:       #A4E533;   /* Fungo Race    — verde ácido */
  --hybrid:     #12A2BC;   /* Fungo Hybrid  — teal */
  --stadium:    #F5C400;   /* Fungo Stadium — amarillo */
  --accent:     var(--race);

  /* tipografía */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --cond:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ritmo */
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --nav-h: 84px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }
::selection{ background:var(--accent); color:#07070A }

/* scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:#2A2A30; border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:#3A3A42 }

/* ---------- 3. Utilidades ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.eyebrow{
  font-family:var(--cond); font-weight:600; font-size:.8rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim);
  display:inline-flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:''; width:34px; height:1px; background:var(--accent); display:block;
}
h1,h2,h3,.display{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.88; letter-spacing:-.015em;
}
.h-xl{ font-size:clamp(3.4rem,11.5vw,11rem) }
.h-lg{ font-size:clamp(2.6rem,7vw,6.4rem) }
.h-md{ font-size:clamp(2rem,4vw,3.6rem) }
.h-sm{ font-size:clamp(1.4rem,2.2vw,2.1rem) }
.lead{ font-size:clamp(1.05rem,1.15vw,1.35rem); color:#CFCDC7; max-width:62ch }
.muted{ color:var(--bone-dim) }
.outline-txt{
  color:transparent; -webkit-text-stroke:1.5px rgba(244,242,237,.32);
}
.section{ padding-block:clamp(4.5rem,8.5vw,8rem); position:relative }
.grain{
  position:fixed; inset:-50%; z-index:9998; 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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* botones */
.btn{
  --bg:var(--accent); --fg:#08080A;
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1.05rem 2.1rem; overflow:hidden; isolation:isolate;
  font-family:var(--cond); font-weight:700; font-size:1rem;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--bone);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::after{ transform:translateY(0) }
.btn:hover{ color:#08080A }
.btn .arrow{ transition:transform .45s var(--ease) }
.btn:hover .arrow{ transform:translateX(5px) }
.btn--ghost{ --bg:transparent; --fg:var(--bone); border:1px solid var(--line); }
.btn--ghost:hover{ color:#08080A }

.link-u{
  font-family:var(--cond); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem; padding-bottom:.35rem;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease), color .3s;
}
.link-u:hover{ background-size:100% 1px; color:var(--accent) }

/* reveal */
[data-reveal]{
  opacity:0; transform:translateY(38px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none }
.char{ display:inline-block; transform:translateY(1.05em); opacity:0;
  transition:transform .95s var(--ease), opacity .7s ease; transition-delay:var(--cd,0ms) }
.is-in .char{ transform:none; opacity:1 }
.line-mask{ overflow:hidden; display:block }

/* ---------- 4. Preloader ---------- */
#loader{
  position:fixed; inset:0; z-index:10000; background:var(--ink);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s;
}
#loader.done{ opacity:0; visibility:hidden }
#loader .l-inner{ text-align:center; width:min(78vw,340px) }
#loader img{ width:92px; margin:0 auto 1.6rem; animation:pulse 1.6s var(--ease) infinite }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.07);opacity:1} }
#loader .bar{ height:2px; background:rgba(244,242,237,.14); overflow:hidden }
#loader .bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .3s linear }
#loader .pct{ font-family:var(--cond); letter-spacing:.3em; font-size:.75rem; margin-top:.9rem; color:var(--bone-dim) }

/* ---------- 5. Cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50% }
.cursor{
  width:38px; height:38px; border:1px solid rgba(244,242,237,.45);
  transform:translate(-50%,-50%); transition:width .35s var(--ease),height .35s var(--ease),
  background-color .35s, border-color .35s, opacity .3s;
}
.cursor-dot{ width:4px; height:4px; background:var(--accent); transform:translate(-50%,-50%) }
.cursor.grow{ width:74px; height:74px; background:rgba(164,229,51,.14); border-color:var(--accent) }
@media (hover:none),(max-width:900px){ .cursor,.cursor-dot{ display:none } }

/* ---------- 6. Header ---------- */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:900; height:var(--nav-h);
  display:flex; align-items:center;
  transition:transform .55s var(--ease), background-color .5s, backdrop-filter .5s, height .4s;
}
.header.scrolled{ height:68px; background:rgba(8,8,10,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft) }
.header.hidden{ transform:translateY(-105%) }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem }
.brand{ display:flex; align-items:center; gap:.7rem; z-index:2 }
.brand img{ height:60px; width:auto; margin-top:13px; transition:height .4s var(--ease), margin-top .4s var(--ease) }
.header.scrolled .brand img{ height:44px; margin-top:6px }
.nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2.2rem) }
.nav > a,.nav > .has-mega > button{
  font-family:var(--cond); font-weight:600; font-size:.92rem; letter-spacing:.15em;
  text-transform:uppercase; color:#D7D5D0; position:relative; padding:.4rem 0;
  display:inline-flex; align-items:center; gap:.4rem; transition:color .3s;
}
.nav > a::after,.nav > .has-mega > button::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav > a:hover,.nav > .has-mega > button:hover{ color:var(--bone) }
.nav > a:hover::after,.nav > .has-mega > button:hover::after{ transform:scaleX(1); transform-origin:left }
.nav .cta{ padding:.75rem 1.4rem; background:var(--accent); color:#08080A;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%); font-weight:700 }
.nav .cta::after{ display:none }
.nav .cta:hover{ background:var(--bone) }
@media (max-width:1080px){ .nav{ display:none } }

/* mega menú */
.mega{
  position:absolute; top:100%; left:0; width:100%; background:rgba(10,10,12,.97);
  backdrop-filter:blur(18px); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.has-mega:hover .mega,.mega:hover,.mega.is-open{ opacity:1; visibility:visible; transform:none }
.mega > .wrap{ display:block; padding-inline:var(--gutter) }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border-inline:1px solid var(--line-soft) }

.mega-card{
  display:block; position:relative; overflow:hidden; background:var(--ink);
  padding:2rem 2.2rem 1.9rem;
  font-family:var(--body); font-size:1rem; font-weight:400;
  letter-spacing:normal; text-transform:none; color:var(--bone);
}
.mega-card::after{ display:none }
.mega-card .mc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.12; filter:grayscale(.4);
  transform:scale(1.04); transition:transform .9s var(--ease), opacity .6s }
.mega-card:hover .mc-bg{ transform:scale(1.12); opacity:.26; filter:grayscale(0) }
.mega-card > *{ position:relative; z-index:1 }
.mega-card h4{ font-family:var(--display); font-size:1.45rem; line-height:1;
  text-transform:uppercase; letter-spacing:0; margin-bottom:.55rem }
.mega-card p{ font-size:.92rem; line-height:1.5; color:#B9B7B1; margin-bottom:1.2rem; max-width:32ch }
.mega-card .mc-links{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem 1.2rem;
  font-family:var(--cond); font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8E8C87 }
.mega-card .mc-links span{ display:flex; align-items:center; gap:.45rem; transition:color .3s }
.mega-card .mc-links span::before{ content:''; width:5px; height:5px; flex:none;
  background:currentColor; transform:rotate(45deg); opacity:.5 }
.mega-card:hover .mc-links span{ color:var(--bone) }
.mega-card[data-brand="race"]{ --mc:var(--race) }
.mega-card[data-brand="hybrid"]{ --mc:var(--hybrid) }
.mega-card[data-brand="stadium"]{ --mc:var(--stadium) }
.mega-card h4{ color:var(--mc) }
.mega-card::before{ content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--mc); transform:scaleX(0); transform-origin:left; z-index:2;
  transition:transform .5s var(--ease) }
.mega-card:hover::before{ transform:scaleX(1) }

/* burger + menú móvil */
.burger{ display:none; width:46px; height:46px; z-index:2;
  flex-direction:column; align-items:center; justify-content:center; gap:6px }
.burger span{ display:block; width:26px; height:2px; background:var(--bone);
  transition:transform .4s var(--ease), opacity .25s }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
@media (max-width:1080px){ .burger{ display:flex } }
.mobile-menu{
  position:fixed; inset:0; z-index:850; background:var(--ink-2);
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 3rem; overflow-y:auto;
  clip-path:circle(0% at 100% 0); transition:clip-path .8s var(--ease);
}
.mobile-menu.open{ clip-path:circle(150% at 100% 0) }
.mobile-menu ul{ display:flex; flex-direction:column; gap:.2rem }
.mobile-menu a{ font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); text-transform:uppercase;
  display:block; padding:.35rem 0; border-bottom:1px solid var(--line-soft) }
.mobile-menu .sub{ font-family:var(--cond); font-size:1.05rem; letter-spacing:.14em; padding-left:1.2rem;
  color:var(--bone-dim); border:0 }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom:clamp(2rem,5vw,4rem) }
.hero-media{ position:absolute; inset:0; z-index:-2 }
.hero-media img{ position:absolute; inset:0; width:100%; height:112%; object-fit:cover; object-position:center 45%;
  opacity:0; transition:opacity 1.6s var(--ease) }
.hero-media img.is-active{ opacity:1; animation:kenburns 14s ease-out forwards }
html.static .hero-media img{ animation:none }
@keyframes kenburns{ from{transform:scale(1.03)} to{transform:scale(1.14)} }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.25) 32%,rgba(8,8,10,.55) 62%,var(--ink) 100%),
    radial-gradient(120% 80% at 50% 40%,transparent 30%,rgba(8,8,10,.7) 100%);
}
.hero-inner{ position:relative; width:100%; }
.hero h1{ margin:.6rem 0 1.4rem }
.hero h1 .l2{ display:block; color:var(--accent) }
.hero-bottom{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2.5rem; margin-top:clamp(2rem,4vw,3.4rem) }
.hero-bottom > div{ min-width:0; flex:1 1 320px }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem }
.hero-copy{ max-width:46ch; color:#D3D1CB }

/* tarjeta countdown */
.countdown{ border:1px solid var(--line); background:rgba(10,10,12,.5); backdrop-filter:blur(10px);
  padding:1.3rem 1.6rem; min-width:min(100%,340px) }
.countdown .cd-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; color:var(--bone-dim) }
.countdown .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block;
  margin-right:.5rem; animation:blink 1.6s infinite }
@keyframes blink{ 50%{opacity:.25} }
.cd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.9rem }
.cd-grid div{ text-align:center }
.cd-grid b{ font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.1rem); display:block; line-height:1 }
.cd-grid span{ font-family:var(--cond); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim) }

.scroll-cue{ position:absolute; right:var(--gutter); bottom:2.4rem; display:flex; flex-direction:column;
  align-items:center; gap:.8rem; font-family:var(--cond); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bone-dim); writing-mode:vertical-rl }
.scroll-cue i{ display:block; width:1px; height:60px; background:linear-gradient(var(--accent),transparent);
  animation:cue 2s var(--ease-io) infinite }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:900px){ .scroll-cue{ display:none } }

/* ---------- 8. Marquee ---------- */
.marquee{ border-block:1px solid var(--line-soft); padding-block:1.15rem; overflow:hidden;
  background:var(--ink-2); position:relative; z-index:2 }
.marquee-track{ display:flex; gap:3rem; width:max-content; animation:slide 32s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee span{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2.2rem); text-transform:uppercase;
  display:flex; align-items:center; gap:3rem; color:#2E2E34; white-space:nowrap }
.marquee span em{ color:var(--bone); font-style:normal }
.marquee img{ height:26px; opacity:.5 }

/* ---------- 9. Manifiesto ---------- */
.manifest{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,6rem); align-items:center }
@media (max-width:960px){ .manifest{ grid-template-columns:1fr } }
.manifest h2{ margin:1.2rem 0 1.6rem }
.manifest .big-quote{ font-family:var(--display); font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.25;
  text-transform:uppercase; color:var(--bone); margin-top:2rem; padding-left:1.4rem;
  border-left:3px solid var(--accent) }
.collage{ position:relative; aspect-ratio:1/1.08 }
.collage img{ position:absolute; object-fit:cover; filter:grayscale(.1) contrast(1.05) }
.collage .c1{ width:78%; aspect-ratio:4/5; top:0; right:0 }
.collage .c2{ width:46%; aspect-ratio:3/4; bottom:0; left:0; border:8px solid var(--ink) }
.collage .badge{ position:absolute; right:6%; bottom:8%; width:120px; height:120px; border-radius:50%;
  background:var(--accent); color:#08080A; display:grid; place-items:center; text-align:center;
  font-family:var(--cond); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  animation:spin 20s linear infinite }
.collage .badge span{ display:block; line-height:1.25; animation:spin 20s linear infinite reverse }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (max-width:960px){ .collage{ aspect-ratio:1/.86; margin-top:2.6rem } }

/* ---------- 10. Modalidades ---------- */
.modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft) }
@media (max-width:900px){ .modes{ grid-template-columns:1fr } }
.mode{ position:relative; min-height:min(78vh,760px); overflow:hidden; background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.6rem,2.6vw,2.6rem);
  transition:flex .6s var(--ease) }
.mode-bg{ position:absolute; inset:0; z-index:0 }
.mode-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.65) brightness(.62);
  transform:scale(1.02); transition:transform 1.2s var(--ease), filter .8s var(--ease) }
.mode:hover .mode-bg img{ transform:scale(1.1); filter:grayscale(0) brightness(.72) }
.mode-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.35) 0%,rgba(8,8,10,.15) 40%,rgba(8,8,10,.93) 100%) }
.mode-inner{ position:relative; z-index:1 }
.mode-logo{ height:clamp(78px,8vw,112px); width:auto; margin-bottom:1.2rem;
  transition:transform .6s var(--ease) }
.mode:hover .mode-logo{ transform:translateY(-6px) }
.mode-num{ position:absolute; top:clamp(1.4rem,2.4vw,2.4rem); left:clamp(1.6rem,2.6vw,2.6rem); z-index:1;
  font-family:var(--display); font-size:1rem; letter-spacing:.2em; color:rgba(244,242,237,.5) }
.mode h3{ font-size:clamp(1.9rem,2.6vw,2.6rem); margin-bottom:.7rem }
.mode p{ color:#C6C4BE; font-size:.98rem; max-width:38ch;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .7s var(--ease), opacity .5s ease, margin .6s var(--ease) }
.mode:hover p, .mode.touch-open p{ max-height:180px; opacity:1; margin-bottom:1.4rem }
.mode .tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem }
.mode .tags i{ font-style:normal; font-family:var(--cond); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.35rem .75rem; border:1px solid var(--line); color:#CFCDC7 }
.mode .mode-cta{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--cond);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.85rem; color:var(--mc) }
.mode .mode-cta i{ width:34px; height:34px; border:1px solid var(--mc); border-radius:50%;
  display:grid; place-items:center; transition:background .4s var(--ease), color .4s }
.mode:hover .mode-cta i{ background:var(--mc); color:#08080A }
.mode[data-brand="race"]{ --mc:var(--race) }
.mode[data-brand="hybrid"]{ --mc:var(--hybrid) }
.mode[data-brand="stadium"]{ --mc:var(--stadium) }
.mode::before{ content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--mc);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); z-index:2 }
.mode:hover::before{ transform:scaleX(1) }

/* ---------- 11. Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft) }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr) } }
.stat{ background:var(--ink); padding:clamp(1.8rem,3vw,2.8rem) 1.4rem; text-align:center }
.stat b{ font-family:var(--display); font-size:clamp(2.6rem,5.5vw,4.6rem); display:block; line-height:1; white-space:nowrap }
.stat b .u{ color:var(--accent); font-size:.6em; vertical-align:.18em }
.stat span{ font-family:var(--cond); font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim); display:block; margin-top:.6rem }

/* ---------- 12. Eventos ---------- */
.event{ display:grid; grid-template-columns:.8fr 2fr .9fr auto; gap:2rem; align-items:center;
  padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line-soft); position:relative }
.event:first-of-type{ border-top:1px solid var(--line-soft) }
@media (max-width:900px){ .event{ grid-template-columns:1fr; gap:.7rem } }
.event .ev-hover{ position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .6s var(--ease) }
.event .ev-hover img{ width:100%; height:100%; object-fit:cover; filter:brightness(.3) grayscale(.4) }
.event:hover .ev-hover{ opacity:1 }
.event:hover{ padding-inline:1.4rem }
.event{ transition:padding .5s var(--ease) }
.ev-date{ font-family:var(--display); font-size:clamp(1.4rem,2.2vw,2rem); color:var(--bone) }
.ev-date small{ display:block; font-family:var(--cond); font-size:.78rem; letter-spacing:.22em;
  color:var(--bone-dim); margin-top:.25rem }
.ev-name{ font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.3rem); text-transform:uppercase }
.ev-name span{ color:var(--evc,var(--accent)) }
.ev-place{ font-family:var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  font-size:.88rem }
.ev-tag{ font-family:var(--cond); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.3rem .7rem; border:1px solid var(--line); color:var(--bone-dim); display:inline-block; margin-top:.4rem }
.ev-tag.open{ border-color:var(--accent); color:var(--accent) }

/* ---------- 13. Galería ---------- */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(180px,17vw,265px); gap:12px }
@media (max-width:1000px){ .gal{ grid-template-columns:repeat(2,1fr) } }
.gal figure{ position:relative; overflow:hidden; cursor:pointer; background:var(--ink-3) }
.gal figure:nth-child(1),.gal figure:nth-child(7){ grid-row:span 2 }
@media (max-width:1000px){ .gal figure:nth-child(7){ grid-row:span 1 } }
.gal img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) brightness(.85); transition:transform 1.1s var(--ease), filter .6s }
.gal figure:hover img{ transform:scale(1.08); filter:none }
.gal figcaption{ position:absolute; left:0; bottom:0; padding:1rem 1.2rem; font-family:var(--cond);
  letter-spacing:.18em; text-transform:uppercase; font-size:.75rem;
  opacity:0; transform:translateY(8px); transition:.5s var(--ease) }
.gal figure::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(8,8,10,.75));
  opacity:0; transition:opacity .5s var(--ease) }
.gal figure:hover figcaption,.gal figure:hover::after{ opacity:1; transform:none }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:9500; background:rgba(5,5,7,.94); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:4vw; opacity:0; visibility:hidden; transition:.5s var(--ease) }
.lb.open{ opacity:1; visibility:visible }
.lb img{ max-height:88vh; max-width:100%; object-fit:contain; transform:scale(.96); transition:.6s var(--ease) }
.lb.open img{ transform:none }
.lb .close{ position:absolute; top:2rem; right:2rem; font-family:var(--cond); letter-spacing:.2em;
  text-transform:uppercase; font-size:.8rem }
.lb .nav-btn{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px;
  border:1px solid var(--line); border-radius:50%; display:grid; place-items:center }
.lb .prev{ left:2rem } .lb .next{ right:2rem }
.lb .nav-btn:hover{ background:var(--accent); color:#08080A; border-color:var(--accent) }

/* ---------- 14. Reels ---------- */
.reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem) }
@media (max-width:900px){ .reels{ grid-template-columns:1fr } }
.reel{ position:relative; overflow:hidden; background:var(--ink-3) }
.reel video{ width:100%; aspect-ratio:9/16; object-fit:cover; transition:transform 1s var(--ease) }
.reel:hover video{ transform:scale(1.04) }
.reel .r-label{ position:absolute; inset:auto 0 0 0; padding:1.4rem; display:flex; align-items:flex-end;
  justify-content:space-between; gap:1rem;
  background:linear-gradient(transparent,rgba(8,8,10,.9)) }
.reel .r-label b{ font-family:var(--display); font-size:1.35rem; text-transform:uppercase }
.reel .r-sound{ font-family:var(--cond); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--line); padding:.3rem .6rem; color:var(--bone-dim) }

/* ---------- 15. Bandas CTA ---------- */
.bands{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft) }
@media (max-width:820px){ .bands{ grid-template-columns:1fr } }
.band{ position:relative; overflow:hidden; background:var(--ink); padding:clamp(2.4rem,5vw,4.5rem);
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end }
.band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.22; filter:grayscale(.6); transition:transform 1.2s var(--ease), opacity .6s }
.band:hover img.bg{ transform:scale(1.07); opacity:.34 }
.band > *{ position:relative }
.band h3{ margin:.6rem 0 .9rem }
.band p{ color:#C6C4BE; max-width:42ch; margin-bottom:1.6rem }

/* ---------- 16. Novedades ---------- */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem) }
@media (max-width:900px){ .news{ grid-template-columns:1fr } }
.post{ display:block }
.post .thumb{ overflow:hidden; margin-bottom:1.1rem; aspect-ratio:4/3 }
.post .thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3);
  transition:transform 1.1s var(--ease), filter .6s }
.post:hover .thumb img{ transform:scale(1.07); filter:none }
.post .meta{ font-family:var(--cond); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:.5rem; display:flex; gap:.8rem; align-items:center }
.post .meta i{ font-style:normal; color:var(--accent) }
.post h4{ font-family:var(--display); font-size:1.35rem; text-transform:uppercase; line-height:1.05;
  transition:color .35s }
.post:hover h4{ color:var(--accent) }

/* ---------- 17. Patrocinadores ---------- */
.sponsors{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft) }
@media (max-width:1100px){ .sponsors{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:600px){ .sponsors{ grid-template-columns:repeat(2,1fr) } }
.sponsor{ background:var(--ink); display:grid; place-items:center; padding:1.8rem 1.2rem;
  min-height:128px; text-align:center; position:relative; transition:background .4s }
.sponsor:hover{ background:var(--ink-3) }
/* cualquier logo (color, negro o blanco) se pinta de un solo color: hueso.
   --lh fija la altura óptica de cada uno: los logotipos de una línea necesitan
   menos alto que un escudo o un bloque de tres líneas para pesar lo mismo. */
.sponsor img{ height:var(--lh,30px); width:auto; max-width:82%; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.62;
  transition:opacity .45s var(--ease), transform .5s var(--ease) }
.sponsor:hover img{ opacity:1; transform:scale(1.04) }
/* los escudos con detalle interior se pasan a gris en vez de a silueta plana */
.sponsor--crest img{ filter:grayscale(1) brightness(1.35) contrast(1.05) }
.sponsor span{ display:none; font-family:var(--cond); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:#54545C; font-size:.82rem; line-height:1.35;
  transition:color .4s }
.sponsor:hover span{ color:#9C9A95 }
.sponsor.no-img img{ display:none }
.sponsor.no-img span{ display:block }
.sponsor--cta{ background:var(--ink-2) }
.sponsor--cta span{ display:block; color:var(--accent) }
.sponsor--cta:hover span{ color:var(--bone) }

/* ---------- 18. Footer ---------- */
.footer{ border-top:1px solid var(--line-soft); padding-top:clamp(3rem,6vw,5rem); background:var(--ink-2) }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem }
@media (max-width:900px){ .foot-top{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr } }
.foot-top h5{ font-family:var(--cond); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:1.1rem }
.foot-top li a{ display:inline-block; padding:.28rem 0; color:#C6C4BE; font-size:.95rem; transition:color .3s, transform .3s }
.foot-top li a:hover{ color:var(--accent); transform:translateX(4px) }
.foot-logo{ height:96px; margin-bottom:1.2rem }
.newsletter{ display:flex; border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-top:1rem }
.newsletter input{ flex:1; background:none; border:0; color:var(--bone); font-family:var(--body); outline:none }
.newsletter input::placeholder{ color:#6A6A72 }
.newsletter button{ font-family:var(--cond); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  color:var(--accent) }
.socials{ display:flex; gap:.6rem; margin-top:1.4rem }
.socials a{ width:42px; height:42px; border:1px solid var(--line); display:grid; place-items:center;
  color:#CFCDC7; font-size:1.05rem;
  transition:background .4s var(--ease), color .4s, border-color .4s, transform .4s var(--ease) }
.socials a:hover{ background:var(--accent); color:#08080A; border-color:var(--accent); transform:translateY(-2px) }
.socials a i{ line-height:1 }
.foot-mega{ padding-block:clamp(2rem,5vw,3rem) 0; overflow:hidden }
.foot-mega b{ font-family:var(--display); font-size:clamp(3rem,15vw,13rem); line-height:.8; display:block;
  text-align:center; color:transparent; -webkit-text-stroke:1px rgba(244,242,237,.16) }
.foot-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line-soft); margin-top:2rem; padding-block:1.6rem;
  font-family:var(--cond); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#6A6A72 }

/* ---------- 19. Accesibilidad / motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  .char{ opacity:1 !important; transform:none !important }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- 20. Modo captura (?static) — sólo para revisión de diseño ---------- */
html.static *,html.static *::before,html.static *::after{ animation:none !important; transition:none !important }
html.static #loader{ display:none !important }
html.static [data-reveal],html.static .char{ opacity:1 !important; transform:none !important }

/* ============================================================
   21. PÁGINAS INTERNAS
   ============================================================ */

/* acento por marca a nivel de página */
body[data-brand="race"]{ --accent:var(--race) }
body[data-brand="hybrid"]{ --accent:var(--hybrid) }
body[data-brand="stadium"]{ --accent:var(--stadium) }

/* enlace activo en la barra */
.nav > a.is-active{ color:var(--bone) }
.nav > a.is-active::after{ transform:scaleX(1) }

/* ---------- cabecera de página ---------- */
.page-hero{
  position:relative; min-height:clamp(420px,62vh,660px); display:flex; align-items:flex-end;
  padding-block:calc(var(--nav-h) + 3rem) clamp(2.5rem,5vw,4.5rem); overflow:hidden;
}
.page-hero .ph-media{ position:absolute; inset:0; z-index:-2 }
.page-hero .ph-media img{ width:100%; height:100%; object-fit:cover; object-position:center 40% }
.page-hero .ph-media::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.45) 45%,var(--ink) 100%) }
.page-hero h1{ margin:.8rem 0 0 }
.page-hero .ph-sub{ margin-top:1.4rem; max-width:56ch; color:#CFCDC7;
  font-size:clamp(1.02rem,1.05vw,1.25rem) }
.page-hero .brand-logo{ height:clamp(84px,9vw,128px); width:auto; margin:1.8rem 0 1.4rem }

.breadcrumb{ font-family:var(--cond); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
.breadcrumb a:hover{ color:var(--accent) }
.breadcrumb span{ opacity:.5 }

/* ---------- texto ---------- */
.prose p{ margin-bottom:1.15rem; color:#CFCDC7 }
.prose p:last-child{ margin-bottom:0 }
.prose strong{ color:var(--bone); font-weight:600 }
.prose h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin:2.4rem 0 1rem }
.prose ul{ margin:0 0 1.3rem }
.prose ul li{ position:relative; padding-left:1.5rem; margin-bottom:.55rem; color:#CFCDC7 }
.prose ul li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  background:var(--accent); transform:rotate(45deg) }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start }
.side-col{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:start }
@media (max-width:900px){ .two-col,.side-col{ grid-template-columns:1fr } }
.sticky{ position:sticky; top:calc(var(--nav-h) + 1.5rem) }
@media (max-width:900px){ .sticky{ position:static } }

.section-head{ margin-bottom:clamp(2rem,4vw,3.2rem) }
.section-head h2{ margin-top:1rem }

/* ---------- pasos numerados ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft) }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr } }
.step{ background:var(--ink); padding:clamp(1.6rem,2.4vw,2.2rem) }
.step b{ font-family:var(--display); font-size:2.4rem; color:var(--accent); display:block; line-height:1 }
.step h4{ font-family:var(--display); font-size:1.15rem; text-transform:uppercase; margin:.9rem 0 .5rem }
.step p{ font-size:.93rem; color:var(--bone-dim) }

/* ---------- tarjetas ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.4rem) }
.cards.c2{ grid-template-columns:repeat(2,1fr) }
.cards.c4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1000px){ .cards,.cards.c4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .cards,.cards.c2,.cards.c4{ grid-template-columns:1fr } }
.card{ border:1px solid var(--line-soft); padding:clamp(1.5rem,2.2vw,2rem); position:relative;
  transition:border-color .4s, background .4s, transform .5s var(--ease) }
.card:hover{ border-color:var(--line); background:var(--ink-2); transform:translateY(-3px) }
.card .ico{ width:42px; height:42px; border:1px solid var(--accent); color:var(--accent);
  display:grid; place-items:center; margin-bottom:1.1rem; font-family:var(--display); font-size:1rem }
.card h4{ font-family:var(--display); font-size:1.25rem; text-transform:uppercase; margin-bottom:.5rem }
.card p{ font-size:.94rem; color:var(--bone-dim) }
.card .tag{ font-family:var(--cond); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:.6rem }

/* ---------- ficha de datos ---------- */
.data-list{ border-top:1px solid var(--line-soft) }
.data-list div{ display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.95rem 0; border-bottom:1px solid var(--line-soft) }
.data-list dt,.data-list .k{ font-family:var(--cond); font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim); flex:none }
.data-list dd,.data-list .v{ text-align:right; color:var(--bone); font-weight:500 }

/* ---------- tabla de precios ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft) }
@media (max-width:820px){ .pricing{ grid-template-columns:1fr } }
.tier{ background:var(--ink); padding:clamp(1.8rem,2.6vw,2.4rem); position:relative }
.tier.featured{ background:var(--ink-2) }
.tier.featured::before{ content:'Más elegida'; position:absolute; top:0; right:0;
  font-family:var(--cond); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  background:var(--accent); color:#08080A; padding:.35rem .8rem }
.tier h4{ font-family:var(--display); font-size:1.6rem; text-transform:uppercase }
.tier .price{ font-family:var(--display); font-size:clamp(2.4rem,4vw,3.2rem); line-height:1;
  margin:.8rem 0 .3rem }
.tier .price small{ font-family:var(--cond); font-size:.9rem; letter-spacing:.12em; color:var(--bone-dim) }
.tier ul{ margin:1.4rem 0 1.8rem }
.tier li{ position:relative; padding-left:1.5rem; margin-bottom:.6rem; font-size:.94rem; color:#CFCDC7 }
.tier li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px;
  background:var(--accent); transform:rotate(45deg) }

/* ---------- acordeón (reglamento / faq) ---------- */
.acc{ border-top:1px solid var(--line-soft) }
.acc-item{ border-bottom:1px solid var(--line-soft) }
.acc-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.35rem 0; text-align:left; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.35rem); transition:color .3s }
.acc-head:hover{ color:var(--accent) }
.acc-head .ind{ position:relative; width:16px; height:16px; flex:none }
.acc-head .ind::before,.acc-head .ind::after{ content:''; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:currentColor; transition:transform .45s var(--ease) }
.acc-head .ind::after{ transform:rotate(90deg) }
.acc-item.open .acc-head{ color:var(--accent) }
.acc-item.open .ind::after{ transform:rotate(0) }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.acc-item.open .acc-body{ grid-template-rows:1fr }
.acc-body > div{ overflow:hidden }
.acc-body .inner{ padding-bottom:1.6rem; max-width:78ch }
.acc-body p{ color:#CFCDC7; margin-bottom:.9rem }
.acc-body ul li{ position:relative; padding-left:1.5rem; margin-bottom:.5rem; color:#CFCDC7 }
.acc-body ul li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px;
  background:var(--accent); transform:rotate(45deg) }

/* ---------- aviso ---------- */
.notice{ border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:1.1rem 1.4rem; background:var(--ink-2); font-size:.94rem; color:#CFCDC7 }
.notice b{ color:var(--bone) }

/* ---------- formularios ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.form .full{ grid-column:1/-1 }
@media (max-width:640px){ .form{ grid-template-columns:1fr } }
.field label{ display:block; font-family:var(--cond); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.55rem }
.field input,.field textarea,.field select{
  width:100%; background:var(--ink-2); border:1px solid var(--line-soft); color:var(--bone);
  font-family:var(--body); font-size:1rem; padding:.9rem 1rem; outline:none;
  transition:border-color .3s, background .3s;
}
.field textarea{ min-height:150px; resize:vertical }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent); background:var(--ink-3) }
.field input::placeholder,.field textarea::placeholder{ color:#5E5E66 }
.check{ display:flex; gap:.8rem; align-items:flex-start; font-size:.9rem; color:var(--bone-dim) }
.check input{ width:18px; height:18px; flex:none; margin-top:.15rem; accent-color:var(--accent) }
.form-msg{ font-family:var(--cond); letter-spacing:.14em; text-transform:uppercase; font-size:.82rem;
  color:var(--accent); margin-top:1rem; display:none }
.form-msg.show{ display:block }

/* ---------- mapa ---------- */
.map{ position:relative; aspect-ratio:16/9; border:1px solid var(--line-soft); overflow:hidden;
  background:var(--ink-2); display:grid; place-items:center; text-align:center; padding:2rem }
.map img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;
  filter:grayscale(1) }
.map .m-inner{ position:relative }
.map .pin{ width:52px; height:52px; border-radius:50%; background:var(--accent); color:#08080A;
  display:grid; place-items:center; margin:0 auto 1rem; animation:ping 2.4s var(--ease) infinite }
@keyframes ping{ 0%,100%{ box-shadow:0 0 0 0 rgba(164,229,51,.5) } 60%{ box-shadow:0 0 0 22px rgba(164,229,51,0) } }

/* ---------- CTA final ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(4rem,8vw,7rem) }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.2; filter:grayscale(.5) }
.cta-band > .wrap{ position:relative }
.cta-band h2{ margin-bottom:1.4rem }
.cta-band p{ max-width:52ch; margin:0 auto 2rem; color:#CFCDC7 }

/* ---------- listado de novedades ---------- */
.post-list .post{ display:grid; grid-template-columns:.9fr 2fr; gap:clamp(1.5rem,3vw,3rem);
  align-items:center; padding-block:clamp(1.5rem,2.5vw,2.2rem); border-bottom:1px solid var(--line-soft) }
@media (max-width:760px){ .post-list .post{ grid-template-columns:1fr } }
.post-list .thumb{ aspect-ratio:16/10; margin:0 }

/* ============================================================
   22. AJUSTES MÓVIL
   ============================================================ */
@media (max-width:760px){
  :root{ --nav-h:66px }

  /* los titulares a 0.88 se apelotonan en pantalla pequeña */
  h1,h2,h3,.display{ line-height:1.02; letter-spacing:-.005em }
  .h-xl{ font-size:clamp(2.9rem,13vw,4.6rem); line-height:.98 }
  .h-lg{ font-size:clamp(2.3rem,10.5vw,3.6rem) }
  .h-md{ font-size:clamp(1.9rem,8vw,2.6rem) }
  .lead{ font-size:1.02rem }

  /* HÉROE: el contenido se colocaba abajo y desbordaba por arriba,
     metiéndose debajo del logo. Ahora arranca bajo la cabecera. */
  .hero{ align-items:flex-start; min-height:100svh;
    padding-top:calc(var(--nav-h) + 2.4rem); padding-bottom:2.5rem }
  .hero h1{ margin:.9rem 0 1.6rem }
  .hero-bottom{ margin-top:2rem; gap:1.8rem }
  .hero-copy{ max-width:100% }
  .hero-cta{ gap:.8rem }
  .hero-cta .btn{ width:100%; justify-content:center }

  /* botones algo menos anchos de letra para que quepan */
  .btn{ padding:.95rem 1.5rem; font-size:.92rem; letter-spacing:.14em }

  /* cabeceras de página interna */
  .page-hero{ min-height:auto; padding-block:calc(var(--nav-h) + 2.6rem) 2.8rem }
  .page-hero .brand-logo{ height:76px; margin:1.4rem 0 1rem }
  .page-hero .ph-sub{ margin-top:1rem }

  /* modalidades */
  .mode{ min-height:auto; padding-block:2.6rem }
  .mode-logo{ height:72px; margin-bottom:1rem }
  .mode h3{ line-height:1.05; margin-bottom:1rem }
  .mode p{ max-width:100% }
  .mode .tags{ margin-bottom:1.2rem }

  /* secciones y bloques */
  .section{ padding-block:3.4rem }
  .marquee span{ font-size:1.5rem; gap:1.6rem }
  .marquee-track{ gap:1.6rem }
  .countdown{ min-width:100%; padding:1.1rem 1.2rem }
  .cd-grid b{ font-size:1.9rem }
  .stat{ padding:1.6rem 1rem }
  .band{ min-height:auto; padding:2.4rem 1.5rem }
  .cta-band{ padding-block:3.6rem }
  .foot-mega b{ -webkit-text-stroke-width:.5px }
  .big-quote{ font-size:1.15rem; line-height:1.35 }

  /* eventos: en columna, sin el salto de padding al pasar el dedo */
  .event{ padding-block:1.6rem }
  .event:hover{ padding-inline:0 }
  .ev-date{ font-size:1.6rem }
  .ev-name{ font-size:1.7rem }

  /* galería y noticias */
  .gal{ grid-auto-rows:150px; gap:8px }
  .post-list .post{ gap:1rem }
}

@media (max-width:420px){
  .h-xl{ font-size:2.7rem }
  .btn{ font-size:.86rem; letter-spacing:.12em }
  .gal{ grid-auto-rows:130px }
}