/* ===================
   Maratón La Serena 2026 - styles.css
   =================== */

/* ---------- Brand tokens ---------- */
:root {
  /* Layout */
  --maxw: 1200px;
  --radius: 16px;

  /* Fonts */
  --font-heading: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Sizes */
  --fs-display: clamp(2rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.4rem, 2.6vw, 2rem);
  --fs-h3: clamp(1.05rem, 1.8vw, 1.25rem);
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 1.4vw, 1.125rem);

  /* Brand colors (HSL based for modularity) */
  --brand-h: 340;
  /* Hue: primary (magenta/pink) */
  --brand-s: 90%;
  /* Saturation */
  --brand-l: 45%;
  /* Lightness */

  --brand-primary: hsl(var(--brand-h), var(--brand-s), var(--brand-l));

  --acc-h: 0;
  --acc-s: 0%;
  --acc-l: 10%;
  --brand-accent: #1a1a1a;
  --brand-accent-700: #000000;

  /* UI base */
  --bg-page: #ffffff;
  --text-900: #0b0e14;
  --text-600: #5e6a78;
  --card: #f7f8fa;
  --border: #e6e8ee;
  --shadow: 0 12px 40px rgba(0, 0, 0, .12);

  /* Alternating bands */
  --band-plain: #ffffff;
  --band-soft: hsl(var(--brand-h), 50%, 98%);
  --band-soft-2: hsl(var(--brand-h), 40%, 96%);

  /* Section tokens */
  --section-kicker-color: var(--text-600);
  --section-title-color: var(--text-900);
  --ghost-title-color: hsl(var(--brand-h), 25%, 88%);
  --ghost-opacity: .55;

  /* Logos carousel */
  --lc-gap: 16px;
  --lc-item-min: 160px;
  --lc-item-max: 220px;
  --lc-autoplay-ms: 2800;
  --lc-arrow-bg: hsla(var(--brand-h), 70%, 15%, 0.55);
  --lc-arrow-bd: hsla(0, 0%, 100%, 0.18);

  /* Hero / Slider Overlays */
  --hero-overlay-opacity: 0.65;
  --hero-pattern-opacity: 0.12;

  /* Slider */
  --slide-fade-ms: 1200ms;
  --kenburns-ms: 9000ms;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-900);
  line-height: 1.55;
  overflow-x: clip;
  position: relative;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body)
}

img {
  max-width: 100%;
  display: block
}

a {
  color: var(--brand-accent);
  text-decoration: none
}

a:not(.btn):hover {
  color: var(--brand-accent-700)
}

.container {
  width: min(92vw, var(--maxw));
  margin-inline: auto
}

.grid {
  display: grid;
  gap: 24px
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  margin: 0 0 .4rem
}

h1 {
  font-size: var(--fs-display);
  line-height: 1.15;
  font-weight: var(--fw-black);
  color: #fff
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--section-title-color)
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold)
}

p {
  margin: 0 0 .75rem
}

.lead {
  color: var(--text-600);
  font-size: var(--fs-lead)
}

.eyebrow {
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e9eef4;
  font-weight: var(--fw-medium)
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-accent);
  color: #fff;
  padding: .9rem 1.2rem;
  border-radius: 12px;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow);
  transition: .2s transform, .2s background;
}

.btn:hover {
  background: var(--brand-accent-700);
  transform: translateY(-1px)
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--text-900);
  border: 1px solid var(--border);
  font-weight: var(--fw-semibold);
  box-shadow: none;
}

.btn-outline:hover {
  color: #fff;
  border-color: var(--brand-accent-700);
}

.btn-translucent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .9rem 1.2rem;
  border-radius: 12px;
  background: hsla(0, 0%, 100%, 0.12);
  color: #fff;
  border: 1px solid hsla(0, 0%, 100%, 0.24);
  font-weight: var(--fw-semibold);
  backdrop-filter: blur(6px);
}

.btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.btn-translucent:hover {
  background: hsla(0, 0%, 100%, 0.18)
}

/* Sections & bands */
.section {
  padding: 130px 0
}

.band {
  background: var(--band-plain)
}

.band.alt {
  background: var(--band-soft)
}

.band.alt-2 {
  background: var(--band-soft-2)
}

.is-off {
  display: none !important;
}

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--brand-primary);
  color: #fff;
  border-bottom: 1px solid #1a1a1a
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0
}

.logo-img {
  height: 42px;
  width: auto
}

.nav-links {
  display: flex;
  gap: 18px;
  align-items: center
}

.nav-links a {
  color: #fff;
  opacity: .92;
  font-weight: var(--fw-medium)
}

.nav-links a:hover {
  opacity: 1
}

/* CTA con contorno */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 2px solid var(--brand-accent);
  border-radius: 10px;
  padding: .58rem 1rem;
  box-shadow: none;
  font-weight: var(--fw-bold);
  transition: .2s background, .2s transform;
}

.nav-cta:hover {
  background: hsla(var(--acc-h), var(--acc-s), var(--acc-l), 0.12);
  transform: translateY(-1px);
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: hsla(0, 0%, 100%, 0.12);
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  color: #fff;
}

.burger:focus-visible {
  outline: 2px solid var(--brand-accent)
}

/* Mobile menu */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: .2s opacity;
  z-index: 100
}

.mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: linear-gradient(180deg, var(--brand-primary), hsl(var(--brand-h), var(--brand-s), 20%));
  color: #fff;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 101;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-left: 1px solid hsla(0, 0%, 100%, 0.12)
}

.mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.close-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: hsla(0, 0%, 100%, 0.15);
  border: 1px solid hsla(0, 0%, 100%, 0.25);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s;
}

.close-btn:hover {
  background: hsla(0, 0%, 100%, 0.25)
}

.mobile-links {
  display: grid;
  gap: 10px;
  margin-top: 14px
}

.mobile-links a {
  color: #fff;
  padding: .9rem 1rem;
  border-radius: 10px;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.12)
}

.mobile-links a:hover {
  background: hsla(0, 0%, 100%, 0.12)
}

.mobile-cta {
  margin-top: auto;
  padding: 12px 0
}

.mobile-cta .btn {
  background: transparent;
  color: #fff;
  border: 2px solid var(--brand-accent);
  box-shadow: none;
}

.mobile-cta .btn:hover {
  background: rgba(160, 242, 9, .12)
}

/* ---------- Hero / Slider ---------- */
.slider {
  position: relative;
  height: min(72vh, 820px);
  min-height: 520px;
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
}

/* Video Background Wrap */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero {
  position: relative;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* El color base viene del brand-h, la opacidad es configurable */
  background: linear-gradient(to bottom,
      hsla(var(--brand-h), 70%, 5%, var(--hero-overlay-opacity)),
      hsla(var(--brand-h), 70%, 5%, calc(var(--hero-overlay-opacity) * 0.8)) 60%,
      hsla(var(--brand-h), 70%, 5%, calc(var(--hero-overlay-opacity) * 0.5)));
  z-index: 3;
}

/* Trama / Pattern para legibilidad */
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--hero-pattern-opacity);
  /* Patrón de puntos sutil */
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 4px 4px;
}

.hero-inner {
  width: min(94vw, var(--maxw));
  display: grid;
  gap: 14px;
  text-align: center;
  color: #fff;
}

.hero-inner h1 {
  color: #fff
}

.hero-inner p {
  color: #e9eef4
}

.hero .cta {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.hero .cta .btn {
  background: var(--brand-primary);
  color: #fff
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--slide-fade-ms) ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide.is-next {
  opacity: 1;
  z-index: 3;
}

.slide.fade-out {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
}

.slide.active img,
.slide.is-next img,
.slide.fade-out img {
  animation: kb-zoom var(--kenburns-ms) ease-in-out forwards;
}

.slide.alt.active img,
.slide.alt.is-next img {
  transform-origin: 55% 45%;
}

@keyframes kb-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.10);
  }
}

/* Slider controls */
.slider-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
  z-index: 5;
}

.arrow {
  pointer-events: auto;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.bullets {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

.dot.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.arrow:focus-visible,
.dot:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ---------- Ghost headings (tokens separados) ---------- */
.section-head {
  position: relative;
  margin-bottom: 18px;
  --ghost-size: clamp(2rem, 7vw, 4.2rem);
}

.section-head::before {
  content: attr(data-ghost);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: var(--ghost-size);
  line-height: 1;
  color: var(--ghost-title-color);
  opacity: var(--ghost-opacity);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.section-kicker {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-semibold);
  font-size: .82rem;
  color: var(--section-kicker-color);
}

.section-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--section-title-color);
  line-height: 1.15;
}

/* Bullets list */
.bullets-list {
  margin: 18px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.bullets-list li {
  color: var(--text-900)
}

.bullets-list strong {
  font-weight: var(--fw-bold)
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.story-highlight {
  font-size: clamp(3rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--brand-primary);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow);
  aspect-ratio: 9/16;
  max-width: 480px;
  margin: 0 auto;
}

.about-media img,
.about-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Evitar que el video se recorte en Fullscreen */
.about-media video:-webkit-full-screen {
  object-fit: contain;
}

.about-media video:-moz-full-screen {
  object-fit: contain;
}

.about-media video:fullscreen {
  object-fit: contain;
}

/* Track per-se */
.am-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}

.am-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Flechas estilo slider */
.am-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(15, 6, 40, .45);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  z-index: 10;
  backdrop-filter: blur(4px);
  transition: .2s background;
  font-size: 1.2rem;
}

.am-arrow:hover {
  background: rgba(15, 6, 40, .85);
}

.am-prev {
  left: 10px;
}

.am-next {
  right: 10px;
}

/* ---------- Distancias row cards ---------- */
:root {
  --surface: #f6f7fb;
}

.row-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 70px rgba(17, 12, 40, .08);
}

.row-left {
  background: var(--brand-primary);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 24px;
}

.row-left .big {
  font-weight: 800;
  line-height: 1;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem)
}

.row-left .sub {
  margin-top: 6px;
  font-size: .85rem;
  opacity: .9;
  letter-spacing: .02em
}

.row-right {
  padding: 22px 26px;
  background: var(--surface)
}

.row-right h3 {
  margin: 0 0 .4rem;
  color: #1c1640;
  font-weight: var(--fw-bold)
}

.row-right p {
  color: #334155
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* ---------- Recorrido selector ---------- */
.route-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.route-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-900);
  padding: .6rem .9rem;
  border-radius: 12px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: .15s transform, .15s background, .15s border-color;
}

.route-tab:hover {
  transform: translateY(-1px)
}

.route-tab.is-active {
  background: rgba(66, 6, 168, .10);
  border-color: rgba(66, 6, 168, .28);
}

.route-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.route-media {
  padding: 0;
  overflow: hidden
}

.route-media img {
  width: 100%;
  height: auto;
  display: block;
}

.route-disclaimer {
  padding: 12px 18px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-600);
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border);
}

.route-notes {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--text-900);
  display: grid;
  gap: 8px;
}

/* ---------- Horarios ---------- */
.timegrid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (max-width:980px) {
  .timegrid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:640px) {
  .timegrid {
    grid-template-columns: 1fr
  }
}

/* ---------- Kit carousel ---------- */
.kit-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kit-viewport {
  overflow: hidden;
  border-radius: 14px;
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}

.kit-track {
  display: flex;
  transition: transform .55s ease;
  will-change: transform;
}

.kit-slide {
  min-width: 100%;
  margin: 0;
  position: relative;
}

.kit-slide img {
  width: 100%;
  height: min(520px, 62vh);
  object-fit: cover;
  display: block;
}

.kit-slide figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: .55rem .8rem;
  border-radius: 12px;
  background: rgba(15, 6, 40, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(6px);
  font-weight: var(--fw-semibold);
}

.kit-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  color: var(--brand-primary);
}

.kit-arrow:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ---------- Logos carousel ---------- */
.logo-carousel {
  position: relative
}

.lc-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.lc-viewport::-webkit-scrollbar {
  display: none
}

.lc-track {
  display: flex;
  gap: var(--lc-gap);
  padding: 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth
}

.lc-item {
  flex: 0 0 clamp(var(--lc-item-min), 22vw, var(--lc-item-max));
  scroll-snap-align: center
}

.logo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  padding: 16px;
  aspect-ratio: 16/9;
  transition: transform .15s ease;
}

.logo-card:hover {
  transform: translateY(-2px)
}

.logo-ph {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, .18);
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, .45);
  font-weight: var(--fw-bold);
}

.lc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--lc-arrow-bd);
  background: var(--lc-arrow-bg);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25)
}

.lc-prev {
  left: -6px
}

.lc-next {
  right: -6px
}

@media (max-width:640px) {
  .lc-arrow {
    display: none
  }
}

/* ---------- Ticket (4 columnas) ---------- */
.ticket-lead {
  max-width: 70ch
}

.ticket-grid-4 {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ticket-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 120px rgba(17, 12, 40, .14);
  padding: 22px 18px;
  text-align: center;
}

.ticket-top {
  display: grid;
  gap: 6px
}

.ticket-title {
  font-weight: var(--fw-bold);
  color: #111827
}

.ticket-sub {
  font-weight: var(--fw-semibold);
  color: #64748b;
  font-size: .9rem
}

.ticket-price {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--brand-primary);
  margin: 12px 0
}

.ticket-feats {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
  color: #475569
}

.ticket-feats .muted {
  opacity: .6
}

.ticket-card .btn {
  width: 100%;
  box-shadow: none;
  background: var(--brand-primary);
  color: #fff
}

@media (max-width:1100px) {
  .ticket-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  .ticket-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Colabora (bg image) ---------- */
.cta-prefooter {
  position: relative;
  isolation: isolate;
  min-height: clamp(320px, 52vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: var(--brand-primary);
}

.cta-prefooter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      hsla(var(--brand-h), 70%, 5%, var(--hero-overlay-opacity)),
      hsla(var(--brand-h), 70%, 5%, calc(var(--hero-overlay-opacity) * 0.8)) 60%,
      hsla(var(--brand-h), 70%, 5%, calc(var(--hero-overlay-opacity) * 0.5))),
    url("../assets/cta-bg.jpg") center/cover no-repeat;
  filter: saturate(.95) contrast(1.05) brightness(.95);
}

.cta-prefooter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--hero-pattern-opacity);
  /* Patrón de puntos sutil */
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 4px 4px;
}

.cta-prefooter .inner {
  width: min(92vw, var(--maxw));
  display: grid;
  gap: 12px;
  margin: auto;
  padding: 40px 0;
}

.cta-prefooter .kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-semibold);
  opacity: .92;
}

.cta-prefooter h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}

.cta-prefooter .lead {
  color: #e9eef4
}

.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cta-actions .btn:not(.btn-outline) {
  background: var(--brand-primary);
  color: #fff;
}

/* ---------- Inscripción (contador destacado) ---------- */
.countdown-panel {
  margin-top: 10px;
  background: var(--brand-primary);
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  color: #fff;
}

.cd-brand {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.cd-brand img {
  width: 100%;
  height: auto;
  display: block;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 1100px;
}

.cd-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 24px 15px;
  text-align: center;
  transition: transform 0.3s ease;
}

.cd-box:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.12);
}

.cd-box strong {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.cd-box span {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  opacity: 0.85;
  text-transform: lowercase;
}

.insc-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width:640px) {
  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Footer ---------- */
footer {
  padding: 28px 0;
  background: var(--brand-primary);
  color: #fff;
  border-top: 1px solid hsla(0, 0%, 100%, 0.12)
}

footer a {
  color: var(--brand-accent)
}

footer a:hover {
  color: var(--brand-accent-700)
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-icon {
  width: 32px;
  height: auto;
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  z-index: 60;
  border-radius: 999px;
  border: 1px solid hsla(0, 0%, 0%, 0.08);
  background: #fff;
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .2s opacity, .2s transform;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)
}

.to-top:hover {
  transform: translateY(-2px)
}

/* ---------- Smooth scroll & sticky offset ---------- */
html {
  scroll-behavior: smooth
}

[id] {
  scroll-margin-top: var(--scroll-offset, 92px)
}

/* ---------- Scroll-Spy ---------- */
.nav-links a.active {
  opacity: 1;
  position: relative
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--brand-accent);
  border-radius: 2px
}

.mobile-links a.active {
  background: hsla(0, 0%, 100%, 0.18);
  border: 1px solid hsla(0, 0%, 100%, 0.28)
}

/* ---------- Responsive header toggles ---------- */
@media (max-width:980px) {
  .nav-links {
    display: none
  }

  .burger {
    display: flex
  }
}

/* Menu open state */
.menu-open .mobile-overlay {
  opacity: 1;
  pointer-events: auto
}

.menu-open .mobile-panel {
  transform: translateX(0)
}

.no-scroll {
  overflow: hidden;
  height: 100%
}

/* ---------- Kit Selector & Lightbox (Base) ---------- */
.kit-selector {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.kit-tab {
  padding: 10px 22px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all .2s ease;
  color: var(--text-600);
}

/* ---------- Responsive layout tweaks ---------- */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-media {
    aspect-ratio: 9/16;
    max-height: 80vh;
  }

  .route-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .route-media {
    margin-inline: -4vw;
    /* Romper el margen del contenedor para ir de borde a borde */
    width: auto;
    border-radius: 0;
    box-shadow: none;
    border-inline: none;
  }

  .route-media img {
    aspect-ratio: auto;
    height: auto;
  }

  .row-card {
    grid-template-columns: 1fr;
  }

  .row-left {
    padding: 18px;
  }

  /* Ajuste responsivo de la banda del contador */
  .countdown-panel {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 24px;
  }

  .cd-brand {
    max-width: 150px;
    margin: 0 auto;
  }

  .countdown-grid {
    justify-content: center;
  }

  .section {
    padding: 96px 0
  }

  /* Kit Overrides en Mobile */
  .kit-selector {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 4vw;
    margin-inline: -4vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    margin-bottom: 24px;
    display: flex;
    /* Asegurar flex para el nowrap */
  }

  .kit-selector::-webkit-scrollbar {
    display: none;
  }

  .kit-tab {
    flex-shrink: 0;
  }

  .kit-slide img {
    aspect-ratio: 3/2;
    height: auto;
  }
}




.kit-tab:hover {
  border-color: var(--brand-accent);
  color: var(--brand-primary);
}

.kit-tab.is-active {
  background: hsla(var(--acc-h), var(--acc-s), var(--acc-l), 0.10);
  border-color: var(--brand-accent);
  color: var(--brand-primary);
  box-shadow: 0 4px 12px hsla(var(--acc-h), var(--acc-s), var(--acc-l), 0.2);
}

.kit-slide img {
  cursor: zoom-in;
  transition: transform .3s ease;
}

.kit-slide img:hover {
  transform: scale(1.02);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: hsla(var(--brand-h), 70%, 10%, 0.95);
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  backdrop-filter: blur(8px);
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 42px;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s;
}

.lightbox-close:hover {
  opacity: 1
}

.lightbox-content {
  width: min(90vw, 1200px);
  max-height: 80vh;
  display: grid;
  place-items: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 50px hsla(0, 0%, 0%, 0.5);
  transform: scale(.95);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Modal Formulario Estilos */
.modal-form {
  background: var(--bg-page);
  padding: 40px;
  border-radius: var(--radius);
  max-width: 600px;
  width: 90%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  text-align: left;
  overflow-y: auto;
  max-height: 90vh;
  margin: auto;
}

.modal-form h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text-900);
  font-size: 1.8rem;
}

.modal-subtitle {
  color: var(--text-600);
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--card);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}

.modal-close:hover {
  background: var(--border);
  color: var(--brand-primary);
}

.form-group {
  margin-bottom: 16px;
  display: block;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

.modal-form label {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
  color: var(--text-900);
  font-size: 0.9rem;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--card);
  color: var(--text-900);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-form input::placeholder,
.modal-form textarea::placeholder {
  color: #a0aec0;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  background-color: var(--bg-page);
  box-shadow: 0 0 0 3px hsla(var(--brand-h), var(--brand-s), var(--brand-l), 0.15);
}

.modal-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-feedback {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  display: none;
  font-weight: var(--fw-medium);
}

.form-feedback.success {
  display: block;
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-feedback.error {
  display: block;
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.form-actions {
  margin-top: 24px;
}

.form-actions .btn {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  display: block;
  text-align: center;
}

@media (max-width: 600px) {
  .modal-form {
    padding: 24px;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

.lightbox[aria-hidden="false"] .lightbox-content img {
  transform: scale(1);
}

/* Refinamiento mobile: márgenes laterales en hero */
@media (max-width: 600px) {
  .hero-inner {
    width: min(62vw, var(--maxw));
  }
}

/* ---------- Ticket Banner ---------- */
.ticket-banner {
  background: #0076a9;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 32px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.banner-badge {
  display: inline-block;
  background: #ffbe00;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.banner-content h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 4px;
  color: #fff;
}

.banner-content p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

.banner-logo {
  flex-shrink: 0;
  max-width: 250px;
  height: auto;
  margin-left: 20px;
  margin-right: 20px;
}

@media (max-width: 768px) {
  .ticket-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    align-items: center;
    /* Center children horizontally */
  }

  .banner-content {
    max-width: 100%;
    margin-bottom: 24px;
    /* More space for logo on mobile */
  }

  .banner-logo {
    margin-left: 0;
    max-width: 180px;
    /* Adjust size for mobile if needed */
  }
}

/* ---------- Sponsors Grid ---------- */
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.clone-mobile {
  display: none !important;
}

.sponsor-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  box-shadow: var(--shadow);
  transition: .2s transform, .2s box-shadow;
}

.sponsor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}

.sponsor-role {
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: var(--text-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sponsor-logo {
  flex-grow: 1;
  display: grid;
  place-items: center;
  width: 100%;
}

.sponsor-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 900px) {

  .sponsors-wrap {
    overflow: visible;
    /* Permitir que las sombras se desborden para no cortarlas */
    width: 100%;
    padding: 20px 0;
    /* Espacio extra arriba y abajo para contener las sombras */
    margin: -20px 0;
    /* Compensar el padding para no afectar el flujo vertical */
    clip-path: inset(0 -100%);
    /* Ayuda a que no haya scroll horizontal indeseado manteniendo visibilidad */
  }

  .sponsors-grid {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 20px 0 40px;
    /* Padding vertical generoso para las sombras (40px blur) */
    /* Animación de desplazamiento continuo */
    animation: marq 20s linear infinite;
  }

  /* Desplazamiento exacto: 3 tarjetas de 280px + 3 espacios de 16px = -888px */
  @keyframes marq {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-888px);
    }
  }

  .sponsor-card {
    width: 280px;
    flex-shrink: 0;
  }

  .clone-mobile {
    display: flex !important;
  }
}

/* ---------- New Sponsors Hierarchy ---------- */
.sponsors-section {
  padding: 80px 0;
}

.sponsors-group {
  margin-bottom: 64px;
}

.sponsors-group:last-child {
  margin-bottom: 0;
}

.sponsors-group-title {
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--text-600);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sponsors-group-title::before,
.sponsors-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sponsors-grid--featured {
  grid-template-columns: 1fr;
  max-width: 450px;
  margin: 0 auto;
}

.sponsors-grid--standard {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: center;
}

.sponsors-grid--small {
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}

.sponsors-grid--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.sponsor-card--featured {
  padding: 48px;
  border-width: 2px;
  border-color: var(--brand-primary);
}

.sponsor-card--featured .sponsor-logo img {
  max-height: 140px;
}

.sponsor-card--small {
  padding: 24px;
}

.sponsor-card--small .sponsor-logo img {
  width: 170px;
  height: auto;
  max-height: 85px;
}

.sponsor-card--deportivo .sponsor-logo img {
  width: 220px;
  height: auto;
}

@media (max-width: 900px) {
  .sponsors-grid--featured,
  .sponsors-grid--standard,
  .sponsors-grid--small,
  .sponsors-grid--centered {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    animation: none !important;
    max-width: none !important;
    gap: 12px;
    transform: none !important;
    padding: 0 !important;
  }

  /* Centered elements or single-item groups on mobile */
  .sponsors-grid--featured,
  .sponsors-grid--centered {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  /* Force single cards to be centered regardless of the grid they are in */
  .sponsors-grid .sponsor-card:only-child {
    grid-column: 1 / -1;
    max-width: 350px;
    margin-inline: auto;
    width: 100% !important;
  }

  /* Force 1 column for any small container with only 1 child */
  .sponsors-grid--centered .sponsor-card {
    max-width: 320px;
    margin: 0 auto;
    width: 100% !important;
  }

  /* Center the 3rd card when there are 3 cards in standard grid on mobile */
  .sponsors-grid--standard .sponsor-card:nth-child(3):last-child {
    grid-column: 1 / -1;
    max-width: 320px;
    margin-inline: auto;
    width: 100% !important;
  }

  .sponsor-card {
    width: auto !important;
    padding: 20px 12px !important;
  }

  .sponsor-card--featured {
    padding: 32px 20px !important;
  }

  .sponsor-logo img {
    max-height: 70px !important;
  }

  .sponsor-card--small .sponsor-logo img,
  .sponsor-card--deportivo .sponsor-logo img {
    width: auto !important;
    max-width: 100% !important;
  }
}