/* ============================================================
   TOUR URUGUAY — Sistema de diseño (paleta DÍA)
   Fondo claro + celeste de marca. Paleta única definida en :root.
   ============================================================ */

/* ============================================================
   PALETA ÚNICA — DÍA (fondo claro, acentos celeste de marca)
   Tokens de color base del sitio. El acento primario (--lime) es el
   celeste vivo de marca → texto ink oscuro legible encima.
   ============================================================ */
:root{
  /* base — fondo claro */
  --ink:        oklch(0.97 0.006 240);   /* "fondo" claro */
  --ink-2:      oklch(0.99 0.004 240);   /* superficies / cards casi blancas */
  --ink-3:      oklch(0.95 0.008 240);
  --ink-4:      oklch(0.91 0.012 240);
  --tint:       0.30 0.03 255;           /* hairlines/overlays oscuros sobre claro */
  --line:       oklch(var(--tint) / 0.12);
  --line-2:     oklch(var(--tint) / 0.20);
  --accent-ink: oklch(0.16 0.02 258);    /* texto sobre acentos claros (siempre oscuro) */
  --chrome:     oklch(0.99 0.004 240 / 0.82); /* fondo de nav/controles flotantes */

  /* text — oscuro sobre claro */
  --paper:      oklch(0.22 0.025 255);   /* texto principal oscuro */
  --muted:      oklch(0.44 0.022 255);
  --faint:      oklch(0.58 0.02 255);

  /* accents — celeste de marca */
  --celeste:        oklch(0.62 0.16 245);
  --celeste-bright: oklch(0.52 0.17 250);
  --celeste-deep:   oklch(0.50 0.16 252);
  --lime:           oklch(0.80 0.16 230);  /* celeste vivo de marca → CTA, texto ink oscuro */
  --lime-deep:      oklch(0.68 0.16 238);

  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "Saira Condensed", system-ui, sans-serif;
  --font-body: "Saira", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html{ overflow-x: clip; }

/* subtle film grain over whole page */
body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  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='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display: block; max-width: 100%; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--lime); color: var(--ink); }

/* ---------- layout ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.section{ position: relative; padding-block: clamp(72px, 9vw, 130px); }

@media (max-width: 640px){
  .wrap{ padding-inline: 18px; }
}

/* ---------- type ---------- */
.display{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--celeste-bright);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{
  content:""; width: 26px; height: 2px; background: var(--celeste); display: inline-block;
}
.eyebrow.lime{ color: var(--lime); }
.eyebrow.lime::before{ background: var(--lime); }
.eyebrow.plain::before{ display: none; }

.mono{ font-family: var(--font-mono); }
.lead{ font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--muted); font-weight: 400; }

.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 4.6vw, 62px);
  padding-bottom: 0.06em;
}
.outline-word{
  -webkit-text-stroke: 1.4px var(--line-2);
  color: transparent;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 17px;
  padding: 16px 28px;
  border-radius: 999px;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn .arrow{ transition: transform .3s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

.btn-lime{
  background: var(--lime); color: var(--accent-ink);
  box-shadow: 0 0 0 0 oklch(0.89 0.205 124 / 0.5);
}
.btn-lime:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px oklch(0.89 0.205 124 / 0.55);
}
.btn-celeste{ background: var(--celeste); color: var(--accent-ink); }
.btn-celeste:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -10px oklch(0.74 0.145 233 / 0.5); }

.btn-ghost{
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn-ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--paper); background: oklch(var(--tint) / 0.04); }

.btn-sm{ font-size: 14px; padding: 11px 18px; }

/* ---------- chips ---------- */
.chip{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: oklch(var(--tint) / 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--paper);
}
.chip .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ---------- cards ---------- */
.card{
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

/* ---------- reveal animation (opacity-only: never shifts layout) ---------- */
.reveal{ opacity: 0; transition: opacity .7s var(--ease); }
.reveal.in{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transition: none; }
  *{ scroll-behavior: auto !important; }
}

/* ---------- placeholder (striped) ---------- */
.ph{
  position: relative; overflow: hidden;
  background-color: var(--ink-2);
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(var(--tint) / 0.035) 0 12px,
    transparent 12px 24px
  );
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; align-items: center; justify-content: center;
}
.ph-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
  background: oklch(0.15 0.02 258 / 0.7);
  padding: 7px 12px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center; max-width: 80%;
}

/* ---------- divider speed-lines ---------- */
.speedlines{
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.5;
}
.speedlines span{
  position: absolute; height: 1px; left: 0; right: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- marquee ---------- */
.marquee{ overflow: hidden; white-space: nowrap; }
.marquee-track{ display: inline-flex; align-items: center; gap: 28px; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* glow */
.glow{ position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.4; }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{ display: flex; gap: 10px; }
.cd-cell{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: oklch(var(--tint) / 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 12px;
  padding: 14px 18px; min-width: 78px;
}
.cd-num{ font-size: 38px; font-weight: 700; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.cd-lbl{ font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.countdown.compact .cd-cell{ padding: 8px 10px; min-width: 52px; border-radius: 9px; }
.countdown.compact .cd-num{ font-size: 22px; }
@media (max-width: 480px){
  .cd-cell{ padding: 11px 12px; min-width: 60px; }
  .cd-num{ font-size: 30px; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background: var(--chrome);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner{ display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.brand{ display: flex; align-items: center; gap: 11px; }
.brand-mark{
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--lime); color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  transform: skewX(-6deg);
}
.brand-mark span{ transform: skewX(6deg); }
.brand-name{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.92; font-size: 18px; }
.brand-name small{ display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em; color: var(--celeste-bright); font-weight: 400; }
.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-links a{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color .2s; position: relative; }
.nav-links a::after{ content:""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1.5px; background: var(--lime); transition: right .3s var(--ease); }
.nav-links a:hover{ color: var(--paper); }
.nav-links a:hover::after{ right: 0; }
.nav-right{ display: flex; align-items: center; gap: 16px; }
.nav-burger{ display: none; }
.nav-mobile{ display: none; }

/* Logo blanco → oscuro cuando el nav tiene fondo claro (scrolled o menú abierto) */
.nav.scrolled .brand-logo, .nav.open .brand-logo{ filter: brightness(0); }

@media (max-width: 980px){
  .nav-links, .nav-cta{ display: none; }
  .nav-burger{
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .nav-burger span{ display: block; width: 20px; height: 2px; background: var(--paper); position: relative; transition: background .2s var(--ease); }
  .nav-burger span::before, .nav-burger span::after{ content:""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--paper); transition: transform .25s var(--ease), top .25s var(--ease); }
  .nav-burger span::before{ top: -6px; } .nav-burger span::after{ top: 6px; }

  /* estado abierto → icono X */
  .nav.open .nav-burger span{ background: transparent; }
  .nav.open .nav-burger span::before{ top: 0; transform: rotate(45deg); }
  .nav.open .nav-burger span::after{ top: 0; transform: rotate(-45deg); }

  /* panel desplegable */
  .nav.open{ background: var(--chrome); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
  .nav.open .nav-mobile{ display: block; }
  .nav-mobile-inner{ display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 24px; }
  .nav-mobile a:not(.btn){
    font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--paper);
    padding: 14px 4px; border-bottom: 1px solid var(--line);
  }
  .nav-mobile .btn{ margin-top: 18px; justify-content: center; }
}

/* ============================================================
   HERO + FINAL CTA = zonas "media" siempre oscuras (van sobre foto),
   independientes de la paleta clara.
   ============================================================ */
.hero, .finalcta{
  --ink:   oklch(0.15 0.02 258);
  --ink-2: oklch(0.19 0.024 258);
  --ink-3: oklch(0.24 0.028 258);
  --paper: oklch(0.97 0.008 250);
  --muted: oklch(0.74 0.018 252);
  --faint: oklch(0.62 0.02 255);
  --tint:  1 0 0;
  color: var(--paper);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero-bg{ position: absolute; inset: 0; z-index: 0; }
.hero-bg .ph{ width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, oklch(0.15 0.02 258 / 0.55) 0%, oklch(0.15 0.02 258 / 0.2) 30%, oklch(0.15 0.02 258 / 0.75) 72%, var(--ink) 100%),
    linear-gradient(95deg, oklch(0.15 0.02 258 / 0.92) 0%, oklch(0.15 0.02 258 / 0.4) 50%, transparent 100%);
}
.hero-grid-lines{ position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
}
.hero-content{ position: relative; z-index: 3; flex: 1; display: flex; align-items: center; }
.hero-ticker{ position: relative; z-index: 3; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: oklch(0.15 0.02 258 / 0.5); backdrop-filter: blur(6px); padding: 13px 0;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero-h1{ font-size: clamp(74px, 17vw, 250px); margin: 14px 0 6px; }
.hero-h1 .stroke{ -webkit-text-stroke: 2px var(--paper); color: transparent; }
.hero-sub{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: 0.01em; }
.hero-sub .div{ width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); }
.hero-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-cdwrap{ display: flex; flex-direction: column; gap: 12px; }
.hero-cdwrap .lbl{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.hero-bottom{ position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 34px; flex-wrap: wrap; }
.hero-scroll{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 10px; }
.hero-scroll .line{ width: 1px; height: 40px; background: linear-gradient(var(--lime), transparent); animation: scrollpulse 2s var(--ease) infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity: .3; } 50%{ opacity: 1; } }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{ border-block: 1px solid var(--line); background: var(--ink-2); }
.stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
.stat{ padding: 38px 28px; border-left: 1px solid var(--line); position: relative; }
.stat:first-child{ border-left: none; }
.stat-num{ font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--paper); }
.stat-num .suf{ color: var(--lime); font-size: 0.6em; }
.stat-lbl{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
@media (max-width: 760px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3){ border-left: none; } .stat{ border-top: 1px solid var(--line); } .stat:nth-child(-n+2){ border-top: none; } }

/* ============================================================
   IDENTIDAD
   ============================================================ */
.identidad{ background: var(--ink-2); border-block: 1px solid var(--line); }
.identidad-grid{ display: grid; grid-template-columns: 460px 1fr; gap: 54px; align-items: center; }
.identidad-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px oklch(0.5 0.16 252 / 0.35); }
.identidad-media img{ width: 100%; height: auto; display: block; }
.identidad-cap{ position: absolute; left: 16px; bottom: 16px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.98 0.004 240); background: oklch(0.2 0.03 255 / 0.55); backdrop-filter: blur(8px); padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14); }
.identidad-copy{ max-width: 560px; }
@media (max-width: 900px){
  .identidad-grid{ grid-template-columns: 1fr; gap: 34px; }
  .identidad-media{ max-width: 420px; }
}

/* ============================================================
   MODALIDADES
   ============================================================ */
.sec-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 72px; }
.sec-head .lead{ max-width: 440px; }
.mod-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; }
.mod-card{ padding: 30px; display: flex; flex-direction: column; min-height: 460px; position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.mod-card:hover{ transform: translateY(-6px); }
.mod-card.lime:hover{ box-shadow: inset 0 0 0 1px var(--lime-deep), 0 30px 60px -30px oklch(0.89 0.205 124 / 0.4); }
.mod-card.celeste:hover{ box-shadow: inset 0 0 0 1px var(--celeste), 0 30px 60px -30px oklch(0.74 0.145 233 / 0.4); }
.mod-top{ display: flex; align-items: flex-start; justify-content: space-between; }
.mod-idx{ font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.mod-perfil{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.mod-name{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: 1; margin-top: 26px; }
.mod-metrics{ display: flex; gap: 26px; margin-top: 26px; }
.mod-metric .v{ font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.mod-metric .v .u{ font-size: 0.5em; color: var(--muted); margin-left: 3px; }
.mod-metric .k{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.mod-desc{ color: var(--muted); margin-top: 20px; line-height: 1.5; }
.mod-inc{ list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.mod-inc li{ font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.mod-inc li::before{ content:"→"; color: var(--lime); }
.mod-foot{ margin-top: auto; padding-top: 24px; }
.mod-accent{ position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.mod-card.lime .mod-accent{ background: var(--lime); }
.mod-card.celeste .mod-accent{ background: var(--celeste); }
@media (max-width: 920px){ .mod-grid{ grid-template-columns: 1fr; } .mod-card{ min-height: 0; } }

/* ============================================================
   INSCRIPCIÓN
   ============================================================ */
.insc{ background: var(--ink-2); border-block: 1px solid var(--line); position: relative; overflow: hidden; }
.insc-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: stretch; }
.insc-paths{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.path-card{ padding: 30px; display: flex; flex-direction: column; gap: 16px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative; }
.path-card:hover{ transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -28px oklch(0 0 0 / 0.6); }
.path-flag{ font-size: 30px; }
.path-card h4{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 0.95; }
.path-card p{ color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.insc-aside{ display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 38px; }
.urgency{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.urgency .pulse{ width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 var(--lime); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 oklch(0.89 0.205 124 / 0.6); } 70%{ box-shadow: 0 0 0 12px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }
.cupos-bar{ height: 9px; border-radius: 999px; background: oklch(var(--tint) / 0.08); overflow: hidden; }
.cupos-bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--celeste), var(--lime)); border-radius: 999px; }
@media (max-width: 920px){ .insc-grid{ grid-template-columns: 1fr; } .insc-paths{ grid-template-columns: 1fr; } }

/* ============================================================
   RECORRIDOS
   ============================================================ */
.tabs{ display: inline-flex; gap: 6px; padding: 6px; background: var(--ink-2); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.tab{ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 0.03em; padding: 10px 22px; border-radius: 999px; color: var(--muted); transition: .25s var(--ease); }
.tab.on{ background: var(--paper); color: var(--ink); }
.route-panel{ display: grid; grid-template-columns: 1fr 360px; gap: 22px; margin-top: 34px; }
.route-map{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); min-height: 460px; background: var(--ink-2); position: relative; }
.route-map iframe{ width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
.route-info{ display: flex; flex-direction: column; gap: 16px; }
.route-stat{ display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.route-stat .k{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.route-stat .v{ font-family: var(--font-display); font-weight: 800; font-size: 30px; }
.route-stat .v .u{ font-size: 0.5em; color: var(--muted); }
@media (max-width: 900px){ .route-panel{ grid-template-columns: 1fr; } }

/* Placeholder de recorrido (mapa RideWithGPS oculto por ahora) */
.route-soon{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.route-soon-art{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.route-soon-body{ position: relative; z-index: 1; max-width: 420px; }
.route-soon-badge{ display: inline-block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--celeste-bright); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--ink-3); }
.route-soon-title{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); line-height: 0.95; margin: 18px 0 12px; letter-spacing: 0.01em; }
.route-soon-sub{ color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ============================================================
   CIRCUITO / SEDES
   ============================================================ */
.circuito{ position: relative; overflow: hidden; }
.sede-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; }
.sede{ padding: 34px 26px; border-left: 1px solid var(--line); position: relative; transition: background .3s; }
.sede:first-child{ border-left: none; }
.sede:hover{ background: oklch(var(--tint) / 0.02); }
.sede-dot{ width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--faint); margin-bottom: 22px; }
.sede.next .sede-dot{ background: var(--lime); box-shadow: 0 0 0 6px oklch(0.89 0.205 124 / 0.18); }
.sede.done .sede-dot{ background: var(--celeste); box-shadow: inset 0 0 0 2px var(--celeste); }
.sede-mes{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--faint); }
.sede-name{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; margin-top: 8px; min-height: 1.9em; }
.sede-name small{ display: block; font-size: 0.42em; color: var(--muted); letter-spacing: 0.1em; margin-top: 8px; }
.sede-estado{ display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
.sede.next .sede-estado{ background: var(--lime); color: var(--accent-ink); box-shadow: none; }
@media (max-width: 760px){ .sede-row{ grid-template-columns: 1fr; } .sede{ border-left: none; border-top: 1px solid var(--line); } .sede:first-child{ border-top: none; } }

/* ============================================================
   CÓMO LLEGAR
   ============================================================ */
.llegar-tabs{ display: flex; gap: 10px; margin-bottom: 30px; }
.llegar-grid{ display: grid; gap: 12px; }
.llegar-row{ display: grid; grid-template-columns: 180px 1fr auto auto; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); transition: .25s var(--ease); }
.llegar-row:hover{ box-shadow: inset 0 0 0 1px var(--line-2); transform: translateX(4px); }
.llegar-desde{ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20px; }
.llegar-ruta{ color: var(--muted); font-size: 14px; line-height: 1.45; }
.llegar-km{ font-family: var(--font-display); font-weight: 800; font-size: 26px; white-space: nowrap; }
.llegar-km .u{ font-size: 0.5em; color: var(--muted); }
.llegar-t{ font-family: var(--font-mono); font-size: 13px; color: var(--celeste-bright); white-space: nowrap; }
.busb{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.busb.dir{ background: var(--lime); color: var(--accent-ink); }
.busb.con{ box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
.tips{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.tip{ padding: 22px; border-radius: 14px; background: oklch(var(--tint) / 0.02); box-shadow: inset 0 0 0 1px var(--line); }
.tip .num{ font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--lime); }
.tip h5{ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 16px; margin: 8px 0 6px; }
.tip p{ font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 820px){
  .llegar-row{ grid-template-columns: 1fr auto; row-gap: 8px; }
  .llegar-ruta{ grid-column: 1 / -1; order: 3; }
  .tips{ grid-template-columns: 1fr; }
}

/* ============================================================
   GALERÍA
   ============================================================ */
.gal-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.gal-item{ position: relative; border-radius: 14px; overflow: hidden; }
.gal-item.tall{ grid-row: span 2; }
.gal-item.wide{ grid-column: span 2; }
.gal-item .ph{ width: 100%; height: 100%; border-radius: 0; }
.gal-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px){ .gal-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .gal-item.wide{ grid-column: span 2; } }

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors{ background: var(--ink-2); border-block: 1px solid var(--line); }
/* Slider de sponsors — 3 visibles (2 / 1 en pantallas chicas) */
.spon-slider{ overflow: hidden; margin-top: 36px; }
.spon-track{ display: flex; transition: transform .55s var(--ease); }
.spon-slide{ flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 2.5px; }
@media (max-width: 560px){ .spon-slide{ flex-basis: 100%; max-width: 100%; padding: 0; } }
.spon-nav{ display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.spon-arrow{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--paper); font-size: 18px; transition: background .2s var(--ease); }
.spon-arrow:hover:not(:disabled){ background: var(--ink-3); }
.spon-arrow:disabled{ opacity: 0.3; cursor: default; }
.spon-dots{ display: flex; align-items: center; gap: 8px; }
.spon-dots button{ width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: all .25s var(--ease); }
.spon-dots button.on{ background: var(--lime); width: 22px; border-radius: 4px; }
.spon-cell{ position: relative; height: 360px; display: block; background: none; box-shadow: none; border-radius: 0; }
@media (max-width: 560px){ .spon-cell{ height: 320px; } }
.spon-cell .ph{ width: 100%; height: 100%; border-radius: 0; }
.spon-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0; }
a.spon-cell{ transition: transform .2s var(--ease); }
a.spon-cell:hover{ transform: translateY(-3px); }
.spon-cta{ margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 34px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(100deg, oklch(0.74 0.145 233 / 0.10), transparent); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finalcta{ position: relative; overflow: hidden; text-align: center; }
.finalcta-inner{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.finalcta h2{ font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 8.4vw, 116px); line-height: 1; padding-bottom: 0.08em; margin-bottom: 6px; }
.finalcta h2 .stroke{ -webkit-text-stroke: 2px var(--paper); color: transparent; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top: 1px solid var(--line); padding-block: 60px 36px; }
.footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer h6{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.footer ul{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a{ color: var(--muted); font-size: 14px; transition: color .2s; }
.footer ul a:hover{ color: var(--paper); }
.footer-bottom{ margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: 0.04em; }
@media (max-width: 820px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-top{ grid-template-columns: 1fr; } }

/* ============================================================
   LOGO REAL (nav + footer)
   ============================================================ */
.brand-logo{ height: 40px; width: auto; display: block; }
.footer-logo{ height: 52px; width: auto; opacity: 0.95; }
.esport-logo{ height: 30px; width: auto; filter: invert(1) brightness(1.6); opacity: 0.8; }

/* ============================================================
   HERO — imagen real de fondo
   ============================================================ */
.hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }

/* ============================================================
   BANNERS PUBLICITARIOS
   ============================================================ */
.banners{ background: var(--ink-2); border-block: 1px solid var(--line); }
.banner-stage{
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); background: var(--ink);
  aspect-ratio: 21 / 8;
}
.banner-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.banner-slide.on{ opacity: 1; }
.banner-slide img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-slide .b-scrim{ position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.12 0.02 250 / 0.55), transparent 55%); }
.banner-slide .b-tag{ position: absolute; left: 22px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); background: oklch(0.12 0.02 250 / 0.6); padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
/* empty sellable slot */
.banner-empty{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  background-color: var(--ink-3);
  background-image: repeating-linear-gradient(-45deg, oklch(var(--tint) / 0.035) 0 14px, transparent 14px 28px);
}
.banner-empty .be-k{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--celeste-bright); }
.banner-empty .be-t{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 40px); line-height: 1; }
.banner-empty .be-s{ font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.banner-dots{ display: flex; gap: 8px; }
.banner-dots button{ width: 30px; height: 5px; border-radius: 999px; background: oklch(var(--tint) / 0.16); transition: background .25s, width .25s; }
.banner-dots button.on{ background: var(--lime); width: 44px; }
.banner-foot{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.banner-formats{ display: flex; gap: 10px; flex-wrap: wrap; }
.fmt{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.fmt b{ color: var(--paper); font-weight: 700; }