/* ==========================================================================
   Variables Globales de la Marca
   ========================================================================== */
:root {
    --primary-blue: #2B579A; /* Azul corporativo oscuro */
    --secondary-blue: #5C8EC8; /* Azul claro */
    --light-bg: #F8F9FA;
    --dark-text: #2C3E50; /* Un gris oscuro elegante, mejor que el negro puro */
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 15px 30px rgba(0,0,0,0.1);
    --transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   Configuración General
   ========================================================================== */
html { 
    scroll-behavior: smooth; /* Desplazamiento fluido en anclas */
}

body { 
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
    color: var(--dark-text);
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes en pantallas HD */
    background-color: var(--light-bg);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.5px; /* Aspecto más compacto y moderno para títulos */
}

/* ==========================================================================
   Barra de Navegación (Navbar)
   ========================================================================== */
.navbar { 
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Efecto cristal moderno si el nav es sticky */
    box-shadow: 0 2px 15px rgba(0,0,0,0.08); 
    padding: 0.8rem 0;
    transition: var(--transition);
}

.nav-link { 
    color: var(--dark-text) !important; 
    font-weight: 600; 
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: var(--transition);
}

/* Animación de línea inferior en el menú */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary-blue);
    transition: var(--transition);
    transform: translateX(-50%);
    border-radius: 5px;
}

.nav-link:hover { color: var(--primary-blue) !important; }
.nav-link:hover::after { width: 80%; }

/* ==========================================================================
   Clases de Utilidad y Componentes
   ========================================================================== */
.bg-primary-custom { background-color: var(--primary-blue) !important; color: white; }
.text-primary-custom { color: var(--primary-blue) !important; }

/* Tarjetas de Servicio interactivas */
.service-card { 
    border: 1px solid rgba(0,0,0,0.03); 
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: var(--transition); 
}

.service-card:hover { 
    transform: translateY(-8px); 
    box-shadow: var(--shadow-md); 
    border-color: rgba(43, 87, 154, 0.1); /* Destello sutil azul en el borde */
}

/* Botones Premium */
.btn-custom { 
    background-color: var(--primary-blue); 
    color: white; 
    border-radius: 50px; 
    padding: 12px 32px; 
    font-weight: 600;
    border: 2px solid var(--primary-blue);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(43, 87, 154, 0.3);
}

.btn-custom:hover { 
    background-color: transparent; 
    color: var(--primary-blue);
    box-shadow: none;
    transform: translateY(-2px);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer { 
    background-color: var(--primary-blue); 
    color: rgba(255, 255, 255, 0.9); 
    border-top: 5px solid var(--secondary-blue);
}

footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: #ffffff;
    padding-left: 5px; /* Pequeño desplazamiento a la derecha al pasar el ratón */
}

/* ==========================================================================
   Botón Flotante de WhatsApp (Orientado a Conversión)
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    width: 65px;
    height: 65px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
    animation: pulse-whatsapp 2s infinite; /* Efecto latido */
}

.whatsapp-float:hover { 
    transform: scale(1.1) translateY(-5px); 
    color: white; 
    animation: none; /* Se detiene al pasar el cursor */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5);
}

/* Animación Keyframes para el latido */
@keyframes pulse-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Adaptación para pantallas de teléfonos móviles */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 30px;
    }
}