/* ==============================================================================
   ARCHIVO AISLADO: servicios-responsive.css
   NOTA: Solo afecta a tablets y móviles (max-width: 992px y 768px). 
   El diseño de escritorio (servicios.css) se mantiene intacto.
   ============================================================================== */

/* ==============================================================================
   1. TABLETS Y DISPOSITIVOS MEDIANOS (max-width: 992px)
   ============================================================================== */
@media screen and (max-width: 992px) {
    .hero-servicios-content,
    .servicios-grid,
    .ventajas-grid,
    .cotizacion-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .form-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ==============================================================================
   2. MÓVILES GRANDES Y TABLETS VERTICALES (max-width: 768px)
   ============================================================================== */
@media screen and (max-width: 768px) {

    /* --- 2.1. CONTENEDOR GENERAL --- */
    .container-servicios {
        max-width: 100% !important;
        padding: 80px 15px !important;
    }

    /* --- 2.2. HERO DE SERVICIOS --- */
    .hero-servicios {
        min-height: auto !important;
        padding: 50px 15px !important;
    }

    .hero-servicios-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero-text-side h1 {
        font-size: 2.4rem !important;
        line-height: 1.15 !important;
    }

    .hero-text-side p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .hero-action-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .hero-action-buttons a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-features-side {
        gap: 12px !important;
    }

    .hero-feature-item {
        padding: 8px 12px !important;
        gap: 12px !important;
    }

    .feature-icon-box {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
    }

    .hero-feature-item span {
        font-size: 0.95rem !important;
    }

    /* --- 2.3. GRID PRINCIPAL DE SERVICIOS --- */
    .seccion-servicios-main {
        padding: 40px 0 !important;
    }

    .servicios-header-text {
        margin-bottom: 25px !important;
    }

    .servicios-header-text h2 {
        font-size: 1.6rem !important;
    }

    .servicios-header-text p {
        font-size: 0.9rem !important;
    }

    .servicios-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .card-image-wrapper {
        height: 200px !important;
    }

    /* --- 2.4. VENTAJAS COMPETITIVAS --- */
    .seccion-ventajas {
        padding: 35px 15px !important;
    }

    .ventajas-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .ventaja-item h4 {
        font-size: 1.3rem !important;
    }

    .ventaja-item p {
        font-size: 0.95rem !important;
    }

    /* --- 2.5. COTIZACIÓN Y CONTACTO --- */
    .seccion-cotizacion-servicios {
        padding: 40px 0 !important;
    }

    .cotizacion-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .cotizacion-info h2 {
        font-size: 1.6rem !important;
    }

    .cotizacion-info p {
        font-size: 0.9rem !important;
    }

    .cotizacion-form {
        padding: 20px 15px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* --- 2.6. MODAL DINÁMICO ("VER MÁS") --- */
    .servicio-modal-overlay {
        padding: 10px !important;
    }

    .servicio-modal-container {
        max-height: 95vh !important;
        border-radius: 12px !important;
    }

    .modal-video-wrapper {
        height: 120px !important;
    }

    .modal-main-content {
        padding: 20px 15px 80px 15px !important;
    }

    .modal-servicio-header h2 {
        font-size: 1.4rem !important;
    }

    .modal-short-desc {
        font-size: 0.9rem !important;
    }

    .modal-floating-contact {
        padding: 12px 15px !important;
    }

    .btn-modal-contactar {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        padding: 10px 20px !important;
    }
}