/* ==========================================================================
   SUMAQ BATH AND HOME · estilos.css

   REGLA: acá no se escribe ni un hex, ni un tamaño de fuente, ni un
   espaciado suelto. Todo sale de tokens.css. Si hace falta un valor que no
   existe, se agrega allá con su comentario, no acá.

   La única excepción son los anchos de los @media: las custom properties de
   CSS no funcionan dentro de una media query, así que el 768 y el 1024 van
   escritos. Son los mismos cortes que usa tokens.css §9.

   Orden del archivo:
     1. Base y tipografía      6. Footer
     2. Retícula               7. Botón flotante de WhatsApp
     3. Enlaces y foco         8. Tarjeta de producto
     4. Botones                9. Filtros y chips
     5. Header                10. Tabla de especificaciones
                              11. Avisos y formularios
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BASE Y TIPOGRAFÍA
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* El header se pega arriba, asi que un ancla que caiga en 0 queda tapada.
     Se reserva el alto COMPLETO —no el compacto— porque al llegar al destino
     el header puede estar en cualquiera de los dos estados y de los dos lados
     conviene que sobre, no que falte. */
  scroll-padding-top: calc(var(--header-alto) + var(--espacio-3));
}

body {
  margin: 0;
  background: var(--fondo-pagina);
  color: var(--texto-cuerpo);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo-tam);
  font-weight: var(--peso-regular);
  line-height: var(--alto-linea-cuerpo);
  /* Todo alineado a la izquierda, nunca justificado. Regla 1 de composición */
  text-align: left;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* El atributo `hidden` tiene que ganar siempre.

   `hidden` no es más que `display: none` en la hoja del navegador, así que
   CUALQUIER regla de autor que ponga `display` lo pisa sin avisar. Pasó con
   el bot de preguntas: su botón sale con `hidden` desde el build para que no
   aparezca sin JavaScript, y `.faq-boton { display: inline-flex }` lo
   mostraba igual. Con el motor apagado se veía el botón y se asomaba el
   panel, que es justo lo que ese `hidden` existía para evitar.

   Es de los pocos `!important` justificados: no hay ningún caso en este
   sitio donde algo con `hidden` deba verse. Todo lo que se oculta así se
   muestra quitando el atributo, nunca desde el CSS. */
[hidden] {
  display: none !important;
}

h1, h2, h3 {
  font-family: var(--fuente-titular);
  color: var(--texto-titular);
  letter-spacing: var(--tracking-titular);
  margin: 0;
}

h1 {
  font-size: var(--texto-portada-fluido);
  font-weight: var(--peso-regular);
  line-height: var(--alto-linea-titular);
}

h2 {
  font-size: var(--texto-titular-fluido);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-titular);
}

h3 {
  font-size: var(--texto-subtitulo);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-subtitulo);
}

p {
  margin: 0;
  max-width: var(--medida-texto);
}

/* La bajada de un bloque: un escalón arriba del cuerpo */
.bajada {
  font-size: var(--texto-bajada);
}

.chico {
  font-size: var(--texto-chico);
}

/* Etiqueta en mayúsculas. Mayúsculas SOLO acá y en el wordmark (regla 3) */
.etiqueta {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  line-height: var(--alto-linea-compacto);
  color: var(--texto-secundario);
}

/* Códigos de producto y cualquier cifra: tabulares (regla 4 de tipografía) */
.cifra,
.codigo {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--cifras-tabulares);
}

/* Se lee con lector de pantalla, no se ve */
.solo-lectores {
  position: absolute;
  width: var(--borde-grosor);
  height: var(--borde-grosor);
  padding: 0;
  margin: calc(var(--borde-grosor) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: aparece solo con teclado */
.saltar {
  position: absolute;
  left: var(--espacio-4);
  top: calc(var(--espacio-4) * -4);
  z-index: var(--capa-modal);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-superficie);
  color: var(--texto-titular);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-boton);
  text-decoration: none;
  transition: top var(--transicion-rapida);
}

.saltar:focus {
  top: var(--espacio-4);
}


/* --------------------------------------------------------------------------
   2. RETÍCULA
   Ancho máximo 1200, canal 24, márgenes 24 en desktop y 16 en móvil.
   -------------------------------------------------------------------------- */

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

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

.seccion--franja {
  background: var(--fondo-franja);
}

.seccion--ancla {
  background: var(--fondo-ancla);
  color: var(--texto-sobre-navy);
}

.seccion--ancla h1,
.seccion--ancla h2,
.seccion--ancla h3 {
  color: var(--texto-sobre-navy);
}

/* Aire entre los bloques de una sección. Va sobre los hijos del contenedor,
   que es donde vive el contenido de verdad: una regla sobre los hijos de
   .seccion no alcanzaría a nada, porque .seccion solo tiene el contenedor. */
.seccion > .contenedor > * + * {
  margin-top: var(--espacio-5);
}

/* Después de un titular de sección respira un escalón más */
.seccion > .contenedor > h2 + * {
  margin-top: var(--espacio-6);
}


/* --------------------------------------------------------------------------
   3. ENLACES Y FOCO
   El foco se ve siempre. Navy sobre claro, mostaza sobre navy.
   -------------------------------------------------------------------------- */

a {
  color: var(--enlace);
  text-decoration-thickness: var(--borde-grosor);
  text-underline-offset: var(--espacio-1);
}

a:hover {
  color: var(--enlace-hover);
}

:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: var(--foco-offset);
}

.seccion--ancla :focus-visible,
.pie :focus-visible,
.fab:focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}


/* --------------------------------------------------------------------------
   4. BOTONES
   Un solo primario por pantalla y por tarjeta.
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--boton-alto);
  padding-inline: var(--boton-padding-x);
  border: 0;
  border-radius: var(--radio-boton);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo-tam);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-compacto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}

.boton--primario {
  background: var(--accion-fondo);
  color: var(--accion-texto);
}

.boton--primario:hover {
  background: var(--accion-fondo-hover);
  color: var(--accion-texto);
}

.boton--secundario {
  background: transparent;
  color: var(--secundario-texto);
  border: var(--boton-borde-secundario) solid var(--secundario-borde);
}

.boton--secundario:hover {
  background: var(--secundario-fondo-hover);
  color: var(--secundario-texto);
}

/* El boton de WhatsApp de la lista. Mismo tamano y mismo radio que el
   terracota: los dos caminos valen lo mismo. */
.boton--whatsapp {
  background: var(--boton-whatsapp-fondo);
  color: var(--boton-whatsapp-texto);
  border: var(--borde-grosor) solid transparent;
}

.boton--whatsapp:hover {
  background: var(--boton-whatsapp-fondo-hover);
  color: var(--boton-whatsapp-texto);
}

/* Los dos, uno al lado del otro y del mismo ancho. En celular, uno debajo
   del otro: a 390 px no entran dos botones de 48 px de alto con estos textos
   sin que uno se parta en dos lineas. */
.salidas-cotizacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3);
  margin-top: var(--espacio-5);
}

.salidas-cotizacion > .boton {
  width: 100%;
}

/* Con la lista vacia los dos quedan apagados. El <a> no entiende `disabled`,
   asi que lleva aria-disabled y el CSS le quita el puntero: el estado se ve
   igual en los dos. */
.salidas-cotizacion > .boton[disabled],
.salidas-cotizacion > .boton[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 767px) {
  .salidas-cotizacion {
    grid-template-columns: 1fr;
  }
}

/* Sobre navy el secundario invierte: borde y texto en hueso */
.seccion--ancla .boton--secundario,
.pie .boton--secundario {
  color: var(--texto-sobre-navy);
  border-color: var(--borde-sobre-navy);
}

.boton--chico {
  min-height: var(--boton-alto-chico);
  font-size: var(--texto-chico);
}

.boton--ancho {
  width: 100%;
}

.boton[disabled],
.boton[aria-disabled="true"] {
  background: var(--deshabilitado-fondo);
  color: var(--deshabilitado-texto);
  border-color: transparent;
  cursor: default;
}

/* Fila de botones: el primario primero, el secundario al lado */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}


/* --------------------------------------------------------------------------
   5. HEADER
   Pegado arriba. La página activa se marca con el filete mostaza.
   -------------------------------------------------------------------------- */

/* `.cabecera` es la caja que se pega arriba y la que ocupa lugar en el flujo.
   Su alto NO CAMBIA NUNCA: ni al compactar, ni en ningun estado. Por eso no
   lleva fondo ni borde —los lleva `.cabecera__barra`, que es la unica que se
   mueve— y por eso no recibe eventos: cuando el header esta compacto, los
   50 px de abajo de esta caja son aire por el que pasa la pagina, y tienen
   que poder clickearse.

   Historia, para que no se vuelva a intentar: hasta el 06-10-2026 esta misma
   caja encogia de 126 a 76 px al compactar. El contenido de la pagina subia
   50 px, el navegador corregia el scroll para que no saltara, esa correccion
   cruzaba el umbral al reves, el header se expandia, el contenido bajaba otra
   vez... y asi. Con la ruedita se veia como un latido; bajando despacio
   trababa la pagina entera. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--capa-header);
  min-height: var(--header-alto);
  pointer-events: none;
}

.cabecera__barra {
  background: var(--header-fondo);
  border-bottom: var(--borde-grosor) solid var(--header-borde);
  pointer-events: auto;
}

/* La fila mide siempre lo mismo que el header expandido —126 px— y cuando el
   header se compacta baja 25 px con un transform. Su CAJA, entonces, se pasa
   25 px por debajo del borde visible de la barra, y ahi no tiene que capturar
   nada: esos pixeles son aire por el que pasa la pagina. Los eventos los
   reciben el logo, el buscador, la navegacion y la hamburguesa, que estan
   todos dentro de los 76 px visibles. Mismo criterio que en el hero. */
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--header-alto);
  pointer-events: none;
}

.cabecera__fila > * {
  pointer-events: auto;
}

.cabecera__logo {
  display: flex;
  align-items: center;
}

.cabecera__logo img {
  height: var(--header-logo-alto);
  width: auto;
}

/* El header se compacta al bajar. La clase la pone sitio.js; sin JavaScript
   el header se queda grande, que es el estado correcto y no un error.

   TODO el cambio son tres `transform`, y ninguno toca el alto, el padding ni
   el margen de nada:

     · la barra visible sube 50 px, asi que su borde de abajo queda en 76;
     · la fila de adentro baja 25, la mitad, asi que el logo y el buscador
       quedan centrados en esos 76 y no pegados al techo;
     · el logo se achica con scale(), no con height.

   Un transform no reacomoda la pagina: no hay layout, no hay layout shift y
   no hay nada que el navegador tenga que corregir moviendo el scroll. */
@media (min-width: 768px) {
  .cabecera__barra,
  .cabecera__fila,
  .cabecera__logo img {
    transition: transform var(--transicion);
  }

  .cabecera--compacta .cabecera__barra {
    transform: translateY(calc(var(--header-alto-compacto)
                               - var(--header-alto)));
  }

  .cabecera--compacta .cabecera__fila {
    transform: translateY(calc((var(--header-alto)
                                - var(--header-alto-compacto)) / 2));
  }

  /* Desde la izquierda, para que el logo no se despegue del margen al
     achicarse; vertical al centro, que es donde esta el eje de la fila. */
  .cabecera__logo img {
    transform-origin: left center;
  }

  .cabecera--compacta .cabecera__logo img {
    transform: scale(var(--header-logo-escala-compacta));
  }
}

/* En celular no se compacta: el logo ya esta en 62 px y el header mide 72,
   asi que no hay nada que ganar y si un salto que marea. Las reglas de arriba
   estan dentro de min-width: 768px, asi que la clase ahi no hace nada. */

@media (prefers-reduced-motion: reduce) {
  .cabecera__barra,
  .cabecera__fila,
  .cabecera__logo img {
    transition: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
}

.nav__enlace {
  position: relative;
  color: var(--texto-cuerpo);
  text-decoration: none;
  padding-block: var(--espacio-2);
  font-weight: var(--peso-medio);
}

.nav__enlace:hover {
  color: var(--texto-cuerpo);
  text-decoration: underline;
}

/* El filete mostaza marca la página activa. No se marca con color de texto */
.nav__enlace[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--filete-grosor);
  background: var(--filete-mostaza);
}

/* El botón de cotización es el único primario del header */
.nav__cotizar {
  white-space: nowrap;
}

/* Hamburguesa: solo existe en móvil y solo cuando hay JavaScript */
.cabecera__menu {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--boton-alto-chico);
  min-width: var(--boton-alto-chico);
  padding: 0;
  background: transparent;
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-boton);
  color: var(--texto-cuerpo);
  cursor: pointer;
}

@media (max-width: 767px) {
  .cabecera__fila {
    min-height: var(--header-alto-movil);
  }

  /* Sin JavaScript la navegación se queda visible y envuelve: se puede usar.
     Con JavaScript aparece la hamburguesa y el panel se despliega. */
  .js .cabecera__menu {
    display: inline-flex;
  }

  .js .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--espacio-4);
    background: var(--header-fondo);
    border-bottom: var(--borde-grosor) solid var(--header-borde);
  }

  .js .nav[data-abierto="si"] {
    display: flex;
  }

  .js .nav > * {
    padding-block: var(--espacio-3);
  }
}


/* --------------------------------------------------------------------------
   6. FOOTER
   Fondo navy, cuatro bloques y la línea de cierre.
   -------------------------------------------------------------------------- */

.pie {
  background: var(--fondo-ancla);
  color: var(--texto-sobre-navy);
  /* Menos aire arriba que abajo: el llamado que viene justo encima ya trae
     su propio espacio, y entre los dos dejaban un vacío de casi 200 px.
     22-09-2026. */
  padding-block: var(--espacio-8) var(--seccion-padding-y);
}

.pie a {
  color: var(--texto-sobre-navy);
  text-decoration: none;
}

.pie a:hover {
  color: var(--texto-sobre-navy);
  text-decoration: underline;
}

.pie__bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--filtros-ancho), 1fr));
  gap: var(--espacio-7) var(--canal);
}

.pie__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-sobre-navy-sec);
  margin: 0 0 var(--espacio-4);
}

.pie__logo {
  height: var(--footer-logo-alto);
  width: auto;
  margin-bottom: var(--espacio-4);
}

.pie__slogan {
  font-family: var(--fuente-titular);
  font-size: var(--texto-bajada);
  color: var(--texto-sobre-navy);
}

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-3);
}

.pie__cierre {
  margin-top: var(--seccion-padding-y-movil);
  padding-top: var(--espacio-5);
  border-top: var(--borde-grosor) solid var(--borde-sobre-navy);
  font-size: var(--texto-chico);
  color: var(--texto-sobre-navy);
}

/* En celular los dos botones flotantes caen justo encima de esta linea y
   tapan parte del RUC. No es un boton, pero es el dato legal del pie y tiene
   que leerse entero: se le deja debajo el alto de los botones mas sus dos
   margenes. En escritorio no hace falta, porque la linea termina mucho antes
   del borde derecho. */
@media (max-width: 767px) {
  .pie__cierre {
    padding-bottom: calc(var(--fab-tamano) + var(--fab-margen) * 2);
  }
}


/* --------------------------------------------------------------------------
   7. BOTÓN FLOTANTE DE WHATSAPP
   Abajo a la derecha, en todas las páginas. El aria-label es obligatorio:
   el contraste que pasa es el del gráfico, no el del significado.
   -------------------------------------------------------------------------- */

.fab {
  position: fixed;
  right: var(--fab-margen);
  bottom: var(--fab-margen);
  z-index: var(--capa-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-tamano);
  height: var(--fab-tamano);
  border-radius: var(--radio-pildora);
  background: var(--fab-fondo);
  color: var(--fab-icono);
  transition: background-color var(--transicion);
}

.fab:hover {
  background: var(--fab-fondo-hover);
  color: var(--fab-icono);
}

.fab svg {
  width: var(--fab-icono-tamano);
  height: var(--fab-icono-tamano);
  fill: currentColor;
}


/* --------------------------------------------------------------------------
   8. TARJETA DE PRODUCTO
   Orden fijo de la Hoja: foto · marca · nombre · código · acción · ficha.
   Sin sombras: se separan con lino y aire.
   -------------------------------------------------------------------------- */

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tarjeta-min), 1fr));
  gap: var(--tarjeta-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--tarjeta-padding);
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-tarjeta);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
}

.tarjeta__foto {
  aspect-ratio: var(--tarjeta-imagen-ratio);
  width: 100%;
  object-fit: contain;
  background: var(--fondo-superficie);
  margin-bottom: var(--espacio-2);
}

.tarjeta__marca {
  color: var(--texto-marca-producto);
}

.tarjeta__nombre {
  font-family: var(--fuente-titular);
  font-size: var(--texto-cuerpo-tam);
  font-weight: var(--peso-regular);
  line-height: var(--alto-linea-compacto);
  color: var(--texto-titular);
  margin: 0;
  /* Máximo tres líneas, con corte por elipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* Toda la tarjeta menos el botón es un enlace a la ficha */
.tarjeta__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-tarjeta);
}

.tarjeta__nombre a:hover {
  text-decoration: underline;
}

.tarjeta__codigo {
  font-size: var(--texto-chico);
  color: var(--texto-secundario);
}

/* La acción y la ficha van por encima del enlace que cubre la tarjeta.
   El margin-top:auto va solo en la acción: si estuviera también en la ficha,
   las dos se repartirían el espacio sobrante y el botón no quedaría alineado
   entre una tarjeta con ficha y una sin ella. */
.tarjeta__accion,
.tarjeta__ficha {
  position: relative;
  z-index: var(--capa-base);
}

.tarjeta__accion {
  margin-top: auto;
  padding-top: var(--espacio-3);
}

.tarjeta__ficha {
  font-size: var(--texto-chico);
  margin-top: var(--espacio-3);
}


/* --------------------------------------------------------------------------
   9. FILTROS Y CHIPS
   -------------------------------------------------------------------------- */

.catalogo {
  display: grid;
  grid-template-columns: var(--filtros-ancho) 1fr;
  gap: var(--filtros-gap);
  align-items: start;
}

.filtros {
  position: sticky;
  top: calc(var(--header-alto) + var(--espacio-4));
  z-index: var(--capa-sticky);
  display: grid;
  gap: var(--espacio-6);
}

.filtros__grupo {
  border: 0;
  margin: 0;
  padding: 0;
}

.filtros__titulo {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-secundario);
  padding: 0;
  margin-bottom: var(--espacio-3);
}

.filtros__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-2);
}

/* Solo la lista de líneas lleva tope: las categorías son 10 y las marcas 4,
   y una lista corta con scroll propio se siente rota. */
[data-filtro-linea] .filtros__lista {
  max-height: var(--filtros-lista-tope);
  overflow-y: auto;
  /* El scroll propio corta el anillo de foco contra el borde del contenedor.
     Con este aire el anillo entra entero. */
  padding-right: var(--espacio-2);
}

.filtros__opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  cursor: pointer;
}

/* Las 8 subcategorías cuelgan de Griferías: la sangría es lo que dice que
   son hijas y no una categoría más de la lista. */
.filtros__sub {
  margin-top: var(--espacio-2);
  padding-left: var(--espacio-5);
}

.filtros__sub summary {
  font-size: var(--texto-chico);
  color: var(--texto-secundario);
  cursor: pointer;
}

.filtros__sub .filtros__lista {
  margin-top: var(--espacio-2);
}

.campo {
  width: 100%;
  min-height: var(--boton-alto);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-superficie);
  color: var(--texto-cuerpo);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-campo);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo-tam);
}

.campo::placeholder {
  color: var(--texto-secundario);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--fondo-franja);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-chico);
  color: var(--texto-cuerpo);
}

.chip button {
  border: 0;
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  font-size: var(--texto-chico);
  line-height: 1;
  padding: 0;
}

/* Botón "Filtrar" de móvil: abajo a la IZQUIERDA, para no chocar con el FAB */
.filtrar-movil {
  display: none;
  position: fixed;
  left: var(--fab-margen);
  bottom: var(--fab-margen);
  z-index: var(--capa-fab);
}

@media (max-width: 1023px) {
  .catalogo {
    grid-template-columns: 1fr;
  }

  .js .filtros {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--capa-panel);
    overflow-y: auto;
    padding: var(--espacio-5);
    background: var(--fondo-pagina);
  }

  .js .filtros[data-abierto="si"] {
    display: grid;
    align-content: start;
  }

  .js .filtrar-movil {
    display: inline-flex;
  }
}


/* --------------------------------------------------------------------------
   10. FICHA DE PRODUCTO Y TABLA DE ESPECIFICACIONES
   -------------------------------------------------------------------------- */

.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-7);
  align-items: start;
}

/* La galeria se queda pegada mientras se lee la descripcion.

   Solo tiene efecto cuando la columna derecha es mas alta que la foto, que
   es justo el caso que lo pide: una descripcion larga. Cuando la foto es mas
   alta, `sticky` no hace nada y la ficha se ve igual que antes.

   El tope es el alto del header COMPACTO, que es el que esta puesto cuando
   uno ya bajo lo suficiente como para que esto importe. */
@media (min-width: 900px) {
  .galeria {
    position: sticky;
    top: calc(var(--header-alto-compacto) + var(--espacio-4));
  }
}

.galeria__principal {
  aspect-ratio: var(--galeria-ratio);
  width: 100%;
  object-fit: contain;
  background: var(--fondo-superficie);
}

.galeria__miniaturas {
  display: flex;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
  list-style: none;
  padding: 0;
}

.galeria__miniatura {
  width: var(--galeria-miniatura);
  height: var(--galeria-miniatura);
  padding: 0;
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-tarjeta);
  border-radius: var(--radio-campo);
  cursor: pointer;
  overflow: hidden;
}

.galeria__miniatura[aria-current="true"] {
  border-color: var(--filete-mostaza);
  border-width: var(--filete-grosor);
}

.datos {
  display: grid;
  gap: var(--espacio-4);
  justify-items: start;
}

/* La descripcion vive dentro de .datos, que alinea todo a la izquierda con
   `justify-items: start`. Eso esta bien para el boton y el enlace a la ficha,
   que miden lo que miden, pero la descripcion y su tabla tienen que ocupar la
   columna entera. */
.datos .descripcion {
  justify-self: stretch;
  width: 100%;
  margin-top: var(--espacio-5);
}

.specs {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.specs th,
.specs td {
  padding-block: var(--spec-fila-padding-y);
  border-bottom: var(--borde-grosor) solid var(--spec-borde);
  vertical-align: top;
}

.specs th {
  width: var(--spec-etiqueta-ancho);
  font-weight: var(--peso-fuerte);
  color: var(--texto-cuerpo);
  padding-right: var(--espacio-4);
}

.specs ul {
  margin: 0;
  padding-left: var(--espacio-5);
  display: grid;
  gap: var(--espacio-2);
}

/* Una sola columna por debajo de 900 y no de 768: con la descripcion en la
   columna derecha, entre 768 y 900 el texto y la tabla quedaban en una
   columna de unos 350 px y las etiquetas de la tabla se partian en tres
   lineas. */
@media (max-width: 899px) {
  .ficha {
    grid-template-columns: 1fr;
    gap: var(--espacio-5);
  }
}

@media (max-width: 767px) {
  .specs th {
    width: auto;
  }
}


/* --------------------------------------------------------------------------
   11. AVISOS Y FORMULARIOS
   El color nunca es el único portador del mensaje: todo error lleva texto.
   -------------------------------------------------------------------------- */

.formulario {
  display: grid;
  gap: var(--espacio-5);
  max-width: var(--medida-texto);
}

.campo-grupo {
  display: grid;
  gap: var(--espacio-2);
}

.campo-grupo label {
  font-weight: var(--peso-medio);
}

/* "(opcional)" al lado de la etiqueta, no un asterisco en los obligatorios.
   Marcar lo obligatorio obliga a explicar qué significa el asterisco en una
   leyenda aparte; marcar lo opcional se lee solo. Acá además son tres campos
   obligatorios y uno opcional: marcar el que sobra es menos ruido. */
.campo__opcional {
  font-weight: var(--peso-regular);
  color: var(--texto-secundario);
}

.campo[aria-invalid="true"] {
  border-color: var(--error-borde);
  border-width: var(--filete-grosor);
}

.error {
  color: var(--error-texto);
  font-size: var(--texto-chico);
}

.aviso {
  padding: var(--espacio-4);
  border-radius: var(--radio-campo);
  border-left: var(--filete-grosor) solid transparent;
}

.aviso--error {
  background: var(--error-fondo);
  border-left-color: var(--error-borde);
  color: var(--error-texto);
}

.aviso--exito {
  background: var(--exito-fondo);
  border-left-color: var(--exito-borde);
  color: var(--exito-texto);
}


/* --------------------------------------------------------------------------
   12. HERO
   Foto de ambiente de fondo con capa navy al 70% — la regla de la Hoja para
   texto sobre fotografía. Con la capa, el texto va en hueso.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 60vh;
  overflow: hidden;
  background: var(--fondo-ancla);
  color: var(--texto-sobre-navy);
}

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La capa es lo que hace legible el texto. Sin ella no va texto sobre foto */
.hero__capa {
  position: absolute;
  inset: 0;
  background: var(--fondo-capa-foto);
}

.hero__texto {
  position: relative;
  padding-block: var(--seccion-padding-y);
}

.hero h1 {
  color: var(--texto-sobre-navy);
  max-width: var(--medida-texto);
}

.hero .bajada {
  color: var(--texto-sobre-navy);
  margin-top: var(--espacio-5);
}

.hero .acciones {
  margin-top: var(--espacio-6);
}

.hero .boton--secundario {
  color: var(--texto-sobre-navy);
  border-color: var(--borde-sobre-navy);
}

.hero :focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}


/* --------------------------------------------------------------------------
   13. CATEGORÍAS DESTACADAS Y TRES ARGUMENTOS
   -------------------------------------------------------------------------- */

.categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.categoria {
  position: relative;
  display: block;
  color: var(--texto-titular);
  text-decoration: none;
}

.categoria img {
  aspect-ratio: var(--categoria-ratio);
  width: 100%;
  object-fit: cover;
  background: var(--placeholder-fondo);
  border-radius: var(--radio-tarjeta);
}

.categoria__nombre {
  display: block;
  font-family: var(--fuente-titular);
  font-size: var(--texto-subtitulo);
  line-height: var(--alto-linea-subtitulo);
  margin-top: var(--espacio-3);
}

.categoria:hover .categoria__nombre {
  text-decoration: underline;
}

.argumentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.argumentos li {
  font-size: var(--texto-bajada);
  max-width: var(--medida-texto);
}

@media (max-width: 1023px) {
  .categorias {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .categorias,
  .argumentos {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }
}


/* --------------------------------------------------------------------------
   14. PAGINADO, ESTADO VACÍO Y LISTA DE COTIZACIÓN
   -------------------------------------------------------------------------- */

.paginado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginado a,
.paginado span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--boton-alto-chico);
  min-height: var(--boton-alto-chico);
  padding-inline: var(--espacio-3);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-boton);
  color: var(--texto-cuerpo);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}

.paginado [aria-current="page"] {
  border-color: var(--filete-mostaza);
  border-width: var(--filete-grosor);
  font-weight: var(--peso-medio);
}

.paginado .deshabilitado {
  color: var(--deshabilitado-texto);
  background: var(--deshabilitado-fondo);
  border-color: transparent;
}

.vacio {
  display: grid;
  gap: var(--espacio-4);
  justify-items: start;
  padding-block: var(--espacio-8);
}

.resumen-resultados {
  color: var(--texto-secundario);
  font-size: var(--texto-chico);
}

/* Lista de cotización */
.lista-cotizacion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-4);
}

.item-cotizacion {
  display: grid;
  grid-template-columns: var(--galeria-miniatura) 1fr auto;
  gap: var(--espacio-4);
  align-items: center;
  padding-bottom: var(--espacio-4);
  border-bottom: var(--borde-grosor) solid var(--borde-sutil);
}

.item-cotizacion img {
  width: var(--galeria-miniatura);
  height: var(--galeria-miniatura);
  object-fit: contain;
  background: var(--fondo-superficie);
}

.item-cotizacion__cantidad {
  width: calc(var(--espacio-10) - var(--espacio-4));
  min-height: var(--boton-alto-chico);
}

@media (max-width: 767px) {
  .item-cotizacion {
    grid-template-columns: var(--galeria-miniatura) 1fr;
  }
}


/* --------------------------------------------------------------------------
   15. FRANJA DE MARCAS
   Es navegación, no decoración: cada logo lleva al catálogo filtrado.
   Se equilibra por peso óptico, no por altura. Ver tokens.css §7.
   -------------------------------------------------------------------------- */

.marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-7) var(--espacio-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.marcas__enlace {
  display: inline-flex;
  align-items: center;
  opacity: var(--marca-logo-opacidad);
  transition: opacity var(--transicion);
}

.marcas__enlace:hover {
  opacity: var(--marca-logo-opacidad-hover);
}

.marcas__enlace img {
  width: auto;
  height: var(--marca-logo-alto);
}

.marcas__enlace[data-marca="vainsa"] img   { height: var(--marca-logo-alto-vainsa); }
.marcas__enlace[data-marca="italgrif"] img { height: var(--marca-logo-alto-italgrif); }
.marcas__enlace[data-marca="trebol"] img   { height: var(--marca-logo-alto-trebol); }
.marcas__enlace[data-marca="fratelli"] img { height: var(--marca-logo-alto-fratelli); }


/* --------------------------------------------------------------------------
   16. REDISEÑO DEL HOME — 21-09-2026
   Barra superior, header con buscador, hero sin capa, puertas y categorías
   con chips. La estructura viene de vainsainnova.com.pe; los valores, todos
   de tokens.css.
   -------------------------------------------------------------------------- */

/* --- Barra superior: contacto, no marca ---------------------------------- */

.barra-superior {
  background: var(--barra-fondo);
  color: var(--barra-texto);
  font-size: var(--texto-chico);
}

.barra-superior__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-5);
  min-height: var(--barra-alto);
}

.barra-superior a {
  color: var(--barra-texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.barra-superior a:hover {
  color: var(--barra-texto);
  text-decoration: underline;
}

.barra-superior :focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}

.barra-superior svg {
  width: var(--texto-bajada);
  height: var(--texto-bajada);
  fill: currentColor;
  flex: none;
}


/* --- Header con el buscador en el centro --------------------------------- */

.cabecera__logo img {
  height: var(--header-logo-alto);
}

.buscador {
  position: relative;
  flex: 1 1 auto;
  max-width: var(--header-buscador-ancho);
}

.buscador__campo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-campo);
  padding-inline: var(--espacio-3);
}

.buscador__campo:focus-within {
  border-color: var(--foco-color);
}

.buscador input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--boton-alto-chico);
  border: 0;
  background: transparent;
  color: var(--texto-cuerpo);
  font-family: var(--fuente-texto);
  font-size: var(--texto-cuerpo-tam);
}

/* El anillo de foco va en la CAJA, no en el input.

   El input no tiene borde propio —vive dentro de .buscador__campo, que es
   quien dibuja la caja redondeada—, así que un outline pegado al texto se
   vería cortado por ese redondeo y a dos píxeles del borde real.

   El `outline: none` de abajo es deliberado y **solo vale porque esta regla
   existe**. Sin ella el buscador del header quedaba sin ningún indicador de
   foco: quien navega con teclado no sabía que estaba parado ahí. Si algún
   día se borra esta regla, hay que borrar también el `outline: none`. */
.buscador__campo:focus-within {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: var(--foco-offset);
}

.buscador input:focus {
  outline: none;
}

.buscador__lupa {
  width: var(--texto-bajada);
  height: var(--texto-bajada);
  fill: var(--texto-secundario);
  flex: none;
}

/* Sugerencias. Se llenan con buscador.json, que se baja recién al escribir:
   son 382 KB y no tienen por qué viajar en cada visita al home. */
.buscador__sugerencias {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--espacio-2));
  z-index: var(--capa-modal);
  margin: 0;
  padding: var(--espacio-2);
  list-style: none;
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-sutil);
  border-radius: var(--radio-campo);
  max-height: 60vh;
  overflow-y: auto;
}

.buscador__sugerencias[hidden] {
  display: none;
}

.buscador__sugerencia a {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2);
  border-radius: var(--radio-campo);
  color: var(--texto-cuerpo);
  text-decoration: none;
}

.buscador__sugerencia a:hover,
.buscador__sugerencia a:focus-visible {
  background: var(--fondo-franja);
  color: var(--texto-cuerpo);
}

.buscador__sugerencia img {
  width: var(--espacio-7);
  height: var(--espacio-7);
  object-fit: contain;
  flex: none;
  background: var(--fondo-superficie);
}

.buscador__sugerencia b {
  display: block;
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-compacto);
}

.buscador__sugerencia .codigo {
  font-size: var(--texto-chico);
  color: var(--texto-secundario);
}

.buscador__aviso {
  padding: var(--espacio-3);
  color: var(--texto-secundario);
  font-size: var(--texto-chico);
}


/* --- Hero sin capa: la foto con su color, degradado solo del lado del texto */

.hero--limpio {
  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--hero-alto);
  overflow: hidden;
  background: var(--fondo-ancla);
  color: var(--texto-sobre-navy);
}

.hero--limpio .hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Esto no es la capa de la Hoja: no cubre la foto, la oscurece de un lado.
   Ver el comentario de --hero-degradado en tokens.css. */
.hero--limpio .hero__degradado {
  position: absolute;
  inset: 0;
  background: var(--hero-degradado);
}

.hero--limpio .hero__texto {
  position: relative;
  padding-block: var(--seccion-padding-y);
  max-width: var(--medida-texto);
}

.hero--limpio h1,
.hero--limpio .bajada {
  color: var(--texto-sobre-navy);
}

.hero--limpio .bajada {
  margin-top: var(--espacio-5);
}

.hero--limpio .acciones {
  margin-top: var(--espacio-6);
}

.hero--limpio .boton--secundario {
  color: var(--texto-sobre-navy);
  border-color: var(--texto-sobre-navy);
}

.hero--limpio .boton--secundario:hover {
  background: var(--color-blanco-16);
  color: var(--texto-sobre-navy);
}

.hero--limpio :focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}


/* --- Tres argumentos, ahora con foto ------------------------------------- */

.argumentos-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.argumento {
  display: flex;
  flex-direction: column;
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-tarjeta);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

/* Hueco marcado, no relleno con algo verosímil: faltan las tres fotos.
   Es la regla 10 de CLAUDE.md aplicada al diseño, no un descuido. */
.argumento__pendiente {
  aspect-ratio: var(--categoria-ratio);
  display: grid;
  place-items: center;
  background: var(--placeholder-fondo);
  color: var(--placeholder-texto);
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  text-align: center;
  padding: var(--espacio-4);
}

.argumento__texto {
  padding: var(--espacio-5);
}

.argumento__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--texto-subtitulo);
  line-height: var(--alto-linea-subtitulo);
  color: var(--texto-titular);
  margin: 0 0 var(--espacio-2);
}


/* --- Las dos puertas ------------------------------------------------------ */

.puertas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.puerta {
  position: relative;
  display: block;
  aspect-ratio: var(--puerta-ratio);
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  color: var(--texto-sobre-navy);
  text-decoration: none;
  background: var(--fondo-ancla);
}

.puerta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puerta__degradado {
  position: absolute;
  inset: 0;
  background: var(--puerta-degradado);
}

/* En celular el texto arranca mucho mas arriba dentro de la tarjeta, asi que
   el degradado tiene que empezar oscuro desde el principio. El motivo largo y
   las medidas estan en tokens.css. */
@media (max-width: 767px) {
  .puerta__degradado {
    background: var(--puerta-degradado-movil);
  }
}

.puerta__texto {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--espacio-6);
}

.puerta__titulo {
  font-family: var(--fuente-titular);
  font-size: var(--texto-titular-fluido);
  line-height: var(--alto-linea-titular);
  color: var(--texto-sobre-navy);
  margin: 0 0 var(--espacio-3);
}

.puerta__texto p {
  color: var(--texto-sobre-navy);
}

.puerta__flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
  color: var(--texto-sobre-navy-sec);
  font-weight: var(--peso-medio);
}

.puerta:hover .puerta__flecha {
  text-decoration: underline;
}

.puerta:focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}


/* --- Categorías con chips de subcategoría --------------------------------- */

/* Griferías ocupa el ancho completo y las otras cinco van en una fila de
   cinco. Se probó con Griferías a dos columnas de tres y quedaba Duchas
   sola al lado, con un hueco del tamaño de una tarjeta. */
.categorias--resto {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.categoria__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  list-style: none;
  margin: var(--espacio-3) 0 0;
  padding: 0;
}

.categoria__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--chip-fondo);
  border: var(--borde-grosor) solid var(--chip-borde);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-chico);
  color: var(--texto-cuerpo);
  text-decoration: none;
}

.categoria__chip:hover {
  background: var(--fondo-franja);
  color: var(--texto-cuerpo);
}


/* --- Franja de marcas con más presencia ----------------------------------- */

.marcas--destacada {
  justify-content: space-around;
  gap: var(--espacio-8) var(--espacio-9);
}

.marcas--destacada .marcas__enlace[data-marca="vainsa"] img {
  height: calc(var(--marca-logo-alto-vainsa) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="italgrif"] img {
  height: calc(var(--marca-logo-alto-italgrif) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="trebol"] img {
  height: calc(var(--marca-logo-alto-trebol) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="fratelli"] img {
  height: calc(var(--marca-logo-alto-fratelli) * var(--marca-logo-escala));
}


/* --- Ajustes por ancho del home ------------------------------------------- */

@media (max-width: 1023px) {
  .argumentos-foto,
  .puertas {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .cabecera__logo img {
    height: var(--header-logo-alto-movil);
  }

  /* El buscador pasa a una fila propia debajo del logo: en 360 px no entra
     al lado del logo y del botón de cotización sin quedar inservible. */
  .cabecera__fila {
    flex-wrap: wrap;
    padding-block: var(--espacio-3);
  }

  .buscador {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .hero--limpio {
    min-height: var(--hero-alto-movil);
    align-items: end;
  }

  .hero--limpio .hero__degradado {
    background: var(--hero-degradado-movil);
  }

  .hero--limpio .hero__foto {
    object-position: center;
  }

  .categorias--resto {
    grid-template-columns: repeat(2, 1fr);
  }

  .marcas--destacada {
    justify-content: space-between;
    gap: var(--espacio-6) var(--espacio-5);
  }
}


/* --------------------------------------------------------------------------
   17. SEGUNDA PASADA DEL HOME — 21-09-2026
   Productos destacados, argumentos con ícono y categorías con foto real de
   producto.
   -------------------------------------------------------------------------- */

/* --- Productos destacados ------------------------------------------------ */

/* Ocho fijos: cuatro por fila en escritorio. Se fija en cuatro y no se deja
   al auto-fill para que siempre sean dos filas parejas de cuatro. */
.destacados {
  grid-template-columns: repeat(4, 1fr);
}

.destacados-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3) var(--espacio-5);
}

.destacados-cabecera p {
  color: var(--texto-secundario);
  font-size: var(--texto-chico);
}


/* --- Argumentos con ícono, sin foto --------------------------------------
   Se sacaron las fotos: hacían falta tres imágenes que no existen, y el
   argumento no necesita una foto para entenderse. El ícono es de línea, en
   terracota acción, y es decorativo: el texto dice todo. */

.argumento__icono {
  width: var(--espacio-8);
  height: var(--espacio-8);
  margin-bottom: var(--espacio-4);
  color: var(--accion-fondo);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sin foto, la tarjeta es solo texto: el padding la sostiene */
.argumento--icono .argumento__texto {
  padding: var(--espacio-6);
}


/* --- Categorías: foto de ambiente con el nombre encima ------------------
   Vuelven las imágenes de ambiente, ahora cuadradas. El nombre va sobre la
   foto con el mismo degradado carbón del hero: la foto conserva su color y
   solo se oscurece la franja de abajo.
   Superado el 22-09-2026: la versión con foto de producto sobre blanco
   convertía la sección en una grilla de catálogo, y el home ya tiene una
   grilla de catálogo arriba, en los destacados. */

.categorias--seis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

.categoria--ambiente {
  position: relative;
  display: block;
  aspect-ratio: var(--categoria-ratio);
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  color: var(--texto-sobre-navy);
  text-decoration: none;
  background: var(--fondo-ancla);
}

.categoria--ambiente img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  padding: 0;
  border: 0;
}

.categoria--ambiente .categoria__degradado {
  position: absolute;
  inset: 0;
  background: var(--categoria-degradado);
}

.categoria--ambiente .categoria__nombre {
  position: absolute;
  left: var(--espacio-5);
  right: var(--espacio-5);
  bottom: var(--espacio-4);
  margin: 0;
  color: var(--texto-sobre-navy);
  font-family: var(--fuente-titular);
  font-size: var(--texto-subtitulo);
  line-height: var(--alto-linea-subtitulo);
}

.categoria--ambiente:hover .categoria__nombre {
  text-decoration: underline;
}

.categoria--ambiente:focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}

/* Los chips de Griferías van debajo de la grilla y no dentro de su tarjeta.
   Metidos en la tarjeta, ocho chips en una columna de 380 px ocupaban cinco
   líneas y estiraban toda la primera fila de la grilla. */
.chips-categoria {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-2) var(--espacio-3);
}

.chips-categoria__titulo {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-secundario);
}


/* --- Franja de marcas con más presencia ----------------------------------- */

.marcas--destacada {
  justify-content: space-around;
  gap: var(--espacio-8) var(--espacio-9);
}

.marcas--destacada .marcas__enlace[data-marca="vainsa"] img {
  height: calc(var(--marca-logo-alto-vainsa) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="italgrif"] img {
  height: calc(var(--marca-logo-alto-italgrif) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="trebol"] img {
  height: calc(var(--marca-logo-alto-trebol) * var(--marca-logo-escala));
}
.marcas--destacada .marcas__enlace[data-marca="fratelli"] img {
  height: calc(var(--marca-logo-alto-fratelli) * var(--marca-logo-escala));
}


/* --- Ajustes por ancho del home ------------------------------------------- */

@media (max-width: 1023px) {
  .argumentos-foto,
  .puertas {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .cabecera__logo img {
    height: var(--header-logo-alto-movil);
  }

  /* El buscador pasa a una fila propia debajo del logo: en 360 px no entra
     al lado del logo y del botón de cotización sin quedar inservible. */
  .cabecera__fila {
    flex-wrap: wrap;
    padding-block: var(--espacio-3);
  }

  .buscador {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .hero--limpio {
    min-height: var(--hero-alto-movil);
    align-items: end;
  }

  .hero--limpio .hero__degradado {
    background: var(--hero-degradado-movil);
  }

  .hero--limpio .hero__foto {
    object-position: center;
  }

  .categorias--resto {
    grid-template-columns: repeat(2, 1fr);
  }

  .marcas--destacada {
    justify-content: space-between;
    gap: var(--espacio-6) var(--espacio-5);
  }
}


/* --------------------------------------------------------------------------
   17. SEGUNDA PASADA DEL HOME — 21-09-2026
   Productos destacados, argumentos con ícono y categorías con foto real de
   producto.
   -------------------------------------------------------------------------- */

/* --- Productos destacados ------------------------------------------------ */

/* Ocho fijos: cuatro por fila en escritorio. Se fija en cuatro y no se deja
   al auto-fill para que siempre sean dos filas parejas de cuatro. */
.destacados {
  grid-template-columns: repeat(4, 1fr);
}

.destacados-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3) var(--espacio-5);
}

.destacados-cabecera p {
  color: var(--texto-secundario);
  font-size: var(--texto-chico);
}


/* --- Argumentos con ícono, sin foto --------------------------------------
   Se sacaron las fotos: hacían falta tres imágenes que no existen, y el
   argumento no necesita una foto para entenderse. El ícono es de línea, en
   terracota acción, y es decorativo: el texto dice todo. */

.argumento__icono {
  width: var(--espacio-8);
  height: var(--espacio-8);
  margin-bottom: var(--espacio-4);
  color: var(--accion-fondo);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sin foto, la tarjeta es solo texto: el padding la sostiene */
.argumento--icono .argumento__texto {
  padding: var(--espacio-6);
}


/* --- Categorías con foto real de producto --------------------------------
   Las fotos del catálogo vienen a 1000 × 1000 sobre blanco. Van con
   `contain` y no con `cover`: recortar un producto centrado en su fondo lo
   deja sin pies ni cabeza. */

.categoria--producto img {
  aspect-ratio: var(--categoria-ratio);
  object-fit: contain;
  background: var(--fondo-superficie);
  border: var(--borde-grosor) solid var(--borde-tarjeta);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-4);
}

.categorias--seis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Los chips de Griferías van debajo de la grilla y no dentro de su tarjeta.
   Metidos en la tarjeta, ocho chips en una columna de 380 px ocupaban cinco
   líneas y estiraban toda la primera fila de la grilla. */
.chips-categoria {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-2) var(--espacio-3);
}

.chips-categoria__titulo {
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-secundario);
}

@media (max-width: 1023px) {
  .destacados {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .destacados,
  .categorias--seis {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------------------------------------------
   18. EL CIERRE — 22-09-2026
   El llamado final pasa de navy a lino, con el titular en navy. El footer
   se queda en navy, así que el cambio de color es el que separa las dos
   piezas y no hace falta un colchón de aire entre ellas.
   -------------------------------------------------------------------------- */

.seccion--cierre {
  background: var(--fondo-franja);
  padding-block: var(--espacio-8);
}

.seccion--cierre h2 {
  color: var(--texto-titular);
}

/* El mismo aire entre bloques que en las demás secciones. No lo hereda
   porque el cierre no lleva la clase .seccion: tiene su propio padding. */
.seccion--cierre > .contenedor > * + * {
  margin-top: var(--espacio-6);
}


/* --------------------------------------------------------------------------
   19. FICHA DE PRODUCTO — 22-09-2026
   Orden fijo de la Hoja: foto · marca · nombre · código · acción · ficha.
   -------------------------------------------------------------------------- */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-chico);
  color: var(--texto-secundario);
  margin-bottom: var(--espacio-6);
}

.ficha h1 {
  font-size: var(--texto-titular-fluido);
}

.ficha__codigo {
  color: var(--texto-secundario);
}

.ficha__pdf {
  font-size: var(--texto-chico);
}

.ficha__linea {
  font-size: var(--texto-chico);
  color: var(--texto-secundario);
}

/* La descripción va debajo de las dos columnas, a medida de lectura */
.descripcion {
  margin-top: var(--seccion-padding-y-movil);
  max-width: var(--medida-texto);
}

.descripcion > * + * {
  margin-top: var(--espacio-4);
}

.descripcion h2 {
  font-size: var(--texto-subtitulo);
  margin-bottom: var(--espacio-5);
}

/* La tabla se ensancha más que el texto: los valores son cortos y en dos
   columnas angostas se parten en tres líneas. */
.descripcion .specs {
  max-width: none;
  width: 100%;
}

/* Sin este ancho, el `max-width` de p no aplica dentro de la tabla y una
   celda larga empuja la columna de la etiqueta hasta hacerla ilegible. */
.specs td {
  width: auto;
}

/* --------------------------------------------------------------------------
   20. AJUSTES DEL PASO 6 — 22-09-2026
   -------------------------------------------------------------------------- */

.item-cotizacion__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.item-cotizacion a {
  color: var(--texto-titular);
  font-family: var(--fuente-titular);
  text-decoration: none;
}

.item-cotizacion a:hover {
  text-decoration: underline;
}

/* La grilla se oculta entera cuando no hay resultados: sin esto quedaba un
   hueco del alto de la última búsqueda. */
.grilla-productos[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .item-cotizacion__acciones {
    grid-column: 1 / -1;
  }
}


/* --------------------------------------------------------------------------
   21. BOT DE PREGUNTAS FRECUENTES — 22-09-2026

   Un segundo botón flotante al lado del de WhatsApp, y el panel que abre.
   Sin sombras y con los radios de la Hoja: el panel se separa del fondo con
   un filete, como las tarjetas de producto.
   -------------------------------------------------------------------------- */

/* El botón. Mismas medidas que el FAB de WhatsApp, corrido a su izquierda. */
.faq-boton {
  position: fixed;
  right: var(--faq-separacion);
  bottom: var(--fab-margen);
  z-index: var(--capa-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-tamano);
  height: var(--fab-tamano);
  padding: 0;
  /* El aro blanco: el boton es navy y el footer tambien. */
  border: var(--faq-aro-grosor) solid var(--faq-aro-color);
  border-radius: var(--radio-pildora);
  background: var(--faq-fondo);
  color: var(--faq-icono);
  cursor: pointer;
  transition: background-color var(--transicion);
}

.faq-boton:hover {
  background: var(--faq-fondo-hover);
}

.faq-boton svg {
  width: var(--fab-icono-tamano);
  height: var(--fab-icono-tamano);
}

/* El panel se apoya sobre el botón, alineado a su derecha. */
.faq-panel {
  position: fixed;
  right: var(--fab-margen);
  bottom: calc(var(--fab-margen) + var(--fab-tamano) + var(--espacio-3));
  z-index: var(--capa-panel);
  display: flex;
  flex-direction: column;
  width: var(--faq-panel-ancho);
  max-width: calc(100vw - var(--fab-margen) * 2);
  max-height: var(--faq-panel-alto-max);
  background: var(--faq-panel-fondo);
  border: var(--borde-grosor) solid var(--faq-panel-borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}

.faq-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border-bottom: var(--borde-grosor) solid var(--faq-panel-borde);
}

.faq-panel__titulo {
  font-size: var(--texto-subtitulo);
  margin: 0;
}

.faq-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--boton-alto-chico);
  height: var(--boton-alto-chico);
  padding: 0;
  border: 0;
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: background-color var(--transicion);
}

.faq-cerrar:hover {
  background: var(--secundario-fondo-hover);
  color: var(--texto-titular);
}

.faq-cerrar svg {
  width: var(--texto-bajada);
  height: var(--texto-bajada);
}

/* Lo único que rueda es el cuerpo: la cabecera y el pie se quedan fijos, así
   los dos botones de abajo están siempre a la vista. */
.faq-panel__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--espacio-4);
}

.faq-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-2);
}

/* Cada pregunta ocupa todo el ancho y se alinea a la izquierda: es una fila
   de una lista, no un botón de acción. */
.faq-pregunta {
  width: 100%;
  min-height: var(--boton-alto-chico);
  padding: var(--espacio-3);
  border: var(--borde-grosor) solid var(--faq-panel-borde);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--texto-cuerpo);
  font-family: var(--fuente-texto);
  font-size: var(--texto-chico);
  line-height: var(--alto-linea-compacto);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transicion);
}

.faq-pregunta:hover {
  background: var(--secundario-fondo-hover);
}

.faq-respuesta h3 {
  font-size: var(--texto-subtitulo);
  margin-bottom: var(--espacio-3);
}

.faq-respuesta p {
  font-size: var(--texto-chico);
  /* La medida del panel ya limita el renglón; sin esto el max-width general
     de los párrafos pelea con el ancho del panel. */
  max-width: none;
}

/* El foco del contenedor de la respuesta se le da por JavaScript para que el
   lector lo lea; el anillo estorbaría, porque no es algo que se accione. */
.faq-respuesta:focus {
  outline: none;
}

.faq-volver {
  margin-top: var(--espacio-4);
}

.faq-volver__enlace {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--enlace);
  font-family: var(--fuente-texto);
  font-size: var(--texto-chico);
  text-decoration: underline;
  text-decoration-thickness: var(--borde-grosor);
  text-underline-offset: var(--espacio-1);
  cursor: pointer;
}

.faq-volver__enlace:hover {
  color: var(--enlace-hover);
}

.faq-panel__pie {
  flex: none;
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
  border-top: var(--borde-grosor) solid var(--faq-panel-borde);
}

/* En móvil el panel ocupa el ancho de la pantalla menos los márgenes, y se
   apoya sobre los dos botones flotantes. */
@media (max-width: 767px) {
  .faq-panel {
    left: var(--fab-margen);
    width: auto;
  }
}


/* --------------------------------------------------------------------------
   22. CARRUSEL DEL HERO — 05-10-2026

   Seis fotos que rotan solas detrás del texto, que no se mueve.
   Reemplaza el hero fijo; el degradado y la medición de contraste son los
   mismos, ahora contra las 6 (ver [[Imágenes de ambiente]]).
   -------------------------------------------------------------------------- */

/* Las 6 van apiladas en el mismo sitio. La de abajo marca el alto; las otras
   cinco se superponen con opacidad 0 y solo la activa se ve.

   Se cambia la OPACIDAD y no el `display`: una imagen con display:none no se
   puede fundir, y el cambio seco se ve como un parpadeo. */
.hero--limpio .hero__foto {
  opacity: 0;
  transition: opacity var(--hero-fundido) ease-in-out;
}

.hero--limpio .hero__foto--activa {
  opacity: 1;
}

/* NO se toca la posición del degradado ni del contenedor.

   La primera versión de esta sección les ponía `position: relative` para
   "asegurar" que quedaran encima de las 6 fotos. Eso **anulaba el
   `position: absolute` del degradado**, que viene de la sección 12: sin
   absolute su `inset: 0` no lo estira, el div queda de altura cero y no
   pinta nada. El texto del hero quedó sobre la foto pelada, con **1,31:1**
   de contraste en lugar de los 11 que la medición decía.

   No hacía falta ninguna regla: el orden del DOM ya resuelve el apilamiento.
   Las 6 fotos son `absolute` y van primero, el degradado es `absolute` y va
   después —así que se pinta encima—, y `.hero__texto` ya trae su propio
   `position: relative`, que lo deja arriba de todo.

   La lección: medir sobre un modelo del CSS no es medir. El modelo decía
   11:1 porque daba por hecho que el degradado estaba ahí. Hay que medir
   sobre el píxel que el navegador pinta. */

.hero__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--espacio-3);
  display: flex;
  justify-content: center;
  /* Sin gap: la separación la da el área de toque de cada punto, que es
     mucho más grande que el punto. Un gap encima los alejaría de más. */
  z-index: var(--capa-base);
}

/* El botón mide 44 px para el dedo; el punto que se ve son 10. El resto es
   relleno transparente. WCAG 2.5.5 pide 44 y la Hoja no define nada más
   chico para algo que se toca. */
.hero__punto {
  width: var(--hero-punto-toque);
  height: var(--hero-punto-toque);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero__punto::before {
  content: "";
  width: var(--hero-punto-tamano);
  height: var(--hero-punto-tamano);
  border-radius: var(--radio-pildora);
  background: var(--hero-punto);
  transition: background-color var(--transicion);
}

.hero__punto[aria-current="true"]::before {
  background: var(--hero-punto-activo);
}

.hero__punto:hover::before {
  background: var(--hero-punto-activo);
}

/* El anillo de foco va en el botón, no en el punto de 10 px: pegado al punto
   quedaría escondido contra la foto. */
.hero__punto:focus-visible {
  outline-color: var(--foco-color-sobre-navy);
  border-radius: var(--radio-boton);
}

/* Quien pidió menos movimiento no ve ninguno: se queda la primera foto y el
   fundido se apaga. Los puntos siguen estando y siguen funcionando, porque
   saltar a mano no es movimiento no pedido. */
@media (prefers-reduced-motion: reduce) {
  .hero--limpio .hero__foto {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   23. SLIDE ENLAZADA Y SUBTÍTULO ROTATIVO — 05-10-2026
   -------------------------------------------------------------------------- */

/* El enlace cubre la franja donde se ve el producto y NO el texto.
   En escritorio el titular llega al 55 % del ancho, así que el enlace
   arranca en el 58 %: queda holgura y nunca pisa una letra. */
.hero__enlace {
  position: absolute;
  left: 58%;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: var(--capa-base);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--espacio-5);
  text-decoration: none;
}

/* La etiqueta: discreta, abajo a la derecha, sin sombra. El poco carbón de
   atrás es el mismo color del overlay del hero, no un gris nuevo. */
.hero__etiqueta {
  font-family: var(--fuente-texto);
  font-size: var(--texto-chico);
  font-weight: var(--peso-medio);
  letter-spacing: var(--hero-etiqueta-tracking);
  color: var(--texto-sobre-navy);
  background: var(--hero-etiqueta-fondo);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-boton);
  transition: background-color var(--transicion);
}

.hero__enlace:hover .hero__etiqueta {
  background: var(--fondo-ancla);
}

.hero__enlace:focus-visible {
  outline-color: var(--foco-color-sobre-navy);
}

/* El subtítulo rotativo. Se escribe en capitalización normal y se muestra en
   mayúsculas: así conserva las tildes —las pone el navegador— y se sigue
   leyendo bien si esta hoja no cargara. */
.hero__frase {
  text-transform: uppercase;
  letter-spacing: var(--hero-frase-tracking);
  transition: opacity var(--hero-frase-fundido) ease-in-out;
}

.hero__frase--saliendo {
  opacity: 0;
}

/* En móvil el texto ocupa casi todo el ancho y los botones llegan casi al
   fondo, así que el enlace se va a la banda de arriba, que es la franja de
   foto que de verdad se ve en un celular. */
@media (max-width: 767px) {
  .hero__enlace {
    left: 0;
    bottom: auto;
    height: 28%;
    align-items: flex-start;
    padding: var(--espacio-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__frase {
    transition: none;
  }
}

/* El contenedor del hero ocupa todo el ancho aunque el texto no lo llene, y
   al venir después del enlace en el DOM se quedaba con los clics de la franja
   de la foto: el enlace de la slide no se podía tocar.

   Se le quitan los eventos al contenedor y se les devuelven a lo único que
   de verdad se clica ahí, que son los dos botones. Así el enlace recibe su
   franja y "Ver catálogo" y "Cotizar por WhatsApp" siguen igual. */
.hero--limpio .contenedor {
  pointer-events: none;
}

.hero--limpio .hero__texto .acciones .boton {
  pointer-events: auto;
}

/* La fila de puntos va de lado a lado del hero aunque los puntos ocupen solo
   el centro, así que su contenedor tapaba la etiqueta del destino, que está
   abajo a la derecha. Igual que con el contenedor del texto: los eventos los
   recibe el botón, no la caja que lo envuelve. */
.hero__puntos {
  pointer-events: none;
}

.hero__punto {
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   24. NUESTROS MÁS VENDIDOS — cinta continua · 06-10-2026

   Pasó de franja que avanzaba de a saltos cada 4 s a cinta transportadora:
   se desplaza sola y sin parar hacia la izquierda, a la velocidad del token.

   El movimiento es `transform: translateX` sobre la pista, no `scrollLeft`
   del contenedor. Un scroll solo acepta pasos enteros de píxel y a 38 px/s
   eso se ve como un tembleque; una transformación la compone la GPU y sale
   fluida. Como efecto secundario desapareció el bug de calce del scroll-snap
   que había el 05-10: ya no hay snap con el que pelearse.

   El título y "Ver el catálogo completo" siguen en el contenedor de 1200 px.
   La cinta no: ocupa todo el ancho y las tarjetas pasan también por el hueco
   de los costados, que es lo que se pidió.
   -------------------------------------------------------------------------- */

/* El marco nace DESPLAZABLE y vendidos.js lo bloquea cuando toma el control
   del movimiento. Al revés no funciona: si naciera recortado, sin JavaScript
   se verían cuatro tarjetas y no habría forma de llegar a las otras 17. El
   HTML y el CSS habilitan, el JavaScript mejora. */
.vendidos__marco {
  position: relative;
  margin-top: var(--espacio-6);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.vendidos__marco::-webkit-scrollbar {
  display: none;
}

.vendidos__pista > .tarjeta {
  scroll-snap-align: start;
}

/* La segunda fila. La separacion es la misma que hay entre tarjetas: las dos
   cintas se leen como una sola retícula y no como dos bloques distintos. */
.vendidos__marco--2 {
  margin-top: var(--espacio-4);
}

/* Por debajo de 600 px queda solo la fila 1. Dos cintas en un celular son
   demasiado movimiento en muy poca pantalla, y la segunda obligaria a
   recorrer el doble para llegar al resto del home.

   El corte es 600 y no los 767 del resto del sitio a proposito: entre 600 y
   767 la pantalla ya es de tablet y las dos filas entran sin apretarse. */
@media (max-width: 599px) {
  .vendidos__marco--2 {
    display: none;
  }
}

.vendidos__pista {
  display: flex;
  gap: var(--espacio-4);
  margin: 0;
  padding: 0;
  list-style: none;
  /* La pista es más ancha que la pantalla a propósito: no se encoge. */
  width: max-content;
  will-change: transform;
}

.vendidos__pista > .tarjeta {
  flex: 0 0 var(--vendidos-tarjeta);
  display: flex;
}

/* Las flechas se fueron el 12-10-2026, al pasar a dos filas. Con dos cintas
   en direcciones contrarias harian falta cuatro, flotando encima de las
   tarjetas, y ninguna diria a simple vista que fila mueve. El camino por
   teclado no se perdio: vendidos.js corre la fila sola cuando el foco llega a
   una tarjeta que esta fuera de la vista, que ademas funciona mejor que las
   flechas porque va tarjeta por tarjeta.

   Si alguna vez vuelven, el HTML del boton esta en el historial de
   plantillas/home.html y el estilo en el de este archivo.
   -------------------------------------------------------------------------- */


/* El sello "Más vendido". Solo lo llevan los 21 de la gerencia; las tarjetas
   al azar llevan un <span> vacío con el mismo alto, igual que con la ficha,
   para que todos los botones queden a la misma altura.

   No va encima de la foto: la regla 7 prohíbe sellos sobre las fotos de
   producto, y esa regla no distingue si el sello es del proveedor o nuestro.
   Va en la línea de la marca, donde no tapa nada. */
.tarjeta__vendido {
  display: inline-block;
  align-self: flex-start;
  min-height: calc(var(--texto-chico) * var(--alto-linea-cuerpo));
  padding: 0 var(--espacio-2);
  border-radius: var(--vendidos-sello-radio);
  background: var(--vendidos-sello-fondo);
  color: var(--vendidos-sello-texto);
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  line-height: calc(var(--texto-chico) * var(--alto-linea-cuerpo));
}

/* El hueco: mismo alto, sin fondo y sin padding. */
.tarjeta__vendido[aria-hidden="true"] {
  padding: 0;
  background: none;
}

/* Los botones "Agregar a cotización" alineados en toda la cinta.
   El enlace a la ficha técnica solo existe en 536 de los 1.287 productos, y
   sin esto la tarjeta sin ficha dejaba el botón más arriba que sus vecinas.
   El hueco lo escribe el build —un <span> vacío cuando no hay PDF— y acá solo
   se le da el alto de una línea. */
.vendidos__pista > .tarjeta .tarjeta__ficha {
  min-height: calc(var(--texto-chico) * var(--alto-linea-cuerpo));
  display: block;
}

@media (max-width: 767px) {
  .vendidos__pista {
    gap: var(--espacio-3);
  }

  .vendidos__pista > .tarjeta {
    flex-basis: 78vw;
  }
}

/* Con "menos movimiento" la cinta no se mueve sola ni con transform: vuelve
   a ser una lista que se desliza con el dedo y con las flechas, que es
   movimiento pedido por quien lo usa y no movimiento inesperado.

   La copia del bucle se esconde: sin animación no sirve para nada y
   duplicaría el catálogo a la vista. */
@media (prefers-reduced-motion: reduce) {
  .vendidos__pista {
    will-change: auto;
  }

  .vendidos__pista > [data-vendidos-copia] {
    display: none;
  }
}