/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --negro:  #0a0a0a;
  --rojo:   #EA2227;
  --blanco: #f5f3f0;
  --gris:   #8a8a8a;
  --bg:     #FFFFFF;
  --bg-dark: #0a0a0a;
  --bg-cream: #f5f3f0;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Inter', 'Helvetica Neue', sans-serif;
  --dm:     'DM Sans', 'Helvetica Neue', sans-serif;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
body {
  background: var(--bg);
  color: var(--negro);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── CONTAINER ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
.h1-heading {
  font-family: var(--serif);
  font-style: italic;
}

/* ── FOCUS VISIBLE (a11y) ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

/* ── FADE-UP ANIMATION ─────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease),
              transform 0.7s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-up-delay-1 { transition-delay: 80ms; }
.fade-up-delay-2 { transition-delay: 160ms; }
.fade-up-delay-3 { transition-delay: 240ms; }

/* ── SELECTION ─────────────────────────────────────────────── */
::selection {
  background: var(--rojo);
  color: var(--bg);
}

/* ── SECTION RHYTHM ────────────────────────────────────────── */
.section-dark {
  background: var(--bg-dark);
  color: var(--blanco);
}
.section-light {
  background: var(--bg);
  color: var(--negro);
}
.section-cream {
  background: var(--bg-cream);
  color: var(--negro);
}