/* ==========================================================================
   Base — reinicio, tipografía y utilidades de layout
   ========================================================================== */

/* --- Fuente ---------------------------------------------------------------
   Alojada en el propio servidor: sin peticiones a terceros, sin el problema
   de RGPD que arrastra Google Fonts, y sin depender de que un CDN responda.
   `font-display: swap` evita el texto invisible mientras carga. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fuentes/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fuentes/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fuentes/inter-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fuentes/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fuentes/inter-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* --- Reinicio ------------------------------------------------------------ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  line-height: var(--lh-texto);
  color: var(--gris-texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* `hidden` tiene que esconder. Sí, hace falta decirlo.
 *
 * El navegador esconde `[hidden]` con una regla suya de `display: none`,
 * pero es de la hoja del USUARIO-AGENTE: cualquier `display` que ponga la
 * hoja del sitio la pisa, por poca especificidad que tenga.
 *
 * Y aquí la pisa: `.tarjeta { display: flex }`. Al filtrar el catálogo,
 * las tarjetas que sobran se marcaban con `hidden`, el contador decía «1
 * de 7 productos» —o sea que el filtro funcionaba— y debajo seguían las
 * siete. Medido en el navegador: hidden = true, display = flex, alto =
 * 349 px.
 *
 * Va con !important a propósito, que es de las pocas veces que se
 * justifica: esto no compite con nadie por el estilo, restablece una
 * garantía del lenguaje que otra regla rompió sin querer. Cualquier
 * `display` que se declare mañana en cualquier componente volvería a
 * romperla.
 *
 * Y va en base.css y no junto al catálogo porque el problema no es del
 * catálogo: es de todo `[hidden]` del sitio. */
[hidden] {
  display: none !important;
}

/* `<picture>` NO cuenta como caja.
 *
 * El generador envuelve cada foto en un <picture> para poder ofrecer WebP
 * y varios tamaños. Si el wrapper fuera un bloque normal, se metería en
 * medio de todos los flex y los grid: donde antes el hijo era la <img>,
 * ahora sería el <picture>, y las reglas de tamaño dejarían de aplicarse
 * al elemento que se pinta.
 *
 * Con `display: contents` desaparece del árbol de cajas y la <img> vuelve
 * a comportarse como hija directa a efectos de maquetación. Lo que NO
 * arregla es un selector de hijo directo —`.hero > img` sigue sin
 * encajar, porque eso es el DOM y no las cajas— y por eso esos cuatro
 * selectores llevan al lado su variante con picture. */
picture {
  display: contents;
}

/* Y el <source>, FUERA.
 *
 * Ésta es la mitad que faltaba, y la que rompía el diseño de verdad.
 * `display: contents` saca al <picture> del árbol de cajas, pero entonces
 * TODOS sus hijos suben a ocupar su sitio — y ahí no está sólo la <img>,
 * están también los <source> del WebP.
 *
 * En una rejilla eso se ve enseguida: en «Empaques Flexibles», de dos
 * columnas, el <source> se quedaba con la celda de la derecha (551×0 px,
 * medido en el navegador) y empujaba la foto a la fila siguiente, debajo
 * del texto. Lo mismo en cualquier flex o grid del sitio.
 *
 * El navegador no lo pinta —no tiene contenido— pero SÍ participa en la
 * maquetación, porque el `display:none` que trae de fábrica deja de
 * aplicarse cuando su padre es `contents`. Se le pone explícito. */
picture > source {
  display: none;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

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

h1,
h2,
h3,
h4 {
  font-weight: var(--peso-fuerte);
  line-height: var(--lh-titulo);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Foco visible para quien navega con teclado, sin ensuciar el clic de ratón. */
:focus-visible {
  outline: 3px solid var(--verde-lima);
  outline-offset: 3px;
}

/* --- Utilidades de layout ------------------------------------------------ */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  padding-block: var(--gap-seccion);
}

/* Bloque a sangre con fotografía de fondo y velo encima. */
.bloque-foto {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--blanco);
}

.bloque-foto > img,
.bloque-foto > picture > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloque-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo, var(--velo-medio));
}

/* Rejillas del sitio. Colapsan igual en todas las páginas. */
.rejilla {
  display: grid;
  gap: var(--gap-rejilla);
}

.rejilla--4 {
  grid-template-columns: repeat(4, 1fr);
}

.rejilla--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
  .rejilla--4,
  .rejilla--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rejilla--4,
  .rejilla--3 {
    grid-template-columns: 1fr;
  }
}

/* Sólo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Salto al contenido, primer tabulador de la página. */
.saltar {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  background: var(--verde-lima);
  color: var(--verde-oscuro);
  font-weight: var(--peso-fuerte);
  border-radius: 0 0 var(--radio-boton) var(--radio-boton);
  transition: translate var(--transicion);
}

.saltar:focus {
  translate: -50% 0;
}