/* =============================================
   VARIABLES Y RESET GLOBAL
   ============================================= */
:root {
  --negro:          #0a0a0a;
  --negro2:         #111111;
  --negro3:         #0d0d0d;
  --plata:          #c8c8c8;
  --plata-brillante:#e8e8e8;
  --plata-oscuro:   #888888;
  --borde:          #222222;
  --borde-hover:    #555555;

  --fuente-titulo:  'Cinzel', Georgia, serif;
  --fuente-cuerpo:  'Raleway', sans-serif;

  --max-width:      1000px;
  --seccion-pad:    5rem 2rem;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--plata);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  line-height: 1.8;
  overflow-x: hidden;
}

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

@media (max-width: 600px) {
  :root { --seccion-pad: 3rem 1.2rem; }
}

@media (max-width: 380px) {
  :root { --seccion-pad: 2.5rem .9rem; }
}

/* =============================================
   UTILIDADES COMUNES
   ============================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section       { padding: var(--seccion-pad); }
.section--alt  { background: var(--negro3); }

.section-label {
  font-family: var(--fuente-titulo);
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--plata-oscuro);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--plata-brillante);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: .75rem;
}

.section-divider {
  width: 60px;
  height: 1px;
  background: var(--plata-oscuro);
  margin: 0 auto 3rem;
}