/* Carrusel de banners — hero configurable desde /gestion/. Reutiliza el look de .shop-head (gradiente navy). */

.carrusel {
  position: relative;
  overflow: hidden;
}

/* Full-width, pegado al header, sin bordes redondeados — mismo criterio que
   .carrusel--portada: antes iba acotado a .wrap (1200px) con radius y margen,
   pensado para no competir con el sidebar+grilla de abajo, pero terminaba
   leyéndose como una tarjeta suelta "flotando" entre el breadcrumb y el resto
   del layout, en vez de una sola superficie continua con el header (reportado
   por Emmanuel: la tienda se sentía desconectada de la identidad de la
   portada). El sidebar/grilla siguen dentro de su propio .wrap más abajo — el
   carrusel ya no comparte ese contenedor, solo el ancho de la ventana. */
.carrusel--acotado {
  margin: 0;
}

/* Variante de la portada: a todo el ancho de la ventana, sin bordes redondeados y
   más alto que en la tienda. El alto sale de la proporción de la pieza: con banners
   de 2400x480 (5:1) es ancho/5, así que 273px en un notebook de 1366 y 387px en
   1920. La proporción NO está escrita acá — la pone la imagen a través de
   .carrusel-medida —, así que cambiarla es cambiar el arte, no el CSS; lo único que
   hay que revisar es el techo de más abajo. Pegado al hero, sin margen. */
.carrusel--portada {
  margin: 0;
  border-radius: 0;
}

/* El carrusel es lo primero de la portada, justo bajo la barra superior. A propósito
   NO se le mete debajo con un margen negativo, como sí hacía el hero: los banners son
   piezas con texto y logos, y la barra les comería los 74px de arriba. Esa franja
   queda del navy oscuro que .hd-dark le pone al body (ver landing.css). */

/* El techo de 320px de arriba es de la variante "tienda", donde el carrusel va
   acotado a 1200px. A todo el ancho de la portada ese techo achica la pieza y le
   deja franjas oscuras a los lados, así que acá se sube: el banner llega a su alto
   natural (ancho / 3 con piezas de 2400x800) y llena el ancho completo. Los 700px
   son solo un tope de seguridad para monitores muy anchos: con 3:1 recién entra en
   juego sobre los 2100px de ancho. OJO: bajarlo NO hace el banner más chico y
   proporcionado, lo deja con franjas oscuras a los lados, porque el slide usa
   `contain` para no recortar la pieza. */
.carrusel--portada .carrusel-medida--img {
  /* El alto nativo de la pieza (2400 / 5 = 480): pasado eso el banner se vería
     ampliado y perdería nitidez. Se alcanza recién en monitores de 2400px de ancho.
     Acotado a --img (no a .carrusel-medida a secas, que también lleva
     .carrusel-medida--hero): ese 480px topaba también la medida del hero, y con
     la trust bar (.hero-stats) su contenido real ya supera los 480px en mobile —
     el hero quedaba recortado a esa altura y el track no reflejaba su alto real
     (confirmado con Playwright: .carrusel-medida--hero medía 480px fijo pese a que
     su .hero-grid interno medía 627px reales). El hero no tiene techo propio: su
     contenido decide, igual que el resto del texto de la página. */
  max-height: 480px;
}

/* La variante de portada tenía acá un min-height de 190px para que el banner no
   quedara tan bajo en celular. Se retiró por lo mismo que el piso del track: la pieza
   a 390px de ancho mide 130px, así que esos 190 le sumaban 60px de barras navy arriba
   y abajo. Vale más un banner bajo que un banner con barras; si en algún momento se
   quiere más presencia en celular, el camino es una pieza propia para móvil, no
   estirar la caja. */

.carrusel-track {
  position: relative;
  /* Piso de emergencia SOLO para un banner sin imagen (imagen es opcional en el
     modelo): sin la copia de medida el track colapsaría a cero. Con imagen se
     anula justo abajo. */
  min-height: 200px;
  /* overflow:hidden acá (no solo en .carrusel, el padre) — .carrusel-cinta
     (ver más abajo) es más ancha que el track real (todos los slides en fila,
     N×100%), y esto es lo que recorta los que no corresponde ver. */
  overflow: hidden;
}
/* .carrusel-cinta: el TRACK REAL (antes ese nombre lo llevaba .carrusel-track,
   que ahora es solo el contenedor que da el overflow+la altura). Todos los
   slides en fila, uno junto a otro (flex, no position:absolute apilado) — un
   solo translateX sobre esta cinta mueve TODOS los slides como una sola
   franja continua, así el saliente y el entrante se sienten empujarse el uno
   al otro, en vez de dos capas independientes que se cruzan encima (el bug
   real reportado por Emmanuel: "el banner 1 nunca se mueve... la imagen del
   banner 2 se mueve hacia un lado y aparece en medio, no es como que se
   empujen". Con .carrusel-slide en position:absolute + inset:0 —el mecanismo
   anterior— cada slide SÍ animaba su propio transform, pero al estar
   superpuestos en el mismo lugar exacto, visualmente uno desaparecía debajo
   del otro por z-index en vez de sentirse como un empuje físico). El JS
   (carrusel.js) calcula el translateX exacto según el ancho real del
   viewport — ver moverCinta(). */
.carrusel-cinta {
  /* absolute + inset:0, NO relative: relative la deja en el flujo normal del
     documento, apilada DEBAJO de .carrusel-medida-stack en vez de superpuesta
     sobre ella — el track terminaba sumando las dos alturas (medido: 1023px
     de track para un stack+cinta de ~511px cada uno, el doble) y el banner
     real quedaba flotando a mitad del track con toda esa franja vacía arriba
     (bug real, reportado por Emmanuel: "el fondo de los banners usa mucha más
     altura"). absolute la superpone exactamente sobre el stack, que es quien
     sigue dando la altura real del track vía flujo normal. */
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
  transition: transform 750ms cubic-bezier(.22,.61,.36,1);
}
.carrusel-cinta[style*="none"] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .carrusel-cinta { transition: none; }
}

/* Con la copia de medida presente, el alto lo da la pieza y el piso de arriba solo
   estorba: en celular la pieza mide menos que 200px (148px a 485 de ancho, 117 a 390),
   así que el piso le dejaba barras arriba y abajo — 24px y 22px, medidas a 485. Eran
   invisibles mientras el sobrante se veía blanco; al pintarlo navy quedaron a la vista.
   En escritorio esto no cambia nada: ahí la pieza mide 400px y nunca toca el piso.
   Solo aplica a la variante "tienda" — en "portada" el min-height real lo pone
   .carrusel--portada .carrusel-track en landing.css (piso de la primera pantalla,
   ver esa regla): sin excluir portada acá, esta regla —misma especificidad y
   cargada después, carrusel.css entra tras landing.css en <head>— la pisaba
   silenciosamente y el carrusel de portada perdía su altura mínima. */
.carrusel-track:has(.carrusel-medida):not(.carrusel--portada .carrusel-track) {
  min-height: 0;
}

/* Copia del primer banner, en el flujo pero invisible: solo aporta la altura (los
   slides reales son absolute y no la aportan). El max-height es el techo: una imagen
   vertical estiraba el carrusel a pantalla completa; pasado ese alto, la imagen se
   achica dentro del ancho disponible en vez de seguir creciendo. */
.carrusel-medida {
  display: block;
  width: 100%;
  /* height:auto + max-height no bastaría: la caja de la <img> conserva su alto aunque
     el contenido se achique. Con object-fit el elemento sí se recorta al techo. */
  height: auto;
  /* 480px = el alto nativo de la pieza (2400/5, banners 5:1) — mismo techo que
     .carrusel--portada usa más abajo. Antes esta regla base valía 240px (pensado
     para "tienda" acotada a .wrap de 1200px: 1200/5), pero desde que el carrusel
     de tienda pasó a full-width (ver la nota en .carrusel--acotado) ese techo
     quedaba corto para el ancho real de la ventana, y en un carrusel más ancho
     que 1200px el banner topaba a 240px de alto en vez de crecer hasta su
     tamaño nativo — se veía chico y con más aire alrededor del que debería. */
  max-height: 480px;
  object-fit: contain;
  object-position: top;
  visibility: hidden;
}
/* El techo de arriba es de la variante "tienda" (banner acotado a .wrap): en
   "portada", .carrusel-medida--hero también hereda .carrusel-medida y quedaba
   topado a los mismos ~240px, aunque el hero de texto no tiene nada que ver con
   el banner de imagen ni con ese cálculo — con la trust bar (.hero-stats) el
   hero real ya supera ese techo en mobile y quedaba recortado (confirmado con
   Playwright: el stack medía 260px pese a que el .hero-grid real medía 591px).
   El hero de texto no tiene techo propio: crece con su contenido, como el resto
   del texto de la página. */
.carrusel--portada .carrusel-medida--hero { max-height: none; }

/* En "tienda" .carrusel-medida se aplica directo sobre un <img> (arriba). En
   "portada" (ver carrusel.html) es un <picture class="carrusel-medida
   carrusel-medida--img"> — el <img> real vive DENTRO de esa clase, así que sin esta
   regla no hereda width/object-fit/max-height y conserva su tamaño intrínseco de
   archivo (ej. 2400×640 tal cual, sin escalar al ancho del track). Eso rompía la
   medida: el <picture> medía bien, pero el <img> nunca aportaba su alto real
   proporcional, y el stack de medida (abajo) terminaba siempre ganado por el hero
   aunque el banner real fuera más bajo — la causa de la franja navy vacía en mobile
   (banner de ~208-265px "flotando" en un track de 480px). */
.carrusel-medida--img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: inherit;
  object-fit: inherit;
  object-position: inherit;
}

/* Slides: cada uno ocupa un slot de la cinta (flex: 0 0 100%, EN FILA, ya no
   position:absolute superpuesto). El desplazamiento real lo hace un solo
   translateX sobre .carrusel-cinta (arriba) — un slide no tiene transform
   propio, así que el saliente y el entrante se sienten empujarse el uno al
   otro como una sola franja continua (ver la nota extensa en .carrusel-cinta
   de por qué el mecanismo anterior, slides absolutos independientes, no
   lograba ese efecto pese a que técnicamente sí animaban). */
.carrusel-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--marine-900) 0%, var(--marine-700) 55%, var(--marine-600) 100%);
}

/* .carrusel-img vive dentro de un <picture> sin estilos propios (ver
   carrusel.html) — <picture> es inline/inline-block por defecto y colapsa a la
   altura intrínseca de la imagen, así que height:100% en el <img> terminaba
   siendo 100% de ESE contenedor colapsado (276px), no del slide completo — el
   object-fit:cover de mobile (ver @media 680px abajo) no tenía margen real
   para recortar porque el <img> nunca creció más allá de su alto natural
   (confirmado con Playwright: getBoundingClientRect seguía dando 276px de alto
   con cover ya aplicado). display:block + height:100% en el <picture> le pasa
   la altura completa del slide al <img> de adentro. */
.carrusel-slide picture { display: block; width: 100%; height: 100%; }
.carrusel-img {
  width: 100%;
  height: 100%;
  /* contain, no cover: los banners son piezas con texto y logos, recortarlos los
     mutila. Si la imagen no calza con el aspect-ratio del track, el gradiente de
     fondo rellena el sobrante (banners de antes de imagen_mobile, en mobile). */
  object-fit: contain;
}

/* Solo el slide is-active es interactivo/alcanzable — los demás (fuera de
   vista en la cinta) no deben responder a click ni foco aunque estén en el
   DOM; carrusel.js además los marca inert. */
.carrusel-slide:not(.is-active) { pointer-events: none; }

/* Stack de medida en grid: todos los hijos ocupan la misma celda (grid-area:1/1),
   así el contenedor mide el MÁS ALTO de todos sin sumarlos. En la variante
   "portada" puede haber un hero de texto Y un banner de imagen compitiendo por
   darle altura al track; en "tienda" sigue habiendo como máximo una
   .carrusel-medida (la de imagen), así que el grid de una celda no cambia nada
   ahí — sigue siendo "una sola caja mide el track", solo que ahora soporta más
   de una fuente de altura sin reescribir nada por variante.

   Vive como HERMANO de .carrusel-cinta dentro de .carrusel-track (ver
   carrusel.html) — no dentro de la cinta: la cinta es flex (todos sus hijos
   son slides reales en fila), y este stack solo aporta altura, nunca debe
   contarse como un slot más del recorrido. */
.carrusel-medida-stack { display: grid; }
/* align-items:start (no el stretch por defecto de grid): sin esto, cada hijo con
   grid-area:1/1 se ESTIRA a la altura de la fila (el máximo entre hero e img),
   así que .carrusel-medida--img medía 438px (igual que el hero) aunque su <img>
   real solo necesitara 276px con imagen_mobile 1.5:1 — el track heredaba esa
   altura inflada de .carrusel-medida-stack, y el banner real (dentro de
   .carrusel-cinta, absolute sobre el stack) quedaba centrado en ese espacio de
   más, con una franja de aire navy arriba y abajo (reportado por Emmanuel: "no
   ocupa toda la pantalla, se ve incompleto"). Con start, el stack sigue
   midiendo el máximo real de sus hijos (eso no cambia: el grid dimensiona la
   fila por el contenido más alto), pero cada hijo individual queda a SU alto
   real dentro de esa celda, sin estirarse. */
.carrusel-medida-stack > * { grid-area: 1 / 1; align-self: start; visibility: hidden; pointer-events: none; }

/* Sin copy encima de la imagen: si tiene enlace, toda el área del slide es clickeable. */
.carrusel-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carrusel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(11, 31, 46, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.carrusel-arrow:hover { background: rgba(11, 31, 46, 0.6); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-50%) scale(1.05); }
.carrusel-arrow .lucide, .carrusel-arrow i { width: 18px; height: 18px; }
.carrusel-arrow.prev { left: 16px; }
.carrusel-arrow.next { right: 16px; }

/* Los puntos son blancos porque nacieron sobre banners oscuros. Un banner claro
   —que es lo normal en una pieza de producto— los dejaba invisibles: medido, el punto
   activo daba rgb(255,255,255) sobre un fondo de rgb(243,247,250). La pastilla oscura
   detrás los hace legibles sobre cualquier banner, claro u oscuro, sin tener que
   adivinar el tono de la imagen. */
.carrusel-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: rgba(11, 31, 46, 0.42);
  backdrop-filter: blur(6px);
}

/* Círculo siempre (nunca pastilla alargada): el activo antes crecía SOLO en
   ancho (7px → 22px, círculo → barra), y con apenas 2 slides (hero + 1 banner,
   el caso real de hoy) esos dos puntos se leían como un interruptor/switch en
   vez de "puntos de página" (reportado por Emmanuel, con captura). Con
   transform:scale ambos ejes crecen igual — sigue siendo un círculo, solo más
   grande — inconfundible como indicador de posición. */
.carrusel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}

.carrusel-dot:hover { background: rgba(255, 255, 255, 0.6); }

.carrusel-dot.is-active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.35);
}

@media (max-width: 680px) {
  .carrusel-arrow { display: none; }
  /* Solo en "portada": el track comparte alto entre el hero de texto y el
     banner de imagen (.carrusel-medida-stack mide el más alto de los dos, a
     propósito, para no saltar de layout al rotar entre ambos — ver esa regla
     más abajo). En mobile el hero casi siempre mide más que el banner (aquí,
     438px vs 276px con la pieza de prueba actual), así que con contain la
     imagen quedaba centrada dentro de ese alto compartido, con una franja de
     aire navy arriba y abajo — se leía como "no ocupa toda la pantalla, banner
     incompleto" (reportado por Emmanuel). cover llena ese alto completo
     recortando el sobrante lateral en vez de dejar aire — aceptable en mobile
     porque ya no hay tanto ancho para lucir la pieza completa de todos modos.
     "tienda" no tiene hero compitiendo por altura, así que ahí se queda con
     contain (banner nunca se recorta). */
  .carrusel--portada .carrusel-img { object-fit: cover; }
}