/* ═══════════════════════════════════════════════════════════════
   MAIN.CSS — Bádminton Perú
   Base global: variables, reset, tipografía, container
   → En Angular: este archivo será styles.scss
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ── Variables globales ───────────────────────────────────────── */
/* → En Angular: variables en styles.scss o _variables.scss       */
:root {
  /* Colores */
  --bp-red:        #CC0000;
  --bp-red-dark:   #aa0000;
  --bp-red-orange: #e67e00;
  --bp-green:      #16a34a;
  --bp-black:      #111;
  --bp-dark:       #1a1a1a;
  --bp-gray-dark:  #1e1e1e;
  --bp-gray:       #555;
  --bp-gray-mid:   #888;
  --bp-gray-light: #e0e0e0;
  --bp-white:      #fff;

  /* Tipografía */
  --bp-font:       'Montserrat', sans-serif;

  /* Layout */
  --bp-container:  1200px;
  --bp-gap:        24px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--bp-font);
  background: var(--bp-white);
  color: var(--bp-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

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

ul, ol {
  list-style: none;
}

/* ── Container ────────────────────────────────────────────────── */
/* → En Angular: directiva o clase global reutilizable            */
.bp-container {
  max-width: var(--bp-container);
  margin: 0 auto;
  padding: 0 var(--bp-gap);
  width: 100%;
}

/* ── Utilidades mínimas ───────────────────────────────────────── */
.bp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Prevenir scroll horizontal global ────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}