/* ============================================================
   RESPONSIVE REAL — TABLETS Y MÓVILES (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* =========================
       HEADER & NAVBAR
    ========================== */

    nav.navbar {
        padding: 10px 0;
    }

    /* Aseguramos que el contenedor del nav sea un flexbox alineado */
    nav.navbar .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
    }

    .header-logo {
        width: 140px; /* Un poco más grande para que sea legible */
        height: auto;
    }

    /* --- SELECTOR DE IDIOMA EN MÓVIL --- */
    .idioma-container {
        display: flex !important; /* Forzamos visibilidad */
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin-left: auto; /* Empuja el selector a la derecha del logo */
        margin-right: 12px; /* Separación del botón hamburguesa */
        order: 2; /* Lo posiciona antes del botón de menú */
    }

    .lang-select {
        font-size: 13px !important;
        padding: 3px 8px !important;
        background: #093453 !important;
        color: white !important;
        border-radius: 15px !important;
    }

    .lang-flag {
        width: 18px !important;
    }

    /* Botón Hamburguesa */
    .navbar-toggler {
        order: 3; /* Se queda al final a la derecha */
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.2);
    }

    /* Menú desplegable */
    .navbar-collapse {
        order: 4; /* Aparece debajo de todo al abrirse */
        width: 100%;
        background: var(--main-bg);
        margin-top: 10px;
    }

    .navbar-nav {
        text-align: center;
        padding: 20px 0;
    }

    .navbar-nav .nav-link {
        font-size: 18px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* =========================
       BANNER (Optimizado)
    ========================== */
    .banner_main {
        padding: 40px 0;
        text-align: center;
    }

    .banner_main .text-bg h1 {
        font-size: 28px;
        line-height: 1.2;
    }
}

    /* =========================
       ABOUT
    ========================== */

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

    .about .titlepage h2 {
        font-size: 26px;
    }

    .about_box h3 {
        font-size: 20px;
    }

    .about_box p,
    .about_box span {
        padding: 0 15px;
    }

    /* =========================
       SERVICES
    ========================== */

    .service {
        padding: 60px 0;
    }

    .service .service_box h3 {
        font-size: 16px;
    }

    /* =========================
       PORTFOLIO
    ========================== */

    .portfolio {
        padding: 60px 0;
    }

    .portfolio_box {
        margin-bottom: 30px;
    }

    /* =========================
       BUSINESS
    ========================== */

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

    .business .business_box h3 {
        font-size: 28px;
    }

    /* =========================
       TEAM
    ========================== */

    .team-section {
        padding: 60px 0;
    }

    .team-title {
        font-size: 30px;
    }

    .team-photo img {
        height: 200px;
    }

    /* =========================
       TESTIMONIAL
    ========================== */

    .testimonial {
        padding: 60px 0;
    }

    .testimonial_Carousel .test_box p {
        font-size: 15px;
    }

    /* =========================
       CONTACT
    ========================== */

    .contact {
        padding: 60px 0;
    }

    .contact_form .contact_control,
    .contact_form .textarea {
        font-size: 16px;
    }

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

    footer {
        text-align: center;
        padding: 50px 0 25px;
    }
    
    .footer-social i {
        font-size: 22px;
        margin: 0 10px;
    }