/* ============================================================
   HADS LIVE — Estilos Globales
   "El entretenimiento en vivo sin límites"
   Fase 2
   ============================================================ */

/* ── IMPORTACIÓN DE FUENTES ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@600;700&family=Inter:wght@300;400&display=swap');

/* ── VARIABLES CSS ─────────────────────────────────────────── */
:root {
  /* Colores */
  --color-bg-primary:    #000000;
  --color-bg-secondary:  #0f0f0f;
  --color-bg-card:       #111111;
  --color-red-primary:   #e50914;
  --color-red-bright:    #ff1a24;
  --color-red-glow:      rgba(229, 9, 20, 0.25);
  --color-white:         #ffffff;
  --color-gray:          #888888;
  --color-gray-light:    #cccccc;
  --color-border:        rgba(255, 255, 255, 0.06);

  /* Tipografía */
  --font-title:    'Bebas Neue', sans-serif;
  --font-ui:       'Rajdhani', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Tamaños de fuente */
  --fs-hero:    clamp(3.5rem, 10vw, 8rem);
  --fs-h2:      clamp(2rem, 5vw, 3.5rem);
  --fs-h3:      clamp(1.2rem, 3vw, 1.8rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  /* Espaciado */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   8rem;

  /* Layout */
  --max-width:  1200px;
  --radius:     4px;
  --radius-lg:  8px;

  /* Transiciones */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* Navbar */
  --navbar-height: 70px;
}

/* ── RESET ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin:      0;
  padding:     0;
  box-sizing:  border-box;
}

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

body {
  background-color: var(--color-bg-primary);
  color:            var(--color-white);
  font-family:      var(--font-body);
  font-weight:      300;
  line-height:      1.6;
  overflow-x:       hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TIPOGRAFÍA GLOBAL ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family:  var(--font-title);
  line-height:  1;
  letter-spacing: 0.02em;
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  color:       var(--color-gray-light);
}

a {
  color:           var(--color-white);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

a:hover {
  color: var(--color-red-primary);
}

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

ul, ol {
  list-style: none;
}

/* ── LAYOUT HELPERS ────────────────────────────────────────── */
.container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--space-md);
}

.section {
  padding: var(--space-lg) 0;
}

.section--dark {
  background-color: var(--color-bg-secondary);
}

/* ── NAVBAR ────────────────────────────────────────────────── */
#navbar {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           var(--navbar-height);
  z-index:          1000;
  transition:       background-color var(--transition-normal),
                    backdrop-filter var(--transition-normal);
}

#navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter:  blur(12px);
  border-bottom:    1px solid var(--color-border);
}

/* ── MAIN ──────────────────────────────────────────────────── */
#app {
  padding-top: var(--navbar-height);
}

/* ── FOOTER ────────────────────────────────────────────────── */
#footer {
  background-color: var(--color-bg-secondary);
  border-top:       1px solid var(--color-border);
  padding:          var(--space-md) 0;
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background:    var(--color-red-primary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-red-bright);
}

/* ── SELECCIÓN DE TEXTO ────────────────────────────────────── */
::selection {
  background-color: var(--color-red-primary);
  color:            var(--color-white);
}

/* ── RESPONSIVE BASE ───────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 5rem;
  }

  .container {
    padding: 0 var(--space-sm);
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 2rem;
    --space-xl: 3.5rem;
  }
}