@charset "UTF-8";
/**
 * ====================================================================================================
 * 💀 PROTOCOL: ZULU SIX [CINEMATIC SOTA 2026 EDITION - CSS DESIGN SYSTEM]
 * ====================================================================================================
 * CLIENT: NEXO INFRAESTRUTURA
 * VERTICAL: Serviços Residenciais de Alto Ticket (Elétrica Premium)
 * TARGET AUDIENCE: Feminino 30+ / Granja Viana & Cotia / Tomadoras de Decisão
 * ARCHITECTURE: CUBE CSS + BEM + Design Tokens + Utility-First Engine
 * * * * NEURO-DESIGN & CINEMATIC FEATURES:
 * 1. Apple-Aesthetic Glassmorphism: Desfoques profundos (20px+) em fundos escuros translúcidos.
 * 2. Bento Box Layouts: Grids assimétricos que guiam o olho sem exigir leitura linear.
 * 3. Cinematic Vignettes: Sobreposições radiais escuras sobre vídeos em loop para legibilidade.
 * 4. Kinetic Feedback: Botões magnéticos, shimmer effects e expansões táteis.
 * 5. Blur-Reveals: Elementos surgem do desfoque total para o foco absoluto via Scroll.
 * 6. Zero CLS Strict Dimensioning: Proteção extrema contra Cumulative Layout Shift.
 * 7. Bottom-Heavy Thumb Zone: Alocação estratégica de CTAs e Popups na zona inferior da tela.
 * ====================================================================================================
 */

/* ==========================================================================
   01. DESIGN TOKENS & SYSTEM VARIABLES (NEURO-PSYCHOLOGY VARS)
   ========================================================================== */
:root {
    /* --- 1.1 PALETA: DARK CINEMATIC MODE --- 
       Psych: Fundos super escuros transmitem luxo tecnológico e reduzem fadiga visual. */
    --bg-void: #000000;
    --bg-base: #050505;
    --bg-surface: #0a0a0a;
    --bg-surface-hover: #121212;
    --bg-elevated: #161616;
    --bg-elevated-hover: #1c1c1c;
    --bg-card: #0f0f0f;
    --bg-bento: #111111;

    /* --- 1.2 GLASSMORPHISM & BLUR (SPATIAL UI FEEL) --- */
    --glass-ultra-light: rgba(20, 20, 20, 0.25);
    --glass-light: rgba(15, 15, 15, 0.45);
    --glass-medium: rgba(10, 10, 10, 0.65);
    --glass-strong: rgba(5, 5, 5, 0.85);
    --glass-solid: rgba(0, 0, 0, 0.95);
    
    --blur-xs: blur(4px);
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(32px);
    --blur-spatial: blur(48px);

    /* --- 1.3 ACENTOS SEMÂNTICOS E GATILHOS --- */
    /* Gold: Prestígio, Autoridade, Padrão Premium */
    --accent-gold-light: #F9E596;
    --accent-gold: #D4AF37;
    --accent-gold-dark: #A38525;
    --accent-gold-glow: rgba(212, 175, 55, 0.3);
    --accent-gold-dim: rgba(212, 175, 55, 0.1);

    /* Alert/Red: Urgência, FUD (Medo, Incerteza, Dúvida), Risco de Fogo */
    --accent-alert-light: #FF6B6B;
    --accent-alert: #FF3B30;
    --accent-alert-dark: #C62828;
    --accent-alert-glow: rgba(255, 59, 48, 0.4);
    --accent-alert-dim: rgba(255, 59, 48, 0.12);

    /* Success/Green: Confiança, Resolução */
    --accent-success-light: #5AF27A;
    --accent-success: #32D74B;
    --accent-success-dark: #24A135;
    --accent-success-glow: rgba(50, 215, 75, 0.4);
    --accent-success-dim: rgba(50, 215, 75, 0.12);

    /* WhatsApp Brand Color SOTA */
    --brand-whatsapp-light: #4ade80;
    --brand-whatsapp: #25D366;
    --brand-whatsapp-dark: #128C7E;
    --brand-whatsapp-dim: rgba(37, 211, 102, 0.15);
    --brand-whatsapp-glow: rgba(37, 211, 102, 0.4);

    /* Info/Blue: Profissionalismo, Dados */
    --accent-info: #0A84FF;
    --accent-info-glow: rgba(10, 132, 255, 0.3);

    /* --- 1.4 BORDAS E STROKES (MICRO-LIMITADORES) --- */
    --border-ghost: rgba(255, 255, 255, 0.03);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.25);
    --border-gold-ghost: rgba(212, 175, 55, 0.15);
    --border-gold: rgba(212, 175, 55, 0.4);
    --border-alert: rgba(255, 59, 48, 0.4);

/* --- 1.5 TIPOGRAFIA E CONTRASTE (WCAG AAA) --- */
    --text-pure: #FFFFFF;
    --text-primary: #FFFFFF; /* SOTA A11y: Era #F5F5F7. Agora Branco Absoluto para textos principais */
    --text-secondary: #F2F2F7; /* Cinza gelo de altíssimo contraste para subtítulos */
    --text-tertiary: #D1D1D6;  /* Era #86868B. Salto drástico de luminosidade para descrições */
    --text-quaternary: #AEAEB2; /* Era #555555. Agora visível sob luz solar direta */
    --text-inverse: #000000;
    --text-gold: #E2C76A;

    /* Famílias Fontes */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	
    /* Escala Tipográfica Fluida Estrita para Mobile (Viewport: 320px a 480px) */
    --text-xs: clamp(0.7rem, 3.5vw, 0.75rem);
    --text-sm: clamp(0.8rem, 4vw, 0.875rem);
    --text-base: clamp(0.95rem, 4.5vw, 1.05rem);
    --text-lg: clamp(1.1rem, 5vw, 1.25rem);
    --text-xl: clamp(1.3rem, 6vw, 1.5rem);
    --text-2xl: clamp(1.6rem, 7.5vw, 1.8rem);
    --text-3xl: clamp(1.9rem, 8.5vw, 2.2rem);
    --text-4xl: clamp(2.3rem, 10vw, 2.8rem);
    --text-5xl: clamp(2.8rem, 12vw, 3.5rem);

    /* --- 1.6 ESPAÇAMENTOS (RITMO VERTICAL MODULAR - 4px BASE) --- */
    --sp-0: 0px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;
    --sp-32: 128px;
    --sp-40: 160px;
    --sp-48: 192px;

    /* Semantic Spacing Aliases */
    --sp-xs: var(--sp-1);
    --sp-sm: var(--sp-2);
    --sp-md: var(--sp-3);
    --sp-lg: var(--sp-4);
    --sp-xl: var(--sp-6);
    --sp-2xl: var(--sp-8);
    --sp-3xl: var(--sp-10);
    --sp-4xl: var(--sp-12);
    --sp-5xl: var(--sp-16);
    --sp-6xl: var(--sp-20);

    /* --- 1.7 RADII (SQUIRCLE CURVES) --- */
    --radius-none: 0px;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 9999px;

    /* --- 1.8 SOMBRAS (DEPTH & ELEVATION) --- */
    --shadow-none: none;
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.95);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 1);
    --shadow-inner: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --shadow-inner-strong: inset 0 1px 3px rgba(255, 255, 255, 0.3);

    /* --- 1.9 EASE & TRANSITIONS (60FPS HARDWARE ACCELERATED) --- */
    --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    
    --time-ultra-fast: 100ms;
    --time-fast: 150ms;
    --time-base: 300ms;
    --time-slow: 500ms;
    --time-reveal: 800ms;
    --time-cinematic: 1200ms;

    /* --- 1.10 Z-INDEX ARCHITECTURE --- */
    --z-negative: -1;
    --z-base: 1;
    --z-above: 10;
    --z-overlay: 50;
    --z-header: 100;
    --z-banner: 200;
    --z-toast: 300;
    --z-dock: 400;
    --z-modal: 500;
    --z-max: 9999;
}

/* ==========================================================================
   02. CSS RESET & NORMALIZATION (SOTA 2026 STRICT)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Elimina o "piscar" cinza/azul ao clicar no iOS/Android */
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    height: 100dvh;
    scroll-behavior: smooth;
    background-color: var(--bg-void);
    /* Injeção SOTA: Faz a página acender como as luzes de um teatro */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100%;
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Padding Safe Area para iPhone X+ e Margem para o Dock Fixed */
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 20px));
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    overscroll-behavior-y: none; /* Previne o efeito elástico que quebra a imersão de Apps */
}

/* Acessibilidade: Redução de Movimento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Media Elements Reset */
img, picture, video, canvas, svg, iframe {
    display: block;
    max-width: 100%;
    height: auto;
    /* Blindagem: Impede salvar imagens via clique longo no Mobile */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

svg {
    fill: currentColor;
    pointer-events: none;
}

/* Form Reset */
button, input, textarea, select, a {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

button, a {
    cursor: pointer;
    touch-action: manipulation; /* Força resposta tátil rápida (0 delay) */
}

/* Foco Acessível */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 4px;
    border-radius: var(--radius-xs);
}

ul, ol {
    list-style: none;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-pure);
    letter-spacing: -0.03em;
    /* SOTA: Fallback de segurança para iOS 15/16 */
    max-width: 100%;
    word-break: break-word;
    text-wrap: balance; /* SOTA 2026: Previne palavras isoladas na última linha */
}

p {
    max-width: 70ch;
    text-wrap: pretty;
}

b, strong {
    font-weight: 700;
    color: var(--text-pure);
}

::selection {
    background-color: var(--accent-gold);
    color: var(--text-inverse);
}
::-moz-selection {
    background-color: var(--accent-gold);
    color: var(--text-inverse);
}

/* Custom Scrollbar Mobile/Desktop Letterbox */
::-webkit-scrollbar {
    width: 6px;
    background-color: var(--bg-void);
}
::-webkit-scrollbar-track {
    background: var(--bg-void);
}
::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-gold);
}

/* ==========================================================================
   03. LAYOUT & GRID SYSTEM: MOBILE-FIRST LETTERBOX
   ========================================================================== */
body.mobile-optimized {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.container {
    width: 100%;
    /* Restrição baseada em Phablets modernos (iPhone Pro Max) */
    max-width: 480px; 
    padding-left: var(--sp-xl);
    padding-right: var(--sp-xl);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: var(--z-base);
}

/* Section Header Shared */
.section-heading {
    margin-bottom: var(--sp-3xl);
    text-align: left;
}

.section-heading h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--sp-sm);
}

.section-heading p {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* Glass Panels Base */
.glass-panel {
    background: var(--glass-medium);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

/* ==========================================================================
   04. KINETIC ANIMATION ENGINE (GPU ACCELERATED)
   ========================================================================== */
/* Master Reveal Class */
.blur-reveal {
    opacity: 0;
    filter: var(--blur-sm);
    transform: translate3d(0, 30px, 0) scale(0.97);
    transition: opacity var(--time-reveal) var(--ease-apple),
                filter var(--time-reveal) var(--ease-apple),
                transform var(--time-reveal) var(--ease-apple);
    will-change: opacity, filter, transform;
}

.blur-reveal.active {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* Cascade Delays */
.delay-1 { transition-delay: 150ms; }
.delay-2 { transition-delay: 300ms; }
.delay-3 { transition-delay: 450ms; }

/* Low-end device protection */
body.reduce-fx .blur-reveal {
    filter: none !important;
    transition: opacity var(--time-slow) var(--ease-apple), transform var(--time-slow) var(--ease-apple);
}

/* SOTA: Blindagem contra GPU Leak. Desliga cálculos de blur em elementos críticos */
body.reduce-fx .glass-panel,
body.reduce-fx .kinetic-dock,
body.reduce-fx .btn-magnetic,
body.reduce-fx .cine-badge,
body.reduce-fx .urgency-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Fallbacks Sólidos e de Alto Contraste */
body.reduce-fx .glass-panel,
body.reduce-fx .kinetic-dock {
    background: var(--glass-solid) !important;
}

body.reduce-fx .btn-magnetic {
    background: rgba(20, 20, 20, 0.98) !important; 
}

/* Keyframes SOTA */
@keyframes pulseRing {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

@keyframes pulseRadar {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(50, 215, 75, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(50, 215, 75, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(50, 215, 75, 0); }
}

@keyframes pulseRadarWhatsApp {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes shimmerSweep {
    0% { transform: translate3d(-150%, 0, 0) skewX(-20deg); }
    100% { transform: translate3d(250%, 0, 0) skewX(-20deg); }
}

@keyframes accordionSlide {
    0% { opacity: 0; transform: translate3d(0, -10px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   05. COMPONENT: URGENCY PILL (TOP FIXED ALERT)
   ========================================================================== */
.urgency-pill {
    position: absolute; /* SOTA: Deixa de ser fixed e passa a rolar com a página */
    top: calc(90px + env(safe-area-inset-top, 0px)); /* Posiciona perfeitamente abaixo do Nav */
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-banner);
    background: rgba(20, 0, 0, 0.85);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--border-alert);
    padding: var(--sp-xs) var(--sp-lg) var(--sp-xs) var(--sp-sm);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.3);
}

.pulse-ring {
    width: 8px;
    height: 8px;
    background: var(--accent-alert);
    border-radius: 50%;
    animation: pulseRing 2s infinite var(--ease-in-out);
}

.urgency-pill span {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-pure);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}

.urgency-pill strong {
    background: rgba(255, 59, 48, 0.2);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    color: var(--accent-alert-light);
}

/* ==========================================================================
   06. COMPONENT: AMBIENT NAVIGATION (NAVBAR)
   ========================================================================== */
.ambient-nav {
    position: fixed;
    top: 0; /* SOTA: Topo absoluto matemático */
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    border-bottom: 1px solid var(--border-subtle);
    /* O padding resolve a margem para o notch (câmera) do iPhone */
    padding: calc(var(--sp-md) + env(safe-area-inset-top, 0px)) 0 var(--sp-md) 0;
    transition: transform var(--time-base) var(--ease-out),
                background var(--time-base) var(--ease-out),
                box-shadow var(--time-base) var(--ease-out);
    will-change: transform;
}

/* Smart Scroll Hidden State */
.ambient-nav.nav-hidden {
    transform: translate3d(0, -150%, 0);
}

.ambient-nav.scrolled {
    background: var(--glass-strong);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--border-medium);
    padding: var(--sp-sm) 0;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--text-xl);
    letter-spacing: -0.06em;
    color: var(--text-pure);
}

.brand-logo span {
    color: var(--accent-gold);
}

.radar-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    background: var(--accent-success-dim);
    border: 1px solid rgba(50, 215, 75, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.radar-ping {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-success);
    animation: pulseRadar 2s infinite var(--ease-in-out);
}

.radar-txt {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-success-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   07. COMPONENT: CINEMATIC HERO SECTION
   ========================================================================== */
.cinematic-hero {
    position: relative;
    width: 100%;
    min-height: 90dvh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Thumb Zone Content */
    padding-bottom: var(--sp-6xl);
    padding-top: calc(140px + env(safe-area-inset-top, 0px));
}

.video-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8) contrast(1.1) saturate(1.2);
}

.video-vignette {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.9) 70%, var(--bg-base) 100%),
        radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.6) 100%);
}

.hero-content {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Micro-Trust Anchor */
.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-md);
    background: var(--glass-light);
    border: 1px solid var(--border-medium);
    padding: 6px 16px 6px 6px;
    border-radius: var(--radius-pill);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    margin-bottom: var(--sp-xl);
    box-shadow: var(--shadow-sm);
}

.avatar-stack {
    display: flex;
}

.avatar-stack img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
    margin-left: -12px;
    background: #222;
}

.avatar-stack img:first-child {
    margin-left: 0;
    border-color: var(--accent-gold);
}

.tp-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tp-stars {
    font-size: 0.65rem;
    color: #FABB05;
    letter-spacing: 0.15em;
    line-height: 1;
    margin-bottom: 2px;
}

.tp-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Headlines */
.hero-headline {
    font-size: var(--text-4xl);
    line-height: 1.05;
    margin-bottom: var(--sp-md);
    text-shadow: 0 10px 30px rgba(0,0,0,0.9);
}

.gradient-text {
    background: linear-gradient(90deg, var(--accent-gold-light) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-top: var(--sp-xs);
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.2));
}

.hero-subheadline {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--sp-2xl);
    line-height: 1.5;
    max-width: 95%;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.hero-subheadline b {
    color: var(--text-pure);
}

/* CTA Magnético Centralizado (SOTA) */
.hero-cta-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centralização matemática via Flexbox */
    gap: var(--sp-lg);
}

.btn-magnetic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    padding: 0 var(--sp-md); /* SOTA: Margem de segurança interna para telas pequenas */
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-medium);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.05);
    transition: transform var(--time-fast) var(--ease-apple),
                border-color var(--time-fast) var(--ease-apple);
}

.btn-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.15), transparent 70%);
    pointer-events: none;
}

.btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Reduzido levemente para otimizar espaço lateral */
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 4.5vw, var(--text-lg)); /* SOTA: Fonte fluida que encolhe sem quebrar linha */
    font-weight: 800;
    color: var(--text-pure);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center; /* Força o centro absoluto caso a linha decida quebrar */
    width: 100%;
}

.btn-text svg {
    flex-shrink: 0; /* Blindagem: impede o ícone do WhatsApp de ser esmagado */
}

.btn-magnetic::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: shimmerSweep 5s infinite var(--ease-in-out);
}

.btn-magnetic:active {
    transform: scale(0.96) translate3d(0, 2px, 0);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.1);
}

.btn-magnetic:active .btn-text svg {
    transform: scale(1.1);
}

.founder-signature {
    display: flex;
    align-items: center;
    justify-content: center; /* Centralização perfeita do bloco de fundador */
    gap: var(--sp-md);
    background: linear-gradient(90deg, transparent, var(--accent-gold-dim), transparent);
    border-bottom: 2px solid var(--accent-gold);
    padding: var(--sp-sm) var(--sp-lg);
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
}

.founder-signature img {
    border-radius: 50%;
    border: 1px solid var(--accent-gold);
    box-shadow: 0 0 10px var(--accent-gold-glow);
}

.fs-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Texto à esquerda da imagem para balanço */
}

.fs-text strong {
    font-size: var(--text-sm);
    color: var(--accent-gold-light);
    margin-bottom: 2px;
}

.fs-text span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   08. COMPONENT: BENTO BOX UI (QUEBRA DE OBJEÇÕES)
   ========================================================================== */
.bento-container {
    margin-bottom: var(--sp-6xl);
    margin-top: calc(-1 * var(--sp-2xl)); /* Sobreposição sobre Hero Section */
    position: relative;
    z-index: var(--z-above);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
}

.bento-cell {
    background: var(--bg-bento);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--sp-xl) var(--sp-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: var(--shadow-md);
}

.bento-cell.span-2 {
    grid-column: span 2;
}

/* FUD / Alert Variant */
.bento-alert {
    background: linear-gradient(145deg, rgba(211, 47, 47, 0.15) 0%, var(--bg-bento) 100%);
    border-color: rgba(211, 47, 47, 0.3);
    border-top: 1px solid rgba(255, 59, 48, 0.5);
}

.bento-header {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}

.icon-pulse-red {
    color: var(--accent-alert);
    animation: pulseRing 2s infinite var(--ease-in-out);
    border-radius: 50%;
    display: flex;
}

.bento-alert h3 {
    color: var(--accent-alert-light);
    font-size: var(--text-xl);
    margin: 0;
}

.bento-alert p {
    color: #FFD6D6;
    font-size: var(--text-base);
}

/* Standard Dark Variant */
.bento-dark {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.bento-icon {
    font-size: 1.8rem;
    margin-bottom: var(--sp-md);
}

.bento-dark h3 {
    font-size: var(--text-base);
    color: var(--text-primary);
    margin-bottom: var(--sp-sm);
}

.bento-dark p {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* ==========================================================================
   09. COMPONENT: KINETIC TIMELINE
   ========================================================================== */
.timeline-container {
    margin-bottom: var(--sp-6xl);
}

.kinetic-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xl);
    position: relative;
}

/* Linha Tronco */
.kinetic-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-gold) 0%, rgba(212,175,55,0.1) 100%);
    z-index: 0;
}

.timeline-step {
    display: flex;
    gap: var(--sp-lg);
    position: relative;
    z-index: 1;
}

.t-number {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.2rem;
    box-shadow: 0 0 15px var(--accent-gold-dim);
}

.t-content {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
}

.t-content h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-xs);
    color: var(--text-primary);
}

.t-content p {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* ==========================================================================
   10. COMPONENT: CINEMATIC SERVICE CARDS
   ========================================================================== */
.services-cinematic {
    margin-bottom: var(--sp-6xl);
}

.cinematic-cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xl);
}

.cine-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transition: transform var(--time-base);
}

.cine-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-void);
    overflow: hidden;
}

/* SOTA: Ajuste estrutural para imagens .webp */
.cine-media video,
.cine-media .cine-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    display: block; /* Remove espaços em branco nativos de imagens no HTML */
}

.cine-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-elevated) 0%, transparent 60%);
    pointer-events: none;
}

.cine-overlay.alert {
    background: linear-gradient(to top, var(--bg-elevated) 0%, rgba(211, 47, 47, 0.2) 100%);
}

.cine-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--glass-strong);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    color: var(--text-pure);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
}

.cine-badge.hot {
    background: var(--accent-gold);
    color: var(--text-inverse);
    border-color: var(--accent-gold-light);
    box-shadow: 0 4px 10px var(--accent-gold-glow);
}

.cine-body {
    padding: 0 var(--sp-xl) var(--sp-xl);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.price-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-success-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-sm);
}

.price-tag.alert {
    color: var(--accent-alert-light);
}

.cine-body h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-md);
}

.cine-body p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--sp-xl);
    flex: 1;
}

/* Local CTA */
/* ==========================================================================
   Local CTAs (Botões dos Serviços) - CINEMATIC ENHANCEMENT
   ========================================================================== */
.cine-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-md) var(--sp-lg); /* Padding ajustado para elegância */
    background: rgba(255, 255, 255, 0.05); /* Fundo padrão premium */
    border: 1px solid var(--border-medium);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Efeito 3D Edge */
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm); /* Levemente menor para não brigar com o título */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--time-base) var(--ease-apple);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Profundidade */
}

/* A Seta Animada (Call to Action Directional) */
.cine-btn svg {
    color: var(--accent-gold);
    transition: transform var(--time-base) var(--ease-bounce);
    filter: drop-shadow(0 0 5px var(--accent-gold-glow));
}

/* Micro-interação tátil e de foco */
.cine-btn:active {
    transform: scale(0.97);
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

.cine-btn:active svg {
    transform: translate3d(6px, 0, 0); /* A seta "pula" para a direita confirmando a ação */
}

/* ==========================================================================
   Variant: SOS / Alert (Mapear Curto)
   ========================================================================== */
.alert-theme {
    border-color: rgba(211, 47, 47, 0.3);
    box-shadow: 0 16px 32px rgba(211, 47, 47, 0.15); /* Brilho vermelho no card */
}

.alert-theme h3 {
    color: var(--accent-alert-light);
}

.alert-theme .price-tag {
    color: var(--accent-alert-light);
}

/* Botão Específico do Alerta */
.alert-btn {
    background: linear-gradient(180deg, rgba(255, 59, 48, 0.1) 0%, rgba(200, 20, 20, 0.2) 100%);
    border-color: rgba(255, 59, 48, 0.4);
    border-top-color: rgba(255, 100, 100, 0.6);
}

.alert-btn:active {
    background: rgba(255, 59, 48, 0.25);
    border-color: var(--accent-alert);
}

.alert-btn svg {
    color: var(--accent-alert-light);
    filter: drop-shadow(0 0 8px var(--accent-alert-glow));
}

/* ==========================================================================
   Variant: Gold / Standard (Chuveiro, Disjuntor, Tomadas)
   ========================================================================== */
/* SOTA: O @media(hover: hover) garante que em dispositivos de toque (Mobile) 
   não ocorra o bug de "Sticky Hover", mantendo a UX fluida e sem atritos. */
@media (hover: hover) {
    article:not(.alert-theme) .cine-btn:hover {
        border-color: rgba(212, 175, 55, 0.5);
        box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15), inset 0 0 10px rgba(212, 175, 55, 0.05);
    }
}

/* Transparency Note */
.transparency-note {
    margin-top: var(--sp-2xl);
    border: 1px solid var(--border-gold-ghost);
    border-left: 4px solid var(--accent-gold);
    padding: var(--sp-xl);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-md);
}

.tn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.tn-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.tn-text strong {
    display: block;
    color: var(--accent-gold);
    margin-bottom: var(--sp-xs);
    font-size: var(--text-base);
}

/* ==========================================================================
   11. COMPONENT: APPLE WALLET ID CARD (AUTHORITY)
   ========================================================================== */
.wallet-id-card {
    margin-bottom: var(--sp-6xl);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-3xl);
    padding: var(--sp-2xl);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.2);
}

.wallet-id-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1), transparent 60%);
    transform: rotate(30deg);
    pointer-events: none;
}

.wid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2xl);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--sp-lg);
}

.wid-chip svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.wid-header span {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--text-tertiary);
    letter-spacing: 0.15em;
}

.wid-profile {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
    margin-bottom: var(--sp-2xl);
}

.wid-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--bg-surface);
    box-shadow: 0 0 0 2px var(--accent-gold);
}

.wid-data h2 {
    font-size: var(--text-3xl);
    margin-bottom: 4px;
}

.wid-data p {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-sm);
}

.wid-rating {
    font-size: 0.8rem;
    color: var(--text-pure);
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
}

.wid-body p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--sp-2xl);
}

.wid-footer {
    display: flex;
    gap: var(--sp-md);
}

.wid-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wid-badge .check {
    color: var(--accent-success);
    font-weight: 900;
}

/* ==========================================================================
   12. COMPONENT: MASONRY REVIEWS (SOCIAL PROOF)
   ========================================================================== */
.section-reviews {
    margin-bottom: var(--sp-6xl);
}

.reviews-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
}

.review-cell {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    padding: var(--sp-2xl);
    border-radius: var(--radius-2xl);
    position: relative;
}

.review-cell::before {
    content: '"';
    position: absolute;
    top: 20px; right: 30px;
    font-family: serif;
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
}

.r-stars {
    color: #FABB05;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: var(--sp-lg);
}

.review-cell p {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: var(--sp-2xl);
    position: relative;
    z-index: 2;
}

.r-user {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-lg);
}

.r-user img {
    border-radius: 50%;
    border: 1px solid var(--border-medium);
}

.r-user div {
    display: flex;
    flex-direction: column;
}

.r-user strong {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-user span {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ==========================================================================
   13. COMPONENT: PREMIUM SHIELD GUARANTEE
   ========================================================================== */
.shield-guarantee {
    margin-bottom: var(--sp-6xl);
    border: 1px solid var(--border-gold);
    padding: var(--sp-3xl) var(--sp-2xl);
    border-radius: var(--radius-3xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.shield-icon {
    color: var(--accent-gold);
    margin-bottom: var(--sp-lg);
    filter: drop-shadow(0 0 15px var(--accent-gold-glow));
}

.shield-content h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-sm);
    color: var(--text-pure);
}

.shield-content p {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* ==========================================================================
   14. COMPONENT: APPLE-STYLE FAQ (ACCORDION NATIVO)
   ========================================================================== */
.section-faq {
    margin-bottom: var(--sp-6xl);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.apple-faq {
    background: transparent;
    border-bottom: 1px solid var(--border-medium);
    overflow: hidden;
}

.apple-faq summary {
    padding: var(--sp-xl) 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.apple-faq summary::-webkit-details-marker {
    display: none;
}

.faq-plus {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-tertiary);
    transition: transform var(--time-base);
}

.apple-faq[open] .faq-plus {
    transform: rotate(45deg);
    color: var(--text-pure);
}

.faq-ans {
    padding: 0 0 var(--sp-xl) 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    animation: accordionSlide 0.3s var(--ease-out);
}

/* ==========================================================================
   15. COMPONENT: CLEAN FOOTER
   ========================================================================== */
.clean-footer {
    /* Padding bottom imenso garante que o Dock fixo nunca oculte as legais */
    padding: var(--sp-5xl) 0 calc(140px + env(safe-area-inset-bottom, 20px));
    text-align: center;
    border-top: 1px solid var(--border-subtle);
}

.f-logo {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--text-tertiary);
    letter-spacing: -0.05em;
    margin-bottom: var(--sp-md);
}

.f-desc {
    font-size: var(--text-sm);
    color: var(--text-quaternary);
    margin-bottom: var(--sp-xl);
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.f-legal {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    font-size: var(--text-xs);
    color: var(--text-quaternary);
    margin-bottom: var(--sp-2xl);
}

.f-copy {
    font-size: 0.7rem;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   16. COMPONENT: SOCIAL PROOF TOAST (BOTTOM ZONE)
   ========================================================================== */
.toast-system {
    position: fixed;
    /* SOTA++: Posicionado no topo, simulando notificação nativa do sistema (System Push) */
    top: calc(24px + env(safe-area-inset-top, 0px));
    left: 50%;
    /* O translate inicia fora da tela, empurrado para cima (-100px) e ligeiramente menor */
    transform: translate3d(-50%, -100px, 0) scale(0.9);
    z-index: var(--z-toast); /* Certifique-se que o z-toast é maior que o z-header nas suas variáveis */
    border: 1px solid var(--border-medium);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: var(--sp-md) var(--sp-xl);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--time-slow) var(--ease-apple),
                opacity var(--time-slow) var(--ease-apple),
                visibility var(--time-slow);
    will-change: transform, opacity;
    width: max-content;
    max-width: 90vw;
    /* Sombra um pouco mais densa para dar noção de altura sobre os outros elementos */
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), var(--shadow-xl); 
}

.toast-system.active {
    /* Cai suavemente para a posição original, ganhando foco real */
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    visibility: visible;
}

.toast-icon {
    width: 24px;
    height: 24px;
    background: var(--accent-success-dim);
    color: var(--accent-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(50, 215, 75, 0.3);
}

.toast-content-wrapper {
    display: flex;
    flex-direction: column;
}

.toast-heading {
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--text-pure);
    line-height: 1.2;
}

.toast-subheading {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-top: 2px;
}

/* ==========================================================================
   17. COMPONENT: KINETIC DOCK (THE REVENUE MAKER)
   ========================================================================== */
.kinetic-dock {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 440px;
    height: 76px;
    background: var(--glass-strong);
    backdrop-filter: var(--blur-xl);
    -webkit-backdrop-filter: var(--blur-xl);
    border: 1px solid var(--border-medium);
    border-top: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 12px;
    z-index: var(--z-dock);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.5);
    margin-bottom: 0;
}

.dock-call {
    width: 60px;
    height: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-pure);
    flex-shrink: 0;
    transition: background var(--time-fast);
}

/* SOTA Dark/Green Glass Theme para Conversão Absoluta */
.dock-wa {
    flex: 1;
    height: 100%;
    /* Fundo Escuro Translúcido + Borda/Glow Verde */
    background: rgba(10, 20, 15, 0.85); 
    border: 1px solid var(--brand-whatsapp-dark);
    box-shadow: inset 0 0 20px rgba(37, 211, 102, 0.1), 0 8px 24px rgba(0,0,0,0.6);
    color: var(--text-pure);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center; /* Centralização Flexbox Suprema */
    position: relative;
    overflow: hidden;
    transition: transform var(--time-fast);
}

/* O Adorno Absolute (não quebra a centralização do texto) */
.wa-indicator {
    position: absolute;
    top: 8px; right: 8px;
    width: 8px; height: 8px;
    background: var(--brand-whatsapp-light);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--brand-whatsapp-light);
    animation: pulseRadarWhatsApp 2s infinite;
}

.dock-wa::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    animation: shimmerSweep 6s infinite var(--ease-in-out);
}

.dw-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    width: 100%; /* Ocupa 100% para o flex alinhar os itens no meio real */
}

.dw-content svg {
    color: var(--brand-whatsapp);
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.4));
}

.dw-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha os dois textos internamente */
}

.dw-txt strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text-pure);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dw-txt span {
    font-size: 0.65rem;
    font-weight: 700;
    color: #A0A0A0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dock-call:active, .dock-wa:active {
    transform: scale(0.96);
}

/* ==========================================================================
   18. FRAMEWORK: UTILITY CLASSES SOTA (Tailwind-like para Manutenção Futura)
   Este pacote garante a você escalabilidade sem mexer no CSS base.
   ========================================================================== */
/* Display Utilities */
.u-d-none { display: none !important; }
.u-d-flex { display: flex !important; }
.u-d-block { display: block !important; }
.u-d-grid { display: grid !important; }

/* Flexbox Utilities */
.u-flex-col { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }
.u-flex-center { justify-content: center !important; align-items: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-start { justify-content: flex-start !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-gap-sm { gap: var(--sp-sm) !important; }
.u-gap-md { gap: var(--sp-md) !important; }
.u-gap-lg { gap: var(--sp-lg) !important; }
.u-gap-xl { gap: var(--sp-xl) !important; }

/* Typography Utilities */
.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-text-right { text-align: right !important; }
.u-text-gold { color: var(--accent-gold) !important; }
.u-text-alert { color: var(--accent-alert) !important; }
.u-text-success { color: var(--accent-success) !important; }
.u-text-white { color: var(--text-pure) !important; }
.u-font-bold { font-weight: 700 !important; }
.u-font-black { font-weight: 900 !important; }

/* Margin Utilities (Y Axis) */
.u-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-sm { margin-top: var(--sp-sm) !important; }
.u-mb-sm { margin-bottom: var(--sp-sm) !important; }
.u-mt-md { margin-top: var(--sp-md) !important; }
.u-mb-md { margin-bottom: var(--sp-md) !important; }
.u-mt-lg { margin-top: var(--sp-lg) !important; }
.u-mb-lg { margin-bottom: var(--sp-lg) !important; }
.u-mt-xl { margin-top: var(--sp-xl) !important; }
.u-mb-xl { margin-bottom: var(--sp-xl) !important; }
.u-mt-2xl { margin-top: var(--sp-2xl) !important; }
.u-mb-2xl { margin-bottom: var(--sp-2xl) !important; }
.u-mt-3xl { margin-top: var(--sp-3xl) !important; }
.u-mb-3xl { margin-bottom: var(--sp-3xl) !important; }

/* Padding Utilities (Y Axis) */
.u-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pt-sm { padding-top: var(--sp-sm) !important; }
.u-pb-sm { padding-bottom: var(--sp-sm) !important; }
.u-pt-md { padding-top: var(--sp-md) !important; }
.u-pb-md { padding-bottom: var(--sp-md) !important; }
.u-pt-lg { padding-top: var(--sp-lg) !important; }
.u-pb-lg { padding-bottom: var(--sp-lg) !important; }
.u-pt-xl { padding-top: var(--sp-xl) !important; }
.u-pb-xl { padding-bottom: var(--sp-xl) !important; }
.u-pt-2xl { padding-top: var(--sp-2xl) !important; }
.u-pb-2xl { padding-bottom: var(--sp-2xl) !important; }

/* Width & Height Utilities */
.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }
.u-w-auto { width: auto !important; }

/* Visibility & Opacity */
.u-opacity-50 { opacity: 0.5 !important; }
.u-opacity-75 { opacity: 0.75 !important; }
.u-invisible { visibility: hidden !important; }

/* Z-Index Overrides */
.u-z-top { z-index: var(--z-max) !important; }
.u-z-back { z-index: var(--z-negative) !important; }

/* ==========================================================================
   19. DESKTOP & TABLET FALLBACKS (LETTERBOX RENDER)
   Como o site é 100% mobile-first, aqui garantimos que se alguém abrir
   no Desktop, a página não desconfigure, parecendo um App centralizado.
   ========================================================================== */
@media (min-width: 768px) {
    body {
        background-color: #000;
        background-image: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 60%);
    }

    /* Trava e centraliza a Nav */
    .ambient-nav {
        width: 100%;
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius-xl);
        top: 20px;
        border: 1px solid var(--border-medium);
        padding: var(--sp-sm) 0;
    }

    .ambient-nav.nav-hidden {
        transform: translate(-50%, -150%);
    }

    /* Trava e centraliza a Urgency Pill no Desktop (Abaixo do Nav) */
    .urgency-pill {
        top: 110px; /* Mantém a proporção hierárquica abaixo do menu centralizado */
    }

    /* Centraliza vídeos/imagens e garante que não vazem do "Letterbox" */
    .video-background {
        width: 100%;
        max-width: 480px;
        left: 50%;
        right: auto; /* SOTA: Anula o inset:0 do mobile para evitar stretch bizarro */
        transform: translateX(-50%);
    }

    /* Toast Notification Fallback */
    .toast-system {
        max-width: 440px;
    }

    /* Dock Shadow Enhance for Desktop */
    .kinetic-dock {
        box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.1);
    }
	/* SOTA: Efeito de levitação magnética nos cards apenas para Desktop */
    .cine-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(212, 175, 55, 0.2);
    }
}

/* ==========================================================================
   20. A11Y HIGH CONTRAST & PRINT STYLES
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --text-secondary: #ffffff;
        --text-tertiary: #dddddd;
        --border-subtle: rgba(255, 255, 255, 0.5);
    }
    .glass-panel {
        background: #000 !important;
        border: 2px solid #fff !important;
    }
}

@media print {
    /* Remove tudo que não é essencial para a impressão do contrato/orçamento */
    .kinetic-dock, .urgency-pill, .toast-system, .ambient-nav, video, .video-vignette {
        display: none !important;
    }
    body { 
        background: #fff; 
        color: #000; 
        padding: 0;
    }
    .cine-card, .bento-cell, .wallet-id-card { 
        border: 1px solid #000; 
        background: none; 
        page-break-inside: avoid; 
        box-shadow: none;
    }
    h1, h2, h3, p, span, strong {
        color: #000 !important;
        text-shadow: none !important;
    }
    .cine-overlay { 
        display: none; 
    }
}
/* ==========================================================================
   BENTO BOX MICRO-INTERACTIONS (SOTA 2026)
   ========================================================================== */

/* 8. Perigo Oculto (Coração/Alerta) */
.icon-pulse-red img {
    animation: pulse-danger 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.6));
}
@keyframes pulse-danger {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* 9 e 10. Peças e Limpeza (Levitação e Magia) */
.bento-cell:nth-child(2) .bento-icon img,
.bento-cell:nth-child(3) .bento-icon img {
    animation: float-premium 4s ease-in-out infinite;
}
@keyframes float-premium {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 11. Selo de Garantia NBR (Animação Blindada Autônoma) */
.bento-cell:nth-child(4) .bento-icon img {
    animation: shield-secure 5s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(226, 199, 106, 0.2));
    transition: transform 0.4s var(--ease-apple);
}

@keyframes shield-secure {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        filter: brightness(1) drop-shadow(0 0 5px rgba(226, 199, 106, 0.2)); 
    }
    50% { 
        transform: scale(1.08) rotate(3deg); 
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(226, 199, 106, 0.5)); 
    }
}

/* Feedback tátil extra ao tocar no card */
.bento-cell:nth-child(4):active .bento-icon img {
    transform: scale(0.9) rotate(-5deg) !important;
    animation: none; /* SOTA: Pausa a flutuação infinita para permitir o click físico */
}
/* EOF: Design System Tático finalizado. Padrão SOTA 2026. 1600+ Lines Capacity. */