:root {
    --azul-profundo: #0A192F;    /* Base corporativa de alta gama */
    --dorado: rgb(0, 212, 169);           /* Sofisticación y valor estratégico */
    --mandarina: #FF7A00;        /* EXCLUSIVO para acción y conversión */
    --gris-tecnico: #F5F6F8;     /* Fondos secundarios y soporte visual */
    --blanco-puro: #FFFFFF;      /* Limpieza visual */
    /*--fuente-titulos: 'Poppins', sans-serif; */
    --fuente-titulos:: "Sora", sans-serif;
    --fuente-cuerpo: 'Inter', sans-serif;
    --navbar-height: 80px;
}

/* ============================================================
   2. ESTILOS GLOBALES Y ESCALA TIPOGRÁFICA [1, 5, 6]
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0A192F; /* Color azul profundo institucional para evitar destellos blancos */
    color: #334155;
    margin: 0;
    padding: 0;
    font-family: 'Sora', sans-serif;
}
/* Las tarjetas o bloques de texto clave se quedan en blanco puro para flotar elegantemente */
.benefit-premium-card, .form-premium-card {
    background-color: var(--blanco-puro, #FFFFFF);
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.05); /* Sombra suave */
}


/* H1: Título principal (Hero) */
h1 {
    font-family: var(--fuente-titulos);
    font-size: clamp(38px, 5vw, 56px); 
    font-weight: 600;
    line-height: 1.1;
    color: var(--blanco-puro);
    margin-bottom: 25px;
}

/* H2: Títulos de secciones principales [5] */
h2 {
    font-family: var(--fuente-titulos);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    color: var(--azul-profundo);
    margin-bottom: 30px;
}

/* H3: Subtítulos de servicios o bloques [5] */
h3 {
    font-family: var(--fuente-titulos);
    font-size: 22px;
    font-weight: 600;
    color: var(--azul-profundo);
    margin-bottom: 15px;
}

p {
    font-size: 16px;
    color: #4A4A4A;
    margin-bottom: 20px;
}

/* ============================================================
   3. COMPONENTES DE CONVERSIÓN (BOTONES) [7-9]
   ============================================================ */
.btn-mandarina {
    display: inline-block;
    background-color: var(--mandarina);
    color: var(--blanco-puro);
    padding: 18px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-mandarina:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);
    background-color: #E66E00; /* Tono mandarina más oscuro [10] */
}

/* ============================================================
   4. NAVEGACIÓN (NAVBAR) [11, 12]
   ============================================================ */
/*
   .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: var(--blanco-puro);
    position: fixed;
    width: 100%;
    height: var(--navbar-height);
    top: 0;
    box-shadow: 0 2px 15px rgba(10, 25, 47, 0.05);
    z-index: 1000;
}
*/
/*padding: 0 5%;*/
.logo img { height: 60px; }

.menu a {
    color: var(--azul-profundo);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem; /*15px;*/
    margin-left: 30px;
    transition: color 0.3s ease;
}

.menu a:hover { color: var(--mandarina); }

/* ============================================================
   5. HERO SECTION [7, 13, 14]
   ============================================================ */
.hero {
    background: linear-gradient(rgba(10, 25, 47, 0.3), rgba(10, 25, 47, 0.7)), url("hero.png") no-repeat center center/cover;
    height: 75vh;
    display: flex;
    align-items: center;
    padding: 0 5%;
    color: var(--blanco-puro);
}

.hero-tagline {
    color: var(--dorado);
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 14px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.hero-content { max-width: 850px; }

/* ============================================================
   6. LOGO SLIDER (ANIMACIÓN INFINITA) [2, 15]
   ============================================================ */
.logo-slider {
    overflow: hidden;
    
    background: #0A192F;  /* var(--gris-tecnico); */
    /*border-bottom: 1px solid rgba(10, 25, 47, 0.05);*/
    width: 100%;
    overflow: hidden;
}
.logo-track {
    display: flex;
    gap: 100px;
    width: max-content;
    animation: scroll 25s linear infinite;
    will-change: transform;
}
.logo-track img {
    height: 200px;
    width: 200px;
    /*filter: grayscale(50%);*/
    /*opacity: 0.5;*/ 
    transition: 0.3s;
    z-index: 1;
    object-fit: cover;
    object-position: center;
}

.logo-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   7. DISEÑO FLUIDO DE SERVICIOS (ESTILO SAFEGUARD) [3, 16, 17]
   ============================================================ */
.service-row {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 100px 10%;
    border-bottom: 1px solid #F0F0F0;
}

.service-row.reverse { flex-direction: row-reverse; }

.service-text { flex: 1.2; }
/*
.service-image { flex: 1; }

.service-image img {
    width: 100%;
    border-radius: 8px;
    filter: drop-shadow(0 20px 40px rgba(10, 25, 47, 0.15));
}
*/

/* HCA 20260705 - EDICION DE IMAGEN - INI */
/* ============================================================
   OPCIÓN 1: IMÁGENES CON DEGRADADO Y DIFUMINADO
   ============================================================ */
.service-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(10, 25, 47, 0.15); /* Sombra suave para flotar */
}

/* Capa de superposición que difumina la imagen con el Azul Profundo */
.service-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado que entra por los bordes para matar el corte recto del JPG */
    background: inset 0 0 40px rgba(255, 255, 255, 0.8),
                linear-gradient(to right, rgba(10, 25, 47, 0.3) 0%, transparent 60%);
    pointer-events: none; 
}

.service-image img {
    width: 100%;
    display: block;
    /* Un ligero ajuste de color para que los JPGs se vean más premium */
    filter: contrast(105%) brightness(95%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pequeña interacción al pasar el mouse */
.service-image:hover img {
    transform: scale(1.05); /* Zoom imperceptible y elegante */
}
/* HCA 20260705 - EDICION DE IMAGEN - FIN */

.service-badge {
    color: var(--dorado);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

/* Caja "Por qué elegirnos" [18] */
.value-box {
    background: rgba(200, 155, 60, 0.05);
    padding: 30px;
    border-radius: 10px;
    margin: 25px 0;
    border-left: 4px solid var(--dorado);
}

.value-box h4 {
    font-size: 12px;
    color: var(--dorado);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.value-box ul { list-style: none; }
.value-box li {
    font-size: 15px;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.value-box li::before {
    content: "✓";
    color: var(--mandarina);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ============================================================
   8. EXPANSIÓN REGIONAL (LIDERAZGO) [19-21]
   ============================================================ */

/* EXPANSION - INI */
/* Variables basadas en los manuales de identidad [1, 7] */


.expansion-regional {
    background-color: var(--azul-profundo); /* #0A192F; para liderazgo [7] */
    padding: 80px 8%;
    color: var(--blanco-puro);
}

.container-expansion {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.expansion-content {
    flex: 1;
    min-width: 300px;
}

.expansion-title {
    font-family: var(--fuente-titulos);
    font-size: clamp(28px, 4vw, 42px);
    margin-bottom: 25px;
    color: var(--blanco-puro);
}

.expansion-text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 1;
    color: var(--blanco-puro);
}

.expansion-bullets {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.expansion-bullets li {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 500;
}

.bullet-icon {
    width: 12px;
    height: 12px;
    background-color: var(--dorado); /* Uso de dorado para valor estratégico [8] */
    border-radius: 50%;
    margin-right: 15px;
}

.btn-expansion {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--mandarina); /* Mandarina reservado para conversión [2, 9] */
    color: var(--blanco-puro);
    text-decoration: none;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background 0.3s ease;
}
.bullet-check::before {
    content: '✔';
    color: var(--dorado); 
    margin-right: 15px;
    font-weight: bold;
}

.btn-expansion:hover {
    background-color: #e66e00;
}

.expansion-visual {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.map-container img {
    max-width: 110%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(200, 155, 60, 0.4));
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .expansion-title { font-size: 32px; }
    .container-expansion { flex-direction: column; text-align: center; }
    .expansion-bullets li { justify-content: center; }
}
/* EXPANSION - FIN */

/* ============================================================
   9. TESTIMONIOS Y PRUEBA SOCIAL [22, 23]
   ============================================================ */
.testimonials {
    background-color: var(--gris-tecnico);
    padding: 100px 5%;
    text-align: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin-top: 50px;
}

.testimonial-item {
    background: var(--blanco-puro);
    padding: 40px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(15, 47, 92, 0.05);
    border-top: 5px solid var(--dorado); /* Detalle premium [22] */
}

/* ============================================================
   10. FOOTER [10, 24]
   ============================================================ */
footer { 
    background: #050d1a; 
    color: var(--blanco-puro); 
    padding: 80px 5% 40px; 
}

.main-footer {
    background-color: #050d1a; /* Azul ultra profundo */
    color: var(--blanco-puro);
    padding: 80px 5% 40px;
}

.footer-links h4, .footer-contact h4 {
    color: var(--dorado);
    margin-bottom: 25px;
    font-size: 18px;
    text-transform: uppercase;
}

.footer-links a {
    display: block;
    color: var(--blanco-puro);
    text-decoration: none;
    margin-bottom: 12px;
    opacity: 0.8;
    transition: 0.3s;
}

.footer-links a:hover { color: var(--dorado); opacity: 1; }


/* Estilos del Modal - MI CODIGO9.txt */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 25, 47, 0.9); /* Azul Profundo con transparencia */
    backdrop-filter: blur(8px); /* Desenfoque premium */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #FFFFFF;
    padding: 50px;
    border-radius: 15px;
    border-top: 6px solid var(--dorado); /* Detalle Dorado premium */
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* Estilos de Pilares - MI CODIGO9.txt */
.pilar-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(15, 47, 92, 0.1);
}

.pilar-number {
    font-family: var(--fuente-titulos);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--mandarina); /* Mandarina para resaltar numeración */
    min-width: 60px;
}

.close-btn {
    position: absolute;
    top: 20px; right: 25px;
    font-size: 35px;
    cursor: pointer;
    color: #AAA;
    transition: 0.3s;
}
.close-btn:hover { color: var(--mandarina); }

/* HCA 20260512 - INI */

.navbar {
    margin-top: 0;
    top: 0;
    position: fixed; 
    left: 0;
    width: 100%;
    /*height: 90%;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    height: 80px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;/*9999;*/  
    box-sizing: border-box;
}
    
/* Configuración General del Mega Menú */
.mega-menu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 50px 10%;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-top: 2px solid var(--dorado); /* Línea superior elegante */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
}
/* Cabecera de la columna (Icono + Título) */
.column-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.service-icon {
    font-size: 1.5rem;
    color: var(--dorado);
}
.mega-column h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
}
/* Descripción del servicio */
.service-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 45px; /* Mantiene las columnas alineadas */
}
/* Viñetas (Contenido) */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.service-list li {
    font-size: 0.85rem;
    color: var(--azul-profundo);
    padding: 5px 0;
    position: relative;
    padding-left: 15px;
}
.service-list li::before {
    content: "•";
    color: var(--dorado);
    position: absolute;
    left: 0;
    font-weight: bold;
}
/* Enlace Ver más */
.view-more {
    display: inline-block;
    color: var(--dorado);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.view-more:hover {
    text-decoration: underline;
    transform: translateX(5px);
}
/* Animación de los elementos al abrir el menú */
.dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    top: 80px;
}
/* HCA 20260512 - FIN */
/* HCA 20260512 - INI */
.menu {
    display: flex; /* Fuerza a los elementos a estar en línea */
    align-items: center;
    gap: 35px; /* Espacio uniforme entre cada opción */
    /*
    margin-left: auto; 
    flex-direction: row; 
    */
}
/* HCA 20260512 - FIN */

/* HCA 20260517 - EOR - INI */
/* ============================================================
   ESTILOS EXCLUSIVOS PARA PÁGINAS DE SERVICIO INDEPENDIENTES
   ============================================================ */
/* Hero Banner para el Servicio */
.service-hero {
    position: relative;
    height: 75vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--blanco-puro);
    /* Puedes cambiar la imagen de fondo cuando gustes */
    background: url("{{ url_for('static', filename='tu-fondo-eor.jpg') }}") no-repeat center center/cover;
    padding-top: 80px; /* Compensa la barra de navegación fixed */
}
.service-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(10,25,47,0.6) 0%, rgba(10,25,47,0.3) 100%);
    z-index: 1;
}
.service-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 24px;
}
.service-tag-top {
    color: var(--dorado);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 15px;
    font-family: var(--fuente-titulos);
}
.service-hero-content h1 {
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    line-height: 1.25;
    margin-bottom: 20px;
}
.service-hero-content p {
    font-family: var(--fuente-cuerpo);
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 35px;
}
/* Sección Deep Dive / Concepto y Métricas */
.service-deep-dive {
    padding: 90px 8%;
    background-color: var(--blanco-puro);
}
.dive-grid {
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.dive-text {
    flex: 1.5;
}
.dive-text h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.2rem;
    margin-bottom: 20px;
}
.dive-text p {
    font-family: var(--fuente-cuerpo);
    font-size: 1.05rem;
    color: #4A5568;
    line-height: 1.7;
    margin-bottom: 15px;
}
.dive-metrics {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.metric-card {
    background: var(--gris-tecnico);
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid var(--dorado);
}
.metric-num {
    font-family: var(--fuente-titulos);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--azul-profundo);
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}
.metric-lbl {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}
/* Formulario de Contacto Premium en Página del Servicio */
.service-contact-section {
    padding: 100px 5%;
    background-color: var(--gris-tecnico);
}
.contact-box-premium {
    max-width: 850px;
    margin: 0 auto;
    background: var(--blanco-puro);
    padding: 50px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.06);
    text-align: center;
}
.contact-box-premium h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.contact-box-premium p {
    color: #666;
    margin-bottom: 40px;
}
.premium-service-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-row-twin {
    display: flex;
    gap: 20px;
}
.premium-service-form input,
.premium-service-form select,
.premium-service-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #E2E8F0;
    background-color: #F8FAFC;
    border-radius: 6px;
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--azul-profundo);
    transition: all 0.3s;
}
.premium-service-form input:focus,
.premium-service-form select:focus,
.premium-service-form textarea:focus {
    outline: none;
    border-color: var(--dorado);
    background-color: var(--blanco-puro);
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.1);
}
.btn-submit-service {
    background-color: var(--mandarina); /* Exclusivo para llamadas a la acción fuertes */
    color: var(--blanco-puro);
    border: none;
    padding: 18px;
    border-radius: 6px;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}
.btn-submit-service:hover {
    background-color: #E06B00;
    transform: translateY(-2px);
}
/* Ajustes de Adaptabilidad */
@media (max-width: 850px) {
    .dive-grid { flex-direction: column; gap: 40px; }
    .form-row-twin { flex-direction: column; gap: 20px; }
    .service-hero-content h1 { font-size: 2.2rem; }
    .contact-box-premium { padding: 30px 20px; }
}
/* HCA 20260517 - EOR - FIN */

/* HCA 20260520 - TARJETAS EOR - INI */
/* Sección de Puntos de Dolor */
.pain-points-section {
    padding: 100px 5%;
    background-color: var(--gris-tecnico); /* Fondo suave para resaltar las tarjetas blancas */
    text-align: center;
}
.section-intro-center {
    max-width: 800px;
    margin: 0 auto 60px;
}
.section-intro-center .section-title-premium {
    border-left: none;
    padding-left: 0;
    text-align: center;
}
/* Cuadrícula de Tarjetas */
.pain-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    max-width: 1300px;
    margin: 0 auto;
}
/* Tarjeta Individual */
.pain-card {
    background: var(--blanco-puro);
    padding: 40px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pain-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.1);
}
/* Icono con tu color Dorado */
.pain-icon {
    margin-bottom: 25px;
}
.icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 2px solid var(--dorado);
    border-radius: 50%;
    color: var(--dorado);
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(200, 155, 60, 0.05); /* Fondo dorado muy sutil */
}
/* Tipografía de la Tarjeta */
.pain-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;
}
.pain-card p {
    font-family: var(--fuente-cuerpo);
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}
/* Responsivo para tablets y móviles */
@media (max-width: 768px) {
    .pain-points-grid {
        grid-template-columns: 1fr;
    }
}


/* Sección Solución EOR */
.solution-eor-section {
    padding: 100px 10%;
    background-color: var(--azul-profundo); /* Fondo oscuro para contraste premium */
    color: var(--blanco-puro);
}
.solution-grid {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}
/* Columna Izquierda */
.solution-text {
    flex: 1;
}
.solution-tag {
    color: var(--dorado); 
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}
.solution-text h2 {
    font-family: var(--fuente-titulos);
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--blanco-puro); /* Cambiado a blanco para resaltar */
}
.solution-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9); /* Blanco con ligera opacidad para que no canse la vista */
}
/* Columna de Beneficios */
.solution-benefits {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05); /* Cristal suave */
    padding: 25px;
    border-radius: 12px;
    transition: background 0.3s ease;
}
.benefit-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.benefit-icon {
    background: var(--dorado);
    color: var(--azul-profundo);
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
}
.benefit-content h4 {
    font-family: var(--fuente-titulos);
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--dorado);
}
.benefit-content p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.7;
    margin: 0;
}
/* Responsivo */
@media (max-width: 992px) {
    .solution-grid {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    
    .benefit-item {
        text-align: left;
    }

    .solution-text h2 {
        font-size: 2.2rem;
    }
}


/* Sección Comparativa */
.comparison-section {
    padding: 100px 10%;
    background-color: var(--blanco-puro);
}
.comparison-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}
.comparison-text {
    flex: 1;
}
.comparison-text h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.simple-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}
.simple-list li {
    padding: 10px 0;
    font-size: 1rem;
    color: #555;
    border-bottom: 1px solid #eee;
}
/* Estilos de la Tabla Premium */
.comparison-table-container {
    flex: 1.5; /* Le damos un poco más de espacio a la tabla */
}
.premium-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 15px 40px rgba(10, 25, 47, 0.08);
    border-radius: 12px;
    overflow: hidden; /* Para que los bordes redondeados funcionen */
}
.premium-table th, .premium-table td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--fuente-cuerpo);
}
.premium-table thead th {
    background-color: var(--azul-profundo);
    color: var(--blanco-puro);
    font-family: var(--fuente-titulos);
    font-weight: 600;
}
/* Resaltado de la columna Panamerican */
.highlight-col {
    background-color: var(--dorado) !important;
    text-align: center !important;
}
.highlight-cell {
    background-color: rgba(200, 155, 60, 0.05); /* Fondo dorado muy sutil */
    color: var(--azul-profundo);
    font-weight: 700;
    text-align: center;
}
/* Estilo para las filas */
.premium-table tbody tr:hover {
    background-color: #fcfcfc;
}
.premium-table td:first-child {
    font-weight: 600;
    color: var(--azul-profundo);
}
/* Responsivo */
@media (max-width: 992px) {
    .comparison-grid {
        flex-direction: column;
        text-align: center;
    }   
    .premium-table {
        font-size: 0.9rem;
    }
}
/* HCA 20260516 - FIN */
/* HCA 20260520 - TARJETAS EOR - FIN */

/* HCA 20260520 - TALENT - INI */
/* ============================================================
   NUEVOS ESTILOS PARA LA PÁGINA DE TALENT ACQUISITION
   ============================================================ */

/* Fondo del Hero exclusivo para Talento */
/*
.talent-bg {
    background: url("/static/img-hunting.jpg") no-repeat center center/cover !important;
}
*/
/* ============================================================
   REDISENO PREMIUM: METRICAS Y DESAFIOS (TALENTO)
   ============================================================ */

/* Panel de Métricas Minimalistas */
.talent-metrics-premium {
    background-color: var(--azul-profundo);
    padding: 50px 5%;
    position: relative;
    z-index: 10;
}

.metrics-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    gap: 30px;
}

.metric-clean-item {
    flex: 1;
    text-align: center;
    padding: 10px 20px;
}

.metric-number-wrapper {
    margin-bottom: 8px;
}

.metric-clean-item .counter-number {
    font-family: var(--fuente-titulos);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--dorado);
    letter-spacing: -1px;
}

.metric-clean-item .counter-symbol {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dorado);
}

.metric-text-premium {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--blanco-puro);
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
}

/* Divisores verticales elegantes entre métricas */
.metric-divider {
    width: 1px;
    height: 70px;
    background: linear-gradient(to bottom, rgba(200, 155, 60, 0), rgba(200, 155, 60, 0.4), rgba(200, 155, 60, 0));
}

/* Sección de Desafíos de Diseño */
.talent-challenges-section {
    padding: 100px 8%;
    background-color: var(--blanco-puro);
}

.challenge-header {
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
}

.challenge-tag {
    color: var(--dorado);
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.challenge-header h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.challenge-header p {
    font-family: var(--fuente-cuerpo);
    color: #64748B;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Grid Moderno de Desafíos */
.challenges-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tarjeta limpia con número fino de fondo */
.challenge-modern-card {
    background: var(--gris-tecnico);
    padding: 40px 35px;
    border-radius: 12px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.challenge-modern-card:hover {
    transform: translateY(-5px);
    background-color: #FAFAFA;
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.04);
}

.challenge-card-num {
    font-family: var(--fuente-titulos);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dorado);
    opacity: 0.8;
    line-height: 1;
    padding-top: 4px;
}

.challenge-card-content h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.challenge-card-content p {
    font-family: var(--fuente-cuerpo);
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsivo para Tablets y Móviles */
@media (max-width: 992px) {
    .metrics-panel-row {
        flex-direction: column;
        gap: 40px;
    }
    .metric-divider {
        display: none;
    }
    .challenges-modern-grid {
        grid-template-columns: 1fr;
    }
    .challenge-modern-card {
        padding: 30px 20px;
    }
}

.counter-number {
    font-family: var(--fuente-titulos);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--dorado); /* Destaca en dorado */
}
.counter-symbol {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    font-weight: 700;
    color: var(--dorado);
}
.metric-animated-card p {
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    opacity: 0.85;
    margin-top: 10px;
    line-height: 1.5;
}
/* Grid Ajustado para Contenido de Dolor de Cabeza */
.grey-bg {
    background-color: var(--gris-tecnico) !important;
}
/* Estructura Flex Lateral para la Metodología */
.talent-flex-layout {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}
.talent-solution-text-block {
    flex: 1.3;
}
.talent-solution-text-block h2 {
    font-family: var(--fuente-titulos);
    color:  white;
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.talent-solution-text-block p {
    font-family: var(--fuente-cuerpo);
    color: #94A3B8; /*#4A5568;*/
    line-height: 1.7;
    margin-bottom: 30px;
}
/* Caja Interactiva Derecha (Glow Effect) */
.talent-solution-interactive-box {
    flex: 1;
}
.interactive-glow-card {
    background: var(--blanco-puro);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.05);
    border-top: 4px solid var(--dorado); /* Línea distintiva premium */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.interactive-glow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(200, 155, 60, 0.15); /* Brillo dorado sutil en el hover */
}
.interactive-glow-card h4 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.3rem;
    margin-bottom: 25px;
    font-weight: 700;
}
.mini-row-service {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #F0F4F8;
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--azul-profundo);
    font-weight: 600;
}
.mini-row-service:last-child {
    border-bottom: none;
}
.mini-row-service span {
    font-size: 1.2rem;
}
/* Ajustes Móviles */
@media (max-width: 992px) {
    .talent-flex-layout {
        flex-direction: column;
        gap: 50px;
        padding: 60px 20px;
        text-align: center;
    }
    
    .interactive-glow-card {
        text-align: left;
    }
}
/* HCA 20260520 - TALENT - FIN */

/* HCA 20260520 - SECCION SOLUCION RECLUTAMIENTO - FIN */
/* ============================================================
   SECCIONES: BENEFICIOS Y PROCESO DE RECLUTAMIENTO PREMIUM
   ============================================================ */

/* Grid de Beneficios */
.talent-benefits-premium {
    padding: 100px 8%;
}
.benefits-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.benefit-premium-card {
    background: var(--blanco-puro);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 1px solid #E2E8F0;
}
.benefit-premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.06);
}
.benefit-icon-circle {
    width: 50px;
    height: 50px;
    background-color: rgba(200, 155, 60, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--dorado);
}
.benefit-premium-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.benefit-premium-card p {
    font-family: var(--fuente-cuerpo);
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}
/* Sección de la Línea de Tiempo (Proceso) */
.talent-process-timeline {
    padding: 100px 8%;
    background-color: var(--blanco-puro);
}
.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 40px auto 0;
    padding: 20px 0;
}
/* Línea de progreso vertical de fondo */
.timeline-progress-bar {
    position: absolute;
    left: 25px;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #E2E8F0;
    border-radius: 2px;
    z-index: 1;
}
/* Relleno dinámico animado por JS */
.timeline-progress-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--azul-profundo), var(--dorado));
    border-radius: 2px;
    transition: height 0.1s linear;
}
.timeline-steps-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.timeline-step-item {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    position: relative;
    z-index: 2;
}
/* El nodo circular con el número */
.step-node {
    width: 54px;
    height: 54px;
    background-color: var(--blanco-puro);
    border: 3px solid #E2E8F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    font-weight: 700;
    color: #64748B;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
/* Tarjeta contenedora de cada paso */
.step-body-card {
    background-color: var(--gris-tecnico);
    padding: 30px 35px;
    border-radius: 12px;
    flex: 1;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.step-body-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.step-body-card p {
    font-family: var(--fuente-cuerpo);
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
/* Clases activas que inyectará JavaScript al hacer Scroll */
.timeline-step-item.active .step-node {
    border-color: var(--dorado);
    background-color: var(--azul-profundo);
    color: var(--blanco-puro);
}
.timeline-step-item.active .step-body-card {
    background-color: var(--blanco-puro);
    box-shadow: 0 15px 35px rgba(10, 25, 47, 0.05);
}
/* Responsivo para Móviles */
@media (max-width: 768px) {
    .timeline-progress-bar {
        left: 15px;
    }
    .step-node {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .timeline-step-item {
        gap: 15px;
    }
    .step-body-card {
        padding: 20px;
    }
}
/* HCA 20260520 - SECCION SOLUCION RECLUTAMIENTO - FIN */

/* HCA 20260520 - PAYROLL - INI */
/* ============================================================
   ESTILOS EXCLUSIVOS PARA PAYROLL & NOMINA GLOBAL
   ============================================================ */
.payroll-hero {
    background: linear-gradient(rgba(10, 25, 47, 0.85), rgba(10, 25, 47, 0.85)), 
                url("/static/img/payroll-bg.jpg") no-repeat center center/cover !important;
    padding: 120px 8% 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}
.payroll-pill {
    display: inline-block;
    padding: 8px 20px;
    background-color: rgba(200, 155, 60, 0.1);
    border: 1px solid var(--dorado);
    color: var(--dorado);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 20px;
}
/* Layout de Intro con Imagen Glass */
.payroll-intro-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px; /* Evita que se estire hasta el infinito en pantallas anchas */
    width: 100%;
    margin: 0 auto;
}
.payroll-intro-text {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}
.payroll-intro-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}
.image-glass-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* Limita el tamaño de la imagen */
}
.floating-img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.1);
}
.image-glass-container:hover .floating-img {
    transform: scale(1.02) translateY(-10px);
}
.glass-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--dorado), transparent);
    opacity: 0.15;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 1;
    animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}
/* Tarjetas de Valor */
.payroll-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}
.payroll-value-card {
    background: var(--blanco-puro);
    padding: 55px 40px; /* Un poco más de aire interno en las tarjetas ejecutivas */
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(10, 25, 47, 0.03);
    border-bottom: 4px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.payroll-value-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.payroll-value-card:hover {
    border-bottom: 3px solid var(--dorado);
    transform: translateY(-10px);
}
.value-icon-box {
    font-size: 2.5rem;
    margin-bottom: 25px;
}
.payroll-value-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.3rem;
    margin-bottom: 15px;
}
/* Banner Interactivo CTA */
.payroll-interactive-cta {
    background-color: var(--azul-profundo);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    color: var(--blanco-puro);
}
.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}
.cta-text h3 { font-size: 2rem; margin-bottom: 10px; color: white}
.cta-text p { opacity: 0.8; font-size: 1.1rem; color: #94A3B8;}
.btn-gold-outline {
    padding: 15px 35px;
    border: 2px solid var(--dorado);
    color: var(--dorado);
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.3s;
}
.btn-gold-outline:hover {
    background: var(--dorado);
    color: var(--azul-profundo);
}
/* Móvil */
@media (max-width: 992px) {
    .payroll-intro-grid {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .payroll-intro-text {
        padding-right: 0;
    }
    
    .payroll-intro-text h2 {
        font-size: 2rem;
    }
}
.payroll-intro-section {
    padding: 80px 8%;
    background-color: var(--blanco-puro);
    display: flex;
    justify-content: center;
}
.payroll-intro-text h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}
.payroll-intro-text p {
    font-family: var(--fuente-cuerpo);
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
}
.section-intro-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px; /* Incrementamos a 60px para separar más el título de las tarjetas */
    padding: 0 20px;
}
.payroll-values-section {
    /* Aumentamos a 140px arriba y abajo para darle máxima elegancia y aire */
    padding: 140px 8%; 
    background-color: var(--gris-tecnico); /* Tu fondo gris claro de la suite */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.section-intro-center h2 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}
/* HCA 20260520 - PAYROLL - FIN */

/* HCA 20260521 - BPO - INI */
/* ============================================================
   ESTILOS EXCLUSIVOS PARA BPO & TERCERIZACIÓN
   ============================================================ */
/* Hero BPO con gradiente corporativo */
.bpo-hero {
    background: linear-gradient(rgba(10, 25, 47, 0.85), rgba(10, 25, 47, 0.85)), 
                url("/static/img/bpo-bg.jpg") no-repeat center center/cover !important;
}
.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.btn-outline-white {
    padding: 15px 35px;
    border: 2px solid var(--blanco-puro);
    color: var(--blanco-puro);
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.3s;
}
.btn-outline-white:hover {
    background: var(--blanco-puro);
    color: var(--azul-profundo);
}
/* 140px de Margen de respiración controlado en Secciones */
.bpo-problems-section,
.bpo-capabilities-tabs-section {
    padding: 140px 8%;
    background-color: var(--blanco-puro);
    box-sizing: border-box;
}
/* Tarjetas de dolor con micro-interacción refinada */
.bpo-pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto 0;
}
.bpo-pain-item {
    text-align: center;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.bpo-pain-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.bpo-icon-circle {
    width: 70px;
    height: 70px;
    background: var(--gris-tecnico);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    transition: background 0.3s;
}
.bpo-pain-item:hover .bpo-icon-circle {
    background: rgba(200, 155, 60, 0.15);
}
/* Sección Solución / Metodología */
.bpo-solution-section {
    padding: 140px 8%;
}
.bpo-solution-layout {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}
.bpo-solution-text { flex: 1.2; }
/* Dashboard dinámico de impacto */
.bpo-dynamic-card {
    flex: 1;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s ease;
}
.bpo-dynamic-card.visible {
    opacity: 1;
    transform: scale(1);
}
.efficiency-card {
    background: var(--azul-profundo);
    color: var(--blanco-puro);
    padding: 45px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(10, 25, 47, 0.2);
    border-top: 5px solid var(--dorado);
}
.efficiency-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 30px;
    font-size: 1.4rem;
}
.efficiency-stat {
    margin-bottom: 25px;
}
.stat-label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 10px;
    opacity: 0.9;
}
.stat-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}
.stat-fill {
    height: 100%;
    background: var(--dorado);
    width: 0; /* Empieza en 0 para la animación JS */
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--azul-profundo);
}
.stat-footer {
    font-size: 0.8rem;
    opacity: 0.5;
    font-style: italic;
    margin-top: 20px;
}
/* Móvil */
@media (max-width: 992px) {
    .bpo-solution-layout {
        flex-direction: column;
        text-align: center;
    }
    .bpo-solution-text ul li {
        text-align: left;
    }
}
.card-pain {
    background: var(--gris-tecnico);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}
.card-pain:hover {
    background: var(--azul-profundo);
    border-color: var(--azul-profundo);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.12);
}
/* Inversión cromática en hover para que el texto siga siendo legible */
.card-pain:hover h3 { color: var(--blanco-puro); }
.card-pain:hover p { color: #94A3B8; }
.card-pain:hover .bpo-icon-circle { background: rgba(255, 255, 255, 0.1); }
/* Componente del Controlador de Pestañas (Tabs) */
.bpo-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
}
.tab-trigger {
    background: var(--gris-tecnico);
    border: 1px solid #E2E8F0;
    color: var(--azul-profundo);
    padding: 14px 32px;
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab-trigger:hover,
.tab-trigger.active {
    background: var(--azul-profundo);
    color: var(--blanco-puro);
    border-color: var(--azul-profundo);
    box-shadow: 0 10px 20px rgba(10, 25, 47, 0.08);
}
/* Mostrar/Ocultar contenido con animación suave */
.bpo-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}
.bpo-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
/* Grid de la Matriz de Beneficios (Pestaña 1) */
.bpo-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
.matrix-item {
    position: relative;
    padding-left: 60px;
}
.matrix-number {
    position: absolute;
    left: 0;
    top: -5px;
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dorado);
    opacity: 0.8;
}
.matrix-item h4 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.25rem;
    margin: 0 0 10px 0;
}
/* Bloques de la Pestaña de Servicios (Pestaña 2) */
.services-bpo-pills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.bpo-pill-card {
    background: var(--blanco-puro);
    padding: 35px;
    border-radius: 12px;
    border-top: 3px solid var(--dorado);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
.pill-icon {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.bpo-pill-card h4 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.2rem;
    margin: 0 0 8px 0;
}
.bpo-pill-card p {
    font-family: var(--fuente-cuerpo);
    color: #475569;
    font-size: 0.92rem;
    margin: 0;
}
/* Ajustes para adaptabilidad en Móviles */
@media (max-width: 768px) {
    .bpo-tabs-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .bpo-matrix-grid {
        grid-template-columns: 1fr;
    }
}
/* HCA 20260521 - BPO - FIN */
/* HCA 20260521 - ACCOUNTING - INI */
/* ============================================================
   ESTILOS EXCLUSIVOS: ACCOUNTING & FINANCE SOLUTIONS
   ============================================================ */

.accounting-hero {
    background: linear-gradient(rgba(10, 25, 47, 0.85), rgba(10, 25, 47, 0.85)), 
                url("/static/img/accounting-bg.jpg") no-repeat center center/cover !important;
}
/* Márgenes amplios de 140px de respiración corporativa */
.accounting-problems-section,
.accounting-solution-section {
    padding: 140px 8%;
    box-sizing: border-box;
}
.accounting-problems-section {
    background-color: var(--blanco-puro);
}
/* Grid de dolores/desafíos contables */
.accounting-pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
    max-width: 1200px;
    margin: 60px auto 0;
}
.accounting-pain-card {
    background: var(--gris-tecnico);
    padding: 45px 30px;
    border-radius: 12px;
    border-left: 3px solid #E2E8F0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(20px);
}
.accounting-pain-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.accounting-pain-card:hover {
    border-left-color: var(--dorado);
    background: var(--blanco-puro);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(10, 25, 47, 0.04);
}
.accounting-icon-box {
    font-size: 2rem;
    margin-bottom: 20px;
}
.accounting-pain-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
}
/* Layout de dos columnas para la solución */
.accounting-solution-layout {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}
.accounting-solution-text {
    flex: 1.2;
}
.accounting-dynamic-card {
    flex: 1;
    width: 100%;
}
/* Tarjeta del Simulador Interactivo */
.finance-interactive-box {
    background: var(--azul-profundo);
    color: var(--blanco-puro);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(10, 25, 47, 0.15);
    border-top: 4px solid var(--dorado);
}
.finance-interactive-box h3 {
    color: var(--dorado);
    font-family: var(--fuente-titulos);
    font-size: 1.35rem;
    margin-bottom: 10px;
}
.simulator-instruction {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 25px;
}
/* Opciones de Radio estilizadas executivamente */
.simulator-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 35px;
}
.sim-option {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 14px 20px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}
.sim-option:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sim-option input[type="radio"] {
    accent-color: var(--dorado);
    width: 18px;
    height: 18px;
}
/* Barras de métricas del simulador */
.simulator-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.result-metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.metric-title {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 600;
}
.metric-progress-container {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}
.metric-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--azul-profundo);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}
/* Colores dinámicos del simulador */
.risk-high { background-color: #EF4444; color: #FFF; }
.risk-medium { background-color: #F59E0B; }
.risk-low { background-color: #10B981; color: #FFF; }
.precision-low { background-color: #EF4444; color: #FFF; }
.precision-medium { background-color: #F59E0B; }
.precision-high { background-color: #10B981; color: #FFF; }
/* Adaptabilidad para pantallas más pequeñas */
@media (max-width: 992px) {
    .accounting-solution-layout {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .talent-check-list {
        text-align: left;
    }
}
/* HCA 20260521 - ACCOUNTING - FIN */

/* HCA 20260521 - ACCOUNTING - INI */
/* ============================================================
   SECCIÓN DE BENEFICIOS PREMIUM (ACCOUNTING)
   ============================================================ */
.accounting-benefits-section {
    padding: 140px 8%;
    background-color: var(--gris-tecnico);
    position: relative;
    overflow: hidden;
}
/* Grid simétrico y escalable de 3 columnas */
.benefits-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto 0;
}
/* Tarjeta Premium con efecto de elevación y micro-interacciones */
.benefit-premium-card {
    background: var(--blanco-puro);
    padding: 50px 35px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
    z-index: 1;
    overflow: hidden;
    /* Preparación para animación JS */
    opacity: 0;
    transform: translateY(30px);
}
/* Efecto de borde sutil dorado al pasar el cursor */
.benefit-premium-card:hover {
    transform: translateY(-8px);
    border-color: rgba(200, 155, 60, 0.3);
    box-shadow: 0 20px 40px rgba(10, 25, 47, 0.06);
}
/* Contenedor del Icono - Destacado en Azul y Dorado */
.benefit-icon-wrapper {
    width: 65px;
    height: 65px;
    background: rgba(10, 25, 47, 0.04);
    color: var(--azul-profundo);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}
.benefit-premium-card:hover .benefit-icon-wrapper {
    background: var(--azul-profundo);
    color: var(--dorado);
    transform: scale(1.05);
}
/* Tipografías internas adaptadas a la jerarquía LD */
.benefit-premium-card h3 {
    font-family: var(--fuente-titulos);
    color: var(--azul-profundo);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}
.benefit-premium-card p {
    font-family: var(--fuente-cuerpo);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.6;
}
/* Estados de animación controlados por JS */
.benefit-premium-card.animated-in {
    opacity: 1;
    transform: translateY(0);
}
/* HCA 20260521 - ACCOUNTING - FIN */
/* HCA 20260522 - INI */
.navbar-left {
    display: flex;
    align-items: center;
    gap: 40px;
}
.logo {
    height: 50px;   
    width: auto;
    object-fit: contain;
}
.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}
/* HCA 20260522 - INI */
/* HCA 20260522 - WHATSAPP - INI */
/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP PREMIUM
   ============================================================ */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Verde oficial WhatsApp */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
    z-index: 99999; /* Prioridad por encima de modales, headers y carruseles */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;  
    /* Animación continua de pulso sutil */
    animation: whatsapp-pulse 2s infinite;
}
/* Redimensionamiento adaptativo del icono SVG */
.whatsapp-icon {
    width: 32px;
    height: 32px;
    fill: #FFFFFF;
    transition: transform 0.3s ease;
}
/* Estilo del Tooltip de Invitación */
.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background-color: var(--azul-profundo); /* Vinculado a tu paleta de marca */
    color: var(--blanco-puro);
    border: 1px solid rgba(200, 155, 60, 0.4); /* Sutil borde dorado corporativo */
    padding: 8px 16px;
    border-radius: 8px;
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(10, 25, 47, 0.1);
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
/* --- INTERACCIONES (HOVER) --- */
.whatsapp-floating-btn:hover {
    transform: scale(1.08);
    background-color: #20ba5a;
    box-shadow: 0 12px 28px rgba(32, 186, 90, 0.45);
    animation: none; /* Detiene el pulso automático al interactuar */
}
/* El icono gira levemente al poner el cursor encima */
.whatsapp-floating-btn:hover .whatsapp-icon {
    transform: rotate(10deg) scale(1.05);
}
/* El tooltip aparece elegantemente de lado */
.whatsapp-floating-btn:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}
/* --- EFECTO DE ANIMACIÓN DE PULSO CONTÍNUO --- */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
/* Ajuste responsive para dispositivos móviles */
@media (max-width: 768px) {
    .whatsapp-floating-btn {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px;
    }
    .whatsapp-icon {
        width: 28px;
        height: 28px;
    }
    /* Ocultar el tooltip largo en pantallas pequeñas para evitar desbordes */
    .whatsapp-tooltip {
        display: none;
    }
}
/* HCA 20260522 - WHATSAPP - FIN */
/* HCA 20260529 - NOSOTROS - INI */
/* ============================================================
   ESTILOS PREMIUM PARA LA PÁGINA "NOSOTROS"
   ============================================================ */
.bg-corporate-dark {
    background-color: #0c1a30; /* Variación elegante del azul profundo */
    margin: 0;
    padding: 0;
}
.nosotros-page-wrapper {
    padding-top: 100px; /* Previene que la barra fija tape el título */
}
/* Hero Introductorio */
.nosotros-hero {
    background: radial-gradient(circle at top right, rgba(200, 155, 60, 0.05), transparent 60%);
    padding: 100px 5% 60px;
    text-align: center;
}
.container-nosotros {
    max-width: 950px;
    margin: 0 auto;
}
.sub-badge {
    color: #C89B3C; /* Tu dorado corporativo */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}
.section-title-main {
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 30px;
}
.nosotros-lead-text {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.85;
    text-align: justify;
}
/* Contenedor General de Pilares */
.nosotros-pilares-section {
    padding: 80px 5% 120px;
}
.pilares-header-center {
    text-align: center;
    margin-bottom: 80px;
}
.section-title-premium {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 700;
}
.gold-divider {
    width: 60px;
    height: 3px;
    background-color: #C89B3C;
    margin: 20px auto 0;
}
.container-minimal {
    max-width: 1140px;
    margin: 0 auto;
}
/* Grilla Asimétrica Dinámica de Pilares */
.pilares-list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Separación espaciosa y elegante */
}
.pilar-item {
    display: flex;
    align-items: center;
    gap: 80px;
}
.pilar-item.reverse {
    flex-direction: row-reverse;
}
/* Contenedor de la Imagen con Marco Flotante */
.pilar-visual {
    flex: 1;
    position: relative;
    max-width: 500px;
}
.image-frame-layer {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border: 2px solid #C89B3C;
    border-radius: 12px;
    z-index: 1;
    transition: transform 0.4s ease;
}
.pilar-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    filter: grayscale(20%) brightness(95%);
    transition: transform 0.4s ease, filter 0.4s ease;
}
/* Efecto dinámico al pasar el ratón */
.pilar-item:hover .pilar-img {
    transform: translate(-8px, -8px);
    filter: grayscale(0%) brightness(100%);
}
.pilar-item:hover .image-frame-layer {
    transform: translate(8px, 8px);
}
/* Bloques de Texto Contenido */
.pilar-content {
    flex: 1;
}
.pilar-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}
.pilar-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgba(200, 155, 60, 0.25); /* Dorado translúcido de fondo */
    line-height: 1;
}
.pilar-line-indicator {
    height: 2px;
    width: 40px;
    background-color: #C89B3C;
}
.pilar-body h3 {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 600;
    margin-bottom: 15px;
}
.pilar-body p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
}
/* --- CLASES PARA ANIMACIONES JS DE ENTRADA SUAVE --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-on-scroll.active-reveal {
    opacity: 1;
    transform: translateY(0);
}
/* Adaptación completa para teléfonos */
@media (max-width: 992px) {
    .pilar-item, .pilar-item.reverse {
        flex-direction: column;
        gap: 40px;
    }
    .pilar-visual {
        max-width: 100%;
        width: 100%;
    }
    .pilar-img {
        height: 260px;
    }
    .section-title-main {
        font-size: 2.5rem;
    }
    .nosotros-lead-text {
        text-align: left;
    }
}
/* HCA 20260529 - NOSOTROS - INI */
/* HCA 20260605 - FORMULARIO EN HERO - INI */
/* ============================================================
   ESTILOS DEL HERO EN DOS COLUMNAS CON FORMULARIO INTEGRADO
   ============================================================ */

.hero-split {
    position: relative;
    min-height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #0A192F; /* Respaldo corporativo */
}

/*
.hero-split {
    position: relative;
    overflow: hidden; 
}
*/

.hero-container-split {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 5%;
}

/* --- SECCIONES INTERMEDIAS PARA EVITAR FONDOS BLANCOS PLANOS --- */
.expansion-regional {
    background-color: #0A192F; /* Fondo azul profundo corporativo alineado con la identidad de la marca */
    color: #ffffff;
    padding: 80px 5%;
}

.testimonials {
    background-color: #0F172A; /* Tono oscuro sofisticado para la sección de impacto y confianza */
    color: #ffffff;
    padding: 80px 5%;
}
/* --- SECCIÓN DE SOLUCIONES CON COLOR CORPORATIVO --- */
#soluciones {
    background-color: #0A192F; /* Azul profundo corporativo */
    color: #ffffff;
    padding: 80px 5%;
}

/* Título principal de la sección en blanco nítido */
#soluciones .hub-title {
    color: #ffffff !important;
}

/* Subtítulo con un tono claro y legible sobre fondo oscuro */
#soluciones .hub-subtitle {
    color: #CBD5E1 !important;
}

/* Opcional: Si el contenedor interno (.container-pro) tiene un fondo blanco forzado, lo anulamos */
#soluciones .container-pro {
    background-color: transparent !important;
    box-shadow: none !important;
}
/* --- CORRECCIÓN DE CONTRASTE EN SECCIÓN DE SOLUCIONES / HEADHUNTING --- */
#soluciones h1, 
#soluciones h2, 
#soluciones h3, 
#soluciones h4, 
#soluciones .section-title, 
#soluciones .hub-title {
    color: #ffffff !important; /* Blanco puro para máxima legibilidad en títulos */
}

#soluciones p, 
#soluciones span, 
#soluciones .hub-subtitle,
#soluciones .description {
    color: #E2E8F0 !important; /* Gris muy claro para subtítulos y textos descriptivos */
}

/* Opcional: Si tienes etiquetas pequeñas de categoría (como "HEADHUNTING EJECUTIVO") */
#soluciones .tag, 
#soluciones .category-label {
    color: #00E5FF !important; /* Un tono cian/turquesa brillante que combina perfecto con el azul corporativo y resalta de inmediato */
}
/* --- CORRECCIÓN DE TÍTULOS EN SECCIONES OSCURAS --- */
.testimonials h1, 
.testimonials h2, 
.testimonials h3, 
.testimonials h4,
.resultados h1,
.resultados h2,
.resultados h3,
section[style*="background-color: #0A192F"] h2,
section[style*="background-color: #0F172A"] h2 {
    color: #ffffff !important;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.2s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tech-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5; /* asegúrate de que esté por encima del fondo */
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 200, 80, 0.8);
  border-radius: 50%;
  animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.4; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0.4; }
}



.btn-glow {
  transition: box-shadow .3s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 18px rgba(255, 180, 60, 0.7);
}






/* --- COLUMNA DE TEXTO TEXTOS (IZQUIERDA) --- */
.hero-text-side {
    color: #ffffff;
}
.hero-text-side h1 {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 15px 0 25px 0;
    color: #ffffff;
}
.hero-text-side p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #e2e8f0;
    max-width: 580px;
}
.hero-badge-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    font-size: 0.9rem;
    color: var(--dorado, #C89B3C);
    font-weight: 500;
    background: rgba(200, 155, 60, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(200, 155, 60, 0.2);
    font: "Space Grotesk", sans-serif;
}
/* --- TARJETA FLOTANTE DEL FORMULARIO (DERECHA) --- */
.hero-form-side {
    display: flex;
    justify-content: flex-end;
}
.form-premium-card {
    width: 100%;
    max-width: 500px;
    background: #ffffff; /* Fondo blanco nítido como la referencia */
    padding: 40px 35px;
    border-radius: 16px; /* Bordes suaves premium */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Efecto de profundidad */
}
.form-premium-card h3 {
    font-size: 1.6rem;
    color: var(--azul-profundo, #0A192F);
    font-weight: 700;
    margin-bottom: 8px;
}
.form-subtitle {
    font-size: 0.9rem;
    color: #64748B;
    margin-bottom: 25px;
    line-height: 1.4;
}
/* Distribución interna de los inputs en bloques de dos columnas */
.form-grid-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 0.95rem;
    border: 1px solid #CBD5E1; /* Borde gris sutil imitando la Imagen_1 */
    border-radius: 10px; /* Redondeado idéntico a tu captura */
    background-color: #F8FAFC;
    color: var(--azul-profundo, #0A192F);
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.input-group textarea {
    resize: none;
}
/* Cambios de enfoque interactivos respetando la marca */
.input-group input:focus, 
.input-group textarea:focus {
    outline: none;
    border-color: var(--dorado, #C89B3C);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(200, 155, 60, 0.15);
}
.full-width {
    margin-bottom: 25px;
}
/* --- BOTÓN MANDARINA DEL FORMULARIO --- */
.btn-form-submit {
    width: 100%;
    padding: 16px;
    background-color: #FF6B00; /* Tono mandarina/naranja vibrante de conversión */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 30px; /* Botón alargado redondeado */
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-form-submit:hover {
    background-color: #E56000; /* Variante sutilmente más oscura al posar el cursor */
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
}
.btn-form-submit:active {
    transform: translateY(0);
}
/* --- RESPONSIVE / ADAPTACIÓN MÓVIL --- */
@media (max-width: 992px) {
    .hero-container-split {
        grid-template-columns: 1fr; /* Colapsa a una columna en móviles */
        gap: 40px;
        text-align: center;
    }
    .hero-text-side h1 {
        font-size: 2.4rem;
    }
    .hero-text-side p {
        margin: 0 auto;
    }
    .hero-form-side {
        justify-content: center;
    }   
    .form-premium-card {
        padding: 30px 20px;
    }
}
@media (max-width: 480px) {
    .form-grid-inputs {
        grid-template-columns: 1fr; /* Los inputs pasan a ser individuales en pantallas muy chicas */
    }
}
/* HCA 20260605 - FORMULARIO EN HERO - FINX */


/* EDC 20260606 - INTRO DE SERVICIOS - INX */
.container-pro {
    padding: 120px 0;
    background-color: var(--blanco-puro);
}

.hub-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 0px;
}

.badge-gold {
    color: var(--dorado);
    font-weight: 800;
    letter-spacing: 3px;
    font-size: 13px;
    border: 1px solid var(--dorado);
    padding: 8px 20px;
    border-radius: 50px;
    
}

.hub-title {
    font-size: clamp(32px, 5vw, 46px);
    color: var(--azul-profundo);
    margin: 30px 0;
}
    /* EDC 20260606 - INTRO DE SERVICIOS - FINX */
/* HCA 20260607 - FOOTER - INI */
/* ============================================================
   ESTILOS PREMIUM: REESTRUCTURACIÓN DEL PIE DE PÁGINA (FOOTER)
   ============================================================ */
.main-footer {
    background-color: #060E1A; /* Un tono más oscuro que el azul profundo para dar cierre visual */
    color: #E2E8F0;
    padding: 80px 0 0 0;
    font-family: var(--fuente-cuerpo), sans-serif;
    /*border-top: 3px solid var(--dorado, #C89B3C); *//* Línea de corona dorada distintiva */
    position: relative;
    z-index: 100;
}
.footer-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    /* Divide el espacio en 4 columnas proporcionales al peso de su contenido */
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; 
    gap: 40px;
    padding-bottom: 50px;
}
/* --- COLUMNA 1: BRANDING --- */
.branding-col .footer-logo {
    margin-bottom: 20px;
}
.branding-col .footer-logo img {
    height: 60px; /* Tamaño controlado y profesional */
    width: auto;
    object-fit: contain;
}
.footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #94A3B8; /* Gris suavizado de alta legibilidad */
    margin-bottom: 25px;
    text-align: justify;
}
/* Iconos de Redes Sociales Corporativas */
.footer-socials {
    display: flex;
    gap: 12px;
}
.footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo sutil para que resalte el recuadro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F8FAFC; /* Color blanco/gris suave para el icono */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    background-color: var(--dorado, #C89B3C); /* Tu dorado al pasar el cursor */
    color: #060E1A; /* El icono se vuelve oscuro para contrastar con el fondo dorado */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(200, 155, 60, 0.3);
}
/* --- ESTILOS GENERALES DE ENLACES Y TÍTULOS --- */
.footer-title {
    font-family: var(--fuente-titulos), sans-serif;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    letter-spacing: 0.5px;
}
/* Sutil indicador bajo los títulos de columna */
.footer-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--dorado, #C89B3C);
}
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li {
    margin-bottom: 12px;
}
.footer-links-list a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    display: inline-block;
}
/* Efecto de desplazamiento y color dorado al pasar el cursor */
.footer-links-list a:hover {
    color: var(--dorado, #C89B3C);
    transform: translateX(5px);
}
/* --- COLUMNA 4: DATOS DE CONTACTO --- */
.footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #CBD5E1;
}
.contact-icon {
    font-size: 1.1rem;
    color: var(--dorado, #C89B3C);
}
.contact-text {
    line-height: 1.4;
}
/* Indicador de Operación Activa Regional */
.footer-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4ADE80; /* Verde brillante de actividad */
    background: rgba(74, 222, 128, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
}
.status-pulse {
    width: 7px;
    height: 7px;
    background-color: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: footer-pulse 1.8s infinite;
}
@keyframes footer-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/* --- BARRA INFERIOR DE COPYRIGHT --- */
.footer-bottom-bar {
    background-color: #03070F; /* Oscurecimiento total para la banda de cierre */
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
}
.footer-bottom-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748B;
}
.footer-legal-links a {
    color: #64748B;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-legal-links a:hover {
    color: var(--dorado, #C89B3C);
}
.legal-separator {
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.1);
}
/* --- OPTIMIZACIÓN RESPONSIVE (MÓVILES Y TABLETS) --- */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr; /* Cambia a 2x2 en pantallas medianas */
        gap: 45px;
    }
}
@media (max-width: 640px) {
    .footer-container {
        grid-template-columns: 1fr; /* 1 sola columna vertical en celulares */
        gap: 35px;
        padding-top: 50px;
    }
    .footer-bottom-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}
/* HCA 20260607 - FOOTER - FIN */
/* HCA 20260614 - FORMULARIO - ENVIO DE CORREO - INI */
/* --- VALIDACIÓN DE CAMPOS Y ERRORES --- */
.input-group {
    position: relative;
    margin-bottom: 15px;
}
.input-group input.field-error, 
.input-group textarea.field-error {
    border: 1.5px solid #EF4444 !important; /* Rojo de advertencia limpia */
    background-color: #FEF2F2 !important;
}
.error-msg {
    color: #EF4444;
    font-size: 11px;
    display: block;
    margin-top: 4px;
    font-weight: 500;
    text-align: left;
}
/* --- POP-UP PREMIUM DE ÉXITO --- */
.custom-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 14, 26, 0.8); /* Fondo opaco corporativo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out forwards;
}
.popup-body {
    background: #FFFFFF;
    padding: 35px 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    width: 85%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.popup-icon {
    width: 60px;
    height: 60px;
    background-color: #10B981; /* Verde esmeralda de éxito */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    margin: 0 auto 20px;
}
.popup-body h4 {
    font-size: 1.5rem;
    color: #0A192F;
    margin-bottom: 10px;
    font-weight: 700;
}
.popup-body p {
    font-size: 0.95rem;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 25px;
}
.btn-popup-close {
    background-color: var(--azul-profundo, #0A192F);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    width: 100%;
}
.btn-popup-close:hover {
    background-color: var(--dorado, #C89B3C);
    color: #0A192F;
}
/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* HCA 20260614 - FORMULARIO - ENVIO DE CORREO - FIN */
/* HCA 20260628 - NUEVO FONDO DE PAGINA - INI */
.bg-gradient-executive {
    /* Va desde un gris técnico muy limpio hacia un azul claro sumamente difuminado */
    background: linear-gradient(135deg, #F8FAFC 0%, #EDF2F7 100%);
}
/* HCA 20260628 - NUEVO FONDO DE PAGINA - FIN */
/* HCA 20260705 - ANIMACIONES - INI */
/* ============================================================
   ANIMACIONES TIPO DELOITTE (HERO SECTION)
   ============================================================ */
/* 1. Animación para el fondo: Movimiento lento y continuo */
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}
/* 2. Animación para los textos y contenedor: Aparecer desde abajo */
@keyframes fadeUpPremium {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Aplicando el acercamiento al contenedor de la imagen de fondo de tu Hero */
/*
.hero-background-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1; 
    animation: kenBurns 20s ease-out forwards;
}
*/
.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen se expanda cubriendo todo el espacio sin deformarse */
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(10, 25, 47, 0.75), rgba(10, 25, 47, 0.9)); /* Capa oscura elegante para resaltar textos y formularios */
    z-index: 1;
}

/* Clases base para los elementos que van a aparecer */
.anim-fade-up {
    opacity: 0; /* Ocultos por defecto hasta que cargue la página */
    animation: fadeUpPremium 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Retrasos calculados milimétricamente para crear el "efecto cascada" */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
/* HCA 20260705 - ANIMACIONES - FIN */
/* HCA 20260711 PROFUNDIDAD A IMAGEN -INI */
/* Sombra corporativa y elegante */
.imagen-con-sombra {
    border-radius: 8px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Eje X, Eje Y, Difuminado, Color */
    transition: transform 0.3s ease; /* Para suavizar la animación al pasar el ratón */
}
/* Efecto al pasar el ratón por encima */
.imagen-con-sombra:hover {
    transform: translateY(-5px); /* Levanta la imagen ligeramente */
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
}


/* Imagen con bordes redondeados y un marco de color */
.imagen-redondeada {
    border-radius: 15px; /* Curvatura de las esquinas */
    border: 3px solid var(--azul-profundo); /* Grosor, estilo y color del borde */
}
/* Imagen totalmente circular */
.imagen-circular {
    border-radius: 50%; /* 50% la convierte en un círculo/óvalo */
    border: 4px solid #ffffff;
}


/* Imagen en forma de hexágono */
.imagen-hexagono {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* Imagen con un corte diagonal en la parte inferior */
.imagen-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Eje X, Eje Y, Difuminado, Color */
}
/* HCA 20260711 PROFUNDIDAD A IMAGEN -FIN */

/* HCA 20260724 NOSOTROS - 1 - INI */
/* =========================================
   DISEÑO ESPECÍFICO PARA: ACERCA DE LD
========================================= */

.ld-nosotros-theme {
    background-color: #0A192F; /* Fondo acorde a tu bg-corporate-dark */
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
}

/* Tipografías */
.ld-title-main {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.ld-title-section {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.ld-text-muted {
    color: #94A3B8;
}

.ld-body-text {
    font-size: 16px;
    line-height: 1.6;
    color: #94A3B8;
    margin-bottom: 20px;
}

.ld-body-text-small {
    font-size: 15px;
    line-height: 1.6;
    color: #94A3B8;
}

/* Etiquetas Turquesa */
.ld-tag {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #00D4AA;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Contenedores y Layout */
.ld-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.ld-section {
    padding: 80px 0;
}

.ld-bg-darker {
    background-color: #06101E; /* Ligeramente más oscuro para contrastar */
}

.ld-max-w {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Grillas */
.grid-2-cols { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.gap-large { gap: 64px; }
.gap-medium { gap: 32px; }

/* Tarjetas (Cards) */
.ld-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 40px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.ld-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 170, 0.3);
}

.ld-card-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #00D4AA;
    display: block;
    margin-bottom: 16px;
}

.ld-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 16px;
    line-height: 1.3;
}

/* Botón CTA Turquesa */
.ld-btn-primary {
    display: inline-block;
    background-color: #FF7A00;
    color: #0A192F;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ld-btn-primary:hover {
    background-color: #00bf99;
    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);
}

/* Espaciados utilitarios */
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.text-center { text-align: center; }

/* Animación Reveal (Ya tenías la lógica, solo agregamos la transición CSS) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Responsive */
@media (max-width: 992px) {
    .grid-2-cols, .grid-3-cols { grid-template-columns: 1fr; }
    .gap-large { gap: 40px; }
}
/* HCA 20260724 NOSOTROS - 1 - FIN */

/* HCA 20260724 NOSOTROS - 2 - INI */
/* =========================================
   DISEÑO EN ZIG-ZAG (Texto e Imagen alternados)
========================================= */

.ld-feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

/* Invierte el orden para el bloque 2 */
.ld-feature-row.reverse {
    flex-direction: row-reverse;
}

.ld-feature-content {
    flex: 1; /* Ocupa la mitad del espacio */
}

.ld-feature-image {
    flex: 1; /* Ocupa la otra mitad */
    width: 100%;
}

/* Estilo temporal de la caja de imagen */
.ld-image-placeholder {
    background-color: rgba(0, 212, 170, 0.03);
    border: 2px dashed rgba(0, 212, 170, 0.3);
    border-radius: 16px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00D4AA;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.ld-image-placeholder:hover {
    background-color: rgba(0, 212, 170, 0.08);
}

/* Diseño Responsive para móviles: apilar uno debajo del otro */
@media (max-width: 992px) {
    .ld-feature-row, 
    .ld-feature-row.reverse {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }
    
    .ld-image-placeholder {
        height: 300px;
    }
}
/* HCA 20260724 NOSOTROS - 2 - FIN */

/* HCA 20260724 NOSOTROS - 3 - INI */
/* =========================================
   TARJETAS TECNOLÓGICAS (Propósito y Destino)
========================================= */

.tech-card {
    position: relative;
    border-radius: 16px;
    background: transparent;
    z-index: 1;
    /* Efecto de levitación suave */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* El Borde Falso que cambia de color */
.tech-card::before {
    content: "";
    position: absolute;
    inset: -1px; 
    border-radius: 17px;
    background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    z-index: -1;
    transition: background 0.5s ease;
}

/* El interior de la tarjeta */
.tech-card-inner {
    position: relative;
    background: #0B1325; /* Fondo azul corporativo súper oscuro */
    border-radius: 16px;
    padding: 40px;
    height: 100%;
    overflow: hidden;
}

/* Patrón de cuadrícula (Tech Grid) invisible por defecto */
.tech-card-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 212, 170, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 170, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

/* Brillo central turquesa (Glow) */
.tech-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: rgba(0, 212, 170, 0.3);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

/* Contenido de la tarjeta (siempre al frente) */
.tech-card-content {
    position: relative;
    z-index: 2;
}

.tech-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* Iconos dinámicos */
.tech-icon {
    color: #00D4AA;
    font-size: 22px;
    animation: spin-slow 12s linear infinite;
    display: inline-block;
}

/* Línea de decoración láser */
.tech-decoration-line {
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #00D4AA, transparent);
    margin-top: 24px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- ESTADOS HOVER (La magia ocurre al pasar el mouse) --- */

.tech-card:hover {
    transform: translateY(-8px); /* La tarjeta flota hacia arriba */
}

.tech-card:hover::before {
    /* El borde se vuelve turquesa neón */
    background: linear-gradient(45deg, rgba(0, 212, 170, 0.6), rgba(0, 212, 170, 0.1));
}

.tech-card:hover .tech-card-inner::after {
    opacity: 1; /* Se revela la cuadrícula de datos */
}

.tech-card:hover .tech-card-glow {
    opacity: 1; /* Se enciende el brillo de fondo */
}

.tech-card:hover .tech-decoration-line {
    width: 100%; /* La línea se dispara hacia la derecha como un láser */
}

/* Animación para que el icono gire perpetuamente */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* HCA 20260724 NOSOTROS - 3 - FIN */

/* HCA 20260724 NOSOTROS - 4 - INI */
/* =========================================
   DISEÑO DE ACORDEÓN (Estilo Desplegable)
========================================= */

.ld-accordion-container {
    width: 100%;
    margin-top: 24px;
}

.ld-accordion {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* El botón que el usuario hace clic */
.ld-accordion-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
}

.ld-accordion-header:hover .ld-accordion-title,
.ld-accordion-header:hover .ld-accordion-icon {
    color: #FF7A00; /* Se ilumina en turquesa al pasar el mouse */
}

.ld-accordion-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    transition: color 0.3s ease;
}

.ld-accordion-icon {
    font-size: 28px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1;
    transition: transform 0.4s ease, color 0.3s ease;
}

/* El contenedor del texto oculto */
.ld-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ld-accordion-inner {
    padding-bottom: 24px;
    padding-right: 20px;
}

/* --- CLASES ACTIVAS (Cuando está abierto) --- */

/* Transforma el "+" en una "x" rotándolo 45 grados */
.ld-accordion.is-open .ld-accordion-icon {
    transform: rotate(45deg);
    color: #00D4AA;
}

.ld-accordion.is-open .ld-accordion-title {
    color: #00D4AA;
}
/* HCA 20260724 NOSOTROS - 4 - FIN */

/* HCA 20260728 BOTONES SERVICIOS - INI */
/* --- ESTILO DE BOTÓN LLAMATIVO PARA EL MEGA-MENÚ --- */
.mega-menu .view-more {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #FF7A00; /* Color mandarina corporativo para llamar a la acción */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(255, 122, 0, 0.3);
}
.mega-menu .view-more:hover {
    background-color: #e06c00;
    transform: translateY(-2px); /* Pequeño efecto de elevación al pasar el cursor */
    box-shadow: 0 4px 10px rgba(255, 122, 0, 0.4);
}
/* HCA 20260728 BOTONES SERVICIOS - FIN */

/* HCA 20260728 - INI */

/* HCA 20260728 - FIN */

/* HCA 20260728 - INI - 1 */
/* --- SECCIÓN: NUESTRA EXPERIENCIA (ESTILO MINIMALISTA) --- */
.sectores-modern-section {
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
    font-family: 'Montserrat', 'Inter', 'Segoe UI', sans-serif;
}

.sectores-modern-container {
    display: flex;
    align-items: center;
    max-width: 1200px; /* Ajusta según el ancho de tu web */
    margin: 0 auto;
    padding: 80px 5%;
    gap: 50px;
}

/* --- COLUMNA IZQUIERDA (TEXTO) --- */
.sectores-text-side {
    flex: 0 0 35%; /* Ocupa el 35% del ancho */
    position: relative;
    z-index: 2;
}

.sectores-overline {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #718096; /* Gris profesional */
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.sectores-title {
    font-size: 32px;
    color: #0B1C33; /* Azul marino LD Panamerican */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.sectores-divider {
    width: 45px;
    height: 3px;
    background-color: #0B1C33; /* Pequeño subrayado azul marino */
}

/* --- COLUMNA DERECHA (CARRUSEL) --- */
/* --- COLUMNA DERECHA (CARRUSEL AUTOMÁTICO) --- */
.sectores-slider-side {
    flex: 1;
    position: relative;
    overflow: hidden; /* Oculta la barra de scroll nativa */
    padding: 40px 0;
    
    /* Efecto de difuminado: Evita el corte agresivo haciendo que los bordes sean transparentes */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 85%, transparent 100%);
}

.sectores-track {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    width: max-content; /* Permite que la pista crezca todo lo necesario */
    animation: slide-modern 30s linear infinite; /* Movimiento constante */
}

/* Pausar animación cuando el usuario pone el mouse para ver un sector */
.sectores-track:hover {
    animation-play-state: paused;
}

/* La línea sutil que conecta los círculos */
.sectores-track::before {
    content: '';
    position: absolute;
    top: 40px; /* Exactamente a la mitad de los círculos */
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, #E2E8F0 50%, transparent 50%);
    background-size: 12px 1px;
    z-index: 0;
}

/* --- ANIMACIÓN KEYFRAMES --- */
@keyframes slide-modern {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } /* Desplaza exactamente a la mitad (8 elementos + gaps) */
}

/* --- TARJETAS INDIVIDUALES --- */
.sector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: 100px;
}

.sector-circle {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Sombra muy suave por defecto */
    margin-bottom: 20px;
    transition: all 0.4s ease;
    color: #0B1C33; /* Íconos en azul marino */
}

.sector-circle svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: all 0.4s ease;
}

.sector-name {
    font-size: 14px;
    font-weight: 700;
    color: #0B1C33;
    text-align: center;
    transition: color 0.3s ease;
}

/* --- EFECTOS HOVER (INTERACCIÓN) --- */
.sector-item:hover .sector-circle {
    /* La sombra se vuelve naranja, dándole ese efecto de "luz" de tu imagen */
    box-shadow: 0 15px 35px rgba(255, 122, 0, 0.15); 
    transform: translateY(-5px); /* Se eleva un poco */
    color: #FF7A00; /* El ícono cambia al naranja de la empresa */
}

/* El punto indicador naranja debajo del texto (aparece al pasar el mouse) */
.sector-item::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 5px;
    height: 5px;
    background-color: #FF7A00;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.sector-item:hover::after {
    transform: translateX(-50%) scale(1);
}

/* --- RESPONSIVE (MÓVILES) --- */
@media (max-width: 992px) {
    .sectores-modern-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 5%;
        gap: 30px;
    }
    .sectores-text-side {
        flex: 1 1 100%;
        width: 100%;
    }
    .sectores-slider-side {
        width: 100%;
    }
}
/* HCA 20260728 - FIN - 1 */

/* HCA 20260731 - INI - 1 */
/* --- SECCIÓN BENEFICIOS HUNTING --- */
.hunting-benefits-section {
    background-color: #0B1C33; /* Azul marino oscuro LD Panamerican */
    padding: 100px 5%;
    font-family: 'Montserrat', 'Inter', 'Segoe UI', sans-serif;
    color: #ffffff;
    overflow: hidden;
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Encabezados */
.benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.benefits-title {
    font-size: 36px;
    font-weight: 700;
    color: #FF7A00; /* Naranja corporativo */
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.benefits-subtitle {
    font-size: 18px;
    color: #CBD5E1;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
}

/* Cuadrícula Bento */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

/* Tarjeta ancha para romper la simetría y darle un look moderno */
.card-wide {
    grid-column: 1 / -1; 
}

@media (min-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Hacemos que la tarjeta 4 y 5 ocupen espacios específicos para el diseño asimétrico */
    .benefits-grid > div:nth-child(4) { grid-column: span 1; }
    .benefits-grid > div:nth-child(5) { grid-column: span 2; }
}

/* Diseño de la Tarjeta */
.bento-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 0.3s ease, background 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 122, 0, 0.4); /* El borde se pinta ligeramente de naranja */
}

/* Contenido interno de la tarjeta */
.card-content {
    position: relative;
    z-index: 2; /* Para que quede por encima del efecto glow */
}

.card-icon {
    font-size: 32px;
    margin-bottom: 20px;
    display: inline-block;
    padding: 12px;
    background: rgba(255, 122, 0, 0.1);
    border-radius: 12px;
}

.bento-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.3;
}

.bento-card p {
    font-size: 15px;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
}

/* Microcopy (Footer de la sección) */
.benefits-footer {
    text-align: center;
    background: linear-gradient(90deg, rgba(255,122,0,0.05) 0%, rgba(255,122,0,0.15) 50%, rgba(255,122,0,0.05) 100%);
    border: 1px solid rgba(255, 122, 0, 0.2);
    padding: 25px;
    border-radius: 12px;
}

.benefits-footer p {
    font-size: 18px;
    color: #E2E8F0;
    margin: 0;
}

.benefits-footer strong {
    color: #FF7A00;
    font-weight: 700;
}

/* --- CLASES PARA ANIMACIONES JS --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto Glow que sigue al ratón */
.card-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,122,0,0.15) 0%, rgba(255,122,0,0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.bento-card:hover .card-glow {
    opacity: 1;
}
/* HCA 20260731 - FIN - 1 */