.upaep__sliper-container {
    --upaep-sliper-container-width: 100%;
    --upaep-sliper-container-height: 100%;
    width: var(--upaep-sliper-container-width);
    height: var(--upaep-sliper-container-height);
}

/*? ------ sliper ------ */
.upaep__sliper {
    --upaep-sliper-width: 100%;
    --upaep-sliper-height: 100%;
    --upaep-sliper-margin: 0 auto;
    --upaep-sliper-padding: 0;
    --upaep-sliper-bg: ;
    --upaep-sliper-border-radius: ;
    --upaep-sliper-wrapper-width: 100%;
    --upaep-sliper-wrapper-height: 100%;
    --upaep-sliper-wrapper-padding: 0;
    --upaep-sliper-wrapper-margin: 0;
    --upaep-sliper-wrapper-transition-timing: ;
    --upaep-sliper-slide-width: 100%;
    --upaep-sliper-slide-height: 100%;
    --upaep-sliper-slide-padding: 0;
    --upaep-sliper-slide-margin: 0 10px 0 0;
    --upaep-sliper-slide-bg: ;
    --upaep-sliper-navigation-size: 30px;
    --upaep-sliper-navigation-fz: var(--upaep-fz30);
    --upaep-sliper-navigation-margin: .5rem;
    --upaep-sliper-navigation-color: var(--ui-text-strong, var(--upaep-color-black));
    --upaep-sliper-navigation-bg: rgba(255, 255, 255, 0.3);
    --upaep-sliper-navigation-border: 1px solid rgba(255, 255, 255, 0.2);
    --upaep-sliper-navigation-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --upaep-sliper-navigation-next-inset: calc(50% - var(--upaep-sliper-navigation-size)) 10px auto auto;
    --upaep-sliper-navigation-prev-inset: calc(50% - var(--upaep-sliper-navigation-size)) auto auto 10px;
    --upaep-sliper-pagination-inset: auto auto 10px 50%;
    --upaep-sliper-pagination-bg: rgba(255, 255, 255, 0.12);
    --upaep-sliper-pagination-border: 1px solid rgba(255, 255, 255, 0.15);
    --upaep-sliper-pagination-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    --upaep-sliper-pagination-bullet-width: 15px;
    --upaep-sliper-pagination-bullet-height: 15px;
    --upaep-sliper-pagination-bullet-border-radius: 50px;
    --upaep-sliper-pagination-bullet-bg: rgba(255, 255, 255, 0.45);
    --upaep-sliper-pagination-bullet-opacity: 1;
    --upaep-sliper-pagination-bullet-active-bg: var(--ui-primary, var(--upaep-color-primary));
    --upaep-sliper-pagination-bullet-active-opacity: 1;
    --upaep-sliper-pagination-bullet-scale: .9;
    --upaep-sliper-pagination-bullet-scale-active: 1;
    --upaep-sliper-pagination-bullet-scale-active-next: .8;
    --upaep-sliper-pagination-bullet-scale-active-next-next: .6;
    --upaep-sliper-pagination-bullet-scale-active-prev: .8;
    --upaep-sliper-pagination-bullet-scale-active-prev-prev: .6;
    /* dynamic: opacidad por posición en la ventana (bordes se desvanecen) */
    --upaep-sliper-pagination-bullet-dynamic-opacity-active: 1;
    --upaep-sliper-pagination-bullet-dynamic-opacity-near: .55;
    --upaep-sliper-pagination-bullet-dynamic-opacity-far: .3;
    --upaep-sliper-pagination-bullet-counter-color: rgba(0, 0, 0, 0.45);
    --upaep-sliper-pagination-bullet-counter-active-color: var(--ui-on-primary, #fff);
    --upaep-sliper-pagination-bullet-counter-fz: var(--upaep-fz12);
    --upaep-sliper-pagination-bullet-counter-fw: var(--upaep-fw-regular);
    --upaep-sliper-pagination-fraction-color: rgba(0, 0, 0, 0.45);
    --upaep-sliper-pagination-fraction-fz: var(--upaep-fz12);
    --upaep-sliper-pagination-fraction-fw: var(--upaep-fw-regular);
    /* --- Efectos 3D (coverflow, cube, flip, cards) --- */
    --upaep-sliper-perspective: 1200px;
    --upaep-sliper-shadow-color: #000;   /* color del overlay de sombra (slideShadows) */
    /* --- Autoplay: boton play/stop (glass por defecto, hereda de navigation) --- */
    --upaep-sliper-autoplay-inset: 10px 10px auto auto;
    --upaep-sliper-autoplay-size: var(--upaep-sliper-navigation-size);
    --upaep-sliper-autoplay-bg: var(--upaep-sliper-navigation-bg);
    --upaep-sliper-autoplay-border: var(--upaep-sliper-navigation-border);
    --upaep-sliper-autoplay-box-shadow: var(--upaep-sliper-navigation-box-shadow);
    --upaep-sliper-autoplay-color: ;
    --upaep-sliper-autoplay-radius: 50%;
    --upaep-sliper-autoplay-fz: var(--upaep-fz14, 14px);
    --upaep-sliper-autoplay-blur: 6px;
    /* --- Autoplay: contador --- */
    --upaep-sliper-counter-inset: 10px auto auto 10px;
    --upaep-sliper-counter-fz: var(--upaep-fz12, 12px);
    /* --- Autoplay: barra de controles (dots + boton) --- */
    --upaep-sliper-controls-inset: auto auto 14px 50%;          /* horizontal: abajo-centro */
    --upaep-sliper-controls-inset-vertical: 50% 14px auto auto; /* vertical: derecha-centro */
    --upaep-sliper-controls-gap: 8px;
    /* --- Autoplay: paginacion tipo 'progress' (dots) --- */
    --upaep-sliper-progress-pill-bg: var(--upaep-sliper-pagination-bg);
    --upaep-sliper-progress-pill-padding: 6px 16px;
    --upaep-sliper-progress-pill-radius: 999px;
    --upaep-sliper-progress-dot-gap: 10px;
    --upaep-sliper-progress-dot-size: 12px;
    --upaep-sliper-progress-dot-active-width: 46px;
    --upaep-sliper-progress-dot-bg: var(--upaep-sliper-pagination-bullet-bg);
    --upaep-sliper-progress-dot-track: rgba(255, 255, 255, 0.25);
    --upaep-sliper-progress-dot-fill: var(--upaep-sliper-pagination-bullet-active-bg);
    /* --- Autoplay: anillo de progreso (ring) --- */
    --upaep-sliper-ring-width: 2.5;
    --upaep-sliper-ring-track: rgba(0, 0, 0, 0.15);
    --upaep-sliper-ring-bar: var(--ui-primary, var(--upaep-color-primary));
    /* --- Autoplay: barra lineal (progressbar) --- */
    --upaep-sliper-progressbar-inset: auto 0 0 0;   /* posicion (por defecto abajo, ancho completo) */
    --upaep-sliper-progressbar-height: 4px;
    --upaep-sliper-progressbar-bg: rgba(0, 0, 0, 0.15);
    --upaep-sliper-progressbar-fill: var(--gradient1, var(--ui-primary, var(--upaep-color-primary)));
    width: var(--upaep-sliper-width);
    height: var(--upaep-sliper-height);
    margin: var(--upaep-sliper-margin);
    padding: var(--upaep-sliper-padding);
    background: var(--upaep-sliper-bg);
    border-radius: var(--upaep-sliper-border-radius);
    position: relative;
    overflow: hidden;
    list-style: none;
    z-index: 1;
    display: block;

    &.is-vertical {
        touch-action: pan-x;

        .upaep__sliper-wrapper {
            flex-direction: column;
        }

        .upaep__sliper-pagination {
            --upaep-sliper-pagination-inset: 50% 10px auto auto;
            flex-direction: column;
            transform: translateY(-50%);
            max-height: 100%;
        }

        /* En vertical, las flechas van ARRIBA (prev) y ABAJO (next), centradas
           horizontalmente. El inset da el espaciado (10px) y translate centra. */
        .upaep__sliper-prev,
        .upaep__sliper-next {
            margin: 0;
            translate: -50% 0;
        }

        .upaep__sliper-prev {
            --upaep-sliper-navigation-prev-inset: 10px auto auto 50%;
            rotate: -270deg;
        }

        .upaep__sliper-next {
            --upaep-sliper-navigation-next-inset: auto auto 10px 50%;
            rotate: 90deg;
        }
    }

    &:not(.is-vertical) {
        touch-action: pan-y;
    }

    /* Aislar layout durante cambios de breakpoint para evitar reflows en el resto del documento */
    &[style*="visibility: hidden"] {
        contain: layout style paint;
    }

    &.is-centered {
        .upaep__sliper-slide {
            transition: transform 0.3s ease;
        }
    }

    &.is-autoheight,
    &.__autoheight {
        --upaep-sliper-height: auto;
        --upaep-sliper-slide-height: auto;

        .upaep__sliper-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }
    }

    &.is-multi-row {

        /* Grid layout con múltiples filas: el JS maneja flex-wrap, gap y
           dimensiones del wrapper */

        .upaep__sliper-slide {
            /* Slides en grid mantienen transiciones */
            transition: all .2s;
        }
    }

    &.is-fades {
        &>.upaep__sliper-wrapper {
            transform: none !important;
        }

        .upaep__sliper-slide {
            animation: a_fadeIn .2s ease;
            position: absolute;

            &:not(.is-active) {
                display: none;
            }
        }
    }

    .upaep__sliper-wrapper {
        width: var(--upaep-sliper-wrapper-width);
        height: var(--upaep-sliper-wrapper-height);
        padding: var(--upaep-sliper-wrapper-padding);
        margin: var(--upaep-sliper-wrapper-margin);
        position: relative;
        z-index: 1;
        display: flex;
        transition: transform .3s;
        box-sizing: content-box;
    }

    .upaep__sliper-slide {
        width: var(--upaep-sliper-slide-width);
        height: var(--upaep-sliper-slide-height);
        padding: var(--upaep-sliper-slide-padding);
        margin: var(--upaep-sliper-slide-margin);
        background: var(--upaep-sliper-slide-bg);
        flex-shrink: 0;
        position: relative;
        transition-property: transform;
        display: flex;
        justify-content: center;
        align-items: center;

        &.no-overlay {
            .upaep__sliper-slide-overlay {
                pointer-events: none;
            }
        }

        &.no-player-buttons {
            .player-buttons {
                display: none;
            }
        }
    }

    .upaep__sliper-next,
    .upaep__sliper-prev {
        position: absolute;
        width: var(--upaep-sliper-navigation-size);
        height: var(--upaep-sliper-navigation-size);
        margin: var(--upaep-sliper-navigation-margin);
        color: var(--upaep-sliper-navigation-color);
        background: var(--upaep-sliper-navigation-bg);
        border: var(--upaep-sliper-navigation-border);
        font-size: var(--upaep-sliper-navigation-fz);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        backdrop-filter: blur(6px);
        box-shadow: var(--upaep-sliper-navigation-box-shadow);
        /* Glass consistente con el botón de autoplay (sin mix-blend-mode) */

        &.__disabled {
            opacity: .35;
            cursor: auto;
            pointer-events: none
        }

        &.__hidden {
            opacity: 0;
            cursor: auto;
            pointer-events: none
        }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, 0);
            pointer-events: none;
            transition: background-color 0.25s cubic-bezier(0.05, 0, 0, 1);
        }

        &:hover::before {
            background-color: rgba(255, 255, 255, 0.15);
        }
    }

    .upaep__sliper-next {
        inset: var(--upaep-sliper-navigation-next-inset);
    }

    .upaep__sliper-prev {
        inset: var(--upaep-sliper-navigation-prev-inset);
    }

    .upaep__sliper-progressbar {
        position: absolute;
        inset: var(--upaep-sliper-progressbar-inset, auto 0 0 0);
        height: var(--upaep-sliper-progressbar-height, 4px);
        background-color: var(--upaep-sliper-progressbar-bg, rgba(0, 0, 0, 0.2));
        z-index: 11;
        overflow: hidden;
        backdrop-filter: blur(6px);

        &::before {
            content: '';
            position: absolute;
            inset: 0 auto 0 0;
            /* Se rellena con la señal de autoplay (0->100% durante el delay). */
            width: calc(var(--autoplay-progress, 0) * 100%);
            height: 100%;
            background: var(--upaep-sliper-progressbar-fill, var(--gradient1));
            transform-origin: left;
        }

        &.is-hidden,
        &.__hidden {
            display: none;
        }

        &.is-disabled,
        &.__disabled {
            display: none;
        }
    }

    .upaep__sliper-pagination {
        inset: var(--upaep-sliper-pagination-inset);
        background: var(--upaep-sliper-pagination-bg);
        border: var(--upaep-sliper-pagination-border);
        box-shadow: var(--upaep-sliper-pagination-box-shadow);
        border-radius: 20px;
        padding: .25rem .5rem;
        max-width: 100%;
        display: flex;
        justify-content: center;
        gap: .25rem;
        text-align: center;
        position: absolute;
        z-index: 10;
        transition: .3s opacity;
        transform: translateX(-50%);
        backdrop-filter: blur(6px);

        &.is-hidden,
        &.__hidden {
            opacity: 0;
        }

        &.is-disabled,
        &.__disabled {
            display: none;
        }

        &.is-clickeable,
        &.__clickeable {
            .upaep__sliper-bullet {
                cursor: pointer;
            }
        }

        &:not(.is-no-clickeable) {
            .upaep__sliper-bullet {
                cursor: pointer;
            }
        }

        &.is-dynamic,
        &.__dynamic {
            overflow: hidden;
            font-size: 0;

            .upaep__sliper-bullet {
                transition: scale .3s cubic-bezier(0.05, 0, 0, 1), opacity .3s ease, background .3s ease;

                &.is-active {
                    scale: var(--upaep-sliper-pagination-bullet-scale-active);
                    opacity: var(--upaep-sliper-pagination-bullet-dynamic-opacity-active, 1);
                }

                &.is-active-next {
                    scale: var(--upaep-sliper-pagination-bullet-scale-active-next);
                    opacity: var(--upaep-sliper-pagination-bullet-dynamic-opacity-near, .55);
                }

                &.is-active-next-next {
                    scale: var(--upaep-sliper-pagination-bullet-scale-active-next-next);
                    opacity: var(--upaep-sliper-pagination-bullet-dynamic-opacity-far, .3);
                }

                &.is-active-prev {
                    scale: var(--upaep-sliper-pagination-bullet-scale-active-prev);
                    opacity: var(--upaep-sliper-pagination-bullet-dynamic-opacity-near, .55);
                }

                &.is-active-prev-prev {
                    scale: var(--upaep-sliper-pagination-bullet-scale-active-prev-prev);
                    opacity: var(--upaep-sliper-pagination-bullet-dynamic-opacity-far, .3);
                }

                &:not(.is-active):not(.is-active-next):not(.is-active-next-next):not(.is-active-prev):not(.is-active-prev-prev) {
                    display: none;
                }
            }
        }

        &.is-counter {
            counter-reset: count 0;

            .upaep__sliper-bullet {
                counter-increment: count 1;
                position: relative;
                color: var(--upaep-sliper-pagination-bullet-counter-color);
                font-size: var(--upaep-sliper-pagination-bullet-counter-fz);
                font-weight: var(--upaep-sliper-pagination-bullet-counter-fw);

                &::after {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    content: counter(count, decimal);
                }

                /* El número del bullet activo con color legible sobre el fondo activo */
                &.is-active {
                    color: var(--upaep-sliper-pagination-bullet-counter-active-color, #fff);
                }
            }

        }

        &.is-fraction {
            .upaep__sliper-fraction {
                color: var(--upaep-sliper-pagination-fraction-color);
                font-size: var(--upaep-sliper-pagination-fraction-fz);
                font-weight: var(--upaep-sliper-pagination-fraction-fw);
            }
        }
    }

    .upaep__sliper-bullet {
        width: var(--upaep-sliper-pagination-bullet-width);
        height: var(--upaep-sliper-pagination-bullet-height);
        border-radius: var(--upaep-sliper-pagination-bullet-border-radius);
        background: var(--upaep-sliper-pagination-bullet-bg);
        opacity: var(--upaep-sliper-pagination-bullet-opacity);
        scale: var(--upaep-sliper-pagination-bullet-scale);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .3s cubic-bezier(0.05, 0, 0, 1);
        backdrop-filter: blur(6px);

        &.is-active {
            background: var(--upaep-sliper-pagination-bullet-active-bg);
            opacity: var(--upaep-sliper-pagination-bullet-active-opacity);
            scale: var(--upaep-sliper-pagination-bullet-scale-active);
            transition: all .3s cubic-bezier(0.05, 0, 0, 1);
        }

        &:only-child {
            display: none;
        }

        &::before {
            content: "";
            position: absolute;
            display: block;
            inset: 0;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, 0);
            pointer-events: none;
            transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
        }

        &:hover::before {
            background-color: rgba(255, 255, 255, 0.28);
        }
    }


}


.upaep__sliper-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.upaep__sliper-slide-source {
    width: 100%;
    height: 100%;

    &.__ratio {
        --ratio-aspect: 45%;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &:has(iframe) {
        iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &:has(video) {
        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    }
}

/* ============ __cover: el media CUBRE todo el slide (banners fullscreen) ============
   Uso: .upaep__sliper.__cover (todos los slides) o .upaep__sliper-slide.__cover
   (solo uno). Para el hero a pantalla completa combínalo con __fullscreen (abajo).
   - img: ya cubre por default (object-fit: cover, arriba).
   - video (nativo y del reproductor propio): object-fit: cover.
   - iframe (YouTube/Vimeo): NO acepta object-fit — el letterbox ocurre DENTRO del
     embed. Se sobredimensiona al mínimo que cubre el contenedor (unidades de
     container query) y se centra; el overflow lo recorta. */
.upaep__sliper.__cover .upaep__sliper-slide,
.upaep__sliper-slide.__cover {
    /* Relación de aspecto del contenido del embed (16/9 = 1.7778). Cámbiala si
       el video es vertical (reels: 9/16 = 0.5625). */
    --upaep-sliper-cover-video-ratio: 1.7778;

    .upaep__sliper-slide-source {
        overflow: hidden;
        container-type: size; /* habilita cqw/cqh para el iframe */

        video {
            object-fit: cover;
        }

        iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: max(100cqw, calc(100cqh * var(--upaep-sliper-cover-video-ratio)));
            height: max(100cqh, calc(100cqw / var(--upaep-sliper-cover-video-ratio)));
            transform: translate(-50%, -50%);
        }
    }
}

/* __contain: excluye UN slide del cover global del sliper (cover: false por slide) */
.upaep__sliper.__cover .upaep__sliper-slide.__contain .upaep__sliper-slide-source {
    container-type: normal;

    video {
        object-fit: contain;
    }

    iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
}

/* ============ __fullscreen: el sliper abarca todo el viewport (hero) ============
   svh en lugar de vh: estable ante la barra del navegador en móvil.
   width 100% (no 100vw: evita el scroll horizontal por la barra de scroll). */
.upaep__sliper-container.__fullscreen {
    --upaep-sliper-container-width: 100%;
    --upaep-sliper-container-height: 100svh;
}

.upaep__sliper-slide-overlay {
    width: 100%;
    position: absolute;
    inset: 0;
    pointer-events: auto;

    /* Bloqueamos interacción con el fondo del overlay */
    background-color: transparent;

    /* Permitir interacción solo con elementos dentro del overlay */
    &:empty {
        pointer-events: none;
    }

    /* Los controles y enlaces dentro del overlay son interactuables */
    .player-buttons,
    a,
    button,
    [data-action] {
        pointer-events: auto;
    }

    a {
        width: 95%;
        display: block;
        margin: 0 auto;
    }

    @media(width<=480px) {
        a {
            width: 85%;
        }
    }

    /* Acción del slide (<a> para link, <button> para goTo/modal/function/...):
       cubre TODO el slide. El drag sigue funcionando encima (el core suprime
       el click si hubo arrastre real). Debajo de .player-buttons (z 20/21). */
    .slide-action {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        z-index: 10;
    }
}

/* ============ Reproductor propio (Choregos) dentro de un slide ============
   El tamaño lo dicta el SLIDE (no el aspect-ratio por defecto del player), y sus
   controles quedan por ENCIMA de la acción del slide (.slide-action, z 10) igual
   que los .player-buttons clásicos (z 20/21). */
.upaep__sliper-slide-source .upaep__choregos {
    /* __ratio (style.css) posiciona a sus hijos con absolute, pero choregos.css
       declara position: relative con la MISMA especificidad y carga después: ganaría
       el empate y el player caería al flujo normal, empujado DEBAJO del ::before que
       genera el ratio (invisible). Fijarlo explícito al box del source. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;

    .upaep__choregos-controls,
    .upaep__choregos-bigplay {
        z-index: 20;
    }
}

/* ============ Skeleton de carga de slides ============
   Se muestra mientras el slide tiene is-loading (media cargando: img/video/iframe)
   o is-skeleton (placeholder de addSkeletonSlides mientras llegan banners del API). */
.upaep__sliper-slide-skeleton {
    --upaep-sliper-skeleton-bg: #e4e7ed;
    --upaep-sliper-skeleton-shine: rgba(255, 255, 255, .55);
    --upaep-sliper-skeleton-speed: 1.2s;

    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    /* debajo de .slide-action (10) y controles del player (20) */
    background-color: var(--upaep-sliper-skeleton-bg);
    background-image: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 40%,
            var(--upaep-sliper-skeleton-shine) 50%,
            rgba(255, 255, 255, 0) 60%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: sliperSkeletonShine var(--upaep-sliper-skeleton-speed) ease-in-out infinite;
}

.upaep__sliper-slide.is-loading .upaep__sliper-slide-skeleton,
.upaep__sliper-slide.is-skeleton .upaep__sliper-slide-skeleton {
    display: block;
}

@keyframes sliperSkeletonShine {
    from {
        background-position-x: 180%;
    }

    to {
        background-position-x: -80%;
    }
}

.player-buttons {
    display: flex;
    justify-content: end;
    gap: .5rem;
    position: absolute;
    inset: auto 0 50px 0;
    padding: 0 1rem;
    pointer-events: auto;
    z-index: 20;
    background-color: transparent;

    &:has([data-action="play"].is-active) [data-action="pause"] {
        display: none;
    }

    &:has([data-action="pause"].is-active) [data-action="play"] {
        display: none;
    }

    &:has([data-action="mute"].is-active) [data-action="unmute"] {
        display: none;
    }

    &:has([data-action="unmute"].is-active) [data-action="mute"] {
        display: none;
    }
}

.upaep__btn.__player {
    --upaep-btn-width: 35px;
    --upaep-btn-height: 35px;
    --upaep-btn-padding: 0;
    --upaep-btn-margin: 0;
    --upaep-btn-bg: rgba(255, 255, 255, 0.12);
    --upaep-btn-color: var(--upaep-color-black);
    --upaep-btn-border-size: 1px;
    --upaep-btn-border-color: rgba(255, 255, 255, 0.15);
    --upaep-btn-border-radius: 50%;
    --upaep-btn-hover-bg: rgba(255, 255, 255, 0.25);
    --upaep-btn-hover-color: var(--upaep-color-black);
    --upaep-btn-hover-border-size: 1px;
    --upaep-btn-hover-border-color: rgba(255, 255, 255, 0.15);
    --upaep-btn-hover-border-radius: inherit;
    backdrop-filter: blur(6px);
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
    z-index: 21;
    mix-blend-mode: difference;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: rgba(255, 255, 255, 0);
        pointer-events: none;
        transition: background-color .2s cubic-bezier(.05, 0, 0, 1);
    }

    &:hover::before {
        background-color: rgba(255, 255, 255, .1);
    }

}

.sr-only {
    width: 100%;
    height: 100%;
    display: block;
}
/* ============================================================================
   Efectos 3D: escena de perspectiva. Sin esto, rotateY/translateZ se ven planos.
   El JS aplica los transforms por slide; aquí solo se crea el contexto 3D.
   ============================================================================ */
.upaep__sliper.is-coverflow .upaep__sliper-wrapper,
.upaep__sliper.is-creative .upaep__sliper-wrapper,
.upaep__sliper.is-flip .upaep__sliper-wrapper {
    perspective: var(--upaep-sliper-perspective, 1200px);
}

/* Sombra de slide (efectos 3D): overlay oscuro; su opacidad la maneja el JS según
   la posición/rotación del slide (más lejos/rotado = más oscuro = profundidad). */
.upaep__sliper-slide-shadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--upaep-sliper-shadow-color, #000);
    opacity: 0;
    z-index: 5;
    border-radius: inherit;
}

/* Cube: la perspectiva va en el CONTENEDOR y el wrapper mantiene el espacio 3D
   (preserve-3d) para que las caras del cubo se rendericen con profundidad. */
.upaep__sliper.is-cube {
    perspective: var(--upaep-sliper-perspective, 1200px);
}
.upaep__sliper.is-cube .upaep__sliper-wrapper {
    transform-style: preserve-3d;
}

/* ============================================================================
   Autoplay UI: boton play/stop, contador y anillos de progreso
   Todos leen la misma senal --autoplay-progress (0..1) puesta en .upaep__sliper
   ============================================================================ */

/* Registrar la variable para que el NAVEGADOR pueda animarla suavemente (no a pasos).
   El JS solo arranca/pausa la animacion; la interpolacion 0->1 la hace el motor CSS. */
@property --autoplay-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@keyframes sliperAutoplayProgress {
    from { --autoplay-progress: 0; }
    to   { --autoplay-progress: 1; }
}

/* Mostrar la UI de autoplay solo cuando esta habilitado */
.upaep__sliper:not(.is-autoplay) .upaep__sliper-autoplay,
.upaep__sliper:not(.is-autoplay) .upaep__sliper-autoplay-counter {
    display: none;
}

/* Anillo de progreso (SVG). Sin scope de ancestro para que también funcione en
   elementos EXTERNOS (autoplay.button/progressCounter con .el fuera del slider). */
.upaep__sliper-ring {
    --ring-c: 100.53;            /* 2*PI*r con r=16 */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);   /* empezar arriba */
    overflow: visible;
    pointer-events: none;
}
.upaep__sliper-ring circle {
    fill: none;
    stroke-width: var(--upaep-sliper-ring-width, 2.5);
}
.upaep__sliper-ring .__track {
    stroke: var(--upaep-sliper-ring-track, rgba(0, 0, 0, 0.15));
}
.upaep__sliper-ring .__bar {
    stroke: var(--upaep-sliper-ring-bar, var(--upaep-color-primary, #e2231a));
    stroke-linecap: round;
    stroke-dasharray: var(--ring-c);
    /* se rellena 0->100% conforme avanza el delay */
    stroke-dashoffset: calc(var(--ring-c) * (1 - var(--autoplay-progress, 0)));
}

/* Barra lineal EXTERNA (fuera del slider): estilo base + relleno con la señal.
   Menor especificidad que la interna (.upaep__sliper .upaep__sliper-progressbar),
   así que no pisa a la barra interna; solo aplica a las externas sin estilo. */
.upaep__sliper-progressbar {
    position: relative;
    height: var(--upaep-sliper-progressbar-height, 4px);
    overflow: hidden;
    background-color: var(--upaep-sliper-progressbar-bg, rgba(0, 0, 0, 0.15));
}
.upaep__sliper-progressbar::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--autoplay-progress, 0) * 100%);
    height: 100%;
    background: var(--upaep-sliper-progressbar-fill, var(--upaep-color-primary, #e2231a));
}

/* Boton play/stop (GLASS por defecto, igual que la navegacion) */
.upaep__sliper .upaep__sliper-autoplay {
    position: absolute;
    inset: var(--upaep-sliper-autoplay-inset, 10px 10px auto auto);
    width: var(--upaep-sliper-autoplay-size, 40px);
    height: var(--upaep-sliper-autoplay-size, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--upaep-sliper-autoplay-radius, 50%);
    background: var(--upaep-sliper-autoplay-bg, rgba(255, 255, 255, 0.12));
    border: var(--upaep-sliper-autoplay-border, 1px solid rgba(255, 255, 255, 0.15));
    box-shadow: var(--upaep-sliper-autoplay-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
    color: var(--upaep-sliper-autoplay-color, #222);
    cursor: pointer;
    z-index: 12;
    backdrop-filter: blur(var(--upaep-sliper-autoplay-blur, 6px));
}
/* Intercambio de iconos sin exigir el ancestro .upaep__sliper, para que también
   funcione si el botón se asigna a un elemento externo (autoplay.button.el). */
.upaep__sliper-autoplay .__icon {
    font-size: var(--upaep-sliper-autoplay-fz, 14px);
    line-height: 1;
}
.upaep__sliper-autoplay .__icon-play { display: none; }
.upaep__sliper-autoplay.is-paused .__icon-pause { display: none; }
.upaep__sliper-autoplay.is-paused .__icon-play { display: inline-block; }
.upaep__sliper-autoplay.is-paused .__bar { opacity: .35; }

/* Contador con anillo (GLASS por defecto) */
.upaep__sliper .upaep__sliper-autoplay-counter {
    position: absolute;
    inset: var(--upaep-sliper-counter-inset, 10px auto auto 10px);
    width: var(--upaep-sliper-autoplay-size, 40px);
    height: var(--upaep-sliper-autoplay-size, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--upaep-sliper-autoplay-radius, 50%);
    background: var(--upaep-sliper-autoplay-bg, rgba(255, 255, 255, 0.12));
    border: var(--upaep-sliper-autoplay-border, 1px solid rgba(255, 255, 255, 0.15));
    box-shadow: var(--upaep-sliper-autoplay-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
    color: var(--upaep-sliper-autoplay-color, #222);
    z-index: 12;
    font-size: var(--upaep-sliper-counter-fz, 12px);
    font-weight: 600;
    backdrop-filter: blur(var(--upaep-sliper-autoplay-blur, 6px));
}

/* ===== Barra de controles estilo "stories": dots (progress) + boton play/stop ===== */
.upaep__sliper .upaep__sliper-controls {
    position: absolute;
    inset: var(--upaep-sliper-controls-inset, auto auto 14px 50%);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--upaep-sliper-controls-gap, 8px);
    z-index: 12;
}
/* Pill de los dots dentro de la barra: lo coloca el flex (sin posición propia),
   SIN alto fijo (lo define el contenido + padding chico). Una sola regla. */
.upaep__sliper .upaep__sliper-controls .upaep__sliper-pagination {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    background: var(--upaep-sliper-progress-pill-bg);
    border-radius: var(--upaep-sliper-progress-pill-radius, 999px);
    padding: var(--upaep-sliper-progress-pill-padding, 6px 16px);
    gap: var(--upaep-sliper-progress-dot-gap, 10px);
}
/* Boton dentro de la barra: lo coloca el flex. Tamaño y apariencia (bg/color/borde/
   sombra/width/height) vienen de la regla general .upaep__sliper .upaep__sliper-autoplay,
   controlada por --upaep-sliper-autoplay-size. Aquí solo se resetea su posicionamiento. */
.upaep__sliper .upaep__sliper-controls .upaep__sliper-autoplay {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    flex: none;
}
/* En la barra el boton no muestra anillo (el progreso lo dan los dots) */
.upaep__sliper .upaep__sliper-controls .upaep__sliper-autoplay .upaep__sliper-ring {
    display: none;
}

/* En VERTICAL, la barra de controles va a la DERECHA y en COLUMNA (dots + botón apilados).
   Los dots ya se ponen en columna por is-vertical; aquí ajustamos la barra y el pill. */
.upaep__sliper.is-vertical .upaep__sliper-controls {
    inset: var(--upaep-sliper-controls-inset-vertical, 50% 14px auto auto);
    transform: translateY(-50%);
    flex-direction: column;
}
.upaep__sliper.is-vertical .upaep__sliper-controls .upaep__sliper-pagination {
    /* pill vertical: se invierte el padding (más arriba/abajo) */
    padding: 16px 6px;
}

/* Paginacion tipo 'progress': dots; el activo se alarga y se rellena 0->100% */
.upaep__sliper .upaep__sliper-pagination.is-progress {
    --upaep-sliper-pagination-bullet-width: var(--upaep-sliper-progress-dot-size, 12px);
    --upaep-sliper-pagination-bullet-height: var(--upaep-sliper-progress-dot-size, 12px);
}
.upaep__sliper .upaep__sliper-pagination.is-progress .upaep__sliper-bullet {
    position: relative;
    overflow: hidden;
    border: none;
    scale: 1;
    border-radius: 20px;
    background: var(--upaep-sliper-progress-dot-bg, rgba(255, 255, 255, 0.45));
    transition: width .3s ease, height .3s ease, background-color .3s ease;
}
.upaep__sliper .upaep__sliper-pagination.is-progress .upaep__sliper-bullet.is-active {
    width: var(--upaep-sliper-progress-dot-active-width, 46px);
    /* El activo es la "pista" (tenue) para que el relleno contraste */
    background: var(--upaep-sliper-progress-dot-track, rgba(255, 255, 255, 0.25));
}
.upaep__sliper .upaep__sliper-pagination.is-progress .upaep__sliper-bullet.is-active::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--autoplay-progress, 0) * 100%);
    background: var(--upaep-sliper-progress-dot-fill, var(--upaep-color-primary, #e2231a));
    border-radius: inherit;
}

/* Paginacion tipo 'pill': como 'progress' pero SIN barra de progreso; el activo
   queda como un pill SÓLIDO resaltado. Reusa las mismas variables de los dots. */
.upaep__sliper .upaep__sliper-pagination.is-pill {
    --upaep-sliper-pagination-bullet-width: var(--upaep-sliper-progress-dot-size, 12px);
    --upaep-sliper-pagination-bullet-height: var(--upaep-sliper-progress-dot-size, 12px);
}
.upaep__sliper .upaep__sliper-pagination.is-pill .upaep__sliper-bullet {
    border: none;
    scale: 1;
    border-radius: 20px;
    background: var(--upaep-sliper-progress-dot-bg, rgba(255, 255, 255, 0.45));
    transition: width .3s ease, height .3s ease, background-color .3s ease;
}
.upaep__sliper .upaep__sliper-pagination.is-pill .upaep__sliper-bullet.is-active {
    width: var(--upaep-sliper-progress-dot-active-width, 46px);
    /* El activo es un pill sólido en el color de relleno (resaltado) */
    background: var(--upaep-sliper-progress-dot-fill, var(--upaep-color-primary, #e2231a));
}

/* ===== progress / pill en VERTICAL: el activo se alarga en ALTO (no en ancho) ===== */
.upaep__sliper.is-vertical .upaep__sliper-pagination.is-progress .upaep__sliper-bullet.is-active,
.upaep__sliper.is-vertical .upaep__sliper-pagination.is-pill .upaep__sliper-bullet.is-active {
    width: var(--upaep-sliper-progress-dot-size, 12px);
    height: var(--upaep-sliper-progress-dot-active-width, 46px);
}
/* El relleno de 'progress' crece de ARRIBA hacia abajo */
.upaep__sliper.is-vertical .upaep__sliper-pagination.is-progress .upaep__sliper-bullet.is-active::before {
    inset: 0 0 auto 0;
    width: 100%;
    height: calc(var(--autoplay-progress, 0) * 100%);
}

/* ============================================================================
   Modificador __dark: look "stories" oscuro. Aplicar en el slider:
   <div class="upaep__sliper __dark">  (por defecto es glass)
   Solo sobreescribe VARIABLES -> fácil de mantener y de re-tematizar.
   ============================================================================ */
.upaep__sliper.__dark {
    --upaep-sliper-autoplay-bg: rgba(22, 22, 24, 0.9);
    --upaep-sliper-autoplay-border: none;
    --upaep-sliper-autoplay-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    --upaep-sliper-autoplay-color: var(--ui-on-surface-inverse, #fff);
    --upaep-sliper-autoplay-blur: 0px;
    --upaep-sliper-progress-pill-bg: rgba(22, 22, 24, 0.9);
    --upaep-sliper-progress-dot-bg: rgba(255, 255, 255, 0.35);
    --upaep-sliper-progress-dot-track: rgba(255, 255, 255, 0.25);
    --upaep-sliper-progress-dot-fill: var(--ui-on-surface-inverse, #fff);
}

/* ============================================================================
   Estado bloqueado (is-locked): 0 o 1 slide, o todos caben en una página.
   No hay nada que navegar -> se ocultan flechas, bullets y autoplay.
   La clase la pone/quita el JS (updateLockState) en cada cambio.
   ============================================================================ */
.upaep__sliper.is-locked .upaep__sliper-prev,
.upaep__sliper.is-locked .upaep__sliper-next,
.upaep__sliper.is-locked .upaep__sliper-pagination,
.upaep__sliper.is-locked .upaep__sliper-controls,
.upaep__sliper.is-locked .upaep__sliper-autoplay,
.upaep__sliper.is-locked .upaep__sliper-autoplay-counter,
.upaep__sliper.is-locked .upaep__sliper-progressbar {
    display: none !important;
}

/* Sin arrastre: cursor normal (no "grab") cuando está bloqueado */
.upaep__sliper.is-locked .upaep__sliper-wrapper {
    cursor: default;
}