.ecss-slider{position:relative;overflow:hidden;width:100%}
/* variable para tiempo del deslizamiento */
.ecss-slider{--ecss-track-time:.8s; --ecss-cap-delay:.25s;}
.ecss-slider.ecss-has-fixed-height{max-height:100vh}

/* Usa la variable para controlar la duración */
.ecss-track{display:flex;transition:transform var(--ecss-track-time) ease;will-change:transform;height:100%}
.ecss-slide{position:relative;min-width:100%;flex:0 0 100%;height:100%}
.ecss-slide picture{display:block;width:100%;height:100%}
.ecss-slide img{width:100%;height:100%;display:block;object-fit:cover;
/* efecto suave de entrada de imagen */
transform:scale(1.02);transition:transform 1.2s ease}
/* al activar el slide, la imagen relaja el zoom */
.ecss-slide.is-active img{transform:scale(1)}

.ecss-slide-link{display:block;width:100%;height:100%}

.ecss-arrow{position:absolute;top:50%;transform:translateY(-50%);padding:.5rem .75rem;border-radius:999px;cursor:pointer;z-index:5}
.ecss-prev{left:10px}
.ecss-next{right:10px}

/* Dots */
.ecss-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:5}
.ecss-dots button{width:10px;height:10px;border-radius:999px;opacity:.5;border:0}
.ecss-dots button[aria-current="true"]{opacity:1}

/* -------- Overlay caption / hero -------- */
.ecss-caption{position:absolute;z-index:6;left:0;top:0;width:100%;height:100%;display:flex;pointer-events:none;padding:2vw}
.ecss-caption .ecss-caption-inner{pointer-events:auto;border-radius:12px}

/* Posiciones */
.ecss-cap-tl{align-items:flex-start;justify-content:flex-start}
.ecss-cap-tc{align-items:flex-start;justify-content:center}
.ecss-cap-tr{align-items:flex-start;justify-content:flex-end}
.ecss-cap-ml{align-items:center;justify-content:flex-start}
.ecss-cap-mc{align-items:center;justify-content:center}
.ecss-cap-mr{align-items:center;justify-content:flex-end}
.ecss-cap-bl{align-items:flex-end;justify-content:flex-start}
.ecss-cap-bc{align-items:flex-end;justify-content:center}
.ecss-cap-br{align-items:flex-end;justify-content:flex-end}

/* Aparición: ahora el caption espera un delay */
.ecss-caption{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease, transform .6s ease;
  transition-delay: var(--ecss-cap-delay, .25s);}
.ecss-slide.is-active .ecss-caption{opacity:1;transform:none}
.ecss-effect-fade{}
.ecss-effect-slide-up{transform:translateY(20px)}
.ecss-effect-zoom{transform:scale(.95)}
.ecss-slide.is-active .ecss-effect-zoom{transform:none}

/* Hero */
.ecss-hero{display:flex;flex-direction:column;gap:.6rem;text-align:center}
.ecss-hero-title{line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.ecss-hero-sub{font-weight:600;opacity:.95;letter-spacing:.12em}
.ecss-hero .ecss-btn{display:inline-block;padding:.6rem 1rem;border-radius:999px;background:#fff;color:#111;font-weight:700;text-decoration:none}