/* =========================================
   CORRECCIONES PARA IMÁGENES DE SERVICIOS
   ========================================= */

/* Fix para las imágenes de servicios que se desbordan */
.service-icon img,
.icon-img-top {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Corregir el contenedor de las tarjetas de servicio */
.card.shadow-sm {
    overflow: hidden;
}

/* Asegurar que las imágenes de las secciones de servicios no se desborden */
section img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   CORRECCIONES ESPECÍFICAS PARA MÓVIL
   ========================================= */

@media (max-width: 768px) {
    /* Sección "Nuestros Servicios" */
    .service-icon {
        width: 100%;
        max-width: 150px;
        margin: 0 auto;
        text-align: center;
    }
    
    .service-icon img {
        width: 100% !important;
        height: auto !important;
        max-width: 100px;
        margin: 0 auto;
    }
    
    /* Cards de servicio */
    .card.shadow-sm {
        margin-bottom: 2rem;
        padding: 1.5rem !important;
    }
    
    .card-body h5 {
        font-size: 1.1rem !important;
        margin-top: 1rem;
        min-height: auto !important;
    }
}

/* =========================================
   CORRECCIONES PARA LAS IMÁGENES GRANDES
   ========================================= */

@media (max-width: 768px) {
    /* Imágenes en las secciones de servicios detallados */
    .row.mb-7 img,
    .row.py-5 img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px;
        object-fit: cover;
        border-radius: 20px;
        margin-bottom: 1.5rem;
    }
    
    /* Ajustar espaciado entre secciones */
    .row.mb-7,
    .row.py-5 {
        margin-bottom: 2rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* =========================================
   FIX PARA COLUMNAS QUE CONTIENEN IMÁGENES
   ========================================= */

@media (max-width: 768px) {
    /* Asegurar que las columnas con imágenes no se desborden */
    .col-12.col-md-6 {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 1rem;
    }
    
    /* Orden de elementos en móvil */
    .row.mb-7 .col-12.col-md-6:first-child,
    .row.py-5 .col-12.col-md-6:first-child {
        order: 2;
    }
    
    .row.mb-7 .col-12.col-md-6:last-child,
    .row.py-5 .col-12.col-md-6:last-child {
        order: 1;
    }
}

/* =========================================
   CORRECCIONES PARA ICONOS
   ========================================= */

/* Fix para los iconos de la página de servicios */
.icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.icon-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .icon-item {
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto 1rem;
        position: static !important;
    }
    
    .icon-item img {
        width: 35px !important;
        height: 35px !important;
    }
}

/* =========================================
   FIX PARA SECCIÓN DE SERVICIOS CON GRID
   ========================================= */

@media (max-width: 768px) {
    /* Grid de servicios */
    .row.px-3.px-md-3.px-lg-5.justify-content-center {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Centrar cards de servicio */
    .col-12.col-md-6.col-lg-4.text-center {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Reducir padding interno de las cards */
    .card.shadow-sm.p-5 {
        padding: 1.5rem !important;
    }
}

/* =========================================
   CORRECCIONES PARA IMÁGENES CON BORDER RADIUS
   ========================================= */

@media (max-width: 768px) {
    /* Imágenes con border-radius que se pueden desbordar */
    img[style*="border-radius: 20px"],
    img[style*="border-radius"] {
        border-radius: 15px !important;
    }
    
    .img-fluid.w-100 {
        width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   FIX ESPECÍFICO PARA LAS 5 IMÁGENES DE SERVICIOS
   ========================================= */

@media (max-width: 768px) {
    /* Las imágenes numeradas (04.png, 05.png, 06.png, etc.) */
    section .row .col-12.col-md-6 img {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}

/* =========================================
   CORRECCIÓN PARA TEXTOS AL LADO DE IMÁGENES
   ========================================= */

@media (max-width: 768px) {
    /* Texto que acompaña las imágenes */
    .row.mb-7 h3,
    .row.py-5 h3 {
        text-align: left !important;
        margin-bottom: 1rem;
        font-size: 1.3rem !important;
    }
    
    .row.mb-7 p,
    .row.py-5 p {
        text-align: left !important;
    }
    
    /* Eliminar clases de alineación en móvil */
    .text-end {
        text-align: left !important;
    }
}

/* =========================================
   FIX PARA CONTENEDOR PRINCIPAL
   ========================================= */

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* =========================================
   CORRECCIÓN PARA VIDEO DESTACADO
   ========================================= */

@media (max-width: 768px) {
    .video-detacado .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .content-video-section .col-12 {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Asegurar que el video sea responsive */
    .ratio.ratio-16x9 {
        margin-bottom: 1rem;
    }
}

/* =========================================
   FIX PARA ESPACIADO ENTRE SERVICIOS
   ========================================= */

@media (max-width: 768px) {
    /* Reducir el espaciado vertical excesivo */
    .mb-5.mb-md-0,
    .mb-5.mb-lg-0 {
        margin-bottom: 1.5rem !important;
    }
}

/* =========================================
   ASEGURAR QUE NADA SE SALGA DEL VIEWPORT
   ========================================= */

@media (max-width: 768px) {
    /* Forzar que todo el contenido respete el viewport */
    * {
        max-width: 100vw;
    }
    
    img {
        max-width: 100% !important;
    }
    
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .row > * {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =========================================
   FIX PARA HERO BANNER EN SERVICIOS
   ========================================= */

@media (max-width: 768px) {
    .hero.bg-light {
        height: 300px !important;
        margin-top: 0 !important;
    }
    
    .hero.bg-light .img-hero-section {
        height: 300px !important;
    }
    
    .hero.bg-light h1 {
        font-size: 1.5rem !important;
        padding: 0 1rem;
    }
}