/* ============================================================
   Cronosfera · Banner promocional del home
   ------------------------------------------------------------
   Imagen a todo el ancho de la página (de borde a borde). El alto
   sale de la proporción de la imagen subida (--hb-ratio, que pone
   cronos-promos.js); medida recomendada 1920 × 400 px.
   ============================================================ */
.home-banner[hidden] { display: none !important; }
.home-banner {
  --hb-accent: #ddae6c;
  --hb-dot: rgba(243, 241, 238, 0.32);
  position: relative;
  padding: 28px 0 0;
}
@supports (color: oklch(0% 0 0)) {
  .home-banner { --hb-accent: oklch(78% 0.10 75); }
}

.hb-track {
  display: flex;
  width: 100%;
  aspect-ratio: var(--hb-ratio, 1920 / 400);
  max-height: 560px;                 /* por si suben una imagen muy alta */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #0c0e11;
}
.hb-track::-webkit-scrollbar { display: none; }

.hb-slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
}
.hb-slide picture, .hb-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.hb-slide img { object-fit: cover; object-position: center; }
a.hb-slide:focus-visible { outline: 2px solid var(--hb-accent); outline-offset: -4px; }

/* Indicadores sobre la imagen, abajo al centro. Punto pequeno, area de 24px. */
.hb-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 2px;
  pointer-events: none;
}
.hb-dot {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  pointer-events: auto;
}
.hb-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 4px;
  background: var(--hb-dot);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: width .25s ease, background .25s ease;
}
.hb-dot[aria-current="true"]::before { width: 20px; background: var(--hb-accent); }
.home-banner.is-single .hb-dots { display: none; }

/* El banner ocupa la franja oscura que habia entre el hero y "Compra por
   marca": con banner se recortan esos paddings para que la pagina crezca poco. */
body.has-promos .hero-content { padding-bottom: 48px; }
body.has-promos #marcas { padding-top: 64px; }

@media (max-width: 1100px) {
  body.has-promos .hero-content { padding-bottom: 40px; }
}
@media (max-width: 700px) {
  .home-banner { padding-top: 18px; }
  .hb-track { aspect-ratio: var(--hb-ratio-m, var(--hb-ratio, 1920 / 400)); }
  body.has-promos .hero-content { padding-bottom: 22px; }
  body.has-promos #marcas { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-dot::before { transition: none; }
}