/* Variables (.ng-carousel):
   --ng-max-width: ancho máximo del carrusel
   --ng-aspect-ratio: relación de aspecto del viewport (ej: 16/9)
   --ng-duration: tiempo por slide (para autoplay)
   --ng-steps: cantidad de slides (entero)
   --ng-total: calculado = --ng-duration * --ng-steps
*/
.ngc-grad {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.ng-carousel {
    position: relative;
    width: min(100%, var(--ng-max-width, 960px));
    margin: 0 auto;
    --ng-duration: 4s;
    --ng-steps: 3;
    --ng-total: calc(var(--ng-duration) * var(--ng-steps));
}

.ngc-header {
    position: absolute;
    left: .9rem;
    bottom: .9rem;
    z-index: 3;
    max-width: min(80%, 720px);
}

.ngc-header-title {
    margin: 0;
    font: 800 30px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

.ngc-header-desc {
    margin: .35rem 0 0;
    color: #f3f4f6;
    font: 600 20px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.ngc-viewport {
    border-radius: 16px;
    position: relative;
    width: 100%;
    aspect-ratio: var(--ng-aspect-ratio, 16/9);
    overflow: hidden;
}

.ngc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    display: block;
    z-index: 1;
    animation: ngc-cycle var(--ng-total) linear infinite;
}

    .ngc-slide:nth-of-type(1) {
        animation-delay: calc(var(--ng-duration) * 0);
    }

    .ngc-slide:nth-of-type(2) {
        animation-delay: calc(var(--ng-duration) * 1);
    }

    .ngc-slide:nth-of-type(3) {
        animation-delay: calc(var(--ng-duration) * 2);
    }

    .ngc-slide:nth-of-type(4) {
        animation-delay: calc(var(--ng-duration) * 3);
    }

    .ngc-slide:nth-of-type(5) {
        animation-delay: calc(var(--ng-duration) * 4);
    }

    .ngc-slide:nth-of-type(6) {
        animation-delay: calc(var(--ng-duration) * 5);
    }

@keyframes ngc-cycle {
    0% {
        opacity: 1;
        visibility: visible;
    }

    30% {
        opacity: 1;
        visibility: visible;
    }

    33.333% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.ngc-slide > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Fallback visual si el slide no tiene imagen/video */
.ngc-slide:empty,
.ngc-slide:not(:has(img),:has(video)) {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

/* Pausar autoplay al pasar el mouse */
.ng-carousel:hover .ngc-slide {
    animation-play-state: paused;
}

/* Modo manual: desactivar animaciones */
.ngc-slide.manual-mode {
    animation: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* En modo manual, pausar todas las animaciones del carrusel */
.ng-carousel:has(.manual-mode) .ngc-slide {
    animation-play-state: paused;
}

/* === DOTS === */
.ngc-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
    z-index: 4;
}

    .ngc-dots a {
        --dot-w: var(--ng-dot-w, 18px);
        --dot-h: var(--ng-dot-h, 8px);
        --dot-radius: var(--ng-dot-radius, 999px);
        --dot-color: var(--ng-dot-color, #ffffff);
        --dot-bg: var(--ng-dot-bg, rgba(0,0,0,.45));
        width: var(--dot-w);
        height: var(--dot-h);
        border-radius: var(--dot-radius);
        background: var(--dot-bg);
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .ngc-dots a:hover {
            filter: brightness(1.2);
        }

        /* Animaciones para dots en modo automático */
        .ngc-dots a:nth-of-type(1) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 0);
        }

        .ngc-dots a:nth-of-type(2) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 1);
        }

        .ngc-dots a:nth-of-type(3) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 2);
        }

        .ngc-dots a:nth-of-type(4) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 3);
        }

        .ngc-dots a:nth-of-type(5) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 4);
        }

        .ngc-dots a:nth-of-type(6) {
            animation: ngc-dot-cycle var(--ng-total) linear infinite;
            animation-delay: calc(var(--ng-duration) * 5);
        }

@keyframes ngc-dot-cycle {
    0% {
        background: var(--dot-color);
    }

    30% {
        background: var(--dot-color);
    }

    33.333% {
        background: var(--dot-bg);
    }

    100% {
        background: var(--dot-bg);
    }
}

/* Pausar animación de dots al hover */
.ng-carousel:hover .ngc-dots a {
    animation-play-state: paused;
}

/* En modo manual, desactivar animaciones de dots */
.ng-carousel:has(.manual-mode) .ngc-dots a {
    animation: none !important;
    background: var(--dot-bg);
}

/* Clase para dot activo en modo manual (se aplica desde Blazor) */
.ngc-dots a.active {
    background: var(--dot-color) !important;
}

/* === ARROWS === */
.ngc-arrows {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 6;
}

    .ngc-arrows > div {
        position: absolute;
        inset: 0;
        display: none;
        pointer-events: none;
    }

    .ngc-arrows a {
        pointer-events: auto;
    }

.ngc-arrow {
    --arrow-bg: rgba(0,0,0,.35);
    --arrow-color: #fff;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    position: relative;
    display: block;
    background: var(--arrow-bg);
    color: var(--arrow-color);
    text-decoration: none;
    font-size: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ngc-arrow:hover {
        filter: brightness(1.1);
    }

.ngc-arrow-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    display: block;
    color: inherit;
    pointer-events: none;
}

.ngc-arrow.prev {
    justify-self: start;
}

.ngc-arrow.next {
    justify-self: end;
}

.ngc-grad {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}