/* ─── Variables ─── */
:root {
  --rojo:    #E8002D;
  --rojo-dim: #E8002D22;
  --negro:   #0a0a0a;
  --negro-card: #111111;
  --negro-border: #1e1e1e;
  --blanco:  #F5F5F5;
  --gris:    #888888;
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Inter', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--font-body);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── Utilidades ─── */
.container {
  width: 90%;
  max-width: 1100px;
  margin-inline: auto;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--blanco);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-title span {
  color: var(--rojo);
}

.divider {
  width: 48px;
  height: 3px;
  background: var(--rojo);
  margin-block: 12px;
}

/* ─── Reveal on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}