/**
 * ===================================================
 * © 2025 YUYAY Ltda. - yuyay.fin.ec
 * Sistema: Pagína Web
 * Versión: 2.5
 * Desarrollador: [Leonardo Verdugo Crespo - Sistemas]
 * Última modificación: 24/06/2024
 * ===================================================
 */
@media screen and (max-width: 768px) {
    .container__header {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .menu {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .menu ul {
        width: 100%;
        display: none; /* Inicialmente ocultamos el menú */
        flex-direction: column;
        text-align: center;
    }

    .menu.active ul {
        display: block; /* Mostrar el menú cuando se activa */
    }

    .menu ul li {
        margin: 10px 0;
    }

  
    .btn__quote {
        font-size: 16px; /* Aumentar tamaño de fuente en pantallas pequeñas */
        margin-left: 10px;
        padding: 12px 20px;
    }
    /* Alinear las redes sociales al centro en pantallas pequeñas */
    .socialMedia {
        justify-content: center;
        margin-top: 15px;
    }

    /* Logo más pequeño en pantallas pequeñas */
    #logo {
        max-width: 120px;
    }

    /* Estilo para el botón de hamburguesa */
    .menu-toggle {
       
        display: block;
        cursor: pointer;
        margin-left: auto;
    }

}
/* Para pantallas muy pequeñas (como móviles en orientación vertical) */
@media screen and (max-width: 480px) {
    .menu {
        text-align: center;
    }

    .menu ul {
        text-align: center;
    }

    .socialMedia {
        flex-direction: column; /* Apilar los iconos de redes sociales en lugar de alinear en fila */
    }

    .socialMedia a {
        margin-bottom: 10px;
    }
    .btn__quote {
        font-size: 14px;
        padding: 8px 16px; /* Reducir el tamaño del padding */
    }
}

/* Estilo base para el contenedor */
.container__cover {
    display: flex; /* Hacemos que el contenedor sea flexible */
    justify-content: center; /* Centra todo el contenido dentro del contenedor */
    align-items: center; /* Centra el contenido verticalmente */
    padding: 20px;
}

/* Estilo para la imagen y el texto dentro del contenedor */
.cover {
    display: flex;
    justify-content: space-between; /* Deja espacio entre el texto y la imagen */
    width: 100%;
    max-width: 1200px; /* Máxima anchura del contenedor */
}


/* Estilos para pantallas pequeñas (móviles) */
@media screen and (max-width: 768px) {
    .cover {
        flex-direction: column; /* Apila los elementos uno encima del otro */
        text-align: center; /* Centra el texto */
    }

    .text__cover {
        padding-right: 0;
        margin-bottom: 20px; /* Añadir un margen abajo del texto */
    }

    .image__cover img {
        width: 100%; /* La imagen ocupará todo el ancho disponible */
    }

    .btn__text-cover {
        width: 100%; /* El botón ocupará todo el ancho disponible */
        text-align: center; /* Centra el texto dentro del botón */
    }
}

/* Estilos para pantallas medianas (tabletas) */
@media screen and (max-width: 1024px) {
    .cover {
        flex-direction: column; /* Apilar el contenido en pantallas medianas también */
    }
}

/* Estilo adicional para pantallas extra grandes (largas) */
@media screen and (min-width: 1400px) {
    .container__cover {
        padding: 40px;
    }
    .cover {
        max-width: 1300px;
    }
}

/*INFORMACION FINANCIERA*/

/* Estilo base para el contenedor */
.container__about {
    display: flex; /* Usamos flexbox para organizar los elementos */
    justify-content: center; /* Centra el contenido dentro del contenedor */
    padding: 20px;
}

/* Estilo para la sección de 'about' */
.about {
    display: flex; /* Coloca los elementos uno al lado del otro */
    justify-content: space-between; /* Deja espacio entre el texto y las imágenes */
    align-items: center; /* Alinea los elementos verticalmente */
    width: 100%;
    max-width: 1200px; /* Establece un máximo de ancho para pantallas grandes */
}

/* Estilo para el texto */
.text__about {
    flex: 1; /* El texto ocupará la mitad del espacio disponible */
    padding-right: 20px; /* Espacio a la derecha del texto */
}

.text__about h1 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.text__about p {
    font-size: 1.1rem;
    line-height: 1.6;
}



/* Estilo para las imágenes */
.image__about {
    flex: 1; /* La imagen ocupará la otra mitad del espacio */
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espacio entre las imágenes */
}

.image__about img {
    max-width: 100%; /* La imagen no se desbordará */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que las imágenes cubran el área sin distorsionarse */
}

/* Estilos para pantallas pequeñas (móviles) */
@media screen and (max-width: 768px) {
    .about {
        flex-direction: column; /* Apilar el contenido en pantallas pequeñas */
        text-align: center; /* Centrar el texto en móviles */
    }

    .text__about {
        padding-right: 0;
        margin-bottom: 20px; /* Añadir un margen debajo del texto */
    }

    .image__about {
        flex-direction: column; /* Apilar las imágenes */
        gap: 10px; /* Reducir el espacio entre imágenes */
    }

    .image__about img {
        width: 100%; /* Las imágenes ocuparán todo el ancho */
    }

    .text__about .btn__text-about {
        width: 100%; /* El botón ocupará todo el ancho disponible */
        text-align: center; /* Centrar el texto dentro del botón */
    }
}

/* Estilos para pantallas medianas (tabletas) */
@media screen and (max-width: 1024px) {
    .about {
        flex-direction: column; /* Apilar el contenido también en pantallas medianas */
    }
}

/* Estilo adicional para pantallas extra grandes */
@media screen and (min-width: 1400px) {
    .container__about {
        padding: 40px;
    }
    .about {
        max-width: 1300px;
    }
}