/* ============================================================
   Tema base — media queries reales.

   Revisado a fondo: el fichero anterior venía casi entero del
   maquetado de referencia original ("tema-visual-base"), con clases
   que esta web no usa (secciones sin declarar en theme.json). Varias
   de esas reglas SÍ coincidían por nombre con clases reales de esta
   web y, al cargar este fichero el último, pisaban por error sus
   valores correctos — entre otros: escondían el botón de menú móvil
   por completo en el teléfono, forzaban Contacto y Sobre nosotros a
   un ancho fijo mayor que la pantalla, y rompían Sobre nosotros a un
   layout en fila. Detalle completo en Project-map.md, §6.

   Solo quedan aquí las reglas que sí afectan a algo real: el menú,
   Sobre nosotros, Servicios, Contacto y el pie.
   ============================================================ */

@media (max-width: 1400px) {
    .nav__list-nav {
        display: none;
    }

    .nav__btn-menu-mobile {
        display: block;
    }
}

@media (max-width: 960px) {
    .services__title::before,
    .experience__title::before {
        display: none;
    }

    .experience__title {
        font-size: 4rem;
    }

    .footer-top__social {
        width: 100%;
        justify-content: center;
    }

    .footer__container {
        flex-wrap: wrap;
        gap: 3rem;
    }

    .footer-middle__container {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .section-head__title {
        font-size: 3rem;
    }

    .experience__title {
        font-size: 3rem;
    }

    .experience__container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .layout__experience {
        margin-bottom: 6rem;
    }
}

@media (max-width: 576px) {
    .layout__nav {
        padding: 1.5rem 1.6rem;
    }

    .nav__contact {
        gap: 0.8rem;
    }

    /* El icono y el número de teléfono ya se repiten en el menú móvil
       (nav-mobile.php): en un teléfono estrecho estorban más de lo que
       ayudan. El selector `>` apunta solo al de teléfono (hijo directo
       de .nav__contact), nunca al de email, que vive dentro de
       .contact__extra junto al botón de menú. */
    .nav__contact > .contact__container-ico,
    .nav__phone {
        display: none;
    }

    .footer-middle__container {
        width: 100%;
    }
}