.bep-disponible-en {
  width: 100%;
  scroll-margin-top: var(--bep-navbar-height);
  padding-top: var(--bep-section-padding-y);
  padding-right: 0px;
  padding-bottom: var(--bep-section-padding-y);
  padding-left: 0px;
  background: linear-gradient(to top, #eef3f8 17.784%, #e6ecf1 52.7933%, #ffffff 100%);
}

.bep-disponible-en-container {
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding-top: var(--bep-section-padding-y);
  padding-right: var(--bep-container-padding);
  padding-left: var(--bep-container-padding);
}

/* Reveal resting state (contexto.js/diferencial.js/casos-de-uso.js convention) */
.bep-disponible-en-title {
  text-align: center;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: var(--bep-font-section-title-size);
  color: var(--bep-color-titulo);
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
}

.bep-disponible-en-title strong {
  font-weight: 500;
}

.bep-disponible-en-subtitle {
  max-width: 800px;
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--bep-font-body);
  font-size: var(--bep-font-card-text-size);
  line-height: normal;
  color: var(--bep-color-cuerpo);
  opacity: 0;
  transform: translateY(20px);
}

/* Reveal resting state for the marquee block (disponible-en.js) — this only
   fades/slides the outer wrapper; .bep-disponible-en-track's own infinite
   bep-disponible-en-scroll keyframe (below) keeps running underneath,
   untouched. */
.bep-disponible-en-marquee {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
  margin-bottom: var(--bep-section-padding-y);
  opacity: 0;
  transform: translateY(20px);
}

/* disponible-en.js clones .bep-disponible-en-group at runtime until the
   track is at least 2x the marquee's viewport width, then sets
   --bep-disponible-en-shift to that one group's measured rendered width
   (px). The keyframe below translates by exactly that amount — one
   group-width — so the loop is seamless no matter how many clones exist or
   how wide the viewport is (unlike a fixed copy-count + percentage, which
   only covers viewports up to a hardcoded width). The 0px fallback keeps
   the track visually static (not broken) if JS hasn't run yet. */
.bep-disponible-en-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: bep-disponible-en-scroll 26s linear infinite;
}

.bep-disponible-en-marquee:hover .bep-disponible-en-track {
  animation-play-state: paused;
}

.bep-disponible-en-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Spacing lives on each logo link's own margin-right (not a `gap` on the
   group/track) so every group — original and cloned — is always exactly
   equal width, whatever the logos' individual (auto) widths turn out to
   be. That equal width is what --bep-disponible-en-shift measures. */
.bep-disponible-en-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 56px;
}

.bep-disponible-en-logo {
  height: 64px;
  width: auto;
}

@keyframes bep-disponible-en-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--bep-disponible-en-shift, 0px)));
  }
}

/* Carrusel Embla, mobile-only — desktop/tablet siguen con el marquee de
   arriba (@keyframes bep-disponible-en-scroll) intacto, sin ningún cambio.
   Oculto por default para que ni siquiera se mida/renderice fuera de
   mobile. Mismo resting state de reveal que .bep-disponible-en-marquee
   (disponible-en.js suma este elemento al mismo tween). */
.bep-disponible-en-embla {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

.bep-disponible-en-embla-container {
  display: none;
}

@media (max-width: 768px) {
  .bep-disponible-en-container {
    padding-bottom: var(--bep-section-padding-y);
  }

  .bep-disponible-en-marquee {
    display: none;
  }

  .bep-disponible-en-embla {
    display: block;
    margin-top: 40px;
    overflow: hidden;
    cursor: grab;
  }

  .bep-disponible-en-embla:active {
    cursor: grabbing;
  }

  /* Mismo truco que Cómo Actúa: margin-left negativo + width compensado en
     el elemento que Embla trata como "container" (primer hijo del
     viewport), para que su rect.left quede en 0 al momento en que Embla
     mide el layout por primera vez — sin esto, el padding lateral de
     .bep-disponible-en-container (var(--bep-container-padding)) desalinea
     el scrollSnaps interno de Embla (confirmado con Playwright en Cómo
     Actúa). Sin gap entre slides: con un solo slide a pantalla completa
     (flex:0 0 100%) no hay ninguna separación que mostrar, y gap>0 con
     loop:true rompe esa misma alineación de reposo — también confirmado
     ahí, así que se evita por completo acá. */
  .bep-disponible-en-embla-container {
    display: flex;
    gap: 0;
    margin-left: calc(var(--bep-container-padding) * -1);
    width: calc(100% + var(--bep-container-padding));
  }

  .bep-disponible-en-embla-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding-left: var(--bep-container-padding);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}