@media (min-width:1024px) and (max-width: 1200px) {}


@media (max-width: 1024px) {
    /* MENU */

    /* INICIO */
    /* En este punto, Tailwind ya oculta el menú de escritorio y muestra el botón móvil */

    /* Sección Hero: Ajustar un poco el padding si es necesario */
    .hero-section {
        padding-bottom: 6rem;
        /* Ajuste para el contenido inferior */
    }

    /* La fuente grande del Hero */
    .hero-section h1 {
        font-size: 4rem;
        /* Un poco más pequeño que el 5xl/7xl/8xl */
    }

    /* Sección Intro: Ajustar espacio entre columnas */
    .py-32 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    
    /* NOSOTROS */

    /* SERVICIOS */

    /* CONTACTO */
}


@media (min-width:481px) and (max-width: 768px) {
    /* MENU */
    

    /* INICIO */
    /* El menú móvil ya está activo y la navegación principal está oculta */

    /* Sección Hero: Mayor enfoque en el contenido vertical */
    .hero-section {
        /* Altura de pantalla completa */
        height: 80vh;
    }

    /* La fuente grande del Hero */
    .hero-section h1 {
        font-size: 3rem;
        /* Tamaño más cómodo en tablet */
    }

    /* Sección Intro: Cambia a apilamiento vertical */
    .intro-section .flex-col {
        flex-direction: column;
    }

    /* Ajuste para los bloques de texto en la sección intro */
    .intro-section .md\:w-1\/3,
    .intro-section .md\:w-2\/3 {
        width: 100%;
    }

    /* Asegurar que el logo en la nav siempre sea el logo azul/oscuro en móvil */
    /* Esto es si se quiere que siempre sea visible contra un fondo claro o si el menú ya se abre blanco */
    /* Por defecto, tu HTML lo maneja a través del 'mobile-menu' de fondo blanco */
    #navbar:not(.scrolled) .nav-text {
        color: #111111;
        /* Forzamos el color del botón de menú móvil a oscuro */
    }

    /* Ajuste de la tipografía de los servicios para tablet */
    .services-preview h3 {
        font-size: 1.5rem;
        /* Menos grande */
    }

    /* NOSOTROS */

    /* SERVICIOS */

    /* CONTACTO */
    .pt-32 {
        padding-top: 4rem;
    }

    .space-y-12 {
        text-align: center;
    }

    .pt-1 iframe {
        width: 100%;
        height: 40vh;
    }

    .gap-24 {
        gap: 2rem;
    }

    /* FOOTER */

}


@media (max-width: 480px) {
    /* Espaciado general más ajustado */
    .py-32 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    /* Sección Hero: Títulos más compactos */
    .hero-section h1 {
        font-size: 2.5rem; /* Más pequeño para móviles */
    }
    
    /* Sección Intro: Apilamiento y ajuste de fuentes */
    .intro-section p {
        font-size: 1.5rem; /* La tipografía del párrafo principal */
    }
    
    /* Los dos bloques de información en la sección Intro */
    .intro-section .flex.gap-12 {
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Sección Servicios: Títulos más pequeños */
    .services-preview h2 {
        font-size: 2.5rem;
    }
    
    /* Footer: Apilamiento del menú y contacto */
    /* footer .flex.gap-16,
    footer .flex.gap-32 {
        flex-direction: column;
        gap: 2rem;
    } */
    
    /* Título del Footer */
    footer h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    /* Ajuste del orden de los elementos del footer si es necesario (no requerido aquí) */
}