/* ==========================================================================
   FUNDACIÓN SAN VICENTE PEREIRA - ESTILOS PRINCIPALES
   ========================================================================== */

/* --- 1. VARIABLES GLOBALES --- */
:root {
    --fsv-azul: #0056b3;
    --fsv-azul-claro: #e7f1ff;
    --fsv-oro: #ffc107;
    --fsv-texto: #333333;
}

/* --- 2. CONFIGURACIÓN GENERAL --- */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--fsv-texto);
    line-height: 1.6;
    overflow-x: hidden;
}

.text-primary { color: var(--fsv-azul) !important; }
.bg-primary { background-color: var(--fsv-azul) !important; }
.btn-primary { background-color: var(--fsv-azul); border-color: var(--fsv-azul); }
.btn-primary:hover { background-color: #004494; border-color: #004494; }

.title-line {
    width: 60px;
    height: 4px;
    background: var(--fsv-oro);
    margin: 10px auto;
    border-radius: 2px;
}

/* --- 3. HEADER Y MENÚ DE NAVEGACIÓN --- */
.img-logo-nav {
    height: 65px; 
    transition: height 0.3s ease;
}

.hover-warning {
    transition: color 0.3s ease;
}
.hover-warning:hover {
    color: var(--fsv-oro) !important;
}

.nav-link:focus, .btn-close:focus, .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- 4. BANNERS PRINCIPALES (HERO) --- */
.hero-home {
    background: linear-gradient(rgba(0,40,80,0.75), rgba(0,40,80,0.75)), 
                url('https://cdn.shopify.com/s/files/1/0715/4748/6456/files/sfgsb.jpg?v=1758300409');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 90vh;
}

.animate-fade-in {
    animation: fadeInUp 1s ease forwards;
}

/* --- 5. TARJETAS Y EFECTOS --- */
.hover-up { transition: all 0.3s ease; }
.hover-up:hover { transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important; }

.icon-box {
    width: 80px; height: 80px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.bg-primary-light { background-color: var(--fsv-azul-claro); }
.bg-success-light { background-color: #e8f5e9; }
.bg-warning-light { background-color: #fff8e1; }

.grayscale { filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.grayscale:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

/* --- 6. GALERÍA --- */
.gallery-item { position: relative; cursor: pointer; }
.gallery-overlay {
    position: absolute; inset: 0; background: rgba(0, 86, 179, 0.7);
    opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item img { transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.1); }

/* --- 7. ANIMACIONES DE BOTONES --- */
.btn-donar-pulse {
    animation: pulse-animation 2s infinite;
    transition: transform 0.3s ease;
}
.btn-donar-pulse:hover { transform: scale(1.05); animation: none; }

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

@keyframes pulse-animation {
    0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 991px) {
    .img-logo-nav { height: 50px; }
    .offcanvas-body { padding-bottom: 2rem; }
    .hero-home {
        min-height: 70vh;
        background-attachment: scroll; 
    }
    .display-3 { font-size: 2.5rem; }
}