/* ==========================================================================
   CUPFUTSAL CASPE 2026 — Estilos principales
   Organizado en secciones; usa Ctrl+F con los títulos para navegar rápido.

   ÍNDICE:
   1.  Variables CSS (colores, fuentes, espaciado)
   2.  Reset & Base
   3.  Tipografía global
   4.  Utilidades (container, botones, reveal)
   5.  Navegación
   6.  Hero
   7.  Cuenta atrás (countdown)
   8.  Sección Torneo
   9.  Sección Premios
   10. Sección Inscripción
   11. Sección Patrocinadores
   13. Footer
   14. Botón volver arriba
   15. Media queries (768px, 1024px, 1280px)
   16. Accesibilidad — prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */
:root {
  /* Colores principales */
  --clr-bg:          #080d1a;
  --clr-bg-dark:     #04070f;
  --clr-bg-darker:   #020408;
  --clr-bg-card:     rgba(255, 255, 255, 0.04);
  --clr-bg-card-hov: rgba(255, 255, 255, 0.08);

  --clr-gold:        #f5c842;
  --clr-gold-dim:    #c49b2e;
  --clr-gold-light:  #ffe999;
  --clr-gold-glow:   rgba(245, 200, 66, 0.35);

  --clr-silver:      #b8c4d4;
  --clr-bronze:      #cd8b4a;

  --clr-white:       #ffffff;
  --clr-text:        #c8d0e0;
  --clr-text-muted:  #5a6478;
  --clr-border:      rgba(255, 255, 255, 0.07);
  --clr-border-gold: rgba(245, 200, 66, 0.25);

  /* Tipografías */
  --ff-display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Espaciado de secciones (fluido) */
  --section-py: clamp(64px, 10vw, 120px);
  --container:  1200px;
  --pad-x:      clamp(16px, 5vw, 48px);

  /* Efectos */
  --gold-glow:   0 0 20px rgba(245, 200, 66, 0.45), 0 0 50px rgba(245, 200, 66, 0.2);
  --card-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur:         0.3s;
  --radius:      12px;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Grain/ruido sutil sobre toda la página */
  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='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

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


/* ==========================================================================
   3. TIPOGRAFÍA GLOBAL
   ========================================================================== */
.gold { color: var(--clr-gold); }

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--clr-white);
  text-transform: uppercase;
}

.section-intro {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: var(--clr-text);
  max-width: 640px;
  margin: 0 auto;
}

.subsection-title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  margin-bottom: clamp(24px, 4vw, 40px);
}


/* ==========================================================================
   4. UTILIDADES
   ========================================================================== */

/* ——— Contenedor ——— */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ——— Organiza / Colabora ——— */
.organiza-colabora { padding: 1.5rem var(--pad-x) 2.5rem; position: relative; z-index: 2; }
.oc-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.oc-item { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.oc-label {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.oc-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  transition: transform var(--dur) var(--ease);
}
.oc-logo-wrap:hover { transform: translateY(-2px); }
.oc-logo {
  height: 150px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.oc-divider {
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, transparent, var(--clr-border-gold), transparent);
}
@media (max-width: 600px) {
  .oc-divider { display: none; }
  .oc-grid { gap: 2rem; }
  .oc-logo { height: 100px; }
}

/* ——— Cabecera de sección ——— */
.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ——— Botones ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: 50px;
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  min-height: 48px; /* accesibilidad táctil */
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 3px;
}

/* Botón dorado (CTA principal) */
.btn-gold {
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
  color: #000;
  border-color: var(--clr-gold);
  box-shadow: 0 4px 20px var(--clr-gold-glow);
}
.btn-gold:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(245, 200, 66, 0.55);
  background: linear-gradient(135deg, var(--clr-gold-light), var(--clr-gold));
}
.btn-gold:active { transform: scale(0.98); }

/* Botón outline blanco */
.btn-outline-white {
  background: rgba(255,255,255,0.06);
  color: var(--clr-white);
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* Botón outline dorado */
.btn-outline-gold {
  background: transparent;
  color: var(--clr-gold);
  border-color: var(--clr-border-gold);
}
.btn-outline-gold:hover {
  background: var(--clr-gold-glow);
  border-color: var(--clr-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--clr-gold-glow);
}

/* Botón grande */
.btn-xl {
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  padding: 18px 36px;
}

/* ——— Scroll Reveal ——— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger para grids */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }


/* ==========================================================================
   5. NAVEGACIÓN
   ========================================================================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px var(--pad-x);
  transition: padding var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Estado scrolled — se activa via JS */
#navbar.scrolled {
  padding: 12px var(--pad-x);
  background: rgba(8, 13, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--clr-border);
}

.nav-container {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--clr-white);
  line-height: 1;
}

.nav-menu {
  display: none; /* oculto en móvil por defecto */
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(4, 7, 15, 0.98);
  backdrop-filter: blur(12px);
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--clr-border);
}
.nav-menu.open { display: flex; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--pad-x);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text);
  transition: color var(--dur) var(--ease);
}
.nav-link:hover { color: var(--clr-gold); }

.nav-insta {
  color: var(--clr-gold);
}

.nav-inscripcion {
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
  color: #000 !important;
  border-radius: 50px;
  margin-left: 4px;
  box-shadow: 0 2px 12px var(--clr-gold-glow);
  justify-content: center;
}
.nav-inscripcion:hover {
  color: #000 !important;
  background: linear-gradient(135deg, var(--clr-gold-light), var(--clr-gold));
  box-shadow: 0 4px 20px rgba(245, 200, 66, 0.5);
  transform: translateY(-1px);
}
/* En móvil el botón de inscripción ocupa una franja destacada */
@media (max-width: 767px) {
  .nav-inscripcion {
    margin: 8px var(--pad-x) 4px;
    border-radius: 50px;
  }
}

/* Hamburguesa */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 10;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-white);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   6. HERO
   ========================================================================== */
#hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--clr-bg-dark);
  padding: 100px var(--pad-x) 80px;
  text-align: center;
}

/* Canvas de partículas (ocupa todo el hero) */
#particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Luces de estadio (radial gradients) */
.hero-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.light {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.light-left {
  width: 55vw; height: 55vw;
  max-width: 600px; max-height: 600px;
  top: -20%; left: -15%;
  background: radial-gradient(ellipse, rgba(245,200,66,0.1) 0%, transparent 65%);
  animation: lightPulse 6s ease-in-out infinite;
}
.light-right {
  width: 55vw; height: 55vw;
  max-width: 600px; max-height: 600px;
  top: -20%; right: -15%;
  background: radial-gradient(ellipse, rgba(30,80,200,0.15) 0%, transparent 65%);
  animation: lightPulse 8s ease-in-out infinite reverse;
}
.light-top {
  width: 60vw; height: 40vw;
  max-width: 700px; max-height: 400px;
  top: -5%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245,200,66,0.07) 0%, transparent 70%);
  animation: lightPulse 10s ease-in-out infinite 2s;
}
@keyframes lightPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Contenido del hero */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vw, 24px);
}

/* Resplandor radial detrás del logo de fondo (dorado + azul) */
.hero-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(560px, 130vw, 1300px);
  height: clamp(560px, 130vw, 1300px);
  background: radial-gradient(
    ellipse at center,
    rgba(245, 200, 66, 0.15) 0%,
    rgba(30,  80, 200, 0.10) 48%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(70px);
  animation: bgGlowPulse 10s ease-in-out infinite;
}
@keyframes bgGlowPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}

/* Logo de fondo — marca de agua tipo Champions League (solo hero) */
.hero-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(258px, 82vw, 398px); /* mobile base */
  height: auto;
  opacity: 0.40;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  animation: bgLogoPulse 9s ease-in-out infinite;
}
@keyframes bgLogoPulse {
  0%, 100% { opacity: 0.40; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.46; transform: translate(-50%, -50%) scale(1.025); }
}

/* Título hero */
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--clr-white);
}
.title-year {
  color: var(--clr-gold);
}

/* Subtítulo */
.hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--clr-text);
  font-weight: 500;
  max-width: 480px;
  letter-spacing: 0.01em;
}

/* Fecha badge */
.hero-dates {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid var(--clr-border-gold);
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
}

/* CTAs hero */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  animation: fadeInUp 1s ease 1.5s both;
}
.scroll-mouse {
  width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-dot {
  width: 4px; height: 8px;
  background: var(--clr-gold);
  border-radius: 2px;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.4; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* ==========================================================================
   7. CUENTA ATRÁS (COUNTDOWN)
   ========================================================================== */
.countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.countdown-label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.countdown-deadline {
  font-size: 0.9rem;
  color: var(--clr-gold);
  font-weight: 600;
}
.countdown {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 2vw, 16px);
}
.cd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cd-box {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--clr-border-gold);
  border-radius: 10px;
  padding: clamp(10px, 2vw, 18px) clamp(12px, 2.5vw, 22px);
  min-width: clamp(60px, 15vw, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245,200,66,0.08) inset,
              0 4px 16px rgba(0,0,0,0.3);
  overflow: hidden;
}
/* Línea central del flip */
.cd-box::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(245,200,66,0.15);
}
.cd-digit {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.cd-digit.flip {
  animation: digitFlip 0.25s var(--ease);
}
@keyframes digitFlip {
  0%   { transform: scaleY(0.6) translateY(-4px); opacity: 0.4; }
  100% { transform: scaleY(1)   translateY(0);    opacity: 1; }
}
.cd-unit {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.cd-sep {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--clr-gold);
  opacity: 0.4;
  padding-top: clamp(10px, 2vw, 16px);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.1; }
}

/* Mensaje cuando termina una cuenta atrás (torneo o inscripciones) */
.countdown-ended {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--clr-gold);
  letter-spacing: 0.05em;
  display: none;
}


/* ==========================================================================
   8. SECCIÓN TORNEO
   ========================================================================== */
#torneo {
  padding: var(--section-py) 0;
  background: var(--clr-bg);
}

.subsection { margin-bottom: clamp(48px, 8vw, 80px); }

/* Categorías */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
.cat-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  grid-column: span 2;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
  cursor: default;
}
/* 5ª tarjeta centrada en móvil (grid de 4 cols) */
.cat-card:nth-child(5) { grid-column: 2 / 4; }
.cat-card:hover {
  transform: translateY(-4px);
  background: var(--clr-bg-card-hov);
  border-color: var(--clr-border-gold);
  box-shadow: 0 8px 32px rgba(245,200,66,0.12), var(--card-shadow);
}
.cat-card.cat-senior:hover {
  border-color: var(--clr-gold);
  box-shadow: var(--gold-glow), var(--card-shadow);
}
.cat-icon {
  color: var(--clr-gold);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease);
}
.cat-card:hover .cat-icon { transform: scale(1.1) rotate(5deg); }
.cat-name {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: 0.05em;
  color: var(--clr-white);
}
.cat-age {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.05);
  padding: 4px 12px;
  border-radius: 20px;
  text-align: center;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Línea vertical */
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, var(--clr-gold), transparent);
}
.tl-item {
  position: relative;
  padding: 0 0 32px 24px;
  display: flex;
  flex-direction: column;
}
.tl-dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--clr-bg);
  border: 2px solid var(--clr-text-muted);
  z-index: 1;
}
.tl-dot-gold {
  border-color: var(--clr-gold);
  background: var(--clr-gold);
  box-shadow: 0 0 12px var(--clr-gold-glow);
}
.tl-time {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.tl-event {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  color: var(--clr-text);
  font-weight: 500;
}
.tl-highlight .tl-event { color: var(--clr-gold-light); font-weight: 700; }

/* Ubicación */
.location-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
}
.location-icon { color: var(--clr-gold); }
.location-name {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 0.04em;
  color: var(--clr-white);
}
.location-sub {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.05em;
}

/* ——— Extras / perks del torneo ——— */
.torneo-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}
.torneo-perk {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: min(100%, 280px);
  background: rgba(245, 200, 66, 0.06);
  border: 1px solid rgba(245, 200, 66, 0.18);
  border-radius: 14px;
  padding: clamp(14px, 2.5vw, 20px) clamp(18px, 3vw, 28px);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.torneo-perk:hover {
  background: rgba(245, 200, 66, 0.1);
  border-color: rgba(245, 200, 66, 0.38);
}
.torneo-perk-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 200, 66, 0.12);
  border-radius: 50%;
  color: var(--clr-gold);
  filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.3));
}
.torneo-perk-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.torneo-perk-title {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  letter-spacing: 0.04em;
  color: var(--clr-white);
  line-height: 1.1;
  font-weight: 400;
}
.torneo-perk-sub {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.02em;
}


/* ==========================================================================
   9. SECCIÓN PREMIOS
   ========================================================================== */
#premios {
  padding: var(--section-py) 0;
  background: var(--clr-bg-dark);
  position: relative;
}
#premios::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
}

/* Podio */
.podium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.prize-card {
  position: relative;
  background: var(--clr-bg-card);
  border: 2px solid var(--clr-border);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 36px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.prize-card:hover { transform: translateY(-4px); }

/* Brillo de fondo interno */
.prize-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.prize-card:hover::before { opacity: 1; }

/* 1er puesto — dorado */
.prize-gold {
  border-color: var(--clr-gold-dim);
  order: -1; /* Primero en móvil */
}
.prize-gold::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,200,66,0.12) 0%, transparent 60%);
}
.prize-gold:hover {
  border-color: var(--clr-gold);
  box-shadow: var(--gold-glow), var(--card-shadow);
}
.prize-champion-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
  color: #000;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 2do puesto — plateado */
.prize-silver { border-color: rgba(180, 196, 212, 0.2); }
.prize-silver::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(180,196,212,0.07) 0%, transparent 60%);
}
.prize-silver:hover {
  border-color: var(--clr-silver);
  box-shadow: 0 0 20px rgba(180,196,212,0.15), var(--card-shadow);
}

/* 3er puesto — bronce */
.prize-bronze { border-color: rgba(205, 139, 74, 0.2); }
.prize-bronze::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(205,139,74,0.07) 0%, transparent 60%);
}
.prize-bronze:hover {
  border-color: var(--clr-bronze);
  box-shadow: 0 0 20px rgba(205,139,74,0.15), var(--card-shadow);
}

.prize-medal { font-size: clamp(2.5rem, 8vw, 4rem); }
.prize-rank {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  color: var(--clr-white);
  opacity: 0.2;
  position: absolute;
  top: 12px; left: 20px;
}
.prize-gold .prize-rank { color: var(--clr-gold); opacity: 0.25; }
.prize-name {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.05em;
  color: var(--clr-white);
}
.prize-money {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--clr-gold);
  letter-spacing: 0.02em;
}
.prize-gold .prize-money { text-shadow: 0 0 20px rgba(245,200,66,0.5); }
.prize-detail {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.05em;
}

.prizes-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  padding: 0 var(--pad-x);
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* ——— Bloque PS5 ——— */
.ps5-block {
  position: relative;
  background: linear-gradient(135deg, #10103a 0%, #060620 50%, #0a0a2e 100%);
  border: 1px solid rgba(100, 60, 220, 0.35);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
}
.ps5-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(100,60,220,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.ps5-inner {
  position: relative;
  z-index: 1;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ps5-tag {
  background: rgba(100, 60, 220, 0.3);
  border: 1px solid rgba(140, 100, 255, 0.4);
  color: rgba(180, 140, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 6px 16px;
  border-radius: 20px;
  text-transform: uppercase;
}
.ps5-title {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--clr-gold);
  letter-spacing: 0.04em;
  text-shadow: 0 0 40px rgba(245,200,66,0.4), 0 0 80px rgba(100,60,220,0.3);
}
.ps5-sub {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--clr-text);
  max-width: 400px;
}
.ps5-visual {
  width: 100%;
  max-width: 280px;
  filter: drop-shadow(0 0 24px rgba(100,60,220,0.4));
}
.ps5-visual svg { width: 100%; height: auto; }
.ps5-disclaimer {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  max-width: 400px;
  text-align: center;
}

/* ——— Premios por categoría ——— */
.premios-por-categoria {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 48px);
  margin-bottom: clamp(24px, 4vw, 40px);
}

.categoria-block-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  background: rgba(245, 200, 66, 0.06);
  border: 1px solid rgba(245, 200, 66, 0.22);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.categoria-block-icon { font-size: 1.8rem; line-height: 1; }
.categoria-block-info { flex: 1; min-width: 160px; }
.categoria-block-nombre {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.05em;
  color: var(--clr-gold);
  line-height: 1;
}
.categoria-block-sub {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.categoria-block-badge {
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
  color: #000;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Bloque próximamente otras categorías */
.otras-cats-teaser {
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 32px);
}
.otras-cats-label {
  font-family: var(--ff-display);
  font-size: clamp(0.95rem, 2.5vw, 1.25rem);
  letter-spacing: 0.18em;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}
.otras-cats-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 12px;
}
.otras-cat-item {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--clr-text);
  letter-spacing: 0.04em;
}
.otras-cat-sep { color: var(--clr-text-muted); }
.otras-cats-sub {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}

/* ——— Podio base (Benjamín/Alevín/Infantil/Cadete) ——— */
.podium-base {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px) {
  .podium-base { grid-template-columns: repeat(2, 1fr); }
}

.prize-base {
  position: relative;
  background: var(--clr-bg-card);
  border: 2px solid var(--clr-border);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px) clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.prize-base:hover { transform: translateY(-4px); }
.prize-base::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.prize-base:hover::before { opacity: 1; }

.prize-base-gold {
  border-color: rgba(245, 200, 66, 0.35);
}
.prize-base-gold::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,200,66,0.1) 0%, transparent 60%);
}
.prize-base-gold:hover {
  border-color: var(--clr-gold);
  box-shadow: var(--gold-glow), var(--card-shadow);
}

.prize-base-silver {
  border-color: rgba(180, 196, 212, 0.2);
}
.prize-base-silver::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(180,196,212,0.07) 0%, transparent 60%);
}
.prize-base-silver:hover {
  border-color: var(--clr-silver);
  box-shadow: 0 0 20px rgba(180,196,212,0.15), var(--card-shadow);
}

.prize-base-rank {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  color: var(--clr-white);
  opacity: 0.15;
  position: absolute;
  top: 10px;
  left: 16px;
}
.prize-base-gold .prize-base-rank { color: var(--clr-gold); opacity: 0.2; }

.prize-base-medal { font-size: clamp(2rem, 6vw, 3rem); }

.prize-base-name {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  letter-spacing: 0.05em;
  color: var(--clr-white);
}
.prize-base-gold .prize-base-name { color: var(--clr-gold); }

.prize-base-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.prize-base-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--clr-text);
  letter-spacing: 0.02em;
}
.prize-base-list li svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--clr-gold);
  opacity: 0.75;
}


/* ==========================================================================
   10. SECCIÓN INSCRIPCIÓN
   ========================================================================== */
#inscripcion {
  padding: var(--section-py) 0;
  background: linear-gradient(135deg, #0a0f20 0%, #060c18 50%, #0d1222 100%);
  position: relative;
  overflow: hidden;
}
/* Diagonal dorada sutil */
#inscripcion::before {
  content: '';
  position: absolute;
  top: -20px; left: -40px; right: -40px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--clr-gold-dim) 50%, transparent 100%);
}
#inscripcion::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -40px; right: -40px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--clr-gold-dim) 50%, transparent 100%);
}

.inscripcion-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.inscripcion-icon {
  color: var(--clr-gold);
  filter: drop-shadow(0 0 16px var(--clr-gold-glow));
}
.inscripcion-text {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--clr-text);
  max-width: 480px;
  line-height: 1.7;
}
.inscripcion-prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  background: rgba(245,200,66,0.07);
  border: 1px solid rgba(245,200,66,0.28);
  border-radius: 40px;
  padding: 11px 24px;
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.02em;
}
.inscripcion-prices strong { color: var(--clr-gold); font-weight: 700; }
.price-sep { color: rgba(245,200,66,0.35); font-size: 1.1rem; line-height: 1; }
.inscripcion-subtext {
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  opacity: 0.75;
  margin-top: -8px;
}


/* ==========================================================================
   12. SECCIÓN PATROCINADORES
   ========================================================================== */
#patrocinadores {
  padding: var(--section-py) 0;
  background: var(--clr-bg);
}

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 20px);
}

.sponsor-card {
  background: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.sponsor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* Logo ocupa todo el área de contenido (tarjeta menos padding).
   object-fit: contain escala al máximo sin deformar ni recortar,
   ajustándose por ancho o alto según la proporción de cada logo. */
.sp-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--dur) var(--ease);
}
.sponsor-card:hover .sp-img {
  transform: scale(1.04);
}

/* Escalado individual para logos con espacio transparente excesivo.
   overflow: hidden en la tarjeta evita que se salgan. */
.sp-img.sp-sm3 { transform: scale(1.10); }
.sp-img.sp-sm2 { transform: scale(1.20); }
.sp-img.sp-md  { transform: scale(1.35); }
.sp-img.sp-lg  { transform: scale(1.45); }
.sp-img.sp-lg2 { transform: scale(1.63); }
.sp-img.sp-xl  { transform: scale(1.85); }

.sponsor-card:hover .sp-img.sp-sm3 { transform: scale(1.16); }
.sponsor-card:hover .sp-img.sp-sm2 { transform: scale(1.34); }
.sponsor-card:hover .sp-img.sp-md  { transform: scale(1.41); }
.sponsor-card:hover .sp-img.sp-lg  { transform: scale(1.51); }
.sponsor-card:hover .sp-img.sp-lg2 { transform: scale(1.69); }
.sponsor-card:hover .sp-img.sp-xl  { transform: scale(1.92); }

/* En móvil las tarjetas son más pequeñas (2 col, ~173px).
   El padding de 10px de la tarjeta requiere más scale para cubrirse
   que en desktop (4 col, ~320px). sp-sm3 necesita al menos 1.13. */
@media (max-width: 767px) {
  .sp-img.sp-sm3 { transform: scale(1.15); }
}

/* Logos con fondo de color propio (calzados-marga, taiga):
   rellenan la tarjeta de borde a borde. overflow:hidden + border-radius
   de la tarjeta se encarga de redondear las esquinas. */
.sp-cover-card {
  padding: 0;
}
.sp-cover-card .sp-img {
  object-fit: cover;
}
.sp-cover-card:hover .sp-img {
  transform: scale(1.06);
}
.sp-black-bg {
  background: #000;
}

/* Gotta: tarjeta completamente azul (sin padding), el img se limita al 78%
   del área para dar margen. El background-color del card llena el resto
   sin riesgo de desajuste de color con el propio PNG. */
.sp-gotta {
  background-color: #223049;
  padding: 0;
}
.sp-gotta .sp-img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
footer {
  padding: clamp(48px, 8vw, 80px) 0 clamp(24px, 4vw, 40px);
  background: var(--clr-bg-darker);
  border-top: 1px solid var(--clr-border);
  text-align: center;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer-logo {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.05em;
  line-height: 1;
}
.footer-location {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--clr-text-muted);
  text-transform: uppercase;
}
.footer-title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--clr-white);
  letter-spacing: 0.02em;
}
.footer-text {
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  color: var(--clr-text);
  max-width: 420px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--clr-border);
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.04em;
}
.footer-bottom nav {
  display: flex;
  gap: 20px;
}
.footer-bottom a {
  color: var(--clr-text-muted);
  transition: color var(--dur) var(--ease);
}
.footer-bottom a:hover { color: var(--clr-gold); }


/* ==========================================================================
   14. BOTÓN VOLVER ARRIBA
   ========================================================================== */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 999;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-dim));
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(245,200,66,0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s var(--ease),
              transform 0.3s var(--ease),
              box-shadow 0.2s var(--ease);
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#back-to-top:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(245,200,66,0.55);
}


/* ==========================================================================
   15. MEDIA QUERIES
   ========================================================================== */

/* ——— Tablet: 768px ——— */
@media (min-width: 768px) {

  /* Logo de fondo hero — más grande en tablet/desktop */
  .hero-bg-logo { width: clamp(445px, 62vw, 796px); }

  /* Nav — horizontal */
  .hamburger { display: none; }
  .nav-menu {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    backdrop-filter: none;
    padding: 0;
    border: none;
    gap: 4px;
  }
  .nav-link { padding: 8px 14px; font-size: 0.78rem; }

  /* Categorías — 6 cols virtuales: fila 1 = 3 tarjetas (span 2), fila 2 = 2 centradas */
  .categories-grid { grid-template-columns: repeat(6, 1fr); }
  .cat-card:nth-child(4) { grid-column: 2 / 4; }
  .cat-card:nth-child(5) { grid-column: 4 / 6; }

  /* Timeline horizontal */
  .timeline {
    flex-direction: row;
    padding: 0;
    gap: 0;
    align-items: flex-start;
    padding-top: 28px;
  }
  .timeline::before {
    top: 9px; bottom: auto;
    left: 0; right: 0;
    width: auto; height: 2px;
    background: linear-gradient(to right, var(--clr-gold), transparent);
  }
  .tl-item {
    flex: 1;
    padding: 24px 12px 0;
  }
  .tl-dot {
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
  }
  .tl-item { text-align: center; }

  /* Podio — 3 columnas */
  .podium {
    grid-template-columns: 1fr 1.2fr 1fr;
    align-items: end;
    gap: 20px;
  }
  .prize-gold { order: 0; }
  .prize-featured {
    transform: translateY(-24px);
  }
  .prize-featured:hover {
    transform: translateY(-28px);
  }

  /* Sponsors — 3 columnas en tablet */
  .sponsors-grid { grid-template-columns: repeat(3, 1fr); }

  /* Ubicación */
  .location-block {
    flex-direction: row;
    text-align: left;
    gap: 24px;
  }
  .location-icon { flex-shrink: 0; }
  .location-text { flex: 1; }

}

/* ——— Desktop: 1024px ——— */
@media (min-width: 1024px) {

  /* Sponsors — 4 columnas en desktop (12 logos = 3 filas perfectas) */
  .sponsors-grid { grid-template-columns: repeat(4, 1fr); }

  /* Hero — más espacio */
  .hero-ctas { gap: 16px; }
}

/* ——— Wide: 1280px ——— */
@media (min-width: 1280px) {
  .sponsors-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   16. ACCESIBILIDAD — prefers-reduced-motion
   Desactiva todas las animaciones para usuarios que lo prefieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cd-digit.flip { animation: none; }
  .fog, .pl, .light, .hero-bg-glow, .hero-bg-logo { animation: none; }
  .scroll-dot { animation: none; }
  .scroll-indicator { animation: none; }
  .ap-festival-img { animation: none; }
}