/* Tipografías y Base */
body { font-family: 'DM Sans', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }

/* header */
#site-header{
    background-color: #000;
}
#logo { width: 200px; height: 55px;}
.nav-link {
    color: #e9ecef;
    font-size: 18px;
}
.nav-link:hover{
    color: #e9ecef9d;
    transition: 0.5s;
}
#menu-toggle {
    color: #e9ecef;
    font-size: 24px;
}


/* Animaciones */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }

/* Gradiente del Hero */
.hero-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
}



/* Botones de Filtro */
.filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    background-color: #f3f4f6;
    color: #4b5563;
    transition: all 0.3s;
}
.filter-btn.active {
    background-color: #111827;
    color: white;
}

/* Efectos de la tarjeta del auto */
.car-card:hover { transform: translateY(-5px); }

/* menu toggle */



/* Menu mobile */
#mobile-menu {
    background-color: #000;
}

#mobile-menu .nav-link {
    color: #e9ecef;
    font-size: 18px;
}

#mobile-menu .nav-link:hover {
    color: #e9ecef9d;
}