/* Tailwind y fuentes se mantienen en el HTML. Este archivo contiene solo los estilos personalizados. */
:root {
    --background-dark: #000000;
    --background-light: #FFFFFF;
    --text-light: #F0F2F5;
    --text-dark: #1c1c1e;
    --glass-bg-light: rgba(255, 255, 255, 0.1);
    --glass-bg-dark: rgba(10, 10, 10, 0.3);
    --border-light: rgba(255, 255, 255, 0.15);
    --border-dark: rgba(255, 255, 255, 0.1);
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-light);
    overflow-x: hidden;
}
.font-anton {
    font-family: 'Anton', sans-serif;
}
.liquid-glass {
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
}
.header-on-light .liquid-glass,
#scrollTopBtn.btn-on-light {
    background: var(--glass-bg-dark);
    border-color: var(--border-dark);
    color: var(--text-light);
}
.header-on-light h1, .header-on-light .material-icons, .header-on-light nav a {
    color: var(--text-light) !important;
    text-shadow: none;
}
.hero-bg {
    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDMDXDKmoK3Q68Q6yZ4fe5PWL5j-suJbgy6KZ-2eKHgJhiw1K691mOt3SMEXebeKtyb1UiaaOuFIfuYZKX2BSt62VVvl1aLFrRkDlzxHaeIjYJNTtbKpwe7tDj3EwnXPp6B30_U8hFTPIU2V0S-zl4A04pF7mcb9zH91pFD-ITy8myRWNW8u5l824RHG5AuKBbN2RTKK0FwSU0LlKwhc0nLHcnUBDzGhVQKpd-OUKlvR9VozXmsVJ31FvwgOCbHZ_FVfRIFcq2l8N8');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
/*.text-glow {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.4);
}*/
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
#scrollTopBtn {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}

/* Estilos para cards de música */
.music-grid {
    align-items: stretch;
}
.music-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    background: rgba(20,20,20,0.7);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.music-card .card-bg {
    z-index: 1;
    opacity: 1;
    filter: blur(18px) brightness(1.1);
    background-image: var(--card-bg-url);
}
.music-card .play-btn {
    transition: transform 0.2s;
}
.music-card .play-btn:hover {
    transform: scale(1.15);
}
.music-card span {
    z-index: 2;
}
#scrollTopBtn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}