/* ═══════════════════════════════════════════════════
   ABOUT MARKETING — variables.css
   
   EDITA AQUÍ para cambiar colores, fuentes y espaciados
   de TODO el sitio de una sola vez.
   ═══════════════════════════════════════════════════ */

:root {

  /* ── COLORES PRINCIPALES ──────────────────────────
     Cambia estos 5 valores y todo el sitio se adapta  */
  --color-ink:      #0b0b0b;    /* Negro principal (textos, fondos oscuros) */
  --color-paper:    #faf8f4;    /* Blanco cálido (fondo general) */
  --color-warm:     #f0ece4;    /* Beige (fondos de secciones alternas) */
  --color-gold:     #c9a96e;    /* Dorado (acentos, botones, detalles) */
  --color-gold-lt:  #e8d5b0;    /* Dorado claro (sombras, fondos) */
  --color-muted:    #7a7670;    /* Gris cálido (textos secundarios) */
  --color-border:   rgba(11,11,11,0.12); /* Bordes suaves */

  /* ── TIPOGRAFÍA ───────────────────────────────────
     Fuentes cargadas desde Google Fonts en index.html */
  --font-display: 'Cormorant Garamond', Georgia, serif; /* Títulos */
  --font-body:    'Outfit', sans-serif;                  /* Textos */

  /* ── TAMAÑOS DE FUENTE ────────────────────────── */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;

  /* ── ESPACIADOS ──────────────────────────────── */
  --section-pad:  120px;  /* Padding vertical de secciones */
  --container-px: 40px;   /* Padding horizontal del contenedor */
  --gap-grid:     24px;   /* Espacio entre tarjetas del grid */

  /* ── LAYOUT ──────────────────────────────────── */
  --max-width: 1320px;    /* Ancho máximo del contenido */
  --nav-height: 68px;     /* Altura de la barra de navegación */
  --border-radius: 2px;   /* Radio de bordes (0 = sin redondeo) */

  /* ── TRANSICIONES ────────────────────────────── */
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}