/* =============================================================================
   HostNauta / WebNinja - hn-flickity.css
   CSS galería Flickity migrado desde functions.php
   ============================================================================= */
.webninja-gallery{ width:100%; margin:0 auto; position:relative; }
.webninja-main-carousel{ margin-bottom:15px; position:relative; }
.webninja-main-carousel .carousel-cell{
  width:100%;
  position:relative;
  overflow:hidden;
  border-radius:8px;
}
.webninja-main-carousel .carousel-cell img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .3s ease-out;
  transform-origin:center center;
}
.webninja-main-carousel .carousel-cell.zoom-active img{
  transform: scale(1.8);
}

/* Video slide */
.webninja-main-carousel .carousel-cell.is-video{ overflow:hidden; }
.webninja-main-carousel .carousel-cell.is-video iframe{
  width:100%;
  height:520px;
  display:block;
  border:0;
  border-radius:8px;
}

.webninja-thumbnail-carousel{ margin-top:10px; }
.webninja-thumbnail-carousel .carousel-cell-thumb{
  width:80px;
  height:80px;
  margin-right:10px;
  cursor:pointer;
  border-radius:4px;
  overflow:hidden;
  opacity:.6;
  transition: all .3s ease;
  position:relative;
}
.webninja-thumbnail-carousel .carousel-cell-thumb:hover{ opacity:.8; }
.webninja-thumbnail-carousel .is-selected{
  opacity:1;
  border:2px solid #4a6cf7;
}
.webninja-thumbnail-carousel img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
  display:block;
}

/* Thumb video overlay */
.webninja-thumbnail-carousel .carousel-cell-thumb.is-video-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
}
.webninja-thumbnail-carousel .carousel-cell-thumb .video-play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  width:34px;
  height:34px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.webninja-thumbnail-carousel .carousel-cell-thumb .video-play-icon i{
  font-size:18px;
  color:#111;
}

/* Indicador zoom */
.zoom-indicator{
  position:absolute;
  bottom:15px;
  right:15px;
  background: rgba(0,0,0,.7);
  color:#fff;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  z-index:5;
  opacity:0;
  transition: opacity .3s ease;
  display:flex;
  align-items:center;
  gap:5px;
}
.carousel-cell:hover .zoom-indicator{ opacity:1; }

@media (max-width:768px){
  .webninja-main-carousel .carousel-cell.zoom-active img{ transform: scale(2.2); }
  .webninja-thumbnail-carousel .carousel-cell-thumb{ width:60px; height:60px; }
  .webninja-main-carousel .carousel-cell.is-video iframe{ height:360px; }
}