:root {
    --bs-primary: #8E44AD; /* Un tono de púrpura para un toque mágico */
    --bs-secondary: #F39C12; /* Naranja como acento brillante */
    --bs-tertiary: #ECF0F1; /* Gris claro para fondos */
    --bs-light: #FDFEFE; /* Blanco suave */
    --bs-dark: #2C3E50; /* Azul oscuro para texto */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bs-tertiary);
    color: var(--bs-dark);
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--bs-primary);
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: #7D3C98;
    border-color: #7D3C98;
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-light);
}

.btn-secondary:hover {
    background-color: #E67E22;
    border-color: #E67E22;
}

.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/b12.jpg') no-repeat center center;
    background-size: cover;
    min-height: 80vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link.active, .nav-link:hover {
    color: var(--bs-secondary) !important;
}

.feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}