:root {
  --max: 100%;

  /* ── Superficie ── */
  --bg: #EDE8DF;           /* pergamino cálido */
  --surface: #F4F1EB;      /* tarjeta clara */

  /* ── Tinta ── */
  --ink: #1A1815;
  --text: #1A1815;
  --ink-50: rgba(26,24,21,0.50);
  --ink-25: rgba(26,24,21,0.25);
  --ink-10: rgba(26,24,21,0.10);
  --fg: var(--text);
  --fg-dim: rgba(26,24,21,0.55);

  /* ── Acento principal — azul archivo ── */
  --accent: #2B4A7A;
  --brand: var(--accent);
  --logo-accent: var(--accent);
  --blue: var(--accent);
  --blue-lt: #E8EDF5;

  /* ── Dorado — solo logo (D + divisor) ── */
  --gold: #C49A1E;

  /* ── Sistema ── */
  --border: rgba(26,24,21,0.12);
  --radius: 999px;
  --radius-sm: 6px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* ── Tipografía ── */
  --font-ccd: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
  font-family: var(--font-body);
  background-repeat: repeat;
  background-size: cover;
  background-image:
    linear-gradient(rgba(237,232,223,0.96), rgba(237,232,223,0.96)),
    image-set(
      url('/assets/imgs/0001-1600.avif') type('image/avif'),
      url('/assets/imgs/0001-1600.webp') type('image/webp'),
      url('/assets/imgs/0001.jpg') type('image/jpeg')
    );
}

a, button {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

h1 {
  margin: 0;
  font-family: var(--font-ccd);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-body);
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

p {
  margin: 0;
}

.container {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

main {
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .container {
    padding-inline: clamp(0.75rem, 4vw, 1.25rem);
  }
}

@media (max-width: 600px) {
  body {
    background-size: auto 600px;
    background-position: top center;
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(237,232,223,0.96), rgba(237,232,223,0.96)),
      image-set(
        url('/assets/imgs/0001-800.avif') type('image/avif'),
        url('/assets/imgs/0001-800.webp') type('image/webp'),
        url('/assets/imgs/0001.jpg') type('image/jpeg')
      );
  }
}