/* ============================================================
   BASE — Variables, reset, tipografía
   Academia Cerberus · estética combat sports oscura y sobria
   ============================================================ */

:root {
  /* Colores */
  --bg:        #080808;   /* negro casi puro */
  --panel:     #111111;   /* paneles */
  --panel-2:   #171717;   /* paneles alternos */
  --line:      #242424;   /* bordes sutiles */
  --red:       #cc0000;   /* rojo sangre — acento principal, con contención */
  --red-dark:  #990000;
  --gold:      #f5c518;   /* dorado, solo detalles mínimos */
  --text:      #f0f0f0;   /* blanco suave */
  --muted:     #888888;   /* texto secundario */

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

  /* Medidas */
  --maxw: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

ul { list-style: none; }

/* Tipografía de títulos */
h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

::selection { background: var(--red); color: #fff; }

/* Scrollbar sobrio */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--red-dark); }

/* Utilidad de accesibilidad */
.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;
}