/* ==============================================================
   RESPONSIVE.CSS - Calibración móvil para Diem Solutions
   ============================================================== */

/* Reglas para pantallas medianas (Tablets) y pequeñas (Celulares) */
@media (max-width: 920px) {

    .container {
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
    }
    
    /* 1. CORRECCIÓN DEL LOGO: 
       Anulamos los márgenes negativos de style.css para evitar que el logo se salga de la pantalla */
    .logo-img {
        margin-left: -20px !important;
        margin-right: -30px !important;
        height: 70px;
        width: auto; 
    }

    .navbar-brand.logo {
        padding: 5px 0;
        justify-content: center; /* Centra el logo en celulares */
        margin-top: 10px;
    }

    /* 2. CORRECCIÓN DEL SLOGAN (HERO):
       Anulamos el margin-top de -60px que rompía la vista móvil */
    .slogan-content {
        margin-top: 100px !important;
        text-align: center; 
    }

    .slogan h1 {
        font-size: 2.2rem;
        margin-left: auto;
        margin-right: auto;
    }

    .yeo-slogan p {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }

    /* 3. CORRECCIÓN DEL FORMULARIO DE CONTACTO:
       Reducimos el padding de 40px a 20px para que quepa en la pantalla del celular */
    .contact-form {
        padding: 25px 20px !important; 
        margin-top: 10px;
    }

    .yeo-contact {
        padding: 40px 0;
    }

    /* 4. FOOTER: 
       Alineación en una sola columna vertical perfecta */
    .yeo-footer .columns {
        flex-direction: column;
        align-items: center;
    }

    .yeo-footer .column {
        width: 100%;
        margin-bottom: 25px;
    }
    
    .yeo-footer-content h4 {
        margin-bottom: 10px;
    }

    .tech-layout {
        flex-direction: column; /* Apila todo en vertical en pantallas chicas */
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .hide-sm {
        display: none; /* Oculta las imágenes en móviles si quieres ahorrar espacio, tal como lo tenías */
    }
}

/* Reglas exclusivas para pantallas MUY pequeñas (Celulares estrechos) */
@media (max-width: 480px) {
    .slogan h1 {
        font-size: 1.8rem;
    }
    
    .contact-form {
        padding: 20px 15px !important;
    }
    
    .contact-form .btn-primary {
        font-size: 14px;
        padding: 12px;
    }
}