@media screen and (max-width: 767px) {
    body {
        overflow-x: hidden;
        min-width: 100vw;
    }

    /* Header ajustado */
    header {
        height: 120px;
        background-position: center 30%;
    }

    .logo {
        top: -25px;
        left: 20px;
    }

    .logo img {
        width: 160px;
    }

    /* Menú optimizado */
    .menu-container {
        padding: 0 10px;
    }

    .menu li {
        margin: 5px;
        transform: none;
    }

    .menu a {
        padding: 5px;
        font-size: 0.85em;
    }

    /* Layout principal - apilamiento vertical */
    .main-content {
        display: flex;
        flex-direction: column;
        height: auto;
        margin: 20px auto;
        padding: 15px;
        max-width: 100%;
    }

    .titulo-container {
        display: block;
        text-align: center;
    }

    .titulo, .titulo2 {
        display: block;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }

    .titulo {
        margin-bottom: 5px; 
    }

    .contact-section-container,
    .info-section {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .contact-section {
        margin: 20px auto;
        width: 90%;
    }

    .info-section {
        text-align: center;
        margin-top: 30px;
        padding: 0 10px;
    }
    .info-text{
        white-space: nowrap;
    }

    .contact1img {
        width: 80%;
        margin: 20px auto;
        transform: none;
        display: block;
    }

    /* Servicios - Mantener el carrusel */
    .servicios-section {
        height: auto;
        padding: 30px 10px;
        max-width: 100vw;
        margin: 30px auto;
    }

    .carousel-container {
        width: 100%;
        overflow: hidden; 
    }

    .servicios-container {
        width: 100%; 
        scroll-behavior: smooth; 
        flex-wrap: nowrap;
        display: flex;
        overflow-x: auto;
    }

    .servicio-card {
        width: 90vw;
        max-width: 100%;
        margin: 0 10px 0 10px;
        flex-shrink: 0;
    }

    /* No ocultar los botones del carrusel */
    .carousel-button {
        display: none;
    }

    /* Quienes Somos optimizado */
    .quienes-somos-section {
        padding: 40px 15px;
    }

    .quienes-somos-container p {
        font-size: 1em;
        text-align: center;
    }

    /* WhatsApp button ajustado */
    .whatsapp-float {
        width: 45px;
        height: 45px;
        font-size: 24px;
        right: 20px;
        bottom: 20px;
    }
}

/* Tablets (768px a 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        overflow-x: hidden;
    }

    .main-content {
        flex-direction: column;
        height: auto;
    }

    .contact-section-container,
    .info-section {
        width: 100%;
        max-width: 100%;
    }

    .info-section {
        text-align: center;
        margin-top: 40px;
    }

    .contact1img {
        width: 60%;
        margin: 20px auto;
        transform: none;
    }

    /* Servicios - Mantener el carrusel */
    .servicios-container {
        width: 100%; 
        flex-wrap: nowrap;
        display: flex;
        overflow-x: hidden;
    }

    .servicio-card {
        width: 300px; 
        flex-shrink: 0;
        margin: 0 10px 0 10px;
    }

    
    .carousel-button {
        display: none;
    }
}

/* Pequeñas optimizaciones para pantallas grandes estrechas */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .main-content {
        max-width: 95%;
    }

    .servicios-section {
        max-width: 95%;
    }

    .carousel-button {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(15, 15, 15, 0.8);
        border: none;
        padding: 10px;
        font-size: 20px;
        cursor: pointer;
    }

    .carousel-button.prev {
        left: 10px;
    }

    .carousel-button.next {
        right: 10px;
        z-index: 200;
    }

    .titulo-container {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }

    .titulo {
        margin-bottom: 10px; 
        font-size: 2em; 
    }

    .titulo2 {
        font-size: 2em; 
    }
    .contact1img{
        transform: translateX(300px);
    }
}