/* ───────────────────────────────
   CONTENEDOR PRINCIPAL
   ─────────────────────────────── */
.ibjs-parent {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    height: auto;
    /*
     * Evitamos transiciones sobre background-size: al cambiar de imagen el navegador
     * recalcula el "cover" y puede producir un efecto de "estirado".
     * Mantener sin transición hace el cambio mucho más limpio.
     */
    transition: none;
}

/* ───────────────────────────────
   FILA E ITEMS
   ─────────────────────────────── */
.ibjs-row {
    display: flex;
    width: 100%;
    height: 100%;
}
.ibjs-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,.3);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ibjs-item:last-child { border-right: 0; }

/* ───────────────────────────────
   LIGHTBOX (MEDIA INICIAL EN CARRUSEL)
   ─────────────────────────────── */
.ibjs-hero-lightbox{
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ibjs-hero-lightbox__inner{
    width: min(1100px, 100%);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ibjs-hero-lightbox__content{
    width: 100%;
    max-height: 90vh;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ibjs-hero-lightbox__img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}
.ibjs-hero-lightbox__video{
    display: block;
    width: 100%;
    height: auto;
    max-height: 90vh;
}
.ibjs-hero-lightbox__iframe{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ───────────────────────────────
   CAPAS (overlay + blur)
   ─────────────────────────────── */
.ibjs-overlay-normal,
.ibjs-blur,
.ibjs-overlay-hover,
.ibjs-overlay-car {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: .3s;
}

/* Overlay visible en reposo (modo grid) */
.ibjs-parent[data-overlay-normal="1"] .ibjs-overlay-normal { opacity: 1; }

/* Overlay visible en hover (modo grid) */
.ibjs-parent[data-overlay-enable="1"] .ibjs-item.ibjs-hover .ibjs-overlay-hover { opacity: 1; }

/* Blur hover (modo grid) */
.ibjs-parent[data-blur-enable="1"] .ibjs-item.ibjs-hover .ibjs-blur {
    opacity: 1;
    backdrop-filter: blur(var(--ibjs-blur, 10px));
    -webkit-backdrop-filter: blur(var(--ibjs-blur, 10px));
}

/* Overlay propio del carrusel */
.is-carousel-active .ibjs-overlay-car {
    opacity: 1;
}

/* ───────────────────────────────
   CONTENIDO
   ─────────────────────────────── */
.ibjs-content {
    position: absolute;
    z-index: 3;
    padding: 20px;
    text-align: center;
    width: auto;
    max-width: 90%;
    box-sizing: border-box;
}

/* Reset general */
.ibjs-parent .ibjs-content {
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none;
}

/* ───────────────────────────────
   PRESETS DE POSICIÓN
   ─────────────────────────────── */
.ibjs-parent[data-pos=center] .ibjs-content {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.ibjs-parent[data-pos=top-left] .ibjs-content { top: 5%; left: 5%; }
.ibjs-parent[data-pos=top-center] .ibjs-content { top: 5%; left: 50%; transform: translateX(-50%); }
.ibjs-parent[data-pos=top-right] .ibjs-content { top: 5%; right: 5%; }
.ibjs-parent[data-pos=bottom-left] .ibjs-content { bottom: 5%; left: 5%; }
.ibjs-parent[data-pos=bottom-center] .ibjs-content { bottom: 5%; left: 50%; transform: translateX(-50%); }
.ibjs-parent[data-pos=bottom-right] .ibjs-content { bottom: 5%; right: 5%; }

/* Alineación automática del texto */
.ibjs-parent[data-pos="top-left"] .ibjs-content,
.ibjs-parent[data-pos="bottom-left"] .ibjs-content { text-align: left; }
.ibjs-parent[data-pos="top-right"] .ibjs-content,
.ibjs-parent[data-pos="bottom-right"] .ibjs-content { text-align: right; }

/* ───────────────────────────────
   TEXTO Y BOTÓN
   ─────────────────────────────── */
.ibjs-title, .ibjs-sub, .ibjs-btn { transition: .2s; }

.ibjs-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 3px;
    background: rgba(0,0,0,.25);
}

/* ───────────────────────────────
   VÍDEO DE FONDO / EMBED
   ─────────────────────────────── */
.ibjs-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

/*
 * IMPORTANTE:
 * Los iframes (YouTube/Vimeo) no soportan object-fit, así que simulamos "cover"
 * usando un wrapper con overflow hidden y escalado manteniendo ratio 16:9.
 */
.ibjs-video-embed-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.ibjs-video-embed-wrap .ibjs-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Técnica tipo background-cover (16:9) */
    width: 100vw;
    height: 56.25vw;
    min-width: 177.777778vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    opacity: 0;
    transition: opacity .25s ease;
}

/* Mostrar vídeo/iframe sólo cuando está listo para evitar flashes */
.ibjs-video-bg.ibjs-ready,
.ibjs-video-embed.ibjs-ready {
    opacity: 1;
}

/* ───────────────────────────────
   MODO CARRUSEL — LIMPIEZA
   ─────────────────────────────── */
.is-carousel-active .ibjs-video-bg,
.is-carousel-active .ibjs-video-embed,
.is-carousel-active .ibjs-video-embed-wrap,
.is-carousel-active .ibjs-overlay-normal,
.is-carousel-active .ibjs-overlay-hover,
.is-carousel-active .ibjs-blur {
    display: none !important;
}

.is-carousel-active:not(.ibjs-hero-bg-active) {
    background-image: none !important;
}

/* ───────────────────────────────
   HERO (CORPORATIVO) EN CARRUSEL
   ─────────────────────────────── */
.ibjs-hero-slide { position: relative; overflow: hidden; }

.ibjs-hero-video-bg,
.ibjs-hero-embed-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.ibjs-hero-embed-wrap { overflow: hidden; }

.ibjs-hero-embed-wrap .ibjs-hero-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.777778vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.ibjs-hero-video-bg.ibjs-ready,
.ibjs-hero-embed.ibjs-ready {
    opacity: 1;
}

/* Overlay del carrusel por encima de fondo */
.is-carousel-active .ibjs-overlay-car {
    opacity: 1;
    pointer-events: none;
}


/* ───────────────────────────────
   HERO (CORPORATIVO) COMO FONDO EN CARRUSEL (detrás del swiper)
   - Se adapta a la altura real del widget (no 100vh)
   ─────────────────────────────── */
.ibjs-parent.ibjs-hero-bg-active { position: relative; }

/* Si el contenedor del widget tiene altura definida, herédala */
.elementor-widget-container > .ibjs-parent.ibjs-hero-bg-active { height: 100%; }

.ibjs-parent.ibjs-hero-bg-active .ibjs-hero-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-color:#000;
}

/* Swiper por encima del hero */
.ibjs-parent.ibjs-hero-bg-active .ibjs-row{ position:relative; z-index:2; }

/* Hero media (clases propias para que NO le afecten reglas antiguas del carrusel) */
.ibjs-hero-video-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}

.ibjs-hero-embed-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.ibjs-hero-embed{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  min-width:177.777778%;
  min-height:100%;
  transform:translate(-50%,-50%);
  border:0;
  opacity:0;
  transition:opacity .25s ease;
}

.ibjs-hero-video-bg.ibjs-ready,
.ibjs-hero-embed.ibjs-ready{ opacity:1; }

/* Cuando el hero actúa como fondo, quitamos los fondos por-slide (misma sensación que en GRID) */
.ibjs-parent.ibjs-hero-bg-active.is-carousel-active .swiper-slide.ibjs-item{
  background-image:none !important;
  background-color:transparent !important;
}


/* ───────────────────────────────
   BACKEND (Elementor)
   ─────────────────────────────── */
.elementor-editor-active .ibjs-item { min-height: 260px; }
.elementor-editor-active .ibjs-parent {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ───────────────────────────────
   SWIPER: NAVEGACIÓN Y PAGINACIÓN
   ─────────────────────────────── */
.ibjs-row.swiper { position: relative; }

.ibjs-prev, .ibjs-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 999px;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
}

/* Icono o imagen interna */
.ibjs-prev svg, .ibjs-next svg,
.ibjs-prev i, .ibjs-next i {
    width: 100%;
    height: 100%;
    object-fit: contain;
    color: inherit;
}
.ibjs-prev .ibjs-arrow-img,
.ibjs-next .ibjs-arrow-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fallback pseudo-flechas */
.ibjs-prev::before, .ibjs-next::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(225deg);
}
.ibjs-next::before { transform: rotate(45deg); }

.ibjs-prev { left: 10px; }
.ibjs-next { right: 10px; }

/* Paginación */
.ibjs-pagination {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 10;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.5);
}
.swiper-pagination-bullet-active {
    background: #fff;
}

/* ───────────────────────────────
   ESTRUCTURA SWIPER FALLBACK
   ─────────────────────────────── */
.ibjs-row.swiper .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
.ibjs-row.swiper .swiper-slide {
    flex: 0 0 auto;
}

/* ───────────────────────────────
   TRANSICIONES Y SUAVIDAD
   ─────────────────────────────── */
.ibjs-parent, .ibjs-item, .ibjs-overlay-car,
.ibjs-prev, .ibjs-next, .ibjs-pagination {
    transition: all .3s ease;
}

/*
 * Importante: el contenedor .ibjs-parent NO debe transicionar (especialmente background-image / background-size),
 * porque el cálculo de "cover" durante cambios de imagen genera un efecto de estirado.
 * Esta regla va aquí para sobrescribir cualquier transición general.
 */
.ibjs-parent { transition: none !important; }

/* ───────────────────────────────
   Ocultar pseudo-flechas si hay icono o imagen
   ─────────────────────────────── */
.ibjs-prev i,
.ibjs-next i,
.ibjs-prev svg,
.ibjs-next svg,
.ibjs-prev img,
.ibjs-next img {
  position: relative;
  z-index: 2;
}

.ibjs-prev:has(i),
.ibjs-prev:has(svg),
.ibjs-prev:has(img),
.ibjs-next:has(i),
.ibjs-next:has(svg),
.ibjs-next:has(img) {
  /* Quitar pseudo-flecha cuando hay contenido interno */
  background: none !important;
}

.ibjs-prev:has(i)::before,
.ibjs-prev:has(svg)::before,
.ibjs-prev:has(img)::before,
.ibjs-next:has(i)::before,
.ibjs-next:has(svg)::before,
.ibjs-next:has(img)::before {
  content: none !important;
}