/* ============================================================
   Tipografías, servidas desde aquí

   Venían de Google: tres peticiones bloqueantes a otro dominio antes de
   pintar una letra, y la IP de cada visitante viajando a Google sin
   consentimiento —lo que condenó el LG München I en enero de 2022—.

   Son fuentes VARIABLES: un fichero por familia cubre todos los pesos.
   Google servía el mismo binario cuatro veces, uno por peso pedido.
   Subconjunto `latin`, que es donde vive el español entero, acentos y
   signos de apertura incluidos.
   ============================================================ */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/jost-variable.woff2?v=202608311905") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans-variable.woff2?v=202608311905") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Solo la cursiva: es la única variante de Fraunces que usa el diseño. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("../assets/fonts/fraunces-italic-variable.woff2?v=202608311905") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: custom · enrichment: E-photo · nav: N6 · footer: Ft1
 * vibe: "barbería de barrio, clara y directa"
 * paper  oklch(97% 0.008 85)   · light band
 * accent oklch(52% 0.110 78)   · warm (gold, hue 78)
 * display Jost (Futura-like, roman) · body IBM Plex Sans
 * axes: paper-band=light · display-style=geometric-sans · accent-hue=warm
 * rev 2 — corrige: demasiado oscuro, display sobredimensionado, serif no deseada, hero sin foto
 */

:root {
  /* ---- Claro (el grueso de la página) ---- */
  --color-paper:      oklch(97% 0.008 85);   /* crema, nunca #fff */
  --color-paper-2:    oklch(94% 0.010 85);
  --color-paper-3:    oklch(90% 0.011 85);
  --color-rule:       oklch(84% 0.012 85);
  --color-neutral:    oklch(48% 0.013 70);
  --color-muted:      oklch(38% 0.013 65);
  --color-ink:        oklch(20% 0.014 60);   /* carbón cálido, nunca #000 */

  /* ---- Oscuro (solo hero y footer) ---- */
  --color-dark:       oklch(19% 0.013 70);
  --color-dark-2:     oklch(24% 0.013 70);
  --color-dark-rule:  oklch(34% 0.013 70);
  --color-on-dark:    oklch(95% 0.008 85);
  --color-on-dark-mut:oklch(78% 0.011 85);
  --color-on-dark-dim:oklch(68% 0.011 85);   /* secundario sobre oscuro: neutral (61%) se queda en 2,8:1 */

  /* ---- Acento ---- */
  --color-accent:      oklch(52% 0.110 78);  /* oro sobre claro */
  --color-accent-dim:  oklch(44% 0.090 78);
  --color-accent-light:oklch(74% 0.125 82);  /* oro sobre oscuro */
  --color-focus:       oklch(50% 0.150 78);

  /* ---- Typography ---- */
  --font-display: "Jost", ui-sans-serif, "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* outlier: sólo para la palabra en cursiva de los titulares */
  --font-acento:  "Fraunces", ui-serif, Georgia, serif;

  /* escala: tercera mayor (1.25) — más contenida que la rev 1 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   clamp(1.5rem, 2.2vw, 1.875rem);
  --text-2xl:  clamp(1.5rem, 2.6vw, 2rem);
  --text-3xl:  clamp(1.75rem, 3vw, 2.25rem);
  --text-display: clamp(1.75rem, 3.2vw, 2.75rem);  /* rev3: la imagen es la protagonista, el titular acompaña */

  --leading-display: 1.06;
  --leading-tight:   1.18;
  --leading-body:    1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-acento:  400;

  --track-display: -0.02em;
  --track-caps:     0.14em;

  /* ---- Space · escala 4pt ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  2.75rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;

  /* el contenedor aprovecha la pantalla; la prosa mantiene su medida de lectura */
  --page-max:    90rem;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --measure:     60ch;

  --rule-hair:  1px;
  --rule-thick: 2px;

  --radius-sm: 3px;
  --radius-md: 6px;

  /* ---- Neón (encendido del hero) ---- */
  --neon-core:  oklch(88% 0.145 88);   /* filamento: el punto más caliente */
  --neon-glow:  oklch(74% 0.130 82);   /* halo */
  --neon-far:   oklch(58% 0.105 78);   /* derrame lejano sobre la pared */

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur-mid:  260ms;
  --dur-slow: 520ms;
}