/* ═══════════════════════════════════════════════════════════
   DJ RIGO — BRAND KIT (tema alternativo)
   ═══════════════════════════════════════════════════════════
   Este archivo SOLO sobrescribe el tema anterior (css/style.css).
   Para ACTIVARLO:   <link rel="stylesheet" href="css/brand-kit.css" /> en index.html
   Para DESACTIVARLO: borra esa línea → vuelve el diseño anterior.

   Brand kit: Barlow Condensed 800 (titulares) + Barlow (texto)
   Paleta: carbón #111211 · superficie #20251E · verde #7FB458
   ═══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:ital,wght@0,800;1,800&display=swap");

/* ── Tokens del brand kit ──────────────────────────────── */
:root {
  --bg: #111211;                 /* fondo principal (general, cabecera, footer) */
  --bg-2: #181c16;               /* fondo secundario (secciones alternas) */
  --bg-warm: #181c16;
  --card: #20251e;               /* superficie / tarjetas / calendario */
  --card-2: #262c23;             /* superficie en hover */
  --border: #3d4438;             /* bordes 1px */
  --maroon: #20251e;             /* (antes granate) → ahora oscuro del kit */
  --red: #7fb458;                /* (antes rojo) → acento verde */
  --orange: #7fb458;             /* ACENTO PRINCIPAL verde del kit */
  --accent: #7fb458;
  --accent-dim: rgba(127, 180, 88, 0.12);
  --accent-glow: rgba(127, 180, 88, 0.12);   /* glow 8–12% */
  --green: #7fb458;
  --text: #f5f2eb;               /* blanco cálido */
  --muted: #a7aea1;              /* gris verdoso muted */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;                 /* tarjetas 6px */
  --radius-sm: 6px;
  --radius-btn: 2px;             /* botones rectangulares 2px */
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.65);
}

/* ── Tipografía: titulares Barlow Condensed 800 ────────── */
.hero-title,
.section-title,
.section-kicker,
.badge,
.genres li,
.event-title,
.event-loc,
.welcome-note,
.about-sub,
.follow-icon span,
.brand,
.kicker-num {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Texto y navegación Barlow */
body { font-family: var(--font-body); }
.main-nav a { font-weight: 600; }
.btn { font-weight: 700; }
.event-sub { font-weight: 600; }
.email-link, .email-label, .email-address { font-weight: 600; }
.footer-copy, .footer-legal a { font-weight: 500; }

/* Logo "DJ RIGO": sólido, sin contorno (lettering propio del kit) */
.title-plain,
.title-outline {
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* ── Fondos y atmósfera ────────────────────────────────── */
.hero-bg::before {
  background:
    radial-gradient(900px 620px at 92% 6%, rgba(127, 180, 88, 0.08), transparent 62%),
    linear-gradient(135deg, #20251e 0%, #111211 75%);
}
.hero-bg::after { opacity: 0.08; }          /* grano muy sutil (2–3%) */

.hero-overlay {
  background: linear-gradient(180deg, rgba(17, 18, 17, 0.55) 0%, rgba(17, 18, 17, 0.12) 45%, var(--bg) 97%);
}

/* Sección Availability: el degradado va en el FONDO de la sección (no en una capa
   por encima), para que el título y el kicker queden siempre visibles. */
.section-avail {
  background: linear-gradient(135deg, #20251e 0%, #111211 75%);
}
.section-avail::before {
  z-index: 0;
  background: radial-gradient(900px 520px at 50% -10%, rgba(127, 180, 88, 0.07), transparent 65%);
}
.section-avail .container { position: relative; z-index: 1; }

/* Cabecera y aviso de cookies: fondo del kit */
.site-header.is-scrolled { background: rgba(17, 18, 17, 0.9); }
.cookie-banner { background: rgba(17, 18, 17, 0.97); }
.site-footer { background: var(--bg); }

/* MÓVIL: el menú se despliega a pantalla completa. El blur de la cabecera la convertiría
   en "containing block" del menú (position: fixed) y lo rompería → sin blur en móvil. */
@media (max-width: 900px) {
  .site-header.is-scrolled {
    background: rgba(17, 18, 17, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .main-nav { background: rgba(17, 18, 17, 0.98); }
}

/* Gesto gráfico: curva verde ascendente (inspirada en el cable) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4%;
  height: 220px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 285 C 180 270, 300 205, 470 200 S 780 120, 1000 70 S 1140 40, 1220 30' fill='none' stroke='%237FB458' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ── Botones (verde con texto carbón) ──────────────────── */
.btn-primary {
  background: var(--accent);
  color: #111211;
  box-shadow: 0 10px 30px rgba(127, 180, 88, 0.22);
}
.btn-primary::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 45%);
}
.btn-primary:hover {
  background: #8fc463;
  box-shadow: 0 0 26px var(--accent-glow);
}
.btn-outline {
  color: var(--accent);
  border-color: var(--border);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Elementos con texto sobre el verde → carbón */
.social-icon:hover,
.email-icon,
.video-play:hover,
.carousel-arrow:hover,
.scroll-top:hover,
.cookie-banner .btn-primary { color: #111211; }

.email-icon { background: var(--accent); }
.badge {
  background: rgba(127, 180, 88, 0.14);
  border: 1px solid rgba(127, 180, 88, 0.55);
  color: var(--text);
  box-shadow: 0 0 22px rgba(127, 180, 88, 0.18);
}

/* Tarjetas, bordes y sombras coherentes con el kit */
.genres li:hover,
.follow-icon:hover,
.event-slide { border-color: rgba(127, 180, 88, 0.45); }
.genres li:hover { background: var(--card-2); }
.follow-icon:hover { background: var(--card-2); }

/* ── Calendario y leyenda ──────────────────────────────────
   Kit: reservado = #A7AEA1 (gris) · disponible = #7FB458 (verde).
   El color del embed de Google se ajusta en index.html (color=%23A7AEA1). */
.dot-available { background-color: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }
.dot-booked { background-color: #a7aea1; box-shadow: 0 0 8px rgba(167, 174, 161, 0.4); }
.status-available { color: #ffffff; }
.status-booked { color: #a7aea1; }

/* Degradado del caption de los slides de eventos */
.event-shade {
  background: linear-gradient(to top, rgba(17, 18, 17, 0.9) 0%, rgba(17, 18, 17, 0.3) 38%, transparent 72%);
}