/* SATANA — tokens de marca. FUENTE ÚNICA para landing y tienda.
   Valores según Manual de Marca (versión horizontal 2025, revisión 2026-08).
   Cargar SIEMPRE antes de styles.css / tienda.css.

   Regla: ningún color literal fuera de este archivo. Los grises y las líneas
   se derivan por alpha de crema o tinta (`--sat-crema-rgb` / `--sat-tinta-rgb`),
   así un cambio de paleta se propaga solo. */
:root {
  /* ---------- Paleta oficial — primarios ---------- */
  --sat-rojo: #D82017;        /* Rojo Satana · Pantone 485 C · el del logo */
  --sat-crema: #F5F0E5;       /* Crema Satana */
  --sat-fondo: #1C0F07;       /* Carbón de Horno */
  --sat-naranja: #E68818;     /* Naranja Fuego */

  /* ---------- Paleta oficial — secundarios ---------- */
  --sat-crema-2: #EDE6D6;     /* Crema cálido */
  --sat-navy: #171730;        /* Azul Noche — secundario: fondos especiales, no secciones principales */

  /* ---------- Derivados de superficie y texto ---------- */
  --sat-carbon: #3D1A08;      /* Carbón decorativo */
  --sat-panel: #251409;
  --sat-panel-2: #2B180C;
  --sat-tinta: #4A3828;       /* cuerpo de texto sobre crema */

  /* ---------- Bases RGB para derivar alphas ---------- */
  --sat-crema-rgb: 245, 240, 229;
  --sat-tinta-rgb: 74, 56, 40;

  /* ---------- Escalas derivadas — sobre fondo oscuro ---------- */
  --sat-crema-78: rgba(var(--sat-crema-rgb), .78);   /* párrafo secundario */
  --sat-crema-70: rgba(var(--sat-crema-rgb), .70);
  --sat-crema-62: rgba(var(--sat-crema-rgb), .62);   /* descripciones, claims */
  --sat-crema-55: rgba(var(--sat-crema-rgb), .55);   /* metadatos de footer */
  --sat-crema-45: rgba(var(--sat-crema-rgb), .45);
  --sat-crema-38: rgba(var(--sat-crema-rgb), .38);   /* crédito, letra chica */
  --sat-borde: rgba(var(--sat-crema-rgb), .28);      /* bordes de control */
  --sat-linea: rgba(var(--sat-crema-rgb), .14);      /* separadores */
  --sat-velo: rgba(var(--sat-crema-rgb), .06);       /* placeholders sobre oscuro */

  /* ---------- Escalas derivadas — sobre crema ---------- */
  --sat-tinta-72: rgba(var(--sat-tinta-rgb), .72);   /* avisos, letra chica */
  --sat-tinta-58: rgba(var(--sat-tinta-rgb), .58);   /* caption de placeholder */
  --sat-tinta-28: rgba(var(--sat-tinta-rgb), .28);   /* borde de placeholder */

  /* ---------- Colores funcionales (interfaz, NO marca) ----------
     No usar en títulos, botones principales ni fondos de sección.
     `--fx-error` se corrió al salmón para separarlo del Rojo Satana. El criterio
     es distancia de color (ΔE), no contraste: dos rojos de luminancia parecida
     dan un ratio de contraste ~1 y aun así se confunden. Medido contra #D82017:
     el anterior #E04A3A daba ΔE 15,8 — se leía como el mismo rojo. El salmón da
     ΔE 40,2, la misma separación que hay entre el naranja y el rojo de marca
     (44,8), y mantiene 6,66 de contraste sobre --sat-panel-2 (AA). */
  --fx-exito: #5BA25F;
  --fx-advertencia: #E6B818;
  --fx-error: #F2836F;
  --fx-info: #7A9CC6;
  --fx-campo: #FFFFFF;        /* fondo de input */

  /* ---------- Estados de interacción ---------- */
  --sat-rojo-osc: #B41A12;                        /* hover del rojo */
  --sat-naranja-cl: #F09A2E;                      /* hover del naranja */
  --sat-naranja-60: rgba(230, 136, 24, .6);       /* borde de tarjeta en hover */
  --sat-sobre-rojo: #FFFFFF;                      /* texto sobre Rojo Satana:
                                                     con crema el contraste da 4,46 y no llega a AA */

  /* ---------- Tipografía oficial ---------- */
  --tipo-display: 'Lato', sans-serif;           /* titulares — peso 900 */
  --tipo-label: 'Archivo Narrow', sans-serif;   /* etiquetas, precios — bold */
  --tipo-texto: 'Poppins', sans-serif;          /* cuerpo */

  /* ---------- Espaciado, radios, sombra ---------- */
  --esp-xs: 8px; --esp-s: 16px; --esp-m: 24px;
  --esp-l: 40px; --esp-xl: 64px; --esp-xxl: 104px;
  --radio-s: 4px; --radio-m: 10px;
  --sombra: 0 20px 60px rgba(0, 0, 0, .5);      /* solo overlays: drawer, modal, toast */
}

/* ---------- Grano de papel ----------
   Tile de 256 px derivado de `textura_papel.png` del manual: el original es
   1754×1240 (1,8 MB) y no repite sin costura. Este conserva su densidad
   (media de alpha 4,9 sobre 255) y sí es tileable.

   Va como una sola capa sobre toda la página, incluido el texto — así funciona
   el grano en imprenta, y a esta opacidad es imperceptible. `pointer-events:none`
   lo deja fuera del camino del mouse; el z-index alto evita pelearse con el
   header sticky (50) y el carrito de la tienda (51). */
.grano::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: url("img/marca/grano-papel.png") repeat;
  background-size: 256px 256px;
}