/* Catálogo de producto: retícula compacta, fotografía limpia y amarillo funcional. */

body[data-page="catalogo"],
body[data-page="ficha-producto"],
.catalogo-editorial,
.ficha-producto {
  background: var(--white);
}

body[data-page="catalogo"] nav,
body[data-page="ficha-producto"] nav {
  background: var(--white);
}

.catalogo-showcase--listado {
  padding-top: clamp(100px, 10vw, 136px);
}

.catalogo-listado-head {
  display: block;
}

.catalogo-listado-head h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: .9;
  letter-spacing: -.055em;
  text-align: center;
}

.catalogo-navegacion {
  margin: var(--s-8) 0 var(--s-8);
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}

.catalogo-filtros-grupo {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, .18fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-3);
}

.catalogo-filtros-grupo + .catalogo-filtros-grupo {
  border-top: 1px solid var(--border2);
}

.catalogo-filtros-grupo[hidden] {
  display: none;
}

.catalogo-filtros-etiqueta {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalogo-filtros {
  min-width: 0;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.catalogo-filtros button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease;
}

/* Hover y seleccionado dejan de ser el mismo estado: el hover solo engorda el borde,
   el seleccionado se rellena de tinta como el resto de la tienda. */
.catalogo-filtros button:hover {
  background: var(--paper);
}

.catalogo-filtros button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
}

.catalogo-filtros--secundarios button {
  border-color: var(--border2);
  color: var(--ink-mute);
}

.catalogo-filtros--secundarios button:hover,
.catalogo-filtros--secundarios button[aria-pressed="true"] {
  border-color: var(--ink);
  color: var(--ink);
}

.catalogo-filtros button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.catalogo-tipos {
  display: grid;
  gap: clamp(44px, 4.5vw, 64px);
}

.catalogo-tipos > .catalogo-tipo,
.catalogo-familia {
  padding: 0;
}

.catalogo-tipo[hidden],
.catalogo-familia[hidden] {
  display: none;
}

.catalogo-familias {
  display: grid;
  gap: clamp(32px, 3vw, 48px);
}

.catalogo-familia-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.catalogo-familia-nombre {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.025em;
}

.catalogo-familia-marca {
  flex: 0 0 auto;
  margin: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.catalogo-familia-marca img {
  width: 150px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}

.catalogo-familia-marca--chubby img {
  width: 164px;
  height: auto;
}

.catalogo-familia-marca--clipper img {
  width: 116px;
  height: auto;
}

/* auto-fit + tope de celda: una familia con un solo producto ocupa el ancho de un
   producto, no un quinto de la pantalla con cuatro huecos. Con catálogo lleno sigue
   dando cinco columnas en escritorio. Sustituye a los breakpoints de 1180 y 900. */
.catalogo-showcase--listado .catalogo-productos {
  /* Fracciones fluidas, no auto-fit con tope: con minmax(200px,260px) y
     justify-content:start, a 1440px quedaban 4 tarjetas y ~250px de canalón
     vacío a la derecha. La escalera 5→4→3→2→1 llena el ancho a toda talla. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(var(--s-6), 2vw, var(--s-8)) clamp(var(--s-3), 1.5vw, var(--s-6));
}

@media (max-width: 1180px) {
  .catalogo-showcase--listado .catalogo-productos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.catalogo-producto[hidden] {
  display: none;
}

.catalogo-showcase--listado .catalogo-producto-media {
  height: clamp(184px, 14.5vw, 210px);
  aspect-ratio: auto;
  padding: var(--s-4);
}

.catalogo-showcase--listado .catalogo-producto-media img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.catalogo-showcase--listado .catalogo-producto[data-escala-visual] .catalogo-producto-media {
  place-items: end center;
}

.catalogo-showcase--listado .catalogo-producto[data-escala-visual] .catalogo-producto-media img {
  width: auto;
  max-width: 82%;
  height: var(--catalogo-foto-altura);
  transform-origin: center bottom;
}

/* Escala recalibrada por raíz cúbica del volumen: al triplicar la capacidad, la altura
   del bote crece ×∛3 ≈ 1,44, no ×1,04. La tabla anterior iba de 46% (5 ml) a 48% (15 ml)
   y los dos formatos se veían idénticos en el catálogo y en el móvil.
   Mapeo: ∛volumen en [1,71 … 10] → altura en [26% … 94%]. El suelo del 26% mantiene
   visible el 5 ml sin mentir sobre su tamaño. */
.catalogo-producto[data-escala-visual="5"] { --catalogo-foto-altura: 46%; }
.catalogo-producto[data-escala-visual="15"] { --catalogo-foto-altura: 48%; }
.catalogo-producto[data-escala-visual="30"] { --catalogo-foto-altura: 55%; }
.catalogo-producto[data-escala-visual="50"] { --catalogo-foto-altura: 60%; }
.catalogo-producto[data-escala-visual="60"] { --catalogo-foto-altura: 62%; }
.catalogo-producto[data-escala-visual="100"] { --catalogo-foto-altura: 67%; }
.catalogo-producto[data-escala-visual="150"] { --catalogo-foto-altura: 72%; }
.catalogo-producto[data-escala-visual="500"] { --catalogo-foto-altura: 80%; }
.catalogo-producto[data-escala-visual="1000"] { --catalogo-foto-altura: 86%; }

.catalogo-showcase--listado .catalogo-producto[data-subcategoria="clipper"] .catalogo-producto-media img {
  width: 100%;
  height: 100%;
}

.catalogo-showcase--listado .catalogo-producto--foto .catalogo-producto-media {
  padding: 0;
}

.catalogo-showcase--listado .catalogo-producto--foto .catalogo-producto-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalogo-showcase--listado .catalogo-producto-copy {
  display: block;
  padding-top: var(--s-3);
}

.catalogo-showcase--listado .catalogo-producto h3 {
  max-width: 100%;
  min-height: 1em;
  margin-top: 0;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.catalogo-showcase--listado .catalogo-producto-num {
  color: var(--ink-mute);
}

.catalogo-producto-marca {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.catalogo-producto-marca img {
  width: auto;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
  opacity: .78;
}

.catalogo-producto-marca img[src*="miron.svg"] {
  width: 92px;
  height: auto;
  opacity: 1;
}

.catalogo-producto-marca img[src*="miron.svg"] + span,
.ficha-marca--miron span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.catalogo-producto-marca--chubby img {
  width: 108px;
  height: auto;
}

.catalogo-producto-marca--clipper img {
  width: 82px;
  height: auto;
  opacity: 1;
}

.catalogo-producto[data-subcategoria="clipper"] h3 {
  font-size: clamp(14px, 1vw, 17px);
}

body[data-page="ficha-producto"] .ficha-marca {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-mute);
}

body[data-page="ficha-producto"] .ficha-marca img {
  max-width: min(240px, 70vw);
  max-height: 64px;
  width: auto;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

body[data-page="ficha-producto"] .ficha-marca--miron img {
  width: 220px;
  height: auto;
}

body[data-page="ficha-producto"] .ficha-marca--chubby img {
  width: 210px;
  height: auto;
}

body[data-page="ficha-producto"] .ficha-marca--clipper img {
  width: 180px;
  height: auto;
}

.catalogo-producto-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}

/* En el listado la tarjeta es foto + nombre: capacidad y material ya van en el
   nombre y sobran. La ÚNICA fila que se enseña es el mínimo (aprobado 26-08),
   como línea corta «Mínimo · 30 uds». */
.catalogo-showcase--listado .catalogo-producto-datos {
  display: block;
  margin-top: var(--s-2);
}

.catalogo-showcase--listado .catalogo-producto-datos > div {
  display: none;
}

.catalogo-showcase--listado .catalogo-producto-datos > div:has([data-producto-minimo]) {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.catalogo-showcase--listado .catalogo-producto-datos > div:has([data-producto-minimo]) dt::after {
  content: ' ·';
}

.catalogo-showcase--listado .catalogo-producto-datos > div:has([data-producto-minimo]) dd {
  margin-top: 0;
  color: var(--ink-mute);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.catalogo-producto-datos dt {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.catalogo-producto-datos dd {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.25;
}

.catalogo-impresion {
  display: block;
  padding-top: clamp(var(--s-20), 8vw, var(--s-32));
}

.catalogo-instagram {
  padding: clamp(56px, 6vw, 88px) 0;
  border-top: 1px solid var(--border2);
}

/* El carril de fotos sigue a sangre a propósito, pero el texto no: antes el título y el
   handle empezaban en x=0 mientras el resto de secciones arranca en x=48, y se leía
   como descuadre en vez de como decisión. Mismo max-width y padding que .catalogo-showcase. */
.catalogo-instagram-head {
  max-width: 1536px;
  margin-inline: auto;
  /* Sigue al margen de página: 48px en escritorio, 24px en móvil — los mismos valores
     que .catalogo-showcase usa con su breakpoint de 700px, aquí sin media query. */
  padding-inline: clamp(24px, 3.5vw, 48px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.catalogo-instagram-kicker {
  margin: 0 0 var(--s-2);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalogo-instagram-head h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .9;
  letter-spacing: -.045em;
}

.catalogo-instagram-controles {
  display: flex;
  gap: var(--s-2);
}

.catalogo-instagram-controles button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 20px;
  transition: background-color .18s ease, color .18s ease;
}

.catalogo-instagram-controles button:hover,
.catalogo-instagram-controles button:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.catalogo-instagram-track {
  display: grid;
  grid-auto-flow: column;
  /* De 4 a 3 por pantalla: las fotos son el mejor activo de venta de la web y a un
     cuarto de ancho los trabajos no se apreciaban. */
  grid-auto-columns: calc((100% - (var(--s-4) * 2)) / 3);
  gap: var(--s-4);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.instagram-post {
  min-width: 0;
  position: relative;
  scroll-snap-align: start;
}

/* Etiqueta de cliente sobre la foto (la crea instagram-carousel.js desde el alt).
   El trabajo enseña más si se sabe para quién fue. */
.instagram-post-cliente {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  padding: 4px 9px;
  background: rgba(10, 10, 10, .82);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Última tarjeta del carril: seguir el trabajo nuevo donde se publica de verdad. */
.instagram-post--follow {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: var(--s-6);
  transition: background .2s ease;
}

.instagram-post--follow:hover,
.instagram-post--follow:focus-visible {
  background: #1c1c1c;
}

.instagram-post--follow strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.instagram-post--follow span {
  display: block;
  margin-top: var(--s-2);
  color: rgba(250, 248, 243, .7);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.instagram-post-media {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: e-resize;
}

.instagram-post-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.instagram-post-media img[hidden] {
  display: none;
}

.instagram-post-pista,
.instagram-post-contador {
  position: absolute;
  z-index: 1;
  bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: rgba(10, 10, 10, .82);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.instagram-post-pista {
  left: var(--s-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

.instagram-post-contador {
  right: var(--s-3);
}

.instagram-post-media:hover .instagram-post-pista,
.instagram-post-media:focus-visible .instagram-post-pista {
  opacity: 1;
  transform: translateY(0);
}

.instagram-post-link {
  /* 36px se quedaba por debajo del mínimo táctil y va encima de una foto que también
     es pulsable: fallar el objetivo aquí abre el carrusel en vez de Instagram. */
  width: 44px;
  height: 44px;
  position: absolute;
  z-index: 2;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  border: 1px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease;
}

.instagram-post-link:hover,
.instagram-post-link:focus-visible {
  transform: translateY(-2px);
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
  --ficha-foto-escala: .68;
  aspect-ratio: 4 / 3;
  padding: clamp(var(--s-8), 4vw, var(--s-16));
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero h1 {
  max-width: 16ch;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: .9;
  text-wrap: balance;
}

body:not([data-producto="clipper"]) .ficha-contenido[data-ficha-referencia="true"] .ficha-datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-producto="vidrio-5ml"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero h1,
body[data-producto="vidrio-30ml"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero h1 {
  max-width: 20ch;
  font-size: clamp(32px, 3.9vw, 56px);
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: scale(var(--ficha-foto-escala));
  transform-origin: center;
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media img[hidden] {
  display: none;
}

body[data-producto="chubby-60ml"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
  --ficha-foto-escala: .58;
}

body[data-producto="chubby-95mm"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
  --ficha-foto-escala: .68;
}

body[data-producto="clipper"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
  --ficha-foto-escala: .84;
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media--foto {
  --ficha-foto-escala: 1;
}

.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media--foto img {
  object-fit: contain;
}

body[data-page="ficha-producto"][data-producto="solo-pegatina"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media--foto {
  max-width: 420px;
  aspect-ratio: 1;
  padding: var(--s-10);
}

.catalogo-precios tbody tr[hidden] {
  display: none;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .ficha-precios {
  padding-block: clamp(var(--s-8), 3.5vw, var(--s-12));
}

.ficha-contenido[data-ficha-precio-compacto="true"] .ficha-section-head {
  display: block;
  margin-bottom: var(--s-8);
}

.ficha-contenido[data-ficha-precio-compacto="true"] .ficha-section-head .catalogo-kicker {
  display: none;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .ficha-section-head h2 {
  max-width: none;
  margin-top: 0;
  font-size: clamp(36px, 4vw, 56px);
}

.ficha-contenido[data-ficha-precio-compacto="true"] .ficha-section-head > p:last-child {
  margin-top: var(--s-3);
}

/* Selector de formatos de la familia (lo crea ficha-producto.js). */

/* El candado va en el ITEM del grid, no en el bloque: `min-width: auto` (el
   defecto de un grid item) deja que el minimo intrinseco de la fila nowrap de
   chips ensanche toda la columna — la figura del hero crecia con ella y la foto
   escalada dejaba de caber en su marco (lo cazo el e2e de fichas compactas). */
.ficha-contenido[data-ficha-referencia="true"] .ficha-hero-copy {
  min-width: 0;
}

.ficha-formatos {
  margin-top: var(--s-5);
  min-width: 0;
  max-width: 100%;
}

.ficha-formatos-etiqueta {
  margin: 0 0 var(--s-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ficha-formatos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* En movil, una sola fila deslizable: envolver en dos filas empujaba los
   precios ~120px mas abajo, y esta pagina promete el precio pronto. */
@media (max-width: 700px) {
  .ficha-formatos-lista {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--s-1);
    scrollbar-width: none;
  }

  .ficha-formatos-lista::-webkit-scrollbar {
    display: none;
  }

  .ficha-formato-chip {
    min-height: 36px;
    flex: 0 0 auto;
  }
}

.ficha-formato-chip {
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}

.ficha-formato-chip:hover {
  border-color: var(--ink);
}

.ficha-formato-chip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.ficha-formato-chip--activo {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

/* Insignia de ahorro por tramo (el % lo calcula ficha-producto.js de los
   precios publicados en la propia fila). */
.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td[data-ahorro] {
  position: relative;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td[data-ahorro]::after {
  content: attr(data-ahorro);
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  color: var(--orange-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .02em;
}

.catalogo-precio-pista {
  display: none;
  margin: 0 0 var(--s-3);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precio-scroll {
  overflow: visible;
  contain: none;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios {
  min-width: 0;
  display: block;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios thead,
.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody th:first-child {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody {
  display: block;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

body[data-producto="clipper"] .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--border2);
  background: var(--white);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
  text-align: left;
  white-space: normal;
}

.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td::before {
  content: attr(data-cantidad);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html[lang="en"] .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td::before {
  content: attr(data-cantidad-en);
}

/* El tramo de mayor volumen es el mejor precio de la fila y se veía igual que los otros
   tres. Se marca con borde de tinta: sin texto, para no añadir una cadena que traducir
   y sin porcentaje, que se desincronizaría de la tabla en cuanto cambie una tarifa. */
.ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td:last-child {
  border-color: var(--ink);
  border-width: 2px;
}

/* Contenedor del CTA que ficha-producto.js clona al final de la tabla de precios. */
.ficha-precios-cta {
  margin-top: var(--s-8);
}

/* Contacto rápido bajo los precios de la ficha (lo crea ficha-producto.js). */
.ficha-contacto-rapido {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  flex-wrap: wrap;
  max-width: 720px;
}

.ficha-contacto-rapido p {
  margin: 0;
}

.ficha-contacto-rapido-titulo {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -.01em;
}

.ficha-contacto-rapido-texto {
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: 1.45;
  max-width: 40ch;
}

.ficha-contacto-rapido-acciones {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.ficha-contacto-rapido-ig {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
}

/* Estado vacío del filtro/buscador del catálogo. Vive fuera de las secciones, así que
   lleva su propio contenedor: mismo ancho y margen lateral que .catalogo-showcase. */
.catalogo-vacio {
  max-width: 1536px;
  margin-inline: auto;
  /* Pegado a la barra de filtros: un estado vacío con 64px de aire por arriba leía
     como página rota, no como mensaje. */
  padding: var(--s-6) clamp(24px, 3.5vw, 48px) var(--s-12);
}

.catalogo-vacio > * {
  max-width: 52ch;
}

.catalogo-vacio-titulo {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.02em;
}

.catalogo-vacio-texto {
  margin: 0 0 var(--s-6);
  color: var(--ink-mute);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.catalogo-vacio-acciones {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.catalogo-vacio-contacto {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
}

/* ── Cómo funciona: tres pasos finos bajo el filtro ── */
.catalogo-pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  /* Va entre el título y las categorías: el margen inferior lo pone .catalogo-navegacion,
     sumar otro aquí abría un hueco de ~90px entre dos bloques hermanos. */
  margin-top: var(--s-8);
  margin-bottom: 0;
}

.catalogo-paso {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-right: 1px solid var(--border2);
}

.catalogo-paso + .catalogo-paso {
  padding-left: var(--s-5);
}

.catalogo-paso:last-child {
  border-right: 0;
  padding-right: 0;
}

.catalogo-paso p {
  margin: 0;
}

.catalogo-paso-num {
  color: var(--orange-text);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
}

.catalogo-paso-titulo {
  margin-top: var(--s-1);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -.01em;
}

.catalogo-paso-texto {
  margin-top: var(--s-1);
  max-width: 38ch;
  color: var(--ink-mute);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

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

  .catalogo-paso {
    padding: var(--s-4) 0;
    border-right: 0;
    border-bottom: 1px solid var(--border2);
  }

  .catalogo-paso + .catalogo-paso {
    padding-left: 0;
  }

  .catalogo-paso:last-child {
    border-bottom: 0;
  }
}

/* ── Franja de marcas: los tres logos juntos, una fila fina ── */
.catalogo-marcas {
  max-width: 1536px;
  margin-inline: auto;
  padding: var(--s-6) clamp(24px, 3.5vw, 48px);
  border-top: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-10);
  flex-wrap: wrap;
}

.catalogo-marcas p {
  margin: 0;
}

.catalogo-marcas-etiqueta,
.catalogo-marcas-nota {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalogo-marcas-nota {
  margin-left: auto;
}

.catalogo-marcas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-4) var(--s-10);
  flex-wrap: wrap;
}

.catalogo-marcas-lista img {
  width: auto;
  height: 30px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .82;
  transition: filter .2s ease, opacity .2s ease;
}

.catalogo-marcas-lista li:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 700px) {
  .catalogo-marcas-nota {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .catalogo-instagram-track {
    grid-auto-columns: calc((100% - (var(--s-4) * 2)) / 3);
  }

  .catalogo-showcase--listado .catalogo-productos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .catalogo-showcase--listado {
    padding-top: 108px;
  }

  .catalogo-showcase--listado.catalogo-impresion {
    padding-top: var(--s-20);
  }

  .catalogo-tipos {
    gap: var(--s-12);
  }

  .catalogo-familias {
    gap: var(--s-10);
  }

  .catalogo-familia-head {
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    text-align: center;
  }

  .catalogo-familia-nombre {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.05;
    text-wrap: balance;
  }

  .catalogo-familia-marca {
    min-height: 24px;
  }

  .catalogo-familia-marca img {
    width: 120px;
    height: 26px;
    object-position: center;
  }

  .catalogo-familia-marca--chubby img {
    width: 140px;
    height: auto;
  }

  .catalogo-familia-marca--clipper img {
    width: 104px;
    height: auto;
  }

  .catalogo-navegacion {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-block: var(--s-6);
  }

  .catalogo-filtros-grupo {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3) 24px;
  }

  .catalogo-filtros {
    gap: 6px;
    overflow-x: visible;
  }

  /* En móvil el filtro bajaba a 40px de alto y 10px de texto, justo donde el dedo
     necesita más superficie y el ojo más tamaño. 44px es el mínimo táctil. */
  .catalogo-filtros button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 12px 7px;
    font-size: 11px;
  }

  .catalogo-showcase--listado .catalogo-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-3);
  }

  .catalogo-showcase--listado .catalogo-producto-media {
    height: 148px;
    padding: var(--s-2);
  }

  .catalogo-showcase--listado .catalogo-producto h3 {
    min-height: 1em;
    font-size: 15px;
  }

  .catalogo-showcase--listado .catalogo-producto[data-subcategoria="clipper"] h3 {
    font-size: 12px;
    letter-spacing: -.025em;
    white-space: nowrap;
  }

  .catalogo-producto-datos {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .catalogo-producto-datos dd {
    font-size: var(--fs-xs);
  }

  .catalogo-instagram-head {
    align-items: center;
  }

  .catalogo-instagram-track {
    width: 100%;
    grid-auto-columns: minmax(260px, 78vw);
  }

  .instagram-post-pista {
    display: none;
  }

  .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="ficha-producto"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
    --ficha-foto-escala: .6;
    max-height: 240px;
    aspect-ratio: 3 / 2;
    padding: var(--s-6);
  }

  body[data-page="ficha-producto"][data-producto="chubby-60ml"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
    --ficha-foto-escala: .52;
  }

  body[data-page="ficha-producto"][data-producto="solo-pegatina"] .ficha-contenido[data-ficha-referencia="true"] .ficha-hero-media {
    --ficha-foto-escala: 1;
    max-width: 240px;
    aspect-ratio: 1;
  }

  body[data-page="ficha-producto"]:not([data-producto="clipper"]) .ficha-contenido[data-ficha-referencia="true"] .ficha-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="ficha-producto"][data-producto="clipper"] .ficha-contenido[data-ficha-referencia="true"] .ficha-datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="ficha-producto"] .ficha-contenido[data-ficha-referencia="true"] .ficha-datos > div,
  body[data-page="ficha-producto"] .ficha-contenido[data-ficha-referencia="true"] .ficha-datos > div:first-child {
    padding: var(--s-3) var(--s-2);
    border-right: 1px solid var(--border2);
    border-bottom: 0;
  }

  body[data-page="ficha-producto"] .ficha-contenido[data-ficha-referencia="true"] .ficha-datos > div:first-child {
    padding-left: 0;
  }

  body[data-page="ficha-producto"] .ficha-contenido[data-ficha-referencia="true"] .ficha-datos > div:last-child {
    padding-right: 0;
    border-right: 0;
  }

  body[data-producto="clipper"] .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody td {
    min-height: 92px;
    padding: var(--s-4);
    font-size: 24px;
  }
}

@media (max-width: 350px) {
  .catalogo-showcase--listado .catalogo-productos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .catalogo-precio-pista {
    display: block;
  }

  .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precio-scroll {
    overflow-x: auto;
    contain: inline-size;
    padding-bottom: var(--s-2);
  }

  .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]),
  body[data-producto="clipper"] .ficha-contenido[data-ficha-precio-compacto="true"] .catalogo-precios tbody tr:not([hidden]) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 240px);
  }
}

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

/* Storefront shell: búsqueda, cuenta, solicitud y menú lateral. */
.nav-end .nav-burger {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-quote {
  position: relative;
}

.nav-quote-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 99px;
  background: var(--color-brand);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.store-search-panel {
  position: fixed;
  z-index: 190;
  top: 112px;
  left: 50%;
  width: min(720px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.store-search-panel[hidden],
.store-drawer[hidden] {
  display: none;
}

.store-search-panel label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink3);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.store-search-panel input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.store-search-panel [data-catalogo-resultados] {
  display: block;
  margin-top: 8px;
  color: var(--ink4);
  font-size: var(--fs-xs);
}

.store-drawer {
  position: fixed;
  z-index: 240;
  inset: 0 0 0 auto;
  width: min(420px, 92vw);
  padding: 24px;
  border-left: 1px solid var(--border2);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}

.store-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.store-drawer-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  text-transform: uppercase;
}

.store-drawer-head button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border2);
  border-radius: 99px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
}

.store-drawer nav {
  display: grid;
  margin-top: 18px;
}

.store-drawer nav a {
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 750;
  text-decoration: none;
}

.store-drawer a[hidden] {
  display: none;
}

.store-drawer-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .store-search-panel { top: 92px; }
}