@media (max-width: 1024px) {
    .situaciones-grid { grid-template-columns: repeat(3, 1fr); }
    .servicios-grid { grid-template-columns: repeat(2, 1fr); }
    .elegir-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 38px; }
}

@media (max-width: 768px) {
    /* Solo se activa en pantallas de celulares reales */
    .header-container {
        flex-direction: column !important;
        gap: 15px;
    }
    .hero-container, .vs-container, .vs-columns-box, .educacion-layout {
        grid-template-columns: 1fr;
    }
    .hero-image-area { margin-top: 40px; }
    .quote-box { position: relative; top: 0; right: 0; margin: 20px auto 0 auto; max-width: 100%; }
    .situaciones-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { flex-direction: column; gap: 24px; text-align: center; }
    .footer-brand { flex-direction: column; gap: 15px; }
    .footer-brand p { border-left: none; padding-left: 0; }
/* Agrega esto dentro de tu bloque @media (max-width: 768px) en responsive.css */
.nav-links {
    gap: 10px !important; /* Reducimos el espacio entre los enlaces */
    justify-content: center; /* Centramos los elementos */
    flex-wrap: wrap; /* Permite que si no caben, bajen a la siguiente línea */
}

.nav-links a {
    font-size: 12px !important; /* Reducimos el tamaño de la letra para que quepa */
}

@media (max-width: 480px) {
    .situaciones-grid, .servicios-grid, .elegir-grid { grid-template-columns: 1fr; }
    .resultados-flex { flex-direction: column; gap: 30px; }
    .hero-title { font-size: 30px; }
}