/* Media Queries para Responsive Design */

/* Dispositivos móviles (ancho máximo 768px) */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    /* Header */
    header .container {
        flex-direction: column;
        align-items: center; /* Centrar elementos del header */
    }

    header .logo {
        margin-bottom: 1em;
    }

    /* Menu Hamburguesa */
    .menu-toggle {
        display: block; /* Mostrar el botón en móviles */
        align-self: flex-end; /* Alinear a la derecha */
        margin-top: -2.5em;
        margin-bottom: 1em;
        z-index: 10; /* Asegurar que el botón esté sobre el menú */
    }

    header nav {
        position: absolute; /* Posicionamiento absoluto */
        top: 100%; /* Colocar debajo del header */
        left: 0;
        width: 100%;
        background-color: #fff; /* Fondo blanco */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
        display: none; /* Oculto por defecto */
        z-index: 5;
    }

    header nav.active {
        display: block; /* Mostrar cuando está activo */
    }

    header nav ul {
        flex-direction: column;
        text-align: center;
    }

    header nav ul li {
        margin: 0.5em 0;
    }

    header nav ul li a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.75em;
        border-bottom: 1px solid #CFD8DC; /* Separador más sutil */
    }

    /* Hero Section */
    #hero .hero-content {
        padding: 1.5em;
    }

    #hero .hero-content h1 {
        font-size: 2.5em;
    }

    /* Ajustes para Servicios, Clientes, Proyectos y Galería */
    #servicios .servicios-grid,
    #clientes-content .clientes-grid,
    #proyectos-content .proyectos-grid,
    #proyectos-destacados .proyectos-grid,
    #galeria-content .galeria-grid {
        grid-template-columns: 1fr;
    }

    /* Ajustes para Contacto */
    #contacto-content .form-group label {
        text-align: left; /* Alinea las etiquetas a la izquierda en el formulario */
    }

    /* Espaciado en las secciones */
    section {
        padding: 2em 0; /* Reduce el padding vertical en móviles */
    }

    /* Footer */
    footer {
        padding: 1.5em 0; /* Ajusta el padding del footer */
    }
}

/* Tablets y dispositivos medianos (ancho máximo 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    /* Ajustes para Servicios, Clientes, Proyectos y Galería */
    #servicios .servicios-grid,
    #clientes-content .clientes-grid,
    #proyectos-content .proyectos-grid,
    #proyectos-destacados .proyectos-grid,
    #galeria-content .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Escritorios pequeños (ancho máximo 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        width: 90%;
    }
}

/* Pantallas grandes (ancho mínimo 1201px) */
@media (min-width: 1201px) {
    .container {
        max-width: 1400px; /* Aumenta el ancho máximo para pantallas grandes */
    }

    /* Ajusta el tamaño de la fuente para pantallas grandes */
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 3.5em;
    }
}