/* ============================================================
   BASE — Reset, Variables, Tipografía, Utilidades, Animaciones
   ============================================================ */

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

:root {
  --bg:          #f5f3ef;
  --bg-dark:     #0e0e0e;
  --text:        #0e0e0e;
  --text-inv:    #f5f3ef;
  --muted:       #888;
  --border:      #d6d3cc;
  --border-dark: #2a2a2a;
  --sans:        'Archivo', sans-serif;
  --narrow:      'Archivo Narrow', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }

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

/* ── Utilidades ── */
.section    { padding: 6rem 2.5rem; }
.section-sm { padding: 4rem 2.5rem; }

.label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(2.2rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}
h2 em { font-style: italic; font-weight: 300; }

.divider      { border: none; border-top: 1px solid var(--border); }
.divider-dark { border: none; border-top: 1px solid var(--border-dark); }

/* ── Helpers de color / texto ── */
.label--inv   { color: rgba(255,255,255,0.3); }
.text-muted   { color: var(--muted); }
.section-note {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 200px;
  text-align: right;
}
.section-note--inv {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  max-width: 220px;
  text-align: right;
}

/* ── Animación Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }