/* ==========================================================================
   Criterio & Dominio — brand.css
   Variables de marca, tipografías y color. NO MODIFICAR los códigos de color.
   Manual de Identidad v1.0 · 2026.
   ========================================================================== */

:root {
  /* Paleta oficial */
  --azul-noche:   #1B2433;   /* Principal · texto y fondos institucionales */
  --verde-oliva:  #6E7443;   /* Acento · el &, rótulos, detalles */
  --marfil:       #F3F1EA;   /* Fondo principal */
  --oliva-claro:  #B3B786;   /* Acento sobre azul */
  --pizarra:      #3A3F45;   /* Texto secundario */
  --piedra:       #8C8F88;   /* Líneas, bordes y datos auxiliares */

  /* Tintas derivadas (solo para estados hover/focus, mantienen la familia) */
  --azul-noche-90: #2B3446;
  --verde-oliva-90: #7D8351;
  --marfil-soft:   #ECEAE1;

  /* Tipografías */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica (Manual) */
  --fs-display: clamp(2.5rem, 5vw, 3.5rem);   /* 56px */
  --fs-titulo:  clamp(1.9rem, 3.4vw, 2.25rem); /* 36px */
  --fs-texto:   1.0625rem;                     /* 17px */
  --fs-nota:    0.8125rem;                     /* 13px */
  --fs-rotulo:  0.75rem;                       /* 12px */

  /* Rótulo: mayúsculas espaciadas 0.3em */
  --tracking-rotulo: 0.3em;

  /* Espaciado */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --max-width: 76rem;

  /* Bordes y líneas */
  --hairline: 1px solid var(--piedra);
}

/* ---------- Tipografía base ---------- */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-texto);
  line-height: 1.6;
  color: var(--pizarra);
  background-color: var(--marfil);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--azul-noche);
  font-weight: 500;
  letter-spacing: 0.01em;
}

h1 { font-size: var(--fs-display); font-weight: 500; }
h2 { font-size: var(--fs-titulo); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }

/* El signo & en cursiva y verde oliva, según el manual */
.amp {
  font-style: italic;
  font-weight: 400;
  color: var(--verde-oliva);
}

/* Rótulo: mayúsculas espaciadas */
.rotulo {
  font-family: var(--font-sans);
  font-size: var(--fs-rotulo);
  font-weight: 600;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--verde-oliva);
}

/* Nota: 13px */
.nota {
  font-size: var(--fs-nota);
  line-height: 1.55;
  color: var(--piedra);
}

/* Cifra destacada: serif, grande */
.cifra {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--azul-noche);
}

/* Fondo oscuro: ajustes de contraste dentro de la paleta */
.on-dark { color: var(--marfil); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .cifra { color: var(--marfil); }
.on-dark .rotulo { color: var(--oliva-claro); }
.on-dark .amp { color: var(--oliva-claro); }
.on-dark p { color: var(--marfil); opacity: 0.92; }
.on-dark .nota { color: var(--oliva-claro); opacity: 0.8; }