/* ==========================================================================
   Carrusel scroll-driven (namespace: cs-*)
   Completamente independiente de slick-carousel / jQuery.
   ========================================================================== */

.cs-carousel-wrap {
  position: relative;
  width: 100%;
  /* Alto total de la zona de scroll: N slides * 100vh.
     Lo fija el JS vía --cs-count (cantidad de slides del config). */
  height: calc(var(--cs-count, 4) * 100vh);
}

.cs-carousel-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  /* Tamaño ideal pedido: ancho del navegador x 85vh de alto */
  height: 85vh;
  overflow: hidden; /* clave: oculta a B fuera de cuadro sin usar opacity */
  background: #E4D9B4; /* color de fondo tomado de las referencias step2-step4 */
}

.cs-carousel-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Contenedor de cada media (img/video). Todas las animaciones de
   transform/border-radius se aplican acá, nunca en .cs-slide-text. */
.cs-slide-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, border-radius;
  transform-origin: center center;
  border-radius: 0;
  /* El estado inicial se pisa siempre por JS en cada frame (rAF);
     estos valores son solo el fallback antes de que corra el JS. */
  transform: translateY(0) scale(1);
}

.cs-slide-media img,
.cs-slide-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* nunca deja franjas vacías, sea cual sea el aspect ratio */
}

/* Zoom Ken Burns: solo mientras el slide está en descanso (full-bleed,
   quieto). El JS agrega/saca esta clase (ver setResting en el JS); nunca
   pisa el transform de .cs-slide-media, que lo controla el JS por rAF. */
@keyframes cs-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(var(--cs-kenburns-scale, 1.08)); }
}

.cs-slide-media img.cs-kenburns,
.cs-slide-media video.cs-kenburns {
  animation: cs-kenburns var(--cs-kenburns-duration, 6000ms) ease-out forwards;
}

/* Capa de textos: independiente de la capa de media, posición fija en
   pantalla. Solo se anima opacity (nunca transform de posición). */
.cs-text-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.cs-slide-text {
  position: absolute;
  right: 40px;
  bottom: 40px;
  max-width: 560px;
  color: #fff;
  opacity: 0; /* controlado por JS en cada frame */
  background: rgba(255,255,255,.9);
  border-radius: 12px;
  max-width: 730px;
  width: 100%;
  padding: 32px;
  overflow: hidden;
  /* pointer-events se controla por JS (ver renderFrame): solo la tarjeta
     en foco lo tiene en 'auto', para que las demás (superpuestas, con
     opacity 0) no tapen los clics de la visible. */
  pointer-events: none;
}

.cs-slide-text span{
  color: #333333;
  font-size: 14px;
  display: block;
}
.cs-slide-text span img{
  width: 24px;
  height: 24px;
  color: #273A78;
  margin-right: 8px;
  display: inline-block;
}
.cs-slide-text .action{
  padding: 48px 0 0 0;
  display: block;
  text-align: right;
}
.cs-slide-text .action a.btn-lbe{
  text-align: center;
  padding: 12px 24px;
  width: 200px;
  display: inline-block;
}
.cs-slide-text .action a.btn-lbe:hover{
  color: white;
}
@media all and (max-width: 800px){
  .cs-slide-text {
    left: 40px;
    right: 40px;
    bottom: 40px;
    width: calc(100vw - 80px);
    max-width: inherit;
  }
}
@media all and (max-width: 600px){
  .cs-slide-text .action a.btn-lbe{
    width: 100%;
  }
}
.cs-slide-text h2 {
  display: block;
  margin: 0 0 0.4em;
  padding: 24px 0 16px 0;
  font-family: "Volkhov", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: #273A78;
}

.cs-slide-text p {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.4;
}
.cs-slide-text{
  .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 1px;
    background-color: #4B97C9;
  }
}
  

/* ---- Secciones de relleno del demo (solo para probar el sticky) ---- */
.cs-filler {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  font-family: system-ui, sans-serif;
  color: #333;
}

.cs-filler--before { background: #f4f1ea; }
.cs-filler--after { background: #eef1f4; }