/* =============================================================================
   Padel Group — Design System CSS
   Tokens oficiales. No modificar sin actualizar también la Guía de Estilo.
   ============================================================================= */

/* --- Google Fonts pre-cargadas en el layout ---
   Rubik: headings (weights: 400, 500, 700, 800)
   Inter: body text (weights: 400, 500, 600)
*/

:root {
  /* -----------------------------------------------------------------------
     COLORES — Paleta Oficial "Bento Box Luxury"
  ----------------------------------------------------------------------- */
  --color-surface: #f2f4f9; /* Fondo principal (Gris Palido) */
  --color-surface-low: #ffffff; /* Tarjetas Bento, nav, contenedores */
  --color-dark-surface: #1e2329; /* Post-footer, secciones invertidas */
  --color-primary: #728e97; /* Logotipo, CTAs, enlaces activos */
  --color-primary-dark: #4f676f; /* Hover sobre primary */
  --color-primary-light: #edf1f2; /* Backgrounds sutiles */
  --color-on-high: #1a1a1a; /* Texto de máximo contraste */
  --color-on-med: #555555; /* Body text, subtítulos */
  --color-on-low: #888888; /* Placeholders, texto terciario */
  --color-border: #a4a4a4; /* Bordes y separadores */
  --color-gold: #d4af37; /* Acento premium (campeones, badges) */
  --color-gold-light: #f5e6b3; /* Fondo sutil para badges de oro */
  --color-error: #f6465d; /* Estados de error */
  --color-success: #0ecb81; /* Estados de éxito */
  --color-warning-light: #fff3cd; /* Fondo estado en curso */
  --color-warning-dark: #856404; /* Texto estado en curso */
  --color-gold-dark: #7a5700; /* Texto badges dorados */
  --color-location-icon: var(--color-success);

  /* Overlay para imágenes de fondo */
  --overlay-hero: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0, 0, 0, 0.75) 100%
  );
  --overlay-card: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    transparent 100%
  );
  --overlay-dark: rgba(30, 30, 30, 0.92);
  --overlay-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");

  /* -----------------------------------------------------------------------
     TIPOGRAFÍA
  ----------------------------------------------------------------------- */
  --font-heading: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica (clamp: mobile → desktop) */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: clamp(1.5rem, 2.5vw, 2rem); /* 24-32px */
  --text-2xl: clamp(2rem, 3.5vw, 2.75rem); /* 32-44px */
  --text-3xl: clamp(2.5rem, 5vw, 4rem); /* 40-64px */
  --text-hero: clamp(3rem, 7vw, 5.5rem); /* 48-88px */

  /* Pesos */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter-spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;

  /* -----------------------------------------------------------------------
     ESPACIADO (escala 4px base)
  ----------------------------------------------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* -----------------------------------------------------------------------
     LAYOUT
  ----------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 4rem); /* Padding lateral */
  --section-pad-y: clamp(3rem, 6vw, 5rem); /* Padding vertical */
  --grid-gap: clamp(1rem, 2vw, 1.5rem); /* Espaciado del grid */

  /* -----------------------------------------------------------------------
     BORDES Y RADIOS
  ----------------------------------------------------------------------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     SOMBRAS
  ----------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-primary: 0 4px 20px rgba(114, 142, 151, 0.25);

  /* -----------------------------------------------------------------------
     TRANSICIONES Y ANIMACIONES
  ----------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  --transition-base: var(--duration-base) var(--ease-in-out);
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* -----------------------------------------------------------------------
     Z-INDEX STACK
  ----------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* -----------------------------------------------------------------------
   Clase utilitaria de Container (única excepción al BEM)
----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sección estándar */
.section {
  padding-block: var(--section-pad-y);
}

/* Variante dark */
.section--dark {
  background-color: var(--color-dark-surface);
  color: var(--color-surface);
}

/* Variante low */
.section--low {
  background-color: var(--color-surface-low);
}

/* Variante table con ruido */
.section--table {
  background-color: var(--color-dark-surface);
  background-image: var(--overlay-noise);
  color: var(--color-surface);
}

/* -----------------------------------------------------------------------
   BADGES & CHIPS
----------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.badge--inscripciones {
  background-color: var(--color-gold);
  color: var(--color-gold-dark);
}

.badge--en-curso {
  background-color: var(--color-success);
  color: var(--color-surface-low);
}

.badge--finalizado {
  background-color: var(--color-error);
  color: var(--color-surface-low);
}

.badge--programado {
  background-color: var(--color-on-low);
  color: var(--color-surface-low);
}

/* --- ICONOS ESTANDARIZADOS --- */
.icon-location {
  color: var(--color-location-icon) !important;
  vertical-align: middle;
  font-size: 1.25em;
  margin-right: 0.25rem;
}

.material-icons-sharp {
  vertical-align: middle;
}

/* -----------------------------------------------------------------------
   CLASES DE UTILIDAD (Standard Helpers)
----------------------------------------------------------------------- */
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-left {
  text-align: left !important;
}

.text-on-high {
  color: var(--color-on-high) !important;
}
.text-on-med {
  color: var(--color-on-med) !important;
}
.text-on-low {
  color: var(--color-on-low) !important;
}
.text-muted {
  color: var(--color-on-low) !important;
}
.text-primary {
  color: var(--color-primary) !important;
}
.text-gradient {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-gold) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.opacity-50 {
  opacity: 0.5 !important;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-1 {
  margin-top: var(--space-1) !important;
}
.mt-2 {
  margin-top: var(--space-2) !important;
}
.mt-3 {
  margin-top: var(--space-3) !important;
}
.mt-4 {
  margin-top: var(--space-4) !important;
}
.mt-6 {
  margin-top: var(--space-6) !important;
}
.mt-8 {
  margin-top: var(--space-8) !important;
}

.mb-1 {
  margin-bottom: var(--space-1) !important;
}
.mb-2 {
  margin-bottom: var(--space-2) !important;
}
.mb-3 {
  margin-bottom: var(--space-3) !important;
}
.mb-4 {
  margin-bottom: var(--space-4) !important;
}
.mb-6 {
  margin-bottom: var(--space-6) !important;
}
.mb-8 {
  margin-bottom: var(--space-8) !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* DESACTIVACIÓN GLOBAL DE ANIMACIONES */
*,
*::before,
*::after {
  animation: none !important;
  transition-duration: 0s !important; /* Elimina el tiempo de espera en hovers y cambios */
}

/* Opcional: Mantener solo el marquee de sponsors si lo deseas */
.td-sponsor-track,
.partners__grid {
  animation: marquee 40s linear infinite !important;
}