/* ===== Bloque 1: mini banner full-bleed ===== */
/* aspect-ratio:3/1 en vez de min-height fijo — coincide exacto con la
   proporción real de bepantol-casos-uso-modelo.webp (2400x800), así
   object-fit:cover no tiene ningún sobrante que recortar arriba/abajo ni
   a los costados: se ve la imagen completa. */
.bep-casos-uso-banner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
}

.bep-casos-uso-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Sin overlay — la imagen se ve tal cual. */
.bep-casos-uso-banner-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding: 0 var(--bep-container-padding);
}

.bep-casos-uso-eyebrow {
  max-width: 600px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bep-color-footer-texto);
  opacity: 0;
  transform: translateY(20px);
}

.bep-casos-uso-title {
  max-width: 600px;
  margin-top: 12px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: var(--bep-font-section-title-size);
  line-height: 1.1;
  color: var(--bep-color-footer-texto);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

.bep-casos-uso-text {
  max-width: 600px;
  margin-top: 16px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: var(--bep-font-card-text-size);
  line-height: normal;
  color: var(--bep-color-footer-texto);
  opacity: 0;
  transform: translateY(20px);
}

.bep-casos-uso-text strong {
  font-weight: 600;
}

/* ===== Bloque 2: carrusel Embla + Autoplay ===== */
/* Fondo #edf1f4 — placeholder, color final pendiente de definir. */
/* Reveal resting state for the carousel block (casos-de-uso.js) — same
   convention as the banner's eyebrow/title/text, applied to the whole
   carousel instead of per-card. opacity doesn't affect layout, so Embla
   still measures real slide widths at init despite this starting at 0. */
.bep-casos-uso-carousel {
  width: 100%;
  background-color: #edf1f4;
  padding-top: var(--bep-section-padding-y);
  padding-right: var(--bep-container-padding);
  padding-bottom: var(--bep-section-padding-y);
  padding-left: var(--bep-container-padding);
  opacity: 0;
  transform: translateY(20px);
}

/* Embla viewport, mismo criterio que .bep-rutina-embla: overflow:hidden
   clipea el track, cursor comunica el drag manual. */
.bep-casos-uso-embla {
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  overflow: hidden;
  cursor: grab;
}

.bep-casos-uso-embla:active {
  cursor: grabbing;
}

/* Negative margin-left + padding-left por slide en vez de `gap` — mismo
   motivo que .bep-rutina-embla-container: `gap` rompe la costura del loop
   una vez que Embla clona slides para el modo loop. */
.bep-casos-uso-embla-container {
  display: flex;
  margin-left: -24px;
}

/* flex-basis:30% (no 100%/3 exacto) — a diferencia de Rutina, acá se pide
   mostrar ~3 slides completos MÁS un pedazo del siguiente asomando: 100/30
   = 3.33 slides visibles, es decir 3 enteros + ~1/3 del cuarto asomando. */
.bep-casos-uso-embla-slide {
  flex: 0 0 30%;
  min-width: 0;
  padding-left: 24px;
  box-sizing: border-box;
}

.bep-casos-uso-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ícono + línea decorativa en fila, alineados al mismo centro vertical —
   la línea sale desde el costado del ícono hacia la derecha, no queda
   debajo de él. */
.bep-casos-uso-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.bep-casos-uso-card-icon {
  flex-shrink: 0;
  display: block;
  height: 58px;
  width: auto;
}

.bep-casos-uso-card-line {
  flex: 1 1 auto;
  height: 1px;
  background-color: #5e7a81;
}

.bep-casos-uso-card-title {
  max-width: 240px;
  margin-top: 16px;
  font-family: var(--bep-font-pt-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--bep-font-card-title-size);
  line-height: 1.2;
  color: var(--bep-color-titulo);
}

.bep-casos-uso-card-text {
  max-width: 85%;
  margin-top: 8px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: var(--bep-font-card-text-size);
  line-height: normal;
  color: var(--bep-color-cuerpo);
}

@media (max-width: 1024px) {
  /* Sin override acá: la base ya define aspect-ratio:3/1, así que el
     tablet hereda la misma proporción exacta sin recortes. */

  /* 2 slides completos + un pedazo del tercero asomando. */
  .bep-casos-uso-embla-slide {
    flex-basis: 45%;
  }
}

@media (max-width: 768px) {
  /* Mobile no sigue la proporción 3/1 de la imagen (ahí sí conviene
     recortar) — se resetea aspect-ratio y se vuelve al min-height fijo
     de siempre, sin cambios. */
  .bep-casos-uso-banner {
    aspect-ratio: auto;
    min-height: 360px;
  }

  .bep-casos-uso-eyebrow,
  .bep-casos-uso-title,
  .bep-casos-uso-text {
    max-width: 100%;
    text-align: center;
  }

  .bep-casos-uso-embla-container {
    margin-left: -16px;
  }

  /* 1 slide completo, sin peek del siguiente — a diferencia del resto de
     breakpoints, padding-left se mantiene igual al margin-left negativo de
     arriba (mismo valor, 16px) en vez de sacarlo: si se quitara, el slide
     quedaría 16px más ancho que el viewport y recortaría los primeros 16px
     de la card por la izquierda (mismo tipo de bug que ya resolvimos en
     Cómo Actúa, sólo que ahí se manifestaba como asomo en vez de recorte). */
  .bep-casos-uso-embla-slide {
    flex: 0 0 100%;
    padding-left: 16px;
  }
}