/* =====================================================================
   JB Perfumes — sistema visual «noir & or» · tokens (2026-11-12)
   Dueño: agente de sistema visual. Los demás usan las variables por nombre.
   Lo carga el mu-plugin jb-diseno.php el primero (tokens → sistema → header → footer → marcas).

   Fuentes alojadas aquí (fuentes/), licencia SIL Open Font License 1.1 (Google Fonts):
   Cormorant Garamond (Christian Thalmann) y Jost (Owen Earl / indestructible type*).
   Archivos variables, subconjunto latin (cubre español: á é í ó ú ñ ü ¿ ¡ « » – —).
   Se registran con nombre PROPIO («JB Cormorant», «JB Jost») a propósito: Woodmart y
   Elementor piden a Google cualquier familia cuyo nombre esté en su lista de Google Fonts;
   con un nombre que no está en esa lista no descargan nada y se usan solo estos archivos.
   ===================================================================== */
@font-face { font-family: 'JB Cormorant'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fuentes/cormorant-garamond-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'JB Cormorant'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('fuentes/cormorant-garamond-italic-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'JB Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fuentes/jost-var-latin.woff2') format('woff2'); }
:root {
  /* ---- Paleta corta (contraste medido, WCAG 2.x) ---------------------- */
  --jb-negro: #0f0e0c;          /* negro tinta, cálido. Fondos de hero, footer, botón primario */
  --jb-grafito: #1c1a17;        /* superficies oscuras secundarias, hover del primario */
  --jb-marfil: #f7f3ec;         /* fondo de bandas claras y de la imagen de producto */
  --jb-arena: #ece5d8;          /* separadores anchos, chips, estados hover sobre marfil */
  --jb-dorado: #bf9f62;         /* EXACTO del logo (píxel plano del PNG). Sobre negro 7,67:1 AAA.
                                   Sobre blanco 2,51:1 → solo líneas, iconos grandes y fondos de botón con texto negro */
  --jb-dorado-oscuro: #85662b;  /* dorado para TEXTO sobre claro: 5,34:1 blanco · 4,83:1 marfil (AA) */
  --jb-texto: #1c1a17;          /* 17,36:1 sobre blanco · 15,70:1 sobre marfil */
  --jb-texto-suave: #5f5a52;    /* 6,84:1 blanco · 6,18:1 marfil · 5,46:1 arena */
  --jb-linea: rgba(191, 159, 98, 0.40);   /* filete dorado (decorativo) */

  /* ---- Tipografía ------------------------------------------------------ */
  --jb-serif: 'JB Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* títulos ≥ 20 px */
  --jb-sans: 'JB Jost', 'Jost', 'Helvetica Neue', Arial, sans-serif;                            /* texto, UI, precios, nombres de producto */
  --jb-tracking: 0.14em;        /* versalitas de botones y etiquetas */
  --jb-radio: 2px;              /* botones, campos, insignias */

  /* ---- NUEVAS: color ----------------------------------------------------- */
  --jb-blanco: #ffffff;
  --jb-dorado-claro: #d9c08f;           /* texto dorado sobre negro (10,92:1) */
  --jb-burdeos: #8f2a2a;                /* % de descuento y errores: 8,29:1 sobre blanco */
  --jb-linea-neutra: #e6e0d5;           /* bordes de tarjetas, campos y tablas */
  --jb-texto-invertido: #f7f3ec;        /* 17,44:1 sobre negro */
  --jb-texto-suave-invertido: #a9a39a;  /* 7,71:1 sobre negro */
  --jb-tachado: #6f6a62;                /* precio anterior: 5,37:1 blanco · 4,85:1 marfil */
  --jb-exito: #2f6b4f;

  /* ---- NUEVAS: escala tipográfica (móvil → escritorio, fluida) ----------- */
  --jb-fs-display: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);      /* 40 → 64  serif 500  hero */
  --jb-fs-h1: clamp(1.875rem, 1.55rem + 1.3vw, 2.625rem);    /* 30 → 42  serif 500  título de página / ficha */
  --jb-fs-h2: clamp(1.625rem, 1.4rem + 0.95vw, 2.25rem);     /* 26 → 36  serif 500  título de sección */
  --jb-fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20 → 24  serif 600  subtítulo */
  --jb-fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17 → 19  sans 300  entradilla */
  --jb-fs-cuerpo: 1rem;          /* 16  sans 400 */
  --jb-fs-pequeno: 0.875rem;     /* 14  sans 400  nombres de producto, filtros */
  --jb-fs-micro: 0.75rem;        /* 12  sans 500  versalitas, migas, etiquetas */
  --jb-fs-boton: 0.8125rem;      /* 13  sans 500  versalitas +0,14em */
  --jb-lh-titulo: 1.12;
  --jb-lh-cuerpo: 1.65;
  --jb-peso-serif: 500;
  --jb-peso-serif-fuerte: 600;
  --jb-peso-sans: 400;
  --jb-peso-sans-medio: 500;
  --jb-tracking-titulo: 0.005em;
  --jb-tracking-versalita: 0.18em;

  /* ---- NUEVAS: espaciado (base 4) y forma -------------------------------- */
  --jb-esp-1: 4px;  --jb-esp-2: 8px;  --jb-esp-3: 12px; --jb-esp-4: 16px;
  --jb-esp-5: 24px; --jb-esp-6: 32px; --jb-esp-7: 48px; --jb-esp-8: 64px; --jb-esp-9: 96px;
  --jb-seccion: clamp(56px, 3vw + 44px, 104px);   /* aire vertical entre bandas de portada */
  --jb-ancho: 1320px;                               /* ancho de contenido */
  --jb-margen-lateral: clamp(16px, 4vw, 48px);
  --jb-radio-tarjeta: 0px;                          /* tarjetas rectas, sin sombra */
  --jb-alto-boton: 48px;
  --jb-alto-boton-sm: 40px;
  --jb-sombra-flotante: 0 10px 30px rgba(15, 14, 12, 0.08);
  --jb-transicion: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- NUEVAS: iconos de línea fina -------------------------------------- */
  --jb-icono: 24px;
  --jb-icono-trazo: 1.25;        /* stroke-width en viewBox 24 */
}