/* Fuentes locales */
@font-face {
    font-family: 'Kaki';
    src: url('../fonts/kaki_extralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kaki';
    src: url('../fonts/kaki_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kaki';
    src: url('../fonts/kaki_extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Comfortaa', Arial, sans-serif;
    line-height: 1.6;
    /* background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%); */
    /* background: red; */
    
}



/* Clases de fuentes */
.font-baloo {
    font-family: 'Baloo 2', cursive;
}

.font-comfortaa {
    font-family: 'Comfortaa', cursive;
}

.font-concert {
    font-family: 'Concert One', cursive;
}

.font-fredoka {
    font-family: 'Fredoka One', cursive;
}

/* Fuente Kaki - Pesos disponibles: 200 (extralight), 400 (regular), 800 (extrabold) */
.font-kaki {
    font-family: 'Kaki', sans-serif;
}





/* Estilos personalizados */

h1 {
    font-size: 3.75rem;
        font-family: Fredoka One, cursive;

            /* background: linear-gradient(135deg, #5c83bc 0%, #d47ca6 100%); */
            /* background-clip: text; */
            /* -webkit-background-clip: text; */
            /* -webkit-text-fill-color: transparent; */
}

header {
    background-image: url('../images/header-1.png');
    background-size: auto 100%;
    height: 250px;
    background-repeat: repeat-x;  
    display: flex;
    justify-content: center;
    align-items: center;
    animation: moveClouds 50s linear infinite;
}


header div img {
    padding-top: 20px;
    padding-bottom: 10px;
    max-width: 250px;
    margin: 2rem 0 2rem 0;
}

.bienvenidos {
    /* background: rgb(255 249 246) url('https://misprimerospasosvii.org/wp-content/uploads/2025/09/fondo-diluido.png'); */
    /* background: rgb(253, 243, 238) url('https://misprimerospasosvii.org/wp-content/uploads/2025/09/doodles-scaled.png'); */
     background: rgb(253, 243, 238)  url('../images/carrousel-1.jpg') no-repeat center center;

     
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* padding: 9rem 0;     */
}

.bienvenidos p{
    color: rgb(55, 65, 81);
}

.bienvenidos p span{
    color: #d47ca6;
}

.footer-1 {
    background-image: url('../images/footer-1.png');
    background-position-x: center;
    height: 214px;
}

.footer-2 {
    text-align: center;
    background-image: url('../images/footer-2.png');
    background-position-x: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: black;
}

.bg-azul-claro {
    background-color: #e3eeff;
}

.text-azul-claro {
    color: #5c83bc;
}
.bg-azul-oscuro {
    background-color: #5c83bc;
}


.bg-amarillo-claro {
    background-color: #fffdeb;
}
.text-naranja {
    color: #f39e39;
}
.bg-naranja {
    background-color: #f39e39;
}
.border-naranja {
    border-color: #f39e39;
}

/* 
 * EFECTO DE NUBES ANIMADAS - Moviéndose de lado a lado
 * 
 * Para hacer que las nubes se muevan horizontalmente:
 * 
 * 1. Asegúrate de que el elemento tenga background-repeat: repeat-x;
 * 2. Agrega la animación al elemento:
 *    animation: moveClouds 20s linear infinite;
 * 
 * 3. Define el @keyframes:
 */
@keyframes moveClouds {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1000px 0; /* Ajusta según el ancho de tu imagen */
    }
}

/* 
 * Ejemplo de uso en un elemento:
 * .clouds-animated {
 *     background-image: url('/images/nubes.png');
 *     background-repeat: repeat-x;
 *     background-size: auto 100%;
 *     animation: moveClouds 30s linear infinite;
 * }
 * 
 * Puedes ajustar:
 * - La duración (30s) para hacer más lento o rápido
 * - El background-position final (-1000px) según el tamaño de tu imagen
 * - La dirección cambiando los valores positivos/negativos
 */

/* Estilos para el carrusel de patrocinadores */
.patrocinadores-carousel .slick-prev,
.patrocinadores-carousel .slick-next {
    z-index: 1;
}

.patrocinadores-carousel .slick-prev {
    left: -40px;
}

.patrocinadores-carousel .slick-next {
    right: -40px;
}

.patrocinadores-carousel .slick-prev:before,
.patrocinadores-carousel .slick-next:before {
    font-size: 30px;
    color: #5c83bc;
}

.patrocinadores-carousel .slick-dots {
    bottom: -50px;
}

.patrocinadores-carousel .slick-dots li button:before {
    color: #5c83bc;
    font-size: 12px;
}

.patrocinadores-carousel .slick-dots li.slick-active button:before {
    color: #d47ca6;
}

/* Responsive para el carrusel */
@media (max-width: 768px) {
    .patrocinadores-carousel .slick-prev {
        left: -20px;
    }
    
    .patrocinadores-carousel .slick-next {
        right: -20px;
    }
}

/* Estilos para el carrusel principal */
.carousel-section {
    width: 100%;
    overflow: hidden;
}

.main-carousel {
    width: 100%;
    position: relative;
    /* Aspect ratio basado en el tamaño real de las imágenes: 1280 x 533 */
    aspect-ratio: 1280 / 533;
    max-width: 1280px; /* Ancho máximo basado en el tamaño original */
    margin: 0 auto; /* Centrar el carrusel */
}

/* Cuando el carrusel está en la sección bienvenidos, no usar aspect-ratio fijo */
.bienvenidos .main-carousel {
    aspect-ratio: auto;
    max-width: 100%;
}

.main-carousel .carousel-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Para el carrusel de bienvenidos, el slide debe ajustarse al contenido */
.bienvenidos .main-carousel .carousel-slide {
    height: auto;
    min-height: auto;
}

.main-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.main-carousel .slick-prev,
.main-carousel .slick-next {
    z-index: 2;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.main-carousel .slick-prev:hover,
.main-carousel .slick-next:hover {
    background-color: rgba(255, 255, 255, 1);
}

.main-carousel .slick-prev {
    left: 20px;
}

.main-carousel .slick-next {
    right: 20px;
}

.main-carousel .slick-prev:before,
.main-carousel .slick-next:before {
    font-size: 24px;
    color: #5c83bc;
    opacity: 1;
}

.main-carousel .slick-dots {
    bottom: 30px;
    z-index: 2;
}

.main-carousel .slick-dots li {
    width: auto;
    height: auto;
    margin: 0 4px;
}

.main-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    transition: all 0.3s ease;
}

.main-carousel .slick-dots li button:before {
    display: none;
}

.main-carousel .slick-dots li.slick-active button {
    width: 24px;
    height: 8px;
    border-radius: 4px;
    background-color: #5c83bc;
}

/* Estilos específicos para el carrusel de bienvenidos */
.bienvenidos .main-carousel .slick-prev,
.bienvenidos .main-carousel .slick-next {
    background-color: rgba(92, 131, 188, 0.8);
}

.bienvenidos .main-carousel .slick-prev:hover,
.bienvenidos .main-carousel .slick-next:hover {
    background-color: rgba(92, 131, 188, 1);
}

.bienvenidos .main-carousel .slick-prev:before,
.bienvenidos .main-carousel .slick-next:before {
    color: white;
}

.bienvenidos .main-carousel .slick-dots {
    bottom: -62px;
}

.bienvenidos .main-carousel .slick-dots li {
    width: auto;
    height: auto;
    margin: 0 4px;
}

.bienvenidos .main-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(92, 131, 188, 0.4);
    border: none;
    transition: all 0.3s ease;
}

.bienvenidos .main-carousel .slick-dots li button:before {
    display: none;
}

.bienvenidos .main-carousel .slick-dots li.slick-active button {
    width: 24px;
    height: 8px;
    border-radius: 4px;
    background-color: #5c83bc;
}

/* Responsive para el carrusel principal */
@media (max-width: 768px) {
    .main-carousel {
        /* Mantiene la proporción 1280:533 en móvil también */
        aspect-ratio: 1280 / 533;
        max-width: 100%;
    }
    
    /* Para el carrusel de bienvenidos, mantener aspect-ratio auto en móvil */
    .bienvenidos .main-carousel {
        aspect-ratio: auto;
    }
    
    .main-carousel .slick-prev {
        left: 10px;
        width: 40px;
        height: 40px;
    }
    
    .main-carousel .slick-next {
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .main-carousel .slick-prev:before,
    .main-carousel .slick-next:before {
        font-size: 20px;
    }
    
    /* Estilos para el carrusel de bienvenidos en mobile - controles a los lados de los dots */
    .bienvenidos .main-carousel .slick-prev,
    .bienvenidos .main-carousel .slick-next {
        top: auto;
        bottom: -55px;
        transform: translateY(50%);
        width: 40px;
        height: 40px;
    }
    
    .bienvenidos .main-carousel .slick-prev:before,
    .bienvenidos .main-carousel .slick-next:before {
        font-size: 20px;
    }
    
    .bienvenidos .main-carousel .slick-prev {
        left: calc(50% - 130px);
    }
    
    .bienvenidos .main-carousel .slick-next {
        right: calc(50% - 130px);
    }
}

/* Estilos para el carrusel de programas sociales */

.programas-carousel .slick-prev,
.programas-carousel .slick-next {
    z-index: 1;
}

.programas-carousel .slick-prev {
    left: -40px;
}

.programas-carousel .slick-next {
    right: -40px;
}

.programas-carousel .slick-prev:before,
.programas-carousel .slick-next:before {
    font-size: 30px;
    color: #5c83bc;
}

.programas-carousel .slick-dots {
    bottom: -50px;
}

.programas-carousel .slick-dots li button:before {
    color: #5c83bc;
    font-size: 12px;
}

.programas-carousel .slick-dots li.slick-active button:before {
    color: #d47ca6;
}

/* Responsive para el carrusel de programas */
@media (max-width: 768px) {
    .programas-carousel .slick-prev {
        left: -20px;
    }
    
    .programas-carousel .slick-next {
        right: -20px;
    }
}