/* separa lo justo del párrafo anterior y evita colapso */
.sipa-intro {
    margin-bottom: 8px !important;
}

/* Carrusel base */
.sipa-gallery {
    max-width: min(960px, 92vw);
    margin: 8px auto 16px;
    position: relative; /* para ubicar flechas */
    padding-top: 1px; /* rompe colapso del primer hijo */
}

    .sipa-gallery * {
        box-sizing: border-box;
    }

    .sipa-gallery .sg-viewport {
        overflow: hidden; /* jamás se ve el siguiente slide */
        border-radius: 16px;
        background: #000; /* marco para verticales (contain) */
        transition: height .25s ease; /* cambio de alto suave */
        position: relative;
    }

    /* Cada slide ocupa el viewport; oculto por defecto */
    .sipa-gallery .sg-slide {
        display: none;
        margin: 0;
        position: relative;
    }

        /* ----- Horizontal (por defecto) ----- */
        .sipa-gallery .sg-slide:not(.is-portrait) {
            aspect-ratio: 16 / 9; /* marco 16:9 */
        }

            .sipa-gallery .sg-slide:not(.is-portrait) > img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

        /* ----- Vertical (detectado por JS) ----- */
        .sipa-gallery .sg-slide.is-portrait {
            aspect-ratio: auto; /* alto viene del <img> */
        }

            .sipa-gallery .sg-slide.is-portrait > img {
                display: block;
                width: 100%;
                height: auto;
                max-height: 80vh; /* tope para UX */
                object-fit: contain;
                margin: 0 auto;
            }

        /* Slide activo visible */
        .sipa-gallery .sg-slide.is-active {
            display: block;
        }

    /* Flechas de navegación (encima de todo) */
    .sipa-gallery .sg-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        line-height: 42px;
        font-size: 26px;
        color: #fff;
        background: rgba(0,0,0,.45);
        display: grid;
        place-items: center;
        z-index: 10; /* ← asegura clics */
        pointer-events: auto; /* ← por si algo las tapa */
    }

    .sipa-gallery .sg-prev {
        left: 8px;
    }

    .sipa-gallery .sg-next {
        right: 8px;
    }

    .sipa-gallery .sg-nav:hover {
        background: rgba(0,0,0,.65);
    }

/* Responsivo pequeño */
@media (max-width: 576px) {
    .sipa-gallery .sg-nav {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}

/* Antes teníamos max-width:min(960px, 92vw) */
.sipa-gallery {
    width: 100%; /* ocupar el ancho de la columna bootstrap */
    max-width: 100%; /* sin tope propio */
    margin: 8px 0 16px; /* ya no centramos con auto, la columna lo hace */
    position: relative;
    padding-top: 1px; /* sigue rompiendo el colapso */
}

    /* El viewport ya rellena el ancho disponible */
    .sipa-gallery .sg-viewport {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        transition: height .25s ease;
        position: relative;
    }

    /* Ajusta las flechas para que queden dentro del borde del carrusel */
    .sipa-gallery .sg-prev {
        left: 8px;
    }

    .sipa-gallery .sg-next {
        right: 8px;
    }

    /* Horizontales SIN recorte: mostrar completas dentro del marco 16:9 */
    .sipa-gallery .sg-slide:not(.is-portrait) > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain; /* ← antes estaba cover */
        object-position: center;
        background: #000; /* relleno detrás (coincide con el viewport) */
    }







/* Overlay */
.sg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    display: none;
    align-items: center;
    justify-content: center;
}

    .sg-lightbox.open {
        display: flex;
    }

body.sgx-noscroll {
    overflow: hidden;
}

/* Lienzo y la imagen */
.sgx-canvas {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sgxImg {
    max-width: 95vw;
    max-height: 95vh;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none; /* permite pinch/drag personalizados */
    transform-origin: center center;
    cursor: grab;
}

/* Controles */
.sgx-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.sgx-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .sgx-btn:hover {
        background: rgba(255,255,255,.25);
    }

.sgx-close {
    position: fixed;
    top: 14px;
    right: 14px;
    font-size: 20px;
}

/* móvil */
@media (max-width:576px) {
    .sgx-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}



/* Asegura que el overlay y el botón estén por encima de TODO */
.sg-lightbox {
    z-index: 10000;
}

.sgx-close {
    z-index: 10001;
    pointer-events: auto;
}

/* Por si algún header fixed tapa la esquina */
@supports (padding: max(0px)) {
    .sgx-close {
        top: max(14px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
    }
}


/* Botones + y − del lightbox: negro sólido con ícono blanco */
.sgx-controls .sgx-btn {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25); /* contorno sutil */
    box-shadow: 0 2px 10px rgba(0,0,0,.6); /* separarlos del fondo */
}

    .sgx-controls .sgx-btn:hover,
    .sgx-controls .sgx-btn:focus {
        background: #000 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.4);
        outline: none;
    }

/* Botón cerrar también en negro (si lo quieres consistente) */
.sgx-close {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
}

    .sgx-close:hover,
    .sgx-close:focus {
        background: #000 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,.4);
        outline: none;
    }





/* Flechas dentro del lightbox (solo móvil) */
@media (pointer: coarse), (max-width: 768px) {
    .sgx-nav {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 0;
        background: rgba(0,0,0,.85);
        color: #fff;
        display: grid;
        place-items: center;
        z-index: 10002;
        cursor: pointer;
        font-size: 26px;
        box-shadow: 0 4px 16px rgba(0,0,0,.5);
    }

    .sgx-prev {
        left: 10px;
    }

    .sgx-next {
        right: 10px;
    }

    .sgx-nav:active {
        transform: translateY(-50%) scale(0.98);
    }
}

/* Zonas de toque (bordes) para tap/press-and-hold en móvil */
@media (pointer: coarse), (max-width: 768px) {
    .sgx-edge {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 28%;
        z-index: 10001; /* por debajo de las flechas */
        background: transparent; /* invisible */
    }

    .sgx-edge-left {
        left: 0;
    }

    .sgx-edge-right {
        right: 0;
    }
}



/* === Flechas de navegación dentro del lightbox (solo móvil) === */
@media (pointer: coarse), (max-width: 768px) {
    .sgx-nav {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0,0,0,.85);
        color: #fff;
        border: none;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0,0,0,.6);
        z-index: 10002;
        cursor: pointer;
    }

    .sgx-prev {
        left: 12px;
    }

    .sgx-next {
        right: 12px;
    }

    .sgx-nav:active {
        transform: translateY(-50%) scale(0.97);
    }
}

/* Flechas del carrusel con el mismo estilo que el lightbox (solo móvil) */
@media (pointer: coarse), (max-width: 768px) {
    .sipa-gallery .sg-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0,0,0,.85);
        color: #fff;
        border: none;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0,0,0,.6);
        z-index: 10; /* por encima de la imagen */
        cursor: pointer;
    }

    .sipa-gallery .sg-prev {
        left: 12px;
    }

    .sipa-gallery .sg-next {
        right: 12px;
    }

    .sipa-gallery .sg-nav:active {
        transform: translateY(-50%) scale(0.97);
    }
}

/* Oculta flechas del carrusel SOLO en móvil */
@media (pointer: coarse), (max-width: 768px) {
    .sipa-gallery .sg-nav {
        display: none !important;
    }
}


.sipa-gallery .sg-viewport {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}




/* Base: todos superpuestos y ocultos (el JS controla cuál está activo) */
.sipa-gallery .sg-viewport {
    position: relative;
    overflow: hidden;
}

.sipa-gallery .sg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    --fx-dur: 450ms; /* default si el slide no define data-duration */
    will-change: opacity, transform;
}

    .sipa-gallery .sg-slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }

/* === Efectos (se aplican cuando el slide está activo) === */
@keyframes fx-fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fx-zoom-in {
    from {
        opacity: 0;
        transform: scale(1.06)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes fx-zoom-out {
    from {
        opacity: 0;
        transform: scale(.94)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}
/* Ken Burns suave (largo): */
@keyframes fx-kenburns {
    from {
        transform: scale(1.06) translate3d(0,0,0)
    }

    to {
        transform: scale(1) translate3d(0,0,0)
    }
}

/* Vincula clases a animaciones */
.sipa-gallery .sg-slide.fx-fade.is-active {
    animation: fx-fade-in var(--fx-dur) ease both;
}

.sipa-gallery .sg-slide.fx-zoom-in.is-active {
    animation: fx-zoom-in var(--fx-dur) ease both;
}

.sipa-gallery .sg-slide.fx-zoom-out.is-active {
    animation: fx-zoom-out var(--fx-dur) ease both;
}
/* Ken Burns suele durar más que el autoplay */
.sipa-gallery .sg-slide.fx-kenburns.is-active {
    animation: fx-kenburns var(--fx-dur) ease both;
}

/* Mantén tus reglas de imagen (cover/contain por orientación) como ya las tienes */


/* El viewport transiciona de alto suavemente */
.sipa-gallery .sg-viewport {
    position: relative;
    overflow: hidden;
    transition: height .25s ease;
}

/* Las slides siguen absolutas por los efectos */
.sipa-gallery .sg-slide {
    position: absolute;
    inset: 0;
}

    /* La imagen llena el slide; horizontales en cover, verticales en contain */
    .sipa-gallery .sg-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sipa-gallery .sg-slide.is-portrait img {
        object-fit: contain; /* muestra completa la vertical */
        background: #000; /* fondo detrás para barras laterales */
    }



/* El wrapper del carrusel (el div con clase .sipa-gallery que rodea .sg-viewport) */
.sipa-gallery {
    margin-bottom: 16px; /* gap estable hacia la sección de abajo */
}

    /* Asegura que dentro del carrusel no haya márgenes extra inesperados */
    .sipa-gallery .sg-viewport,
    .sipa-gallery .sg-slide,
    .sipa-gallery figure {
        margin: 0 !important;
    }


/* Más espacio ARRIBA del carrusel (entre el <p> y el carrusel) */
.sipa-gallery {
    margin-top: clamp(12px, 2.5vh, 32px);
}

/* Si prefieres valores fijos por breakpoint: */
@media (max-width: 576px) {
    .sipa-gallery {
        margin-top: 16px;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    .sipa-gallery {
        margin-top: 24px;
    }
}

@media (min-width: 993px) {
    .sipa-gallery {
        margin-top: 32px;
    }
}



/* aire encima del carrusel sin cambiar HTML */
article .row.justify-content-center:nth-of-type(2) {
    margin-top: 0 !important; /* reset */
}

@media (max-width: 576px) {
    article .row.justify-content-center:nth-of-type(2) {
        margin-top: 28px !important;
    }
}

@media (min-width: 577px) and (max-width: 992px) {
    article .row.justify-content-center:nth-of-type(2) {
        margin-top: 36px !important;
    }
}

@media (min-width: 993px) {
    article .row.justify-content-center:nth-of-type(2) {
        margin-top: 44px !important;
    }
}


/* añade un pequeño padding abajo al row del párrafo */
article .row.justify-content-center:first-of-type {
    padding-bottom: 8px; /* no visible, evita colapso */
}