/* ==========================================
   RESPONSIVE DESIGN CORREGIDO Y UNIVERSAL
   ========================================== */

/* 1. Tablets y pantallas medianas (hasta 1024px) */
@media (max-width: 1024px) {
    .nav-menu {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 80px !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--bg-navy, #07111e) !important;
        padding: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
        z-index: 1000 !important;
    }
    
    .nav-menu.active {
        display: flex !important;
    }

    .hamburger {
        display: block !important;
    }

    .nav-actions .btn-nexa-outline {
        display: none !important;
    }

    /* Aquí mantenemos 2 columnas en tablets para una mejor distribución */
    .grid-4, .grid-4-editorial, .grid-5, .grid-5-expertise {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* 2. Dispositivos móviles (hasta 768px) */
@media (max-width: 768px) {
    /* Forzar a 1 sola columna SOLAMENTE en celulares pequeños */
    .grid-4, .grid-4-editorial, .grid-3, .grid-2-split, .grid-5, .grid-5-expertise, .service-features-grid {
        grid-template-columns: 1fr !important;
    }

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

    /* Ajustes del Hero y Formularios para móvil */
    .hero-section h1, .hero-content h1 {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .hero-section p, .hero-content p {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .hero-metrics {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 6px !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .hero-metrics .metric-item {
        flex: 1 !important;
        text-align: center !important;
        background: rgba(7, 26, 43, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        padding: 8px 4px !important;
        border-radius: 6px !important;
    }

    .hero-metrics .metric-num {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        display: block !important;
        color: var(--accent-orange, #f97316) !important;
        margin-bottom: 2px !important;
    }

    .hero-metrics .metric-text {
        font-size: 0.52rem !important;
        display: block !important;
        line-height: 1.1 !important;
        letter-spacing: -0.2px !important;
        white-space: normal !important;
        font-weight: 600 !important;
    }

    .channel-item {
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .channel-item > div {
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .channel-item strong, 
    .channel-item span, 
    .channel-item a,
    .channel-item .location-link {
        display: block !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .contact-form-card .input-group,
    .nexa-form .input-group {
        flex-direction: column !important;
        gap: 8px !important;
        display: flex !important;
        width: 100% !important;
    }

    .contact-form-card, 
    .contact-form-col {
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 40px !important;
    }
}

/* ============================================================
   ADAPTACIÓN RESPONSIVA MÓVIL Y TABLET (< 992px)
   ============================================================ */
@media (max-width: 992px) {
    .nav-container {
        padding: 0 16px !important;
        height: 70px !important;
        justify-content: space-between !important;
    }

    .logo-img {
        max-height: 38px !important; 
    }

    .nav-menu {
        display: none !important; 
    }

    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
    }

    .lang-selector {
        padding: 5px 10px !important;
        font-size: 0.72rem !important;
        min-width: 75px;
    }
}

/* ==========================================
   DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
   ========================================== */
@media (max-width: 992px) {
    .hero-section .container {
        grid-template-columns: 1fr; /* Pasa a una sola columna en pantallas chicas */
        gap: 40px;
    }
    .hero-section {
        padding-top: 120px;
        height: auto;
    }
    .hero-metrics {
        grid-column: 1;
        min-height: 380px;
    }
}

/* Responsivo controlado para pantallas chicas y medianas */
@media (max-width: 1024px) {
    .grid-4 { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 640px) {
    .grid-4 { 
        grid-template-columns: 1fr !important; 
    }
}

/* ============================================================
   ADAPTACIÓN RESPONSIVA
   ============================================================ */
@media (max-width: 768px) {
    .chain-flow {
        flex-direction: column !important;
        gap: 12px !important;
        margin: 30px 0 !important;
    }

    .chain-arrow {
        transform: rotate(90deg) !important;
        animation: pulseArrowVividVertical 2s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
        margin: 4px 0 !important;
    }

    .chain-node {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }

    .objective-box {
        padding: 25px 22px !important;
        margin: 30px 15px 0 !important;
        border-radius: 8px !important;
        border-left-width: 4px !important;
    }
}


/* Responsivo para móviles */
@media (max-width: 968px) {
    .about-image-wrapper {
        height: 380px;
    }
    .about-bg-layer {
        width: 85%;
        height: 70%;
    }
    .about-fg-layer {
        width: 70%;
        height: 70%;
    }
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 992px) {
    .about-top-grid {
        grid-template-columns: 1fr;
    }
    .pillars-box-bottom {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RESPONSIVO EXCLUSIVO PARA FOOTER
   ============================================================ */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 35px !important;
    }
}

@media (max-width: 768px) {
    .nexa-footer {
        padding: 60px 0 20px !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
    }
}

/* ============================================================
   ADAPTACIÓN RESPONSIVA PARA TABLETS Y MÓVILES
   ============================================================ */
@media (max-width: 992px) {
    .nexa-visual-grid-unique {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .nexa-visual-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin: 25px 0 !important;
    }

    .nexa-visual-card-unique .visual-img-wrapper {
        height: 200px !important;
    }

    .nexa-visual-card-unique .visual-content {
        padding: 20px 18px !important;
    }

    .nexa-visual-card-unique .visual-content h3 {
        font-size: 1.05rem !important;
    }

    .nexa-visual-card-unique .visual-content p {
        font-size: 0.85rem !important;
    }
}
/* ============================================================
   RESPONSIVO EXCLUSIVO (Móviles y Tablets)
   ============================================================ */
@media (max-width: 1024px) {
    .nexa-visual-grid-unique {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .nexa-visual-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ============================================================
   ADAPTACIÓN RESPONSIVA
   ============================================================ */
@media (max-width: 1024px) {
    .nexa-editorial-grid-unique {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .nexa-editorial-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .nexa-editorial-grid-unique .nexa-editorial-item-unique {
        min-height: 320px !important;
        padding: 28px 22px !important;
    }

    .nexa-editorial-grid-unique .ed-num {
        font-size: 1.8rem !important;
    }
}


/* ============================================================
   RESPONSIVO EXCLUSIVO PARA MÓVILES
   ============================================================ */
@media (max-width: 768px) {
    .nexa-hero-metrics-unique {
        gap: 8px !important;
        margin-top: 15px !important;
        padding-top: 10px !important;
    }

    .nexa-hero-metrics-unique .nexa-metric-item-unique {
        padding: 12px 10px !important;
        text-align: center !important;
    }

    .nexa-hero-metrics-unique .metric-num {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }

    .nexa-hero-metrics-unique .metric-text {
        font-size: 0.55rem !important;
        letter-spacing: -0.2px !important;
        white-space: normal !important;
    }
}

/* ============================================================
   RESPONSIVO EXCLUSIVO
   ============================================================ */
@media (max-width: 768px) {
    .nexa-service-block-unique {
        padding: 24px !important;
    }

    .nexa-service-header-unique {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .nexa-service-features-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ============================================================
   RESPONSIVO EXCLUSIVO
   ============================================================ */
@media (max-width: 1024px) {
    .nexa-projects-grid-unique {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .nexa-projects-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    
    .nexa-project-card-unique {
        padding: 22px !important;
    }
}

/* ============================================================
   RESPONSIVO EXCLUSIVO
   ============================================================ */
@media (max-width: 1024px) {
    .nexa-insights-grid-unique {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .nexa-insights-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .nexa-insight-card-unique {
        padding: 24px !important;
    }
}

/* ============================================================
   RESPONSIVO ESTRICTO PARA MÓVILES Y TABLETS
   ============================================================ */
@media (max-width: 992px) {
    .nexa-contact-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .nexa-contact-section-unique {
        padding: 40px 0 !important;
    }

    .nexa-contact-container-unique {
        padding: 0 15px !important;
    }

    .nexa-contact-form-card-unique {
        padding: 24px !important;
    }

    .nexa-contact-info-col-unique h2 {
        font-size: 1.7rem !important;
    }
}


/* ============================================================
   RESPONSIVO ESTRICTO PARA MÓVILES Y TABLETS
   ============================================================ */
@media (max-width: 1024px) {
    .nexa-grid-5-unique {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .nexa-about-top-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .nexa-about-image-wrapper-unique {
        min-height: 350px !important;
        margin-top: 10px !important;
    }

    .nexa-pillars-box-bottom-unique {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .nexa-about-section-unique,
    .nexa-mission-values-section-unique {
        padding: 50px 0 !important;
    }

    .nexa-about-text-content-unique h2 {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 768px) {
    .nexa-mission-vision-grid-unique {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin-bottom: 45px !important;
    }

    .nexa-grid-5-unique {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .nexa-values-title-unique {
        font-size: 1.6rem !important;
        margin-bottom: 30px !important;
    }

    .nexa-mission-card-unique,
    .nexa-vision-card-unique {
        padding: 28px 22px !important;
    }
}