/* ==========================================
   NEXA ENERGY CONSULTING - STYLESHEET (V4 3D MODERN & VIVID)
   ========================================== */

:root {
    --bg-navy: #0A192F;
    --bg-petroleum: #172A45;
    --bg-metal-card: linear-gradient(135deg, rgba(23, 42, 69, 0.9) 0%, rgba(10, 25, 47, 0.95) 100%);

    --white: #FFFFFF;
    --light-gray: #F8FAFC;
    --dark-gray: #94A3B8;
    
    /* Tonos naranjas más vivos y brillantes */
    --accent-orange: #FF6000;     
    --accent-orange-glow: #FF8533;
    
    --text-main: #1E293B;
    
    /* Sombras 3D y profundidad avanzada */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-md: 0 15px 35px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --shadow-lg: 0 30px 60px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);

    --shadow-glow: 0 0 40px rgba(255, 96, 0, 0.6);
    --border-metal: 1px solid rgba(255, 255, 255, 0.15);
    --border-metal-hover: 1px solid rgba(255, 96, 0, 0.6);

    --font-main: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--bg-navy);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-padded { padding: 110px 0; }

.bg-light { background-color: var(--light-gray); }
.bg-dark { background-color: var(--bg-navy); color: var(--white); }
.text-accent { color: var(--accent-orange) !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; max-width: 800px; }

/* Botones Premium 3D con Efecto de Brillo Líquido y Elevación */
.btn-nexa-primary {
    background: linear-gradient(135deg, #FF6000 0%, #FF8533 100%);
    color: var(--white);
    padding: 15px 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    display: inline-block;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 96, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.btn-nexa-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.6s ease;
}
.btn-nexa-primary:hover::before { left: 100%; }
.btn-nexa-primary:hover {
    background: linear-gradient(135deg, #E65500.0, #FF7A00);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(255, 96, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-nexa-secondary {
    background-color: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.9);
    padding: 13px 30px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-nexa-secondary:hover {
    background-color: var(--white);
    color: var(--bg-navy);
    border-color: var(--white);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(255,255,255,0.3);
}

.btn-nexa-outline {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    padding: 9px 22px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    background: rgba(255, 96, 0, 0.03);
}
.btn-nexa-outline:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

/* ============================================================
   NAVBAR MODERNO 3D - EXTREMO A EXTREMO (ESTABLE Y FLUIDO)
   ============================================================ */

.nexa-header {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000;
    background: rgba(7, 20, 38, 0.88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 96, 0, 0.2);
    border-radius: 0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexa-header.scrolled {
    top: 0;
    background: rgba(5, 14, 28, 0.96);
    border-bottom-color: rgba(255, 96, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 80px; 
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    max-height: 45px;
}

.logo-img {
    max-height: 58px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(255, 96, 0, 0.3));
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.03);
}

/* Menú central con espacio controlado para evitar saltos en texto largo */
.nav-menu { 
    display: flex; 
    gap: 16px; 
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: var(--transition-smooth);
    position: relative;
    padding: 8px 0;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute; 
    width: 0; 
    height: 3px; 
    bottom: 2px; 
    left: 0;
    background: linear-gradient(90deg, #FF6000, #FFB03B);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 96, 0, 0.8);
}

.nav-link:hover { 
    color: var(--white);
    transform: translateY(-2px);
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.25);
}

.nav-link:hover::after,
.nav-link.active::after { 
    width: 100% !important; 
}

.nav-link.active {
    color: #FF8533 !important;
    text-shadow: 0 0 15px rgba(255, 96, 0, 0.5);
}

/* Bloque derecho completamente rígido (Inmune a cambios del menú) */
.nav-actions { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    flex-shrink: 0;
    width: auto;
}

/* Selector de idiomas con dimensiones fijas (Evita corrimientos) */
.lang-selector { 
    color: rgba(255, 255, 255, 0.75); 
    font-size: 0.78rem; 
    font-weight: 700; 
    cursor: pointer;
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.8), rgba(10, 25, 47, 0.9));
    padding: 5px 10px;
    border-radius: 25px;
    border: 1px solid rgba(255, 96, 0, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-width: 80px; 
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.lang-selector:hover {
    border-color: #FF6000;
    box-shadow: 0 6px 20px rgba(255, 96, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.lang-selector span { 
    transition: all 0.2s ease; 
    padding: 3px 8px; 
    border-radius: 12px;
    display: inline-block;
    text-align: center;
}

.lang-selector span:hover { 
    color: var(--white); 
    background: rgba(255, 255, 255, 0.08);
}

.lang-selector span.active { 
    color: var(--white); 
    background: linear-gradient(135deg, #FF6000, #FF8533);
    box-shadow: 0 2px 10px rgba(255, 96, 0, 0.6);
    font-weight: 700; 
}


/* ============================================================
   BOTONES PREMIUM 3D CON EFECTO DE BRILLO LÍQUIDO Y ELEVACIÓN
   ============================================================ */

.btn-nexa-primary {
    background: linear-gradient(135deg, #FF6000 0%, #FF8533 100%);
    color: var(--white);
    padding: 15px 32px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    display: inline-block;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 96, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.btn-nexa-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.6s ease;
}
.btn-nexa-primary:hover::before { left: 100%; }
.btn-nexa-primary:hover {
    background: linear-gradient(135deg, #E65500, #FF7A00);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(255, 96, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-nexa-secondary {
    background-color: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.9);
    padding: 13px 30px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-nexa-secondary:hover {
    background-color: var(--white);
    color: var(--bg-navy);
    border-color: var(--white);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(255,255,255,0.3);
}

.btn-nexa-outline {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    padding: 9px 22px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--transition-smooth);
    background: rgba(255, 96, 0, 0.03);
}
.btn-nexa-outline:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}


/* ============================================================
   BOTONES DEL HERO (ESTILO ORIGINAL RESTAURADO)
   ============================================================ */

.hero-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 35px;
}

/* Botón Primario (Naranja sólido como lo tenías al inicio) */
.btn-nexa-primary {
    background-color: var(--accent-orange);
    color: var(--white);
    padding: 12px 28px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-nexa-primary:hover {
    background-color: #e07a14;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

/* Botón Secundario (Borde transparente como lo tenías al inicio) */
.btn-nexa-secondary {
    background-color: transparent;
    color: var(--white);
    padding: 12px 28px;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-nexa-secondary:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: translateY(-2px);
    background-color: rgba(245, 158, 11, 0.05);
}

.hamburger { 
    display: none; 
    color: var(--white); 
    font-size: 1.6rem; 
    cursor: pointer; 
}

/* ==========================================
   HERO SECTION 3D VIVID - CON TÍTULO DE MÁXIMA DISTINCIÓN
   ========================================== */
.hero-section {
    position: relative; 
    height: 100vh; 
    min-height: 750px;
    display: flex; 
    align-items: center; 
    color: var(--white); 
    padding-top: 80px; 
    overflow: hidden;
    background-color: #040E1C; /* Color de respaldo petróleo profundo */
}

/* Estilo para que el video cubra toda la sección como un background-image */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Capa oscura superior enriquecida con matices petróleo de alta gama */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(4, 14, 28, 0.20) 0%, rgba(10, 25, 47, 0.30) 100%);
    z-index: 1;
}

/* Asegurar que el contenido interno esté por encima del video y del overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Viñeta radial lateral para dar profundidad y contraste cinematográfico al texto */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% center, rgba(7, 26, 43, 0.95) 0%, rgba(7, 26, 43, 0.4) 65%);
    pointer-events: none;
    z-index: 1;
}

.hero-content { 
    position: relative; 
    z-index: 2; 
    max-width: 980px; 
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

.hero-badge {
    color: #FF8533; 
    font-family: var(--font-heading); 
    font-weight: 700; 
    font-size: 0.85rem;
    letter-spacing: 2.5px; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    display: inline-block;
    padding: 7px 16px; 
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.8), rgba(10, 25, 47, 0.9)); 
    backdrop-filter: blur(10px); 
    border-radius: 4px;
    border-left: 4px solid #FF6000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideInLeft 1s ease forwards;
}

/* Título principal con relieve 3D, gradiente y sombra profunda */
.hero-section h1 { 
    font-size: 3.8rem; 
    color: var(--white); 
    margin-bottom: 15px; 
    line-height: 1.1; 
    letter-spacing: -0.5px;
    font-family: var(--font-heading);
    font-weight: 800;
    /* Sombra 3D múltiple y avanzada para que sobresalga con fuerza absoluta de la foto/video */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 
                 0 8px 30px rgba(4, 14, 28, 0.9), 
                 0 0 50px rgba(255, 96, 0, 0.25);
}

.hero-subtitle { 
    font-size: 1.35rem; 
    font-weight: 700; 
    color: #FF8533; 
    margin-bottom: 20px; 
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 96, 0, 0.4);
    letter-spacing: 0.5px;
}

.hero-description { 
    font-size: 1.08rem; 
    color: #F8FAFC; 
    margin-bottom: 35px; 
    max-width: 820px; 
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    font-weight: 400;
}

.hero-buttons { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 60px; 
}

/* ==========================================
   ESTILOS MEJORADOS PARA LAS MÉTRICAS / CAJAS 01, 02, 03
   ========================================== */

.hero-metrics {
    display: flex;
    gap: 25px;
    margin-top: 40px; /* Separación clara respecto a los botones de arriba */
    padding-top: 0;
    border-top: none; /* Quitamos la línea blanca que atravesaba los bloques */
}

/* Convertimos cada métrica en una tarjeta sólida, separada y elegante */
.metric-item {
    background: rgba(7, 26, 43, 0.88); /* Fondo petróleo sólido */
    backdrop-filter: blur(10px);        
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde sutil iluminado */
    padding: 20px 24px;
    border-radius: 10px;
    flex: 1; /* Hace que se distribuyan de forma equitativa y separada */
    max-width: 280px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); /* Sombra profunda para destacar sobre la foto */
    transition: var(--transition-smooth);
}

.metric-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--accent-orange); /* Se ilumina el borde en naranja al pasar el mouse */
    background: rgba(7, 26, 43, 0.95); 
}

.metric-item .metric-num { 
    display: block; 
    color: var(--accent-orange); 
    font-family: var(--font-heading); 
    font-weight: 700; 
    font-size: 1.6rem; 
    margin-bottom: 6px;
}

.metric-item .metric-text { 
    font-size: 0.8rem; 
    letter-spacing: 1.2px; 
    color: #ffffff; /* Blanco puro para máxima legibilidad */
    text-transform: uppercase; 
    font-weight: 600;
}


/* Grid Cards con Elevación y Borde Brillante */
.sub-heading { display: block; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 2.5px; color: var(--dark-gray); margin-bottom: 12px; text-transform: uppercase; }
.section-header h2 { font-size: 2.4rem; margin-bottom: 20px; letter-spacing: -0.5px; }
.section-lead { font-size: 1.1rem; color: #55606d; margin-bottom: 60px; line-height: 1.8; }

/* ============================================================
   ESTILOS EXCLUSIVOS: GRID DE 4 TARJETAS 3D VÍVIDO Y PREMIUM
   ============================================================ */

.grid-4 { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

.card-feature {
    background: #FFFFFF !important; 
    padding: 45px 30px !important; 
    border-top: 5px solid #FF6000 !important;
    border-radius: 18px !important; 
    /* Relieve 3D profundo y sofisticado sobre fondo blanco */
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important; 
    position: relative !important; 
    overflow: hidden !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    
    /* Animación de entrada inicial 3D en zigzag */
    opacity: 0;
    transform: translateY(45px) scale(0.94);
    animation: cardFeatureSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;
}

/* Retrasos escalonados para la aparición de cada una de las 4 tarjetas */
.grid-4 .card-feature:nth-child(1) { animation-delay: 0.1s; }
.grid-4 .card-feature:nth-child(2) { animation-delay: 0.25s; }
.grid-4 .card-feature:nth-child(3) { animation-delay: 0.4s; }
.grid-4 .card-feature:nth-child(4) { animation-delay: 0.55s; }

/* Capa de destello y brillo interno dinámico */
.card-feature::before {
    content: '' !important; 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, transparent 70%) !important; 
    opacity: 0 !important; 
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

/* Efecto Hover 3D Vívido Premium */
.card-feature:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border-top-color: #07111e !important;
}

.card-feature:hover::before { 
    opacity: 1 !important; 
}

.card-num { 
    font-family: var(--font-heading) !important; 
    font-weight: 800 !important; 
    color: #94A3B8 !important; 
    font-size: 0.88rem !important; 
    margin-bottom: 16px !important; 
    display: block !important;
    letter-spacing: 1px !important;
}

.card-icon { 
    font-size: 2.3rem !important; 
    color: #FF6000 !important; 
    margin-bottom: 22px !important; 
    display: inline-block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

.card-feature:hover .card-icon { 
    transform: scale(1.18) rotate(10deg) translateY(-2px) !important; 
}

.card-feature h3 { 
    font-size: 1.2rem !important; 
    margin-bottom: 15px !important; 
    color: #0F172A !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.card-feature p { 
    font-size: 0.92rem !important; 
    color: #475569 !important; 
    line-height: 1.65 !important; 
    margin: 0 !important;
}

/* Keyframes para la animación 3D de barrido inicial */
@keyframes cardFeatureSweep {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.94);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ============================================================
   EFECTO EDITORIAL CON IMAGEN DE FONDO Y ZOOM (ALTA GAMA)
   ============================================================ */

.grid-4-editorial { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
}

.grid-4-editorial .editorial-item {
    position: relative;
    padding: 35px 28px;
    border-radius: 12px;
    overflow: hidden; /* Clave para contener la imagen y el zoom sin desbordarse */
    min-height: 340px; /* Le da una altura uniforme y elegante a las tarjetas */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el contenido hacia abajo al estilo editorial moderno */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease,
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Imagen de fondo virtual usando pseudo-elemento para aplicar el zoom independiente */
.grid-4-editorial .editorial-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* AQUÍ PUEDES CAMBIAR LA URL DE CADA IMAGEN O USAR UNA GENERAL */
    background-image: linear-gradient(to top, rgba(4, 10, 18, 0.95) 15%, rgba(7, 26, 43, 0.75) 60%, rgba(7, 26, 43, 0.4) 100%), 
                      url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=800&auto=format&fit=crop'); /* Imagen de ingeniería/industrial de respaldo */
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Asignar imágenes específicas a cada tarjeta (Opcional: puedes cambiar los links por fotos tuyas de campos petroleros/industriales) */
.grid-4-editorial .editorial-item:nth-child(1)::before {
    background-image: linear-gradient(to top, rgba(4, 10, 18, 0.95) 15%, rgba(7, 26, 43, 0.75) 60%, rgba(7, 26, 43, 0.4) 100%), 
                      url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?q=80&w=800&auto=format&fit=crop');
}
.grid-4-editorial .editorial-item:nth-child(2)::before {
    background-image: linear-gradient(to top, rgba(4, 10, 18, 0.95) 15%, rgba(7, 26, 43, 0.75) 60%, rgba(7, 26, 43, 0.4) 100%), 
                      url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=800&auto=format&fit=crop');
}
.grid-4-editorial .editorial-item:nth-child(3)::before {
    background-image: linear-gradient(to top, rgba(4, 10, 18, 0.95) 15%, rgba(7, 26, 43, 0.75) 60%, rgba(7, 26, 43, 0.4) 100%), 
                      url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=800&auto=format&fit=crop');
}
.grid-4-editorial .editorial-item:nth-child(4)::before {
    background-image: linear-gradient(to top, rgba(4, 10, 18, 0.95) 15%, rgba(7, 26, 43, 0.75) 60%, rgba(7, 26, 43, 0.4) 100%), 
                      url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=800&auto=format&fit=crop');
}

/* Asegurar que el contenido de texto esté por encima de la imagen de fondo */
.grid-4-editorial .editorial-item > * {
    position: relative;
    z-index: 2;
}

/* Efecto al pasar el mouse (Zoom suave en la imagen y elevación de la tarjeta) */
.grid-4-editorial .editorial-item:hover {
    transform: translateY(-8px);
    border-color: rgba(245, 158, 11, 0.5); /* Borde naranja corporativo al hacer hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.grid-4-editorial .editorial-item:hover::before {
    transform: scale(1.1); /* Efecto zoom de alta gama en la foto */
}

/* Estilos de los textos dentro de la tarjeta con imagen */
.grid-4-editorial .editorial-item .ed-num { 
    font-family: var(--font-heading); 
    font-size: 2.2rem; 
    font-weight: 700; 
    color: var(--accent-orange); 
    display: block; 
    margin-bottom: 10px; 
}

.grid-4-editorial .editorial-item h3 { 
    color: var(--white); 
    font-size: 1.05rem; 
    margin-bottom: 10px; 
    line-height: 1.4;
}

.grid-4-editorial .editorial-item p { 
    color: #cbd5e0; /* Un gris claro para garantizar una lectura perfecta sobre la imagen oscura */
    font-size: 0.88rem; 
    line-height: 1.6; 
}

/* ============================================================
   ESTILOS EXCLUSIVOS: CHAIN FLOW & OBJECTIVE BOX (3D VIVID & ANIMATED)
   ============================================================ */

.chain-flow { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    gap: 18px !important; 
    margin: 55px 0 !important; 
    flex-wrap: wrap !important; 
}

/* Nodos de la cadena con tridimensionalidad imponente */
.chain-node {
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.98) 0%, rgba(7, 20, 38, 0.99) 100%) !important; 
    color: var(--white, #ffffff) !important; 
    padding: 16px 30px !important;
    font-family: var(--font-heading) !important; 
    font-weight: 700 !important; 
    font-size: 0.9rem !important;
    letter-spacing: 0.3px !important;
    border-radius: 8px !important; 
    /* Sombra 3D profunda y brillo superior */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 96, 0, 0.25) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease,
                background 0.4s ease !important;
    position: relative !important;
    cursor: pointer !important;

    /* Animación de entrada inicial suave */
    opacity: 0;
    transform: translateY(25px) scale(0.95);
    animation: nodeEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retraso escalonado para cada nodo de la cadena */
.chain-flow .chain-node:nth-child(1) { animation-delay: 0.1s; }
.chain-flow .chain-node:nth-child(3) { animation-delay: 0.2s; }
.chain-flow .chain-node:nth-child(5) { animation-delay: 0.3s; }
.chain-flow .chain-node:nth-child(7) { animation-delay: 0.4s; }
.chain-flow .chain-node:nth-child(9) { animation-delay: 0.5s; }

/* Efecto Hover 3D dinámico para los nodos estándar */
.chain-node:hover { 
    transform: translateY(-6px) scale(1.06) !important; 
    box-shadow: 0 20px 40px rgba(255, 96, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; 
    border-color: #FF6000 !important;
    background: linear-gradient(135deg, rgba(30, 53, 85, 0.98) 0%, rgba(11, 28, 51, 0.99) 100%) !important;
}

/* Nodo destacado (Highlight) con resplandor naranja vivo tridimensional */
.chain-node.highlight { 
    background: linear-gradient(135deg, #FF7020 0%, #E04E00) !important; 
    border-color: #FFA366 !important;
    box-shadow: 0 15px 35px rgba(255, 96, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; 
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.chain-node.highlight:hover {
    transform: translateY(-6px) scale(1.06) !important;
    box-shadow: 0 22px 45px rgba(255, 96, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    background: linear-gradient(135deg, #FF8533 0%, #F55A00) !important;
}

/* Flechas con movimiento dinámico y vivo */
.chain-arrow { 
    color: #FF8533 !important; 
    font-size: 1.3rem !important; 
    font-weight: bold !important;
    display: inline-block !important;
    text-shadow: 0 2px 8px rgba(255, 96, 0, 0.4) !important;
    animation: pulseArrowVivid 2s infinite cubic-bezier(0.4, 0, 0.6, 1) !important; 
}

/* ============================================================
   OBJETIVE BOX (3D VIVID & GLASSMORPHISM)
   ============================================================ */
.objective-box {
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.95) 0%, rgba(7, 20, 38, 0.98) 100%) !important; 
    padding: 38px 42px !important; 
    max-width: 780px !important; 
    margin: 50px auto 0 !important;
    /* Borde lateral izquierdo grueso en naranja vivo brillante */
    border-left: 5px solid #FF6000 !important; 
    border-top: 1px solid rgba(255, 96, 0, 0.2) !important;
    border-right: 1px solid rgba(255, 96, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 96, 0, 0.2) !important;
    /* Sombra 3D profunda con resplandor superior */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; 
    border-radius: 0 12px 12px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease !important;

    /* Animación de entrada inicial */
    opacity: 0;
    transform: translateY(30px);
    animation: boxEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Capa de iluminación interna al pasar el cursor */
.objective-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.1) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.objective-box:hover { 
    transform: translateY(-6px) scale(1.01) !important; 
    box-shadow: 0 25px 55px rgba(255, 96, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; 
    border-color: #FF6000 !important;
}

.objective-box:hover::before {
    opacity: 1 !important;
}

/* Tipografía interna de la objective box */
.objective-box h3, 
.objective-box h4 {
    color: #FF8533 !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 6px rgba(255, 96, 0, 0.3) !important;
}

.objective-box p {
    color: #E2E8F0 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIONES VÍVIDAS
   ============================================================ */
@keyframes nodeEntrance {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.95);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes boxEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes pulseArrowVivid {
    0%, 100% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
        filter: drop-shadow(0 0 2px rgba(255, 96, 0, 0.3));
    }
    50% {
        transform: translateX(6px) scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 96, 0, 0.8));
    }
}



@keyframes pulseArrowVividVertical {
    0%, 100% {
        transform: rotate(90deg) translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: rotate(90deg) translateY(6px) scale(1.15);
        opacity: 1;
    }
}

/* Page Headers */
.page-header-section {
    background: linear-gradient(135deg, var(--bg-navy), var(--bg-petroleum));
    color: var(--white); padding: 180px 0 95px; text-align: center; position: relative; overflow: hidden;
}
.page-header-section h1 { color: var(--white); font-size: 3.2rem; margin-bottom: 15px; letter-spacing: -0.5px; animation: fadeInUp 1s ease; }
.page-header-section p { color: var(--dark-gray); font-size: 1.15rem; animation: fadeInUp 1.2s ease; }

/* Detailed Services */
.service-block-detailed {
    background: var(--white); border: 1px solid #e2e8f0; padding: 45px; margin-bottom: 35px;
    box-shadow: var(--shadow-sm); border-radius: 6px; transition: var(--transition-smooth);
}
.service-block-detailed:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(242, 140, 40, 0.4);
}
.service-block-header { display: flex; gap: 35px; align-items: flex-start; margin-bottom: 30px; }
.serv-code { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--accent-orange); }
.serv-desc { color: var(--dark-gray); font-size: 1rem; margin-top: 8px; line-height: 1.7; }
.service-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid #edf2f7; padding-top: 30px; }
.feat-pill {
    font-size: 0.9rem; color: var(--bg-navy); display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--light-gray); border-radius: 4px; transition: var(--transition-smooth);
}
.feat-pill:hover { transform: translateX(6px); background: rgba(242, 140, 40, 0.1); color: var(--accent-orange); }
.feat-pill i { color: var(--accent-orange); font-size: 1rem; }

/* Expertise & Workflow */
.exp-column {
    background: var(--light-gray); padding: 35px 25px; border-radius: 6px;
    box-shadow: var(--shadow-sm); transition: var(--transition-smooth);
}
.exp-column:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); background: var(--white); }
.exp-column h3 { font-size: 1.05rem; color: var(--bg-navy); border-bottom: 2px solid var(--accent-orange); padding-bottom: 12px; margin-bottom: 20px; }
.exp-column ul { list-style: none; }
.exp-column li { font-size: 0.88rem; color: #4a5568; margin-bottom: 12px; transition: var(--transition-smooth); }
.exp-column li:hover { color: var(--accent-orange); transform: translateX(4px); }

.workflow-banner { background: var(--bg-petroleum); color: var(--white); padding: 50px; text-align: center; border-radius: 8px; box-shadow: var(--shadow-md); }
.workflow-steps { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 25px; flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; font-size: 0.88rem; }
.workflow-steps span { padding: 12px 20px; background: rgba(255,255,255,0.06); border-radius: 4px; transition: var(--transition-smooth); }
.workflow-steps span:hover { transform: translateY(-3px) scale(1.05); background: rgba(255,255,255,0.12); }
.workflow-steps span.highlight { color: var(--accent-orange); background: rgba(242, 140, 40, 0.2); }
.workflow-title { color: #fff;}

/* Projects & Insights */
.project-filters { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn {
    background: transparent; border: 1px solid #cbd5e0; padding: 10px 22px;
    font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; cursor: pointer;
    border-radius: 4px; transition: var(--transition-smooth);
}
.filter-btn.active, .filter-btn:hover {
    background: var(--bg-navy); color: var(--white); border-color: var(--bg-navy);
    transform: translateY(-3px); box-shadow: var(--shadow-sm);
}
.project-card, .insight-card {
    background: var(--white); border: 1px solid #e2e8f0; padding: 35px; border-radius: 6px;
    box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; justify-content: space-between;
}
.project-card:hover, .insight-card:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(242, 140, 40, 0.4);
}
.proj-cat { font-size: 0.75rem; font-family: var(--font-heading); font-weight: 700; color: var(--accent-orange); margin-bottom: 12px; letter-spacing: 1px; }
.project-card h3, .insight-card h3 { font-size: 1.15rem; margin-bottom: 15px; line-height: 1.4; }
.project-card p, .insight-card p { font-size: 0.9rem; color: var(--dark-gray); margin-bottom: 20px; }
.proj-focus { font-size: 0.8rem; color: #4a5568; border-top: 1px solid #edf2f7; padding-top: 15px; }

.insight-meta { display: flex; justify-content: space-between; font-size: 0.78rem; margin-bottom: 18px; color: var(--dark-gray); }
.ins-cat { color: var(--accent-orange); font-weight: 600; font-family: var(--font-heading); }
.read-more {
    font-size: 0.85rem; font-family: var(--font-heading); font-weight: 600; color: var(--bg-navy);
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-smooth);
}
.read-more:hover { color: var(--accent-orange); gap: 14px; }

/* ==========================================
   ABOUT SECTION - EFECTO 3D DE DOBLE CAPA
   ========================================== */

.about-image-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px; /* Crea el espacio 3D */
}

/* Capa de la imagen de ATRÁS (Fondo) */
.about-bg-layer {
    position: absolute;
    width: 75%;
    height: 80%;
    top: 0;
    left: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateZ(-30px); /* Empuja la imagen hacia el fondo en el eje Z */
    transition: transform 0.5s ease;
}

.about-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.05);
}

/* Capa de la imagen de DELANTE (Primer plano flotante) */
.about-fg-layer {
    position: absolute;
    width: 65%;
    height: 75%;
    bottom: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.15);
    transform: translateZ(40px) translateY(-10px); /* Saca la imagen hacia adelante */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    z-index: 2;
}

.about-fg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Efecto Hover dinámico estilo 3D al pasar el mouse */
.about-image-wrapper:hover .about-fg-layer {
    transform: translateZ(60px) translateY(-15px) scale(1.02);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45);
}

.about-image-wrapper:hover .about-bg-layer {
    transform: translateZ(-50px) scale(0.98);
}

/* Insignia flotante adicional */
.about-floating-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 3;
    transform: translateZ(70px);
    text-align: center;
}

.badge-number {
    display: block;
    color: #f97316; /* Naranja corporativo */
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}

.badge-text {
    display: block;
    color: #94a3b8;
    font-size: 0.7rem;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenedor inferior para los 3 pilares en horizontal */
.pillars-box-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Tus estilos de .pillar adaptados para que luzcan increíbles abajo */
.pillars-box-bottom .pillar {
    background: var(--light-gray); 
    padding: 28px; 
    border-left: 4px solid var(--accent-orange);
    border-radius: 0 6px 6px 0; 
    transition: var(--transition-smooth); 
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.pillars-box-bottom .pillar:hover { 
    transform: translateY(-6px); /* Cambiado de translateX a translateY para tarjetas inferiores */
    box-shadow: var(--shadow-md); 
    background: var(--white); 
}

.pillar h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--bg-navy); }
.pillar p { font-size: 0.9rem; color: var(--dark-gray); }

/* --- Resto de tus estilos que ya tenías y se mantienen intactos --- */

.approach-flow { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 40px 0; flex-wrap: wrap; font-family: var(--font-heading); font-weight: 600; }
.approach-flow span {
    padding: 14px 26px; background: var(--white); border: 1px solid #cbd5e0; border-radius: 4px;
    box-shadow: var(--shadow-sm); transition: var(--transition-smooth);
}
.approach-flow span:hover { transform: translateY(-4px) scale(1.05); border-color: var(--accent-orange); box-shadow: var(--shadow-md); }
.approach-flow span.highlight { background: var(--accent-orange); color: var(--white); border-color: var(--accent-orange); }
.approach-flow i { color: var(--dark-gray); }

.mission-card, .vision-card {
    background: var(--white); border: 1px solid #e2e8f0; padding: 40px; border-radius: 6px;
    box-shadow: var(--shadow-sm); transition: var(--transition-smooth);
}
.mission-card:hover, .vision-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.mission-card h3, .vision-card h3 { margin-bottom: 15px; color: var(--accent-orange); }
.mission-card p, .vision-card p { font-style: italic; color: #4a5568; line-height: 1.7; }

.value-item {
    background: var(--light-gray); padding: 28px 20px; border-radius: 6px; text-align: center;
    box-shadow: var(--shadow-sm); transition: var(--transition-smooth);
}
.value-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); background: var(--white); border-top: 3px solid var(--accent-orange); }
.value-item strong { display: block; font-family: var(--font-heading); margin-bottom: 8px; color: var(--bg-navy); }
.value-item p { font-size: 0.85rem; color: var(--dark-gray); }

.channel-item { display: flex; align-items: center; gap: 18px; transition: var(--transition-smooth); }
.channel-item:hover { transform: translateX(6px); }
.channel-item i { font-size: 1.6rem; color: var(--accent-orange); }
.channel-item span { font-size: 0.75rem; color: var(--dark-gray); display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.channel-item strong { font-size: 0.95rem; color: var(--bg-navy); }

/* ==========================================
   ESTILOS GENERALES DE FORMULARIO (Tus estilos)
   ========================================== */
.contact-form-col { 
    box-shadow: var(--shadow-md); 
    border-radius: 8px; 
    border: 1px solid #e2e8f0; 
}

.nexa-form .form-control {
    width: 100%; 
    padding: 14px; 
    border: 1px solid #cbd5e0; 
    border-radius: 4px;
    font-family: var(--font-main); 
    font-size: 0.95rem; 
    transition: var(--transition-smooth); 
    background: var(--white);
    box-sizing: border-box !important; /* Vital para que no rompa anchos */
}

.nexa-form .form-control:focus { 
    outline: none; 
    border-color: var(--accent-orange); 
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.18); 
}



/* ============================================================
   ESTILOS GENERALES DEL FOOTER Y ENLACES (3D VIVID & PREMIUM)
   ============================================================ */
.nexa-footer { 
    background: var(--bg-navy, #07111e); 
    color: var(--white, #ffffff); 
    padding: 90px 0 30px; 
    border-top: 2px solid rgba(249, 115, 22, 0.3); 
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Destello sutil superior en el footer */
.nexa-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1.5fr; 
    gap: 40px; 
    margin-bottom: 60px; 
}

/* Columnas del footer con animación 3D de barrido en zigzag */
.footer-col {
    position: relative;
    opacity: 0;
    transform: translateY(45px) scale(0.95);
    animation: footerColumnSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados por columna */
.footer-grid .footer-col:nth-child(1) { animation-delay: 0.1s; }
.footer-grid .footer-col:nth-child(2) { animation-delay: 0.25s; }
.footer-grid .footer-col:nth-child(3) { animation-delay: 0.4s; }
.footer-grid .footer-col:nth-child(4) { animation-delay: 0.55s; }

.footer-logo { 
    color: var(--white, #ffffff); 
    font-size: 1.35rem; 
    margin-bottom: 10px; 
    letter-spacing: 1.2px; 
    font-family: var(--font-heading);
    font-weight: 800;
}

.footer-tagline { 
    color: #FF6000; 
    font-size: 0.85rem; 
    font-family: var(--font-heading); 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    font-weight: 700;
}

.footer-desc { 
    color: #94A3B8; 
    font-size: 0.92rem; 
    line-height: 1.7; 
}

.footer-col h4 { 
    color: var(--white, #ffffff); 
    font-size: 1rem; 
    margin-bottom: 22px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.12); 
    padding-bottom: 12px; 
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.footer-col ul { 
    list-style: none; 
    padding: 0;
    margin: 0;
}

.footer-col li { 
    margin-bottom: 14px; 
}

/* Enlace base del footer con transición 3D fluida */
.footer-col a { 
    color: #94A3B8; 
    text-decoration: none; 
    font-size: 0.9rem; 
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); 
    display: inline-block; 
    font-weight: 500;
}

/* Comportamiento base al hacer Hover */
.footer-col a:hover { 
    transform: translateX(8px) scale(1.02); 
    color: #FF6000; 
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

/* ============================================================
   COLORES ESPECÍFICOS Y BRILLO 3D AL PASAR EL MOUSE (HOVER)
   ============================================================ */

/* LinkedIn -> Azul Corporativo con relieve luminoso */
.footer-col a.nexa-linkedin:hover {
    color: #0A66C2 !important;
    text-shadow: 0 0 12px rgba(10, 102, 194, 0.6) !important;
}

/* Facebook -> Azul Facebook */
.footer-col a.nexa-facebook:hover {
    color: #1877F2 !important;
    text-shadow: 0 0 12px rgba(24, 119, 242, 0.6) !important;
}

/* WhatsApp -> Verde Brillante Vivo */
.footer-col a.nexa-whatsapp:hover {
    color: #25D366 !important;
    text-shadow: 0 0 12px rgba(37, 211, 102, 0.6) !important;
}

/* Correos (Mail) -> Amarillo Dorado Premium / Alerta */
.footer-col a.nexa-mail:hover {
    color: #FFD700 !important; 
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
}

/* Google Maps Link -> Rojo Pin de Ubicación */
.footer-col a.nexa-map:hover,
p a.nexa-map:hover {
    color: #EF4444 !important; 
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

/* ============================================================
   ESTILOS DE BOTTOM Y ANIMACIONES
   ============================================================ */
.footer-bottom { 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding-top: 30px; 
    text-align: center; 
    color: #64748B; 
    font-size: 0.85rem; 
    font-weight: 500;
}

/* Keyframes de Animaciones 3D Vívidas */
@keyframes footerColumnSweep {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.95);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulseArrow {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(5px); opacity: 1; }
}

.reveal-element { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}

.reveal-element.active { 
    opacity: 1; 
    transform: translateY(0); 
}


/* ==========================================
   ESTILOS PREMIUM PARA SECCIÓN DE CONTACTO
   ========================================== */

.contact-grid-wrapper {
    align-items: flex-start !important;
    gap: 60px !important;
}

.contact-lead-text {
    font-size: 1.05rem;
    color: var(--dark-gray);
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* Tarjeta de Formulario Elegante Enterprise */
.contact-form-card {
    background: var(--white);
    border: 1px solid rgba(11, 42, 60, 0.12);
    padding: 45px 40px;
    border-radius: 6px;
    box-shadow: 0 20px 45px rgba(7, 26, 43, 0.08);
    position: relative;
    transition: var(--transition-smooth);
}
.contact-form-card:hover {
    box-shadow: 0 25px 55px rgba(7, 26, 43, 0.12);
    border-color: rgba(242, 140, 40, 0.3);
}

.form-card-header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 15px;
}
.form-card-header h3 {
    font-size: 1.4rem;
    color: #FFFFFF;
    margin-bottom: 5px;
}
.form-card-header p {
    font-size: 0.85rem;
    color: var(--dark-gray);
}

/* Inputs y Selects */
.nexa-form label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.nexa-form .form-control {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.92rem;
    background-color: #fafbfc;
    color: var(--text-main);
    transition: var(--transition-smooth);
}

.nexa-form .form-control:focus {
    outline: none;
    border-color: var(--accent-orange);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.15);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Canales de Contacto con Cajas de Icono */
.contact-channels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.channel-item {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.3s ease;
}
.channel-item:hover {
    transform: translateX(6px);
}
.channel-icon-box {
    width: 48px;
    height: 48px;
    background: var(--light-gray);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition-smooth);
}
.channel-item:hover .channel-icon-box {
    background: var(--bg-navy);
    border-color: var(--bg-navy);
}
.channel-item:hover .channel-icon-box i {
    color: var(--accent-orange);
}
.channel-icon-box i {
    font-size: 1.25rem;
    color: var(--accent-orange);
}
.channel-item span {
    font-size: 0.75rem;
    color: var(--dark-gray);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.channel-item strong {
    font-size: 0.95rem;
    color: var(--bg-navy);
}

/* ==========================================
   ESTILOS VISUALES Y TARJETAS FOTOGRÁFICAS
   ========================================== */

.bg-navy-dark {
    background-color: #04101c;
}

/* Tarjetas Visuales con Zoom y Sombra Dinámica */
.visual-card {
    background: var(--bg-petroleum);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}
.visual-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(242, 140, 40, 0.4);
}

.visual-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}
.visual-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.visual-card:hover .visual-img-wrapper img {
    transform: scale(1.08);
}

.visual-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, transparent 30%, rgba(7, 26, 43, 0.85) 100%);
}

.visual-tag {
    position: absolute;
    top: 15px; left: 15px;
    background: var(--accent-orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
    z-index: 2;
}

.visual-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.visual-content h3 {
    color: var(--white);
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.visual-content p {
    color: #a0aec0;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Banner Showcase en Expertise */
.expertise-header-bg {
    background: linear-gradient(135deg, rgba(7,26,43,0.92), rgba(11,42,60,0.95)), url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat !important;
}

.expertise-showcase-banner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    background: var(--light-gray);
    padding: 40px;
    border-radius: 6px;
    border-left: 4px solid var(--accent-orange);
    box-shadow: var(--shadow-sm);
}
.showcase-content h3 {
    font-size: 1.5rem;
    margin: 10px 0 15px;
    color: var(--bg-navy);
}
.showcase-content p {
    color: var(--dark-gray);
    font-size: 0.95rem;
    line-height: 1.7;
}
.showcase-image {
    height: 260px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.showcase-image:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .expertise-showcase-banner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   ESTILOS PARA TARJETAS VISUALES DE EXPERTISE (5 COLUMNAS)
   ========================================== */

.grid-5-expertise-visual {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.exp-visual-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.exp-visual-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-orange);
}

.exp-card-img {
    position: relative;
    height: 130px;
    overflow: hidden;
}

.exp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-visual-card:hover .exp-card-img img {
    transform: scale(1.12);
}

.exp-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(7,26,43,0.3), rgba(7,26,43,0.85));
}

.exp-num {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--accent-orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 2;
}

.exp-card-body {
    padding: 20px 15px;
    flex-grow: 1;
    background: var(--white);
    transition: background 0.3s ease;
}

.exp-visual-card:hover .exp-card-body {
    background: #fafbfc;
}

.exp-card-body h3 {
    font-size: 0.95rem;
    color: var(--bg-navy);
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 8px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.exp-card-body ul {
    list-style: none;
}

.exp-card-body li {
    font-size: 0.81rem;
    color: #4a5568;
    margin-bottom: 9px;
    transition: var(--transition-smooth);
    position: relative;
    padding-left: 10px;
}

.exp-card-body li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-orange);
}

.exp-card-body li:hover {
    color: var(--accent-orange);
    transform: translateX(3px);
}

/* Responsivo para pantallas medianas y móviles */
@media (max-width: 1200px) {
    .grid-5-expertise-visual {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-5-expertise-visual {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ESTILOS PREMIUM: FLUJO DE TRABAJO Y VALUE CHAIN (3D VÍVIDO)
   ============================================================ */

.workflow-steps .workflow-step {
    padding: 14px 24px !important;
    background: #0B192C !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    /* Relieve 3D profundo con reflejo superior y sombra dual */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 3px solid #FF6000 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                background 0.4s ease !important;
    position: relative !important;
}

/* Estado activo del Workflow: Elevación 3D máxima con destello naranja corporativo */
.workflow-steps .workflow-step.active {
    background: linear-gradient(135deg, #FF6000, #E05300) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: #FFFFFF !important;
    transform: translateY(-8px) scale(1.06) !important;
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    z-index: 5 !important;
}

.workflow-steps i {
    color: #FF6000 !important;
    font-size: 1.2rem !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    display: inline-block !important;
}

.workflow-steps .workflow-step.active i {
    color: #FFFFFF !important;
    transform: scale(1.15) !important;
}


/* ============================================================
   ANIMACIÓN SECUENCIAL PARA VALUE CHAIN FLOW (3D VÍVIDO)
   ============================================================ */

.chain-flow .chain-node {
    background: #0B192C !important;
    color: #FFFFFF !important;
    padding: 16px 30px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    /* Relieve 3D inmersivo de alta gama */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 3px solid #FF6000 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                background 0.4s ease !important;
    position: relative !important;
}

/* Estado activo automático de la Cadena de Valor */
.chain-flow .chain-node.active {
    background: linear-gradient(135deg, #FF6000, #E05300) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: #FFFFFF !important;
    transform: translateY(-8px) scale(1.06) !important;
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    z-index: 5 !important;
}

.chain-flow .chain-arrow {
    color: #FF6000 !important;
    font-size: 1.3rem !important;
    animation: pulseArrowVivid 2s infinite ease-in-out !important;
    display: inline-block !important;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.4) !important;
}


/* ============================================================
   KEYFRAMES DE ANIMACIÓN PARA FLECHAS Y FLUJOS
   ============================================================ */

@keyframes pulseArrowVivid {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateX(5px) scale(1.15);
        opacity: 1;
        text-shadow: 0 0 15px rgba(249, 115, 22, 0.8);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
    }
}

/* ============================================================
   ESTILOS PREMIUM: TARJETAS DE EXPERTISE Y APPROACH (3D VÍVIDO)
   ============================================================ */

/* Base unificada con profundidad 3D y relieve pulido */
.visual-card, .exp-visual-card {
    background: #0B192C !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    /* Relieve 3D profundo con sombra dual y reflejo superior blanco */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 4px solid #FF6000 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;
    will-change: transform !important;
    
    /* Animación inicial de entrada en zigzag escalonada */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: cardEntrySweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos secuenciales para las tarjetas */
.exp-visual-card:nth-child(1), .visual-card:nth-child(1) { animation-delay: 0.1s; }
.exp-visual-card:nth-child(2), .visual-card:nth-child(2) { animation-delay: 0.25s; }
.exp-visual-card:nth-child(3), .visual-card:nth-child(3) { animation-delay: 0.4s; }
.exp-visual-card:nth-child(4), .visual-card:nth-child(4) { animation-delay: 0.55s; }

/* Hover general muy vivo */
.visual-card:hover, .exp-visual-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(249, 115, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(249, 115, 22, 0.6) !important;
    border-top-color: #FF6000 !important;
}

/* ============================================================
   IMÁGENES CON ANIMACIÓN FLUIDA EN MOVIMIENTO CONTINUO
   ============================================================ */

.visual-img-wrapper img, .exp-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Animación automática en bucle vivo para que la imagen cobre vida por sí sola */
    animation: imageFloatMotion 12s ease-in-out infinite alternate !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.visual-card:hover .visual-img-wrapper img,
.exp-visual-card:hover .exp-card-img img,
.visual-card.active .visual-img-wrapper img,
.exp-visual-card.active .exp-card-img img {
    transform: scale(1.12) rotate(0.5deg) !important;
    filter: brightness(1.06) contrast(1.05) !important;
}

/* Overlays cinematográficos cristalinos */
.visual-overlay, .exp-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: linear-gradient(180deg, rgba(7, 17, 30, 0.1) 20%, rgba(7, 17, 30, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}


/* ============================================================
   ESTADO ACTIVO (.active) - VÍVIDO, DINÁMICO Y 3D
   ============================================================ */

.visual-card.active, .exp-visual-card.active {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: #FF6000 !important;
    border-top-color: #FF6000 !important;
    z-index: 10 !important;
}

.visual-card.active .visual-content h3,
.exp-visual-card.active .exp-card-body h3 {
    color: #FF6000 !important;
    text-shadow: 0 2px 10px rgba(249, 115, 22, 0.25) !important;
}


/* ============================================================
   ESTILOS PARA "OUR APPROACH" (PASOS 3D ACTIVOS)
   ============================================================ */

.approach-flow .approach-step {
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    background: #0B192C !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Estado activo automático con destello 3D naranja */
.approach-flow .approach-step.active {
    background: linear-gradient(135deg, #FF6000, #E05300) !important;
    color: #FFFFFF !important;
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}


/* ============================================================
   KEYFRAMES DE MOVIMIENTO Y ANIMACIONES FLUIDAS
   ============================================================ */

@keyframes imageFloatMotion {
    0% {
        transform: scale(1) translate(0px, 0px);
    }
    50% {
        transform: scale(1.04) translate(-3px, -2px);
    }
    100% {
        transform: scale(1.07) translate(3px, 3px);
    }
}

@keyframes cardEntrySweep {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-4px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* ==========================================
   ANIMACIONES AL HACER SCROLL (MODERNO Y ELEGANTE)
   ========================================== */

/* Estado inicial: Oculto y desplazado hacia abajo */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Estado activo: Cuando el elemento entra en la pantalla (al bajar o subir) */
.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   ESTILO MODERNO Y ELEGANTE CON SOMBRAS (NEXA ENERGY)
   ========================================== */

/* 1. Sombra elegante y efecto flotante para la barra de navegación */
.navbar, .header-nav {
    background: rgba(7, 17, 30, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 2. Tarjetas y contenedores con estilo moderno (Glassmorphism & Elevación) */
.contact-form-card, .service-card, .expert-card {
    background: linear-gradient(135deg, rgba(15, 28, 45, 0.9), rgba(7, 17, 30, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(5px);
}

/* 3. Efecto moderno para los campos de entrada (inputs, selects, textareas) */
.contact-form-card .form-control, .nexa-form input, .nexa-form select, .nexa-form textarea {
    background-color: rgba(4, 10, 18, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Sombra y brillo elegante al hacer clic o enfocar un campo */
.contact-form-card .form-control:focus, .nexa-form input:focus, .nexa-form select:focus, .nexa-form textarea:focus {
    border-color: #f39c12 !important;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    outline: none;
}

/* 4. Botones modernos con sombra de luz difusa y animación suave */
.btn-nexa-primary, .nexa-form button[type="submit"] {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.35) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.btn-nexa-primary:hover, .nexa-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(243, 156, 18, 0.5) !important;
}

/* 5. Sombra sutil para las métricas del Hero (01, 02, 03) */
.hero-metrics .metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Definición de la animación de entrada profesional (más suave y fluida) */
@keyframes fadeInUpProfessional {
    from {
        opacity: 0;
        transform: translateY(40px); /* Un poco más de recorrido para que la entrada se note elegante */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clase base aplicada a los elementos del Hero */
.animate-hero {
    opacity: 0; /* Arrancan ocultos */
    animation: fadeInUpProfessional 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados medidos para una lectura y aparición perfecta */
.hero-badge {
    animation-delay: 0.3s;
}

h1[data-key="hero_title"] {
    animation-delay: 0.6s;
}

.hero-subtitle {
    animation-delay: 0.9s;
}

.hero-description {
    animation-delay: 1.2s;
}

.hero-buttons {
    animation-delay: 1.5s;
}

.location-link {
    color: inherit;
    text-decoration: none;
}

.location-link:hover {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   SECUENCIA DE BARRIDO SINCRONIZADA (BADGE PRIMERO, TÍTULO DESPUÉS)
   ============================================================ */

/* Contenedores generales */
.hero-badge.animate-hero,
.typewriter-wrapper {
    display: inline-block;
    position: relative;
}

.typewriter-wrapper {
    min-height: 1.2em;
}

/* 1. ANIMACIÓN DEL BADGE (Entra primero: de 0% a 35%) */
.hero-badge.animate-hero {
    display: inline-block;
    animation: badgeWipeSequence 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes badgeWipeSequence {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateX(-10px);
    }
    20% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }
    75% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }
    95%, 100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateX(10px);
    }
}

/* 2. ANIMACIÓN DEL TÍTULO PRINCIPAL (Entra un poco después: de 25% a 60%) */
.typewriter-effect {
    display: inline-block;
    margin: 0;
    animation: titleWipeSequence 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.typewriter-effect::after {
    content: none !important; /* Sin cursor de máquina de escribir, puro barrido limpio */
}

@keyframes titleWipeSequence {
    0%, 15% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: translateX(-10px);
    }
    35% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }
    75% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: translateX(0);
    }
    95%, 100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
        transform: translateX(10px);
    }
}
/* ============================================================
   ESTILOS PARA LA ROTACIÓN AUTOMÁTICA DE TARJETAS (FEATURE GRID)
   ============================================================ */

/* Estado por defecto de todas las tarjetas (cuando no están activas) */
.grid-4 .card-feature {
    opacity: 0.5; /* Un poco transparentes/atenuadas por defecto */
    transform: scale(0.98); /* Ligeramente más pequeñas */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Transición suave y profesional */
    border: 2px solid transparent; /* Borde invisible por defecto */
    box-shadow: none; /* Sin sombra por defecto */
    cursor: default;
}

/* Estado cuando el script activa la tarjeta automáticamente (Clase .active) */
.grid-4 .card-feature.active {
    opacity: 1; /* Totalmente visible */
    transform: translateY(-8px) scale(1); /* Se eleva y vuelve al tamaño normal */
    border-color: var(--accent-orange); /* Usa tu variable de color naranja para el borde */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Sombra elegante para destacarla */
    background-color: var(--white); /* Asegura que el fondo sea blanco si tienes otro color base */
}

/* ============================================================
   ANIMACIÓN EDITORIAL PROFESIONAL (TEXT SLIDE-UP REVEAL)
   ============================================================ */

/* Contenedor de máscara para ocultar el texto antes de que suba */
.editorial-item h3, 
.editorial-item p {
    overflow: hidden; /* Oculta lo que esté fuera del área visible */
    position: relative;
}

/* Definición de la animación de deslizamiento vertical */
@keyframes editorialTextReveal {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   EFECTO EDITORIAL HOVER DE ALTA GAMA
   ============================================================ */

/* Estilo base de cada bloque editorial */
.grid-4-editorial .editorial-item {
    position: relative;
    padding: 24px;
    border-radius: 8px;
    background-color: transparent;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.4s ease, 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.grid-4-editorial .editorial-item:hover {
    transform: translateY(-8px);
    background-color: #0d273f; /* Un azul petróleo más claro y distinguible del fondo general */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
/* ============================================================
   EFECTO DE BARRIDO / FOCO AUTOMÁTICO (SIN OCULTAR TARJETAS)
   ============================================================ */

/* Estado normal de las tarjetas (siempre visibles y estáticas) */
.grid-4 .card-feature {
    opacity: 1; /* ¡IMPORTANTE: Nunca se ocultan, siempre visibles! */
    transform: translateY(0) scale(1);
    transition: all 0.4s ease-in-out; /* Transición suave al pasar el foco */
    border: 2px solid transparent; /* Borde transparente por defecto */
    background-color: var(--white); /* Fondo original */
}

/* Estado cuando la tarjeta recibe el foco automático del ciclo */
.grid-4 .card-feature.active {
    opacity: 1;
    transform: translateY(-8px) scale(1); /* Se eleva un poco para destacar */
    border-color: var(--accent-orange); /* Se enciende el borde naranja */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Sombra elegante */
}

/* ============================================================
   BARRIDO CONTINUO EN BUCLE (POSICIÓN CORRECTA)
   ============================================================ */

.section-header.text-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo perfectamente */
}

/* 1. Subtítulo naranja (Arriba, centrado y con su barrido) */
.section-header .sub-heading {
    display: block;
    position: relative;
    margin-bottom: 15px; /* Espacio separador entre el subtítulo y el título blanco */
    animation: wipeLoopSub 7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 2. Título principal en blanco */
.section-header h2 {
    display: block;
    position: relative;
    margin-bottom: 15px;
    animation: wipeLoopTitle 7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 3. Párrafo descriptivo abajo */
.section-header p.section-lead {
    display: block;
    position: relative;
    max-width: 800px;
    animation: wipeLoopText 7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* --- ANIMACIONES ESCALONADAS Y FLUIDAS --- */

/* Subtítulo entra primero */
@keyframes wipeLoopSub {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-10px); }
    10% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    75% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    90%, 100% { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateX(10px); }
}

/* Título entra un instante después */
@keyframes wipeLoopTitle {
    0%, 8% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-10px); }
    18% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    75% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    90%, 100% { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateX(10px); }
}

/* Párrafo entra al final del bloque */
@keyframes wipeLoopText {
    0%, 16% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-10px); }
    26% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    75% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    90%, 100% { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateX(10px); }
}

/* Estilo del botón en el Nav */
.nav-search-container {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.nav-search-trigger {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-search-trigger:hover {
    border-color: var(--accent-orange, #f59e0b);
    color: var(--accent-orange, #f59e0b);
    background: rgba(245, 158, 11, 0.05);
}

/* ============================================================
   ESTILOS EXCLUSIVOS: MODAL DE BÚSQUEDA 3D VÍVIDO Y PREMIUM
   ============================================================ */

.search-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(7, 17, 30, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 90px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.search-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Contenido del modal con relieve 3D profundo, destello y animación de despliegue */
.search-modal-content {
    background: #0B192C !important;
    border: 1px solid rgba(249, 115, 22, 0.4) !important;
    border-top: 4px solid #FF6000 !important;
    width: 90% !important;
    max-width: 750px !important;
    border-radius: 20px !important;
    padding: 30px !important;
    /* Sombra 3D inmersiva de alta gama con reflejo superior luminoso */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Estado inicial para animación 3D de apertura */
    transform: translateY(-30px) scale(0.92);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-modal-overlay.active .search-modal-content {
    transform: translateY(0) scale(1) !important;
}

/* Destello interno decorativo */
.search-modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.05) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    margin-bottom: 24px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.search-input-wrapper:focus-within {
    border-color: #FF6000 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.search-input-wrapper input {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    width: 100% !important;
    outline: none !important;
    font-weight: 500 !important;
}

.search-input-wrapper input::placeholder {
    color: #64748B !important;
}

.search-close-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-close-btn:hover {
    background: #FF6000 !important;
    border-color: #FF6000 !important;
    color: #FFFFFF !important;
    transform: scale(1.08) rotate(90deg) !important;
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4) !important;
}

/* Resultados de la búsqueda con scroll estilizado */
.search-results-list {
    max-height: 420px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-right: 4px !important;
}

.search-results-list::-webkit-scrollbar {
    width: 6px !important;
}
.search-results-list::-webkit-scrollbar-track {
    background: rgba(11, 34, 57, 0.5) !important;
    border-radius: 4px !important;
}
.search-results-list::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.4) !important;
    border-radius: 4px !important;
}
.search-results-list::-webkit-scrollbar-thumb:hover {
    background: #FF6000 !important;
}

.search-placeholder-text {
    color: #94A3B8 !important;
    text-align: center !important;
    font-size: 0.98rem !important;
    padding: 30px !important;
    font-style: italic !important;
}

.search-result-item {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-result-item:hover {
    border-color: #FF6000 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    transform: translateX(6px) scale(1.01) !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.search-result-item span {
    display: block !important;
    font-size: 0.78rem !important;
    color: #FF6000 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
}

#globalSearchInput {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}
/* ============================================================
   ESTILOS EXCLUSIVOS: TARJETAS VISUALES DE INGENIERÍA (3D VIVID & SWEEP REVEAL)
   ============================================================ */

.nexa-visual-grid-unique {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 40px 0 !important;
}

.nexa-visual-card-unique {
    /* Fondo petróleo profundo con degradado de alta gama */
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.95) 0%, rgba(7, 20, 38, 0.98) 100%) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 96, 0, 0.25) !important;
    /* Profundidad 3D avanzada con sombras múltiples y brillo interno */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    
    /* Transición fluida 3D */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease !important;

    /* Animación de entrada inicial con efecto de barrido/deslizamiento en cascada */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: visualCardSweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados para cada tarjeta de la cuadrícula */
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(1) { animation-delay: 0.2s; }
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(2) { animation-delay: 0.35s; }
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(3) { animation-delay: 0.5s; }
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(4) { animation-delay: 0.65s; }
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(5) { animation-delay: 0.8s; }
.nexa-visual-grid-unique .nexa-visual-card-unique:nth-child(6) { animation-delay: 0.95s; }

/* Efecto hover 3D con elevación imponente y resplandor naranja vivo */
.nexa-visual-card-unique:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: #FF6000 !important;
    box-shadow: 0 30px 60px rgba(255, 96, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Contenedor de la imagen interna con clip estético */
.nexa-visual-card-unique .visual-img-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 230px !important;
    overflow: hidden !important;
}

.nexa-visual-card-unique .visual-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important;
    filter: brightness(0.9) contrast(1.05);
}

.nexa-visual-card-unique:hover .visual-img-wrapper img {
    transform: scale(1.12) rotate(0.5deg) !important;
    filter: brightness(1.05) contrast(1.1);
}

/* Capa oscura superpuesta con tinte petróleo para fundir la imagen con la tarjeta */
.nexa-visual-card-unique .visual-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(7, 20, 38, 0.2) 0%, rgba(7, 20, 38, 0.85) 85%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Etiqueta numérica flotante con estilo Glassmorphism 3D */
.nexa-visual-card-unique .visual-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: rgba(7, 20, 38, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 96, 0, 0.5) !important;
    /* Color naranja vivo brillante con sombra tridimensional */
    color: #FF8533 !important;
    font-family: var(--font-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    z-index: 2 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 2px 8px rgba(255, 96, 0, 0.4) !important;
}

/* Contenido de texto inferior con excelente espaciado */
.nexa-visual-card-unique .visual-content {
    padding: 28px 24px !important;
    background: transparent !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.nexa-visual-card-unique .visual-content h3 {
    color: var(--white, #ffffff) !important;
    font-size: 1.15rem !important;
    margin-bottom: 12px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: color 0.3s ease !important;
}

.nexa-visual-card-unique:hover .visual-content h3 {
    color: #FF8533 !important;
}

.nexa-visual-card-unique .visual-content p {
    color: #E2E8F0 !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN DE BARRIDO Y APARICIÓN
   ============================================================ */
@keyframes visualCardSweep {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.9);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}



/* ============================================================
   ESTILOS EXCLUSIVOS: GRID EDITORIAL DE 4 TARJETAS (3D VIVID & SWEEP)
   ============================================================ */

.nexa-editorial-grid-unique { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 40px 0 !important;
}

.nexa-editorial-grid-unique .nexa-editorial-item-unique {
    position: relative !important;
    padding: 38px 30px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    min-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    /* Fondo petróleo profundo con borde iluminado tridimensional */
    border: 1px solid rgba(255, 96, 0, 0.3) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    cursor: pointer !important;
    
    /* Transición fluida 3D de alta gama */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease,
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;

    /* Animación de entrada inicial con efecto de barrido/deslizamiento en cascada */
    opacity: 0;
    transform: translateY(45px) scale(0.92);
    animation: editorialSweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados para cada tarjeta editorial (Efecto cascada) */
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(1) { animation-delay: 0.2s; }
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(2) { animation-delay: 0.35s; }
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(3) { animation-delay: 0.5s; }
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(4) { animation-delay: 0.65s; }

/* Imagen de fondo virtual con zoom independiente y degradados petróleo vivos */
.nexa-editorial-grid-unique .nexa-editorial-item-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: linear-gradient(180deg, rgba(7, 20, 38, 0.3) 0%, rgba(7, 20, 38, 0.85) 60%, rgba(4, 14, 28, 0.96) 100%), 
                      url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=800&auto=format&fit=crop') !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important;
    filter: brightness(0.9) contrast(1.05);
}

/* Imágenes específicas para cada una de las 4 tarjetas */
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(1)::before {
    background-image: linear-gradient(180deg, rgba(7, 20, 38, 0.3) 0%, rgba(7, 20, 38, 0.85) 60%, rgba(4, 14, 28, 0.96) 100%), 
                      url('https://jeti.co.in/wp-content/uploads/2025/10/course1-Oil-and-Gas-Engineering.jpg') !important;
}
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(2)::before {
    background-image: linear-gradient(180deg, rgba(7, 20, 38, 0.3) 0%, rgba(7, 20, 38, 0.85) 60%, rgba(4, 14, 28, 0.96) 100%), 
                      url('https://itemstecnologia.com/wp-content/uploads/2022/04/Asesoria-Tecnica-Y-Servicios-de-instalacion.jpg') !important;
}
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(3)::before {
    background-image: linear-gradient(180deg, rgba(7, 20, 38, 0.3) 0%, rgba(7, 20, 38, 0.85) 60%, rgba(4, 14, 28, 0.96) 100%), 
                      url('https://t4.ftcdn.net/jpg/15/62/31/71/360_F_1562317195_pqQkZsagfy3Qd1fUmwKSGfGFHq0lMCd0.jpg') !important;
}
.nexa-editorial-grid-unique .nexa-editorial-item-unique:nth-child(4)::before {
    background-image: linear-gradient(180deg, rgba(7, 20, 38, 0.3) 0%, rgba(7, 20, 38, 0.85) 60%, rgba(4, 14, 28, 0.96) 100%), 
                      url('https://img.magnific.com/free-photo/business-analyst-meeting-with-coworker-review-financial-report_482257-123652.jpg?semt=ais_hybrid&w=740&q=80') !important;
}

/* Mantener todo el contenido por encima de la capa de imagen */
.nexa-editorial-grid-unique .nexa-editorial-item-unique > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Efectos 3D al pasar el cursor (Elevación imponente y resplandor naranja vivo) */
.nexa-editorial-grid-unique .nexa-editorial-item-unique:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: #FF6000 !important;
    box-shadow: 0 30px 60px rgba(255, 96, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.nexa-editorial-grid-unique .nexa-editorial-item-unique:hover::before {
    transform: scale(1.12) rotate(0.5deg) !important;
    filter: brightness(1.05) contrast(1.1);
}

/* Estilos de textos y números con relieve tridimensional */
.nexa-editorial-grid-unique .ed-num { 
    font-family: var(--font-heading) !important; 
    font-size: 2.3rem !important; 
    font-weight: 800 !important; 
    /* Color naranja vivo brillante con sombra de texto 3D */
    color: #FF8533 !important; 
    display: block !important; 
    margin-bottom: 10px !important; 
    text-shadow: 0 3px 12px rgba(255, 96, 0, 0.5) !important;
}

.nexa-editorial-grid-unique h3 { 
    color: var(--white, #ffffff) !important; 
    font-size: 1.1rem !important; 
    margin-bottom: 12px !important; 
    line-height: 1.4 !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: color 0.3s ease !important;
}

.nexa-editorial-grid-unique .nexa-editorial-item-unique:hover h3 {
    color: #FF8533 !important;
}

.nexa-editorial-grid-unique p { 
    color: #E2E8F0 !important; 
    font-size: 0.9rem !important; 
    line-height: 1.65 !important; 
    margin: 0 !important;
    font-weight: 400 !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN DE BARRIDO Y APARICIÓN
   ============================================================ */
@keyframes editorialSweep {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.9);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ============================================================
   ESTILOS EXCLUSIVOS: MÉTRICAS DEL HERO (3D VIVID & SWEEP ANIMATION)
   ============================================================ */

.nexa-hero-metrics-unique {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 18px !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 96, 0, 0.25) !important;
    box-sizing: border-box !important;
    /* Animación de entrada general del contenedor */
    animation: metricsContainerAppear 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nexa-hero-metrics-unique .nexa-metric-item-unique {
    flex: 1 !important;
    text-align: left !important;
    /* Fondo petróleo translúcido con efecto vidrio esmerilado avanzado */
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.85) 0%, rgba(7, 20, 38, 0.95) 100%) !important;
    border: 1px solid rgba(255, 96, 0, 0.3) !important;
    padding: 20px 22px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    /* Profundidad 3D con sombras múltiples y brillo interno */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    /* Transición fluida 3D */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease !important;
    
    /* Animación de barrido inicial con retraso dinámico */
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: metricItemSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retraso escalonado para cada tarjeta (Efecto cascada profesional) */
.nexa-hero-metrics-unique .nexa-metric-item-unique:nth-child(1) { animation-delay: 0.3s; }
.nexa-hero-metrics-unique .nexa-metric-item-unique:nth-child(2) { animation-delay: 0.45s; }
.nexa-hero-metrics-unique .nexa-metric-item-unique:nth-child(3) { animation-delay: 0.6s; }
.nexa-hero-metrics-unique .nexa-metric-item-unique:nth-child(4) { animation-delay: 0.75s; }

/* Efecto de barrido de luz brillante (Reflejo 3D al pasar el cursor) */
.nexa-hero-metrics-unique .nexa-metric-item-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 100% !important; height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
    transition: 0.6s ease !important;
}

.nexa-hero-metrics-unique .nexa-metric-item-unique:hover::before {
    left: 100% !important;
}

/* Interacción 3D al hacer hover (Elevación y resplandor naranja) */
.nexa-hero-metrics-unique .nexa-metric-item-unique:hover {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: #FF6000 !important;
    box-shadow: 0 18px 40px rgba(255, 96, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.nexa-hero-metrics-unique .metric-num {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    display: block !important;
    /* Color naranja vivo brillante con sombra de texto tridimensional */
    color: #FF8533 !important;
    margin-bottom: 6px !important;
    font-family: var(--font-heading) !important;
    text-shadow: 0 2px 10px rgba(255, 96, 0, 0.4) !important;
}

.nexa-hero-metrics-unique .metric-text {
    font-size: 0.78rem !important;
    display: block !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
    color: var(--white, #ffffff) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIONES 3D Y BARRIDO
   ============================================================ */
@keyframes metricItemSweep {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.92);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes metricsContainerAppear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* ============================================================
   ESTILOS EXCLUSIVOS: LISTADO DE SERVICIOS (3D VIVID & PREMIUM WHITE)
   ============================================================ */

.nexa-services-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: #F1F5F9 !important; /* Fondo general ultra sutil para resaltar el 3D blanco */
}

.nexa-services-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.nexa-services-list-unique {
    display: flex !important;
    flex-direction: column !important;
    gap: 45px !important;
    width: 100% !important;
}

/* Tarjeta principal del servicio con fondo blanco, relieve 3D y bordes iluminados */
.nexa-service-block-unique {
    background: #FFFFFF !important;
    /* Borde sutil y elegante con reflejo naranja */
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-top: 5px solid #FF6000 !important;
    border-radius: 18px !important;
    padding: 42px !important;
    /* Sombra 3D profunda de alta categoría y brillo superior */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Transición fluida 3D de alta gama */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    /* Animación de entrada inicial en cascada */
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: serviceBlockSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados para cada tarjeta de servicio */
.nexa-services-list-unique .nexa-service-block-unique:nth-child(1) { animation-delay: 0.2s; }
.nexa-services-list-unique .nexa-service-block-unique:nth-child(2) { animation-delay: 0.35s; }
.nexa-services-list-unique .nexa-service-block-unique:nth-child(3) { animation-delay: 0.5s; }
.nexa-services-list-unique .nexa-service-block-unique:nth-child(4) { animation-delay: 0.65s; }

/* Capa de destello interno al pasar el cursor */
.nexa-service-block-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.04) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

/* Efecto hover 3D flotante para la tarjeta blanca */
.nexa-service-block-unique:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border-color: #FF6000 !important;
}

.nexa-service-block-unique:hover::before {
    opacity: 1 !important;
}

/* Cabecera */
.nexa-service-header-unique {
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
    margin-bottom: 30px !important;
}

.nexa-service-header-unique .nexa-serv-code-unique {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5) !important;
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
    color: #EA580C !important;
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 15px rgba(249, 115, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.nexa-service-block-unique:hover .nexa-serv-code-unique {
    transform: scale(1.06) rotate(-2deg) !important;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.25) !important;
}

.nexa-service-header-unique h2 {
    color: var(--bg-navy, #07111e) !important;
    font-size: 1.5rem !important;
    margin: 0 0 10px 0 !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

.nexa-service-header-unique .nexa-serv-desc-unique {
    color: #C2410C !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* Grilla de características: EXACTAMENTE 2 COLUMNAS con relieve 3D */
.nexa-service-features-grid-unique {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-top: 25px !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding-top: 30px !important;
}

/* Pastillas internas con diseño blanco puro, relieve y profundidad */
.nexa-service-features-grid-unique .nexa-feat-pill-unique {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    color: #1E293B !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    /* Sombra 3D suave por pastilla */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
}

.nexa-service-features-grid-unique .nexa-feat-pill-unique:hover {
    transform: translateY(-4px) scale(1.02) !important;
    background: #FFF7ED !important;
    border-color: #FF6000 !important;
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    color: #C2410C !important;
}

.nexa-service-features-grid-unique .nexa-feat-pill-unique i {
    color: #FF6000 !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.nexa-service-features-grid-unique .nexa-feat-pill-unique:hover i {
    transform: scale(1.2) rotate(8deg) !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN 3D VÍVIDA
   ============================================================ */
@keyframes serviceBlockSweep {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ============================================================
   ESTILOS EXCLUSIVOS: FILTROS Y PROYECTOS EN 3 COLUMNAS (3D VIVID & WHITE)
   ============================================================ */

.nexa-projects-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: #F8FAFC !important; /* Fondo general suave para realzar el relieve 3D blanco */
}

.nexa-projects-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Barra de Filtros centrada, ordenada y con toque 3D */
.nexa-filter-bar-unique {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 45px !important;
}

.nexa-filter-btn-unique {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    color: #1E293B !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nexa-filter-btn-unique:hover {
    transform: translateY(-3px) scale(1.03) !important;
    border-color: #FF6000 !important;
    color: #FF6000 !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.15) !important;
}

.nexa-filter-btn-unique.active {
    background: var(--bg-navy, #07111e) !important;
    color: #ffffff !important;
    border-color: var(--bg-navy, #07111e) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 25px rgba(7, 17, 30, 0.25) !important;
}

/* Grilla estricta de 3 columnas lado a lado */
.nexa-projects-grid-unique {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tarjeta individual con fondo blanco, relieve 3D y animación de barrido en zigzag */
.nexa-project-card-unique {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-top: 4px solid #FF6000 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    /* Sombra 3D profunda de alta gama con reflejo superior */
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Transición fluida 3D */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    /* Estado inicial para la animación de barrido en zigzag fluido */
    opacity: 0;
    transform: translateY(50px) scale(0.92);
    animation: nexaZigZagSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados en patrón Ziz-Zag armónico por tarjeta en la grilla */
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(1) { animation-delay: 0.1s; }
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(2) { animation-delay: 0.22s; }
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(3) { animation-delay: 0.34s; }
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(4) { animation-delay: 0.46s; }
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(5) { animation-delay: 0.58s; }
.nexa-projects-grid-unique .nexa-project-card-unique:nth-child(6) { animation-delay: 0.70s; }

/* Destello sutil interno en hover */
.nexa-project-card-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.03) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.nexa-project-card-unique:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border-color: #FF6000 !important;
}

.nexa-project-card-unique:hover::before {
    opacity: 1 !important;
}

/* Contenido interno de la tarjeta */
.nexa-project-card-unique .proj-cat {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #EA580C !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    transition: transform 0.3s ease !important;
}

.nexa-project-card-unique:hover .proj-cat {
    transform: translateX(3px) !important;
}

.nexa-project-card-unique h3 {
    font-size: 1.2rem !important;
    color: #0F172A !important;
    margin: 0 0 12px 0 !important;
    font-family: var(--font-heading) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.nexa-project-card-unique p {
    font-size: 0.9rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

.nexa-project-card-unique .proj-focus {
    font-size: 0.85rem !important;
    color: #334155 !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding-top: 14px !important;
    margin-top: auto !important;
}

.nexa-project-card-unique .proj-focus strong {
    color: #0F172A !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN DE BARRIDO ZIZ-ZAG
   ============================================================ */
@keyframes nexaZigZagSweep {
    0% {
        opacity: 0;
        transform: translateY(45px) translateX(-15px) scale(0.92);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) translateX(5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        filter: blur(0);
    }
}



/* ============================================================
   CONTROL DE VISIBILIDAD PARA FILTROS (EVITA HUECOS VACÍOS)
   ============================================================ */

.nexa-project-card-unique {
    display: flex !important;
}

/* Oculta por completo la tarjeta y libera su espacio en el grid */
.nexa-project-card-unique.nexa-card-hidden {
    display: none !important;
}
/* ============================================================
   ESTILOS EXCLUSIVOS: INSIGHTS / ARTÍCULOS LADO A LADO (3D VIVID & WHITE)
   ============================================================ */

.nexa-insights-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: #F8FAFC !important; /* Fondo general sutil para realzar el relieve tridimensional blanco */
}

.nexa-insights-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Grilla dinámica de 3 columnas lado a lado */
.nexa-insights-grid-unique {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tarjeta individual con fondo blanco puro, relieve 3D y animación en zigzag */
.nexa-insight-card-unique {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-top: 4px solid #FF6000 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    /* Sombra 3D profunda y refinada con reflejo superior luminoso */
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Transición fluida 3D de alta gama */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    /* Estado inicial para la animación de barrido en zigzag */
    opacity: 0;
    transform: translateY(50px) scale(0.92);
    animation: nexaInsightZigZag 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados en patrón zigzag armónico por tarjeta */
.nexa-insights-grid-unique .nexa-insight-card-unique:nth-child(1) { animation-delay: 0.15s; }
.nexa-insights-grid-unique .nexa-insight-card-unique:nth-child(2) { animation-delay: 0.3s; }
.nexa-insights-grid-unique .nexa-insight-card-unique:nth-child(3) { animation-delay: 0.45s; }

/* Destello sutil interno al pasar el cursor */
.nexa-insight-card-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.03) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.nexa-insight-card-unique:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    border-color: #FF6000 !important;
}

.nexa-insight-card-unique:hover::before {
    opacity: 1 !important;
}

/* Metadatos (Categoría y Fecha) */
.nexa-insight-card-unique .insight-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    font-size: 0.78rem !important;
}

.nexa-insight-card-unique .ins-cat {
    font-weight: 800 !important;
    color: #EA580C !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    transition: transform 0.3s ease !important;
}

.nexa-insight-card-unique:hover .ins-cat {
    transform: translateX(3px) !important;
}

.nexa-insight-card-unique .ins-date {
    color: #64748b !important;
    font-weight: 600 !important;
    background: #F1F5F9 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* Título y Extracto */
.nexa-insight-card-unique h3 {
    font-size: 1.2rem !important;
    color: #0F172A !important;
    margin: 0 0 12px 0 !important;
    font-family: var(--font-heading) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.nexa-insight-card-unique p {
    font-size: 0.9rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 0 22px 0 !important;
}

/* Enlace de Leer más estilizado en botón o enlace vivo */
.nexa-read-more-unique {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #EA580C !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    margin-top: auto !important;
    transition: all 0.3s ease !important;
}

.nexa-read-more-unique:hover {
    color: #0F172A !important;
    transform: translateX(5px) !important;
}

/* ============================================================
   KEYFRAMES DE ANIMACIÓN DE BARRIDO EN ZIGZAG
   ============================================================ */
@keyframes nexaInsightZigZag {
    0% {
        opacity: 0;
        transform: translateY(45px) translateX(-15px) scale(0.92);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) translateX(5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        filter: blur(0);
    }
}



/* ============================================================
   ESTILOS COMPLETOS: SECCIÓN DE CONTACTO (3D VIVID & APP COLORS)
   ============================================================ */

.nexa-contact-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: #F8FAFC !important; /* Fondo general ultra sutil para realzar el relieve 3D */
}

.nexa-contact-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Grilla estricta de 2 columnas lado a lado en pantallas grandes */
.nexa-contact-grid-unique {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Columna de Información Izquierda con animación de entrada en zigzag */
.nexa-contact-info-col-unique {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    min-width: 0 !important;
    opacity: 0;
    transform: translateY(45px) translateX(-15px) scale(0.95);
    animation: nexaContactSweepLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nexa-contact-subheading-unique {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #EA580C !important;
}

.nexa-contact-info-col-unique h2 {
    font-size: 2.1rem !important;
    color: #0F172A !important;
    font-family: var(--font-heading) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.nexa-contact-lead-unique {
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* Canales de contacto */
.nexa-contact-channels-unique {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

/* Tarjetas de canales con diseño blanco puro, relieve 3D profundo y transición fluida */
.nexa-channel-item-unique {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    /* Sombra 3D refinada con reflejo superior luminoso */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.4s ease, 
                border-color 0.4s ease !important;
}

/* Estilo base de los iconos 3D */
.nexa-channel-icon-unique {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease !important;
}

/* Contenedor del texto interno */
.nexa-channel-item-unique > div:not(.nexa-channel-icon-unique) {
    min-width: 0 !important;
    flex: 1 !important;
    transition: color 0.4s ease !important;
}

.nexa-channel-item-unique span {
    display: block !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
    transition: color 0.4s ease !important;
}

.nexa-channel-item-unique strong, 
.nexa-channel-item-unique strong a {
    display: block !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    color: #0F172A !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    transition: color 0.4s ease !important;
}

.nexa-location-link-unique {
    transition: color 0.3s ease !important;
}


/* ============================================================
   COLORES OFICIALES Y INMERSIÓN 3D PREMIUM POR CADA CANAL
   ============================================================ */

/* 1. CORREO (Email) -> Amarillo  */
.nexa-channel-mail .nexa-channel-icon-unique {
    background: #FFD700 !important;
    color: #FFFFFF !important;
}

/* 2. WHATSAPP -> Verde WhatsApp */
.nexa-channel-whatsapp .nexa-channel-icon-unique {
    background: #25D366 !important;
    color: #FFFFFF !important;
}

/* 3. LINKEDIN -> Azul LinkedIn */
.nexa-channel-linkedin .nexa-channel-icon-unique {
    background: #0A66C2 !important;
    color: #FFFFFF !important;
}

/* 4. UBICACIÓN / MAPS -> Rojo Maps */
.nexa-channel-map .nexa-channel-icon-unique {
    background: #EF4444 !important;
    color: #FFFFFF !important;
}


/* ============================================================
   ANIMACIONES Y ESPECTACULAR EFECTO 3D CON FONDO LLENO
   ============================================================ */

/* Transición base suave para todas las tarjetas */
.nexa-channel-item-unique {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Elevación 3D general de la tarjeta */
.nexa-channel-item-unique:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

/* --- Hover Email: Dorado Sólido e Intenso --- */
.nexa-channel-mail:hover {
    background: linear-gradient(135deg, #FFE873 0%, #FFD700 100%) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.4), 
                0 0 20px rgba(255, 235, 59, 0.6), 
                inset 0 2px 5px rgba(255, 255, 255, 0.8), 
                inset 0 -3px 6px rgba(184, 134, 11, 0.4) !important;
}
.nexa-channel-mail:hover .nexa-channel-icon-unique {
    transform: scale(1.15) rotate(-8deg) !important;
    background: #FFFFFF !important;
    color: #DAA520 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.nexa-channel-mail:hover span { color: #5B4605 !important; }
.nexa-channel-mail:hover strong, .nexa-channel-mail:hover a { color: #3D2F02 !important; }


/* --- Hover WhatsApp: Verde Sólido e Intenso --- */
.nexa-channel-whatsapp:hover {
    background: linear-gradient(135deg, #2EE675 0%, #25D366 100%) !important;
    border-color: #2EE675 !important;
    box-shadow: 0 20px 40px rgba(37, 211, 102, 0.45), 
                0 0 20px rgba(37, 211, 102, 0.6), 
                inset 0 2px 5px rgba(255, 255, 255, 0.8), 
                inset 0 -3px 6px rgba(14, 116, 85, 0.4) !important;
}
.nexa-channel-whatsapp:hover .nexa-channel-icon-unique {
    transform: scale(1.15) rotate(8deg) !important;
    background: #FFFFFF !important;
    color: #25D366 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.nexa-channel-whatsapp:hover span { color: #064E3B !important; }
.nexa-channel-whatsapp:hover strong, .nexa-channel-whatsapp:hover a { color: #022C22 !important; }


/* --- Hover LinkedIn: Azul Sólido e Intenso --- */
.nexa-channel-linkedin:hover {
    background: linear-gradient(135deg, #3B82F6 0%, #0A66C2 100%) !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 20px 40px rgba(10, 102, 194, 0.45), 
                0 0 20px rgba(59, 130, 246, 0.6), 
                inset 0 2px 5px rgba(255, 255, 255, 0.8), 
                inset 0 -3px 6px rgba(0, 53, 105, 0.4) !important;
}
.nexa-channel-linkedin:hover .nexa-channel-icon-unique {
    transform: scale(1.15) rotate(-8deg) !important;
    background: #FFFFFF !important;
    color: #0A66C2 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.nexa-channel-linkedin:hover span { color: #E0E7FF !important; }
.nexa-channel-linkedin:hover strong, .nexa-channel-linkedin:hover a { color: #FFFFFF !important; }


/* --- Hover Ubicación / Maps: Rojo Sólido e Intenso --- */
.nexa-channel-map:hover {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
    border-color: #F87171 !important;
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.45), 
                0 0 20px rgba(248, 113, 113, 0.6), 
                inset 0 2px 5px rgba(255, 255, 255, 0.8), 
                inset 0 -3px 6px rgba(153, 27, 27, 0.4) !important;
}
.nexa-channel-map:hover .nexa-channel-icon-unique {
    transform: scale(1.15) translateY(-4px) !important;
    background: #FFFFFF !important;
    color: #EF4444 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.nexa-channel-map:hover span { color: #FEE2E2 !important; }
.nexa-channel-map:hover strong, .nexa-channel-map:hover a { color: #FFFFFF !important; }

/* ============================================================
   ESTILOS DE LA TARJETA DEL FORMULARIO (DERECHA) - 3D & WHITE
   ============================================================ */

.nexa-contact-form-card-unique {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-top: 5px solid #FF6000 !important;
    border-radius: 18px !important;
    padding: 40px !important;
    /* Sombra 3D profunda y elegante */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    
    /* Animación inicial en zigzag derecho */
    opacity: 0;
    transform: translateY(45px) translateX(15px) scale(0.95);
    animation: nexaContactSweepRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

.nexa-form-header-unique {
    margin-bottom: 28px !important;
}

.nexa-form-header-unique h3 {
    font-size: 1.5rem !important;
    color: #0F172A !important;
    font-family: var(--font-heading) !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
}

.nexa-form-header-unique p {
    font-size: 0.92rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Alerta de éxito */
.nexa-alert-success-unique {
    background: #10B981 !important;
    color: #FFFFFF !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    margin-bottom: 22px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2) !important;
}

/* Grupos y Controles del Formulario */
.nexa-form-group-unique {
    margin-bottom: 18px !important;
}

.nexa-form-group-unique label {
    display: block !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
}

.nexa-form-control-unique {
    width: 100% !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: #0F172A !important;
    font-size: 0.92rem !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

.nexa-form-control-unique:focus {
    background: #FFFFFF !important;
    border-color: #FF6000 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.nexa-phone-group-unique {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

.nexa-select-code-unique {
    max-width: 140px !important;
}

.nexa-submit-btn-unique {
    background: var(--bg-navy, #07111e) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 22px !important;
    font-weight: 800 !important;
    font-size: 0.98rem !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 12px !important;
    box-shadow: 0 10px 25px rgba(7, 17, 30, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nexa-submit-btn-unique:hover {
    background: #FF6000 !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 15px 30px rgba(249, 115, 22, 0.35) !important;
}


/* ============================================================
   KEYFRAMES DE ANIMACIÓN DE BARRIDO EN ZIGZAG
   ============================================================ */
@keyframes nexaContactSweepLeft {
    0% {
        opacity: 0;
        transform: translateY(45px) translateX(-25px) scale(0.92);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) translateX(5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes nexaContactSweepRight {
    0% {
        opacity: 0;
        transform: translateY(45px) translateX(25px) scale(0.92);
        filter: blur(4px);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) translateX(-5px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        filter: blur(0);
    }
}



/* ============================================================
   ESTILOS EXCLUSIVOS: SECCIÓN ABOUT US (3D VIVID & ANIMATED)
   ============================================================ */

.nexa-about-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: #FFFFFF !important;
}

.nexa-about-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Grilla principal de 2 columnas (Texto e Imágenes) con aparición 3D */
.nexa-about-top-grid-unique {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 50px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 60px !important;
}

/* Texto de la sección About */
.nexa-about-text-content-unique {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    opacity: 0;
    transform: translateX(-35px);
    animation: aboutSlideLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.nexa-about-text-content-unique h2 {
    font-size: 2.3rem !important;
    color: var(--bg-navy, #07111e) !important;
    font-family: var(--font-heading) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}



.nexa-about-text-content-unique p {
    font-size: 0.95rem !important;
    color: var(--bg-navy, #07111e) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Contenedor de las imágenes con capas superpuestas 3D */
.nexa-about-image-wrapper-unique {
    position: relative !important;
    width: 100% !important;
    min-height: 400px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transform: translateX(35px);
    animation: aboutSlideRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

/* Imagen de atrás (Fondo) con brillo y sombra 3D */
.nexa-about-bg-layer-unique {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 75% !important;
    height: 280px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 96, 0, 0.3) !important;
    z-index: 1 !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease !important;
}

.nexa-about-bg-img-unique {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nexa-about-image-wrapper-unique:hover .nexa-about-bg-layer-unique {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 25px 50px rgba(255, 96, 0, 0.3);
}

.nexa-about-image-wrapper-unique:hover .nexa-about-bg-img-unique {
    transform: scale(1.12);
}

/* Imagen de delante (Primer plano) con efecto flotante avanzado */
.nexa-about-fg-layer-unique {
    position: absolute !important;
    top: 100px !important;
    right: 0 !important;
    width: 70% !important;
    height: 260px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 96, 0, 0.4) !important;
    z-index: 2 !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease !important;
}

.nexa-about-fg-img-unique {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nexa-about-image-wrapper-unique:hover .nexa-about-fg-layer-unique {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 35px 65px rgba(255, 96, 0, 0.4);
}

.nexa-about-image-wrapper-unique:hover .nexa-about-fg-img-unique {
    transform: scale(1.12);
}

/* Insignia flotante 3D animada */
.nexa-about-floating-badge-unique {
    position: absolute !important;
    bottom: -15px !important;
    left: 15px !important;
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.98) 0%, rgba(7, 20, 38, 0.99) 100%) !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 3 !important;
    border: 1px solid #FF6000 !important;
    animation: badgeFloat 4s ease-in-out infinite !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nexa-about-floating-badge-unique:hover {
    transform: scale(1.08) rotate(2deg) !important;
}

.nexa-badge-number-unique {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #FF8533 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 8px rgba(255, 96, 0, 0.6) !important;
}

.nexa-badge-text-unique {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #E2E8F0 !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
}

/* PARTE INFERIOR: Los 3 Pilares en horizontal con diseño 3D Vívido */
.nexa-pillars-box-bottom-unique {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 50px !important;
}

.nexa-pillar-item-unique {
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.95) 0%, rgba(7, 20, 38, 0.98) 100%) !important;
    border: 1px solid rgba(255, 96, 0, 0.25) !important;
    border-top: 4px solid #FF6000 !important;
    border-radius: 14px !important;
    padding: 32px 26px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    opacity: 0;
    transform: translateY(35px) scale(0.94);
    animation: pillarSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nexa-pillars-box-bottom-unique .nexa-pillar-item-unique:nth-child(1) { animation-delay: 0.3s; }
.nexa-pillars-box-bottom-unique .nexa-pillar-item-unique:nth-child(2) { animation-delay: 0.45s; }
.nexa-pillars-box-bottom-unique .nexa-pillar-item-unique:nth-child(3) { animation-delay: 0.6s; }

.nexa-pillar-item-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.1) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.nexa-pillar-item-unique:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(255, 96, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: #FF6000 !important;
    border-top-color: #FF8533 !important;
}

.nexa-pillar-item-unique:hover::before {
    opacity: 1 !important;
}

.nexa-pillar-item-unique h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #FF8533 !important;
    margin: 0 0 12px 0 !important;
    font-family: var(--font-heading) !important;
    text-shadow: 0 2px 5px rgba(255, 96, 0, 0.3) !important;
}

.nexa-pillar-item-unique p {
    font-size: 0.92rem !important;
    color: #E2E8F0 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}


/* ============================================================
   ESTILOS EXCLUSIVOS: MISIÓN, VISIÓN Y VALORES (3D VIVID)
   ============================================================ */

.nexa-mission-values-section-unique {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 70px 0 !important;
    background: linear-gradient(180deg, rgba(7, 20, 38, 1) 0%, rgba(4, 14, 28, 0.98) 100%) !important;
}

.nexa-mission-values-container-unique {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Grilla de Misión y Visión (2 Columnas) */
.nexa-mission-vision-grid-unique {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 35px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 65px !important;
}

.nexa-mission-card-unique,
.nexa-vision-card-unique {
    background: #ffffff !important;
    border: 1px solid rgba(255, 96, 0, 0.25) !important;
    border-top: 5px solid #FF6000 !important;
    border-radius: 14px !important;
    padding: 40px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    opacity: 0;
    transform: translateY(35px) scale(0.94);
    animation: missionSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nexa-mission-vision-grid-unique .nexa-mission-card-unique { animation-delay: 0.2s; }
.nexa-mission-vision-grid-unique .nexa-vision-card-unique { animation-delay: 0.35s; }

.nexa-mission-card-unique::before,
.nexa-vision-card-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.1) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.nexa-mission-card-unique:hover,
.nexa-vision-card-unique:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(255, 96, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: #FF6000 !important;
}

.nexa-mission-card-unique:hover::before,
.nexa-vision-card-unique:hover::before {
    opacity: 1 !important;
}

.nexa-mission-card-unique h3,
.nexa-vision-card-unique h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #FF8533 !important;
    margin: 0 0 16px 0 !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 6px rgba(255, 96, 0, 0.3) !important;
}

.nexa-mission-card-unique p,
.nexa-vision-card-unique p {
    font-size: 1rem !important;
    color: var(--bg-navy, #07111e) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-style: italic !important;
}

/* Contenedor de Valores Core */
.nexa-values-wrapper-unique {
    width: 100% !important;
    box-sizing: border-box !important;
}

.nexa-values-title-unique {
    text-align: center !important;
    font-size: 2rem !important;
    color: var(--white, #ffffff) !important;
    font-family: var(--font-heading) !important;
    margin-bottom: 40px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Grilla de 5 columnas para los valores con animación en cascada */
.nexa-grid-5-unique {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.nexa-value-item-unique {
    background: linear-gradient(135deg, rgba(23, 42, 69, 0.95) 0%, rgba(7, 20, 38, 0.98) 100%) !important;
    border: 1px solid rgba(255, 96, 0, 0.25) !important;
    border-radius: 12px !important;
    padding: 26px 18px !important;
    text-align: center !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease !important;

    opacity: 0;
    transform: translateY(30px) scale(0.92);
    animation: valueSweep 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Retrasos escalonados para las 5 tarjetas de valores */
.nexa-grid-5-unique .nexa-value-item-unique:nth-child(1) { animation-delay: 0.15s; }
.nexa-grid-5-unique .nexa-value-item-unique:nth-child(2) { animation-delay: 0.25s; }
.nexa-grid-5-unique .nexa-value-item-unique:nth-child(3) { animation-delay: 0.35s; }
.nexa-grid-5-unique .nexa-value-item-unique:nth-child(4) { animation-delay: 0.45s; }
.nexa-grid-5-unique .nexa-value-item-unique:nth-child(5) { animation-delay: 0.55s; }

.nexa-value-item-unique::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(255, 96, 0, 0.1) 0%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.nexa-value-item-unique:hover {
    transform: translateY(-8px) scale(1.05) !important;
    box-shadow: 0 25px 50px rgba(255, 96, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border-color: #FF6000 !important;
}

.nexa-value-item-unique:hover::before {
    opacity: 1 !important;
}

.nexa-value-item-unique strong {
    font-size: 1.05rem !important;
    color: #FF8533 !important;
    font-family: var(--font-heading) !important;
    text-shadow: 0 2px 5px rgba(255, 96, 0, 0.3) !important;
}

.nexa-value-item-unique p {
    font-size: 0.88rem !important;
    color: #CBD5E1 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}


/* ============================================================
   KEYFRAMES DE ANIMACIONES 3D VÍVIDAS
   ============================================================ */
@keyframes aboutSlideLeft {
    0% { opacity: 0; transform: translateX(-35px); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes aboutSlideRight {
    0% { opacity: 0; transform: translateX(35px); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes pillarSweep {
    0% { opacity: 0; transform: translateY(35px) scale(0.94); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes missionSweep {
    0% { opacity: 0; transform: translateY(35px) scale(0.94); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes valueSweep {
    0% { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}




/* ============================================================
   ESTILOS DE LA BARRA / NOTCH FLOTANTE
   ============================================================ */
.nexa-notch-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: 90%;
    max-width: 480px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexa-notch-content {
    background: rgba(7, 26, 43, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(245, 158, 11, 0.5); /* Detalle elegante superior */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border-radius: 50px; /* Forma de cápsula / notch */
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #ffffff;
}

.notch-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.notch-texts {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex-grow: 1;
}

.notch-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.notch-sub {
    font-size: 0.68rem;
    color: #94a3b8;
}

.btn-notch-action {
    background: #FF8533; /* Color corporativo */
    color: #04121f;
    border: none;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.btn-notch-action:hover {
    background: #fbbf24;
    transform: scale(1.03);
}

/* Clase para ocultar la barra suavemente hacia arriba */
.notch-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -20px);
}

/* Oculto por defecto para evitar parpadeos al cargar */
.nexa-notch-container {
    display: none; 
}

.nexa-whatsapp-widget {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important; /* Asegura que no se estire ni se duplique a la izquierda */
    top: auto !important;
    z-index: 99999 !important;
}

/* Botón flotante principal con efecto 3D y brillo */
.nexa-whatsapp-fab {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 32px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 
                inset 0 2px 4px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.nexa-whatsapp-fab:hover {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6);
}

/* Efecto de pulso sutil para llamar la atención */
.nexa-wa-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: nexaPulse 2s infinite;
    opacity: 0;
}

@keyframes nexaPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Ventana emergente (Popup) */
.nexa-whatsapp-popup {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 300px;
    background: #0f172a; /* Fondo oscuro elegante acorde a tu diseño */
    border: 1px solid rgba(255, 215, 0, 0.2); /* Sutil toque dorado corporativo */
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nexa-whatsapp-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nexa-whatsapp-popup-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 15px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nexa-whatsapp-popup-header i {
    color: #25D366;
    font-size: 20px;
}

.nexa-whatsapp-popup-body {
    padding: 15px;
}

.nexa-whatsapp-popup-body p {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Opciones de contacto dentro de la burbuja */
.nexa-wa-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.nexa-wa-option:hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: #25D366;
    transform: translateX(4px);
}

.nexa-wa-option i {
    font-size: 22px;
    color: #25D366;
}

.nexa-wa-option strong {
    display: block;
    color: #f8fafc;
    font-size: 14px;
}

.nexa-wa-option small {
    color: #94a3b8;
    font-size: 11px;
}