/* ==========================================================================
   Termos Épicos — Design Tokens
   Fuente única de verdad para color, tipografía, espaciado y motion.
   Cambios de marca pasan por aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografía auto-hospedada (subconjunto latin, WOFF2, ~124 KB en total).
   Antes venían de Google Fonts: 2 handshakes DNS+TLS extra antes de pintar
   texto, sin beneficio de caché compartida (los navegadores particionaron la
   caché HTTP en 2020). Además se pedían pesos que ningún CSS usa.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cinzel Decorative"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/cinzel-decorative-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cinzel-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/cinzel-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");
}

:root {
  /* --- Color: fondos oscuros y cálidos --- */
  --bg:        #060402;   /* negro cálido casi puro */
  --bg2:       #0d0a06;   /* fondo secundario */
  --bg3:       #14100a;   /* superficies / cards */
  --line:      rgba(201, 168, 76, .14); /* bordes sutiles dorados */
  --line-soft: rgba(240, 234, 216, .08);

  /* --- Dorado: único acento --- */
  --gold:      #c9a84c;
  --gold-hi:   #e8c97a;   /* highlights, precios, énfasis */
  --gold-lo:   #7a6328;   /* sombras / degradados */
  --glow:      rgba(201, 168, 76, .28);

  /* --- Texto --- */
  --text:      #f0ead8;   /* blanco marfil cálido */
  --muted:     #7a7060;   /* secundario, subtítulos */
  --muted-hi:  #a99f8c;

  /* --- Marca WhatsApp --- */
  --wa:        #25d366;
  --wa-dark:   #1da851;

  /* --- Estado --- */
  --ok:        #6fcf97;
  --warn:      #e0a44c;
  --danger:    #d9694e;

  /* --- Tipografía --- */
  --font-display: "Cinzel Decorative", Georgia, serif;  /* logo / hero */
  --font-serif:   "Cinzel", Georgia, serif;             /* subtítulos / nav / labels */
  --font-ui:      "Barlow Condensed", "Segoe UI", system-ui, sans-serif; /* cuerpo / UI */

  /* --- Radios --- */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow:    0 12px 40px rgba(0, 0, 0, .55);
  --shadow-gold: 0 10px 40px var(--glow);

  /* --- Layout --- */
  --maxw:   1240px;
  --gutter: clamp(18px, 4vw, 44px);
  --nav-h:  70px;

  /* --- Motion --- */
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:    .5s;
  --dur-fast: .25s;

  /* --- Gradientes de marca --- */
  --grad-gold: linear-gradient(100deg, var(--gold-lo), var(--gold) 45%, var(--gold-hi) 55%, var(--gold) 70%, var(--gold-lo));
  --grad-fade: linear-gradient(180deg, transparent, rgba(6, 4, 2, .85) 70%, var(--bg));
}