/* ========================================
   CORRECCIÓN DE ENCABEZADOS PARA SEO
   Mantiene jerarquía HTML correcta sin romper diseño
   ======================================== */

/* =====================================
   1. TARJETAS DE SERVICIOS
   ===================================== */

/* Títulos de servicio - Control de desbordamiento */
.service-title h3,
.service-title h2,
.service-title h4 {
    /* Tamaño de fuente responsive */
    font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
    
    /* Control de líneas */
    line-height: 1.3 !important;
    
    /* Prevenir desbordamiento */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    
    /* Limitar altura máxima */
    max-height: 4.5em !important;
    overflow: hidden !important;
    
    /* Margen consistente */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Peso y color */
    font-weight: 700 !important;
    color: var(--primary) !important;
    
    /* Text ellipsis si es muy largo */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .service-title h3,
    .service-title h2,
    .service-title h4 {
        font-size: 1.25rem !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        max-height: 5em !important;
    }
}

/* =====================================
   2. CASOS DE ESTUDIO
   ===================================== */

.case-studies-title h2,
.case-studies-title h3,
.case-studies-title h4,
.case-studies-title .card-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* =====================================
   3. TÍTULOS DE SECCIÓN (H2 PRINCIPALES)
   ===================================== */

.title-heading {
    /* Tamaño responsive */
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
    line-height: 1.2 !important;
    
    /* Control de texto */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* =====================================
   4. SUB-ENCABEZADOS EN TARJETAS
   ===================================== */

.card h3,
.card h4 {
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* =====================================
   5. EXPERTISE CARDS
   ===================================== */

.chooseus-title,
.card-chooseus h3,
.card-chooseus h4 {
    font-size: clamp(1.15rem, 2.5vw, 1.4rem) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* =====================================
   6. TESTIMONIOS
   ===================================== */

.card-testimonial h3,
.card-testimonial h4,
.testimonial-title {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* =====================================
   7. PROCESO DIGITAL
   ===================================== */

.digital-process-step h3,
.digital-process-step h4,
.step-title {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* =====================================
   8. TÍTULOS LARGOS - AJUSTE ESPECÍFICO
   ===================================== */

/* Para títulos excepcionalmente largos */
h3[title*="Personalizado"],
h3[title*="Aplicaciones"],
h3:has-text("Personalizado"),
.service-title:has(h3) {
    /* Permitir más espacio si es necesario */
    min-height: fit-content !important;
}

/* Contenedor del título con flex para mejor control */
.service-title {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Permite que flex-shrink funcione */
    overflow: hidden !important;
}

/* =====================================
   9. RESPONSIVE - AJUSTES MÓVILES
   ===================================== */

@media (max-width: 576px) {
    /* Tarjetas de servicio en móvil */
    .card-service {
        padding: 20px !important;
    }
    
        .service-title h3,
        .service-title h2,
        .service-title h4 {
            font-size: 1.1rem !important;
            -webkit-line-clamp: 3 !important;
            line-clamp: 3 !important;
            max-height: 5.5em !important;
        }    /* Reducir espacio entre icono y título en móvil */
    .d-flex.justify-content-between.gspace-2 {
        gap: 0.5rem !important;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    /* Tablets */
    .service-title h3,
    .service-title h2,
    .service-title h4 {
        font-size: 1.4rem !important;
    }
}

@media (min-width: 992px) {
    /* Desktop */
    .service-title h3,
    .service-title h2,
    .service-title h4 {
        font-size: 1.65rem !important;
    }
}

/* =====================================
   10. UTILIDADES GENERALES
   ===================================== */

/* Clase auxiliar para títulos que no deben cortarse */
.h-no-truncate {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Clase auxiliar para forzar texto en una línea */
.h-single-line {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
}

/* Clase auxiliar para permitir 3 líneas */
.h-three-lines {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-height: 6em !important;
}

/* =====================================
   11. COMPATIBILIDAD CON DARK MODE
   ===================================== */

body.lightmode .service-title h3,
body.lightmode .service-title h2,
body.lightmode .service-title h4 {
    color: var(--primary) !important;
}

body:not(.lightmode) .service-title h3,
body:not(.lightmode) .service-title h2,
body:not(.lightmode) .service-title h4 {
    color: var(--primary) !important;
}

/* =====================================
   12. PREVENCIÓN DE DESBORDAMIENTO GLOBAL
   ===================================== */

/* Aplicar a todos los h2, h3, h4 dentro de tarjetas */
.card h2,
.card h3,
.card h4 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* =====================================
   13. CORRECCIÓN DE FOOTER
   ===================================== */

/* Títulos del footer (h2, h5) */
.footer-logo-container h2,
.footer-quick-links h5,
.footer-services-container h5,
.footer-contact-container h5 {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Título principal del footer */
.footer-logo-container h2 {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem) !important;
    max-width: 100% !important;
    display: block !important;
}

/* Párrafos del footer */
.footer-logo-container p,
.footer-contact-container p {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Lista del footer */
.footer-list,
.contact-list {
    font-size: clamp(0.875rem, 1.5vw, 0.95rem) !important;
    line-height: 1.6 !important;
}

.footer-list li,
.contact-list li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

.footer-list a {
    display: inline-block !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Copyright y legal links */
.copyright,
.legal-link {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Ajustes responsive para footer en móvil */
@media (max-width: 576px) {
    .footer-logo-container h2 {
        font-size: 1.1rem !important;
    }
    
    .footer-quick-links h5,
    .footer-services-container h5,
    .footer-contact-container h5 {
        font-size: 0.95rem !important;
    }
    
    .copyright-container {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
}

/* =====================================
   NOTAS DE IMPLEMENTACIÓN:
   
   1. Este CSS mantiene la jerarquía SEO correcta (h1 > h2 > h3 > h4)
   2. Usa clamp() para escalado fluido entre breakpoints
   3. Implementa line-clamp para truncar texto largo
   4. Usa word-wrap y overflow-wrap para prevenir desbordamiento
   5. Compatible con dark/light mode
   6. Totalmente responsive
   7. NUEVO: Correcciones específicas para footer
   
   ===================================== */