/* =================================================
   📱 VERSIÓN MÓVIL OPTIMIZADA
   ================================================= */

@media (max-width: 600px) {

    /* ----- GENERAL ----- */

    body {
        font-size: 15px;
    }

    .container {
        padding: 0 18px;
    }

    /* =================================================
       NAVBAR
       ================================================= */

    .navbar-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .navbar-nav > li {
        width: 100%;
    }

    .navbar-nav > li > a {
        font-size: 14px;
        padding: 16px 10px;
        border-bottom: 3px solid rgba(0,0,0,0.3);
    }

    .navbar-nav > li > a span {
        font-size: 16px;
    }

    /* =================================================
       HEADER (LOGO + TEXTO)
       ================================================= */

    .header-content {
        padding: 40px 0;
        text-align: center;
    }

    .logo,
    .ad-ph {
        width: 100%;
        float: none;
        text-align: center;
    }

    .logo {
        margin-bottom: 20px;
    }

    .logo img {
        max-width: 180px;
        margin: 0 auto;
    }

    .ad-ph h1 {
        font-size: 20px;
        line-height: 1.3;
    }

    .ad-ph p {
        font-size: 14px;
    }

    /* =================================================
       BANNER
       ================================================= */

    .banner-1 {
        padding: 60px 0;
        text-align: center;
    }

    .banner-text h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .banner-text p {
        font-size: 16px;
    }

    /* =================================================
       TARJETAS DE SERVICIOS
       ================================================= */

    .contact {
        padding: 40px 0;
    }

    .service-card {
        flex-direction: column !important;
        padding: 25px;
        gap: 20px;
        border-left: 6px solid rgba(112, 136, 143, 0.7);
        border-right: none !important;
    }

    .service-card:nth-child(even) {
        flex-direction: column !important;
        border-right: none !important;
        border-left: 6px solid rgba(112, 136, 143, 0.7);
    }

    .service-img-container {
        width: 100%;
        height: 200px;
        flex: unset;
    }

    .service-info {
        text-align: center;
    }

    .service-info h3 {
        font-size: 20px;
    }

    .service-info p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* =================================================
       FOOTER
       ================================================= */

    .footer {
        padding: 50px 0 30px;
        text-align: center;
    }

    .footer-left h3 {
        font-size: 15px;
    }

    .foot-bottom {
        margin-top: 30px;
        padding-top: 20px;
    }

}