/* --- style.css --- */

/* 1. IMPORTAR LA FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* 2. APLICAR FUENTE (Tipografía) */
body {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.display-3,
.fw-bold,
.card-title,
.btn {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

/* 3. APLICAR COLOR PRIMARIO (#007c00) */

.btn-primary {
    background-color: #007c00;
    border-color: #007c00;
}

.btn-primary:hover {
    background-color: #005a00;
    border-color: #005a00;
}

.text-primary {
    color: #007c00 !important; 
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-brand:hover {
    color: #007c00;
}

.text-success,
.border-success {
    color: #007c00 !important;
    border-color: #007c00 !important;
}

.text-success .bi-check-circle-fill,
.text-success .bi-check-circle {
     color: #007c00 !important;
}

/* 4. ESTILO DEL HERO (Spotlight) */
.hero-section {
    background-color: #212529;
    background-image: radial-gradient(
        circle 1200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 124, 0, 0.25),
        transparent 80%
    );
    background-repeat: no-repeat;
    
    height: 70vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: background 0.1s ease-out;
}