/* Bulgi Kéfir — base.css */

/* ---- Fuentes de marca ----
   Las 8 caras verificadas contra assets/fonts/. Sin esto Recoleta y Garbata
   caen a Georgia y el sitio pierde su tipografía sin avisar de nada. Estaban
   solo en la hoja vieja, que index.html ya no carga. */
@font-face { font-family: "Recoleta"; src: url("../assets/fonts/recoleta-regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Recoleta"; src: url("../assets/fonts/recoleta-medium.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Recoleta"; src: url("../assets/fonts/recoleta-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Recoleta"; src: url("../assets/fonts/recoleta-bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }
/* ============================================================
   ⏸️ GARBATA RETIRADA HASTA COMPRAR LA LICENCIA (2026-08-26)
   ============================================================
   Aquí vivían OCHO @font-face: las cuatro `garbata-*.ttf` y las cuatro que
   redirigían sus dígitos a Recoleta. Las ocho se fueron el día que se publicó
   F1, y el motivo es de LICENCIA, no de diseño.

   Los `garbata-*.ttf` son la versión **TRIAL de Zetafonts**. Servirlos desde
   bulgikefir.com los deja descargables por cualquiera, y un sitio comercial con
   tipografía de prueba es un incumplimiento. Mientras nada estuvo publicado no
   costaba nada; al publicar, sí. Decisión de Mario: *"usemos una tipografía
   genérica por el momento y después compro la licencia"*.

   Hoy el cuerpo del sitio usa la **sans del sistema** (ver `--fuente-cuerpo` en
   `tokens.css`): no se descarga, no pesa y no tiene licencia que incumplir.
   Recoleta NO se toca — esa sí está licenciada y sigue en los títulos.

   ⚠️ Los cuatro .ttf SIGUEN en `assets/fonts/` a propósito, para que volver sea
   trivial. Lo que impide que se publiquen es `--exclude-glob='garbata-*.ttf'` en
   `deploy.sh`. **Esa línea es lo único que separa el repo de un archivo con
   licencia de prueba colgado en internet.** No la quites sin leer esto.

   ────────────────────────────────────────────────────────────
   👉 PARA VOLVER A GARBATA, cuando lleguen los archivos licenciados:

   1. Poner los archivos nuevos en `assets/fonts/`. **Pide los `.woff2`**, no los
      `.ttf`: hoy pesaban 405 KB entre regular y bold, y en woff2 es un tercio.
   2. Devolver aquí las @font-face de **regular (400) y bold (700)** — y solo
      esas dos: se midió cargando las 10 páginas y `medium` y `italic` no las
      pide NADIE. El CSS nunca escribe `font-weight: 700` con la fuente de
      cuerpo, escribe `600` diecisiete veces; como no hay cara de 600, el
      navegador busca hacia arriba y aterriza en la de 700. Por eso la bold hace
      falta aunque no se vea pedida en ningún lado.
   3. En `tokens.css`, `--fuente-cuerpo: Garbata, <la pila de sistema de hoy>`.
      **El fallback NO vuelve a ser `Georgia, serif`**: Garbata es una sans y
      Georgia una serif, así que ese fallback cambiaba el carácter del sitio
      entero si la fuente fallaba. Comprobado renderizando el 2026-08-26.
   4. Quitar `--exclude-glob='garbata-*.ttf'` de `deploy.sh`.
   5. Si los archivos licenciados **siguen trayendo los dígitos rotos** (no
      deberían: eso es de la trial), el parche que había aquí está en el
      historial — `git log -S "U+0030-0039" -- css/base.css`.

   `tests/fuentes.test.js` vigila que nada de esto se rompa a medias.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Los anclas internos no pueden aterrizar DEBAJO del cromo pegado: sin esto,
     `/#contacto` y `#inicio` dejan su título tapado por la barra. Y `/#contacto`
     llega desde fuera del repo —la bio de Instagram, mensajes viejos, lo que
     Google tenga indexado—, así que no es un caso de laboratorio.
     El valor es el alto del header (76px) más un respiro. */
  scroll-padding-top: 92px;
}

/* El lienzo del sitio (sistema v3). Hasta el 2026-08-25 esto era
   `background: var(--crema); color: var(--cafe)`, o sea el sistema v1 entero
   —fondo beige y tinta café— sobreviviendo debajo de todo: solo no se veía
   porque cada sección se pintaba encima. Se notaba en los huecos sin bloque y
   en el rebote del scroll. Ahora el <body> dice lo mismo que el tema `papel`. */
body {
  margin: 0;
  background: var(--papel);
  color: var(--negro);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  text-wrap: pretty;
}

h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 700; margin: 0; }
h4 { font-weight: 600; }
p { margin: 0; }

img, svg { max-width: 100%; display: block; }

/* 🔴 `hidden` GANA SIEMPRE. Va con !important a propósito.

   El navegador esconde con `[hidden] { display: none }`, que es una regla de
   la hoja del USUARIO-AGENTE: cualquier `display` que escriba este sitio le
   gana. Así que en cuanto un componente declara `display: grid`, ponerle
   `elemento.hidden = true` deja de esconderlo — y no da error, no avisa: el
   panel simplemente sigue ahí.

   Este sitio ya se tropezó TRES veces con lo mismo: `.b-menu-movil`,
   `.b-carrito` (visto en una captura de Mario el 2026-08-26) y el campo de
   frecuencia de las tarjetas. Cada vez se parchó con una regla más
   —`.loquesea[hidden] { display: none }`— y la siguiente volvió a caer.

   Una sola regla global lo cierra para todo lo que venga. Si alguna vez hace
   falta un elemento `hidden` que SÍ se pinte, es que no debía llevar `hidden`:
   usa una clase. */
[hidden] { display: none !important; }

a {
  /* El respaldo es la tinta del lienzo, no el café de v1: un enlace fuera de
     todo bloque salía marrón sobre blanco cálido. */
  color: var(--tinta, var(--negro));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-rapida) var(--curva);
}
a:hover { text-decoration-color: currentColor; }

/* Foco visible: anillo de tinta con separación de la superficie */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible,
[data-estado="foco"] {
  outline: var(--borde-ancho-fuerte) solid var(--tinta);
  outline-offset: var(--e-2xs);
}

/* Superficies de bloque */
[data-bloque] { background: var(--superficie); color: var(--tinta); }

/* ---- Escala tipográfica ---- */
.t-display-xl {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh);
  letter-spacing: -0.02em;
}
.t-display-l {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-display-l-size); line-height: var(--t-display-l-lh);
  letter-spacing: -0.015em;
}
.t-display-m {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-display-m-size); line-height: var(--t-display-m-lh);
}
.t-title-s {
  font-family: var(--fuente-titulo); font-weight: 600;
  font-size: var(--t-title-s-size); line-height: var(--t-title-s-lh);
}
.t-eyebrow {
  font-family: var(--fuente-cuerpo); font-weight: 600;
  font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.t-body-l { font-size: var(--t-body-l-size); line-height: var(--t-body-l-lh); }
.t-body   { font-size: var(--t-body-size);   line-height: var(--t-body-lh); }
.t-body-s { font-size: var(--t-body-s-size); line-height: var(--t-body-s-lh); }
.t-legal  { font-size: var(--t-legal-size);  line-height: var(--t-legal-lh); }
/* Texto secundario. Siempre >=4.5:1 contra la superficie del bloque:
   se puede usar en cuerpo sin pensar. */
.tinta-suave { color: var(--tinta-suave); }
/* El acento del bloque. En el sistema v3 solo hay DOS respuestas y las decide
   la luminosidad del fondo, no el logo: superficie clara → cobalto, superficie
   oscura → dorado. (En v2 rotaba por tema —crema→cobalto, celeste→café,
   café→celeste…— y el color de los antetítulos cambiaba al hacer scroll.)
   ⚠️ Va en antetítulos, números, subrayados y detalles — NUNCA en párrafos.
   Pasa AA sobre su propia superficie, pero es color de marca, no de lectura:
   un párrafo entero en acento devuelve el sitio a la monotonía que este
   sistema vino a quitar. Para texto seguido va la tinta o .tinta-suave. */
.acento { color: var(--acento); }
/* El realce del bloque: celeste sobre fondo claro, dorado sobre oscuro.
   ⚠️ ES UN RELLENO, NO UN COLOR DE TEXTO, y por eso esta utilidad pinta el
   fondo y no `color`. Celeste sobre papel da 1.49:1 y dorado sobre papel 1.86:1:
   como texto o como línea suelta son invisibles. Como superficie, en cambio,
   admiten tinta negra de sobra (10.88:1 y 7.55:1), y son el sitio por donde el
   azul bajito y el dorado siguen apareciendo en toda la página ahora que ya no
   son fondos de sección. Lleva su borde de tinta para separarse del lienzo. */
.realce {
  background: var(--realce);
  color: var(--realce-tinta);
  border: var(--borde-ancho) solid var(--realce-borde);
}
/* Texto atenuado. Solo garantiza >=3.0:1 — úsalo únicamente en texto de
   >=24px (o >=19px bold) y en elementos de UI. Nunca en párrafos. */
.tinta-tenue { color: var(--tinta-tenue); }

/* ---- Reveal por bloque ---- */
@keyframes reveal-bloque {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: reveal-bloque var(--dur-reveal) var(--curva) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { animation: none; opacity: 1; transform: none; }
}