@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   ARQUITECTURA GLOBAL - DESIGN TOKENS (RODRIGUEZ & PEÑA)
   ========================================================================== */
:root {
    --primary-color: #121b25;    
    --secondary-color: #2c3e50;  
    --accent-color: #1b2a3a;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --white: #ffffff;
    --gold-corporate: #c5a059;
    --transition-smooth: all 0.3s ease;
}

/* RESERVA DE ESPACIO PARA EVITAR EL SALTO LATERAL DE PÁGINAS */
html {
    overflow-y: scroll;
}

/* ==========================================================================
   1. ARQUITECTURA DE FONDO UNIFICADA (ESTILO APPLE GLOBAL)
   ========================================================================== */
body {
    font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
    color: var(--text-dark);
    overflow-x: hidden;
    padding-top: 0; 
    line-height: 1.6;
    
    /* El lienzo claro continuo de fondo para todo el proyecto (Blanco seda satinado) */
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 50%, #eff2f5 100%) !important;
    background-attachment: fixed; /* Mantiene el fondo estático para potenciar el esmerilado de las tarjetas */
}

/* 
   EXCLUSIÓN INTELIGENTE: Volvemos transparentes los contenedores estándar 
   para heredar el degradado, pero PROTEGEMOS el inicio (.hero-section), el footer,
   o cualquier bloque intencionalmente oscuro (.bg-dark, .bg-primary)
*/
main, .main, .content-wrapper, .main-wrapper,
section:not(.hero-section):not(.bg-dark):not(.bg-primary):not([style*="background"]) {
    background: transparent !important;
}

/* 
   LA RAYA DIVISORIA DELGADA (ESTILO APPLE)
   Aparece de manera automática entre bloques estructurales claros.
   Evita cruzarse con el Hero o zonas oscuras para garantizar transiciones invisibles.
*/
section:not(.hero-section):not(.bg-dark):not(.bg-primary):not([style*="background"])::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%; /* Al ocupar el 80% centrado, da un look mucho más fino y pulido */
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(18, 27, 37, 0.07), transparent);
    pointer-events: none;
}

/* 2. CONTROL TOTAL DE TÍTULOS (Ahora unificados con Montserrat) */
h1, h2, h3, h4, h5, h6, .section-title, .hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700; /* Un grosor firme y marcado para que destaque como título */
    color: var(--primary-color);
    letter-spacing: -0.5px; /* Un pequeño ajuste profesional para que los títulos se vean compactos y estéticos */
}

/* El título principal del Home se verá imponente en grosor 800 */
.hero-title {
    font-weight: 800 !important;
}

/* Jerarquías responsivas globales */
h1, .display-4 { font-size: calc(1.5rem + 1.5vw) !important; }
h2 { font-size: calc(1.3rem + 1vw) !important; }

.footer-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--white);
}

/* ==========================================================================
   1. ARQUITECTURA DE FONDO UNIFICADA (ESTILO APPLE GLOBAL)
   ========================================================================== */
body {
    font-family: 'Montserrat', 'Segoe UI', sans-serif !important;
    color: var(--text-dark);
    overflow-x: hidden;
    padding-top: 0; 
    line-height: 1.6;
    
    /* El lienzo claro continuo de fondo para todo el proyecto (Blanco seda satinado) */
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 50%, #eff2f5 100%) !important;
    background-attachment: fixed; /* Mantiene el fondo estático para potenciar el esmerilado de las tarjetas */
}

/* EXCLUSIÓN INTELIGENTE */
main, .main, .content-wrapper, .main-wrapper,
section:not(.hero-section):not(.bg-dark):not(.bg-primary):not([style*="background"]) {
    background: transparent !important;
}

/* 2. CONTROL TOTAL DE TÍTULOS (Unificados con Montserrat) */
h1, h2, h3, h4, h5, h6, .section-title, .hero-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700; 
    color: var(--primary-color);
    letter-spacing: -0.5px; 
}

/* El título principal del Home se verá imponente en grosor 800 */
.hero-title {
    font-weight: 800 !important;
}

/* Jerarquías responsivas globales */
h1, .display-4 { font-size: calc(1.5rem + 1.5vw) !important; }
h2 { font-size: calc(1.3rem + 1vw) !important; }

.footer-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--white);
}


/* ==========================================================================
   ESTADOS DE CARGA INICIAL ELEGANTES (PRELOADER PREMIUM)
   ========================================================================== */

/* Contenedor principal que cubre toda la pantalla */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #121b25; /* Tu azul corporativo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Por encima de Navbars, modales y Bootstrap */
    opacity: 1;
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 0.6s ease, 
                visibility 0.6s;
}

/* Contenedor interno del logo */
.loader-content {
    text-align: center;
}

/* El contenedor <picture> no ocupa caja: clases y eventos siguen en el <img>. */
picture {
    display: contents;
}

/* El logotipo con animación Fade-In / Fade-Out suave */
.loader-logo {
    max-height: 100px; /* Ajusta el tamaño según se vea mejor */
    width: auto;
    animation: fadeParpadeo 2.5s infinite ease-in-out;
}

/* Definición del efecto difuminado sutil */
@keyframes fadeParpadeo {
    0%, 100% { opacity: 0.3; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
}

/* Clase de activación: Levanta el telón hacia arriba y desvanece */
#preloader.loaded {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

/* Evita que el usuario scrollee mientras la página está en negro cargando */
body.preloader-active {
    overflow: hidden !important;
}



/* Contenedor relativo obligado para que el brillo no se escape de la sección */
.hero-section, footer {
    position: relative;
    overflow: hidden;
}

/* El elemento del Brillo */
.cursor-glow-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Crucial: no interrumpe los clicks del usuario */
    z-index: 1;
    background: radial-gradient(
        250px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
        rgba(197, 160, 89, 0.15), /* Tu dorado corporativo #c5a059 rebajado */
        transparent 80%
    );
    transition: opacity 0.3s ease;
}

/* El contenido real del Hero debe quedar por encima del brillo */
.hero-content {
    position: relative;
    z-index: 2; 
}

/* Tarjeta Estilo Cristal Premium */
.glass-card {
    background: rgba(255, 255, 255, 0.75) !important; /* Blanco ultra translúcido */
    backdrop-filter: blur(12px); /* Filtrado de cristalería moderna */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(18, 27, 37, 0.08) !important; /* Borde inicial muy sutil */
    border-radius: 16px !important; /* Esquinas suavizadas estilo Bento */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
}

/* Efecto de Iluminación Dorada al pasar el mouse */
.glass-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.85) !important;
    
    /* Iluminación perimetral simulada con una sombra interna y externa de alta definición */
    border-color: rgba(197, 160, 89, 0.4) !important; /* Borde se vuelve dorado */
    box-shadow: 0 20px 40px rgba(18, 27, 37, 0.06), 
                0 0 15px rgba(197, 160, 89, 0.2) !important; /* Brillo dorado exterior */
}

/* ==========================================================================
   TARJETA ESTILO CRISTAL PREMIUM REVENTADO (TONO SEDA OSCURECIDO)
   ========================================================================== */
.glass-card {
    position: relative;
    z-index: 2;         
    
    /* Cambiamos a un tono seda grisáceo/azul sutil con opacidad equilibrada */
    background: rgba(235, 240, 245, 0.50) !important; 
    
    /* Desenfoque potente estilo Apple */
    backdrop-filter: blur(20px) !important; 
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Borde nítido que simula el reflejo del canto del vidrio */
    border: 1px solid rgba(255, 255, 255, 0.7) !important; 
    border-radius: 16px !important; 
    
    /* Sombra elegante y profunda */
    box-shadow: 0 10px 30px rgba(18, 27, 37, 0.05) !important;
    
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s ease, 
                background-color 0.4s ease,
                border-color 0.4s ease !important;
                
    transform-style: preserve-3d;
    perspective: 1000px; 
    
    /* Asegura que el regreso a la posición original al quitar el mouse sea suave */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;

}

/* Microinteracción al pasar el cursor (Hover) */
.glass-card:hover {
    transform: translateY(-8px);
    
    /* El cristal se aclara y gana brillo al acercar el mouse */
    background: rgba(255, 255, 255, 0.75) !important;
    
    /* El borde se enciende en tu dorado corporativo traslúcido */
    border-color: rgba(197, 160, 89, 0.5) !important; 
    
    /* Halo dorado expansivo en la base */
    box-shadow: 0 20px 40px rgba(18, 27, 37, 0.08), 
                0 0 25px rgba(197, 160, 89, 0.18) !important; 
}



/* Color optimizado para los textos secundarios dentro de las tarjetas de cristal */
.glass-card p, .glass-card .text-secondary {
    color: #4a5568 !important; /* Un gris pizarra elegante que se lee perfecto en el cristal claro */
    font-weight: 500;
}

/* Color para los títulos de las tarjetas de cristal */
.glass-card h4, .glass-card h3 {
    color: var(--primary-color) !important;
    font-weight: 700;
}



/* Estilo elegante para el badge de especialidad CORE */
.text-gold {
    color: #c5a059 !important;
}



/* ==========================================================================
   ESTRUCTURA BASE DE BOTONES LÍQUIDOS (OPTIMIZACIÓN DE COBERTURA, COLOR Y CURVAS)
   ========================================================================== */
.btn-premium-liquid {
    position: relative;
    display: inline-block;
    inline-size: max-content;
    padding: 12px 32px;
    
    /* MODIFICACIÓN: Curvatura moderna de 10px para eliminar esquinas puntiagudas con elegancia */
    border-radius: 10px !important; 
    
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    overflow: hidden; /* Recorta la gota expansiva de forma perfecta dentro de las esquinas curvas */
    z-index: 1;
    cursor: pointer;
    text-decoration: none !important;
    
    /* Añadimos transform a la transición para que la elevación sea una seda */
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* Ajuste de proporciones para botones grandes de impacto (Como los del Hero) */
.btn-premium-liquid.btn-lg {
    padding: 14px 36px !important;
    font-size: 0.95rem !important;
}

/* Microinteracción de elevación que acompaña la inundación del líquido */
.btn-premium-liquid:hover {
    transform: translateY(-2px);
}

/* La gota interna (Subimos a 600px en el hover para asegurar llenado completo) */
.btn-premium-liquid .liquid-drop {
    position: absolute;
    background: #c5a059 !important; /* Tu dorado corporativo */
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Usamos un cubic-bezier un poco más reactivo para que la inundación sea fluida */
    transition: width 0.5s cubic-bezier(0.1, 0.8, 0.25, 1), height 0.5s cubic-bezier(0.1, 0.8, 0.25, 1);
    z-index: -1; 
}

/* Al hacer HOVER, la gota se agiganta para cubrir absolutamente todas las esquinas */
.btn-premium-liquid:hover .liquid-drop {
    width: 600px;
    height: 600px;
}


/* 🔵 VARIANTE 1: BOTÓN AZUL CORPORATIVO */
.btn-premium-liquid.btn-azul {
    background-color: #121b25 !important;
    color: #ffffff !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    box-shadow: 0 4px 15px rgba(18, 27, 37, 0.15);
}

.btn-premium-liquid.btn-azul:hover {
    color: #121b25 !important; /* Contraste oscuro excelente sobre el fondo dorado */
    border-color: #c5a059 !important;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
}


/* ⚪ VARIANTE 2: BOTÓN BLANCO PREMIUM (¡Ahora Blanco Puro y Sólido!) */
.btn-premium-liquid.btn-blanco {
    background-color: #ffffff !important; /* Blanco 100% sólido, eliminamos el gris translúcido */
    color: #121b25 !important; /* Texto en tu azul oscuro para máxima legibilidad */
    border: 1px solid rgba(18, 27, 37, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.btn-premium-liquid.btn-blanco:hover {
    color: #ffffff !important; /* ¡OJO AQUÍ!: Cambiamos el texto a BLANCO al inundarse de dorado para que se lea perfecto */
    border-color: #c5a059 !important;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
}

/* ==========================================================================
   SISTEMA DE CHAT CONVERSACIONAL PREMIUM (ESTILO FINTUAL / CONSISTENTE)
   ========================================================================== */

/* Contenedor Padre Global: Fijo y consistente en CUALQUIER tamaño de pantalla */
.chat-orientacion-container {
    position: fixed !important;
    bottom: 20px !important;  /* Distancia perfecta al borde inferior */
    right: 20px !important;   /* Distancia perfecta al borde derecho */
    display: flex;
    flex-direction: column;
    align-items: flex-end;    /* Alineación rígida a la derecha */
    gap: 12px;                /* Espaciado controlado con el botón */
    z-index: 999999 !important; /* Capa superior absoluta sobre Navbars y Modales */
}

/* Botón disparador circular */
.btn-chat-flotante {
    width: 60px;
    height: 60px;
    background-color: #121b25;
    font-size: 1.5rem;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-chat-flotante:hover {
    transform: scale(1.05);
    background-color: #121b25;
}

/* Ventana del Chat: Geometría fija inspirada en Fintual */
.chat-ventana.chat-fintual-style {
    position: relative;
    width: 350px;             /* Ancho ideal que no invade el Viewport */
    height: 500px;            /* Altura fija estándar */
    max-height: calc(100vh - 110px); /* Garantiza espacio libre arriba y abajo en pantallas cortas */
    background: #ffffff;
    border: 1px solid rgba(18, 27, 37, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    animation: chatApparition 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Encabezado e Imagen Corporativa */
.chat-header-logo {
    max-height: 26px;
    width: auto;
}

.chat-header-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-header-greeting {
    font-size: 1.25rem !important;
    font-weight: 700;
    color: #121b25;
}

/* Caja de Mensajes con Scroll Interno Mandatorio */
.chat-body-messages {
    flex-grow: 1;
    overflow-y: auto;         /* Habilita el scroll interno si el contenido excede la caja */
    background-color: #f8f9fa;
    scroll-behavior: smooth;
}

/* Burbujas de chat */
.msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.85rem;
    max-width: 78%;
    line-height: 1.4;
}

.msg-bot {
    background-color: #e9ecef;
    color: #121b25;
    border-bottom-left-radius: 4px;
}

.msg-user {
    background-color: #121b25;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

/* Opciones Rápidas en el Footer */
.btn-chat-option {
    background-color: #ffffff;
    color: #121b25;
    border: 1px solid rgba(18, 27, 37, 0.1);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-chat-option:hover {
    background-color: #f1f3f5;
}

.chat-footer-tabs .tab-item {
    color: #95a5a6;
    font-size: 0.72rem;
}
.chat-footer-tabs .tab-item.active {
    color: #121b25;
    font-weight: 600;
}

@keyframes chatApparition {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   ADAPTACIÓN PARA TELÉFONOS MUY PEQUEÑOS (PANTALLAS < 400px ANCHO)
   ========================================================================== */
@media (max-width: 400px) {
    .chat-ventana.chat-fintual-style {
        width: calc(100vw - 40px); /* Ajuste elástico para que no rompa los bordes en iPhone SE antiguos */
    }
}

#asistente-virtual-container, 
.tu-clase-del-boton-asistente {
    position: fixed !important;   /* Obliga a quedarse quieto en la pantalla del monitor */
    bottom: 30px;                /* Distancia desde el borde inferior */
    right: 30px;                 /* Distancia desde el borde derecho */
    z-index: 99999 !important;   /* Lo pone por encima de absolutamente cualquier capa horizontal */
}


/* ==========================================================================
   SISTEMA DE SCROLLBAR CORPORATIVO DETERMINISTA
   ========================================================================== */

/* Configuración para navegadores basados en WebKit (Chrome, Safari, Edge, Brave) */
::-webkit-scrollbar {
    width: 10px;               /* Ancho de la barra vertical */
    height: 10px;              /* Alto de la barra horizontal (si existiera) */
}

/* El carril o fondo por donde se desliza la barra */
::-webkit-scrollbar-track {
    background: #f4f6f7;       /* Gris claro a juego con el lienzo continuo del body */
}

/* La barra arrastrable (El "puntero") */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color, #121b25); /* Tu azul corporativo */
    border-radius: 20px;       /* Bordes perfectamente suavizados */
    border: 2px solid #f4f6f7; /* Margen interno para dar un efecto flotante elegante */
    transition: background-color 0.2s ease;
}

/* Cambio de color sutil al pasar el mouse por encima */
::-webkit-scrollbar-thumb:hover {
    background-color: #1b2a3a; /* Un tono un poco más claro o puedes usar el dorado #c5a059 si quieres contraste */
}

/* Soporte estandarizado para Firefox */
@supports (scrollbar-color: auto) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #c5a059 #f4f6f7;
    }
}

/* Elimina la línea divisoria automática que cruza el título de servicios */
.services-overview::after {
    display: none !important;
}

section:not(.hero-section):not(.bg-dark):not(.bg-primary):not([style*="background"])::after {
    content: none !important; /* Elimina el elemento por completo */
    display: none !important;
}
/* Estilos para enlaces del Footer */
.small-hover-gold {
    transition: color 0.2s ease;
}
.small-hover-gold:hover {
    color: #c5a059 !important; /* Dorado Corporativo */
}

/* Estilos base del texto legal dentro del modal de contacto */
.modal .legal-document {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2c3e50;
}

.modal .legal-document h2,
.modal .legal-document h6 {
    font-size: 1rem !important;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: #121b25;
}

.modal .legal-document h2:first-child,
.modal .legal-document h6:first-child {
    margin-top: 0;
}

/* Banner Flotante de Privacidad / Cookies */
.privacy-notice-box {
    position: fixed !important;
    bottom: 25px;
    left: 25px;
    max-width: 380px;
    background: rgba(18, 27, 37, 0.95); /* Azul corporativo oscuro */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(197, 160, 89, 0.4); /* Borde dorado corporativo */
    border-radius: 14px;
    padding: 20px;
    z-index: 999999 !important; /* Asegura estar sobre el contenido */
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Estilos de los botones del banner */
#btn-accept-privacy {
    background-color: #c5a059;
    color: #121b25;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

#btn-accept-privacy:hover {
    background-color: #d4af66;
}

#btn-reject-privacy {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

#btn-reject-privacy:hover {
    border-color: #c5a059;
    color: #c5a059;
}