/* ==========================================================================
   base.css — tokens de diseño, reset y utilidades globales
   Cargar primero. Los colores y tipografía viven aquí para cambiarse en un solo lugar.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Colores */
  --color-bg: #F3EFDF;
  --color-surface: #FFFFFF;
  --color-ink: #1F2A33;
  --color-ink-2: #34424E;
  --color-ink-3: #4A5763;
  --color-brand: #3F566D;
  --color-brand-strong: #4E667E;
  --color-accent: #5E7892;
  --color-sage: #8E9E83;
  --color-sage-light: #BDCFAA;
  --color-mist: #A7B7C6;
  --color-sky-light: #DDE6EE;
  --color-sky-faint: #EEF2F6;
  --color-footer-text: #C9D3DC;

  /* Tipografía */
  --font-sans: 'Outfit', system-ui, sans-serif;

  /* Layout */
  --container-max: 1240px;
  --gutter: 24px;
  --section-pad: clamp(64px, 9vw, 110px);
  --radius-pill: 999px;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
input, textarea, button { font: inherit; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-ink); }

/* Contenedor centrado. Las secciones lo usan dentro de su <section>. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}