/* =============================================================================
   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(2);
}
.webninja-main-carousel.hn-zooming,
.webninja-main-carousel.hn-zooming .flickity-viewport{ touch-action:none!important; }
.webninja-main-carousel .zoom-active{ cursor:move; }
.webninja-main-carousel .zoom-active img{ user-select:none; -webkit-user-drag:none; }

/* 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 */
.webninja-gallery .zoom-indicator{
  position:absolute;
  top:10px;
  left:10px;
  background:transparent;
  color:#171717;
  padding:10px;
  width:44px;
  height:44px;
  border-radius:0;
  box-shadow:none;
  font-size:13px;
  z-index:5;
  opacity:1;
  border:0;
  cursor:pointer;
  transition: opacity .3s ease;
  display:flex;
  align-items:center;
  gap:5px;
}
.webninja-gallery .zoom-indicator:is(:hover,:focus){ background:transparent; color:#171717; box-shadow:none; }
.webninja-gallery .zoom-indicator svg{ width:24px; height:24px; flex:none; filter:drop-shadow(0 0 1px #fff); }
/* Stable fallback while scripts load or the editor rebuilds the widget. */
.webninja-main-carousel:not(.flickity-enabled) > .carousel-cell:not(:first-child){ display:none; }
.webninja-thumbnail-carousel:not(.flickity-enabled){ display:flex; overflow:hidden; }
.webninja-thumbnail-carousel:not(.flickity-enabled) > .carousel-cell-thumb{ flex-shrink:0; }
@media(prefers-reduced-motion:reduce){
  .webninja-main-carousel .carousel-cell img{ transition:none; }
}

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