/* ==========================================================================
   GEMPLAST — Sistema de diseño
   Prototipo estático. Este CSS es el del theme: no hay framework, así que
   nada de lo que está acá se tira cuando pasemos a WordPress.

   Identidad: industrial-editorial contemporánea.

   Dispositivos propios del sistema — lo que hace que esto sea Gemplast y no
   una plantilla:
     · Sello de código sobre la foto (C676), como en la ficha técnica de papel.
     · Índice numerado de catálogo, con la tipografía grande de un sumario.
     · Cifra gigante, dos por página como máximo.
     · Campos de color plenos (carbón / crema) alternados con foto a sangre.
     · Filete rojo como sistema de marcado. Nunca como relleno.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Marca — Manual de Marca Gemplast 2026, p. 14-15. No se tocan. */
  --rojo:   #E41A1A;
  --carbon: #20201F;
  --crema:  #EDEAE4;
  --beige:  #D8D8CB;
  --negro:  #000000;
  --blanco: #FFFFFF;

  /* Derivados. NO están en el manual: cubren jerarquía de texto y estados
     de interacción. Documentados en LEEME.md. */
  --rojo-oscuro: #B81515;
  --gris-90: #3A3A38;
  --gris-60: #63635C;
  --gris-40: #9A9A95;
  --gris-15: #E6E4DE;

  /* El rojo del manual no llega a 4.5:1 como texto chico: da 3.92:1 sobre
     crema y 3.46:1 sobre carbón. Se sigue usando tal cual en filetes, botones
     y titulares —ahí el requisito es 3:1 o no aplica—, y esta variante más
     profunda cuando el rojo es tipografía de cuerpo chico. Los contextos
     oscuros la redefinen a crema, porque oscurecer sobre carbón empeora. */
  --rojo-tinta: #C41414;

  /* Roles semánticos — las plantillas usan estos, nunca los colores crudos. */
  --fondo:        var(--blanco);
  --fondo-alt:    var(--crema);
  --texto:        var(--carbon);
  --texto-suave:  var(--gris-60);
  --acento:       var(--rojo);
  --acento-hover: var(--rojo-oscuro);
  --acento-texto: var(--blanco);
  --acento-tinta: var(--rojo-tinta);
  --linea:        var(--beige);
  --linea-fuerte: var(--carbon);

  /* Tipografía */
  --f-titulo: "Montserrat", system-ui, sans-serif;
  --f-texto:  "Roboto", system-ui, sans-serif;

  --t-tapa:    clamp(3rem, 8.5vw, 7.5rem);
  --t-display: clamp(2.5rem, 5.5vw, 4.5rem);
  --t-h2:      clamp(1.85rem, 3.4vw, 2.9rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  /* Cuerpo a 17 px y no a 16, y el escalón chico a 15 y no a 14. Roboto 400 a
     16/1.6 con medida larga es literalmente el ajuste por defecto de un
     procesador de texto: se lee bien y no dice nada. Un punto más de cuerpo,
     un poco menos de interlínea y un pelo de tracking negativo lo sacan de
     ahí sin salirse del manual, que fija la familia y no el tamaño. */
  --t-base:    1.0625rem;
  --t-chico:   0.9375rem;
  --t-micro:   0.75rem;

  /* Retícula y ritmo */
  --ancho: 1320px;
  --canal: 1.5rem;
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;
  --e5: 1.5rem; --e6: 2rem;   --e7: 3rem;   --e8: 4rem;
  --e9: 6rem;   --e10: 8rem;

  /* Sin radios. Sin sombras. Las separaciones son filetes. */
  --radio: 0;
  --borde: 1px solid var(--linea);
  --transicion: .2s ease;
}

/* Contextos de marca. Redefinen roles, no componentes: los mismos componentes
   cambian de identidad sin duplicar una línea de CSS. En producción el
   atributo lo escribe el term_slug de la marca. */
[data-marca="bosco"] {
  --acento: #245935;  --acento-hover: #1a4126;  --acento-texto: #eff6e0;
  --acento-tinta: #1a4126;
  --fondo-alt: #eff6e0;  --linea: #d7d3c8;  --texto: #1d2b1f;
  /* Los tres tonos del manual Bosco que estaban sin usar. Con el verde solo,
     la página entera se enfría y queda pálida. Estos entran en filetes,
     números y rótulos —nunca como campo de fondo— y son los que le dan la
     temperatura que el verde no tiene. */
  --tierra: #8b5e35;  --arena: #bf916a;  --salvia: #90a17c;
  /* Aspekta y Cosmetic son las del manual Bosco, sin licencia todavía. */
  --f-titulo: "Aspekta", "Montserrat", system-ui, sans-serif;
}
/* G Packaging no tiene paleta propia. Su logotipo está pintado en el mismo
   #E41A1A de Gemplast —muestreado del archivo oficial— y su catálogo se
   compone en ese rojo sobre gris técnico. Acá el acento se pisaba con carbón
   y la marca quedaba apagada: lo único que cambia es el campo de fondo. */
[data-marca="gpackaging"] {
  --fondo-alt: var(--gris-15);
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Las cifras tabulares estaban en <body>, o sea en todo el sitio. Sirven en
   una tabla técnica, donde las columnas tienen que alinearse, y estorban en
   un párrafo: igualan el ancho del 1 y del 8 y el texto corrido queda con
   agujeros. Se aplican donde hay números que se comparan entre sí. */
.tabla-variantes, .figura__codigo, .dato__n, .numeros b, .cifra-gigante__n,
.cuenta, .buscador__sku, .linea-tiempo__ano, code, .badge--codigo {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
h1 { font-size: var(--t-display); letter-spacing: -.035em; line-height: .98; }
h2 { font-size: var(--t-h2); letter-spacing: -.028em; }
h3 { font-size: var(--t-h3); letter-spacing: -.015em; }

/* 68ch a 17 px son casi 700 px de renglón. La medida cómoda para leer está
   entre 55 y 65 caracteres; por arriba de eso el ojo pierde el salto de línea
   y la página se convierte en un muro. */
p { margin: 0 0 var(--e4); max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .18em; }
strong, b { font-weight: 500; }

/* Entradilla — el párrafo de apertura de una sección o de una página.
   Roboto 300 a cuerpo grande: baja el peso justo donde el texto es más
   largo. Es lo que rompe el bloque gris uniforme de párrafos todos iguales,
   que es de dónde viene la sensación de documento exportado. */
.entradilla {
  font-weight: 300;
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
  line-height: 1.4; letter-spacing: -.018em;
  color: var(--texto); max-width: 46ch;
}
.entradilla strong, .entradilla b { font-weight: 500; }
img { max-width: 100%; height: auto; display: block; }

/* Logos de marca. Un logo deformado es el error más visible que puede tener
   una identidad, y basta con que un contenedor flex o una grilla le apliquen
   `stretch` para que pase. Acá se fija el ALTO y el ancho lo calcula el
   navegador; `flex:none` y `align-self:center` lo blindan de los dos casos
   en los que se estiraba.

   Desde el 13/8/2026 los tres archivos están recortados al límite de la tinta
   —sin margen transparente— y guardados al mismo alto en píxeles. Eso hace que
   `--alto-logo` sea UN número con UN significado para las tres marcas: el alto
   real del logotipo. Antes no lo era, porque cada original traía distinto aire
   arriba y abajo, y había que compensarlo con un alto distinto por marca en
   cinco lugares del CSS. Esos cinco quedaron sin efecto: no volver a ponerlos.

   `--escala-logo` multiplica el alto óptico sin tocar la plantilla. Es el
   único lever de contexto: el megamenú, la barra de marcas y la tarjeta de
   marca lo suben; la tarjeta de producto lo baja. Los tres crecen juntos.

   La regla es una sola declaración y vive o muere entera: si un comentario de
   más arriba se cierra antes de tiempo, el navegador la descarta en silencio y
   los tres logotipos salen a 1280 px de ancho en cinco pantallas a la vez.
   Pasó. Por eso ahora hay `herramientas/css.py`. */
img[data-logo] {
  height: calc(var(--alto-logo, 1rem) * var(--escala-logo, 1));
  width: auto; max-width: 100%;
  object-fit: contain; flex: none; align-self: center;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* El `display:none` que trae el navegador para [hidden] es una regla de su
   propia hoja: cualquier `display` que pongamos nosotros le gana, y entonces
   un componente con `display:grid` o `inline-flex` se ve igual estando oculto.
   Ya pasó cinco veces —de ahí las cinco reglas `.x[hidden]` sueltas repartidas
   por esta hoja—, y el modo de fallar es feo: se muestra el estado vacío al
   mismo tiempo que los resultados. Una sola regla para todo el sitio.
   El !important está justificado: `hidden` es una afirmación sobre el
   documento, no una preferencia de estilo, y tiene que ganar siempre. */
[hidden] { display: none !important; }

.salto-contenido { position: absolute; left: -9999px; background: var(--carbon); color: #fff; padding: var(--e3) var(--e5); z-index: 100; }
.salto-contenido:focus { left: var(--e4); top: var(--e4); }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.contenedor--angosto { max-width: 900px; }

/* El aire crece con la pantalla en vez de ser fijo. Con 6rem clavados, en un
   monitor ancho quedaban 192 px de blanco entre dos secciones seguidas y la
   página se leía como una memoria institucional. El mínimo es lo que necesita
   el teléfono; el máximo, lo que soporta el escritorio sin desarmarse. */
.seccion { padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.seccion--compacta { padding-block: clamp(2rem, 4vw, 3.5rem); }
.seccion--holgada { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura {
  background: var(--carbon); color: var(--crema);
  --texto: var(--crema); --texto-suave: var(--gris-40); --linea: #3A3A38; --fondo: var(--carbon);
  --acento-tinta: var(--crema);
}
.seccion + .seccion:not(.seccion--alt):not(.seccion--oscura) { border-top: var(--borde); }

/* Sección con fotografía a sangre.
   Va siempre junto a `.seccion--oscura`, que es la que redefine los colores de
   texto: acá sólo se mete la foto detrás y el velo que garantiza el contraste.
   `isolation: isolate` crea el contexto de apilado; dentro de él, un hijo con
   z-index negativo se pinta encima del fondo de la sección pero debajo del
   contenido, así que la foto tapa el carbón sin necesidad de posicionar nada
   más. Es el único bloque de la home que rompe la caja del contenedor: sirve
   para cortar el ritmo editorial de secciones iguales, no para decorar. */
.seccion--foto { position: relative; isolation: isolate; }
.seccion--foto > .seccion__foto { position: absolute; inset: 0; z-index: -2; }
.seccion--foto > .seccion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seccion--foto > .seccion__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(32,32,31,.93) 0%, rgba(32,32,31,.62) 42%, rgba(32,32,31,.82) 100%);
}
/* Las cifras dejan de ser azulejos opacos: con la foto detrás, el relleno
   sólido la borraba entera. Un velo plano —sin desenfoque ni bordes claros—
   mantiene el número legible sobre cualquier parte de la foto. */
.seccion--foto .numeros { background: rgba(237,234,228,.24); border-block-color: rgba(237,234,228,.24); }
.seccion--foto .numeros > li { background: rgba(32,32,31,.62); }

.cabecera-seccion {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4);
  margin-bottom: var(--e7); padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 900px) {
  .cabecera-seccion { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: var(--e7); }
}
.cabecera-seccion p { color: var(--texto-suave); margin: 0; font-weight: 300; font-size: 1.125rem; line-height: 1.45; letter-spacing: -.012em; max-width: 44ch; }
@media (min-width: 900px) { .cabecera-seccion > p:last-child { justify-self: end; } }
.cabecera-seccion--sola { grid-template-columns: minmax(0, 1fr) !important; }

.etiqueta {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.etiqueta::before { content: ""; width: 1.75rem; height: 2px; background: var(--acento); flex: none; }
.etiqueta__n { color: var(--acento-tinta); }

/* --------------------------------------------------------------------------
   4. CABECERA
   -------------------------------------------------------------------------- */

.barra-superior { background: var(--carbon); color: var(--gris-40); font-size: var(--t-micro); letter-spacing: .04em; }
.barra-superior .contenedor { display: flex; flex-wrap: wrap; gap: var(--e5); align-items: center; justify-content: space-between; min-height: 1.85rem; }
.barra-superior a { color: var(--crema); text-decoration: none; }
.barra-superior a:hover { color: #fff; text-decoration: underline; }
.barra-superior ul { display: flex; gap: var(--e5); }

/* Selector de idioma (D11). Sólo se imprime en las páginas que tienen
   traducción; en el theme lo imprime el conmutador de Polylang en la misma
   barra. El idioma actual va en crema y sin subrayado: es un estado, no un
   destino. */
.idiomas { display: flex; align-items: center; }
.idiomas a { color: var(--gris-40); letter-spacing: .08em; padding-inline: var(--e2); }
.idiomas a + a { border-left: 1px solid var(--gris-90); }
.idiomas a:hover { color: #fff; }
.idiomas a[aria-current] { color: var(--crema); font-weight: 700; }
.idiomas a[aria-current]:hover { color: var(--crema); text-decoration: none; }

/* En pantalla chica la barra se queda con teléfono y correo —las dos cosas
   que alguien hace desde un teléfono— y suelta el resto, que está entero en
   el panel del menú. Con los cuatro ítems, cada uno se partía en tres
   renglones y el correo se iba del borde. El selector de idioma se queda:
   cambiar de idioma desde el teléfono es exactamente el caso de uso. */
@media (max-width: 620px) {
  .barra-superior .contenedor > span,
  .barra-superior .solo-escritorio { display: none; }
  .barra-superior .contenedor { justify-content: center; }
  .barra-superior a { white-space: nowrap; }
}

.cabecera { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera .contenedor {
  display: flex; align-items: center; gap: var(--e6); min-height: 5.1rem;
  transition: min-height var(--transicion);
}

/* El logo es el archivo oficial en WebP con alfa, nunca texto simulado.
   Se fija la altura y el ancho se deduce: así el bloque no salta al cargar.

   Es la firma de la empresa en la única pieza que se ve en todas las páginas:
   se le da tamaño de firma. Y como la cabecera es fija, lo que crece arriba se
   descuenta del contenido: por eso al bajar la cabecera se compacta sola —ver
   `.cabecera--compacta`—, gana presencia al entrar y devuelve el alto cuando
   la persona ya está leyendo. */
/* Los números bajaron a la mitad el 13/8/2026 y el logo NO se achicó: el
   archivo viejo traía tanto margen transparente que la tinta era el 51 % de la
   caja, así que 2.9rem de caja eran 1.48rem de logotipo y 1.4rem de aire que
   empujaba el alto de la cabecera sin dibujar nada. Con el archivo recortado,
   2.1rem de caja son 2.1rem de logotipo. Subido de 1.6 a 2.1 y de ahí a 2.6
   el 14/8/2026: el cliente lo pidió más grande dos veces — es la firma de la
   página y a 2.1 todavía competía en peso con el botón del menú. */
.marca-logo { flex: none; display: block; line-height: 0; }
.marca-logo img { height: 2.6rem; width: auto; transition: height var(--transicion); }
@media (max-width: 560px) { .marca-logo img { height: 2.1rem; } }

.cabecera--compacta .contenedor { min-height: 4.15rem; }
.cabecera--compacta .marca-logo img { height: 2.1rem; }
@media (max-width: 560px) { .cabecera--compacta .marca-logo img { height: 1.8rem; } }
@media (prefers-reduced-motion: reduce) {
  .cabecera .contenedor, .marca-logo img { transition: none; }
}

.nav { margin-left: auto; }
.nav > ul { display: flex; gap: var(--e6); align-items: center; }
.nav li { position: relative; }
.nav a {
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600;
  letter-spacing: .02em; text-decoration: none; padding-block: var(--e2);
  border-bottom: 2px solid transparent; display: block;
  transition: border-color var(--transicion), color var(--transicion);
}
.nav > ul > li > a:hover { border-bottom-color: var(--rojo); color: var(--rojo); }
/* La página en la que uno está se marca en carbón y no en rojo: el rojo es la
   respuesta al mouse, y si además pintara el ítem activo la barra tendría dos
   cosas rojas y ninguna querría decir lo mismo. */
.nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--carbon); }

/* Megamenú de Productos.
   Abre por hover y por :focus-within, así que funciona con teclado aunque el JS
   no cargue; el JS sólo suma Escape y flechas. Ocupa el ancho del contenedor y
   no toda la pantalla: es un panel de navegación, no una portada. */
/* `.nav .nav__mega-item` y no `.nav__mega-item` a secas: `.nav li` de más
   arriba ya declara `position: relative` y con un selector más específico
   (una clase y un tipo) le ganaba. El panel quedaba anclado al <li> de 90 px
   en vez de a la cabecera, y las tres columnas se pisaban entre sí. */
.nav .nav__mega-item { position: static; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: #fff; border-top: 2px solid var(--rojo);
  border-bottom: 1px solid var(--linea); box-shadow: 0 18px 32px -24px rgba(0,0,0,.45);
  visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s ease;
}
.nav__mega-item:hover > .mega,
.nav__mega-item:focus-within > .mega { visibility: visible; opacity: 1; }
.mega[hidden] { display: none; }        /* lo pone el JS al apretar Escape */

.mega__caja {
  max-width: var(--ancho); margin-inline: auto; padding: var(--e6) var(--canal);
  display: grid; gap: var(--e7); grid-template-columns: 1.6fr 1fr 1fr;
}
.mega__titulo {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
  padding-bottom: var(--e3); margin-bottom: var(--e4); border-bottom: 1px solid var(--linea);
}
.mega a { padding: 0; border: none; }
.mega__grupo { min-width: 0; }
.mega__grupo--categorias { border-inline: 1px solid var(--linea); padding-inline: var(--e6); }
@media (max-width: 1240px) { .mega__grupo--categorias { padding-inline: var(--e5); } }

.mega__grupo--colecciones > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.mega__coleccion { display: block; text-decoration: none; }
.mega__coleccion img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: grayscale(.25); transition: filter var(--transicion); }
.mega__coleccion span { display: block; margin-top: var(--e2); font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; }
.mega__coleccion:hover img, .mega__coleccion:focus-visible img { filter: none; }
.mega__coleccion:hover span { color: var(--rojo); }

.mega__lista { columns: 2; column-gap: var(--e5); }
.mega__lista li { break-inside: avoid; }
.mega__lista a { display: block; padding: .3rem 0; font-family: var(--f-texto); font-weight: 400; font-size: var(--t-chico); color: var(--texto-suave); }
.mega__lista a:hover { color: var(--rojo); }

/* Los tres logos crecen por escala y no por un alto fijo escrito acá: así se
   los sube o baja de una sola vez y ninguno pierde la proporción con los
   otros dos. 1.3 sobre 1.15rem son unos 24 px, que es lo que pide una lista
   de tres marcas dentro del megamenú. */
.mega__grupo--marcas { --escala-logo: 1.3; }
.mega__grupo--marcas li + li { margin-top: var(--e5); }
.mega__marca { display: block; text-decoration: none; }
.mega__marca img { display: block; }
.mega__marca span { display: block; margin-top: .45rem; font-size: var(--t-micro); color: var(--texto-suave); }
.mega__marca:hover span { color: var(--rojo); }

/* La tira inferior pinta de crema todo el ancho, pero alinea sus enlaces con
   el contenedor: de ahí el padding calculado en vez de un div extra. */
.mega__pie {
  border-top: 1px solid var(--linea); background: var(--crema);
  display: flex; flex-wrap: wrap; gap: var(--e5) var(--e6);
  padding-block: var(--e4);
  padding-inline: max(var(--canal), calc((100% - var(--ancho)) / 2 + var(--canal)));
}

/* La tira inferior tuvo dos cajas de descarga (una por PDF) y el cliente las
   rechazó el 14/8/2026: «horrible, poner uno solo que lleve a la página de
   catálogos». Queda un único enlace con ícono de documento que va a
   /catalogos/, donde ya viven todos los PDF con su peso y su portada. El «Ver
   todo el catálogo» se mudó a la columna de categorías, que es su contexto. */
.mega__descarga {
  display: inline-flex; align-items: center; gap: var(--e2); align-self: center;
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600;
  text-decoration: none; transition: color var(--transicion);
}
.mega__descarga svg {
  flex: none; width: 1.05rem; height: 1.05rem; color: var(--rojo);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mega__descarga:hover { color: var(--rojo); }

.mega__todo {
  display: inline-block; margin-top: var(--e4);
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600;
  text-decoration: none; border-bottom: 2px solid var(--acento); padding-bottom: 2px;
  transition: color var(--transicion);
}
.mega__todo:hover { color: var(--rojo); }

@media (max-width: 1240px) { .mega__caja { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e6); } }

.acciones-cabecera { display: flex; align-items: center; gap: var(--e3); }
@media (min-width: 1101px) { .acciones-cabecera { margin-left: var(--e5); } }
@media (max-width: 1100px) { .nav { display: none; } .acciones-cabecera { margin-left: auto; } }
/* El `>` importa: sin él la regla también apagaba el «Contacto comercial» que
   vive dentro del panel del menú móvil, que es justo donde tiene que estar
   cuando no entra en la barra. */
@media (max-width: 560px) { .acciones-cabecera > .boton--primario { display: none; } }

/* Menú móvil con <details>: funciona aunque el JS no cargue.
   Adentro repite la estructura del megamenú de escritorio en vertical, así el
   sitio se navega igual en las dos puntas. */
.menu-movil { position: static; }
.menu-movil__boton {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e2);
  padding: .55rem .8rem; height: 2.6rem;
  border: 1px solid var(--linea); font-family: var(--f-titulo);
  font-size: var(--t-chico); font-weight: 600;
}
.menu-movil__boton::-webkit-details-marker { display: none; }
.menu-movil[open] > .menu-movil__boton { background: var(--carbon); color: #fff; border-color: var(--carbon); }

/* Las tres barras se cruzan al abrir. Es la única animación de la cabecera y
   dura menos de un cuarto de segundo. */
.menu-movil__barras { display: block; width: .95rem; height: .7rem; position: relative; }
.menu-movil__barras i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.menu-movil__barras i:nth-child(1) { top: 0; }
.menu-movil__barras i:nth-child(2) { top: 50%; margin-top: -.75px; }
.menu-movil__barras i:nth-child(3) { bottom: 0; }
.menu-movil[open] .menu-movil__barras i:nth-child(1) { transform: translateY(.335rem) rotate(45deg); }
.menu-movil[open] .menu-movil__barras i:nth-child(2) { opacity: 0; }
.menu-movil[open] .menu-movil__barras i:nth-child(3) { transform: translateY(-.335rem) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-movil__barras i { transition: none; } }

.menu-movil__rotulo { display: inline; }
.menu-movil:not([open]) .menu-movil__rotulo[data-cerrar],
.menu-movil[open] .menu-movil__rotulo[data-abrir] { display: none; }

.menu-movil__panel {
  position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%);
  height: calc(100dvh - 100%); /* En el teléfono 100vh mide más que lo visible: el pie del panel queda debajo de la barra de URL. */
  z-index: 80; background: var(--crema); border-top: 2px solid var(--rojo);
  padding: var(--e5) var(--canal) var(--e7); overflow-y: auto;
  animation: capa-entra .22s cubic-bezier(.2, .6, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .menu-movil__panel { animation: none; } }

.menu-movil__titulo {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
  padding-bottom: var(--e2); margin-bottom: var(--e4); border-bottom: 1px solid var(--linea);
}
.menu-movil__titulo:not(:first-child) { margin-top: var(--e6); }
.menu-movil__panel ul { list-style: none; }

/* Colecciones con foto: las cuatro puertas de entrada, en dos por dos. */
.menu-movil__colecciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.menu-movil__colecciones a { display: block; text-decoration: none; position: relative; }
.menu-movil__colecciones img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.menu-movil__colecciones span {
  display: block; margin-top: var(--e2);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
}
.menu-movil__colecciones a:hover span { color: var(--acento); }

/* Categorías en dos columnas: diez enlaces en una sola columna son diez
   renglones de scroll para llegar a la marca. */
.menu-movil__categorias { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }
.menu-movil__categorias a {
  display: block; padding: var(--e2) 0; text-decoration: none;
  font-size: var(--t-chico); color: var(--texto-suave);
}
.menu-movil__categorias a:hover { color: var(--acento); }
.menu-movil__todo { margin-top: var(--e4); }

/* Marcas con su logo oficial. Nunca escritas como texto. El alto lo resuelve
   `img[data-logo]`: los tres archivos están recortados a la tinta, así que
   alcanza con la escala del contexto y no hay un alto por marca. */
.menu-movil__marcas li + li { border-top: 1px solid var(--linea); }
.menu-movil__marcas a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; text-decoration: none;
}
.menu-movil__marcas { --escala-logo: 1.05; }
.menu-movil__marcas span { font-size: var(--t-micro); color: var(--texto-suave); text-align: right; }

.menu-movil__lista a {
  display: block; padding: var(--e3) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none; font-family: var(--f-titulo); font-weight: 600;
}
.menu-movil__lista a:hover { color: var(--acento); }

.menu-movil__pie { margin-top: var(--e6); }
.menu-movil__pie p { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e4); }
.menu-movil__pie a:not(.boton) { font-size: var(--t-chico); color: var(--texto-suave); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); }
.menu-movil__pie a:not(.boton):hover { color: var(--acento); border-color: var(--acento); }

@media (min-width: 1101px) { .menu-movil { display: none; } }

/* --------------------------------------------------------------------------
   5. BUSCADOR EN VIVO (nombre o SKU)
   -------------------------------------------------------------------------- */

.buscador { position: relative; }

/* El campo es una superficie llena, no un recuadro de 1 px: en la barra blanca
   de la cabecera el rectángulo gris se leía como un control de formulario de
   2010. Al enfocarlo se aclara a blanco, toma borde carbón y —en escritorio—
   se ensancha, que es el único movimiento de toda la cabecera. */
.buscador__campo {
  position: relative; display: flex; align-items: center; gap: var(--e2);
  padding: .55rem .75rem; background: var(--crema);
  border: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion),
              width .3s cubic-bezier(.2, .6, .2, 1);
}
/* El input no lleva outline propio porque el recuadro visible es el del
   contenedor. Cambiar sólo el color de un borde de 1 px es un indicador de
   foco demasiado débil para el control más usado de la cabecera: se marca con
   el mismo outline que el resto de los campos del sitio. */
.buscador__campo:focus-within { background: #fff; border-color: var(--linea-fuerte); outline: 2px solid var(--acento); outline-offset: 1px; }
.buscador input { font: inherit; font-size: var(--t-chico); border: none; outline: none; width: 100%; background: none; color: var(--texto); }
/* Safari pinta su propia crucecita dentro de los input[type=search] y quedaba
   al lado de la nuestra. */
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.buscador__icono {
  flex: none; width: 1.05rem; height: 1.05rem; color: var(--gris-60);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  transition: color var(--transicion);
}
.buscador__campo:focus-within .buscador__icono { color: var(--acento); }
.buscador__limpiar {
  flex: none; border: none; background: none; cursor: pointer; padding: 0 0 0 var(--e1);
  color: var(--gris-60); font-size: .75rem; line-height: 1;
}
.buscador__limpiar:hover { color: var(--acento); }

.buscador--barra .buscador__campo { width: 14.5rem; }
.buscador--barra .buscador__campo:focus-within { width: 21rem; }
@media (max-width: 1240px) {
  .buscador--barra .buscador__campo { width: 12rem; }
  .buscador--barra .buscador__campo:focus-within { width: 17rem; }
}

/* --- Búsqueda a pantalla completa en móvil -------------------------------
   En la barra queda sólo el ícono. La capa es un <details>: abre sin JS y el
   formulario de adentro es un GET normal contra el catálogo. */
.buscador-movil { position: static; }
.buscador-movil__boton {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border: 1px solid var(--linea); color: var(--texto);
}
.buscador-movil__boton::-webkit-details-marker { display: none; }
.buscador-movil__boton svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}
.buscador-movil[open] > .buscador-movil__boton { background: var(--carbon); color: #fff; border-color: var(--carbon); }
/* La capa cuelga de la cabecera —que es sticky, o sea posicionada— y toma el
   alto de la ventana menos el de la propia cabecera. Así no hace falta que el
   JS mida nada ni que se pise con la barra superior al estar arriba de todo. */
.buscador-movil__capa {
  position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  z-index: 80; background: #fff; overflow-y: auto;
  padding: var(--e5) var(--canal) var(--e8);
  border-top: 2px solid var(--rojo);
  animation: capa-entra .22s cubic-bezier(.2, .6, .2, 1);
}
@keyframes capa-entra { from { opacity: 0; transform: translateY(-.75rem); } }
@media (prefers-reduced-motion: reduce) { .buscador-movil__capa { animation: none; } }
/* Dentro de la capa el campo es grande y el panel de resultados deja de ser
   un desplegable: es la propia pantalla. */
.buscador--capa .buscador__campo { padding: var(--e3); }
.buscador--capa input { font-size: 1.125rem; }
.buscador--capa .buscador__icono { width: 1.25rem; height: 1.25rem; }
.buscador--capa .buscador__panel {
  position: static; width: auto; max-height: none; border: none; border-top: 1px solid var(--linea);
  margin-top: var(--e4);
}
/* --- El campo grande de la página de resultados y del 404 ----------------
   No lleva panel de autocompletado a propósito: sería un desplegable tapando
   los resultados que ya están abajo, y el buscador de la cabecera —que sí lo
   tiene— está a la vista en la misma pantalla. Acá el formulario es un GET y
   nada más, así que funciona igual con el JavaScript apagado. */
.buscador--pagina { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: stretch; margin-top: var(--e5); }
.buscador--pagina .buscador__campo {
  flex: 1 1 18rem; padding: var(--e3) var(--e4);
  background: var(--fondo); border-color: var(--linea-fuerte);
}
.buscador--pagina input { font-size: var(--t-base); }
.buscador--pagina .buscador__icono { width: 1.2rem; height: 1.2rem; }
.buscador--pagina .boton { flex: none; }

.buscador--capa .buscador__resultado { padding-inline: 0; }
.buscador--capa .buscador__pie { padding-inline: 0; background: none; }
/* Los atajos desaparecen apenas hay resultados: son el estado vacío, no un
   bloque permanente. */
.buscador--capa .buscador__panel[data-abierto="true"] ~ .buscador__atajos { display: none; }
.buscador__atajos { margin-top: var(--e6); }
.buscador__atajos-titulo {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--linea);
}
.buscador__atajos ul { list-style: none; }
.buscador__atajos li a {
  display: block; padding: var(--e3) 0; border-bottom: 1px solid var(--linea);
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.0625rem; text-decoration: none;
}
.buscador__atajos li a:hover { color: var(--acento); }
.buscador__ayuda { margin-top: var(--e4); font-size: var(--t-chico); color: var(--texto-suave); }
.buscador__ayuda b { font-family: var(--f-titulo); letter-spacing: .06em; color: var(--texto); }
.buscador__salidas {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4);
  margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--linea);
}

@media (min-width: 761px) { .buscador-movil { display: none; } }
@media (max-width: 760px) { .buscador--barra { display: none; } }

.buscador__panel {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(30rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--linea); border-top: 2px solid var(--rojo);
  max-height: 60vh; overflow-y: auto; z-index: 70; display: none;
}
.buscador__panel[data-abierto="true"] { display: block; }
.buscador__estado { padding: var(--e4); font-size: var(--t-chico); color: var(--texto-suave); }
.buscador__resultado { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); text-decoration: none; }
.buscador__resultado:last-child { border-bottom: none; }
.buscador__resultado:hover, .buscador__resultado[data-marcado="true"] { background: var(--crema); }
.buscador__resultado .figura { aspect-ratio: 1; }
.buscador__nombre { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-chico); }
.buscador__ruta { font-size: var(--t-micro); color: var(--texto-suave); }
.buscador__sku { font-size: var(--t-micro); color: var(--texto-suave); letter-spacing: .06em; white-space: nowrap; }
.buscador mark { background: rgba(228,26,26,.16); color: inherit; padding: 0 1px; }
.buscador__pie { padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); background: var(--crema); font-size: var(--t-micro); }

/* --------------------------------------------------------------------------
   6. BOTONES Y ENLACES
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; letter-spacing: .03em;
  padding: .85rem 1.7rem; border: 1px solid transparent; border-radius: var(--radio);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton--primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.boton--primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--linea-fuerte); }
.boton--secundario:hover { background: var(--carbon); color: #fff; }
.boton--fantasma { background: transparent; color: var(--texto); border-color: var(--linea); padding-inline: var(--e4); }
.boton--fantasma:hover { border-color: var(--linea-fuerte); }
.boton--claro { background: #fff; color: var(--carbon); border-color: #fff; }
.boton--claro:hover { background: var(--crema); border-color: var(--crema); }
.boton--bloque { width: 100%; }
.seccion--oscura .boton--secundario, .cierre .boton--secundario { color: var(--crema); border-color: var(--gris-60); }
.seccion--oscura .boton--secundario:hover, .cierre .boton--secundario:hover { background: var(--crema); color: var(--carbon); }

.enlace-flecha {
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--e2);
  border-bottom: 2px solid var(--acento); padding-bottom: 2px; width: fit-content;
}
.enlace-flecha:hover { color: var(--acento); }

/* --------------------------------------------------------------------------
   7. FIGURAS Y SELLO DE CÓDIGO
   El sello es el dispositivo de marca del sistema: toda foto de producto
   lleva su código impreso, igual que en el catálogo de papel.
   -------------------------------------------------------------------------- */

.figura { position: relative; margin: 0; background: var(--crema); overflow: hidden; }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura--1a1  { aspect-ratio: 1; }
.figura--4a3  { aspect-ratio: 4 / 3; }
.figura--3a4  { aspect-ratio: 3 / 4; }
.figura--16a9 { aspect-ratio: 16 / 9; }
.figura--contener img { object-fit: contain; }
/* Campo oscuro detrás de una imagen contenida: el sobrante deja de ser crema y
   el borde de la pieza se lee. Va como modificador y no como estilo en línea
   porque estas figuras —la portada de una nota, la destacada del listado— las
   imprime una plantilla desde la base, y ahí no hay dónde escribir a mano. */
.figura--carbon { background: var(--carbon); }

/* El sello del código.
   Una sola línea, siempre. Los SKU reales del catálogo llegan a 42 caracteres
   —`GEMPLAST-MACETA-HOLANDA-30-TERRACOTA`— y en una tarjeta de 155 px el sello
   se partía en dos o tres renglones y tapaba media foto. El código entero
   sigue estando: va en el `title` de la tarjeta y completo en la ficha. */
.figura__codigo {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  background: var(--carbon); color: var(--crema);
  font-family: var(--f-titulo); font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: .35rem .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.figura__codigo--rojo { background: var(--rojo); color: #fff; }
.figura__pie { font-size: var(--t-micro); color: var(--texto-suave); padding-top: var(--e2); letter-spacing: .02em; }

/* Hueco de foto todavía sin material real. Se borra cuando llegue el archivo. */
.slot {
  position: relative; background: var(--crema); border: 1px solid var(--beige);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e2); text-align: center; padding: var(--e5); color: var(--gris-60);
  min-height: 200px; overflow: hidden;
}
.slot::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--beige) 1px, transparent 1px), linear-gradient(90deg, var(--beige) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .5; pointer-events: none;
}
.slot > * { position: relative; z-index: 1; }
.slot__tag { font-family: var(--f-titulo); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); border: 1px solid var(--acento-tinta); padding: 2px var(--e2); }
.slot__desc { font-size: var(--t-chico); max-width: 34ch; margin: 0; }
.slot--1a1 { aspect-ratio: 1; min-height: 0; }
.slot--16a9 { aspect-ratio: 16 / 9; min-height: 0; }
.slot--4a3 { aspect-ratio: 4 / 3; min-height: 0; }
.slot--3a4 { aspect-ratio: 3 / 4; min-height: 0; }
.slot--lleno { height: 100%; min-height: 320px; }

/* --------------------------------------------------------------------------
   7b. PORTADA — el hero de la Home

   No es una tapa a pantalla completa ni lleva el título encima de la imagen.
   Es una división: texto a la izquierda, video de la planta a la derecha, con
   el alto acotado para que la barra de marcas de abajo entre en el primer
   viewport. El título es grande pero no monumental: es una frase que se lee,
   no un cartel. En móvil el orden se invierte —video arriba, texto abajo— y
   nada se superpone nunca, que es donde el hero actual se rompe.
   -------------------------------------------------------------------------- */

.portada { display: grid; border-bottom: 1px solid var(--linea); }

.portada__texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e8) var(--canal) var(--e7);
  max-width: calc(var(--ancho) / 2); margin-left: auto; width: 100%;
}
.portada h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06;
  letter-spacing: -.035em; max-width: 15ch; margin-bottom: var(--e4);
}
.portada__bajada { font-size: 1.0625rem; color: var(--texto-suave); max-width: 46ch; margin-bottom: var(--e6); }

.portada__media { position: relative; background: var(--carbon); min-height: 58vw; }
.portada__media img,
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El video entra encuadrado: el archivo ya viene recortado a 4:3 sobre la zona
   útil del original, así que en el recuadro casi cuadrado del escritorio el
   centro es exactamente donde queda el cartel de la fábrica. No hace falta
   correr el object-position. El fondo es carbón y no crema porque mientras el
   poster no llegó, un rectángulo oscuro se lee como un video que va a arrancar
   y uno claro se lee como una imagen que falló. */
.portada__video { display: block; background: var(--carbon); }

@media (min-width: 900px) {
  .portada { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .portada__texto { padding-block: var(--e9); min-height: 72vh; max-height: 760px; }
  .portada__media { min-height: 0; }
}
/* En móvil la foto va primero: se entiende antes de qué se está hablando. */
@media (max-width: 899px) {
  .portada__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .portada__texto { padding-block: var(--e7); max-width: none; }
}

/* Barra de marcas — entra en el primer viewport y contesta de una qué es
   Gemplast, sin obligar a hacer scroll para descubrirlo. */
.barra-marcas { background: var(--crema); border-bottom: 1px solid var(--linea); }
.barra-marcas .contenedor {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e4) var(--e6); padding-block: var(--e4);
}
.barra-marcas__rotulo {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave);
  padding-right: var(--e6); border-right: 1px solid var(--linea);
}
/* Sin opacidad de reposo: son las tres marcas de la casa en el primer
   viewport, no un muro de logos de clientes. Se muestran a tinta plena.
   El alto sale de `img[data-logo]`; acá sólo se sube la escala, porque es el
   uso más grande de los tres logos fuera de las landings. */
.barra-marcas { --escala-logo: 1.4; }
.barra-marcas img { display: block; width: auto; }
.barra-marcas a { transition: transform var(--transicion); }
.barra-marcas a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .barra-marcas a:hover { transform: none; } }
@media (max-width: 620px) {
  .barra-marcas__rotulo { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .barra-marcas .contenedor { gap: var(--e3) var(--e6); }
}

/* --------------------------------------------------------------------------
   7c. COMPOSICIONES REUTILIZABLES

   Tres piezas de layout que usan varias páginas. Existen para que cada
   sección pueda tener un ritmo distinto sin inventar un componente nuevo
   cada vez, que es exactamente cómo una web termina pareciendo una plantilla.
   -------------------------------------------------------------------------- */

/* MOSAICO — tres fotos con pesos distintos. Una grilla de tres iguales
   convierte cualquier reportaje en un catálogo de stock. */
.mosaico { display: grid; gap: var(--e3); }
.mosaico__grande { aspect-ratio: 16 / 9; }
.mosaico__chica  { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .mosaico { grid-template-columns: 1.62fr 1fr; grid-template-rows: repeat(2, 1fr); }
  .mosaico__grande { grid-row: span 2; aspect-ratio: auto; min-height: 26rem; }
  .mosaico__chica  { aspect-ratio: auto; }
}

/* DUO — media y contenido al 50 %, dentro del contenedor. Es el hermano
   acotado de .bloque-marca, que va a sangre y con fondo propio. */
.duo { display: grid; gap: var(--e6); }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e8); align-items: center; }
  /* Cuando las dos mitades son texto de distinto largo, centrarlas verticalmente
     descalza los dos primeros renglones y se lee como un error de maquetación. */
  .duo--arriba { align-items: start; }
}

/* MANIFIESTO — título a un lado, texto al otro. Para los bloques que son
   discurso institucional y no una grilla de datos. */
.manifiesto { display: grid; gap: var(--e5); }
@media (min-width: 900px) {
  .manifiesto { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--e9); align-items: start; }
  .manifiesto > :first-child { position: sticky; top: 7rem; }
}
.manifiesto h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.035em; }
.manifiesto__texto { max-width: 60ch; }
.manifiesto__texto p { color: var(--texto-suave); }
.manifiesto__texto .destacado { color: var(--texto); }

/* PROCESO — pasos enumerados en vertical, sin caja ni ícono. El número es
   rojo y el texto corto: se lee de arriba abajo como una secuencia. */
.proceso { border-top: 2px solid var(--linea-fuerte); }
.proceso > li { padding-block: var(--e5); border-bottom: 1px solid var(--linea); }
.proceso__n {
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-chico);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento-tinta);
  margin-bottom: var(--e2);
}
.proceso > li > p:last-child { color: var(--texto-suave); max-width: 52ch; }

/* ETAPAS — el circuito con la fotografía de cada paso.

   En la Home ese mismo proceso es .proceso: tres renglones al lado de una sola
   foto. Si /sostenibilidad repitiera el componente sería la misma sección con
   más scroll. Acá cada etapa trae su fotografía y el texto que en un renglón no
   entra, con el número apoyado en un filete debajo de la foto. */
.etapas { display: grid; gap: var(--e7); }
@media (min-width: 860px) { .etapas { grid-template-columns: repeat(3, 1fr); gap: var(--e6); } }
.etapas > li { display: flex; flex-direction: column; gap: var(--e3); }
.etapas__n {
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-chico);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acento-tinta);
  padding-top: var(--e4); border-top: 2px solid var(--linea-fuerte);
}
.etapas h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.etapas > li > p:last-child { font-size: var(--t-chico); color: var(--texto-suave); }

/* PUNTOS — lista corta con guión rojo. Sin viñetas redondas ni tildes. */
.puntos { display: grid; gap: var(--e3); }
.puntos li { position: relative; padding-left: var(--e5); font-size: var(--t-chico); color: var(--texto-suave); }
.puntos li::before { content: ""; position: absolute; left: 0; top: .68em; width: .85rem; height: 2px; background: var(--acento); }

/* --------------------------------------------------------------------------
   8. ACCIONES — la fila de botones

   Antes acá vivía .tapa, el hero a sangre con el título encima de la foto y
   los cuatro contadores debajo. Se fue con la reestructura de la Home: ahora
   el hero es .portada y la única regla que sobrevivía en las tres tapas era
   ésta, repetida tres veces con el mismo contenido.
   -------------------------------------------------------------------------- */

.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* --------------------------------------------------------------------------
   9. CIFRA GIGANTE — dos por página como máximo
   -------------------------------------------------------------------------- */

.cifra-gigante { display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 900px) { .cifra-gigante { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--e8); } }
.cifra-gigante__n {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(5rem, 15vw, 12rem); line-height: .82; letter-spacing: -.06em;
  margin: 0; color: var(--texto);
}
/* El signo de porcentaje no es un dígito: al mismo cuerpo que la cifra rompe el
   renglón y se lee como una segunda línea. Va más chico y pegado al número. */
.cifra-gigante__pc { font-size: .42em; letter-spacing: -.02em; margin-left: .04em; }
.cifra-gigante__n small { display: block; font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-tinta); margin-top: var(--e4); line-height: 1.4; }

/* --------------------------------------------------------------------------
   10. ÍNDICE DE CATÁLOGO — el sumario del catálogo impreso, en pantalla
   -------------------------------------------------------------------------- */

.indice { border-top: 2px solid var(--linea-fuerte); }
.indice__fila {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--e4); align-items: baseline;
  border-bottom: 1px solid var(--linea); text-decoration: none; padding-block: var(--e4);
  transition: padding-left var(--transicion), background-color var(--transicion);
}
@media (min-width: 700px) { .indice__fila:hover { padding-left: var(--e4); background: var(--fondo-alt); } }
.indice__n { font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; color: var(--texto-suave); }
.indice__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 2rem); letter-spacing: -.03em; line-height: 1.1; }
.indice__fila:hover .indice__nombre { color: var(--acento); }
.indice__meta { font-size: var(--t-chico); color: var(--texto-suave); white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. BLOQUES DE MARCA — a ancho completo, alternados
   -------------------------------------------------------------------------- */

.bloque-marca { display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .bloque-marca { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.bloque-marca__media { position: relative; min-height: 340px; overflow: hidden; }
.bloque-marca__media .figura, .bloque-marca__media .slot { height: 100%; }
/* Foto suelta dentro del bloque: llena la mitad y se recorta al centro. */
.bloque-marca__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloque-marca__texto { padding: var(--e8) var(--e7); display: flex; flex-direction: column; gap: var(--e4); justify-content: center; background: var(--fondo-alt); }
@media (max-width: 899px) { .bloque-marca__texto { padding: var(--e7) var(--e5); } }
@media (min-width: 900px) { .bloque-marca--invertido .bloque-marca__media { order: 2; } }
.bloque-marca__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.04em; }
.bloque-marca__texto p { color: var(--texto-suave); }
.bloque-marca__datos { display: flex; flex-wrap: wrap; gap: var(--e5); font-size: var(--t-chico); border-top: 1px solid var(--linea); padding-top: var(--e4); }
.bloque-marca__datos b { display: block; font-family: var(--f-titulo); font-size: 1.35rem; letter-spacing: -.02em; }
.bloque-marca__datos span { color: var(--texto-suave); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; }

.badge {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-titulo); font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 3px var(--e2);
  border: 1px solid currentColor; color: var(--acento-tinta); white-space: nowrap; width: fit-content;
}
.badge--solido { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }

/* La marca de una ficha es el logotipo, nunca el nombre escrito. Al lado va la
   categoría, que sí es texto porque es taxonomía y no identidad: en el theme
   sale del término de WooCommerce y enlaza a su archivo. */
.ficha__marca {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.ficha__marca a {
  color: var(--texto-suave); text-decoration: none;
  padding-left: var(--e3); border-left: 1px solid var(--linea);
}
.ficha__marca a:hover { color: var(--acento); }

/* Tarjeta de marca — la versión enlazable, para la Home.
   Las tres no pueden verse igual: Gemplast toma la franja ancha porque es la
   marca madre, y Bosco y G Packaging van abajo en par. Cada una redefine sus
   variables de rol con [data-marca], así el mismo marcado se pinta con su
   propia paleta sin duplicar una sola regla.

   No es un <a>: Bosco y G Packaging tienen sitio propio, así que la tarjeta
   lleva dos destinos. El principal se estira por CSS sobre toda la caja y el
   externo se monta encima con z-index. Un <a> dentro de otro <a> no es HTML
   válido y ningún lector de pantalla lo resuelve bien. */
.marca-tarjeta {
  position: relative; display: grid;
  border: 1px solid var(--linea); background: var(--fondo);
  transition: border-color var(--transicion);
}
.marca-tarjeta:hover, .marca-tarjeta:focus-within { border-color: var(--acento); }
/* La misma línea que crece del índice de colecciones, para que las dos
   secciones de la Home hablen el mismo idioma al pasar por encima. */
.marca-tarjeta::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--acento); pointer-events: none;
  transition: width .5s cubic-bezier(.2, .6, .2, 1);
}
.marca-tarjeta:hover::after, .marca-tarjeta:focus-within::after { width: 100%; }
.marca-tarjeta__media { position: relative; background: var(--crema); aspect-ratio: 4 / 3; overflow: hidden; }
.marca-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.marca-tarjeta:hover .marca-tarjeta__media img { transform: scale(1.03); }
.marca-tarjeta__texto {
  padding: var(--e6); display: flex; flex-direction: column;
  gap: var(--e3); justify-content: center; background: var(--fondo-alt);
}
/* El logo se muestra en su archivo oficial. El alto lo pone `img[data-logo]`
   y acá sólo se sube la escala: es la tarjeta que presenta la marca, así que
   el logotipo tiene que leerse de lejos. El ancho se deduce y nunca se
   estira. Ningún alto por marca: los tres archivos ya son comparables. */
.marca-tarjeta { --escala-logo: 1.55; }
img.marca-tarjeta__logo { width: auto; align-self: start; display: block; margin-bottom: var(--e2); }
.marca-tarjeta h3 { font-size: 1.35rem; letter-spacing: -.025em; }
.marca-tarjeta p { color: var(--texto-suave); font-size: var(--t-chico); }
.marca-tarjeta:hover h3 { color: var(--acento); }

/* Cuántos productos tiene cada marca. Las cifras las pinta el JS desde el
   maestro: si mañana entran diez macetas nuevas, la Home ya lo dice. Se
   componen como en la tarjeta de producto —número en titular, rótulo chico al
   lado— para que la Home y el catálogo se lean igual. */
.marca-tarjeta__datos {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e1); padding-top: var(--e3); border-top: 1px solid var(--linea);
}
.marca-tarjeta__datos li { display: flex; align-items: baseline; gap: .45em; }
.marca-tarjeta__datos b {
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--texto);
}
.marca-tarjeta__datos span {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}

.marca-tarjeta__acciones {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e5);
  margin-top: var(--e2);
}
/* El enlace principal se estira sobre toda la tarjeta. El ancestro posicionado
   más cercano es .marca-tarjeta, así que este ::after la cubre entera.

   El foco de teclado se queda en el enlace, con el anillo global: es donde
   está el cursor y es lo que un lector de pantalla anuncia. La tarjeta
   acompaña con :focus-within —borde y línea inferior— pero no reemplaza al
   anillo. */
.marca-tarjeta__ir::after { content: ""; position: absolute; inset: 0; }
/* El sitio propio de la marca viaja por encima de esa capa, con su propio
   destino y su propio nombre accesible. */
.marca-tarjeta__sitio {
  position: relative; z-index: 1; text-decoration: none;
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 3px;
  transition: color var(--transicion), border-color var(--transicion);
}
.marca-tarjeta__sitio:hover { color: var(--acento); border-color: var(--acento); }

@media (min-width: 860px) {
  .marca-tarjeta--ancha { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .marca-tarjeta--ancha .marca-tarjeta__media { aspect-ratio: auto; min-height: 22rem; }
  .marca-tarjeta--ancha .marca-tarjeta__texto { padding: var(--e8) var(--e7); }
  .marca-tarjeta--ancha .marca-tarjeta__logo { height: 2.35rem; }
  .marca-tarjeta--ancha h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
  .marca-tarjeta--ancha p { font-size: 1rem; }
  .marca-tarjeta--ancha .marca-tarjeta__datos b { font-size: 1.875rem; }
}
.marca-par { display: grid; gap: var(--e5); margin-top: var(--e5); }
@media (min-width: 760px) { .marca-par { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   11b. COLECCIONES Y NÚMEROS
   -------------------------------------------------------------------------- */

/* Las cuatro macrocolecciones, como índice editorial y no como cuatro
   tarjetas iguales en fila.

   Cuatro tarjetas del mismo tamaño, con la misma foto arriba y el mismo
   párrafo abajo, es la forma que hace que una web parezca una plantilla: no
   hay jerarquía, no hay ritmo y el ojo no tiene dónde entrar. Acá cada
   colección es una banda a lo ancho —número, nombre en cuerpo de titular, las
   categorías que contiene, cuántos productos hay adentro y una foto ancha—,
   apiladas como el índice de un catálogo impreso. Se lee de arriba abajo, que
   es como se lee un índice, y cada banda tiene aire propio.

   La banda entera es el enlace; la línea de 1 px que las separa es la única
   decoración. Al pasar, la foto crece apenas y aparece el filete rojo. */
.colecciones { border-top: 1px solid var(--linea); }

.coleccion {
  display: grid; gap: var(--e4); text-decoration: none;
  padding-block: var(--e5); border-bottom: 1px solid var(--linea);
  position: relative;
}
/* El filete rojo se dibuja sobre la línea inferior, del ancho que va tomando
   el cursor. Es el mismo gesto del menú y de las tejas: marcado, no relleno. */
.coleccion::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--acento); transition: width .45s cubic-bezier(.2, .6, .2, 1);
}
.coleccion:hover::after, .coleccion:focus-visible::after { width: 100%; }

.coleccion__foto { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--crema); }
.coleccion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.coleccion:hover .coleccion__foto img { transform: scale(1.04); }

.coleccion__cuerpo { display: flex; flex-direction: column; gap: var(--e2); }
.coleccion__n {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; color: var(--acento-tinta); font-variant-numeric: tabular-nums;
}
.coleccion h3 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: -.03em; line-height: 1.05; }
.coleccion:hover h3 { color: var(--acento); }
.coleccion p { font-size: var(--t-chico); color: var(--texto-suave); }

/* La cifra de productos vive al pie de la banda, alineada con el resto de
   las cifras del sitio: número en titular, rótulo en cuerpo chico. */
.coleccion__cuenta { margin-top: auto; display: flex; align-items: baseline; gap: var(--e2); }
.coleccion__cuenta b {
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.coleccion__cuenta span {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}

@media (min-width: 860px) {
  .coleccion {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 42%);
    gap: var(--e6); align-items: center; padding-block: var(--e6);
  }
  /* En escritorio el número sale de la columna de texto y arma su propia
     canaleta a la izquierda, como la foliación de un catálogo. */
  .coleccion__n { align-self: start; padding-top: .4em; }
  /* 3:2 y no 21:9 (14/8/2026): las fotos definitivas de colección son
     cuadradas, y el marco ultrapanorámico dejaba una tirita del medio con
     los sujetos decapitados. Con 3:2 se ve dos tercios de la foto. */
  .coleccion__foto { aspect-ratio: 3 / 2; }
}

/* Números — cifras fijas, escritas en el HTML. Nada de contadores que
   arranquen en cero: durante el primer segundo mostrarían «0», que es
   justamente lo que hace hoy la web que estamos reemplazando. */
.numeros { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
@media (min-width: 560px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numeros > li { background: var(--fondo); padding: var(--e6) var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.numeros b {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: .95; letter-spacing: -.05em;
  color: var(--texto); white-space: nowrap;
}
.numeros span { font-size: var(--t-chico); color: var(--texto-suave); max-width: 26ch; }

/* --------------------------------------------------------------------------
   12. REJILLAS Y PRODUCTOS
   -------------------------------------------------------------------------- */

.rejilla { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .rejilla--5 { grid-template-columns: repeat(5, 1fr); } }
.rejilla > * { background: var(--fondo); padding: var(--e5); }
.rejilla--sin-aire > * { padding: 0; }

/* Dos columnas desde el teléfono. Una sola columna de tarjetas grandes en un
   catálogo de 110 productos es un scroll interminable: en móvil la grilla de
   catálogo se lee de a pares, como una góndola. */
.rejilla-productos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e4); }
@media (min-width: 760px)  { .rejilla-productos { grid-template-columns: repeat(3, 1fr); gap: var(--e6) var(--e5); } }
@media (min-width: 1040px) { .rejilla-productos { grid-template-columns: repeat(4, 1fr); } }
.rejilla-productos--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .rejilla-productos--3 { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta de producto.
   Se lee como una entrada de catálogo técnico y no como un renglón de texto
   gris: nombre, logo de la marca, ruta y hasta tres cifras compuestas con el
   número en titular sobre su rótulo. Todo el bloque de texto va
   dentro de .producto__cuerpo para poder empujar el pie al fondo y que las
   tarjetas de una fila terminen alineadas aunque tengan distinta cantidad de
   renglones. */
.producto { text-decoration: none; display: flex; flex-direction: column; }
.producto[hidden] { display: none; }
.producto__cuerpo { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e3); flex: 1; }

.producto__figura { background: var(--gris-15); }
.producto__foto { transition: opacity .35s ease, transform .6s ease; }
/* Segunda toma. Se monta encima y se revela al pasar: en un catálogo donde
   casi todo son packshots sobre blanco, ver el producto desde otro ángulo es
   la información que falta. Sin segunda foto el elemento no existe. */
.producto__foto--relevo { position: absolute; inset: 0; opacity: 0; }
.producto:hover .producto__foto--relevo, .producto:focus-visible .producto__foto--relevo { opacity: 1; }
.producto:hover .producto__foto:not(.producto__foto--relevo) { transform: scale(1.03); }
/* En pantalla táctil no hay «pasar por encima»: el relevo nunca se vería y
   descargarlo es tráfico tirado. */
@media (hover: none) { .producto__foto--relevo { display: none; } }

/* Hueco sin fotografía: campo crema con la textura de grilla y nada escrito.
   Acá iba la inicial del producto en cuerpo grande, y en una grilla de macetas
   eso son once cuadros vacíos con una «M» gigante. El cliente lo marcó y se
   sacó; la regla del `font-size` queda porque el elemento sigue sin hijos y no
   cuesta nada, pero no imprime ninguna letra. */
.producto__sinfoto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-titulo); font-weight: 700; font-size: 3.5rem;
  color: var(--beige); background: var(--crema); user-select: none;
}
.producto__sinfoto::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--beige) 1px, transparent 1px), linear-gradient(90deg, var(--beige) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .4;
}

.producto__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
/* `min-width: 0` no es adorno: sin él un elemento flexible no baja de su ancho
   mínimo de contenido, así que en la columna de 155 px del teléfono el logo se
   quedaba con su lugar y el nombre se estrujaba a una palabra por renglón. Y
   el cuerpo es fluido por la misma razón: 17 px fijos en 155 px partían
   «Contenedor» al medio. */
.producto__nombre {
  font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  font-size: clamp(.9375rem, 3.4vw, 1.0625rem); min-width: 0;
}
.producto:hover .producto__nombre { color: var(--acento); }
/* Acá el logo es una firma, no un título: va chico y a media tinta para que
   no le gane al nombre del producto. La escala lo baja de 1.15rem a 0.72rem
   para las tres marcas por igual. */
.producto__marca { --escala-logo: .62; opacity: .9; flex: none; }

/* En el ancho de teléfono la firma baja a su propio renglón en vez de pelear
   por el ancho con el nombre. */
@media (max-width: 759px) {
  .producto__cab { flex-wrap: wrap; gap: var(--e1) var(--e3); }
  .producto__nombre { flex: 1 1 100%; }
}

.producto__ruta { font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }

/* Las cifras de la tarjeta. Se componen como una ficha técnica —número en
   titular, rótulo en cuerpo chico debajo— y no como una fila de etiquetas
   recuadradas. La cifra es lo que se compara de un vistazo entre tarjetas;
   el rótulo sólo la explica.

   El nombre de cada color no está acá a propósito: sin carta de color oficial
   (P21) no se puede pintar la muestra, y listar doce nombres en recuadros
   llenaba la grilla de etiquetas. El nombre exacto vive en la ficha, al lado
   de la foto, que es donde sirve. */
.producto__meta {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e1);
}
.producto__meta span {
  display: flex; flex-direction: column;
  font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--f-titulo); font-weight: 500; color: var(--texto-suave);
}
.producto__meta b {
  font-weight: 700; font-size: 1.125rem; line-height: 1.1; color: var(--texto);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

.producto__cta {
  margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--linea);
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  transition: color var(--transicion), border-color var(--transicion);
}
.producto__cta::after { content: "→"; transition: transform var(--transicion); }
.producto:hover .producto__cta { color: var(--acento); border-top-color: var(--acento); }
.producto:hover .producto__cta::after { transform: translateX(4px); }

/* Tira de detalles — macros del producto. Da textura sin decorar. */
.tira-detalle { display: grid; gap: 1px; background: var(--linea); }
@media (min-width: 700px) { .tira-detalle { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px) { .tira-detalle { grid-template-columns: repeat(2, 1fr); } }
.tira-detalle .figura { aspect-ratio: 1; }

/* Banda de redes.
   No es un feed de Instagram: no hay API, ni plugin, ni token, ni nada que
   simule publicaciones que después queden viejas. Son fotos propias de la
   planta, presentadas como fotos propias, al lado del enlace a las cuentas
   reales. Se arma en dos columnas a propósito, sin `.cabecera-seccion`
   numerada: es el bloque que corta el ritmo editorial de la home. */
.social { display: grid; gap: var(--e6); align-items: center; }
@media (min-width: 900px) { .social { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e8); } }
.social__handle {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.035em; line-height: 1;
  margin: 0 0 var(--e3);
}
.social__texto { color: var(--texto-suave); max-width: 40ch; margin: 0 0 var(--e5); }
.tira-detalle.social__tira { grid-template-columns: repeat(2, 1fr); }
/* Cada foto enlaza a la cuenta real hasta que se conecte el feed. */
.social__enlace { display: block; }
.social__enlace:hover img, .social__enlace:focus-visible img { opacity: .85; }
.social__enlace img { transition: opacity var(--transicion); }

/* --------------------------------------------------------------------------
   13. CATEGORÍAS
   -------------------------------------------------------------------------- */

.categoria { background: var(--fondo); text-decoration: none; display: flex; flex-direction: column; }
.categoria .figura { aspect-ratio: 4 / 3; }
.categoria__cuerpo { padding: var(--e4) var(--e5) var(--e5); display: flex; flex-direction: column; gap: var(--e1); }
.categoria__n { font-size: var(--t-micro); font-family: var(--f-titulo); font-weight: 600; letter-spacing: .12em; color: var(--texto-suave); }
.categoria__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: -.015em; }
.categoria:hover .categoria__nombre { color: var(--acento); }
.categoria__cuenta { font-size: var(--t-chico); color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   13 bis. MOSAICO DE CATEGORÍAS

   Reemplaza a las celdas de sólo texto. Una lista numerada sin foto es un
   índice, no una entrada al catálogo: obliga a leer diez renglones para
   decidir. Con foto se decide de un vistazo.

   La forma no es «diez tarjetas iguales con sombra». Es un mosaico a hueco
   de 3 px, con dos piezas anchas que rompen la cuadrícula —las categorías
   más grandes— y el rótulo en una banda de carbón al pie. El filete rojo
   aparece al pasar: marcado, no relleno.

   Con 4 columnas y dos piezas de doble ancho, diez categorías cierran
   exactamente en tres filas sin huecos. En móvil son dos columnas y las
   anchas quedan a todo el ancho, que es lo que le da ritmo al scroll.
   -------------------------------------------------------------------------- */

/* El nombre es `.tejas`, no `.mosaico`: ese ya existe en 7c y es otra cosa
   —tres fotos con pesos distintos, con `grid-template-rows` explícito—. Dos
   componentes con la misma clase se pisan y el que gana es el último del
   archivo, para algunas propiedades y no para otras. */
.tejas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  grid-auto-rows: clamp(9.5rem, 34vw, 13rem);
}
@media (min-width: 760px) {
  .tejas { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(11rem, 17vw, 15.5rem); }
}

.teja {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  text-decoration: none; background: var(--carbon); color: var(--crema);
}
/* La destacada ocupa dos columnas Y dos filas, no una banda apaisada.
   Motivo medido el 3/8/2026: las seis fotos de categoría son verticales o
   cuadradas —de 0,56 a 1,07 de relación— y una celda de 2×1 pide 2,65. Con
   `cover` eso dejaba ver un 33 % de la foto de macetas: la planta arriba y la
   maceta abajo quedaban las dos fuera. En 2×2 la celda pide 1,32 y el recorte
   pasa a ser tolerable.

   Las cuentas cierran: 10 categorías = 8 celdas de 1×1 + 2 de 2×2 = 16 = 4
   filas de 4 en escritorio y 8 de 2 en teléfono, sin huecos. Si se agrega o
   se saca una categoría hay que rehacer esta cuenta o van a aparecer huecos:
   la grilla se llena en orden y acá el orden importa, porque las tejas están
   numeradas. */
.teja--ancha { grid-column: span 2; grid-row: span 2; }

.teja__foto { position: absolute; inset: 0; }
/* `--foco` mueve la banda que sobrevive al recorte. Se declara por teja en la
   plantilla, mirando cada foto: el producto casi nunca está en el centro
   geométrico, y la banda del pie tapa el borde de abajo. */
.teja__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--foco, center);
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
/* Packshot sobre fondo blanco: recortarlo a sangre le come el producto. Se
   contiene, se le da el campo crema del sistema y se lo sube para que la
   banda del pie no lo pise. */
.teja--pieza .teja__foto { background: var(--crema); }
.teja--pieza .teja__foto img { object-fit: contain; padding: 7% 7% 25%; }
.teja:hover .teja__foto img, .teja:focus-visible .teja__foto img { transform: scale(1.05); }

/* El rótulo va en una banda de carbón y no en un degradado sobre la foto: el
   degradado es el recurso de landing que este proyecto no usa, y sobre un
   packshot en fondo claro nunca llegaría al contraste. */
.teja__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--carbon); padding: var(--e3) var(--e4);
  border-top: 2px solid transparent;
  transition: border-color var(--transicion);
}
.teja:hover .teja__pie, .teja:focus-visible .teja__pie { border-top-color: var(--rojo); }
.teja[aria-current="page"] .teja__pie { border-top-color: var(--rojo); }

.teja__fila { display: flex; align-items: baseline; gap: var(--e2); }
.teja__n {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; color: var(--gris-40); flex: none;
  font-variant-numeric: tabular-nums;
}
.teja__nombre {
  font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(.9375rem, 1.5vw, 1.125rem); line-height: 1.15;
}
.teja__cuenta {
  margin-left: auto; flex: none; font-size: var(--t-micro); color: var(--gris-40);
  font-variant-numeric: tabular-nums;
}

/* Segundo renglón: aparece al pasar. No lleva información imprescindible
   —toda la teja es el enlace—, así que en pantalla táctil no se monta. */
.teja__mas {
  display: block; max-height: 0; overflow: hidden;
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crema);
  transition: max-height .3s ease, margin-top .3s ease;
}
.teja:hover .teja__mas, .teja:focus-visible .teja__mas { max-height: 2rem; margin-top: var(--e2); }
@media (hover: none) { .teja__mas { display: none; } }

/* Celda de categoría — versión compacta, sin foto, para la banda del catálogo.
   Diez celdas en una grilla de 1 px de línea: se lee de un vistazo y no
   compite con las tarjetas de producto que vienen abajo. */
.celda-categoria { text-decoration: none; display: flex; flex-direction: column; gap: var(--e1); transition: background-color var(--transicion); }
.celda-categoria:hover { background: var(--crema); }
.celda-categoria__n { font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; color: var(--texto-suave); }
.celda-categoria b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; }
.celda-categoria:hover b { color: var(--acento); }
.celda-categoria > span:last-child { font-size: var(--t-chico); color: var(--texto-suave); }
.celda-categoria[aria-current="page"] { background: var(--carbon); }
.celda-categoria[aria-current="page"] b { color: #fff; }
.celda-categoria[aria-current="page"] span { color: var(--gris-40); }

/* Banner de categoría — cada categoría se personaliza con su propia media */
.banner-categoria { position: relative; background: var(--carbon); color: var(--crema); overflow: hidden;
  --texto-suave: var(--gris-40); --acento-tinta: var(--crema); --linea: #3A3A38; }
.banner-categoria__foto { position: absolute; inset: 0; }
.banner-categoria__foto img { width: 100%; height: 100%; object-fit: cover; }
.banner-categoria__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32,32,31,.95) 0%, rgba(32,32,31,.75) 48%, rgba(32,32,31,.12) 100%); }
.banner-categoria .contenedor { position: relative; z-index: 2; padding-block: var(--e8); }
.banner-categoria h1 { font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: var(--e4); }
.banner-categoria p { color: var(--beige); max-width: 52ch; }
.banner-categoria .etiqueta { color: var(--beige); }
.banner-categoria .miga { border-bottom: none; color: var(--gris-40); padding-top: 0; }
.banner-categoria .miga a { color: var(--beige); }
.banner-categoria__texto { color: var(--beige); max-width: 56ch; }
.banner-categoria__texto p { color: inherit; }
.banner-categoria__texto p + p { margin-top: var(--e3); }

/* Sin foto el banner no se pinta de carbón: queda claro, con el filete rojo
   arriba, y se lee como un encabezado y no como una imagen que no cargó. */
.banner-categoria--plano {
  background: var(--fondo-alt); color: var(--texto); border-top: 3px solid var(--rojo);
}
.banner-categoria--plano h1 { color: var(--texto); }
.banner-categoria--plano .banner-categoria__texto,
.banner-categoria--plano .etiqueta { color: var(--texto-suave); }
.banner-categoria--plano .miga a { color: var(--texto-suave); }

/* Las cifras de la categoría. Es la misma tipografía de `.numeros` pero en una
   fila fina: son un dato de contexto del encabezado, no la sección de cifras. */
.banner-categoria__cifras {
  display: flex; flex-wrap: wrap; gap: var(--e6) var(--e7);
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 1px solid rgba(237, 234, 228, .25);
}
.banner-categoria--plano .banner-categoria__cifras { border-top-color: var(--linea); }
.banner-categoria__cifras b {
  display: block; font-family: var(--f-titulo); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--crema);
}
.banner-categoria--plano .banner-categoria__cifras b { color: var(--texto); }
.banner-categoria__cifras span {
  display: block; margin-top: var(--e2); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris-40);
}
.banner-categoria--plano .banner-categoria__cifras span { color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Fichas de filtro en línea (`.chips`)
   Fila de enlaces, no el panel lateral de `.filtros`: se usa arriba de una
   grilla para saltar entre subcategorías o marcas sin abrir nada.
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.chips:empty { display: none; }
.chips__rotulo {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); margin-right: var(--e2);
}
.chip {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  padding: .45rem .9rem; border: 1px solid var(--linea-fuerte);
  font-size: var(--t-chico); color: var(--texto); text-decoration: none;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.chip:hover { border-color: var(--carbon); background: var(--carbon); color: var(--crema); }
.chip--activo { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }
.chip img { align-self: center; }
.chip__n { font-size: var(--t-micro); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.chip:hover .chip__n, .chip--activo .chip__n { color: var(--gris-40); }
/* Sobre fondo carbón el logo va en tinta blanca, como en el pie. Sin esto el
   chip de marca activo mostraba el logo en color sobre negro. */
.chip--activo .chip__logo, .chip:hover .chip__logo { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   14. CATÁLOGO: FILTROS Y BARRA DE HERRAMIENTAS
   -------------------------------------------------------------------------- */

.catalogo { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 1000px) { .catalogo { grid-template-columns: 250px minmax(0, 1fr); gap: var(--e8); } }

.filtros { border-top: 2px solid var(--linea-fuerte); }
@media (min-width: 1000px) { .filtros { position: sticky; top: 6rem; } }
.filtros__grupo { border-bottom: 1px solid var(--linea); }
.filtros__grupo > summary {
  list-style: none; cursor: pointer; padding: var(--e4) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.filtros__grupo > summary::-webkit-details-marker { display: none; }
.filtros__grupo > summary::after { content: "+"; font-size: 1rem; color: var(--acento-tinta); }
.filtros__grupo[open] > summary::after { content: "–"; }
.filtros__lista { padding-bottom: var(--e4); display: flex; flex-direction: column; }
/* 36 px de alto de fila. La lista de filtros tenía blancos de toque de 16 px
   —el tamaño de la casilla— y WCAG 2.2 pide 24 como mínimo. Con el alto en la
   etiqueta entera, el área tocable es todo el renglón y no sólo el cuadradito. */
.filtros__lista label {
  display: flex; align-items: center; gap: var(--e3);
  font-size: var(--t-chico); cursor: pointer; min-height: 2.25rem;
}
.filtros__lista input { accent-color: var(--rojo); width: 1.125rem; height: 1.125rem; flex: none; }
/* En el ancho de teléfono la casilla misma llega a 24 px. El renglón entero
   ya era pulsable, pero WCAG 2.2 mide el control y no su etiqueta. */
@media (max-width: 759px) {
  .filtros__lista input { width: 1.5rem; height: 1.5rem; }
  .filtros__lista label { min-height: 2.75rem; }
}
.filtros__lista .cuenta { margin-left: auto; color: var(--texto-suave); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }

/* Marca: va el logo oficial, nunca el nombre escrito. Es regla del proyecto y
   además es lo que hace que el filtro se lea de un vistazo. El alto se fija
   por marca porque las tres densidades son muy distintas; el ancho lo calcula
   el navegador para que ningún logo salga deformado. */
.filtros__lista label img { align-self: center; }

.herramientas {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: center;
  justify-content: space-between; padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea); margin-bottom: var(--e5);
}
.herramientas__cuenta { font-size: var(--t-chico); color: var(--texto-suave); }
.herramientas select { font: inherit; font-size: var(--t-chico); padding: var(--e2) var(--e3); border: 1px solid var(--linea); background: #fff; border-radius: var(--radio); }

/* Acá había una segunda definición de `.chips` y `.chip`, más abajo en la hoja
   y por lo tanto ganadora. Entre las dos cosas se rompía el chip activo: la
   primera le ponía fondo carbón y letra crema, y ésta lo volvía a pintar de
   blanco sin tocar el color de la letra, así que el filtro puesto quedaba
   crema sobre blanco —invisible— justo cuando más falta hacía verlo. Lo que
   servía de la segunda definición está sumado arriba; lo demás se fue. */
.sin-resultados { padding: var(--e8) 0; text-align: center; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Barra de filtros de la grilla (`partes/filtros.php`)
   Una fila de chips por atributo —marca, línea, color, tamaño— y el selector
   de orden. Sólo se dibuja lo que el conjunto tiene cargado.
   -------------------------------------------------------------------------- */

.filtros-linea { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e5); }
.filtros-linea .chips { flex-wrap: wrap; }
/* El rótulo con ancho fijo alinea los chips de todas las filas en la misma
   columna, que es lo que hace que tres filas de filtros se lean como una tabla
   y no como tres renglones sueltos. */
@media (min-width: 760px) {
  .filtros-linea .chips__rotulo { flex: none; width: 5.5rem; margin-right: 0; }
}

.chip__logo { display: block; }

.herramientas__limpiar { margin-left: var(--e3); color: var(--acento-tinta); }

.orden { display: flex; align-items: center; gap: var(--e2); }
.orden__rotulo { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.orden select { font: inherit; font-size: var(--t-chico); padding: var(--e2) var(--e3); border: 1px solid var(--linea-fuerte); background: #fff; border-radius: var(--radio); }
.orden__ir {
  font-family: var(--f-titulo); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; padding: .5rem .9rem; border: 1px solid var(--carbon);
  background: var(--carbon); color: var(--crema); cursor: pointer;
}

/* Paginación.
   Números en caja cuadrada de 44 px, sin píldoras ni sombras: la misma
   gramática de filete que el resto del sistema. La página actual va en
   carbón pleno, que es la única marca que hace falta. */
.paginacion { margin-top: var(--e8); border-top: 2px solid var(--linea-fuerte); padding-top: var(--e5); }
.paginacion[hidden] { display: none; }
.paginacion__lista { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: center; }
.paginacion__n {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 var(--e3);
  font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600;
  font-variant-numeric: tabular-nums; text-decoration: none;
  border: 1px solid var(--linea); color: var(--texto);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
a.paginacion__n:hover { border-color: var(--linea-fuerte); background: var(--crema); }
.paginacion__salto { letter-spacing: .04em; }
/* «Anterior» y «Siguiente» sin destino: siguen ocupando su lugar para que la
   fila no se mueva al cambiar de página, pero no se pueden pulsar. Lo que los
   distingue es que no tienen borde ni respuesta al pasar, no un gris flojo:
   el gris que se leía como «apagado» daba 2,83:1 y no pasa AA. */
span.paginacion__n { color: var(--texto-suave); border-color: transparent; }
span.paginacion__n--actual { background: var(--carbon); border-color: var(--carbon); color: var(--crema); }
.paginacion__puntos { border: none; min-width: 1.5rem; padding: 0; }
@media (max-width: 559px) {
  .paginacion__salto { display: none; }
}

/* Los filtros viven dentro de un <details open>. Se pueden plegar en móvil
   sin una línea de JavaScript, y como arranca abierto nunca dependen de él:
   si el JS falla o el navegador es viejo, los filtros siguen a la vista. */
.filtros-movil > summary {
  list-style: none; cursor: pointer;
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--linea); padding-bottom: var(--e3); margin-bottom: var(--e5);
  display: flex; justify-content: space-between; align-items: center;
}
.filtros-movil > summary::-webkit-details-marker { display: none; }
.filtros-movil > summary::after { content: "–"; color: var(--acento-tinta); font-size: 1rem; }
.filtros-movil:not([open]) > summary::after { content: "+"; }
.filtros-movil:not([open]) > summary { margin-bottom: 0; }
/* Cuántos filtros hay puestos. Con el cajón cerrado en móvil es el único
   aviso de que lo que se ve no es el catálogo entero. */
.filtros__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; margin-left: var(--e1);
  background: var(--acento); color: var(--acento-texto);
  font-size: .625rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.filtros__n[hidden] { display: none; }

/* --------------------------------------------------------------------------
   15. FICHA DE PRODUCTO
   -------------------------------------------------------------------------- */

.miga { font-size: var(--t-chico); color: var(--texto-suave); padding-block: var(--e4); border-bottom: 1px solid var(--linea); }
.miga ol { display: flex; flex-wrap: wrap; gap: var(--e2); }
.miga li::after { content: "/"; margin-left: var(--e2); color: var(--texto-suave); }
.miga li:last-child::after { content: none; }
/* El enlace de una miga mide el alto de una línea de 15 px: en un teléfono eso
   es un blanco de 18 px y el mínimo son 24. Se le da el aire por dentro y se
   lo compensa por fuera para que la fila siga midiendo lo mismo. */
.miga a { text-decoration: none; display: inline-block; padding-block: var(--e1); margin-block: calc(var(--e1) * -1); }
.miga a:hover { text-decoration: underline; }

.ficha { display: grid; gap: var(--e7); padding-block: var(--e7); }
@media (min-width: 1000px) { .ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e9); align-items: start; } .ficha__panel { position: sticky; top: 6rem; } }

/* Producto sin fotografía. No lleva cartel de «foto pendiente»: en el lugar de
   la galería va lo que un comprador industrial necesita antes de abrir la
   tabla —cuántas capacidades, cuántos colores, cuántos códigos—, que sale de
   contar el maestro. Cuando la foto exista, el bloque desaparece solo. */
@media (min-width: 1000px) { .ficha--sin-foto { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--e8); } }
.ficha__resumen { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--carbon); }
.ficha__resumen > div { border-bottom: 1px solid var(--linea); padding: var(--e5) var(--e5) var(--e5) 0; }
.ficha__resumen > div + div { border-left: 1px solid var(--linea); padding-left: var(--e5); }
.ficha__resumen > div:nth-child(odd) { border-left: none; padding-left: 0; }
.ficha__resumen .dato__pie { text-transform: none; letter-spacing: 0; font-size: var(--t-chico); line-height: 1.45; }

.galeria { display: grid; gap: var(--e3); }
.galeria__principal { aspect-ratio: 1; }
/* Columnas por cantidad de fotos, no fijas en cinco: con cuatro miniaturas la
   grilla dejaba un hueco a la derecha que parecía una foto que no cargó. */
.galeria__miniaturas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e3); }
.galeria__mini { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.galeria__mini .figura { aspect-ratio: 1; }
.galeria__mini[aria-current="true"] { border-color: var(--carbon); }

.ficha h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-block: var(--e3) var(--e4); }
.ficha__intro { color: var(--texto-suave); margin-bottom: var(--e6); }

.selector { margin-bottom: var(--e5); }
.selector__titulo { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e3); }
.selector__titulo output { color: var(--texto-suave); letter-spacing: .02em; text-transform: none; font-size: var(--t-chico); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opcion { font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .55rem 1.1rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.opcion:hover { border-color: var(--gris-40); }
.opcion[aria-pressed="true"] { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.opcion--color { display: inline-flex; align-items: center; gap: var(--e2); padding-left: .55rem; }
.muestra { width: 1.125rem; height: 1.125rem; border: 1px solid rgba(0,0,0,.22); flex: none; }
/* «Transparente» no es un color: es la ausencia de pigmento. La muestra lo
   dibuja como tal —damero— en lugar de inventarle un gris. */
.muestra--transparente {
  background:
    linear-gradient(45deg, var(--gris-15) 25%, transparent 25%, transparent 75%, var(--gris-15) 75%) 0 0 / .5rem .5rem,
    linear-gradient(45deg, var(--gris-15) 25%, transparent 25%, transparent 75%, var(--gris-15) 75%) .25rem .25rem / .5rem .5rem,
    #fff;
}

/* Combinación que no se fabrica. Se marca, no se deshabilita: con un disabled
   el usuario tendría que adivinar en qué orden tocar los botones para llegar a
   la variante que quiere. Al elegirla, el JS ajusta el resto y lo avisa. */
.opcion[data-combina="no"]:not([aria-pressed="true"]) {
  color: var(--gris-60); border-style: dashed;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--gris-15) 6px 7px), #fff;
}
.opcion[data-combina="no"]:not([aria-pressed="true"]) .muestra { opacity: .55; }

/* Aparece sólo después de un ajuste automático de la selección. */
.nota-variante {
  font-size: var(--t-chico); color: var(--texto-suave);
  border-left: 2px solid var(--rojo); background: var(--gris-15);
  padding: var(--e3) var(--e4); margin-bottom: var(--e5);
}
.nota-variante[hidden] { display: none; }

.tabla-datos { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla-datos th, .tabla-datos td { text-align: left; padding: var(--e3) 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.tabla-datos th { font-weight: 400; color: var(--texto-suave); width: 52%; }
.tabla-datos td { font-family: var(--f-titulo); font-weight: 600; }
.tabla-datos tr:last-child th, .tabla-datos tr:last-child td { border-bottom: none; }

/* Tabla de procedencia del dato — /sostenibilidad.

   No reusa .tabla-variantes: aquella tiene la fila clicable y cursor de mano,
   que acá sería mentir. Cuatro columnas: qué se mide, cuánto, de cuándo y de
   dónde sale. Es el registro que distingue esta página de la Home, donde las
   mismas cifras van grandes y sin fecha. */
.tabla-fuentes { width: 100%; border-collapse: collapse; font-size: var(--t-chico); min-width: 40rem; }
.tabla-fuentes th, .tabla-fuentes td {
  text-align: left; padding: var(--e4) var(--e5) var(--e4) 0;
  border-bottom: 1px solid var(--linea); vertical-align: baseline;
}
.tabla-fuentes thead th {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 2px solid var(--linea-fuerte); padding-top: 0;
}
.tabla-fuentes tbody th { font-family: var(--f-titulo); font-weight: 600; color: var(--texto); width: 34%; }
.tabla-fuentes tbody td { color: var(--texto-suave); }
.tabla-fuentes tbody td:first-of-type { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.01em; color: var(--texto); }

.panel-tecnico { border: 1px solid var(--linea); border-top: 2px solid var(--carbon); padding: var(--e5); margin-bottom: var(--e5); }
.panel-tecnico h2 { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e3); }

.copiar { display: inline-flex; align-items: center; gap: var(--e2); background: none; border: 1px solid var(--linea); font-size: var(--t-micro); padding: 2px var(--e2); cursor: pointer; color: var(--texto-suave); }
.copiar:hover { border-color: var(--carbon); color: var(--texto); }
.celda-ean { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

.acciones-ficha { display: grid; gap: var(--e3); }
@media (min-width: 480px) { .acciones-ficha { grid-template-columns: 1fr auto; } }

.aviso { font-size: var(--t-chico); color: var(--texto-suave); border-left: 2px solid var(--rojo); padding-left: var(--e4); margin-top: var(--e5); }

/* El acuse de un formulario que sí se envió. Comparte lugar con `.aviso` —el JS
   del prototipo le pone las dos clases— pero no hereda su filete rojo: el rojo
   acá diría «algo salió mal» justo en el momento en que salió bien. Va después
   de `.aviso` para ganarle por orden, sin subir especificidad. */
.formulario__enviado { font-size: var(--t-base); color: var(--texto); background: var(--beige); border-left: 3px solid var(--carbon); padding: var(--e4) var(--e5); margin-top: var(--e5); }

.tabla-variantes { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla-variantes caption { text-align: left; color: var(--texto-suave); padding-bottom: var(--e3); }
.tabla-variantes th, .tabla-variantes td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.tabla-variantes thead th { font-family: var(--f-titulo); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--carbon); color: var(--texto); }
.tabla-variantes tbody tr:hover { background: var(--crema); }
.tabla-variantes tbody tr[data-activa="true"] { background: var(--crema); box-shadow: inset 2px 0 0 var(--rojo); }
/* La tabla también selecciona: hacer clic en una fila cambia la variante de
   arriba. Es un atajo de mouse; el camino accesible son los botones del
   selector, que sí están en el orden de tabulación. */
.tabla-variantes tbody tr { cursor: pointer; }
/* `position: relative` no es decorativo: dentro de la tabla hay textos para
   lector de pantalla, que son absolutos. Si el scroller no es su bloque
   contenedor, no los clipea —quedan colgados del documento— y en un teléfono
   el ancho de la tabla se convierte en scroll horizontal de toda la página. */
.tabla-scroll { overflow-x: auto; position: relative; }
/* Con 52 variantes la tabla mide más que la pantalla y empuja el resto de la
   página fuera de la vista. Se le pone techo y el encabezado queda fijo, así
   la columna que se está leyendo sigue teniendo nombre. */
.tabla-scroll--alta { max-height: 32rem; overflow-y: auto; }
.tabla-scroll--alta thead th { position: sticky; top: 0; z-index: 1; background: var(--fondo); }
.tabla-scroll--alta caption { position: sticky; left: 0; }

.especificaciones { display: grid; gap: 0 var(--e8); }
@media (min-width: 760px) { .especificaciones { grid-template-columns: 1fr 1fr; } }
/* Producto con pocos datos generados: una sola tabla, medida para leerse, en
   vez de media grilla vacía que parece un bloque que no cargó. */
@media (min-width: 760px) { .especificaciones--una { grid-template-columns: minmax(0, 40rem); } }

/* --------------------------------------------------------------------------
   16. PÁGINAS INTERIORES
   -------------------------------------------------------------------------- */

.cabecera-pagina { border-bottom: 1px solid var(--linea); padding-block: var(--e8) var(--e7); }
.cabecera-pagina h1 { max-width: 18ch; }
/* La miga abre la cabecera, así que no lleva ni su filete inferior —el de la
   cabecera ya cierra el bloque— ni el aire de arriba. En el prototipo esto iba
   escrito a mano en cada página; en el theme la miga la imprime un ayudante y
   no hay dónde poner el estilo suelto. */
.cabecera-pagina > .miga { border-bottom: none; padding-top: 0; }
/* La bajada de una cabecera de página es siempre una entradilla, sin que
   haya que acordarse de ponerle la clase en cada plantilla. */
.cabecera-pagina > p:not(.etiqueta):not(.aviso) {
  font-weight: 300;
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
  line-height: 1.4; letter-spacing: -.018em;
  color: var(--texto); max-width: 52ch; margin-top: var(--e5);
}

/* Dato suelto dentro de una celda de .rejilla — cifras institucionales.
   Siempre con su año al pie: una cifra sin fecha es una cifra sin fuente. */
.dato__n { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1; }
.dato__rotulo { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-chico); margin-top: var(--e3); }
.dato__pie { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-top: var(--e2); }

/* --------------------------------------------------------------------------
   Formularios
   Sin bordes redondeados, sin sombras, sin placeholders haciendo de etiqueta:
   la etiqueta siempre está y siempre es visible. Es un formulario que va a
   completar gente de compras, no un formulario de landing.
   -------------------------------------------------------------------------- */

.formulario { display: grid; gap: var(--e5); }
@media (min-width: 700px) { .formulario--2 { grid-template-columns: 1fr 1fr; } .formulario .ancho-total { grid-column: 1 / -1; } }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo > span, .campo > label {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave);
}
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--t-base); color: var(--texto);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e3) var(--e4); width: 100%;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
/* La ayuda de un campo es una frase, no un rótulo: hereda la Montserrat 600 en
   versalitas del selector de arriba y así se leía como si fuera otra etiqueta.
   Vuelve a la tipografía de texto. */
.campo .ayuda {
  font-size: var(--t-micro); color: var(--texto-suave);
  font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5;
}
.campo select {
  /* La flecha del select la dibuja cada sistema a su manera y en Windows queda
     como un control de formulario de escritorio de 2003. Se apaga y se pone la
     nuestra, del mismo gris que los íconos del buscador. */
  -webkit-appearance: none; appearance: none; padding-right: var(--e7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2363635C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e4) center; background-size: .7rem;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-40); }
.requerido { color: var(--rojo); }

/* Consentimiento. Antes era un checkbox del sistema flotando arriba de su
   propio texto: en la columna del formulario la casilla heredaba el centrado
   de `.campo` y quedaba desprendida de la frase que tenía que aceptar. Ahora
   es una fila completa y clickeable, con la casilla dibujada por nosotros para
   que mida los 24 px de blanco de toque que pide la WCAG 2.2 §2.5.8. */
.campo--casilla {
  flex-direction: row; align-items: flex-start; gap: var(--e4);
  border: 1px solid var(--linea); padding: var(--e4) var(--e5);
  cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.campo--casilla:hover { border-color: var(--gris-40); }
.campo--casilla input {
  -webkit-appearance: none; appearance: none;
  width: 1.5rem; height: 1.5rem; flex: none; margin: 0; padding: 0;
  border: 1px solid var(--linea-fuerte); background: var(--fondo); cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--transicion), border-color var(--transicion);
}
.campo--casilla input::before {
  content: ""; width: .65rem; height: .34rem;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-.1em) rotate(-45deg) scale(.4); opacity: 0;
  transition: transform var(--transicion), opacity var(--transicion);
}
.campo--casilla input:checked { background: var(--acento); border-color: var(--acento); }
.campo--casilla input:checked::before { transform: translateY(-.1em) rotate(-45deg) scale(1); opacity: 1; }
.campo--casilla input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.campo--casilla:has(input:checked) { border-color: var(--linea-fuerte); }
/* `flex: 1 1 …` y no `auto`: si la frase conserva su ancho de contenido, con
   el envoltorio activado se va entera al renglón de abajo y la casilla vuelve
   a quedar suelta arriba, que es justo lo que había que arreglar. */
.campo--casilla span {
  flex: 1 1 8rem; min-width: 0;
  text-transform: none; letter-spacing: 0; font-family: inherit; font-weight: 400;
  font-size: var(--t-chico); line-height: 1.55; color: var(--texto-suave);
}
.campo--casilla a { color: var(--texto); box-shadow: inset 0 -1px 0 var(--gris-40); text-decoration: none; }
.campo--casilla a:hover { color: var(--acento); box-shadow: inset 0 -1px 0 var(--acento); }

/* Trampa para robots: un campo que una persona nunca ve ni puede tabular, y
   que los formularios automáticos completan igual. No se usa `display:none`
   porque varios bots lo detectan y lo saltean. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Estado de error, marcado por el navegador o por la validación de CUIT.
   El borde rojo solo no alcanza —hay gente que no lo distingue—, así que el
   mensaje del navegador queda visible y el campo se vuelve a enfocar. */
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color: var(--acento); }
.campo [aria-invalid="true"] { border-color: var(--acento); }
/* `.campo .campo__error` y no `.campo__error` a secas: el mensaje es un <span>
   hijo directo de `.campo`, así que lo alcanza el selector de las etiquetas
   —`.campo > span`, más específico— y salía en versalitas de Montserrat.
   Un error tipografiado como rótulo no se lee como un error. */
.campo .campo__error {
  font-size: var(--t-micro); color: var(--acento);
  font-family: inherit; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.campo--casilla { flex-wrap: wrap; }
.campo--casilla .campo__error { flex-basis: 100%; }

/* Campo de archivo. El control nativo es lo más feo que dibuja un navegador:
   en Windows sale un botón gris de sistema con la leyenda «Ningún archivo
   seleccionado» al lado, en la tipografía del sistema operativo y no en la del
   sitio. Es literalmente el aspecto de aplicación de escritorio vieja.

   No se esconde el input con `display:none` —eso lo saca del orden de tabulado
   y deja el campo inalcanzable por teclado—: se estiliza `::file-selector-button`
   como el resto de los botones y el input conserva su comportamiento entero. */
.campo--archivo input[type="file"] {
  padding: var(--e3); cursor: pointer;
  font-size: var(--t-chico); color: var(--texto-suave);
  border-style: dashed; border-color: var(--gris-60);
  transition: border-color var(--transicion), background var(--transicion);
}
.campo--archivo input[type="file"]:hover { border-color: var(--acento); background: var(--fondo-alt); }
/* El estado de error necesita las tres cosas —clase, tipo y atributo— porque
   la regla de arriba ya es (0,2,1) y le gana a `.campo [aria-invalid]`. Sin
   esto el único campo obligatorio que no se marcaba en rojo era justo el que
   más falta: el del CV. */
.campo--archivo input[type="file"][aria-invalid="true"],
.campo--archivo input[type="file"]:user-invalid { border-color: var(--acento); }
.campo--archivo input[type="file"]::file-selector-button {
  font: inherit; font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento-texto, #fff); background: var(--carbon);
  border: none; border-radius: var(--radio);
  padding: var(--e3) var(--e4); margin-right: var(--e4); cursor: pointer;
  transition: background var(--transicion);
}
.campo--archivo input[type="file"]:hover::file-selector-button { background: var(--acento); }
/* Nombre y peso del archivo elegido, en nuestra tipografía. El control nativo
   lo muestra recortado y sin el tamaño, que es el dato que decide si el envío
   va a pasar el tope. Lo escribe el JS; sin JavaScript queda vacío y manda el
   texto del propio input. */
.campo__archivo-nombre {
  font-size: var(--t-micro); color: var(--texto); font-weight: 500;
  word-break: break-all;
}
.campo__archivo-nombre:empty { display: none; }

/* Pasos numerados — proceso en cuatro tiempos. */
.pasos { display: grid; gap: 1px; background: var(--gris-90); border: 1px solid var(--gris-90); --acento-tinta: var(--crema); }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos > li { background: var(--carbon); padding: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
.pasos__n { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-chico); letter-spacing: .12em; color: var(--acento-tinta); }
.pasos h3 { font-size: 1.125rem; color: var(--crema); }
.pasos p { font-size: var(--t-chico); color: var(--gris-40); }
.seccion:not(.seccion--oscura) .pasos { background: var(--linea); border-color: var(--linea); --acento-tinta: var(--rojo-tinta); }
.seccion:not(.seccion--oscura) .pasos > li { background: var(--fondo); }
.seccion:not(.seccion--oscura) .pasos h3 { color: var(--texto); }
.seccion:not(.seccion--oscura) .pasos p { color: var(--texto-suave); }

/* Línea de tiempo — el relato Ave Fénix. Sobria a propósito: año grande,
   texto corto, foto documental. Sin épica sobreactuada. */
.linea-tiempo { border-top: 2px solid var(--linea-fuerte); }
.linea-tiempo > li { display: grid; gap: var(--e4); padding-block: var(--e6); border-bottom: 1px solid var(--linea); align-items: start; }
@media (min-width: 860px) { .linea-tiempo > li { grid-template-columns: 10rem minmax(0, 1fr) 300px; gap: var(--e7); } }
/* El año lleva su propio filete arriba, igual que .proceso__n y .etapas__n.
   Cuatro reglas alineadas en la misma columna se leen como una progresión;
   cuatro renglones centrados verticalmente se leían como una tabla, que es
   exactamente lo que había que sacarle a esta sección. Por eso también las
   tres columnas arrancan arriba en vez de centrarse.
   El año creció de 1,75rem a casi el doble: es el dato de la fila, no una
   etiqueta al margen. */
.linea-tiempo__ano {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem); letter-spacing: -.05em; line-height: 1;
  padding-top: var(--e3); border-top: 2px solid var(--linea-fuerte);
}
.linea-tiempo__ano--hito { color: var(--rojo); border-top-color: var(--rojo); }
.linea-tiempo h3 { font-size: 1.25rem; margin-bottom: var(--e2); }
.linea-tiempo p { color: var(--texto-suave); }
.linea-tiempo .figura, .linea-tiempo .slot { width: 100%; }
/* Enlace a la cobertura periodística del hito, cuando la hay. */
.linea-tiempo__prensa { margin-top: var(--e3); font-size: var(--t-chico); }
.linea-tiempo__prensa a { color: inherit; text-underline-offset: .2em; }
.linea-tiempo__prensa a:hover { color: var(--acento); }

/* PRENSA — la historia de arriba dicha por terceros.

   Cierra la cronología de Nosotros con las notas reales que los medios
   publicaron sobre el incendio y la reconstrucción. Es una lista editorial
   con filetes, no una grilla de tarjetas: son citas, no piezas propias, y
   la jerarquía la lleva el titular. */
.prensa { margin-top: var(--e7); }
.prensa__rotulo {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.prensa__lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linea-fuerte); }
.prensa__lista li { border-bottom: 1px solid var(--linea); }
.prensa__lista a {
  display: grid; gap: var(--e1) var(--e5); padding-block: var(--e4);
  color: inherit; text-decoration: none;
}
@media (min-width: 860px) {
  .prensa__lista a { grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: baseline; }
}
.prensa__medio {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.prensa__titular { font-weight: 500; line-height: 1.4; transition: color var(--transicion); }
.prensa__lista a:hover .prensa__titular, .prensa__lista a:focus-visible .prensa__titular { color: var(--acento); }
.prensa__fecha { color: var(--texto-suave); font-size: var(--t-chico); }

/* VALORES — seis palabras y nada más.

   El manual de marca no trae una definición para cada valor, así que la caja
   con ícono y bajada de dos líneas obligaría a inventarlas. Se resuelve al
   revés: la palabra grande es el contenido, el número la ordena y el filete
   rojo aparece al pasar. Es tipografía, no tarjetas. */
.valores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e6); border-top: 2px solid var(--linea-fuerte); }
@media (min-width: 860px) { .valores { grid-template-columns: repeat(3, 1fr); } }
/* Nómina en una sola columna: cuando va al lado de otro bloque y no a lo ancho
   de la página. Después de la media query para que gane en las dos medidas. */
.valores--columna { grid-template-columns: minmax(0, 1fr); }
.valores li {
  display: flex; align-items: baseline; gap: var(--e4);
  padding-block: var(--e5); border-bottom: 1px solid var(--linea);
}
.valores__n {
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--acento-tinta); flex: none;
}
.valores__v {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: -.03em; line-height: 1.1;
}

.prosa { max-width: 64ch; }
/* Un enlace dentro de un párrafo se marca con un filete rojo por debajo, no
   con el subrayado azul o negro del navegador: eso último es exactamente lo
   que devuelve un documento de texto exportado a HTML. */
.prosa a:not(.boton):not(.enlace-flecha),
.acordeon__cuerpo a:not(.boton):not(.enlace-flecha) {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(228, 26, 26, .32);
  transition: box-shadow var(--transicion), color var(--transicion);
}
.prosa a:not(.boton):not(.enlace-flecha):hover,
.acordeon__cuerpo a:not(.boton):not(.enlace-flecha):hover {
  box-shadow: inset 0 -2px 0 var(--acento); color: var(--acento);
}
.prosa h2 { font-size: 1.5rem; margin-top: var(--e7); margin-bottom: var(--e4); padding-top: var(--e5); border-top: 1px solid var(--linea); }
.prosa > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prosa h3 { font-size: 1.125rem; margin-top: var(--e5); margin-bottom: var(--e3); }
.prosa ul { margin-bottom: var(--e4); }
.prosa ul li { position: relative; padding-left: var(--e5); margin-bottom: var(--e2); }
.prosa ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 2px; background: var(--acento); }
.prosa ol { list-style: decimal; padding-left: var(--e5); margin-bottom: var(--e4); }
.prosa ol li { margin-bottom: var(--e2); padding-left: var(--e2); }
.prosa strong { font-weight: 500; color: var(--texto); }

.con-sumario { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 1000px) { .con-sumario { grid-template-columns: 220px minmax(0, 1fr); gap: var(--e9); } .sumario { position: sticky; top: 6rem; } }
.sumario { border-top: 2px solid var(--linea-fuerte); font-size: var(--t-chico); }
.sumario a { display: block; padding: var(--e3) 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--texto-suave); }
.sumario a:hover { color: var(--acento); }

/* Rail de una nota — el dato duro al costado del texto, no adentro de él.
   Reusa la grilla de .con-sumario, que ya resuelve las dos columnas y el
   apilado en móvil; lo único propio es el filete, el aire y la pegajosidad. */
.rail-nota {
  display: grid; gap: var(--e5); justify-items: start;
  border-top: 2px solid var(--linea-fuerte); padding-top: var(--e5);
}
.rail-nota img { width: 7rem; height: auto; }
@media (min-width: 1000px) { .rail-nota { position: sticky; top: 6rem; } }

.acordeon { border-top: 2px solid var(--linea-fuerte); }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__item > summary {
  list-style: none; cursor: pointer; padding: var(--e5) var(--e6) var(--e5) 0; position: relative;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
}
.acordeon__item > summary::-webkit-details-marker { display: none; }
.acordeon__item > summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--acento); }
.acordeon__item[open] > summary::after { content: "–"; }
.acordeon__item > summary:hover { color: var(--acento); }
.acordeon__cuerpo { padding-bottom: var(--e5); color: var(--texto-suave); max-width: 64ch; }

/* Cada grupo de preguntas frecuentes. En el prototipo el título y la separación
   iban con estilos en línea, escritos uno por uno; en el theme los grupos los
   imprime un bucle y no hay dónde escribirlos. */
.grupo-faq + .grupo-faq { margin-top: var(--e8); }
.grupo-faq > h2 { font-size: 1.5rem; margin-bottom: var(--e5); }

/* POLÍTICA — el texto de un documento firmado, publicado textual.

   No es una bajada ni una cita decorativa: es el documento. Por eso no lleva
   comillas ni bastardilla, va en la tipografía de titulares a cuerpo grande y
   se apoya en un filete rojo grueso. El <footer> del blockquote es la
   atribución, que en un documento controlado además llevará código y revisión. */
.politica { border-top: 3px solid var(--acento); padding-top: var(--e6); margin-top: var(--e6); max-width: 46ch; }
.politica p {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem); line-height: 1.42; letter-spacing: -.02em;
  color: var(--texto);
}
.politica footer {
  margin-top: var(--e5); font-family: var(--f-titulo);
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}

/* Sello + datos duros de una certificación. El sello va chico: es una marca de
   identificación, no una ilustración, y agrandarlo delata que abajo hay poco
   dato. Lo que sostiene el bloque es la tabla. */
.ficha-sello {
  border: 1px solid var(--linea); background: var(--fondo);
  padding: var(--e6); display: grid; gap: var(--e5); justify-items: start;
}
.ficha-sello img { width: 6.5rem; height: auto; }

/* Acá había una segunda declaración de .formulario y .campo, de una versión
   anterior, más una familia .fila-campos / .consentimiento / .campo--obligatorio
   que ninguna página usa. Como venía después pisaba la de la sección de
   formularios: devolvía el foco al borde carbón en vez del contorno rojo y le
   sacaba el color a las etiquetas. Eliminada. */

.tarjeta-dato { display: flex; flex-direction: column; gap: var(--e2); }
.tarjeta-dato h3 { font-size: 1.0625rem; }
.tarjeta-dato p, .tarjeta-dato a { font-size: var(--t-chico); color: var(--texto-suave); }

.via { display: flex; flex-direction: column; gap: var(--e3); text-decoration: none; height: 100%; }
.via__n { font-family: var(--f-titulo); font-size: var(--t-micro); letter-spacing: .14em; color: var(--acento-tinta); }
.via h3 { font-size: 1.125rem; }
.via p { font-size: var(--t-chico); color: var(--texto-suave); flex: 1; }
.via:hover h3 { color: var(--acento); }
/* Pie de una .via que no es un enlace: el renglón que dice por dónde sigue el
   caso. Ocupa el lugar del .enlace-flecha, con filete arriba en vez de flecha. */
.via__pie {
  font-size: var(--t-micro); letter-spacing: .04em; color: var(--texto);
  font-family: var(--f-titulo); font-weight: 600;
  border-top: 1px solid var(--linea); padding-top: var(--e3);
}

/* --------------------------------------------------------------------------
   Contacto
   La columna de datos duros era una pila de <p> con estilos escritos a mano en
   el atributo `style`: mismo cuerpo, mismo gris, sin jerarquía. Eso es
   exactamente lo que hace que una página parezca un documento exportado. Ahora
   es un panel oscuro con tres filas parejas, que además le hace contrapeso al
   formulario y le da un ancla visual a la sección.
   -------------------------------------------------------------------------- */

.contacto-cuerpo { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 1000px) {
  .contacto-cuerpo { grid-template-columns: 340px minmax(0, 1fr); gap: var(--e8); }
  .tarjeta-contacto { position: sticky; top: 6rem; }
}

.tarjeta-contacto { background: var(--carbon); color: var(--crema); padding: var(--e6) var(--e5); }
.tarjeta-contacto__rotulo {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris-40);
}
.tarjeta-contacto__rotulo::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--rojo); }
.tarjeta-contacto__empresa {
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.025em; line-height: 1.1; color: #fff; margin-top: var(--e4);
}
.tarjeta-contacto address { font-style: normal; font-size: var(--t-chico); line-height: 1.6; color: var(--beige); margin-top: var(--e2); }

.contacto-vias { margin-top: var(--e5); border-top: 1px solid #3A3A38; }
.contacto-vias > li { display: flex; gap: var(--e4); align-items: flex-start; padding: var(--e4) 0; border-bottom: 1px solid #3A3A38; }
.contacto-vias svg {
  flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--rojo);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.contacto-vias b, .contacto-vias a {
  display: block; font-family: var(--f-titulo); font-weight: 600; font-size: 1rem;
  letter-spacing: -.01em; color: #fff; text-decoration: none;
}
/* En el panel oscuro el rojo institucional da 3,5:1 contra el carbón: sirve
   para un filete o un ícono, no para texto. El hover va al beige. */
.contacto-vias a:hover { color: var(--beige); }
.contacto-vias span { display: block; font-size: var(--t-micro); color: var(--gris-40); margin-top: var(--e1); letter-spacing: .04em; }

.tarjeta-contacto__extra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  margin-top: var(--e5); font-family: var(--f-titulo); font-size: var(--t-chico);
  font-weight: 600; color: var(--crema); text-decoration: none;
}
.tarjeta-contacto__extra:hover { color: #fff; }
.tarjeta-contacto__extra::after { content: "→"; color: var(--gris-40); }

/* Encabezado de la columna del formulario. */
.formulario-intro { border-top: 2px solid var(--linea-fuerte); padding-top: var(--e4); margin-bottom: var(--e6); }
.formulario-intro h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.formulario-intro p { font-size: var(--t-chico); color: var(--texto-suave); margin-top: var(--e2); max-width: 58ch; }

/* --------------------------------------------------------------------------
   Mapa con carga diferida
   La foto aérea es real y se ve siempre; el mapa de Google recién se pide
   cuando alguien lo pide. No es sólo peso: hasta ese clic, la IP del visitante
   no sale hacia Google, que es coherente con la política de privacidad que
   firma esta misma página. Sin JavaScript el botón no aparece y queda el
   enlace al mapa, que resuelve lo mismo.
   -------------------------------------------------------------------------- */

.mapa { position: relative; aspect-ratio: 16 / 9; background: var(--crema); overflow: hidden; }
.mapa > img, .mapa > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.mapa__boton { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mapa__chapa {
  position: absolute; left: 0; bottom: 0; background: var(--carbon); color: var(--crema);
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  padding: var(--e2) var(--e4);
}
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--e3) var(--e5); padding-top: var(--e4); font-size: var(--t-chico); color: var(--texto-suave);
}
@media (max-width: 560px) { .mapa__boton { width: calc(100% - var(--e6)); } }

/* Acá había una segunda declaración de .linea-tiempo, de una versión anterior:
   cuatro columnas y una familia .hito que ninguna página usa. Como venía
   después, ganaba sobre la de la sección 16 y convertía la cronología de
   Nosotros en cuatro columnas que se desbordaban. Eliminada. */

.novedad { display: flex; flex-direction: column; gap: var(--e3); text-decoration: none; }
.novedad__meta { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); display: flex; gap: var(--e3); flex-wrap: wrap; }
.novedad__meta b { color: var(--acento-tinta); font-weight: 600; }
.novedad h3 { font-size: 1.25rem; }
.novedad p { font-size: var(--t-chico); color: var(--texto-suave); }
.novedad:hover h3 { color: var(--acento); }
@media (min-width: 900px) { .novedad--destacada { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--e8); } .novedad--destacada h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); } }

/* TAPA DE NOTA — la portada que dibuja el theme cuando un post no tiene
   imagen destacada.

   La alternativa era el recuadro gris con el cartel «foto requerida», y cuatro
   de esos seguidos hacen que la sección entera parezca rota. Esto es una tapa
   de verdad: rubro arriba, trama de impresión al bies y el logotipo oficial
   abajo. La trama es una retícula de imprenta, no un degradado decorativo, y
   `currentColor` hace que se dibuje sola en el color del texto de cada variante.

   Desde el 13/8/2026 los archivos de marca están todos recortados al límite
   de la tinta, así que a igual `--alto-logo` se ven del mismo tamaño y con la
   misma sangría contra el borde de la tapa. Los `-ajustado` que existían para
   esto quedaron sin uso.

   La variante de color es obligatoria: el theme la deriva de la categoría del
   post, de modo que dos notas seguidas del mismo rubro no salgan iguales.

   El `width: 100%` no es decorativo. La tapa vive adentro de `.novedad`, que es
   un flex en columna: ahí el ancho del hijo lo resuelve el `stretch`, que
   todavía es indefinido cuando se calcula el alto, y entonces `aspect-ratio` no
   tiene de dónde transferir y la caja colapsa a la altura de su contenido. Con
   el ancho declarado, la proporción 4:3 se resuelve. */
.tapa-nota {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--e5);
}
.tapa-nota::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 7px, currentColor 7px 8px);
  opacity: .13;
}
.tapa-nota > * { position: relative; z-index: 1; }
.tapa-nota__rubro {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
}
.tapa-nota img[data-logo] { align-self: start; }
.tapa-nota--carbon { background: var(--carbon); color: var(--crema); }
.tapa-nota--crema  { background: var(--crema);  color: var(--carbon); }
.tapa-nota--rojo   { background: var(--rojo);   color: #fff; }
@media (max-width: 640px) { .tapa-nota { padding: var(--e4); } .tapa-nota img[data-logo] { --alto-logo: 1.1rem !important; } }
.novedad:hover .tapa-nota::after, .novedad:focus-visible .tapa-nota::after { opacity: .22; }

/* Grilla de notas. No es la del catálogo: el móvil va a UNA columna. La regla
   de dos columnas en el celular vale para el packshot, que se lee chico; un
   titular de nota partido en cuatro renglones de dos palabras, no. */
.rejilla-notas { display: grid; grid-template-columns: 1fr; gap: var(--e7) var(--e5); }
@media (min-width: 640px) { .rejilla-notas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla-notas { grid-template-columns: repeat(3, 1fr); } }

/* Alineación entre tarjetas de una misma fila. Con el flex en columna, un
   título de dos líneas empuja la bajada y las tarjetas dejan de compartir
   renglón: es el detalle que hace que una grilla parezca desprolija. El
   `subgrid` hace que las cuatro filas de cada tarjeta sean las mismas filas de
   la grilla madre, así el alto lo fija el ítem más alto de cada renglón.
   Va dentro de `@supports` porque el flex de arriba es un fallback correcto. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .rejilla-notas > .novedad {
      display: grid; grid-template-rows: subgrid; grid-row: span 4;
      row-gap: var(--e3);
    }
  }
}

/* Bloque de contenido que todavía depende del cliente. Deliberadamente visible. */
.pendiente { border: 1px dashed var(--gris-60); padding: var(--e5); background: var(--crema); }
.pendiente h3 { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-tinta); margin-bottom: var(--e3); }
.pendiente p, .pendiente li { font-size: var(--t-chico); color: var(--gris-90); }
.pendiente ul { margin-top: var(--e3); }
.pendiente ul li { position: relative; padding-left: var(--e4); margin-bottom: var(--e1); }
/* Los `auto`/`none` no sobran: cuando el bloque cae adentro de una `.prosa`,
   `.prosa ul li::before` tiene la misma especificidad y ya dibujó un filete
   rojo de 2 px. Sin neutralizarlo, el punto se superpone al filete. */
.pendiente ul li::before {
  content: "·"; position: absolute; left: var(--e2); color: var(--rojo);
  top: auto; width: auto; height: auto; background: none;
}

/* --------------------------------------------------------------------------
   16a bis. ESTADO VACÍO

   Un listado sin resultados no es un error, y tampoco es un lugar para poner
   un dibujo simpático. Es una respuesta: qué se buscó, por qué no hay nada y
   cuál es el camino de salida. Lo usan las búsquedas laborales sin avisos
   publicados, el catálogo cuando los filtros no cruzan, los resultados de
   búsqueda y el 404 — por eso el componente es uno solo y no cuatro parecidos.

   El filete rojo arriba, y no un borde punteado: el punteado ya significa otra
   cosa en este sitio —`.pendiente`, contenido que falta del lado del cliente—
   y un estado vacío legítimo no es contenido faltante.
   -------------------------------------------------------------------------- */

.vacio {
  border-top: 2px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea);
  padding: var(--e7) 0;
  display: grid; gap: var(--e4);
}
/* h1 incluido: en el 404 el encabezado de la página ES el estado vacío, y con
   el tamaño de display al lado de la cifra «404» competían dos titulares. */
.vacio h1, .vacio h2, .vacio h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); max-width: 24ch; }
.vacio p { font-size: var(--t-base); color: var(--texto-suave); max-width: 56ch; }
.vacio .acciones { margin-top: var(--e3); }

/* La cifra va DESPUÉS de `.vacio p` y con dos clases, no con una: es un <p>,
   así que `.vacio p` la alcanza —misma especificidad de clase pero un elemento
   más— y le pisaba el cuerpo y el color. Salía un «0» de 15 px en gris de
   texto suave, que se lee como un error de maquetación y no como un dato. */
.vacio .vacio__marca {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 6rem); line-height: .82; letter-spacing: -.05em;
  color: var(--linea-fuerte); /* Gris de filete: es una cifra ambiental, no un titular. */
  max-width: none;
}
@media (min-width: 760px) {
  /* La cifra a la izquierda y el texto al lado: apilado deja un hueco vertical
     enorme entre el número y el párrafo. El `auto` de la primera columna es
     para que sirva igual con «0» que con «404». */
  .vacio {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--e7); align-items: start;
  }
  .vacio__marca { grid-row: 1 / span 3; }
}

/* --------------------------------------------------------------------------
   16a ter. BÚSQUEDAS LABORALES

   Una fila por aviso, no una tarjeta. Quien busca trabajo escanea una lista
   —área, lugar, jornada— y abre una; una grilla de tarjetas con foto obliga a
   leer todo dos veces. Es la misma lógica de la tabla de variantes: cuando el
   contenido es comparable, la lista gana.
   -------------------------------------------------------------------------- */

.puestos { border-top: 2px solid var(--linea-fuerte); }
.puesto {
  display: grid; gap: var(--e2) var(--e5); align-items: baseline;
  padding: var(--e5) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: inherit;
  transition: background var(--transicion);
}
@media (min-width: 760px) {
  .puesto {
    grid-template-columns: minmax(0, 1fr) 9rem 8rem 2rem;
    padding-inline: var(--e4); margin-inline: calc(var(--e4) * -1);
  }
}
.puesto:hover { background: var(--fondo-alt); }
.puesto:hover .puesto__titulo { color: var(--acento); }
.puesto__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 1.125rem; letter-spacing: -.015em; }
.puesto__area {
  display: block; font-family: var(--f-titulo); font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-tinta); margin-bottom: var(--e2);
}
.puesto__dato { font-size: var(--t-chico); color: var(--texto-suave); }
/* La flecha se dibuja con ::after y no con un carácter en el marcado: un «→»
   suelto se lo lee el lector de pantalla como «flecha hacia la derecha». */
.puesto__ir { display: none; }
@media (min-width: 760px) {
  .puesto__ir { display: block; text-align: right; color: var(--gris-40); transition: transform var(--transicion), color var(--transicion); }
  .puesto__ir::after { content: "→"; }
  .puesto:hover .puesto__ir { color: var(--acento); transform: translateX(4px); }
}

/* La señal de vigencia (pedido del cliente, 14/8/2026): un punto verde que
   late junto a la palabra «abierta». Va en cada fila del listado, en la
   cabecera del aviso y en el recuadro que confirma a qué búsqueda se está
   postulando: tres vistas, una sola marca. Es la única animación en bucle del
   sitio y se lo gana porque su mensaje es literalmente «esto pasa ahora»; con
   movimiento reducido queda el punto fijo, que dice lo mismo sin latir. El
   verde es el del punto de «En línea» del chat, no un verde nuevo. */
.vigente {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #2E7A39;
}
.vigente::before {
  content: ""; flex: none; width: .5rem; height: .5rem;
  border-radius: 50%; background: #3FA34D;
}
@media (prefers-reduced-motion: no-preference) {
  .vigente::before { animation: latido 1.8s ease-out infinite; }
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(63, 163, 77, .45); }
  60%  { box-shadow: 0 0 0 .4rem rgba(63, 163, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 163, 77, 0); }
}
/* En la fila, la señal cierra la primera celda en su propia línea; en la
   cabecera del aviso va entre el título y la entradilla, y el margen inferior
   de `p` ya la separa. */
.puesto .vigente { display: flex; margin-top: var(--e2); }
.cabecera-pagina .vigente { display: flex; }

/* El recuadro que confirma a qué búsqueda se está postulando al llegar desde
   un aviso. Hereda el cuerpo de `.aviso` pero cambia el filete rojo por el
   verde de vigencia: el rojo diría «error» justo cuando todo va bien. */
.aviso--postulacion { display: grid; gap: var(--e2); justify-items: start; border-left-color: #3FA34D; color: var(--texto); }
.aviso--postulacion p { margin: 0; }

/* --------------------------------------------------------------------------
   16a quater. RESULTADOS DE BÚSQUEDA

   Dos bloques en una página: los productos que coinciden —con la misma tarjeta
   del catálogo, no una versión reducida— y las páginas del sitio que coinciden.
   El orden no es negociable: quien busca en una web de catálogo busca un
   producto nueve de cada diez veces, y las páginas institucionales van después.

   El resultado de contenido es una fila y no una tarjeta, por lo mismo que las
   búsquedas laborales: cuando lo que hay que hacer es escanear y elegir uno,
   una lista se lee de arriba abajo y una grilla obliga a saltar en zigzag.
   -------------------------------------------------------------------------- */

.resultados-bloque + .resultados-bloque { margin-top: var(--e8); }
.resultados-bloque > h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  margin-bottom: var(--e5);
}
/* La cuenta al lado del título, en gris y en cifra chica: es un dato de
   servicio, no parte del encabezado. */
.resultados-bloque__cuenta {
  font-family: var(--f-texto); font-size: var(--t-chico);
  font-weight: 400; color: var(--texto-suave); letter-spacing: 0;
}

.hallazgos { border-top: 2px solid var(--linea-fuerte); }
.hallazgo {
  display: grid; gap: var(--e2);
  padding: var(--e5) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: inherit;
  transition: background var(--transicion);
}
@media (min-width: 760px) {
  .hallazgo {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--e6); align-items: baseline;
    padding-inline: var(--e4); margin-inline: calc(var(--e4) * -1);
  }
  .hallazgo__seccion { grid-row: 1 / span 3; }
}
.hallazgo:hover { background: var(--fondo-alt); }
.hallazgo:hover .hallazgo__titulo { color: var(--acento); }
.hallazgo__seccion {
  font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acento-tinta);
}
.hallazgo__titulo {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.25;
}
/* Dos clases, no una: son <p> dentro de un bloque que ya tiene reglas de
   párrafo más arriba en la hoja, y con una sola clase pierden. Es el mismo
   choque que dejó la cifra de `.vacio` en 15 px. */
.hallazgo .hallazgo__bajada { font-size: var(--t-chico); color: var(--texto-suave); max-width: 68ch; margin: 0; }
.hallazgo .hallazgo__contexto {
  font-size: var(--t-chico); color: var(--texto-suave); margin: 0;
  padding-left: var(--e4); border-left: 2px solid var(--linea-fuerte);
}
.hallazgo mark { background: rgba(228, 26, 26, .16); color: inherit; padding: 0 1px; }

/* --------------------------------------------------------------------------
   16b. LANDINGS DE MARCA Y DESCARGAS

   Una sola familia de componentes para las tres marcas. Lo que cambia entre
   Gemplast, Bosco y G Packaging es el valor de las variables de rol vía
   [data-marca], no el marcado ni las reglas: por eso Bosco puede tener su
   verde y su tipografía sin que exista una hoja de estilos «de Bosco».
   -------------------------------------------------------------------------- */

.destacado { font-size: 1.25rem; line-height: 1.5; color: var(--texto); }
.prosa .destacado + p { margin-top: var(--e5); }

/* Tapa de marca: media a un lado, discurso al otro. A diferencia de .tapa el
   texto no va sobre la foto — los logos de marca necesitan fondo limpio. */
.marca-tapa { display: grid; border-bottom: 1px solid var(--linea); }
@media (min-width: 900px) { .marca-tapa { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.marca-tapa__media { position: relative; min-height: 300px; background: var(--crema); }
.marca-tapa__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marca-tapa__texto {
  display: flex; flex-direction: column; justify-content: center; gap: var(--e4);
  background: var(--fondo-alt); padding: var(--e9) var(--e7);
}
@media (max-width: 899px) { .marca-tapa__texto { padding: var(--e7) var(--canal); } }
.marca-tapa__texto h1 { font-size: clamp(2.1rem, 4.5vw, 3.5rem); max-width: 16ch; }
.marca-tapa__texto > p { font-size: 1.125rem; color: var(--texto-suave); max-width: 46ch; }
/* Acá se deformaban los logotipos oficiales: .marca-tapa__texto es un flex en
   columna, el valor inicial de align-items es `stretch`, y un <img> con
   width:auto y el alto clavado se estiraba al ancho entero de la columna. El
   alto óptico lo pone `--alto-logo` en la plantilla y del estiramiento se
   ocupa la regla img[data-logo]; lo único que hace falta pisar es el
   align-self:center de esa regla, que en un flex en columna centraría el logo
   horizontalmente en vez de alinearlo al margen. */
.marca-tapa__logo[data-logo] { align-self: start; margin-bottom: var(--e2); }
.marca-tapa .acciones { margin-top: var(--e3); }

.marca-tapa--oscura { --texto: var(--crema); --texto-suave: var(--gris-40); --linea: #3A3A38; --acento-tinta: var(--crema); }
.marca-tapa--oscura .marca-tapa__texto { background: var(--carbon); color: var(--crema); }
.marca-tapa--oscura .miga a, .marca-tapa--oscura .miga li { color: var(--gris-40); }

/* Logo sobre .banner-categoria, que sí lleva foto al fondo. El alto va por
   `--alto-logo` desde la plantilla —2.8rem, el mismo en las tres landings— y
   acá sólo queda la alineación. El margen de abajo alcanza porque el archivo
   ya no trae aire propio: se recortó a la tinta el 13/8/2026. */
.marca-hero__logo[data-logo] { align-self: start; margin-bottom: var(--e3); }

.marca-intro { display: grid; gap: var(--e6); }
@media (min-width: 900px) { .marca-intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--e8); align-items: start; } }
.marca-cifras { border-top: 2px solid var(--linea-fuerte); }
.marca-cifras li { display: flex; align-items: baseline; gap: var(--e4); justify-content: space-between; padding-block: var(--e4); border-bottom: 1px solid var(--linea); }
.marca-cifras b { font-family: var(--f-titulo); font-weight: 700; font-size: 2.25rem; letter-spacing: -.04em; line-height: 1; }
/* Las cifras van en el acento de la marca que se está mirando: verde en Bosco,
   rojo en G Packaging. Es el único número grande de la página y con él la
   identidad se lee sin tener que pintar bloques enteros de color. Fuera de una
   página de marca no hay `data-marca` y el número queda en tinta, como estaba. */
[data-marca] .marca-cifras b { color: var(--acento); }
.marca-cifras span { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }

.indice__grupo { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); margin-top: var(--e7); margin-bottom: var(--e3); }
.indice + .indice__grupo { margin-top: var(--e8); }

/* --------------------------------------------------------------------------
   VITRINA DE CATEGORÍAS

   Reemplaza lo que había en la landing de Gemplast: seis tarjetas idénticas
   —foto arriba, dos renglones abajo— más una fila suelta con las tres
   categorías que no tenían foto. Eso es literalmente la retícula de una web
   de 2014, y además dejaba tres categorías reales en segunda división.

   Acá entran las nueve en un mismo mosaico y lo que ordena la lectura es la
   superficie de cada módulo, no el orden alfabético. El ancho lo declara la
   plantilla en `--modulo` (columnas sobre doce) porque en el theme sale del
   peso del término, no de una clase escrita a mano.
   -------------------------------------------------------------------------- */

.vitrina { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e2); }

.vitrina__pieza {
  position: relative; overflow: hidden; min-height: 11rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--carbon); color: var(--crema); text-decoration: none;
}
.vitrina__foto { position: absolute; inset: 0; }
/* Mismo `--foco` que las tejas del catálogo: son las mismas fotos y el encuadre
   ya está calibrado una vez, en gemplast_categoria_arte(). */
.vitrina__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); transition: transform .6s ease; }
.vitrina__pieza:hover .vitrina__foto img,
.vitrina__pieza:focus-visible .vitrina__foto img { transform: scale(1.03); }

/* El velo arranca abajo y se disuelve antes de la mitad: la foto tiene que
   seguir siendo la foto, no un fondo oscurecido con un título encima. */
.vitrina__velo {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(32,32,31,.92) 0%, rgba(32,32,31,.55) 28%, rgba(32,32,31,0) 66%);
}
.vitrina__cuerpo { position: relative; z-index: 2; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e1); }
.vitrina__n { font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: 600; letter-spacing: .16em; color: var(--beige); }
.vitrina__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.02; }
.vitrina__pieza--alta .vitrina__nombre { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.vitrina__cuenta { font-size: var(--t-chico); color: var(--beige); }

/* Filete rojo que crece de izquierda a derecha. Es el mismo sistema de
   marcado del resto del sitio, no un efecto: por eso es un filete y no una
   sombra, un borde completo ni un cambio de fondo. */
.vitrina__pieza::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 3;
  height: 3px; width: 0; background: var(--acento); transition: width .35s ease;
}
.vitrina__pieza:hover::after, .vitrina__pieza:focus-visible::after { width: 100%; }

/* Tres de las nueve categorías todavía no tienen foto de ambiente propia
   (docs/11). En vez de dejarlas afuera del mosaico van con el packshot real
   del producto sobre campo crema: es un módulo deliberadamente distinto —no
   un hueco con textura ni un cartel de «Pendiente»— y el día que llegue la
   foto ambientada se convierte en un módulo normal sin tocar el CSS. */
/* Campo blanco y no crema: la sección ya es crema, y el módulo pintado del
   mismo color desaparecía —el producto quedaba flotando en el fondo, que es
   exactamente lo que no puede pasar. El filete lo termina de recortar. */
.vitrina__pieza--packshot { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); }
.vitrina__pieza--packshot .vitrina__foto img { object-fit: contain; padding: var(--e6) var(--e6) 7rem; }
.vitrina__pieza--packshot .vitrina__velo { background: linear-gradient(0deg, var(--fondo) 22%, rgba(255,255,255,0) 60%); }
.vitrina__pieza--packshot .vitrina__n,
.vitrina__pieza--packshot .vitrina__cuenta { color: var(--texto-suave); }

.vitrina__pieza--ancha { grid-column: span 2; }

/* En dos columnas de teléfono cada módulo mide 167 px y «Organizadores» a
   1.3rem mide 175: la palabra se salía de la caja. Se achica el cuerpo y se
   baja medio punto el nombre, que a este ancho igual sigue siendo el elemento
   más pesado del módulo. Va con `overflow-wrap` por las dudas: la lista de
   categorías la va a escribir el cliente y puede aparecer una más larga. */
@media (max-width: 559px) {
  .vitrina__cuerpo { padding: var(--e4); }
  .vitrina__nombre { font-size: 1.125rem; }
  /* Un packshot contenido en un módulo de 176 px con 88 de reserva para el
     rótulo deja al producto en 70 px. Acá el módulo crece en vez de encoger
     la foto. */
  .vitrina__pieza--packshot { min-height: 14rem; }
  .vitrina__pieza--packshot .vitrina__foto img { padding: var(--e4) var(--e4) 5.25rem; }
}
.vitrina__nombre { overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .vitrina { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 17rem; gap: var(--e3); }
  /* Ancho y alto del módulo salen de la plantilla, igual que en .muestrario:
     el mosaico se recompone sin tocar el CSS cuando cambie la taxonomía. */
  .vitrina__pieza { grid-column: span var(--modulo, 4); grid-row: span var(--filas, 1); }
}

/* --------------------------------------------------------------------------
   MUESTRARIO

   Banda de imágenes de referencia. No es la galería de una ficha ni el
   mosaico de categorías: son ambientes del catálogo impreso que muestran la
   marca puesta en un espacio real, con el pie que declara de qué sección del
   catálogo sale cada uno. Mismo mecanismo de ancho que la vitrina.
   -------------------------------------------------------------------------- */

.muestrario { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.muestrario__pieza { margin: 0; display: flex; flex-direction: column; }
.muestrario__pieza .figura { aspect-ratio: 4 / 3; background: var(--fondo-alt); }
.muestrario__pieza--alta { grid-column: span 2; }
.muestrario__pieza--alta .figura { aspect-ratio: 1; }
/* Los recortes sobre fondo transparente necesitan aire propio: si se pegan al
   borde del campo parecen mal exportados. */
.muestrario .figura--contener img { padding: var(--e5); }
/* Y campo blanco, no `--fondo-alt`: cuando la sección entera ya es `--fondo-alt`
   el recorte queda sobre su mismo color y la pieza desaparece. */
.muestrario .figura--contener { background: var(--fondo); }

.muestrario__pie {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea);
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave);
}
.muestrario__pie b { font-family: var(--f-titulo); font-weight: 600; letter-spacing: .08em; color: var(--texto); }

@media (min-width: 900px) {
  .muestrario { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 19rem; gap: var(--e4); }
  .muestrario__pieza { grid-column: span var(--modulo, 6); grid-row: span var(--filas, 1); }
  /* A alto fijo por fila la foto manda sobre la proporción del archivo: el pie
     ocupa lo suyo y la figura se come el resto. */
  .muestrario__pieza .figura { aspect-ratio: auto; flex: 1; min-height: 0; }
}

/* Fichas de descarga. La portada es una imagen real; el peso del archivo se
   declara siempre, porque un PDF de 45 MB en el celular es una mala noticia
   que conviene dar antes y no después. */
.descargas { display: grid; gap: var(--e6); }
.descarga { display: grid; gap: 0; border: 1px solid var(--linea); background: var(--fondo); }
@media (min-width: 760px) { .descarga { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.descarga__portada { position: relative; min-height: 220px; background: var(--crema); }
.descarga__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* La tapa real del PDF, no una foto que la represente. Va contenida y con
   filete porque es un documento: recortarla a sangre le comería el logotipo,
   y además las dos tapas tienen orientaciones distintas —A4 vertical la de
   Gemplast, apaisada la de Bosco— y así las dos entran sin deformarse. */
.descarga__portada--tapa { display: grid; place-items: center; padding: var(--e6); min-height: 20rem; }
/* El tope va en alto y no en ancho: así la tapa vertical y la apaisada ocupan
   la misma caja y las dos fichas miden lo mismo. */
.descarga__portada--tapa img {
  position: static; inset: auto; width: auto; height: auto;
  max-width: 100%; max-height: 16rem; object-fit: contain;
  border: 1px solid var(--linea);
}
.descarga__cuerpo { padding: var(--e6); display: flex; flex-direction: column; align-items: start; gap: var(--e4); }
.descarga__cuerpo h2 { font-size: 1.5rem; }
/* El encabezado es el logotipo. `line-height: 0` evita que la caja de línea
   del h2 sume un espacio fantasma debajo de la imagen, que es lo que hace que
   estas fichas se vean desalineadas entre sí. */
.descarga__marca { line-height: 0; }
.descarga__cuerpo > p { color: var(--texto-suave); max-width: 58ch; }
.descarga__meta { display: flex; flex-wrap: wrap; gap: var(--e6); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding-block: var(--e4); width: 100%; }
.descarga__meta b { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: 1.0625rem; }
.descarga__meta span { display: block; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); margin-top: var(--e1); }
.descarga__aviso { font-size: var(--t-micro); color: var(--texto-suave); }

/* Acuse de descarga. Va arriba de las tres fichas, no abajo: quien vuelve de
   completar el formulario vuelve a buscar una cosa sola y tiene que verla sin
   desplazarse. El filete rojo lo separa del listado sin pintarle un fondo de
   color, que es lo que haría una notificación de aplicación web. */
.descarga-lista {
  display: grid; gap: var(--e5); align-items: center;
  border: 1px solid var(--linea); border-left: 3px solid var(--rojo);
  background: var(--fondo); padding: var(--e6); margin-bottom: var(--e6);
}
@media (min-width: 760px) { .descarga-lista { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e7); } }
.descarga-lista h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-top: var(--e2); }
.descarga-lista p { margin-top: var(--e2); max-width: 52ch; }

/* --------------------------------------------------------------------------
   Modal de pedido de catálogo
   Es un <dialog> nativo, y por eso hay dos estados que pintar: el modal de
   verdad —`showModal()`, con ::backdrop— y el que abre el servidor con el
   atributo `open` cuando no hay JavaScript, que el navegador dibuja como un
   bloque más del documento. Se los iguala poniendo el color de fondo sobre el
   propio diálogo en vez de sobre ::backdrop: así el que no tiene guion ve lo
   mismo que el que lo tiene, y no una versión pobre.
   -------------------------------------------------------------------------- */

.modal { display: none; }
.modal[open] {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 80;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: var(--e4); border: 0;
  background: rgba(32, 32, 31, .55);
  overflow-y: auto; overscroll-behavior: contain;
}
.modal::backdrop { background: transparent; }
.modal__caja {
  position: relative; width: 100%; max-width: 44rem;
  background: var(--fondo); border: 1px solid var(--linea-fuerte);
  padding: var(--e7) var(--e6); margin-block: auto;
}
@media (min-width: 700px) { .modal__caja { padding: var(--e8) var(--e7); } }
.modal__bajada { color: var(--texto-suave); font-size: var(--t-chico); margin-top: var(--e4); max-width: 56ch; }
.modal__caja > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: var(--e2); padding-right: var(--e7); }

/* El cierre vive dentro de un <form method="get">: sin JavaScript recarga la
   página limpia, con JavaScript el guion le cambia el tipo y cierra en el
   lugar. En los dos casos es el mismo botón en el mismo sitio. */
.modal__cerrar-form { position: absolute; top: var(--e4); right: var(--e4); margin: 0; }
.modal__cerrar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: none; border: 1px solid var(--linea); color: var(--texto-suave);
  cursor: pointer; padding: 0;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.modal__cerrar svg { width: 1rem; height: 1rem; }
.modal__cerrar:hover { border-color: var(--carbon); background: var(--carbon); color: #fff; }
.modal__cerrar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Con el modal abierto el fondo no se desplaza. La clase la pone el guion; sin
   guion el diálogo ocupa la pantalla igual y el desplazamiento de atrás no
   molesta porque no hay nada superpuesto que se quede quieto. */
.modal-abierto { overflow: hidden; }

/* --------------------------------------------------------------------------
   17. TIRA, CIERRE Y PIE
   -------------------------------------------------------------------------- */

.tira { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 760px) { .tira { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.tira > * { background: var(--fondo); padding: var(--e5); }

/* El `auto-fit` reparte por ancho disponible, no por cantidad de celdas: con
   seis ítems a 1440 px entran cinco en la primera fila y la sexta queda sola,
   con medio renglón vacío al lado. Cuando la cantidad es múltiplo de tres —y
   la tira es un índice cerrado, no una lista que crece— se fija la grilla. */
@media (min-width: 760px)  { .tira--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tira--3 { grid-template-columns: repeat(3, 1fr); } }

/* Cuatro celdas: dos y dos hasta que entren las cuatro. Con `auto-fit` a
   760 px entrarían tres y la cuarta quedaría sola con dos huecos al lado. */
@media (min-width: 760px)  { .tira--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tira--4 { grid-template-columns: repeat(4, 1fr); } }

.cierre { background: var(--carbon); color: var(--crema); }
.cierre .contenedor { padding-block: var(--e9); display: grid; gap: var(--e6); }
@media (min-width: 900px) { .cierre .contenedor { grid-template-columns: 1.3fr auto; align-items: center; gap: var(--e8); } }
.cierre h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); }
.cierre p { color: var(--gris-40); margin-top: var(--e4); }


.pie { background: var(--carbon); color: var(--gris-40); font-size: var(--t-chico); padding-top: var(--e8); border-top: 4px solid var(--rojo); }
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie h3 { font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--e4); }
.pie__cols { display: grid; gap: var(--e7); padding-bottom: var(--e8); }
@media (min-width: 700px)  { .pie__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pie__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie li + li { margin-top: var(--e2); }

/* Cada columna del pie es un `pie__grupo`: título-botón y lista. En escritorio
   el botón no hace nada y no muestra flecha; en el teléfono (pedido del
   14/8/2026: cuatro columnas apiladas hacían un pie de varias pantallas) el JS
   pliega las listas y el botón las abre. Sin JavaScript quedan abiertas, que
   es el estado seguro. El corte es el mismo de `.pie__cols`: mientras el pie
   es una sola columna, se pliega; en cuanto hay dos, ya no hace falta. */
.pie__grupo + .pie__grupo { margin-top: var(--e6); }
/* …pero nunca entre columnas de la grilla: ahí ya separa el `gap`, y el
   margen sumado bajaba el título de Institucional respecto de sus vecinos
   (visto en la demo del 14/8/2026). El selector lleva `.pie__cols >` para
   ganar por especificidad también sobre la regla de pantalla angosta. */
.pie__cols > .pie__grupo + .pie__grupo { margin-top: 0; }
.pie__plegar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  width: 100%; padding: 0; background: none; border: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; cursor: default;
}
.pie__plegar::after {
  content: ""; flex: none; width: .45rem; height: .45rem; margin-top: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transicion);
  display: none;
}
.pie__plegar[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: .2rem; }
/* La caja que el JS esconde con `hidden`. El bloque propio evita que el
   plegado dependa de la estructura interna del menú: WordPress puede meter
   sus propias clases en el `ul` cuando hay un menú asignado. */
.pie__lista { min-width: 0; }
@media (max-width: 699px) {
  .pie__plegar { cursor: pointer; min-height: 24px; }
  .pie__plegar::after { display: block; }
  .pie__grupo + .pie__grupo { margin-top: var(--e5); }
  /* Apilado, el hueco de la grilla (--e7) separaba las columnas pero los dos
     grupos que comparten columna se separaban con --e5: los títulos quedaban
     a distancias desparejas (visto en la demo del 14/8/2026). Un solo valor
     para todo el pie angosto. */
  .pie__cols { gap: var(--e5); }
}

.pie__identidad { max-width: 34ch; }
/* Con el selector de atributo porque `gemplast_logo()` le pone `data-logo` a
   todo logo, y `img[data-logo]` tiene más peso que `.pie__logo` a secas: sin
   el `[data-logo]` de acá el alto óptico genérico gana y el logo del pie
   termina de 16 px.
   A lo ancho de la columna y no a un alto fijo: en el prototipo el img del
   pie no lleva `data-logo`, así que ningún alto óptico le pega y el logo
   llena `.pie__identidad` (34ch). Ese es el tamaño que aprobó el cliente.
   Con alto fijo (1.5 → 2.2 → 3rem el 14/8/2026) el theme siempre quedaba
   más chico que el prototipo — visto en staging ese mismo día. */
.pie__logo[data-logo] { width: 100%; height: auto; display: block; }
.pie__lema { font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; color: #fff; margin-top: var(--e3); }
.pie__datos { font-style: normal; line-height: 1.6; margin-top: var(--e5); display: grid; gap: var(--e2); justify-items: start; }
.pie__datos strong { color: #fff; font-weight: 500; }
/* Cada dato de contacto con su ícono (pedido del 14/8/2026: el bloque era
   sólo texto y quedaba «muy editorial»). El selector compuesto no es capricho:
   tiene que ganarle al `.pie a { display: inline-block }` del blanco de toque
   de pantalla chica, que está más abajo y pisaría el flex. */
.pie__datos .pie__dato { display: flex; align-items: flex-start; gap: var(--e3); padding-block: 3px; }
.pie__dato svg {
  flex: none; width: 1rem; height: 1rem; margin-top: .22em; color: var(--rojo);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pie__redes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
/* Redes como botón circular con el glifo de la marca, no como texto con
   flecha. Mismo motivo de especificidad que `.pie__dato`. */
.pie__redes .pie__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 1px solid #3A3A38; border-radius: 50%; color: var(--crema);
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.pie__red svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.pie__redes .pie__red:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; text-decoration: none; }

/* Sellos: sólo los que existen y están respaldados. Los dos archivos tienen
   fondo transparente, así que sobre el carbón se leen como monedas y no como
   recortes cuadrados. La nota se va al extremo derecho para que las dos
   certificaciones queden juntas y se lean como un par. */
.pie__sellos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e7);
  border-top: 1px solid #3A3A38; padding-block: var(--e5);
}
.pie__sello { display: flex; align-items: center; gap: var(--e3); }
.pie__sellos img { width: 3.5rem; height: 3.5rem; object-fit: contain; flex: none; }
.pie__sello-nombre { font-family: var(--f-titulo); font-size: var(--t-chico); font-weight: 600; color: #fff; }
.pie__sello-dato { font-size: var(--t-micro); color: var(--gris-40); }
.pie__sellos-nota { margin-left: auto; font-size: var(--t-micro); color: var(--gris-40); }
.pie__sellos-nota a { color: var(--crema); }
@media (max-width: 900px) { .pie__sellos-nota { margin-left: 0; flex-basis: 100%; } }

.pie__legal { border-top: 1px solid #3A3A38; padding-block: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); justify-content: space-between; font-size: var(--t-micro); }

/* Blanco de toque en pantalla chica — WCAG 2.2, 2.5.8.
   El pie y la barra superior están en cuerpo chico y sus enlaces quedaban en
   22 px de alto. Se los convierte en caja para poder darles alto mínimo, sin
   tocar el interlineado del texto que los rodea. */
@media (max-width: 600px) {
  .pie a, .barra-superior a {
    display: inline-block; min-height: 24px; padding-block: 3px;
  }
  .pie li + li { margin-top: var(--e1); }
}

/* --------------------------------------------------------------------------
   18. REVELADO — animación deliberadamente mínima
   -------------------------------------------------------------------------- */

/* El estado inicial cuelga de `.js`, que escribe el propio navegador apenas
   parsea la cabecera. Si el JS no corre —bloqueado, con error, o cacheado a
   medias— la clase no aparece y todo se ve, en vez de quedar una página en
   blanco con el contenido en `opacity: 0` esperando un observador que no llegó. */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .revelar.visible { opacity: 1; transform: none; }
  /* Escalonado por posición en la fila: las grillas revelan sus piezas con un
     desfase corto que se corta a los cuatro elementos para que las filas de
     abajo no acumulen espera. Ciclo de 4 porque las grillas del sitio van de
     2 a 4 columnas. */
  .js .revelar:nth-child(4n+2) { transition-delay: .07s; }
  .js .revelar:nth-child(4n+3) { transition-delay: .14s; }
  .js .revelar:nth-child(4n+4) { transition-delay: .21s; }
}

/* Utilidades mínimas */
.flujo > * + * { margin-top: var(--e4); }
.texto-suave { color: var(--texto-suave); }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mt-6 { margin-top: var(--e6); }
.mt-7 { margin-top: var(--e7); }
.mt-8 { margin-top: var(--e8); }
.mb-4 { margin-bottom: var(--e4); }
.mb-5 { margin-bottom: var(--e5); }
.mb-6 { margin-bottom: var(--e6); }