:root {
    --bg-color: #010101;
    --accent-color: #FE7733;
    --accent-light: #FF8F50;
    --accent-dark: #E65A15;
    --accent-deep: #B84200;
    --text-color: #b2b2b2;
    --discovery-easing: cubic-bezier(0.22, 1, 0.36, 1.22);
    --return-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --discovery-speed: 1.1s;
    --return-speed: 0.8s;
    --fast-speed: 0.5s;
    --fast-easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Modular Scale 1.25 (Major Third) */
    --font-xs: 0.64rem;
    --font-sm: 0.8rem;
    --font-base: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.563rem;
    --font-2xl: 1.953rem;
    --font-3xl: 2.441rem;
    --font-4xl: 3.052rem;
}

/* Force dynamic viewport for mobile Safari */
:root {
    --vh: 1vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

body::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Desktop container restraint */
#app-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport for modern browsers */
    position: relative;
    background: #000;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    overflow: hidden;

    /* Global scrollbar prohibition */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#app-container::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none;
}

/* Slider mechanism */
#slider-wrapper {
    display: flex;
    width: 300%;
    height: 100%;
    transform: translateX(-33.333333%);
    will-change: transform;
    
    /* Default states use discovery style */
    --current-speed: var(--discovery-speed);
    --current-easing: var(--discovery-easing);
    transition: transform var(--current-speed) var(--current-easing),
                opacity 0.6s ease;
}

/* Hub shifting for return effect (The Hub starts slightly Right ONLY when menu is open) */
body.menu-open #slider-wrapper {
    transform: translateX(calc(-33.333333% + 15%)) !important;
    opacity: 0.6;
}

#slider-wrapper.is-returning {
    /* Return states use snappy style */
    --current-speed: var(--return-speed);
    --current-easing: var(--return-easing);
}

#slider-wrapper.is-fast-return {
    --current-speed: var(--fast-speed);
    --current-easing: var(--fast-easing);
}

.slide {
    width: 33.333333%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Section Backgrounds */
#slide-left {
    background-image: linear-gradient(to bottom, rgba(1,1,1,0.3), rgba(1,1,1,0.3)), url('landing-page-esquerda.webp');
}

#slide-center {
    background: none; /* Background is now inside the sections */
}

/* Vertical Hub Logic */
#vertical-hub-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

#hub-main {
    background-image: linear-gradient(to bottom, rgba(1,1,1,0.3), rgba(1,1,1,0.3)), url('landing-page-1.webp');
}

#hub-bottom {
    background-image: linear-gradient(to bottom, rgba(1,1,1,0.3), rgba(1,1,1,0.3)), url('landing-page-baixo.webp');
    background-position: top center !important; /* Ensure content is visible in preview */
    background-color: #121212; /* Fallback */
}

#hub-vplayer {
    height: 100vh;
    height: 100dvh; 
    overflow-y: scroll;
    background: radial-gradient(circle at 50% 40%, var(--accent-light) 0%, var(--accent-dark) 60%, var(--accent-deep) 120%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    z-index: 23; /* Consistent with other hub-sections */
}

#hub-vplayer::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* GLOBAL Section Spacer for Consistency (Desktop & Mobile) */
.section-spacer {
    height: 100px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* PARENT WRAPPER - Must be solid to hide ghosting sections underneath */
#vertical-hub-wrapper {
    background: #000;
    --transition-easing: var(--discovery-easing);
    --transition-speed: var(--discovery-speed);
}

.hub-section {
    position: absolute;
    top: -1px; /* Slighly overlap top to avoid pixel gap */
    left: 0;
    width: 100%;
    height: calc(100vh + 2px);
    height: calc(100dvh + 2px);
    
    /* Use local scope variables for vertical too */
    --current-speed: var(--discovery-speed);
    --current-easing: var(--discovery-easing);
    transition: transform var(--current-speed) var(--current-easing);
    will-change: transform;
    z-index: 10;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.4); /* Premium separation for layered sections */
}

#vertical-hub-wrapper.is-returning {
    --current-speed: var(--return-speed);
    --current-easing: var(--return-easing);
}

#vertical-hub-wrapper.is-returning .hub-section,
#vertical-hub-wrapper.on-vplayer .hub-section {
    --current-speed: var(--return-speed);
    --current-easing: var(--return-easing);
}

#vertical-hub-wrapper.is-fast-return .hub-section {
    --current-speed: var(--fast-speed);
    --current-easing: var(--fast-easing);
}

/* PINNING SYSTEM: Sections stack dynamically to create a connected feel */
/* By staggering their offscreen positions, they move as a cohesive "train" during elastic jumps */
/* Each vh offset below is followed by a dvh redeclaration (same progressive-enhancement
   pattern as .hub-section's height), closing the gap iOS Safari leaves when its URL bar is visible. */
#hub-main    { z-index: 20; transform: translateY(0); }   /* Base layer */
#hub-white   { z-index: 21; transform: translateY(100vh); transform: translateY(100dvh); }
#hub-bottom  { z-index: 22; transform: translateY(200vh); transform: translateY(200dvh); }
#hub-vplayer { z-index: 23; transform: translateY(300vh); transform: translateY(300dvh); }

/* STATE: ON MAIN HUB */
#vertical-hub-wrapper.on-top #hub-main { transform: translateY(0); }
#vertical-hub-wrapper.on-top #hub-white { transform: translateY(100vh); transform: translateY(100dvh); }
#vertical-hub-wrapper.on-top #hub-bottom { transform: translateY(200vh); transform: translateY(200dvh); }
#vertical-hub-wrapper.on-top #hub-vplayer { transform: translateY(300vh); transform: translateY(300dvh); }

/* STATE: ON WHITE (Sequential move to avoid ghosting sections) */
#vertical-hub-wrapper.on-white #hub-main { transform: translateY(-100vh); transform: translateY(-100dvh); } 
#vertical-hub-wrapper.on-white #hub-white { transform: translateY(0); }
#vertical-hub-wrapper.on-white #hub-bottom { transform: translateY(100vh); transform: translateY(100dvh); }
#vertical-hub-wrapper.on-white #hub-vplayer { transform: translateY(200vh); transform: translateY(200dvh); }

/* STATE: ON BOTTOM */
#vertical-hub-wrapper.on-bottom #hub-main { transform: translateY(-200vh); transform: translateY(-200dvh); }
#vertical-hub-wrapper.on-bottom #hub-white { transform: translateY(-100vh); transform: translateY(-100dvh); }
#vertical-hub-wrapper.on-bottom #hub-bottom { transform: translateY(0); }
#vertical-hub-wrapper.on-bottom #hub-vplayer { transform: translateY(100vh); transform: translateY(100dvh); }

/* STATE: ON VPLAYER */
#vertical-hub-wrapper.on-vplayer #hub-main { transform: translateY(-300vh); transform: translateY(-300dvh); }
#vertical-hub-wrapper.on-vplayer #hub-white { transform: translateY(-200vh); transform: translateY(-200dvh); }
#vertical-hub-wrapper.on-vplayer #hub-bottom { transform: translateY(-100vh); transform: translateY(-100dvh); }
#vertical-hub-wrapper.on-vplayer #hub-vplayer { transform: translateY(0); }

/* TERMINAL SECTION BUFFER */
/* Since Section 4 is the final section, there is no "Section 5" below it to pull sequentially. */
/* We simulate the endless pull by attaching an orange shadow buffer to cover the gap during the bounce. */
#hub-vplayer { box-shadow: 0 -20px 40px rgba(0,0,0,0.4), 0 35vh 0 0 var(--accent-deep) !important; }

#slide-right {
    background-image: linear-gradient(to bottom, rgba(1,1,1,0.3), rgba(1,1,1,0.3)), url('landing-page-direita.webp');
}

/* Burger Menu Styling */
#burger-menu {
    position: fixed;
    top: 32px;
    left: calc(50% - 240px + 24px); /* Align with top-left of the 480px container */
    z-index: 100000; /* Ultra high */
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px; /* Bigger touch target */
    margin: -15px; 
    box-sizing: content-box; /* Prevent padding from collapsing the flex layout */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#burger-menu.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Visibility rules using Body classes */
body.is-page-open #burger-menu,
body.is-page-open #pagination-dots,
body.is-menu-hidden #burger-menu {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important; /* Force removal from flow */
}

/* Sub-page Global Styles (Previously lost in head) */
.standalone-header {
    position: absolute;
    top: 2rem; /* 32px */
    left: 2rem;
    z-index: 100;
}

.standalone-back-btn {
    background: none;
    border: none;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: var(--font-base);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* 8px system */
    transition: color 0.3s, opacity 0.3s;
}

.standalone-back-btn:hover {
    color: var(--accent-color);
}

.back-chevron-icon {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--accent-color);
    border-left: 2px solid var(--accent-color);
    transform: rotate(-45deg);
    animation: bounceLeft 2s infinite;
    margin-right: 4px;
    display: inline-block;
    transition: border-color 0.3s;
}

@keyframes bounceLeft {
    0%, 20%, 50%, 80%, 100% { transform: rotate(-45deg) translate(0, 0); }
    40% { transform: rotate(-45deg) translate(-4px, -4px); }
    60% { transform: rotate(-45deg) translate(-2px, -2px); }
}

.spa-page-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 128px 2rem 96px 2rem; /* 128, 32, 96 are 8px multiples */
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 64px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.spa-page-container::-webkit-scrollbar { display: none; }
.spa-page-container img { max-width: 100%; height: auto; }

/* Hide MP3 player ONLY when main navigation menu is open (to avoid icon overlap) */
body.menu-open #floating-player-container {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#burger-menu span {
    display: block;
    width: 100%;
    height: 3px; /* Stronger presence */
    background: #fe7733 !important; /* High-visibility Orange */
    box-shadow: 0 0 10px rgba(254, 119, 51, 0.4); /* Glow */
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, background 0.3s ease;
    transform-origin: center;
}

/* Pulsating Hover Effect */
#burger-menu:hover {
    animation: pulse 1.5s infinite ease-in-out;
}

#burger-menu.is-open {
    animation: none; /* Stop pulsing if menu is open */
}

#burger-menu:hover span {
    background: var(--accent-color); /* Changes to accent color on hover */
    box-shadow: 0 0 10px var(--accent-color); /* Neon glow effect */
}

/* Transform to X when Open */
#burger-menu.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background: #fff; /* Force white for dark overlay */
}
#burger-menu.is-open span:nth-child(2) {
    opacity: 0;
}
#burger-menu.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background: #fff;
}

/* Ensure the X also turns neon orange and pulses when hovered! */
#burger-menu.is-open:hover {
    animation: pulse 1.5s infinite ease-in-out;
}
#burger-menu.is-open:hover span:nth-child(1),
#burger-menu.is-open:hover span:nth-child(3) {
    background: #000 !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); /* Deep shadow replacing neon glow */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Only visible in Center */
#burger-menu:not(.visible) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

/* Navigation Hints (Direction Indicators) */
.scroll-hint {
    position: absolute;
    bottom: 2rem; /* Uniform position for all sections */
    left: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 101;
}

.scroll-hint.visible {
    opacity: 1;
}

.scroll-pill {
    width: 28px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-icon {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.8);
    animation: scroll-bounce 2s infinite ease-in-out !important;
    will-change: transform;
}

.scroll-icon-up {
    width: 20px; /* Scaling up slightly for better visibility */
    height: 20px;
    color: var(--accent-color);
    filter: drop-shadow(0 0 5px var(--accent-color));
    animation: scroll-bounce-up 2s infinite ease-in-out !important;
    will-change: transform;
}

@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(6px); }
    60% { transform: translateY(3px); }
}

@keyframes scroll-bounce-up {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    60% { transform: translateY(-3px); }
}

/* Sound Bars (Restored for Landing Page) */
.wave.mini {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.mini .bar {
    width: 2px;
    background: #FE7733;
    border-radius: 1px;
    animation: wave-mini 1s infinite ease-in-out;
}

@keyframes wave-mini {
    0%, 100% { height: 4px; }
    50% { height: 12px; }
}

.mini .bar:nth-child(2) { animation-delay: 0.1s; }
.mini .bar:nth-child(3) { animation-delay: 0.2s; }
.mini .bar:nth-child(4) { animation-delay: 0.3s; }
.mini .bar:nth-child(5) { animation-delay: 0.4s; }

/* Combined and enforced wave animation */
.wave.mini .bar {
    animation: wave-mini 1s infinite ease-in-out !important;
    will-change: height;
}

/* Section 4 Footer Area - The final black grounded section */
.vplayer-footer {
    width: 100%;
    background-color: #000; /* Absolute black as requested */
    margin-top: 3rem; /* Decent gap from the last video for a cleaner transition */
    padding: 4rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: end; /* Forces both grid items to the absolute bottom baseline */
    padding: 3.5rem 1.5rem calc(3.5rem + env(safe-area-inset-bottom, 20px)); /* Explicit bottom clearance */
    max-width: 480px;
    margin: 0 auto;
}

/* Home Button Positioning inside the new footer */
.vplayer-footer .scroll-hint.home-hint {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0 !important;
    width: auto; 
    height: auto !important; /* Critical fix: previously inherited height: 80px from .scroll-hint */
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 0; 
}

.vplayer-footer .scroll-pill {
    margin-bottom: 0 !important; /* Found the culprit: standard pill had 30px margin-bottom */
}

/* CTA BLOCK STYLES */
.cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 12px;
}

.cta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cta-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: var(--font-base); /* Increased from 13px */
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1.25;
}

.cta-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: var(--font-sm); /* Increased from 10px */
    color: rgba(255, 255, 255, 0.6); /* Slightly brighter for better contrast on black */
    margin: 0;
    letter-spacing: 0.3px;
}

.cta-action-btn {
    background: var(--accent-dark); /* Brand orange */
    color: #000;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: var(--font-sm); /* Balanced with the new title size */
    padding: 10px 24px;
    border-radius: 30px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 90, 21, 0.2);
}

.cta-action-btn:hover {
    transform: translateY(-2px);
    background-color: var(--accent-light);
    box-shadow: 0 6px 20px rgba(230, 90, 21, 0.3);
}

.vplayer-footer .scroll-hint.home-hint .scroll-label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 3px;
    margin-right: -3px; /* Compensate for tracking to center text */
}

/* Light background variant (for Section 2) */
#hub-white .scroll-hint .scroll-pill {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}
#hub-white .scroll-hint .scroll-icon {
    color: rgba(0, 0, 0, 0.5);
}
#hub-white .scroll-hint .scroll-label {
    color: rgba(0, 0, 0, 0.4);
}

.scroll-label {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--bg-color);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    animation: pulse-label 2s infinite ease-in-out;
    margin-top: 5px;
}

@keyframes pulse-label {
    0%, 100% { 
        color: var(--bg-color);
        opacity: 0.5;
    }
    50% { 
        color: var(--accent-color);
        opacity: 1;
    }
}

.scroll-text {
    font-size: var(--font-xs);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62); /* >=4.5:1 on black (WCAG AA for small text) */
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    animation: pulse-text 2s infinite ease-in-out;
}

@keyframes scroll-dot-move {
    0% { transform: translate(-50%, 0); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: translate(-50%, 18px); opacity: 0.5; }
    100% { transform: translate(-50%, 25px); opacity: 0; }
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Player Card (Spotify Style) */
#hub-white {
    background: #ffffff radial-gradient(circle at 50% 50%, #ffffff 0%, #e1e1e1 60%, #b2b2b2 120%);
    overflow: hidden;
    width: 100%;
    /* Layout: cards block centered above VER MAIS hint */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hub-white .section-header {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 0;
    pointer-events: none;
}

/* 
 * The 5 cards live here.
 * flex: 1 makes it fill ALL space between top and the VER MAIS hint.
 * justify-content: center vertically centers the card stack in that space.
 * padding-bottom: 96px offsets the absolute scroll-hint so cards center
 * in the VISIBLE space above it (not behind it).
 */
.music-container {
    width: 100%;
    flex: 1; /* Fill all available space above the scroll hint */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the card stack */
    align-items: center;
    gap: 12px;
    padding: 32px 2rem 96px 2rem; /* bottom offset = scroll-hint height + gap */
    overflow: hidden; /* Cards never overflow the section */
}

.player-card {
    width: 100%;
    max-width: 420px;
    height: 110px;
    background: rgba(1, 1, 1, 0.9); /* New absolute black glass */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(178, 178, 178, 0.1);
    border-radius: 20px 55px 55px 20px; /* Asymmetrical premium look */
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-decoration: none; /* For the <a> tag */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.player-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(254, 119, 51, 0.2);
    border-color: rgba(254, 119, 51, 0.3);
}

.cover {
    width: 86px;
    min-width: 86px;
    height: 86px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: #333;
}

/* VIDEOCLIPES GALLERY STYLES - Clean Flowing UI as per Mockup */
.player-unit {
    width: 100%;
    max-width: 440px; /* Restored to original premium scale */
    margin-bottom: 45px; /* Fine-tuned distance between videos for a perfect balance */
    background-color: transparent; /* Reveal the #hub-vplayer gradient */
}

.player-unit:last-child {
    margin-bottom: 45px; /* Keep bottom margin consistent */
}

.unit-content {
    width: 100%;
}

/* Explicit Z-Index Stack & Background Fallbacks for Desktop */
.player-unit.v1 .video-container { 
    background-image: url('https://img.youtube.com/vi/OyfT6Li7dvE/hqdefault.jpg');
    background-size: cover;
    background-position: center;
}
.player-unit.v2 .video-container { 
    background-image: url('https://img.youtube.com/vi/aeod8I4NRKA/hqdefault.jpg');
    background-size: cover;
    background-position: center;
}
.player-unit.v3 .video-container { 
    background-image: url('https://img.youtube.com/vi/veBwHP1zLK0/hqdefault.jpg');
    background-size: cover;
    background-position: center;
}

/* ── YouTube Facade Pattern ─────────────────────────────────────── */
/* Thumbnail is shown by default. iframe is injected on play click. */

.yt-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.3s ease;
}

.yt-facade:hover .yt-thumb {
    transform: scale(1.03);
    filter: brightness(0.75);
}

/* Play button — glassmorphism circle centered on thumbnail */
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.yt-play-btn svg {
    width: 28px;
    height: 28px;
    margin-left: 4px; /* optical center for play triangle */
}

.yt-facade:hover .yt-play-btn {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(254, 119, 51, 0.85);
    border-color: var(--accent-color);
    box-shadow: 0 8px 32px rgba(254, 119, 51, 0.5);
}

/* iframe injected on click — fades in */
.yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.player-unit.v1 { z-index: 10; }


.section-header {
    width: 100%;
    max-width: 440px; /* Restored to original */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 40px 0 20px 0; /* Restored a bit of breathing room below the title */
    margin-bottom: 10px; /* Added slight margin to balance the distance perfectly */
}

.rec-icon circle {
    animation: recPulse 1.5s infinite ease-in-out;
}

@keyframes recPulse {
    0% { opacity: 1; transform: scale(1); transform-origin: center; }
    50% { opacity: 0.4; transform: scale(1.1); transform-origin: center; }
    100% { opacity: 1; transform: scale(1); transform-origin: center; }
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #000;
    font-size: 1.5rem;
}

#hub-vplayer .section-title {
    font-size: 2.2rem; /* Matches the artist name size */
    font-weight: 900;
}



.video-info-header {
    text-align: left;
    width: 100%;
    max-width: 440px; /* Restored to original */
    margin: 0 auto 15px auto;
}

.artist-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    font-size: 1.8rem;
    line-height: 1.1;
}

.song-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 1.1rem;
    opacity: 0.8;
    text-transform: uppercase; /* Forced uppercase as requested */
    letter-spacing: 1px;
}

.info {
    flex: 1;
    color: #b2b2b2;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.now-playing {
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1DB954; /* Spotify Green */
    margin-bottom: 4px;
    text-transform: uppercase;
}

.artist {
    font-size: var(--font-base);
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.track {
    font-size: 0.875rem;
    color: var(--accent-color); /* Using Sunrise Orange */
}

.wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    margin-top: 8px;
}

.bar {
    width: 3px;
    background: var(--accent-color);
    border-radius: 1px;
    animation: bounce 1s infinite ease-in-out !important;
    will-change: height;
}

.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }
.bar:nth-child(5) { animation-delay: 0.8s; }

@keyframes bounce {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pagination Dots Indicator */
#pagination-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    z-index: 999;
    overflow: visible; /* Ensure ::after tap targets are not clipped */

    /* Glassmorphism pill */
    background: rgba(178, 178, 178, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(178, 178, 178, 0.12);
    border-radius: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);

    transition: opacity 0.5s ease, transform 0.5s ease;
}

#pagination-dots:not(.visible) {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
}

/* Individual dot — real <button>, reset to look identical to the old span */
.dot {
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: rgba(178, 178, 178, 0.3);
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.35s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Invisible tap area — safe 24px hit target, no overlap with neighbors */
.dot::after {
    content: '';
    position: absolute;
    inset: -12px;
}

/* Hover state — subtle lift */
.dot:hover {
    background: rgba(178, 178, 178, 0.8);
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(178, 178, 178, 0.4);
}

/* Active/current page — orange pill */
.dot.active {
    width: 28px;
    height: 10px;
    border-radius: 10px;
    background: var(--accent-color);
    box-shadow: 0 0 16px var(--accent-color);
}

/* AG Video Player - External Container (Premium Frame) */
.player-container {
    width: 100%;
    padding: 16px; /* The 'frame' border requested */
    background: #000;
    border-radius: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.ag-player-root {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
    border-radius: 14px; /* Inner corners aligned with padding */
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px; /* Inner rounding for the video */
    overflow: hidden;
    margin-bottom: 12px;
}

.video-container #main-video-player,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: none;
}

.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

/* Dynamic State Classes */
#slider-wrapper.on-left { transform: translateX(0); }
#slider-wrapper.on-center { transform: translateX(-33.333333%); }
#slider-wrapper.on-right { transform: translateX(-66.666666%); }

/* ========================================================================= */
/* MENU OVERLAY FULL-SCREEN */
/* ========================================================================= */

.menu-overlay {
    position: absolute; /* Absolute binds to #app-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh; /* Native safe height for Safari toolbars */
    background: radial-gradient(circle at 50% 40%, var(--accent-light) 0%, var(--accent-dark) 60%, var(--accent-deep) 120%);
    z-index: 9150; /* Above SPA overlay (9000), below burger (9200) */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Flow from top to bottom */
    gap: 0; /* Removing fixed gap to use more granular control on mobile */
    padding: calc(120px + env(safe-area-inset-top, 20px)) 1.5rem calc(60px + env(safe-area-inset-bottom, 20px)) 1.5rem;
    
    /* Hide Scrollbars while maintaining scroll functionality for small screens */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    -webkit-overflow-scrolling: touch;
    
    /* Animation base - Multi-directional transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%); /* Start off-screen right for menu entry */
    transition: transform var(--fast-speed) var(--fast-easing),
                opacity 0.3s ease,
                visibility 0.3s ease;
}

/* Exit Left forced state for Menu returning to Hub */
.menu-overlay.exit-left {
    transform: translateX(-100%) !important;
}

.menu-overlay::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0); /* Slide into center */
}

/* Page Open state: Menu slides LEFT to reveal the subpage underneath */
.menu-overlay.is-page-open {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: translateX(-100%); /* Slide off-screen left */
}

.menu-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Tighter gap for mobile stack */
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px; /* More items on screen on small viewports */
    width: 100%;
    text-align: left;
}

@keyframes menuBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.98); }
}

.menu-item {
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.8rem; /* Reduced from 2.2rem for a more refined balance */
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    
    /* Staggered Entrance Animation Base */
    display: block;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, color 0.3s ease;
}

.menu-item:hover {
    color: #000;
}

.alt-menu-item {
    font-size: 1.15rem !important;
    color: #000 !important; /* Black normally as requested */
    background: transparent !important;
    display: block !important; /* Matches other menu items for perfect alignment */
    letter-spacing: 2px !important;
    font-weight: 800 !important;
    margin-top: 5px;
    animation: menuBlink 1.5s infinite ease-in-out;
}

.alt-menu-item:hover {
    color: #fff !important; /* White on hover (opposite of others) */
    background: transparent !important;
    animation: none;
}

/* Active State Animations */
.menu-overlay.active .menu-item {
    transform: translateY(0);
    opacity: 1;
}

.menu-links li {
    /* Anchors the absolutely-positioned .menu-desc reveal below */
    position: relative;
}

.menu-desc {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: var(--font-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;

    /* Positioned out of flow so revealing it never shifts sibling menu items
       (which was causing clicks to land on the wrong link while the mouse
       traveled down the menu). Purely decorative on hover, so it must not
       intercept clicks either. */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-desc span {
    display: block !important; /* Forces each line to be on its own line - CRITICAL FIX */
    width: 100%;
}

@media (hover: hover) {
    .menu-links li:hover .menu-desc {
        opacity: 1;
        transform: translateY(0);
    }
}
.menu-links li.is-expanded .menu-desc {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay.active .menu-links li:nth-child(1) .menu-item { transition-delay: 0.1s; }
.menu-overlay.active .menu-links li:nth-child(2) .menu-item { transition-delay: 0.2s; }
.menu-overlay.active .menu-links li:nth-child(3) .menu-item { transition-delay: 0.3s; }
.menu-overlay.active .menu-links li:nth-child(4) .menu-item { transition-delay: 0.4s; }
.menu-overlay.active .menu-links li:nth-child(5) .menu-item { transition-delay: 0.5s; }

.social-links-container {
    width: 100% !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important; /* Visual air between links and CTA */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, opacity 0.6s ease 0.5s;
}

.menu-overlay.active .social-links-container {
    transform: translateY(0);
    opacity: 1;
}

.menu-cta-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Vertically center in the remaining space */
    align-items: flex-end !important; /* Horizontally right-align */
    flex: 1 !important; /* Take up all the empty space between content and bottom */
    width: 100% !important;
    padding: 0 !important; 
    max-width: none !important;
    margin: 0 !important;
    
    /* Animation base - restoration */
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s, opacity 0.6s ease 0.55s;
}

.menu-overlay.active .menu-cta-wrapper {
    transform: translateY(0);
    opacity: 1;
}

.menu-cta-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    width: auto !important;
    gap: 15px !important; /* Force space between text and button on mobile */
}

.menu-cta {
    display: inline-block;
    width: auto;
    font-size: var(--font-base);
    padding: 14px 28px;
    align-self: flex-end !important; /* Explicit Right Align */
    background: #000;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0 !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.menu-cta:hover {
    background: #111;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.menu-footer {
    position: absolute; /* Fix to bottom of container */
    bottom: 16px;       /* 16px follows the 8px base system */
    left: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align left with menu items */
    text-align: left;
    gap: 20px;
    
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s, opacity 0.6s ease 0.6s;
    pointer-events: none; /* Let clicks pass through if overlapping CTA by accident */
}

.menu-overlay.active .menu-footer {
    transform: translateY(0) !important;
    opacity: 1 !important;
    margin-top: 0 !important; 
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    z-index: 106;
}

.social-links {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
}

.menu-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin: 0 0 25px 0;
    width: 100%;
}

.social-links a {
    color: #fff;
    background-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-links a svg {
    width: 18px;
    height: 18px;
}

.social-links a:hover,
.social-links a:active {
    background-color: #222;
    transform: translateY(-3px);
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-sm);
    color: #fff;
    opacity: 0.5;
    letter-spacing: 0.5px;
}

/* ========================================================================= */
/* A ESSÊNCIA (LEFT PAGE) STYLES                                             */
/* ========================================================================= */

.essencia-page {
    width: 100%;
    min-height: 100vh;
    padding: 128px 2rem 96px 2rem;
    background-color: #010101; /* Solid black cinematic background */
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Generous breathing room */
}

/* Removed redundant scrollbar hiding here to allow parent container to manage it */

.essencia-intro, .estrategia-intro { display: flex; flex-direction: column; gap: 32px; }
.essencia-image { width: 100%; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.essencia-image img { width: 100%; height: auto; display: block; }

.essencia-text, .body-text, .estrategia-intro-text, .producao-intro-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.essencia-highlight-triad {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #fff;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.essencia-block { display: flex; flex-direction: column; gap: 20px; }
.essencia-block-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
}

.essencia-logos { display: flex; gap: 20px; align-items: center; margin-top: 10px; opacity: 0.4; filter: grayscale(100%); }
.essencia-logos .logo-text { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.1rem; letter-spacing: 1px; }

.essencia-catchphrase {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #fff;
    font-style: italic;
    border-left: 3px solid var(--accent-color);
    padding-left: 20px;
    margin-top: 10px;
}

.essencia-divider-image { width: 100%; margin: -20px 0; }
.essencia-divider-image img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; }

.essencia-huge-metric {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1;
    margin-top: 15px;
    letter-spacing: -2px;
    color: var(--accent-color);
}

.essencia-concept {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--accent-color);
    margin-top: 10px;
}

.essencia-footer-block { align-items: center; text-align: center; margin-top: 20px; padding-bottom: 60px; }
.essencia-closing-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 2rem; color: #fff; margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.5px; }
.essencia-cta { width: 100%; text-align: center; background: var(--accent-dark); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; box-shadow: 0 4px 15px rgba(230, 90, 21, 0.4);border-radius: 4px;display: inline-block;}
.essencia-cta:hover { background: var(--accent-light); color: #fff; }

/* Premium Quote Pattern - Inspired by Editorial Design */
.premium-quote {
    position: relative;
    padding: 1.5rem 0 1.5rem 2.5rem;
    border-left: 5px solid var(--accent-color);
    margin: 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.premium-quote::after {
    content: '';
    position: absolute;
    top: -15px;
    left: -2.5rem; /* Matches the parent padding offset */
    width: 40px;
    height: 5px;
    background: #fff;
}

.quote-bg-symbol {
    position: absolute;
    top: -40px;
    right: 5%;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 10rem;
    color: var(--accent-color);
    opacity: 0.08;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.quote-main {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: var(--font-base);
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

.quote-highlight {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--accent-color);
    position: relative;
    z-index: 1;
}

/* Page manifesto headings (Estratégia, Videoclipes, Produção Musical) */
.estrategia-manifesto-title,
.videoclipes-manifesto-title,
.producao-manifesto,
.ladob-manifesto-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Estratégia: Método em 3 Pilares */
.method-container { display: flex; flex-direction: column; gap: 48px; }

.method-step { display: flex; gap: 24px; align-items: flex-start; }

.step-icon-box {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-icon-box svg { width: 24px; height: 24px; }

.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.step-info { display: flex; flex-direction: column; gap: 8px; }

.step-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.8;
}

.step-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.4rem; color: #fff; }

.step-desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }

/* Videoclipes: cards da galeria */
.video-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.video-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: border-color 0.3s ease;
}
.video-card:hover { border-color: var(--accent-color); }
.video-card img { width: 100%; height: auto; display: block; }

.video-info { padding: 16px; }

.video-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Produção Musical: player Spotify */
.audio-curadoria { width: 100%; margin: 24px 0; }

/* FINAL MOBILE CONSISTENCY FIXES */
@media screen and (max-width: 480px) {
    #app-container {
        max-width: none;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        outline: none;
    }

    /* Absolute Centering for Backgrounds */
    .slide, .hub-section {
        height: 100dvh !important;
        width: 100vw !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    #hub-main, #hub-bottom, #slide-left, #slide-right {
        background-position: center center !important;
    }

    /* Section Headers */
    .section-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 45px 1rem 0 1rem !important; 
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        z-index: 150;
    }

    .section-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        color: #000;
        text-shadow: 0 0 10px rgba(255,255,255,0.4);
    }
    
/* ==========================================================================
   FINALIZED SECTIONS (1, 2, 3, 4, SIDE PAGES & MENU ITEMS) - DO NOT MODIFY
   ========================================================================== */

    #hub-vplayer .section-title {
        font-size: 1.8rem !important;
        color: #fff;
    }

    /* Reverting Pagination Dots to Original Size/Shape */
    #pagination-dots {
        bottom: 15px !important; /* Fixed at 15px from bottom */
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 10px 20px !important; /* Original */
        gap: 15px !important; /* Original */
        z-index: 999 !important;
        display: flex !important;
        align-items: center !important;
    }

    .dot {
        width: 10px !important; /* Original */
        height: 10px !important; /* Original */
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        padding: 0 !important; /* Remove the padding that caused shape change */
    }
    
    .dot.active {
        width: 25px !important; /* Original */
        height: 10px !important; /* Original */
        border-radius: 10px !important; /* Pill shape */
        background: var(--accent-color) !important;
    }

    .scroll-hint {
        bottom: 25px !important;
        left: 20px !important;
    }

    .scroll-pill {
        width: 26px !important;
        height: 44px !important;
    }
    
    .scroll-label {
        font-size: 0.5rem !important;
        letter-spacing: 2px !important;
        margin-top: 5px !important;
    }

    /* Music Container - Balanced & Centered in Available Space */
    .music-container {
        padding: 45px 1rem 100px 1rem !important; /* 100px bottom compensates for the nav arrow area */
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; 
        align-items: center !important; 
        gap: 12px !important;
    }

    .player-card {
        width: 92% !important; /* Slightly narrower for centering aesthetic */
        max-width: 400px !important;
        height: auto !important;
        min-height: 78px !important; /* -15% approximately */
        padding: 8px !important; /* -15% from 10px */
        gap: 10px !important;
        border-radius: 10px 40px 40px 10px !important;
    }

    .cover {
        width: 63px !important; /* -15% from 74px */
        min-width: 63px !important;
        height: 63px !important;
    }

    .track {
        font-size: var(--font-xs) !important; /* Smaller text */
        line-height: 1.2;
    }

    .artist {
        font-size: var(--font-sm) !important; /* Smaller text */
    }

    .now-playing {
        font-size: 0.47rem !important;
    }

    .player-unit.v1 {
        margin-top: 0 !important; /* Managed by spacer now */
    }

    .player-unit {
        width: 90% !important; 
        max-width: 396px !important; 
        margin-bottom: 50px !important; /* Increased gap */
    }

    .video-info-header .artist-name {
        font-size: 1.1rem !important;
    }

    .video-info-header .song-title {
        font-size: 0.8rem !important;
    }

    /* Home/Return Arrow - Fixed Bottom-LEFT as requested */
    /* Home/Return Arrow - Fixed Bottom-LEFT at 15px */
    .scroll-hint.home-hint {
        position: absolute !important;
        bottom: 15px !important; 
        left: 20px !important; 
        right: auto !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 999 !important;
        width: auto !important;
        height: auto !important; /* Critical override of 120px desktop height */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }

    .scroll-hint.home-hint .scroll-label {
        display: none !important;
    }

    .scroll-hint.home-hint .scroll-label {
        margin-top: 0 !important;
        font-size: 0.5rem !important;
        letter-spacing: 1px !important;
    }

    /* CTA CONTENT - Compact Footer Fix for Safari Toolbars */
    .vplayer-footer .footer-content {
        min-height: 200px !important; /* Increased for safer clearance */
        position: relative !important;
        padding: 30px 1.5rem calc(45px + env(safe-area-inset-bottom, 20px)) 1.5rem !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        gap: 15px !important;
    }

    .scroll-hint.home-hint {
        position: static !important; /* Back into flow for reliable alignment */
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    .scroll-hint.home-hint .scroll-pill {
        margin-bottom: 0 !important; /* Total reset for footer alignment */
    }

    .vplayer-footer .cta-block {
        position: static !important; /* Back into flow */
        margin: 0 !important;
        width: auto !important;
        max-width: 80% !important;
        align-items: flex-end !important;
        text-align: right !important;
        z-index: 10 !important;
    }
}

/* --- ACCESSIBILITY & UTILITIES (Audit Fixes) --- */

/* Visible Focus Indicator for Keyboard Users */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }

    /* .scroll-label's resting color is var(--bg-color) (near-black), only made
       visible by the pulse-label animation cycling it through --accent-color.
       With animations collapsed above, it would stay stuck on the invisible
       resting color — give it a static, legible color instead (>=4.5:1 on black). */
    .scroll-label {
        color: rgba(255, 255, 255, 0.62);
        opacity: 1;
    }
}

/* Typography Polish */
h1, h2, h3 {
    text-wrap: balance;
}

/* ==========================================================================
   SPA OVERLAY — Persistent page layer (spa-router.js)
   ========================================================================== */

#spa-overlay {
    position: absolute; /* Absolute binds to #app-container */
    inset: 0;
    z-index: 110000; /* Ultra-High: Bypasses Burger Menu (100000) for sub-pages */
    background: #000; /* CRITICAL: Prevents Hub background bleed-through */
    display: none; /* Logic flips to flex */
    flex-direction: column;
    overflow: hidden;

    opacity: 1;
    /* Resting position: off-screen RIGHT. Menu -> Subpage enters from here;
       Subpage -> Menu exits back to here (complementary to the menu, which
       does the mirror move on the left — see .menu-overlay). */
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                visibility 0.4s ease;
    will-change: transform;
}

#spa-overlay.is-active {
    display: flex;
}

#spa-overlay.is-entered {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0); /* Slide in from the RIGHT */
}

/* Loading spinner state */
#spa-overlay.is-loading #spa-content::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(254, 119, 51, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    margin: 40vh auto 0;
    animation: spa-spin 0.8s linear infinite;
}

@keyframes spa-spin {
    to { transform: rotate(360deg); }
}

/* Content area */
#spa-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-top: env(safe-area-inset-top, 0px);
    
    /* EXTRITAMENTE PROIBIDO: Hide Scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

#spa-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ==========================================================================
   SUB-PAGE GLOBAL OVERRIDES (for SPA consistency)
   ========================================================================== */

.standalone-header {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 120000; /* Above all */
}

.standalone-back-btn {
    background: none;
    border: none !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s, opacity 0.3s;
}

.standalone-back-btn:hover {
    color: var(--accent-color) !important;
}

.back-chevron-icon {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--accent-color);
    border-left: 2px solid var(--accent-color);
    transform: rotate(-45deg);
    margin-right: 5px;
    display: inline-block;
}

/* Footer & Scroll-To-Top Pill consistency — scoped to .vplayer-footer only,
   otherwise this larger pill overrode the hub sections' small glassmorphism one. */
.vplayer-footer .scroll-pill {
    width: 48px;
    height: 80px;
    border: 1px solid rgba(254, 119, 51, 0.3);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: border-color 0.3s, transform 0.3s;
}

.vplayer-footer .scroll-pill:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.vplayer-footer .scroll-icon-up {
    width: 24px;
    height: 24px;
    color: var(--accent-color);
}

/* SAFE-MODE: Sub-page prevents Burger Menu overlap */
body.is-page-open #burger-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    #burger-menu {
        left: 24px;
    }
    .standalone-header {
        top: 1.5rem;
        left: 1.5rem;
    }
}