/* ==========================================
   GALERÍA DE PROYECTO - NOPAL
========================================== */

.nopal-galeria{
    position:relative;
    width:100%;
    overflow:hidden;
}

/* Carrusel y estructura interna */
.nopal-galeria .elementor-image-carousel-wrapper,
.nopal-galeria .swiper,
.nopal-galeria .swiper-wrapper,
.nopal-galeria .swiper-slide{
    width:100%;
}

/* Cada diapositiva */
.nopal-galeria .swiper-slide{
    position:relative;
    overflow:hidden;
}

/* Contenedor interno de la imagen */
.nopal-galeria .swiper-slide-inner{
    position:relative;
    width:100%;
    height:100%;
}

/* Imagen */
.nopal-galeria .swiper-slide-image{
    width:100% !important;
    height:620px !important;
    display:block;
    object-fit:cover;
    object-position:center;
}

/* ==========================================
   TÍTULO DE CADA IMAGEN
========================================== */

.nopal-galeria .elementor-image-carousel-caption{
    position:absolute;
    top:34px;
    left:34px;
    z-index:5;

    width:auto;
    margin:0;
    padding:0;

    background:transparent;

    font-family:"Libre Baskerville", serif;
    font-size:20px;
    line-height:1.2;
    font-weight:400;
    color:#FFFFFF;

    text-align:left;
    text-shadow:0 1px 8px rgba(0,0,0,.22);

    pointer-events:none;
}

/* ==========================================
   FLECHAS
========================================== */

.nopal-galeria .elementor-swiper-button{
    top:auto !important;
    bottom:30px !important;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:none !important;

    background:transparent !important;
    border:0;
    box-shadow:none;

    color:#FFFFFF;
    z-index:10;

    transition:
        color .25s ease,
        opacity .25s ease;
}

/* Flecha anterior */
.nopal-galeria .elementor-swiper-button-prev{
    left:32px !important;
    right:auto !important;
}

/* Flecha siguiente */
.nopal-galeria .elementor-swiper-button-next{
    left:76px !important;
    right:auto !important;
}

/* Tamaño del SVG */
.nopal-galeria .elementor-swiper-button svg{
    width:28px;
    height:28px;
    display:block;
    fill:currentColor;
}

/* Hover */
.nopal-galeria .elementor-swiper-button:hover{
    color:#BCBCBC;
}

/* Quitar fondo negro que Elementor puede aplicar */
.nopal-galeria .elementor-swiper-button:hover,
.nopal-galeria .elementor-swiper-button:focus,
.nopal-galeria .elementor-swiper-button:active{
    background:transparent !important;
    box-shadow:none !important;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    .nopal-galeria .swiper-slide-image{
        height:500px !important;
    }

    .nopal-galeria .elementor-image-carousel-caption{
        top:28px;
        left:28px;
        font-size:19px;
    }

    .nopal-galeria .elementor-swiper-button{
        bottom:26px !important;
    }

    .nopal-galeria .elementor-swiper-button-prev{
        left:28px !important;
    }

    .nopal-galeria .elementor-swiper-button-next{
        left:78px !important;
    }
}

/* Fade más elegante */
.nopal-galeria .swiper-wrapper{
    transition-timing-function:ease-in-out !important;
}

.nopal-galeria .swiper-slide{
    transition-duration:500ms !important;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    .nopal-galeria .swiper-slide-image{
        height:360px !important;
        object-position:center;
    }

    .nopal-galeria .elementor-image-carousel-caption{
        top:20px;
        left:20px;

        font-size:17px;
        text-shadow:0 1px 6px rgba(0,0,0,.28);
    }

    .nopal-galeria .elementor-swiper-button{
        bottom:18px !important;
        width:36px;
        height:36px;
    }

    .nopal-galeria .elementor-swiper-button-prev{
        left:18px !important;
    }

    .nopal-galeria .elementor-swiper-button-next{
        left:62px !important;
    }

    .nopal-galeria .elementor-swiper-button svg{
        width:24px;
        height:24px;
    }
}