/* Inicio de la tienda BMS, lo que no es portada ni recorrido: la banda de marcas (debajo de la portada), «Elegí por
   ambiente» (los paneles que despliegan las escenas), «Nuestra selección» (la vidriera 3D), el capítulo de audio, «De
   cerca», las guías y «Comprar tranquilo» (tableros 03 a 08 aprobados por Puma, 25-oct-2026, refs/*-oscuro.png; la
   banda, la vidriera y que los paneles desplieguen las escenas, 27-oct). Tema oscuro de tienda.css: blanco y negro, el color lo ponen los
   productos. A todo el ancho del contenido (como la cabecera: --borde a los costados y --ancho de tope); los textos
   escalan con la pantalla y tienen piso de lectura (max(): 15 px el texto, 13 px lo chico). Lo que se toca mide 44 px.
   Va aparte de inicio.css (portada y recorrido) para que ninguno de los dos crezca de más. La tarjeta de toda la tienda
   (.tarjeta*) y la sección «Oportunidades» (.oportunidades*, también en la página de ofertas) viven acá. */

/* ── Lo común: el bloque, su título y el enlace subrayado ── */
.bloque {
  padding: clamp(56px, 7vw, 112px) max(var(--borde), calc((100% - var(--ancho)) / 2));
}
.bloque-titulo {
  margin-bottom: clamp(24px, 3vw, 44px);
  font-size: clamp(40px, 6vw, 96px);
}
.enlace {
  display: inline-flex; align-items: center; min-height: var(--toque);
  font-size: max(16px, 1.35vw); line-height: 1.2; color: var(--blanco); text-align: left;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px;
}
.enlace:hover { text-decoration-thickness: 2.5px; }

/* ── Banda de marcas (_marcas.html; Puma 27-oct 19:15: una sola fila, NEGRA; 20:24: «como el de mayorista, formato y
   altura»): las fichas de la fila de marcas del portal mayorista (bms.css, .catmarcas-fila: 136×58, borde fino,
   esquinas de 4 px y 8 px entre una y otra, también en el celular), del negro de la página, en una fila que corre
   hacia la izquierda. Cada ficha lleva su aire a la derecha (no `gap`): así la vuelta y su copia miden lo mismo y la
   pista, que la lleva dos veces y corre la mitad (--vuelta = lo que dura), vuelve a empezar sin salto. Quieta con el
   mouse o el foco encima y mientras corre la apertura de la portada (.cine-pendiente); con «menos movimiento», quieta y
   con scroll de costado (sin las copias). El tamaño de cada logo (en % de la ficha) lo pone app/tienda/marcas.py, todos
   con la misma superficie, y también cuál va en blanco (.logo-en-blanco: el que no se leería sobre el negro). ── */
.marcas {
  --ficha-ancho: 136px; --ficha-alto: 58px; --ficha-linea: var(--linea);
  padding: 14px 0; background: var(--noche);
}
.marcas-fila { overflow: hidden; }
.marcas-pista {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: marcas-izquierda var(--vuelta, 60s) linear infinite;
}
.marcas-pista li { flex: none; margin-right: 8px; }
.marca-ficha {
  display: grid; place-items: center; width: var(--ficha-ancho); height: var(--ficha-alto);
  border: 1px solid var(--ficha-linea); border-radius: 4px; background: var(--noche); transition: border-color .2s ease;
}
.marca-ficha:hover { border-color: var(--blanco); }
.marca-ficha:focus-visible { outline: 2px solid var(--blanco); outline-offset: -4px; }
.marca-ficha img { max-width: none; object-fit: contain; }
.marca-ficha .logo-en-blanco { filter: brightness(0) invert(1); }
.marcas:is(:hover, :focus-within) .marcas-pista, .cine-pendiente .marcas-pista { animation-play-state: paused; }
@keyframes marcas-izquierda { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Elegí por ambiente (_ambientes.html; tablero 03-categorias-b, el que eligió Puma; vuelve el 27-oct debajo de la
   banda de marcas; 27-oct 20:20 «esto exacto», 20:24 sin el título escrito): los cuatro paneles del tablero, cada uno
   con SU foto del tablero (panel-CLAVE.webp). Las columnas van con el ancho de cada foto (681, 263, 255 y 291 px del
   tablero) y la grilla un poco más baja que el tablero (Puma 27-oct 21:18, «recortá un poco arriba y abajo»: 600 px
   sobre 1527 del ancho de la sección, cqw; el tablero tiene 726): la foto pierde lo mismo arriba y abajo (cover,
   centrada). Si la pantalla es baja, el alto se queda en lo que entra y la grilla sigue a todo el ancho, nunca queda un
   hueco al costado. (Con aspect-ratio + max-height el navegador angosta la grilla para guardar la proporción: por eso
   el alto va con cqw.) Justo debajo de la banda de marcas, el mismo aire que arriba de sus fichas (Puma 21:18: «el
   mismo espacio del carrusel»): la banda ya lo trae abajo, la sección no suma. Cada panel despliega su escena
   (recorrido.js) y el abierto (aria-expanded) va con un marco blanco y el nombre subrayado. ── */
.ambientes { padding-top: clamp(24px, 3vw, 48px); padding-bottom: 0; container-type: inline-size; }
.marcas + .ambientes { padding-top: 0; }
.ambientes-paneles {
  display: grid; grid-template-columns: 681fr 263fr 255fr 291fr; grid-template-rows: minmax(0, 1fr);
  gap: clamp(8px, .9vw, 14px);
  height: min(calc(100cqw * 600 / 1527), calc(100vh - var(--alto-cabecera) - 24px));
  height: min(calc(100cqw * 600 / 1527), calc(100svh - var(--alto-cabecera) - 24px));
  min-height: 320px;
  margin: 0; padding: 0; list-style: none;
}
.ambiente { min-width: 0; }
.ambiente a {
  position: relative; display: block; height: 100%; overflow: hidden; background: var(--grafito);
}
.ambiente img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .6s ease;
}
.ambiente a:hover img { transform: scale(1.03); }
/* Velo suave de abajo (la foto del tablero ya es oscura ahí): el nombre se lee también sobre la alfombra de la casa. */
.ambiente a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(#11121400, #111214a6);
}
/* Los textos con las medidas del tablero, en cqw (% del ancho de la sección, como sobre los 1527 px del tablero), con
   piso de lectura. En los tres angostos el nombre arranca a la misma altura (85,7 % del panel, como en el tablero, o más
   arriba si no entrarían dos renglones de categorías): si «Impresoras, tinta y tóner» baja a dos renglones, crece hacia
   abajo y los nombres siguen en línea. El escritorio, desde abajo, con su corte de renglón del tablero (22em). */
.ambiente-texto {
  position: absolute; z-index: 1; left: max(10px, 1.25cqw); right: 8px; top: min(85.7%, calc(100% - 88px));
  text-shadow: 0 1px 12px #000c;
}
.ambiente-escritorio .ambiente-texto { left: max(14px, 1.9cqw); top: auto; bottom: max(14px, 2.3cqw); }
.ambiente-texto b {
  display: block; font-size: max(22px, 2.3cqw); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}
.ambiente-escritorio .ambiente-texto b { font-size: max(26px, 2.8cqw); }
.ambiente-texto span {
  display: block; max-width: 22em; margin-top: .45em;
  font-size: max(15px, 1.28cqw); line-height: 1.3; color: #e9e9ea;
}
/* El panel abierto: marco blanco por encima de la foto y del velo, y el nombre subrayado. */
.ambiente-panel:focus-visible { outline: 2px solid var(--blanco); outline-offset: -4px; }
.ambiente-panel[aria-expanded="true"]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 2px var(--blanco); pointer-events: none;
}
.ambiente-panel[aria-expanded="true"] .ambiente-texto b {
  text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px;
}

/* ── La tarjeta del catálogo (_tarjeta.html; el lenguaje del tablero 04-mas-vendidos): foto real sobre papel. ── */
.tarjeta { min-width: 0; }
.tarjeta a { display: flex; flex-direction: column; height: 100%; }
.tarjeta-foto {
  position: relative; display: block; flex: none; aspect-ratio: 1 / .98; overflow: hidden; background: var(--papel);
}
/* La foto de la publicación viene sobre blanco: multiplicada, el blanco se vuelve el papel de la tarjeta. */
.tarjeta-foto img {
  position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none;
  object-fit: contain; mix-blend-mode: multiply;
}
.tarjeta-nombre {
  margin-top: clamp(12px, 1.2vw, 18px);
  font-size: max(15px, 1.25vw); font-weight: 500; letter-spacing: -.01em; line-height: 1.25;
}
.tarjeta-precio {
  margin-top: .45em;
  font-size: max(20px, 2.15vw); font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tarjeta-nota { margin-top: .35em; font-size: max(13px, 1.05vw); color: var(--niebla); }
.tarjeta a:hover .tarjeta-nombre { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
/* Con descuento de la web (oferta u oportunidad): el «−N %» arriba a la izquierda de la foto, en la noche de la página
   (como el de la ficha), y el «Antes» tachado debajo del precio, en el lugar de la nota: los precios de una fila siguen
   a la misma altura. */
.tarjeta-pct {
  position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 9px; border-radius: 4px;
  background: var(--noche); color: var(--blanco); font-size: max(14px, 1.05vw); font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.tarjeta-antes { margin-top: .35em; font-size: max(13px, 1.05vw); color: var(--niebla); }
.tarjeta-antes s, .vidriera-antes s, .audio-nota s, .de-cerca-precio s { text-decoration-thickness: 1.5px; }

/* ── Oportunidades (_oportunidades.html; spec 2026-10-27 §5, como la del portal): el título con el reloj «Cambian en»
   (una píldora con borde blanco) y «Aprovechalas hoy» como rótulo (solo texto: no es un botón y no tiene que
   parecerlo), sin color de fondo; la bajada y la grilla de tarjetas, como la del catálogo (4, 3 o 2 columnas; el
   nombre en hasta 3 renglones, así los precios quedan alineados). En la página de ofertas, con su título más chico
   (paginas.css). ── */
.oportunidades-cabeza {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 44px);
}
.oportunidades-titulo { font-size: clamp(40px, 6vw, 96px); }
.oportunidades-reloj-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.oportunidades-reloj, .oportunidades-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase;
  white-space: nowrap;
}
.oportunidades-reloj { padding: 0 14px; border-radius: 999px; }
.oportunidades-reloj { border: 1.5px solid var(--blanco); }
.oportunidades-reloj .ico { width: 17px; height: 17px; stroke-width: 2.2; }
.oportunidades-reloj b { font-size: 16px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.oportunidades-cta { color: var(--niebla); }
.oportunidades-bajada {
  flex: 1 1 100%; margin: 0; font-size: max(17px, 1.6vw); line-height: 1.3; color: var(--niebla);
}
.oportunidades-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;
}
.oportunidades-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);
}
.oportunidades-ir { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 999px) {
  .oportunidades-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Nuestra selección: la vidriera 3D «Encontrá tu próximo favorito» (_seleccion.html; el carril de la maqueta v2 que
   eligió Puma, con su escenario de luz gris, sus tarjetas de papel y sus controles). Sin JS: una fila de tarjetas con
   scroll de costado. Con vidriera.js (.lista): el aro con perspectiva (el JS pone a cada tarjeta su lugar); las de los
   costados muestran solo la foto. ── */
.vidriera {
  --tarjeta-ancho: 272px; --tarjeta-alto: 384px; --escena-alto: 456px;
  --costado: max(var(--borde), calc((100% - var(--ancho)) / 2));
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(56px, 6.5vw, 104px) 0 clamp(28px, 3vw, 48px);
}
.vidriera::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, #3d3f43 0, #202124 34%, var(--noche) 66%);
}
.vidriera-cabeza {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px;
  padding: 0 var(--costado);
}
.vidriera-antetitulo {
  margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--niebla);
}
.vidriera h2 { font-size: clamp(40px, 4.7vw, 76px); font-weight: 500; letter-spacing: -.06em; line-height: 1.02; }
.vidriera h2 span { color: var(--niebla); font-weight: 400; }
.vidriera-intro { max-width: 380px; padding-bottom: 2px; }
.vidriera-intro p { margin: 0 0 4px; font-size: max(15px, 1.05vw); line-height: 1.55; color: #c8c9cb; }
.vidriera-ir {
  display: inline-flex; align-items: center; gap: .7em; min-height: var(--toque);
  font-size: max(16px, 1.1vw); font-weight: 500;
}
.vidriera-ir span { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1.5px; }
.vidriera-ir .ico { width: 1.2em; height: 1.2em; transition: transform .3s ease; }
.vidriera-ir:hover .ico { transform: translateX(4px); }

.vidriera-escena {
  position: relative; margin-top: clamp(16px, 2vw, 32px);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.vidriera-aro {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--costado) 28px;
}
.vidriera-tarjeta {
  flex: none; display: flex; flex-direction: column;
  width: var(--tarjeta-ancho); height: var(--tarjeta-alto); padding: 18px 20px 16px;
  scroll-snap-align: center; overflow: hidden;
  border-radius: 3px; background: var(--papel); color: #141414; box-shadow: 0 25px 35px #0006;
  backface-visibility: hidden; -webkit-user-drag: none;
}
.vidriera-tarjeta:focus-visible { outline: 3px solid var(--blanco); outline-offset: 5px; }
.vidriera-tarjeta-cabeza {
  display: flex; justify-content: space-between; gap: 10px; min-height: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: #454541;
}
.vidriera-tarjeta-cabeza > span:last-child { font-weight: 400; font-variant-numeric: tabular-nums; color: #5f5f5b; }
.vidriera-foto { position: relative; display: block; flex: 1 1 auto; min-height: 0; margin: 10px 0 10px; }
.vidriera-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; mix-blend-mode: multiply; pointer-events: none;
}
.vidriera-nombre {
  display: flex; align-items: flex-end; min-height: calc(2 * 1.3em);
  font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
}
.vidriera-precio {
  margin-top: 8px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.vidriera-nota { margin-top: 2px; font-size: 13px; line-height: 1.4; color: #5d5d59; }
/* Con descuento de la web: el «−N %» sobre la foto (va adentro de .vidriera-foto: también se ve en las tarjetas de los
   costados del aro) y el «Antes» tachado en el lugar de la nota. */
.vidriera-pct {
  position: absolute; left: 0; top: 0; z-index: 1; padding: 3px 8px; border-radius: 3px;
  background: #141414; color: var(--papel); font-size: 14px; font-weight: 800; line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.vidriera-antes { margin-top: 2px; font-size: 13px; line-height: 1.4; color: #5d5d59; }

.vidriera.lista .vidriera-escena {
  height: var(--escena-alto); overflow: hidden; perspective: 1000px; perspective-origin: 50% 42%; cursor: grab;
}
.vidriera.lista .vidriera-escena.arrastrando { cursor: grabbing; }
.vidriera.lista .vidriera-aro {
  position: absolute; top: 28px; left: 50%; display: block; width: 0; height: var(--tarjeta-alto);
  padding: 0; overflow: visible; transform-style: preserve-3d;
}
.vidriera.lista .vidriera-tarjeta {
  position: absolute; top: 0; left: calc(var(--tarjeta-ancho) / -2);
  transform-origin: 50% 50%; will-change: transform; cursor: inherit;
}
.vidriera.lista .vidriera-tarjeta[aria-current="true"] { cursor: pointer; }
.vidriera.lista .vidriera-tarjeta > span:not(.vidriera-foto) { transition: opacity .3s ease; }
.vidriera.lista .vidriera-tarjeta:not([aria-current="true"]) > span:not(.vidriera-foto) { opacity: 0; }
/* Los costados se funden con la noche; abajo, la línea del horizonte con su sombra. */
.vidriera.lista .vidriera-escena::before, .vidriera.lista .vidriera-escena::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 400; width: 13%; pointer-events: none;
}
.vidriera.lista .vidriera-escena::before { left: 0; background: linear-gradient(90deg, var(--noche), transparent); }
.vidriera.lista .vidriera-escena::after { right: 0; background: linear-gradient(270deg, var(--noche), transparent); }
.vidriera-horizonte { display: none; }
.vidriera.lista .vidriera-horizonte {
  display: block; position: absolute; left: 9%; right: 9%; bottom: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff25, transparent);
}
.vidriera.lista .vidriera-horizonte::after {
  content: ""; position: absolute; left: 50%; top: -14px; width: 360px; height: 30px; transform: translateX(-50%);
  border-radius: 50%; background: #0009; filter: blur(17px);
}

.vidriera-control {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px;
  margin: 4px var(--costado) 0; padding-bottom: 18px; border-bottom: 1px solid var(--linea);
}
.vidriera-control[hidden] { display: none; }
.vidriera-ayuda { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--niebla); }
.vidriera-botones { display: flex; align-items: center; gap: 10px; }
.vidriera-boton, .vidriera-play { display: grid; place-items: center; width: var(--toque); height: var(--toque); }
.vidriera-boton {
  border: 1px solid #77787c; border-radius: 50%; transition: background .3s ease, border-color .3s ease;
}
.vidriera-boton:hover { background: #ffffff15; border-color: #ffffff90; }
.vidriera-cuenta {
  min-width: 70px; margin: 0; text-align: center; white-space: nowrap;
  font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.vidriera-cuenta b { font-weight: 600; }
.vidriera-cuenta span { color: var(--niebla); }
.vidriera-play { margin-left: 8px; }
.vidriera-play .ico-pausa, .vidriera-play[aria-pressed="true"] .ico-play { display: none; }
.vidriera-play[aria-pressed="true"] .ico-pausa { display: block; }
.vidriera-play:disabled { opacity: .45; cursor: default; }
.vidriera-fotos { justify-self: end; margin: 0; font-size: 14px; color: var(--niebla); text-align: right; }
/* La pantalla de Puma (1166×554) y las compus bajas: tarjetas un poco más chicas, así el aro y sus controles entran. */
@media (min-width: 761px) and (max-height: 720px) {
  .vidriera { --tarjeta-ancho: 248px; --tarjeta-alto: 344px; --escena-alto: 404px; }
}

/* ── Capítulo de audio (05-capitulo-audio): letra gigante a la izquierda, la foto con la mano a la derecha (4:5, el
   42 % del ancho, como el tablero; puede pasar el alto de la pantalla) y «PLAY» de fondo, apenas más claro que la
   noche. ── */
.audio {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 120px) max(var(--borde), calc((100% - var(--ancho)) / 2));
}
.audio-fondo {
  position: absolute; z-index: 0; left: max(var(--borde), calc((100% - var(--ancho)) / 2)); bottom: -.14em;
  margin: 0; font-size: 21.5vw; font-weight: 800; letter-spacing: -.06em; line-height: .8; white-space: nowrap;
  color: var(--grafito); pointer-events: none; user-select: none;
}
.audio-caja {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); align-items: center; gap: clamp(32px, 5vw, 80px);
}
.audio-texto h2 { font-size: clamp(52px, 8.8vw, 148px); line-height: .9; letter-spacing: -.055em; }
.audio-texto h2 span { display: block; }
.audio-bajada {
  margin: .9em 0 0; font-size: max(18px, 2.2vw); letter-spacing: -.01em; line-height: 1.25; color: var(--niebla);
}
.audio-ir, .de-cerca-ir {
  display: inline-flex; align-items: center; gap: .6em; min-height: var(--toque);
  font-size: max(17px, 1.75vw); font-weight: 500; letter-spacing: -.01em;
}
.audio-ir { margin-top: .6em; }
.audio-ir span, .de-cerca-ir span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.audio-ir .ico, .de-cerca-ir .ico { width: 1.2em; height: 1.2em; transition: transform .2s ease; }
.audio-ir:hover .ico, .de-cerca-ir:hover .ico { transform: translateX(4px); }
.audio-foto { margin: 0; }
.audio-marco { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel); }
.audio-marco img { width: 100%; height: 100%; object-fit: cover; }
.audio-foto figcaption { margin-top: 12px; font-size: max(15px, 1.15vw); line-height: 1.4; }
.audio-precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.audio-nota { display: block; color: var(--niebla); font-size: max(13px, .95vw); }

/* ── De cerca (06-de-cerca): el G502 Hero en tomas de 3:2 con los rótulos del recorrido (inicio.css: .escena-cuadro,
   .escena-lineas, .rotulos, .rotulo). Todo va en .de-cerca-marco, que mide la toma y es el contenedor: --u = 1 px de
   la toma de 1536, así «De cerca» (arriba a la izquierda), los rótulos, el nombre de la vista o el control (abajo a la
   izquierda) y el precio (abajo a la derecha) quedan siempre en las zonas que las tomas dejan libres, como en el
   tablero. Sin JS, las vistas una debajo de otra a todo el ancho (el título sobre la primera, el precio sobre la
   última). ── */
.de-cerca {
  --u: calc(100cqw / 1536);          /* 1 px de la toma: adentro del marco, cqw es el ancho del marco */
  container-type: inline-size;
  position: relative;
}
.de-cerca-marca { display: none; }
.de-cerca-tramo, .de-cerca-escenario { position: relative; }
.de-cerca-marco { position: relative; container-type: inline-size; }
.de-cerca-vistas { margin: 0; padding: 0; list-style: none; }
.de-cerca-vista { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
/* Las tomas son casi del negro de la página, no iguales: los bordes se funden para que no se vea el corte. */
.de-cerca .escena-cuadro img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.de-cerca .rotulo-texto > span { font-size: max(16px, calc(26 * var(--u))); color: var(--blanco); }
.de-cerca-cabeza { position: absolute; z-index: 2; left: max(16px, calc(60 * var(--u))); top: calc(48 * var(--u)); }
.de-cerca h2 { font-size: max(40px, calc(140 * var(--u))); }
.de-cerca-producto { margin: .5em 0 0; font-size: max(15px, calc(20 * var(--u))); color: var(--niebla); }
.de-cerca-producto b { font-weight: 600; color: var(--blanco); }
/* Vista previa: lo que Puma tiene que confirmar antes de publicar, con línea de puntos (y la nota de arriba). */
.a-confirmar { text-decoration: underline dotted var(--niebla); text-underline-offset: .32em; text-decoration-thickness: 1.5px; }
.de-cerca-nota {
  position: absolute; z-index: 2; right: max(16px, calc(60 * var(--u))); top: calc(48 * var(--u)); margin: 0;
  font-size: 13px; color: var(--niebla); text-align: right;
}
.de-cerca-vista-nombre {
  position: absolute; z-index: 1; left: max(16px, calc(60 * var(--u))); bottom: calc(54 * var(--u)); margin: 0;
  font-size: max(15px, calc(26 * var(--u))); color: var(--niebla);
}
.de-cerca-control { display: none; }
.de-cerca-compra {
  position: absolute; z-index: 2; right: max(16px, calc(60 * var(--u))); bottom: calc(54 * var(--u));
  display: flex; flex-direction: column; align-items: flex-end;
}
.de-cerca-precio {
  margin: 0; text-align: right;
  font-size: max(28px, calc(56 * var(--u))); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.de-cerca-precio span {
  display: block; margin-top: 4px; font-size: max(13px, calc(15 * var(--u))); font-weight: 400; letter-spacing: 0;
  color: var(--niebla);
}
.de-cerca-ir { font-size: max(16px, calc(26 * var(--u))); }

/* Con JS («vivo») en la compu: la escena queda fija y la sección mide una escena por vista. La escena es la toma
   ENTERA: a todo el ancho cuando entra en la pantalla (1536×1096, la tableta) y, si la pantalla es baja (la de Puma,
   1166×554), del alto de la pantalla y centrada, con el fondo de la página a los costados (las tomas son de ese mismo
   negro). Recortarla de arriba y de abajo pondría el título sobre el cable y el precio sobre las pesas. Si sobra alto,
   la escena va centrada en la pantalla. */
@media (min-width: 761px) and (min-height: 480px) {
  .de-cerca.vivo .de-cerca-tramo {
    --alto: min(calc(100vh - var(--alto-cabecera)), calc(100cqw * 2 / 3));
    height: calc(var(--alto) * var(--vistas, 3));
  }
  .de-cerca.vivo .de-cerca-marca {
    display: block; position: absolute; left: 0; width: 1px;
    top: calc(100% / var(--vistas, 3) * var(--i, 0)); height: calc(100% / var(--vistas, 3));
    pointer-events: none;
  }
  .de-cerca.vivo .de-cerca-escenario {
    position: sticky; top: calc(var(--alto-cabecera) + (100vh - var(--alto-cabecera) - var(--alto)) / 2);
    height: var(--alto);
  }
  .de-cerca.vivo .de-cerca-marco { width: min(100%, calc(var(--alto) * 1.5)); aspect-ratio: 3 / 2; margin: 0 auto; }
  .de-cerca.vivo .de-cerca-vista { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
  .de-cerca.vivo .de-cerca-vista.activa { opacity: 1; }
  .de-cerca.vivo .de-cerca-vista-nombre { display: none; }
  /* El control del tablero: una línea con un punto por vista; la actual, en blanco y con su tramo marcado. */
  .de-cerca.vivo .de-cerca-control {
    position: absolute; z-index: 2; left: max(16px, calc(60 * var(--u))); bottom: calc(54 * var(--u));
    display: flex; width: max(300px, calc(710 * var(--u))); margin: 0; padding: 0; list-style: none;
  }
  .de-cerca-control::before {
    content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--niebla); opacity: .6;
  }
  .de-cerca-control li { position: relative; flex: 1 1 0; }
  .de-cerca-control a {
    position: relative; display: block; min-height: var(--toque); padding-top: 26px;
    font-size: max(15px, calc(26 * var(--u))); line-height: 1.2; text-align: center; color: var(--niebla);
  }
  .de-cerca-control li:first-child a { text-align: left; }
  .de-cerca-control li:last-child a { text-align: right; }
  .de-cerca-control a::before {
    content: ""; position: absolute; z-index: 1; top: 4px; left: calc(50% - 6px);
    width: 12px; height: 12px; border-radius: 50%; background: var(--niebla);
  }
  .de-cerca-control li:first-child a::before { left: 0; }
  .de-cerca-control li:last-child a::before { left: auto; right: 0; }
  .de-cerca-control a:hover, .de-cerca-control a[aria-current="step"] { color: var(--blanco); }
  .de-cerca-control a[aria-current="step"]::before { background: var(--blanco); }
  .de-cerca-control a[aria-current="step"]::after {
    content: ""; position: absolute; top: 9px; left: 20%; right: 20%; height: 3px; background: var(--blanco);
  }
  .de-cerca-control li:first-child a[aria-current="step"]::after { left: 0; right: 40%; }
  .de-cerca-control li:last-child a[aria-current="step"]::after { left: 40%; right: 0; }
}

/* ── Guías para elegir bien (07-guias): la destacada con foto grande y tres renglones con miniatura. ── */
.guias .bloque-titulo { margin-bottom: clamp(20px, 2.4vw, 36px); }
.guia-destacada {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); align-items: start;
  gap: clamp(24px, 2.5vw, 40px);
  padding-bottom: clamp(24px, 2.4vw, 36px); border-bottom: 1px solid var(--linea);
}
.guia-destacada h3 { font-size: clamp(30px, 4.1vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.guia-texto .enlace { margin-top: clamp(14px, 2vw, 30px); }
.recorte { position: relative; display: block; overflow: hidden; background: var(--grafito); }
.recorte img { position: absolute; max-width: none; height: auto; }
.guias-lista { margin: 0; padding: 0; list-style: none; }
.guia {
  display: grid; grid-template-columns: minmax(0, 1fr) auto clamp(150px, 18.5vw, 285px); align-items: center;
  gap: clamp(16px, 4vw, 72px);
  padding: clamp(12px, 1.1vw, 16px) 0; border-bottom: 1px solid var(--linea);
}
.guia:last-child { border-bottom: 0; }
.guia h3 { font-size: clamp(20px, 2.55vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }

/* ── Comprar tranquilo (08-confianza-pie): banda gris con sus puntos y sus íconos, antes del pie. ── */
.confianza { background: var(--grafito); }
.confianza .bloque-titulo { margin-bottom: clamp(28px, 3.6vw, 56px); font-size: clamp(44px, 8vw, 124px); }
/* Una columna por punto (1-nov-2026: los del tablero son tres; si uno falta, sin hueco a la derecha). */
.confianza-puntos {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none;
}
.confianza-puntos li { min-width: 0; padding: 4px clamp(16px, 2.6vw, 44px); border-left: 1px solid var(--linea); }
.confianza-puntos li:first-child { padding-left: 0; border-left: 0; }
.punto-ico {
  width: clamp(48px, 6vw, 96px); height: auto; aspect-ratio: 1;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.confianza h3 {
  margin-top: clamp(14px, 1.8vw, 28px);
  font-size: max(19px, 1.95vw); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.confianza p { margin: .45em 0 0; font-size: max(15px, 1.4vw); line-height: 1.35; color: var(--niebla); }
.confianza .enlace { font-size: inherit; }
/* Vista previa: lo que todavía no está definido se ve como pendiente (borde de puntos), no como un dato. */
.pendiente {
  display: inline-block; padding: 1px 10px; border: 1px dashed var(--niebla); border-radius: 4px;
  font-size: .9em; letter-spacing: .02em; color: var(--blanco);
}

/* ── Celular (hasta 760 px): cuatro ambientes en una grilla de dos por dos;
   la vidriera más chica y sus controles apilados; todo en una columna; la
   foto del audio debajo del texto; «De cerca» como el recorrido (cada vista entera con números y la lista de rótulos
   debajo); las guías con la miniatura a la derecha. ── */
@media (max-width: 760px) {
  .oportunidades-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oportunidades-titulo { font-size: 40px; }
  .ambientes-paneles {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; min-height: 0;
  }
  .ambiente { aspect-ratio: 3 / 4; }
  .ambiente-texto, .ambiente-escritorio .ambiente-texto {
    left: 12px; right: 12px; top: auto; bottom: 14px;
  }
  .ambiente-texto b, .ambiente-escritorio .ambiente-texto b { font-size: 22px; }
  .vidriera { --tarjeta-ancho: 232px; --tarjeta-alto: 340px; --escena-alto: 396px; padding-top: 48px; }
  .vidriera-cabeza { display: block; }
  .vidriera h2 { font-size: 40px; }
  .vidriera-intro { margin-top: 8px; }
  .vidriera-intro p { display: none; }
  .vidriera.lista .vidriera-escena { perspective: 800px; }
  .vidriera.lista .vidriera-escena::before, .vidriera.lista .vidriera-escena::after { width: 7%; }
  .vidriera-control { grid-template-columns: 1fr; justify-items: center; }
  .vidriera-ayuda { order: 2; }
  .vidriera-fotos { display: none; }
  .audio-caja { grid-template-columns: 1fr; }
  .audio-foto { width: 100%; }
  .audio-fondo { top: 24px; bottom: auto; right: -.04em; left: auto; font-size: 38vw; }
  .de-cerca { padding: 48px 0 32px; }
  .de-cerca-cabeza { position: static; padding: 0 var(--borde) 8px; }
  .de-cerca-nota { position: static; padding: 0 var(--borde) 16px; text-align: left; }
  .de-cerca h2 { font-size: 40px; }
  .de-cerca-vista { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; padding-bottom: 24px; }
  .de-cerca-vista-nombre { position: static; order: -1; padding: 0 var(--borde) 10px; font-size: 18px; color: var(--blanco); }
  .de-cerca-compra { position: static; align-items: flex-start; padding: 0 var(--borde); }
  .de-cerca-precio { text-align: left; }
  .guia-destacada { grid-template-columns: 1fr; }
  .guia { grid-template-columns: minmax(0, 1fr) 38%; grid-template-areas: "titulo foto" "boton foto"; gap: 0 16px; }
  .guia h3 { grid-area: titulo; align-self: end; }
  .guia .enlace { grid-area: boton; align-self: start; justify-self: start; }
  .guia .recorte { grid-area: foto; }
}
@media (max-width: 560px) {
  .confianza-puntos { grid-auto-flow: row; grid-template-columns: 1fr; row-gap: 0; }
  .confianza-puntos li {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 18px 0; border-left: 0; border-top: 1px solid var(--linea);
  }
  .confianza-puntos li:first-child { border-top: 0; padding-top: 0; }
  .punto-ico { grid-row: span 2; width: 44px; }
  .confianza h3 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marca-ficha, .ambiente img, .vidriera-ir .ico, .vidriera.lista .vidriera-tarjeta > span:not(.vidriera-foto),
  .audio-ir .ico, .de-cerca-ir .ico, .de-cerca.vivo .de-cerca-vista { transition: none; }
  .ambiente a:hover img, .vidriera-ir:hover .ico, .audio-ir:hover .ico, .de-cerca-ir:hover .ico { transform: none; }
  /* La banda de marcas, quieta: cada marca una vez, con scroll de costado. */
  .marcas-pista { animation: none; }
  .marcas-fila { overflow-x: auto; }
  .marcas-pista li[aria-hidden="true"] { display: none; }
}