/* Carrusel de fotos en tarjetas del grid — Maxxage */
/* Las fotos se apilan; solo la activa es visible (fade suave) */
.ec-carousel { position: absolute; inset: 0; }
.ec-carousel .ec-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  opacity: 0; transition: opacity 0.6s ease;
  will-change: opacity;
}
.ec-carousel .ec-slide.is-active { opacity: 1; }

/* Puntitos indicadores */
.ec-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 4; pointer-events: none;
}
.ec-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 3px rgba(0,0,0,0.4);
  transition: all 0.3s ease; pointer-events: auto; cursor: pointer;
}
.ec-dot.is-active {
  background: #fff; width: 18px; border-radius: 3px;
}

/* En desktop, flechas sutiles al pasar el cursor */
.ec-has-carousel .ec-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.35); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4; opacity: 0; transition: opacity 0.25s;
  font-size: 16px; line-height: 1; user-select: none;
}
.ec-has-carousel .ec-nav.ec-prev { left: 6px; }
.ec-has-carousel .ec-nav.ec-next { right: 6px; }
@media (hover: hover) {
  .ec-has-carousel:hover .ec-nav { opacity: 1; }
}
/* En móvil no mostramos flechas (se usa swipe) */
@media (hover: none) {
  .ec-has-carousel .ec-nav { display: none; }
}