@media screen and (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .right-content { padding: 40px; }
}

@media screen and (max-width: 900px) {
    .split-layout { flex-direction: column; }
    .left-image { 
        width: 100%; 
        height: 35vh; 
        background-position: left top; /* Esto evita que se corte la parte de arriba */
    }
    .right-content { width: 100%; padding: 40px 20px; }
    .logo { width: 260px; }
    h1 { font-size: 26px; }
}

@media screen and (max-width: 480px) {
    .left-image { 
        height: 30vh; 
        background-position: left top; 
    }
    .services-grid { gap: 10px; }
    /* ... el resto de tu código queda igual ... */
    
    .service-item { padding: 15px 5px; font-size: 13px; }
    .service-item i { font-size: 24px; }
    .buttons { flex-direction: column; width: 100%; gap: 15px; }
    .btn { width: 100%; }
    .social-icons a { width: 40px; height: 40px; font-size: 18px; margin: 0 5px; }
}