/* ============================================================================
   Brooklyn by Janice — Base
   Reset acotado, tipografía y utilidades compartidas.
   Depende de tokens.css.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ahora que el header sí se queda pegado arriba, un salto a un ancla
     (#main del skip-link, #como-pedir en Postres) dejaría el destino debajo
     del header. Esto le reserva su alto al aterrizar. */
  scroll-padding-top: calc(var(--sticky-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
 * El papel es del SITIO, no de cada sección.
 *
 * Hasta el 23-08 el body era blanco y el papel se pintaba en contenedores
 * interiores —`.entry` de las legales, `.woocommerce-account .woocommerce`,
 * `.bk-cart`, `.bk-gracias`—, que además viven dentro de un envoltorio de
 * ancho de lectura. El resultado era el que describió Ignacio: un rectángulo
 * de fondo al medio de la pantalla y las orillas al aire en blanco, en las
 * cuatro páginas donde el contenido no ocupa el ancho completo.
 *
 * Pintarlo acá lo resuelve de raíz: cualquier página que no declare fondo
 * propio queda sobre el mismo papel, y las secciones que sí quieren otro
 * color (`--ink`, `--wine`, blanco de tarjeta) lo siguen declarando y ganan.
 *
 * La textura va junto con el color y no separada: son la misma superficie, y
 * dejar la harina en los contenedores interiores duplicaría los puntos ahí
 * donde se solapan —una malla más densa en un rectángulo, que se ve.
 */
body {
  margin: 0;
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  /* Interlineado único del cuerpo de todo el sitio. Estaba repartido entre
     1,45 · 1,5 · 1,55 · 1,6 y 1,65 según la hoja que lo escribiera, así que
     dos párrafos del mismo tamaño respiraban distinto según la página. Ahora
     es un token (79 declaraciones unificadas, 23-08). */
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  /* `clip`, NO `hidden`.
     `overflow-x: hidden` convierte al body en su propio contenedor de scroll,
     y eso rompe dos cosas a la vez, en silencio: anula el `position: sticky`
     de cualquier descendiente (el header quedaba sin pegarse) y deja
     `window.scrollY` clavado en 0, así que el listener de initHeaderScroll()
     en app.js nunca se disparaba. `clip` recorta igual el drawer que entra
     desde fuera del viewport, pero no crea contenedor de scroll. */
  overflow-x: clip;
}

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

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea { font: inherit; }

button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Tipografía ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
}

/* clamp() para que el título respire en móvil sin media queries.
   El 95,64% del tráfico entra por teléfono: el tamaño base es el móvil. */
h1 { font-size: clamp(1.9rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }

p { margin: 0 0 1em; }

strong, b { font-weight: 700; }

/* Eyebrow: el texto chico en mayúsculas sobre los títulos.
   Va en mono; en el theme viejo caía a Courier del sistema porque Fira Code
   nunca se cargaba.

   ⚠️ La clase va DOBLE (`.eyebrow.eyebrow`) a propósito, no es un typo.

   El eyebrow se marca como `<p class="eyebrow">`, así que cualquier regla de
   página del tipo `.una-caja > p { font-size: 16px }` —especificidad 0,1,1—
   le ganaba a `.eyebrow` —0,1,0— y se lo llevaba puesto. El resultado eran
   eyebrows a 16px en vez de 11,5: mayúsculas gigantes con letter-spacing de
   titular. Estaba pasando en CINCO lugares de tres páginas a la vez (home
   ×3, sobre mí, postres) y no se veía como un bug sino como "tipografía
   fea", que es justo por qué sobrevivió tanto.

   Duplicar la clase sube la especificidad a 0,2,0 y vuelve al componente
   inmune a esa familia de regla, sin tocar las cinco páginas. Los overrides
   deliberados (`.home-bundle-top .eyebrow`, etc.) son 0,2,0 y viven en hojas
   que cargan DESPUÉS de esta, así que siguen ganando por orden de cascada. */
.eyebrow.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cacao);
}

.script {
  font-family: var(--script);
  font-style: italic;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.wrap--reading { max-width: var(--reading); }

.section { padding-block: clamp(40px, 7vw, 76px); }


/* ---------- Contenido editorial ----------
   Las páginas legales salen de `the_content()`, no de una plantilla: ahí el
   HTML lo escribe una persona en el editor y las listas tienen que verse como
   listas. El reset global `ul, ol { list-style: none }` de más arriba es
   correcto para los componentes del tema, pero dejaba la política de reembolso
   con sus cláusulas ("más de 48 horas", "menos de 48 horas", "no presentación")
   corridas una tras otra sin viñeta, como si fueran un solo párrafo. En un
   documento legal esa separación no es decorativa. */

.entry ul,
.entry ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }

.entry li {
  margin-bottom: 8px;
  line-height: var(--lh-texto);
}

.entry li::marker { color: var(--terracotta); }

/* ---------- Accesibilidad ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--mono);
  font-size: .8rem;
  border-radius: var(--r-sm);
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Foco visible solo por teclado: el aro alrededor de cada botón al tocarlo
   en móvil se ve como un error de diseño. */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Migas ---------- */

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--cacao);
  /* Arriba, el aire contra el header del sitio (`--sec-hero`); abajo, el aire
     hacia el titular, que es otra cosa y es más corto.

     ⚠️ Esto solo se ve en las pantallas transaccionales —carrito, checkout,
     «gracias», «mi cuenta»—, donde el `.wrap` NO lleva `.section` y por lo
     tanto las migas quedan fuera del RITMO VERTICAL ÚNICO. En las legales y en
     la ficha el ritmo (0,2,1) le gana a este (0,1,0) y pone el mismo valor por
     su cuenta, así que las dos familias abren igual. */
  padding-block: var(--sec-hero) 18px;
}

.breadcrumb a:hover { color: var(--wine); }