/* ==============================
   ACF Gallery HL - Styles
   Adaptado al HTML que indicas
   ============================== */

/* Asegura que el bloque NO se quede centrado con ancho raro en layouts flex/grid */
.acf-gallery-hl{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:18px;
  border-radius:14px;
  background:#0f1120;
  box-sizing:border-box;
  display:block;
  justify-self:stretch;
  align-self:stretch;
}

/* Si Elementor mete el widget en un contenedor flex que centra */
.elementor-widget-container .acf-gallery-hl{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ------------------------------
   Principal (imagen grande)
   ------------------------------ */
.acf-gallery-hl__main{
  width:100%;
  position:relative;
  height:62vh;
  max-height:560px;
  min-height:320px;
  box-sizing:border-box;
}

.acf-gallery-hl__mainBtn{
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
}

.acf-gallery-hl__mainImg{
  width:100%;
  height:100%;
  display:block;
  border-radius:12px;
  object-fit:cover;
}

/* ------------------------------
   Flechas (redondas amarillas)
   ------------------------------ */
.acf-gallery-hl__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:0;
  background:#f2c200; /* cámbialo luego */
  color:#000;
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.acf-gallery-hl__arrow span{
  font-size:28px;
  font-weight:700;
  line-height:1;
  display:block;
}

.acf-gallery-hl__arrow--prev{ left:16px; }
.acf-gallery-hl__arrow--next{ right:16px; }

/* ------------------------------
   Miniaturas (banda inferior)
   Deben ocupar el ancho total de la principal.
   Si sobran huecos, quedan a la izquierda.
   Si hay muchas, scroll horizontal.
   ------------------------------ */
.acf-gallery-hl__thumbs{
  margin-top:16px;
  width:100%;
  display:flex;
  gap:16px;
  justify-content:flex-start;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  padding-bottom:6px; /* para que no “corte” el scrollbar */
}

/* Estética scrollbar */
.acf-gallery-hl__thumbs::-webkit-scrollbar{ height:8px; }
.acf-gallery-hl__thumbs::-webkit-scrollbar-thumb{ background:#5f647a; border-radius:999px; }
.acf-gallery-hl__thumbs{ scrollbar-color:#5f647a transparent; scrollbar-width:thin; }

.acf-gallery-hl__thumbBtn{
  flex:0 0 auto;
  width:160px;
  height:100px;
  padding:0;
  border:0;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  box-sizing:border-box;
  position:relative;
}

.acf-gallery-hl__thumbImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.acf-gallery-hl__thumbBtn.is-active{
  outline:3px solid #f2c200;
  outline-offset:0;
}

/* ------------------------------
   Lightbox propio (pantalla completa)
   ------------------------------ */
.acf-gallery-hl-lightbox{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:rgba(5,7,16,.92);
  display:none;
  z-index:999999;
  box-sizing:border-box;
}

/* Evita el efecto “se ve a la derecha” por transforms en padres (Elementor a veces aplica transforms) */
.acf-gallery-hl-lightbox,
.acf-gallery-hl-lightbox *{
  transform-style:flat;
}

.acf-gallery-hl-lightbox.is-open{
  display:block;
}

.acf-gallery-hl-lightbox__inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 22px 18px 22px;
  box-sizing:border-box;
}

.acf-gallery-hl-lightbox__stage{
  position:relative;
  width:min(1200px, 92vw);
  height:min(78vh, 720px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.acf-gallery-hl-lightbox__img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.acf-gallery-hl-lightbox__close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.acf-gallery-hl-lightbox__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  border:0;
  background:#f2c200; /* cámbialo luego */
  color:#000;
  font-size:30px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.acf-gallery-hl-lightbox__arrow.prev{ left:-10px; }
.acf-gallery-hl-lightbox__arrow.next{ right:-10px; }

/* Tira de miniaturas en lightbox */
.acf-gallery-hl-lightbox__thumbs{
  margin-top:14px;
  width:min(1200px, 92vw);
  display:flex;
  gap:12px;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:8px 0 4px 0;
  box-sizing:border-box;
}

.acf-gallery-hl-lightbox__thumbs::-webkit-scrollbar{ height:8px; }
.acf-gallery-hl-lightbox__thumbs::-webkit-scrollbar-thumb{ background:#5f647a; border-radius:999px; }
.acf-gallery-hl-lightbox__thumbs{ scrollbar-color:#5f647a transparent; scrollbar-width:thin; }

.acf-gallery-hl-lightbox__thumb{
  flex:0 0 auto;
  width:110px;
  height:70px;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  opacity:.75;
  box-sizing:border-box;
}

.acf-gallery-hl-lightbox__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.acf-gallery-hl-lightbox__thumb.is-active{
  opacity:1;
  outline:3px solid #f2c200;
  outline-offset:0;
}

/* Responsive */
@media(max-width:768px){
  .acf-gallery-hl{ padding:14px; border-radius:12px; }
  .acf-gallery-hl__main{ height:46vh; min-height:220px; }
  .acf-gallery-hl__thumbBtn{ width:140px; height:92px; }
  .acf-gallery-hl-lightbox__arrow.prev{ left:6px; }
  .acf-gallery-hl-lightbox__arrow.next{ right:6px; }
}

/* =====================================================
   CORRECCIÓN DE LAYOUT FINAL
   ===================================================== */

/* 1. Forzar centrado real dentro de Elementor */
.elementor-widget-container,
.elementor-widget-container > .elementor-shortcode{
  width:100%;
  display:flex;
  justify-content:center;
}

.elementor-widget-container .acf-gallery-hl{
  width:100%;
  max-width:1200px; /* ajusta si quieres más o menos ancho */
  margin-left:auto;
  margin-right:auto;
}

/* 2. La galería completa define la altura, NO solo la imagen */
.acf-gallery-hl{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* 3. Imagen principal: altura controlada, sin invadir miniaturas */
.acf-gallery-hl__main{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;   /* CLAVE: marco fijo */
  height:auto;            /* elimina vh */
  min-height:0;
  max-height:none;
  margin-bottom:16px;     /* separa claramente de las miniaturas */
  overflow:hidden;
}

/* Asegura que el botón y la imagen respetan el marco */
.acf-gallery-hl__mainBtn,
.acf-gallery-hl__mainImg{
  width:100%;
  height:100%;
  display:block;
}

/* La imagen se adapta al marco sin deformarse */
.acf-gallery-hl__mainImg{
  object-fit:cover;
}

/* 4. Miniaturas SIEMPRE debajo, nunca encima */
.acf-gallery-hl__thumbs{
  position:relative;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0;
  margin:0;
  box-sizing:border-box;
}

/* Evita que Elementor o estilos previos las suban */
.acf-gallery-hl__thumbs,
.acf-gallery-hl__thumbBtn{
  transform:none !important;
}

/* 5. Ajuste visual de miniaturas */
.acf-gallery-hl__thumbBtn{
  flex:0 0 auto;
  width:150px;
  height:95px;
}

/* 6. Responsive */
@media (max-width: 768px){
  .acf-gallery-hl{
    max-width:100%;
  }

  .acf-gallery-hl__main{
    aspect-ratio: 4 / 3;
  }

  .acf-gallery-hl__thumbBtn{
    width:130px;
    height:85px;
  }
}

/* =====================================================
   CENTRADO SOLO PARA LA GALERÍA (SIN AFECTAR A LO DEMÁS)
   ===================================================== */

/* Reset: NO tocar contenedores globales de Elementor */
.elementor-widget-container,
.elementor-widget-container > .elementor-shortcode{
  display:block !important;
  justify-content:initial !important;
}

/* Centrado exclusivamente cuando exista la galería */
.elementor-widget-container .acf-gallery-hl{
  width:100% !important;
  max-width:1200px;       /* ajusta si quieres */
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Si Elementor envuelve con .elementor-shortcode, centramos solo la galería, no el wrapper */
.elementor-widget-container .elementor-shortcode{
  display:block !important;
}

/* La galería en columna, sin afectar a otros bloques */
.acf-gallery-hl{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Marco fijo de la imagen principal sin invadir miniaturas */
.acf-gallery-hl__main{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  min-height:0;
  margin-bottom:16px;
  overflow:hidden;
}

.acf-gallery-hl__mainBtn,
.acf-gallery-hl__mainImg{
  width:100%;
  height:100%;
  display:block;
}

.acf-gallery-hl__mainImg{ object-fit:cover; }

/* Miniaturas siempre debajo */
.acf-gallery-hl__thumbs{
  position:relative;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0;
  margin:0;
  box-sizing:border-box;
}

.acf-gallery-hl__thumbs,
.acf-gallery-hl__thumbBtn{
  transform:none !important;
}

.acf-gallery-hl__thumbBtn{
  flex:0 0 auto;
  width:150px;
  height:95px;
}

@media (max-width: 768px){
  .elementor-widget-container .acf-gallery-hl{
    max-width:100% !important;
  }
  .acf-gallery-hl__main{ aspect-ratio:4/3; }
  .acf-gallery-hl__thumbBtn{ width:130px; height:85px; }
}

.elementor-element-bd061c4{margin: 0 auto;}