/* ==========================================================================
   Base Styles & Design Tokens — Centro Deportivo COM
   ========================================================================== */
/* Google Fonts are preconnected and linked in index.html head to prevent render-blocking @import chains */
:root {
  /* Color Palette — Dark & Lime */
  --color-bg: #0D0E0B;
  --color-bg-alt: #14150F;
  --color-bg-card: #15170F;
  --color-text: #ECE8DC;
  --color-text-muted: rgba(236, 232, 220, 0.68);
  --color-text-dim: rgba(236, 232, 220, 0.45);
  
  /* Brand Accents */
  --color-lime: #C9E14A;
  --color-lime-bright: #DCF16E;
  --color-lime-hover: #E4F29A;
  --color-lime-dark: #A9C132;
  --color-lime-dim: rgba(201, 225, 74, 0.15);
  --color-lime-faint: rgba(201, 225, 74, 0.06);

  /* Light Theme / Tarifario Tokens */
  --color-light-bg: #ECE8DC;
  --color-light-ink: #14150F;
  --color-light-muted: #5C6035;
  --color-light-border: rgba(20, 21, 15, 0.14);
  --color-light-border-dark: rgba(20, 21, 15, 0.28);
  
  /* Borders */
  --border-hairline: 1px solid rgba(236, 232, 220, 0.1);
  --border-subtle: 1px solid rgba(236, 232, 220, 0.14);
  --border-medium: 1px solid rgba(236, 232, 220, 0.24);

  /* Typography */
  --font-display: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, Cambria, 'Times New Roman', Times, serif;

  /* Layout */
  --site-max-width: 1360px;
  --header-height: 64px;
}

/* Reset & Global Elements */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  position: relative;
}

a {
  color: var(--color-lime);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--color-lime-hover);
}

button {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  margin: 0;
}

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

/* Subtle Film Grain Texture Overlay */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22/></filter><rect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/></svg>');
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Formato editorial seguro generado por el gestor. Los niveles H1–H6 cambian
   la jerarquía visual sin crear encabezados anidados e inválidos. */
.cms-text-h1,
.cms-text-h2,
.cms-text-h3,
.cms-text-h4,
.cms-text-h5,
.cms-text-h6 {
  display: inline;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.cms-text-h1 { font-size: 2.5em; }
.cms-text-h2 { font-size: 2em; }
.cms-text-h3 { font-size: 1.65em; }
.cms-text-h4 { font-size: 1.35em; }
.cms-text-h5 { font-size: 1.15em; }
.cms-text-h6 { font-size: 1em; }