/* Degustação: cor do player nativo alinhada à marca */
#degustacao audio.sample-audio {
accent-color: #FFAE00;
}

:root {
--bg-page: #000000;
--bg-surface: rgba(26, 26, 26, 0.88);
--bg-surface-lifted: rgba(42, 42, 42, 0.90);
--border-soft: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.12);
--text-main: #FFFFFF;
--text-muted: #A0A0A0;
--accent: #FFAE00;
--accent-soft: rgba(255, 174, 0, 0.14);
--radius-pill: 999px;
--radius-card: 28px;
--radius-shell: 32px;
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
--shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.28);
--shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
--blur-shell: blur(16px);
--blur-panel: blur(20px);
--blur-nav: blur(18px);
}
/* =========================
STRUCTURAL TEXTURE
========================= */
.bg-vertical-grid {
background-image: linear-gradient(to right,
rgba(255, 255, 255, 0.02) 1px,
transparent 1px);
background-size: 6rem 100%;
background-position: center top;
}
/* =========================
CORE STATIC SURFACES
========================= */
.glass-shell {
position: relative;
background: var(--bg-surface);
backdrop-filter: var(--blur-shell);
-webkit-backdrop-filter: var(--blur-shell);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
border-radius: var(--radius-shell);
}
.glass-panel-lifted {
position: relative;
background: var(--bg-surface-lifted);
backdrop-filter: var(--blur-panel);
-webkit-backdrop-filter: var(--blur-panel);
border: 1px solid var(--border-strong);
box-shadow:
var(--shadow-medium),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
border-radius: var(--radius-card);
}
.gradient-border-shell {
position: relative;
background:
linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.24),
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.18)) border-box;
border: 1px solid transparent;
backdrop-filter: var(--blur-shell);
-webkit-backdrop-filter: var(--blur-shell);
box-shadow: var(--shadow-soft);
border-radius: var(--radius-shell);
}
.gradient-border-panel {
position: relative;
background:
linear-gradient(var(--bg-surface-lifted), var(--bg-surface-lifted)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.20),
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.14)) border-box;
border: 1px solid transparent;
backdrop-filter: var(--blur-panel);
-webkit-backdrop-filter: var(--blur-panel);
box-shadow:
var(--shadow-medium),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
border-radius: var(--radius-card);
}
/* =========================
PREMIUM INNER HIGHLIGHT
========================= */
.inner-highlight::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.14),
transparent);
border-radius: inherit;
pointer-events: none;
}
/* =========================
NAV DNA UPGRADE
========================= */
.nav-shell {
position: relative;
background:
linear-gradient(rgba(11, 14, 18, 0.58), rgba(11, 14, 18, 0.58)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.24),
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.18)) border-box;
border: 1px solid transparent;
backdrop-filter: var(--blur-nav);
-webkit-backdrop-filter: var(--blur-nav);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
transition:
background 300ms ease,
box-shadow 300ms ease,
transform 300ms ease,
border-color 300ms ease;
border-radius: var(--radius-pill);
}
.nav-shell::before {
content: "";
position: absolute;
inset: -14px -18px auto;
height: 58px;
border-radius: var(--radius-pill);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0));
filter: blur(22px);
opacity: 0.35;
pointer-events: none;
}
.nav-shell::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-shell.is-scrolled {
background:
linear-gradient(rgba(11, 14, 18, 0.78), rgba(11, 14, 18, 0.78)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.32),
rgba(255, 255, 255, 0.10),
rgba(255, 255, 255, 0.20)) border-box;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}
.nav-shell.is-scrolled::before {
opacity: 0.55;
}
.nav-link {
position: relative;
font-size: 12px;
line-height: 1;
font-weight: 500;
color: rgb(161 161 170);
transition: color 220ms ease;
}
.nav-link:hover {
color: rgb(244 244 245);
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(255, 174, 0, 0.85),
transparent);
transform: scaleX(0.2);
transform-origin: center;
opacity: 0;
transition: transform 220ms ease, opacity 220ms ease;
}
.nav-link:hover::after {
transform: scaleX(1);
opacity: 1;
}
.nav-cta-primary {
background: var(--accent);
color: #000000;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 10px 24px rgba(255, 174, 0, 0.18);
transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.nav-cta-primary:hover {
background: #FFC947;
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.10) inset,
0 14px 30px rgba(255, 174, 0, 0.24);
}
.nav-cta-secondary {
transition: color 220ms ease, background 220ms ease;
}
.nav-cta-secondary:hover {
color: white;
background: rgba(255, 255, 255, 0.04);
}
.hero-cta-secondary {
position: relative;
background:
linear-gradient(rgba(11, 14, 18, 0.58), rgba(11, 14, 18, 0.58)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.22),
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.16)) border-box;
border: 1px solid transparent;
color: rgb(244 244 245);
backdrop-filter: var(--blur-nav);
-webkit-backdrop-filter: var(--blur-nav);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.hero-cta-secondary:hover {
transform: translateY(-1px);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
background:
linear-gradient(rgba(14, 18, 24, 0.72), rgba(14, 18, 24, 0.72)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.28),
rgba(255, 255, 255, 0.10),
rgba(255, 255, 255, 0.18)) border-box;
}
.mobile-menu-panel {
background:
linear-gradient(rgba(13, 16, 21, 0.92), rgba(13, 16, 21, 0.92)) padding-box,
linear-gradient(180deg,
rgba(255, 255, 255, 0.24),
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0.16)) border-box;
border: 1px solid transparent;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
box-shadow: var(--shadow-strong);
border-radius: 28px;
}
.mobile-menu-link {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.mobile-menu-link:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.10);
transform: translateY(-1px);
}
.mobile-menu-hidden {
opacity: 0;
transform: translateY(-10px) scale(0.98);
pointer-events: none;
}
.mobile-menu-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@media (max-width: 1023px) {
.nav-shell {
width: calc(100% - 24px);
max-width: 980px;
}
}
@media (max-width: 767px) {
.nav-shell {
width: calc(100% - 16px);
padding-left: 10px;
padding-right: 10px;
}
}
.perspective-1000 {
perspective: 1000px;
}
@keyframes float-slow {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(4vw, -6vh) scale(1.05);
}
66% {
transform: translate(-3vw, 4vh) scale(0.95);
}
}
.animate-ambient {
animation: float-slow 25s ease-in-out infinite;
}
.animate-ambient-delayed {
animation: float-slow 30s ease-in-out infinite;
animation-delay: -12s;
}
@keyframes centerCirclePulse {
0% {
opacity: 0;
transform: scale(0.4);
}
10% {
opacity: 0.9;
transform: scale(1);
}
40% {
opacity: 0.9;
transform: scale(1.02);
}
60% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
.center-circle {
animation: centerCirclePulse 5s ease-out infinite;
}
@keyframes radar-scan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse-slow {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.glass-surface {
background: rgba(10, 11, 13, 0.75);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.glass-top-border {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 174, 0, 0.8) 50%, transparent 100%);
box-shadow: 0 0 15px rgba(255, 174, 0, 0.6);
z-index: 10;
}
.radar-sweep {
background: conic-gradient(from 180deg at 50% 50%,
transparent 0deg,
transparent 200deg,
rgba(255, 174, 0, 0.03) 240deg,
rgba(255, 174, 0, 0.25) 360deg);
}
.mask-radar-bottom {
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 85%);
}
.text-gradient-accent {
background: linear-gradient(135deg, #FFAE00 0%, #E61717 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Hero: fundo estático (substitui Three/Vanta) */
#hero .hero-bg-img {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-color: #000000;
background-image: url("../../ASSETS/bg34.png");
background-image: -webkit-image-set(
  url("../../ASSETS/bg34.webp") type("image/webp"),
  url("../../ASSETS/bg34.png") type("image/png")
);
background-image: image-set(
  url("../../ASSETS/bg34.webp") type("image/webp"),
  url("../../ASSETS/bg34.png") type("image/png")
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero .hero-bg-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.15) 45%,
rgba(0, 0, 0, 0.65) 100%
);
pointer-events: none;
}
/* Hero: texto mais nítido em telas estreitas (sombras e névoa competem com a legibilidade) */
@media (max-width: 767px) {
#hero h1 {
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
}
.unicorn-teal-tint {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 35%, rgba(255, 174, 0, 0.14), transparent 42%),
radial-gradient(circle at 70% 50%, rgba(255, 174, 0, 0.08), transparent 38%),
linear-gradient(180deg, rgba(6, 10, 14, 0.10), rgba(6, 10, 14, 0.18));
mix-blend-mode: screen;
opacity: 0.9;
}
/* Nebula-inspired hero secondary CTA */
.hero-cta-nebula {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 9999px;
padding: 1px;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.hero-cta-nebula:hover {
transform: translateY(-2px);
box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}
.hero-cta-nebula-beam {
position: absolute;
inset: -120%;
opacity: 0;
transition: opacity 300ms ease;
background: conic-gradient(from 0deg,
transparent 0deg,
transparent 220deg,
rgba(255, 174, 0, 0.0) 250deg,
rgba(255, 174, 0, 0.9) 300deg,
rgba(255, 201, 71, 0.65) 325deg,
transparent 360deg);
}
.hero-cta-nebula {
width: 100%;
}
.hero-cta-nebula-surface {
width: 100%;
}
@media (min-width: 1280px) {
.hero-cta-nebula {
width: auto;
}
.hero-cta-nebula-surface {
width: auto;
}
}
.hero-cta-nebula:hover .hero-cta-nebula-beam {
opacity: 1;
animation: hero-cta-spin 3s linear infinite;
}
.hero-cta-nebula-border {
position: absolute;
inset: 0;
border-radius: 9999px;
background: rgb(39 39 42);
transition: opacity 300ms ease;
}
.hero-cta-nebula:hover .hero-cta-nebula-border {
opacity: 0;
}
.hero-cta-nebula-surface {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: 100%;
border-radius: 9999px;
padding: 1rem 2rem;
background: linear-gradient(to bottom, rgba(39, 39, 42, 0.9), rgba(9, 9, 11, 0.96));
color: rgb(228 228 231);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: color 300ms ease, background 300ms ease;
}
.hero-cta-nebula:hover .hero-cta-nebula-surface {
color: white;
}
.hero-cta-nebula-icon {
position: relative;
z-index: 2;
transition: transform 300ms ease;
}
.hero-cta-nebula:hover .hero-cta-nebula-icon {
transform: translateX(2px);
}
@keyframes hero-cta-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Revelação ao scroll: só fade + leve translate (sem blur, mais rápido) */
.group.flashlight {
    position: relative;
}
.group.flashlight::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease-out;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 174, 0, 0.08), transparent 40%);
    z-index: 10;
    border-radius: inherit;
}
.group.flashlight:hover::after {
    opacity: 1;
}

@keyframes animationIn {
0% {
opacity: 0;
transform: translateY(14px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.visible { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
.reveal-shell,
.reveal-scale-up,
.anim-fade-up,
.anim-fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}

@media (prefers-reduced-motion: no-preference) {
.reveal-shell,
.anim-fade-up {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s ease-out, transform 0.45s ease-out;
will-change: opacity, transform;
}
.reveal-scale-up {
opacity: 0;
transform: translateY(14px) scale(0.98);
transition: opacity 0.45s ease-out, transform 0.45s ease-out;
will-change: opacity, transform;
}
.anim-fade-in {
opacity: 0;
transition: opacity 0.45s ease-out;
will-change: opacity;
}
.reveal-shell.visible,
.reveal-scale-up.visible,
.anim-fade-up.visible,
.anim-fade-in.visible {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
#hero .anim-fade-up,
#hero .reveal-scale-up {
will-change: opacity, transform;
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.delay-100 { transition-delay: 50ms; }
.delay-200 { transition-delay: 100ms; }
.delay-300 { transition-delay: 150ms; }
.delay-400 { transition-delay: 180ms; }
.delay-500 { transition-delay: 210ms; }
.delay-600 { transition-delay: 240ms; }
.delay-700 { transition-delay: 270ms; }
.delay-800 { transition-delay: 300ms; }
.content-transition {
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-transition.out {
opacity: 0;
transform: translateY(4px) scale(0.98);
}
}
/* Nav Polish */
.nav-shell {
transition: all 500ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* YouTube: iframe sem pointer-events + leve zoom para recortar logo na borda */
#youtubePlayer,
#memberAreaYoutubePlayer {
overflow: hidden !important;
border-radius: inherit;
}
#youtubePlayer iframe,
#memberAreaYoutubePlayer iframe {
pointer-events: none !important;
transform: scale(1.06);
transform-origin: center center;
}
        /* Scroll fixes for offline viewing */
        html, body {
            overflow: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100% !important;
            scroll-behavior: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
        }
        
        /* Force visibility - many sites use JS animations for initial display */
        body, .wrapper, main, #__next, #app, .page, .content {
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
            display: block !important;
        }
        
        /* Disable loader/preloader overlays */
        .loader, .preloader, .loading, [class*="loader"], [class*="preloader"], .aura-loader {
            display: none !important;
            opacity: 0 !important;
        }
        
        /* Show elements that might be hidden for animation */
        .word-inner, .char, .line, [data-aos], [data-scroll],
        .hero-text span, .hero-fade, [class*="hero"] span, [class*="reveal"] {
            /* Animations preserved */
        }
        
        /* Reset Tailwind animation utility classes */
        .translate-y-full, .translate-x-full, .-translate-y-full, .-translate-x-full,
        .translate-y-1\/2, .-translate-y-1\/2, .translate-y-\[100\%\], .translate-y-\[110\%\] {
            transform: none !important;
        }
        
        /* Force visibility on common hidden-for-animation patterns (disabled to preserve animations) */
        /* .opacity-0, [class*="opacity-0"] {
            opacity: 1 !important;
            visibility: visible !important;
        } */
        
        /* Reset scale transforms used for animations */
        .scale-0, .scale-50, .scale-75 {
            transform: none !important;
        }
        
        html.lenis, html.lenis-smooth, 
        body.lenis, body.lenis-smooth,
        .lenis-wrapper, .lenis-content,
        [data-lenis-prevent], [data-scroll-container] {
            overflow: visible !important;
            height: auto !important;
        }
        
        /* Fix flex containers that might cut off content */
        body.flex.items-center,
        body.flex.justify-center {
            align-items: flex-start !important;
            min-height: 100vh;
            height: auto !important;
        }
        
        /* Ensure main content scrolls */
        main, #__next, #__nuxt, #app, .main-content {
            overflow: visible !important;
            height: auto !important;
        }

/* Oferta: preço anterior riscado — CSS nativo (tailwind.min.css não inclui line-through / utilities arbitrárias) */
.offer-price-de {
    color: #71717a;
}
.offer-price-was {
    display: inline-block;
    margin-left: 0.35rem;
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(212, 212, 216, 0.88);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(161, 161, 170, 0.95);
    -webkit-text-decoration-color: rgba(161, 161, 170, 0.95);
}