/* --- CONFIGURACIÓN BASE --- */
:root {
    --primary-red: #e63946;
    --primary-orange: #f4a261;
    --dark-bg: #0d1117;
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

html {
    scroll-behavior: auto; /* Desactivado scroll suave nativo porque es SPA */
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden; /* Evita scroll horizontal en móviles */
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary-red); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b91c1c; }

/* --- UTILIDADES VISUALES --- */
.content-section.active {
    display: block; /* Solo se muestra la sección con clase active */
}

.nav-btn.active-nav {
    color: var(--primary-orange);
    border-bottom: 2px solid var(--primary-orange);
}

/* --- ANIMACIONES --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-bounce-slow { animation: bounceSlow 3s infinite; }

@keyframes modalEntry {
    from { opacity: 0; transform: scale(0.95) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modalEntry { animation: modalEntry 0.3s ease-out forwards; }

/* --- COMPONENTES --- */
/* Hero background */
#hero-carousel {
    background-image: url('https://images.unsplash.com/photo-1514525253440-b393452e8d26?q=80&w=1974&auto=format&fit=crop'); /* Imagen por defecto */
}

/* Whatsapp Bubble */
.whatsapp-bubble {
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: var(--transition-smooth);
}
.whatsapp-bubble:hover { transform: scale(1.1) rotate(10deg); }

/* Artist Card */
.artist-card {
    transition: var(--transition-smooth);
    backface-visibility: hidden;
}
.artist-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.15);
}

/* Estilo para imágenes dentro del modal */
.modal-img-frame {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: 4px solid #fff;
    background: #f8fafc;
}