/* GSN Colombia - Estilos Profesionales Independientes */

:root {
    --blue-gsn: #1e3a8a;
    --dark-gsn: #0f172a;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.hero-gradient {
    background: radial-gradient(circle at top right, var(--blue-gsn) 0%, var(--dark-gsn) 60%);
    background-color: var(--dark-gsn);
}

/* Logos - Tamaños Agrandados para visibilidad */
.logo-img-web {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.logo-img-mobile {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.logo-footer {
    height: 85px;
    width: auto;
    object-fit: contain;
}

/* Navegación - Estado Inicial Blanco Sólido */
#main-nav {
    background-color: #ffffff;
}

/* Navegación - Estado Scrolled (Transparencia) */
#main-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Colores de Enlaces en Nav */
#main-nav .nav-link, 
#main-nav #menu-btn {
    color: var(--dark-gsn);
    transition: color 0.3s ease;
}

#main-nav .nav-link:hover,
#main-nav .nav-link.active {
    color: var(--blue-gsn);
}

/* Animaciones */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

.card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (hover: hover) {
    .card-hover:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
    }
}

.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}