/* Páginas internas de la tienda BMS: la ficha de producto (como la del portal mayorista, Puma 27-oct-2026), el catálogo (sin tablero propio: el lenguaje de «Nuestra selección») y el 404. Tema oscuro de
   tienda.css: blanco y negro, el color lo ponen los productos; las fotos, sobre papel claro y multiplicadas (el blanco
   de la foto se vuelve el papel). Pisos de lectura con max(): 15 px el texto, 13 px lo chico; lo que se toca mide
   44 px. El catálogo usa además las tarjetas, .bloque y .enlace de secciones.css (la tarjeta es una sola para toda la
   tienda: templates/tienda/_tarjeta.html). */

/* ── Ficha (como la del portal mayorista, Puma 27-oct; tema oscuro): la galería a la izquierda (la foto grande, sus
   flechas y su «N de M», y la tira de miniaturas debajo) y los datos a la derecha; abajo, la barra de compra fija. La
   foto grande no pasa el alto de la pantalla: la de Puma (1166×554) ve la foto y las miniaturas enteras sobre la barra
   (los 100 px = la barra y el aire). ── */
.ficha {
  --aire: clamp(20px, 2.6vw, 40px);
  --miniatura: 72px;
  padding-top: var(--aire);
}
.ficha-arriba {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start;
  gap: clamp(24px, 3.2vw, 56px);
  padding: 0 max(var(--borde), calc((100% - var(--ancho)) / 2)) clamp(32px, 4vw, 64px);
}

/* La galería: la foto que se ve ocupa la caja (papel claro, la foto multiplicada); sin JS, la tira se corre con el dedo o
   con las miniaturas (enlaces #foto-N). Cada foto lleva su «N de M». */
.ficha-galeria { min-width: 0; }
.galeria { display: grid; gap: 12px; }
.galeria-principal {
  position: relative;
  height: min(46vw, calc(100vh - var(--alto-cabecera) - var(--aire) - var(--miniatura) - 100px));
  height: min(46vw, calc(100svh - var(--alto-cabecera) - var(--aire) - var(--miniatura) - 100px));
  min-height: 240px; max-height: 720px;
}
.una-foto .galeria-principal, .sin-foto .galeria-principal {
  height: min(46vw, calc(100svh - var(--alto-cabecera) - var(--aire) - 100px));
}
.galeria-fotos {
  position: relative; display: flex; width: 100%; height: 100%;
  margin: 0; padding: 0; list-style: none; background: var(--papel);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.galeria-fotos::-webkit-scrollbar { display: none; }
.galeria-fotos > li { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.galeria-fotos img, .galeria-miniaturas img {
  position: absolute; inset: 6%; width: 88%; height: 88%; max-width: none;
  object-fit: contain; mix-blend-mode: multiply;
}
.galeria-fotos:focus-visible { outline-offset: -4px; outline-color: var(--noche); }
.galeria-n {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px;
  background: var(--noche); color: var(--blanco); font-size: 13px; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.galeria-flecha {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center;
  width: var(--toque); height: var(--toque); transform: translateY(-50%);
  border-radius: 50%; background: rgba(17, 18, 20, .78); color: var(--blanco);
  transition: background .2s ease;
}
.galeria-flecha:hover { background: var(--noche); }
.galeria-anterior { left: 12px; }
.galeria-siguiente { right: 12px; }
/* El «−N %» de la oferta o la oportunidad de la web, arriba a la izquierda de la foto (con el «Antes» tachado arriba
   del precio, .ficha-antes). */
.ficha-oferta-pct {
  position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 10px; border-radius: 4px;
  background: var(--noche); color: var(--blanco); font-size: 15px; font-weight: 800; letter-spacing: -.01em;
}
.galeria-miniaturas {
  display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.galeria-miniaturas li { flex: none; }
.galeria-miniaturas a {
  position: relative; display: block; width: var(--miniatura); height: var(--miniatura);
  border: 1px solid transparent; background: var(--papel);
}
.galeria-miniaturas img { inset: 8%; width: 84%; height: 84%; }
/* La miniatura de la foto que se ve: borde blanco con un aire oscuro, como en el portal. */
.galeria-miniaturas a[aria-current="true"] { border: 2px solid var(--blanco); padding: 3px; background-clip: content-box; }
.galeria-miniaturas a:focus-visible { outline-offset: -2px; }

/* Los datos: el logo sobre una ficha blanca (los logos oficiales son para fondo claro), el título moderado (hasta 3
   renglones), la entrega con su punto, la caja del precio, la tabla y, si hay, la ficha técnica y la descripción. */
.ficha-datos { display: grid; align-content: start; gap: 16px; min-width: 0; }
.ficha-marca { margin: 0; }
.ficha-marca img {
  display: block; box-sizing: content-box; width: auto; height: 30px; max-width: 150px; padding: 9px 14px;
  border-radius: 6px; background: var(--blanco); object-fit: contain;
}
.ficha-marca span { font-size: max(16px, 1.2vw); font-weight: 600; letter-spacing: -.01em; color: var(--niebla); }
.ficha-datos h1 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: clamp(26px, 2.2vw, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.ficha-entrega { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ficha-entrega::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--blanco);
}
.ficha-entrega-ya::before { background: var(--blanco); }
.ficha-precio-caja { padding: 16px 18px; border: 1px solid var(--linea); border-radius: 6px; background: var(--grafito); }
.ficha-antes { margin: 0 0 4px; font-size: 15px; color: var(--niebla); }
.ficha-antes s { text-decoration-thickness: 1.5px; }
.ficha-precio {
  margin: 0; font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ficha-nota { margin: 8px 0 0; font-size: 15px; line-height: 1.3; color: var(--niebla); }
.ficha-nota span { display: block; margin-top: 2px; font-size: 13px; }
.ficha-tabla { margin: 0; border-top: 1px solid var(--linea); }
.ficha-tabla div {
  display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.ficha-tabla dt, .ficha-tabla dd { font-size: 15px; line-height: 1.4; }
.ficha-tabla dt { color: var(--niebla); }
.ficha-tabla dd { margin: 0; overflow-wrap: anywhere; }
.ficha-seccion { display: grid; gap: 10px; margin-top: 8px; }
.ficha-sec { font-size: 18px; font-weight: 800; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.ficha-descripcion { margin: 0; font-size: 16px; line-height: 1.6; color: #e9e9ea; white-space: pre-line; overflow-wrap: anywhere; }
/* Con JS, la descripción larga muestra 4 renglones y «Ver más» (ficha.js); sin JS, entera. */
.ficha-descripcion.corta {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.ficha-mas {
  justify-self: start; display: inline-flex; align-items: center; min-height: var(--toque);
  font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}

/* La barra de compra: fija abajo mientras se ve la ficha (y en su lugar al final). Nombre y precio a la izquierda;
   cantidad − 1 + y «Agregar» a la derecha. */
.ficha-compra {
  position: sticky; bottom: 0; z-index: 40;
  border-top: 1px solid var(--linea); background: var(--grafito);
}
.ficha-compra-fila {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--ancho); margin: 0 auto; padding: 12px var(--borde);
}
.ficha-compra-producto { display: flex; align-items: baseline; gap: 16px; min-width: 0; margin: 0 auto 0 0; }
.ficha-compra-producto span {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: var(--niebla);
}
.ficha-compra-producto b { flex: none; font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cantidad { display: flex; align-items: center; flex: none; border: 1px solid #55565b; border-radius: 6px; }
.cantidad-boton { display: grid; place-items: center; width: var(--toque); height: var(--toque); }
.cantidad-boton:hover { background: #ffffff12; }
.cantidad input {
  width: 52px; height: var(--toque); border: 0; background: transparent; color: var(--blanco);
  font: inherit; font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }
.ficha-agregar {
  display: flex; align-items: center; justify-content: center; flex: none;
  min-width: 180px; min-height: 48px; padding: 0 28px; border-radius: 6px;
  background: var(--blanco); color: var(--noche); font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.ficha-agregar:hover { background: #e4e4e1; }

/* ── Catálogo: título, filtros (ambientes y orden, enlaces), grilla de tarjetas y «Ver más». ── */
.catalogo { padding-top: clamp(32px, 4vw, 64px); }
.catalogo-cabeza { margin-bottom: clamp(20px, 2.4vw, 36px); }
.catalogo-cabeza h1 { font-size: clamp(38px, 5.2vw, 84px); line-height: 1.02; overflow-wrap: anywhere; }
.catalogo-bajada { margin: .55em 0 0; font-size: max(17px, 1.6vw); line-height: 1.3; color: var(--niebla); }
.catalogo-filtros {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 32px;
  margin-bottom: clamp(24px, 2.8vw, 44px); padding: 2px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.catalogo-filtros ul { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.catalogo-filtros a {
  display: flex; align-items: center; justify-content: center; min-width: var(--toque); min-height: var(--toque);
  color: var(--niebla); white-space: nowrap;
}
.catalogo-filtros a:hover, .catalogo-filtros a[aria-current="page"] { color: var(--blanco); }
.catalogo-filtros a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 2px;
}
.catalogo-ambientes a { font-size: max(17px, 1.4vw); font-weight: 600; letter-spacing: -.015em; }
.catalogo-orden { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(16px, 2vw, 32px); }
.catalogo-orden a, .catalogo-cuenta { font-size: max(15px, 1.05vw); }
.catalogo-cuenta { margin: 0; color: var(--niebla); }
.catalogo-grilla {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(12px, 1.3vw, 20px);
  margin: 0; padding: 0; list-style: none;
}
/* Los títulos de las publicaciones son largos: hasta 3 renglones en la tarjeta (el entero, en la ficha), y siempre el
   lugar de 3, así los precios de una fila quedan a la misma altura (interlineado 1,25 de secciones.css). */
.catalogo-grilla .tarjeta-nombre {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  min-height: calc(3 * 1.25em);
}
.catalogo-vacio { padding: clamp(16px, 3vw, 48px) 0; }
.catalogo-vacio p { margin: 0 0 4px; font-size: max(18px, 1.8vw); line-height: 1.35; overflow-wrap: anywhere; }
.catalogo-paginas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 40px;
  margin-top: clamp(40px, 5vw, 72px);
}
.catalogo-mas {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  min-width: min(100%, 280px); padding: 0 32px; border: 1.5px solid var(--blanco);
  font-size: max(17px, 1.3vw); font-weight: 600; letter-spacing: -.01em;
}
.catalogo-mas:hover { background: var(--blanco); color: var(--noche); }

/* ── Ofertas (ofertas.html): el título como el del catálogo; debajo, Oportunidades (la sección del inicio, con su
   título más chico) y los precios especiales (la grilla del catálogo), una sección debajo de otra sin el aire doble de
   .bloque; sin nada, lo vacío del catálogo. ── */
.ofertas-pagina > .bloque { padding-top: 0; }
.ofertas-pagina > .ofertas-cabeza { padding-top: clamp(32px, 4vw, 64px); padding-bottom: 0; }
.ofertas-pagina .oportunidades-titulo, .ofertas-sub { font-size: clamp(30px, 3.6vw, 56px); }
.ofertas-sub { margin-bottom: clamp(24px, 3vw, 44px); }

/* ── 404 ── */
.no-encontrado {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(64px, 10vw, 160px) var(--borde);
}
.no-encontrado h1 { font-size: clamp(40px, 6vw, 96px); }
.no-encontrado p { max-width: 36em; margin: .8em 0 0; font-size: max(17px, 1.6vw); line-height: 1.4; color: var(--niebla); }
.no-encontrado-ir {
  display: inline-flex; align-items: center; gap: .6em; min-height: var(--toque); margin-top: 1em;
  font-size: max(17px, 1.6vw); font-weight: 500;
}
.no-encontrado-ir span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.no-encontrado-ir .ico { width: 1.2em; height: 1.2em; transition: transform .2s ease; }
.no-encontrado-ir:hover .ico { transform: translateX(4px); }

/* ── Términos y Privacidad (terminos.html, privacidad.html): texto corrido en una columna angosta; el contacto, un
   enlace que se toca bien (44 px). ── */
.legal {
  max-width: calc(46em + 2 * var(--borde)); margin: 0 auto; padding: clamp(48px, 7vw, 112px) var(--borde);
}
.legal h1 { font-size: clamp(36px, 5vw, 72px); }
.legal h2 { margin: 1.6em 0 .4em; font-size: max(20px, 1.7vw); font-weight: 700; letter-spacing: -.02em; }
.legal p { margin: .6em 0 0; font-size: max(16px, 1.15vw); line-height: 1.55; color: var(--niebla); }
.legal .legal-fecha { margin-top: .8em; font-size: 15px; }
.legal-contacto {
  display: inline-flex; align-items: center; min-height: var(--toque); font-size: max(17px, 1.3vw); font-weight: 600;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px;
}

/* ── Hasta 999 px (tableta): la ficha en una columna (galería arriba, datos debajo) y la grilla de a tres. ── */
@media (max-width: 999px) {
  .ficha-arriba { grid-template-columns: minmax(0, 1fr); }
  .galeria-principal, .una-foto .galeria-principal, .sin-foto .galeria-principal {
    height: auto; max-height: none; min-height: 0; aspect-ratio: 4 / 3;
  }
  .ficha-datos { max-width: 680px; }
  .catalogo-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Celular (hasta 760 px): la foto cuadrada a todo el ancho y las miniaturas más chicas; el título a 24 px; la barra
   de compra sin el nombre (precio, cantidad y «Agregar»); la grilla de a dos. ── */
@media (max-width: 760px) {
  .ficha { --miniatura: 60px; }
  .galeria-principal, .una-foto .galeria-principal, .sin-foto .galeria-principal { aspect-ratio: 1; }
  .ficha-datos h1 { font-size: 24px; }
  .ficha-compra-fila { gap: 8px; padding: 10px var(--borde); }
  .ficha-compra-producto span { display: none; }
  .ficha-compra-producto b { font-size: 19px; }
  .cantidad input { width: 44px; }
  .ficha-agregar { min-width: 0; flex: 1 1 auto; padding: 0 16px; }
  .catalogo-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo-filtros { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .no-encontrado-ir .ico, .galeria-flecha { transition: none; }
  .no-encontrado-ir:hover .ico { transform: none; }
}