/* ==========================
   HERO CAROUSEL – apilado por opacidad
   Sin animación en imagen, solo texto
   ========================== */

.ezviz-hero-carousel{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#000;             /* evita flash blanco */
  height:100vh;
}

/* Track fijo (NO flex) */
.ezviz-hero-carousel .hero-track{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* Slides apilados uno encima del otro */
.ezviz-hero-carousel .hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
  will-change:opacity;
  z-index:0;
}

/* Slide visible */
.ezviz-hero-carousel .hero-slide.active{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

/* Imagen fija, ocupando todo (sin animación) */
.ezviz-hero-carousel .hero-slide picture,
.ezviz-hero-carousel .hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Texto: única animación (fade + leve desplazamiento) */
.ezviz-hero-carousel .hero-content{
  position:absolute;
  top:50%;
  left:15%;
  transform:translate(-32px,-50%);
  opacity:0;
  max-width:600px;
  color:#fff;
  transition:transform .6s ease, opacity .6s ease;
  will-change:transform, opacity;
}
.ezviz-hero-carousel .hero-slide.active .hero-content{
  transform:translate(0,-50%);
  opacity:1;
}

/* Botón */
.ezviz-hero-carousel .hero-btn{
  background:#0087ff;
  color:#fff;
  text-decoration:none;
  padding:10px 20px;
  border-radius:15px;
  font-weight:600;
  font-size:1.1rem;
  display:inline-block;
  transition:transform .2s ease, background .2s ease;
}
.ezviz-hero-carousel .hero-btn:hover{
  background:#006edf;
  transform:translateY(-2px);
}

.ezviz-hero-carousel .hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #0087ff;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  cursor: pointer;
  font-size: 1.0rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease;
  z-index: 5;
      border: none;
      opacity: 0.7;
}





.ezviz-hero-carousel .hero-arrow:hover{ background:#0087ff; color:#fff; }
.ezviz-hero-carousel .hero-arrow.prev{ left:50px; }
.ezviz-hero-carousel .hero-arrow.next{ right:50px; }

/* Dots */
.ezviz-hero-carousel .hero-dots{
   transform: scale(0.3);
   position:absolute; bottom:24px; left:0; right:0;
  display:flex; justify-content:center; gap:25px; z-index:5;
 
}
.ezviz-hero-carousel .hero-dot{
  width:16px; height:3px; background:#ccc; border:0; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.ezviz-hero-carousel .hero-dot.active{ background:#0087ff; transform:scaleX(1.4); }

/* Tipografía base */
.ezviz-hero-carousel .hero-content h2{
  font-size:clamp(2rem,4vw,4rem);
  font-weight:800; margin:0 0 .4em 0;
  color: white ;
}
.ezviz-hero-carousel .hero-content h3{
  font-size:clamp(1rem,2.5vw,2.5rem);
  font-weight:600; margin:0 0 .4em 0;
  color: white ;
  width: 85%;
}
.ezviz-hero-carousel .hero-content p{
  font-size:clamp(1rem,1.2vw,1.3rem);
  margin:0 0 1.2em 0; line-height:1.3;
}
/* Asegura que el texto

quede por encima del overlay */
.ezviz-hero-carousel .hero-content {
  position: absolute;
  top: 50%;
  transform: translate(-40px, -50%);
  z-index: 2;
  color: #fff;
}

/* Responsive */
@media (max-width:768px){
  .ezviz-hero-carousel .hero-content{
    left:10%; max-width:80%;
  }
  .ezviz-hero-carousel .hero-content h2{ font-size:2.6rem; }
  .ezviz-hero-carousel .hero-content p{ font-size:1.1rem; }
  .ezviz-hero-carousel .hero-btn{ font-size:1rem; padding:12px 24px; }
  .ezviz-hero-carousel .hero-arrow.prev{ left:15px; }
    .ezviz-hero-carousel .hero-arrow.next{ right:15px; }
    .ezviz-hero-carousel .hero-content {top: 20%; }
     .ezviz-hero-carousel {height:90vh;}
     .ezviz-hero-carousel .hero-content h3{
  font-size:clamp(1.5rem,3vw,3rem);
  font-weight:600; margin:0 0 .4em 0;
  color: white ;
  width: 100%;
}
.ezviz-hero-carousel .hero-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%; /* solo cubre el 30% superior */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}


}