/* --- NUEVA CAPA DE FONDO DEL MÓDULO SLIDER --- */
.cendi-slider-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* Hace que abarque 100% de la pantalla incluso dentro del container restringido */
    background-color: #8FC0EA;
    /* Regla de color de fondo del slider */
    overflow: hidden;
    padding-top: 120px;
    /* Para que el menú flote en la parte superior del slider sin taparlo */
    padding-bottom: 30px;
    /* Reducido a cero para unir este módulo con el siguiente */
}

/* Animaciones Optimizadas para GPU */
@keyframes moverNubesLento {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2000px);
    }
}

@keyframes moverNubesRapido {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2000px);
    }
}

.cendi-cloud-1 {
    position: absolute;
    top: 4%;
    left: 0;
    width: 3000px;
    /* Mas ancha para que el loop de translate no se corte */
    height: 100%;
    background: url('../img/nubes.webp') repeat-x top left;
    background-size: 600px auto;
    opacity: 0.4;
    animation: moverNubesLento 450s linear infinite;
    z-index: 1;
    will-change: transform;
}

.cendi-cloud-2 {
    position: absolute;
    top: 25%;
    left: 0;
    width: 3000px;
    height: 100%;
    background: url('../img/nube.webp') repeat-x top left;
    background-size: 400px auto;
    opacity: 0.5;
    animation: moverNubesRapido 320s linear infinite reverse;
    z-index: 1;
    will-change: transform;
}

.cendi-cloud-3 {
    position: absolute;
    top: 14%;
    left: 0;
    width: 3000px;
    height: 100%;
    background: url('../img/nubes.webp') repeat-x top left;
    background-size: 550px auto;
    opacity: 0.25;
    animation: moverNubesLento 550s linear infinite reverse;
    z-index: 1;
    will-change: transform;
}

/* --- ELEMENTOS ANIMADOS DEL SLIDER --- */
.cendi-anim-element {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.plane-right {
    width: 100px;
    top: 10%;
    left: 0;
    transform: translateX(-150px);
    animation: sliderFlyRight 40s linear infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    will-change: transform;
}


@keyframes sliderFlyRight {
    0% {
        transform: translateX(-150px) translateY(0) rotate(0deg);
    }

    50% {
        transform: translateX(55vw) translateY(-25px) rotate(3deg);
    }

    100% {
        transform: translateX(110vw) translateY(0) rotate(0deg);
    }
}


@keyframes sliderDragonflyDash {
    0% {
        transform: translate(0, 0) scaleX(1);
    }

    25% {
        transform: translate(120px, -40px) scaleX(1);
    }

    50% {
        transform: translate(60px, 90px) scaleX(-1);
    }

    75% {
        transform: translate(-120px, 40px) scaleX(-1);
    }

    100% {
        transform: translate(0, 0) scaleX(1);
    }
}


/* Arcoiris CSS (Puro, ovalado en segundo plano) */
.cendi-rainbow {
    position: absolute;
    bottom: -45vw;
    /* Baja el centro del círculo al fondo, para que solo asome la curva superior */
    left: 7.5vw;
    /* Centrado horizontal respecto a la pantalla dejando márgenes idénticos */
    width: 85vw;
    height: 85vw;
    /* Ancho igual a alto = Círculo Perfecto; resultando en el arco de tu dibujo */
    border-radius: 50%;
    /* Truco Visual: Varias sombras crecientes para formar bandas de colores */
    box-shadow:
        0 0 0 20px rgba(238, 130, 238, 0.35),
        /* Violeta */
        0 0 0 40px rgba(75, 0, 130, 0.35),
        /* Indigo */
        0 0 0 60px rgba(0, 0, 255, 0.35),
        /* Azul */
        0 0 0 80px rgba(0, 128, 0, 0.35),
        /* Verde */
        0 0 0 100px rgba(255, 255, 0, 0.35),
        /* Amarillo */
        0 0 0 120px rgba(255, 165, 0, 0.35),
        /* Naranja */
        0 0 0 140px rgba(255, 0, 0, 0.35);
    /* Rojo */

    z-index: 0;
    /* Absoluto segundo plano (detras de las nubes y el slider) */
    pointer-events: none;
    /* Inerte a clics */
}

.cendi-slider-module {
    max-width: 1150px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    border: 6px solid #FFFFFF;
    /* Colores de regla slider (sin carga) */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    background-color: #E9E9E9;
    /* Fondo de recuadro */
    overflow: hidden;
    z-index: 10;
}

.cendi-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1150 / 400;
    /* Mantiene la proporción exacta sin cortar la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

#cendi-loader {
    position: absolute;
    z-index: 5;
    width: 64px;
    height: 64px;
}

.cendi-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    /* Efecto suave (Fade In/Out) */
    z-index: 1;
}

.cendi-slide.active {
    opacity: 1;
    z-index: 2;
}

.cendi-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garantiza que siempre cubra el espacio sin romperse */
    display: block;
}

/* Botones de navegación (Flechas Puras) */
.cendi-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    /* Sombra para dar legibilidad */
}

.cendi-slider-btn svg {
    width: 48px;
    height: 48px;
}

.cendi-slider-btn:hover {
    color: #ff633c;
    /* Color hover naranja de la plantilla */
    transform: translateY(-50%) scale(1.15);
}

.cendi-slider-btn.prev-btn {
    left: 20px;
}

.cendi-slider-btn.next-btn {
    right: 20px;
}

/* Puntos indicadores */
.cendi-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Por defecto al centro */
    gap: 8px;
    z-index: 10;
    pointer-events: none;
    /* Las dots reactivaran pointer-events abajo */
    transition: all 0.5s ease;
}

/* Solo cuando el slider activo tiene titulo/subtitulo se mueve a la derecha */
.cendi-slider-dots.has-content {
    justify-content: flex-end;
    padding-right: 40px;
    box-sizing: border-box;
}

.cendi-dot {
    width: 8px;
    /* Tamaño chico definitivo */
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cendi-dot.active {
    background-color: #ff633c;
    border-color: #fff;
    transform: scale(1.3);
}

.cendi-dot:hover {
    background-color: #fff;
}

/* --- ESTILOS PARA LOS TEXTOS (CAPTIONS) REDISEÑADOS --- */
.cendi-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18%;
    background: rgba(255, 255, 255, 0.25);
    /* Más claro y transparente */
    backdrop-filter: blur(12px);
    /* Efecto de desenfoque potenciado */
    -webkit-backdrop-filter: blur(12px);
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: white;
    z-index: 5;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Sutil brillo superior */
}

.cendi-slide.active .cendi-slide-caption {
    transform: translateY(0);
    opacity: 1;
}

.caption-title {
    font-family: 'Lobster Two', cursive;
    font-size: 32px;
    /* Reducido de 38px para mayor finura */
    margin: 0;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.caption-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    /* Reducido de 18px */
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    max-width: 85%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .cendi-slide-caption {
        height: 60%;
        /* Un poco más alto en móvil para que quepa el texto */
        padding: 20px;
    }

    .caption-title {
        font-size: 32px;
    }

    .caption-subtitle {
        font-size: 16px;
        max-width: 100%;
    }
}