/* ============================================================
   RESPONSIVE OVERRIDE - TEAMWORK LOGÍSTICA
   ============================================================ */

/* Ajustes para Tablets y Laptops Pequeñas (1024px) */
@media (max-width: 1024px) {
    .main-wrapper {
        padding: 0 1.5rem; /* Reducimos margen lateral */
    }
    
    .tech-split {
        gap: 2rem; /* Menos espacio entre imagen y texto */
    }
}

/* Ajustes para Celulares (768px o menos) */
@media (max-width: 768px) {
    /* 1. SECCIONES Y CONTENEDORES */
    .stitch-section {
        margin: 2rem 0; /* Menos separación entre bloques */
    }

    .section-head, .section-body {
        padding: 2rem 1.5rem; /* Padding más compacto */
    }

    .section-head h2 {
        font-size: 2.2rem; /* Forzamos un tamaño legible */
    }

    /* 2. GRILLAS (EL CAMBIO CLAVE) */
    .services-grid {
        /* Bajamos el mínimo de 350px a 1fr para que no se desborde */
        grid-template-columns: 1fr !important; 
        gap: 1rem;
    }

    .tech-split {
        grid-template-columns: 1fr; /* Stack vertical: imagen arriba, texto abajo */
        text-align: center;
    }

    /* Ajuste para la sección de velocidad (01 y 24H) */
    .metrics-container .section-body {
        grid-template-columns: 1fr !important; 
        gap: 2.5rem;
    }

    /* 3. HERO (PORTADA) */
    .hero-title .teamwork {
    font-size: 3.5rem !important; /* Reducimos el tamaño para que no desborde */
    letter-spacing: 1px; 
    line-height: 1;
    display: block; /* Asegura que tome su propio renglón si es necesario */
    width: auto;
    }
    
    .logistica {
        font-size: 1.2rem !important; /* También ajustamos el subtítulo */
        letter-spacing: 3px;
    }
    
    .hero-stitch .hero-content .hero-title .teamwork {
        font-size: 11vw !important; /* El tamaño ahora depende del ancho del celu */
        letter-spacing: 1px !important;
        display: block !important;
        width: 100% !important;
        line-height: 1 !important;
    }

    .hero-stitch .hero-content .hero-title .logistica {
        font-size: 5vw !important;
        letter-spacing: 3px !important;
    }
    
    .hero-content p {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* 4. FOOTER */
    .mini-footer {
        flex-direction: column; /* Stack vertical */
        gap: 1.5rem;
        padding: 2rem 1rem;
        text-align: center;
        height: auto;
    }

    .footer-right {
        flex-direction: column;
        gap: 0.8rem;
    }

    /* 5. BOTONES FLOTANTES (UI) */
    .floating-actions {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .float-btn {
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-btn {
        font-size: 3rem;
    }
}

/* Ajustes para pantallas muy pequeñas (360px - iPhone SE, etc.) */
@media (max-width: 380px) {
    .hero-title .teamwork {
        font-size: 2.8rem !important; /* Evitamos que el nombre de la empresa se rompa */
    }
    
    .section-head h2 {
        font-size: 1.8rem;
    }
}