/* ───────────────────────────────
   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;
    transition: background-image 0.4s ease, background-size 0.4s ease;
}

/* Si Elementor define altura, respetarla */
.ibjs-parent[style*="height"] {
    height: auto !important;
}

/* ───────────────────────────────
   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; }

/* ───────────────────────────────
   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;
}

.ibjs-video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 0;
    pointer-events: none;
}

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

.is-carousel-active {
    background-image: none !important;
}

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

/* ───────────────────────────────
   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;
}

/* ───────────────────────────────
   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;
}