/* ================================ */
/* PERFORMANCE & OPTIMIZATION      */
/* ================================ */

/* PERFORMANCE RULES - aplicadas globalmente */
*, *::before, *::after {
    box-sizing: border-box;
}

/* UTILITY CLASSES - Para consolidar código repetitivo */
.theme-transition {
    transition: background-color var(--t-instant), color var(--t-instant);
}

.theme-transition-full {
    transition: background-color var(--t-instant), color var(--t-instant), border-color var(--t-instant);
}

.theme-transition-extended {
    transition: 
        opacity var(--t-enter),
        transform var(--t-enter),
        background var(--t-instant),
        border-color var(--t-instant);
}

/* PERFORMANCE: otimização de backdrop-filter baseada na capacidade do dispositivo */
@supports (backdrop-filter: blur(1px)) {
    /* Dispositivos que suportam backdrop-filter receberão efeitos completos */
    .backdrop-strong { backdrop-filter: blur(16px) saturate(120%); }
    .backdrop-medium { backdrop-filter: blur(12px); }
    .backdrop-soft { backdrop-filter: blur(8px); }
    .backdrop-light { backdrop-filter: blur(6px); }
    .backdrop-minimal { backdrop-filter: blur(3px); }
}

@supports not (backdrop-filter: blur(1px)) {
    /* Fallback para dispositivos sem suporte */
    .backdrop-strong, .backdrop-medium, .backdrop-soft, .backdrop-light, .backdrop-minimal {
        background-color: var(--bg-alpha-medium);
    }
}

/* REDUCED MOTION: respeitar preferências de acessibilidade */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* PERFORMANCE MOBILE: reduzir effects custosos */
@media (max-width: 768px) and (max-device-width: 1024px) {
    .backdrop-strong { backdrop-filter: blur(8px) !important; }
    .backdrop-medium { backdrop-filter: blur(6px) !important; }
    .backdrop-soft { backdrop-filter: blur(4px) !important; }
    .backdrop-light { backdrop-filter: blur(3px) !important; }
    .backdrop-minimal { backdrop-filter: blur(2px) !important; }
    
    /* Remover shadows complexas em mobile */
    .performance-shadow {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Simplificar transforms em mobile */
    .mobile-simple-transform {
        transform: translateZ(0) !important;
    }
    
    /* MOBILE-FIRST OPTIMIZATIONS */
    /* Hero shapes menores em mobile */
    .hero-shapes .shape {
        transform: scale(0.8) !important;
    }
    
    /* Content visibility mais agressiva em mobile */
    .section-container {
        contain-intrinsic-size: 1px 600px !important;
    }
}

/* WILL-CHANGE ESTRATÉGICO para animações críticas */
.hero-shapes.lazy-loaded .shape {
    will-change: transform;
}

.hero-shapes.lazy-unloaded .shape {
    will-change: auto; /* Remove quando não visível */
}

#header {
    will-change: background-color, backdrop-filter;
}

#header.entered {
    will-change: auto; /* Remove após entrada */
}
.section-container {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

/* Seções específicas com tamanhos otimizados */
.proj.section-container {
    contain-intrinsic-size: 1px 700px; /* Projetos são mais compactos */
}

.contact.section-container {
    contain-intrinsic-size: 1px 600px; /* Contato é mais simples */
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* REMOVIDO transform que interfere com position fixed */
}

/* Variáveis CSS para temas preto e branco */
:root {
    /* Color scheme declaration for OS integration */
    color-scheme: light dark;
    
    /* Tokens de duração padronizados - MAIS LENTOS para elegância */
    --t-instant: 150ms ease;               /* cores/bordas/background/box-shadow/backdrop-filter */
    --t-soft: 300ms ease;                  /* micro-movimentos (hover, ícones, elevação) */
    --t-enter: 800ms ease-out;             /* entradas (header/hero/why-automate) - MUITO MAIS LENTO */
    --t-flip: 480ms cubic-bezier(0.22, 0.61, 0.36, 1); /* flip visível e suave */
    
    /* FAQ Bot animation variables - faster timing */
    --btn2modal-duration: 220ms;
    --btn2modal-ease: cubic-bezier(.2,.8,.2,1);
    
    /* Altura fixa dos cards para evitar layout shift */
    --card-h: clamp(320px, 55vh, 420px);
    
    /* Display stack sem downloads - system-ui para títulos/destaques */
    --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Light theme (padrão) - aligned with FAQ requirements - CONTRASTE AA */
    --bg: #ffffff;
    --surface: #ffffff;  /* Removido transparência para contraste AA */
    --elev: #ffffff;     /* Removido transparência para contraste AA */
    --text: #000000;
    --muted: #374151;    /* Mais escuro para contraste AA (4.5:1) */
    --border: rgba(0, 0, 0, 0.08);
    --accent: #000000;
    --danger: #EF4444;
    
    /* FAQ Bot tokens - using main system tokens */
    --faq-bg: var(--bg);
    --faq-surface: var(--surface);
    --faq-text: var(--text);
    --faq-muted: var(--muted);
    --faq-border: var(--border);
    --faq-accent: var(--text);
    --faq-danger: var(--danger);
    --faq-success: var(--text);
    
    /* FAQ spacing (8pt grid) */
    --faq-space-xs: 4px;
    --faq-space-sm: 8px;
    --faq-space-md: 12px;
    --faq-space-lg: 16px;
    --faq-space-xl: 24px;
    
    /* FAQ radius */
    --faq-radius-sm: 6px;
    --faq-radius-md: 12px;
    --faq-radius-lg: 16px;
    --faq-radius-full: 50%;
}

/* Tema escuro automático */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --surface: rgba(0, 0, 0, 0.98);
        --elev: rgba(0, 0, 0, 0.98);
        --text: #e5e5e5;
        --muted: #9ca3af;
        --border: rgba(255, 255, 255, 0.1);
        --accent: #ffffff;
        --danger: #ef4444;
    }
}

/* Controle de ícones de tema */
[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --elev: #ffffff;
    --text: #000000;
    --muted: #374151;
    --border: rgba(0, 0, 0, 0.08);
    --accent: #000000;
    --danger: #EF4444;
}

[data-theme="dark"] {
    --bg: #000000;
    --surface: rgba(0, 0, 0, 0.98);
    --elev: rgba(0, 0, 0, 0.98);
    --text: #e5e5e5;
    --muted: #9ca3af;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #ffffff;
    --danger: #ef4444;
}

/* Controle de ícones de tema */
.theme-icon-light {
    opacity: 1;
}

.theme-icon-dark {
    opacity: 0;
}

[data-theme="dark"] .theme-icon-light {
    opacity: 0;
}

[data-theme="dark"] .theme-icon-dark {
    opacity: 1;
}

/* Rotação suave ao trocar tema */
#theme-toggle .theme-icon {
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

#theme-toggle.rotating .theme-icon {
    transform: rotate(180deg);
}

#theme-toggle:hover .theme-icon {
    transform: scale(1.1);
}

#theme-toggle.rotating:hover .theme-icon {
    transform: rotate(180deg) scale(1.1);
}

/* Redução de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-instant: 0ms;
        --t-soft: 0ms;
        --t-enter: 0ms;
        --t-flip: 0ms;
    }
    
    /* Desabilitar todas as animações e transições */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* Formas geométricas estáticas */
    .geometric-shape {
        animation: none !important;
        transform: translateZ(0) !important;
    }
    
    /* Hero shapes sempre visíveis se movimento reduzido */
    .hero-shapes {
        opacity: 0.6 !important;
        transition: none !important;
    }
    
    .hero-shapes.lazy-unloaded {
        opacity: 0.6 !important;
    }
    
    /* Contact footer sempre visível se movimento reduzido */
    .contact-footer {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Accent word sem hover */
    .accent-word:hover {
        transform: translateY(-2px) !important;
    }
}

/* Tema manual forçado */
[data-theme="light"]{
    --bg: #ffffff !important;
    --text: #000000 !important;
    --header-bg: rgba(255, 255, 255, 0.98) !important;
    --header-shadow: 0 2px 12px rgba(0, 0, 0, 0.20) !important;
    --border: rgba(0, 0, 0, 0.08) !important;
    --active-bg: rgba(0, 0, 0, 0.04) !important;
    --pill-border: rgba(0, 0, 0, 0.12) !important;
    --pill-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    --pill-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    --spotlight-light: rgba(0,0,0,.10) !important;
    --spotlight-dark: rgba(255,255,255,.10) !important;
    --panel-bg: rgba(0, 0, 0, 0.04) !important;
    --grid-line: color-mix(in srgb, #000000 50%, transparent) !important;
}

[data-theme="dark"]{
    --bg: #000000 !important;
    --text: #ffffff !important;
    --header-bg: rgba(0, 0, 0, 0.96) !important;
    --header-shadow: 0 2px 12px rgba(0, 0, 0, 0.75) !important;
    --border: rgba(255, 255, 255, 0.12) !important;
    --active-bg: rgba(255, 255, 255, 0.08) !important;
    --pill-border: rgba(255, 255, 255, 0.15) !important;
    --pill-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    --pill-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    --spotlight-light: rgba(0,0,0,.10) !important;
    --spotlight-dark: rgba(255,255,255,.10) !important;
    --panel-bg: rgba(255, 255, 255, 0.06) !important;
    --grid-line: color-mix(in srgb, #ffffff 50%, transparent) !important;
}

/* Configuração base do body - otimizada para performance */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
    /* Usar classe utilitária consolidada */
    /* Otimizações de rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Header - FIXO ABSOLUTO com contexto isolado */
#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important; /* Prioridade máxima */
    border-bottom: 1px solid transparent;
    /* Cria contexto próprio sem herdar transforms */
    transform: none !important;
    /* Estado inicial - entrada APENAS com opacity */
    opacity: 0;
    /* Transições explícitas */
    transition: 
        background-color var(--t-instant), 
        backdrop-filter var(--t-instant), 
        box-shadow var(--t-instant), 
        border-color var(--t-instant),
        opacity var(--t-enter);
}

/* Header após entrada SUAVE */
#header.entered {
    opacity: 1;
    transition: 
        background-color var(--t-instant), 
        backdrop-filter var(--t-instant), 
        box-shadow var(--t-instant), 
        border-color var(--t-instant),
        opacity var(--t-enter);
}

/* Header com efeito liquid glass - USANDO CLASSE OTIMIZADA */
#header.scrolled {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--header-shadow);
    /* Backdrop aplicado via classe .backdrop-strong no HTML */
}

/* Container do header */
.header-container {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
    align-items: center;
    justify-items: center;
    gap: 2rem;
    padding: 0.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 56px;
}

/* Logo sempre à esquerda */
.logo {
    justify-self: start;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 80px; /* Reduzido de 96px para 80px */
}

.logo img {
    height: 100%;
    width: auto;
    transition: opacity var(--t-instant);
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--text);
    letter-spacing: -0.01em;
    transition: color var(--t-instant);
}

/* Alternância da logo por tema */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

/* Navegação desktop */
.nav-desktop {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-self: center;
}

/* Links de navegação */
.nav-link {
    position: relative;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.75rem 1.125rem;
    border-radius: 9999px;
    letter-spacing: -0.01em;
    transform: translateY(0);
    /* Transições explícitas */
    transition: 
        background-color var(--t-instant), 
        border-color var(--t-instant), 
        box-shadow var(--t-instant), 
        transform var(--t-soft), 
        opacity var(--t-soft);
}

.nav-link:hover {
    transform: translateY(-1px);
    opacity: 0.9;
    background-color: var(--active-bg);
    box-shadow: var(--pill-shadow);
}

/* Link ativo */
.nav-link.active {
    color: inherit;
    background-color: var(--active-bg);
    border: 1px solid var(--pill-border);
    box-shadow: var(--pill-shadow);
}

/* Link especial "Contato" com efeito liquid glass */
.nav-link[data-section="contato"] {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.9) 0%,
        rgba(20, 20, 20, 0.8) 50%,
        rgba(0, 0, 0, 0.9) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.nav-link[data-section="contato"]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%);
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s ease;
}

.nav-link[data-section="contato"]:hover::before {
    transform: translateX(0) translateY(0) rotate(45deg);
}

.nav-link[data-section="contato"]:hover {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%,
        rgba(30, 30, 30, 0.85) 50%,
        rgba(0, 0, 0, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.nav-link[data-section="contato"].active {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 1) 0%,
        rgba(40, 40, 40, 0.9) 50%,
        rgba(0, 0, 0, 1) 100%);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Tema escuro - Link especial "Contato" com efeito branco */
[data-theme="dark"] .nav-link[data-section="contato"] {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(240, 240, 240, 0.9) 50%,
        rgba(255, 255, 255, 0.95) 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 
        0 8px 32px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(0, 0, 0, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .nav-link[data-section="contato"]::before {
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(0, 0, 0, 0.08) 50%, 
        transparent 70%);
}

[data-theme="dark"] .nav-link[data-section="contato"]:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(250, 250, 250, 0.95) 50%,
        rgba(255, 255, 255, 1) 100%);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 
        0 12px 40px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(0, 0, 0, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

[data-theme="dark"] .nav-link[data-section="contato"].active {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(235, 235, 235, 0.95) 50%,
        rgba(255, 255, 255, 1) 100%);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 8px 32px rgba(255, 255, 255, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Controles do header */
.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}

/* Ícones de tema com micro-animação SUAVE */
.theme-icon {
    transition: transform var(--t-soft), opacity var(--t-soft);
    transform-origin: center;
}

/* Classe base para todos os botões */
.control-btn, .mobile-menu-btn, .btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pill-border);
    border-radius: 9999px;
    background-color: var(--active-bg);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--pill-shadow);
    text-decoration: none;
    /* Usar classe utilitária consolidada */
    transition: 
        background-color var(--t-instant), 
        border-color var(--t-instant), 
        box-shadow var(--t-instant), 
        transform var(--t-soft), 
        opacity var(--t-soft);
}

.control-btn:hover, .mobile-menu-btn:hover, .btn-pill:hover {
    transform: translateY(-1px);
    opacity: 0.96;
    box-shadow: var(--pill-shadow-hover);
}

/* Botões de controle específicos */
.control-btn {
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 500;
    height: 40px;
    min-width: 40px;
}

/* Botão do menu mobile */
.mobile-menu-btn {
    display: none;
    padding: 0.75rem;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
}

/* Ícones do menu mobile - Específicos */
.mobile-menu-btn .close-icon {
    display: none;
}

.mobile-menu-btn.open .hamburger-icon {
    display: none;
}

.mobile-menu-btn.open .close-icon {
    display: block;
}

/* Menu mobile */
.mobile-menu {
    display: none;
    flex-direction: column;
    background-color: var(--header-bg);
    border-top: 1px solid var(--border);
    padding: 1.25rem 2.5rem;
    /* Estado inicial - fechado */
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: none;
    /* Usar classe utilitária consolidada */
    transition: 
        background-color var(--t-instant), 
        border-color var(--t-instant), 
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.open {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Efeito de entrada escalonada para links */
.mobile-menu.open .nav-link {
    animation: slideInUp 0.3s ease-out forwards;
}

.mobile-menu.open .nav-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu.open .nav-link:nth-child(2) { animation-delay: 0.1s; }
.mobile-menu.open .nav-link:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu.open .nav-link:nth-child(4) { animation-delay: 0.2s; }
.mobile-menu.open .nav-link:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe para bloquear scroll quando menu aberto */
body.menu-open {
    overflow: hidden !important;
    position: relative;
}

.mobile-menu .nav-link {
    padding: 1.25rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    text-align: left;
    margin-left: 15%;
    width: 70%;
}

.mobile-menu .nav-link:last-child {
    border-bottom: none;
}

/* Link especial "Contato" no menu mobile */
.mobile-menu .nav-link[data-section="contato"] {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.9) 0%,
        rgba(20, 20, 20, 0.8) 50%,
        rgba(0, 0, 0, 0.9) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: 0.5rem 15% 1rem 15%;
    width: 70%;
    text-align: center;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.mobile-menu .nav-link[data-section="contato"]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%);
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s ease;
}

.mobile-menu .nav-link[data-section="contato"]:hover::before {
    transform: translateX(0) translateY(0) rotate(45deg);
}

.mobile-menu .nav-link[data-section="contato"].active {
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 1) 0%,
        rgba(40, 40, 40, 0.9) 50%,
        rgba(0, 0, 0, 1) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Tema escuro - Menu mobile - Link especial "Contato" */
[data-theme="dark"] .mobile-menu .nav-link[data-section="contato"] {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(240, 240, 240, 0.8) 50%,
        rgba(255, 255, 255, 0.9) 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: 
        0 8px 32px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .mobile-menu .nav-link[data-section="contato"]::before {
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(0, 0, 0, 0.08) 50%, 
        transparent 70%);
}

[data-theme="dark"] .mobile-menu .nav-link[data-section="contato"].active {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%,
        rgba(235, 235, 235, 0.9) 50%,
        rgba(255, 255, 255, 1) 100%);
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 
        0 8px 32px rgba(255, 255, 255, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ========================================
   HERO SECTION
========================================= */

/* Base da hero */
.hero {
    /* FULL VIEWPORT - ocupa 100% da tela */
    min-height: 100svh; /* viewport segura no mobile */
    height: 100dvh;     /* viewport dinâmica moderna */
    display: grid;
    place-items: center;
    padding: clamp(72px, 10vh, 120px) 2rem 2rem; /* compensa header no topo */
    margin-bottom: 0;   /* não empurra a próxima seção */
    position: relative;
    background: var(--bg);
    color: var(--text);
    /* Estado inicial - entrada da esquerda SUAVE */
    transform: translateX(-18px);
    opacity: 0;
}

/* Hero após entrada SUAVE */
.hero.entered {
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--t-enter), opacity var(--t-enter);
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.hero-content {
    max-width: 680px;
    z-index: 1;
}

/* Formas geométricas decorativas */
.hero-shapes {
    position: relative;
    width: clamp(250px, 30vw, 400px);
    height: clamp(350px, 45vh, 450px);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Lazy loading - inicialmente sem animação */
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* Formas ativas apenas quando necessário */
.hero-shapes.lazy-loaded {
    opacity: 1;
}

.hero-shapes.lazy-loaded .geometric-shape {
    will-change: transform;
}

/* Formas descarregadas para economia de recursos */
.hero-shapes.lazy-unloaded {
    opacity: 0;
    pointer-events: none;
}

.hero-shapes.lazy-unloaded .geometric-shape {
    animation-play-state: paused;
    will-change: auto;
}

.geometric-shape {
    position: absolute;
    border-radius: 24px;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    opacity: 0.8;
    /* Performance otimizada - lazy load */
    will-change: auto;
    contain: layout paint;
}

.shape-1 {
    width: 280px;
    height: 280px;
    top: 5%;
    left: 8%;
    border-radius: 50%;
    animation: float-1 12s ease-in-out infinite;
    /* Performance: will-change aplicado apenas quando necessário */
    will-change: transform;
}

.shape-2 {
    width: 180px;
    height: 320px;
    top: 30%;
    right: 5%;
    border-radius: 90px;
    animation: float-2 15s ease-in-out infinite reverse;
    /* Performance: will-change aplicado apenas quando necessário */
    will-change: transform;
}

.shape-3 {
    width: 240px;
    height: 240px;
    bottom: 8%;
    left: 18%;
    border-radius: 60px;
    animation: float-3 18s ease-in-out infinite;
    /* Performance: will-change aplicado apenas quando necessário */
    will-change: transform;
}

/* MOBILE: Simplificar formas geométricas para máxima performance */
@media (max-width: 768px) {
    .shape-1, .shape-2, .shape-3 {
        animation-duration: 20s; /* Mais lento no mobile */
        animation-timing-function: ease-out; /* Mais suave */
        /* Remover transforms 3D complexos no mobile */
        transform: translateZ(0);
    }
    
    /* Formas menores e mais simples no mobile */
    .hero-shapes .shape-1 {
        width: 100px;
        height: 100px;
        top: 15%;
        left: 5%;
        border-radius: 50%;
    }
    
    .hero-shapes .shape-2 {
        width: 70px;
        height: 140px;
        top: 65%;
        right: 8%;
        left: auto;
        border-radius: 35px;
    }
    
    .hero-shapes .shape-3 {
        width: 80px;
        height: 80px;
        bottom: 20%;
        left: 60%;
        border-radius: 20px;
    }
}

/* PERFORMANCE: Remover will-change quando animação for pausada */
.hero-shapes.paused .shape-1,
.hero-shapes.paused .shape-2,
.hero-shapes.paused .shape-3 {
    will-change: auto;
}

/* Título em 3 linhas - UNIFICADO com system-ui */
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    margin-bottom: 1.25rem;
}

.hero-title .line {
    display: block;
}

/* Destaque especial para a palavra "Automação" */
.accent-word {
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--text);
    border-radius: 12px;
    padding: 0.2em 0.4em;
    display: inline-block;
    font-weight: 900;
    letter-spacing: -0.01em;
    position: relative;
    transform: translateY(-2px);
    transition: all var(--t-soft);
}

.accent-word:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 25%, transparent);
}

/* Remover/neutralizar sublinhado do accent */
.accent {
    position: relative;
    display: inline-block;
}

.accent::after {
    content: none; /* neutralizar o traço */
}

/* Subtítulo - UNIFICADO com system-ui */
.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.7vw + .85rem, 1.125rem);
    line-height: 1.7;
    opacity: 0.85;
    max-width: 56ch;
    margin-bottom: 1.5rem;
}

/* CTAs container */
.hero-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* CTAs base (reutilizando btn-pill) */
.cta-primary, .cta-secondary {
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    height: 44px;
    font-weight: 600;
}

/* CTA primário */
.cta-primary {
    background-color: var(--active-bg);
    border: 1px solid var(--pill-border);
    box-shadow: var(--pill-shadow);
    color: var(--text);
    transition: 
        background-color 0.3s ease, 
        color 0.3s ease, 
        border-color 0.3s ease, 
        box-shadow 0.3s ease,
        transform var(--t-soft);
}

.cta-primary:hover {
    background-color: var(--text);
    color: var(--bg);
    border-color: var(--text);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 25%, transparent);
    transform: translateY(-1px);
}

/* CTA secundário (ghost) */
.cta-secondary {
    background: transparent;
    border: 1px solid var(--pill-border);
    box-shadow: none;
    color: var(--text);
    transition: 
        background-color 0.3s ease, 
        color 0.3s ease, 
        border-color 0.3s ease, 
        box-shadow 0.3s ease,
        transform var(--t-soft);
}

.cta-secondary:hover {
    background-color: var(--text);
    color: var(--bg);
    border-color: var(--text);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 20%, transparent);
    transform: translateY(-1px);
}

.cta-label {
    font-weight: 600;
}

.cta-icon {
    transition: transform var(--t-soft), color 0.3s ease;
}

/* Hover: seta avança 4px (mais visível) - ajustado para nova cor */
.cta-primary:hover .cta-icon,
.cta-secondary:hover .cta-icon {
    transform: translateX(4px);
    color: inherit; /* Herda a cor do hover */
}

/* Focus acessível - apenas via teclado */
.cta-primary:focus-visible,
.cta-secondary:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* BG grid 100% CSS — simplificado para performance */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
}

.bg-grid {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(to right, transparent 0, transparent 95px, var(--grid-line) 96px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 95px, var(--grid-line) 96px);
}

/* Sentinel invisível para controle do header */
#hero-sentinel {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
}

/* ========================================
   SEPARADOR ENTRE SEÇÕES
========================================= */

.section-separator {
    height: 24px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent 60%);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    transition:
        background-color var(--t-instant),
        border-color var(--t-instant);
}

[data-theme="dark"] .section-separator {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent 60%);
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Transições de cor otimizadas - apenas elementos que mudam com tema */
.hero,
.hero-title,
.hero-subtitle,
.btn-pill {
    transition:
        color var(--t-instant),
        background-color var(--t-instant),
        border-color var(--t-instant),
        box-shadow var(--t-instant);
}

/* ========================================
   SEÇÃO DE PROJETOS EM DESTAQUE - REFORMADA COM CARINHO
========================================= */

:root {
    --proj-minh: clamp(520px, 80vh, 880px);
}

.proj {
    padding: 4.5rem 1.25rem;
    background: var(--bg);
    color: var(--text);
    transform: translateY(0);
    opacity: 1;
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

.proj-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ================================ */
/* WA SECTION (POR QUE AUTOMATIZAR) */
/* ================================ */

/* Nova animação simples e robusta - sem backface ou transform 3D complexo */
.wa {
    position: relative;
    background: var(--bg);
    padding: clamp(3rem, 8vw, 6rem) 0;
    overflow: hidden;
}

.wa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.wa-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.wa-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.wa-subtitle {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
    opacity: 0.8;
    max-width: 60ch;
    margin: 0 auto;
}

/* Layout dos cards */
.wa-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
    align-items: stretch;
}

/* Card simples sem 3D - apenas opacity swap */
.wa-card {
    position: relative;
    height: 280px;
    cursor: pointer;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="light"] .wa-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wa-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.wa-card:focus {
    outline: 2px solid var(--text);
    outline-offset: 4px;
}

/* Conteúdo do card - frente e verso no mesmo container */
.wa-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

/* Frente do card - visível por padrão */
.wa-card-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Verso do card - oculto por padrão */
.wa-card-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Estado flipado - trocar opacidades */
.wa-card.is-flipped .wa-card-front {
    opacity: 0;
}

.wa-card.is-flipped .wa-card-back {
    opacity: 1;
}

/* Ícone do card */
.wa-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--text);
    color: var(--bg);
    transition: transform 0.3s ease;
}

.wa-card:hover .wa-card-icon {
    transform: scale(1.05);
}

.wa-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.wa-card-desc {
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0.8;
    flex: 1;
}

.wa-card-indicator {
    margin-top: auto;
    padding-top: 0.75rem;
}

.wa-flip-hint {
    font-size: 0.8rem;
    opacity: 0.6;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s ease;
}

.wa-card:hover .wa-flip-hint {
    opacity: 0.8;
}

/* Conteúdo do verso */
.wa-back-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wa-back-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    opacity: 0.9;
}

/* ================================ */
/* CARD 1: PROGRESS BARS (EFICIÊNCIA) */
/* ================================ */

.wa-progress-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.wa-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wa-progress-label {
    font-size: 0.75rem;
    font-weight: 500;
    width: 80px;
    text-align: left;
    flex-shrink: 0;
    opacity: 0.85;
}

.wa-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

[data-theme="light"] .wa-progress-bar {
    background: rgba(0, 0, 0, 0.1);
}

.wa-progress-fill {
    height: 100%;
    background: var(--text);
    border-radius: 3px;
    width: var(--progress, 0%);
    transition: width 1s ease 0.2s;
}

.wa-progress-value {
    font-weight: 700;
    font-size: 0.75rem;
    width: 30px;
    text-align: right;
    flex-shrink: 0;
    opacity: 0.9;
}

/* ================================ */
/* CARD 2: GRID FINANCEIRO (CUSTOS) */
/* ================================ */

.wa-financial-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.wa-metric {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.875rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

[data-theme="light"] .wa-metric {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wa-metric:hover {
    transform: translateY(-2px);
}

.wa-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text);
    opacity: 0.6;
}

.wa-metric-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.wa-metric-label {
    font-size: 0.75rem;
    opacity: 0.75;
    font-weight: 500;
    line-height: 1.2;
}

/* ================================ */
/* CARD 3: FLOW INOVAÇÃO */
/* ================================ */

.wa-innovation-flow {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.wa-flow-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    width: 100%;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

[data-theme="light"] .wa-flow-step {
    background: rgba(0, 0, 0, 0.04);
}

.wa-flow-step--active {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--text);
    transform: scale(1.02);
}

[data-theme="light"] .wa-flow-step--active {
    background: rgba(0, 0, 0, 0.08);
}

.wa-flow-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.wa-flow-label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.9;
}

.wa-flow-arrow {
    font-size: 1rem;
    color: var(--text);
    font-weight: bold;
    opacity: 0.5;
    transform: rotate(90deg);
}

/* Responsividade */
@media (max-width: 768px) {
    .wa-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .wa-card {
        height: 260px;
    }
    
    .wa-card-front,
    .wa-card-back {
        padding: 1rem;
    }
    
    .wa-card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.75rem;
    }
    
    .wa-card-title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }
    
    .wa-card-desc {
        font-size: 0.8rem;
    }
    
    .wa-progress-label {
        width: 70px;
        font-size: 0.7rem;
    }
    
    .wa-progress-bar {
        height: 5px;
    }
    
    .wa-progress-value {
        font-size: 0.7rem;
        width: 25px;
    }
    
    .wa-financial-grid {
        gap: 0.5rem;
    }
    
    .wa-metric {
        padding: 0.625rem;
    }
    
    .wa-metric-value {
        font-size: 1rem;
    }
    
    .wa-metric-label {
        font-size: 0.7rem;
    }
    
    .wa-flow-step {
        padding: 0.375rem 0.5rem;
    }
    
    .wa-flow-number {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    .wa-flow-label {
        font-size: 0.7rem;
    }
}

/* ================================ */
/* PROJETOS SECTION                */
/* ================================ */

.proj {
    position: relative;
    background: var(--bg);
    padding: clamp(3rem, 8vw, 6rem) 0;
    overflow: hidden;
}

.proj-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.proj-headline {
    position: relative;
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 1200px;
    z-index: 1;
}

.proj-overline {
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: .85;
    font-size: clamp(0.8rem, .4vw + .75rem, 0.95rem);
    margin-bottom: 0.5rem;
}

.proj-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.proj-subtitle {
    opacity: .85;
    margin-top: 0.5rem;
    line-height: 1.65;
    font-size: clamp(1rem, 0.8vw + 0.85rem, 1.125rem);
    max-width: 70ch;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

/* Lista e cards - quase tela inteira */
.proj-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Performance: usar will-change apenas durante hover */
.proj-card {
    position: relative;
    min-height: var(--proj-minh);
    padding: clamp(1.5rem, 2.2vw, 2.5rem);
    border-radius: 20px;
    background: 
        linear-gradient(135deg, 
            color-mix(in srgb, var(--text) 8%, transparent) 0%,
            color-mix(in srgb, var(--text) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
    box-shadow: 
        0 4px 24px color-mix(in srgb, var(--text) 12%, transparent),
        0 1px 3px color-mix(in srgb, var(--text) 16%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateZ(0);
    transition:
        background var(--t-instant),
        border-color var(--t-instant),
        box-shadow var(--t-soft),
        transform var(--t-soft), 
        opacity var(--t-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Hover effects removidos conforme solicitado */

/* Glow effect interno sutil */
.proj-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        color-mix(in srgb, var(--text) 40%, transparent) 50%,
        transparent 100%);
    opacity: 0.6;
}

/* Inner-stroke refinado */
.proj-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--text) 16%, transparent) 0%,
        transparent 50%,
        color-mix(in srgb, var(--text) 8%, transparent) 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    opacity: 0.8;
}

/* Hover transform e box-shadow removidos */

/* Conteúdo do card */
.proj-card-head {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.proj-kicker {
    font-variant: small-caps;
    letter-spacing: .08em;
    font-weight: 600;
    opacity: .9;
    font-size: clamp(0.85rem, .4vw + .8rem, 0.95rem);
    margin-bottom: 0.75rem;
    position: relative;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 12%, transparent) 0%,
        color-mix(in srgb, var(--text) 8%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    display: inline-block;
}

.proj-name {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(1.35rem, 1.4vw + 1.2rem, 2rem);
    line-height: 1.25;
    margin-bottom: 1rem;
}

.proj-desc {
    opacity: .86;
    line-height: 1.65;
    font-size: clamp(1rem, .6vw + .95rem, 1.25rem);
    max-width: 72ch;
    margin-inline: auto;
}

/* Métricas - pílulas com visual refinado */
.proj-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1.25rem;
    list-style: none;
    padding: 0;
    margin-inline: 0;
}

.metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: 
        linear-gradient(135deg,
            color-mix(in srgb, var(--text) 8%, transparent) 0%,
            color-mix(in srgb, var(--text) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
    box-shadow: 
        0 2px 8px color-mix(in srgb, var(--text) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
    position: relative;
    overflow: hidden;
    transition: 
        transform var(--t-soft),
        box-shadow var(--t-soft),
        background var(--t-instant);
}

.metric::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 60%, transparent) 0%,
        color-mix(in srgb, var(--text) 30%, transparent) 50%,
        color-mix(in srgb, var(--text) 60%, transparent) 100%);
    opacity: 0.7;
}

.metric:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 16px color-mix(in srgb, var(--text) 16%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--text) 20%, transparent);
    background: 
        linear-gradient(135deg,
            color-mix(in srgb, var(--text) 10%, transparent) 0%,
            color-mix(in srgb, var(--text) 6%, transparent) 100%);
}

.m-value {
    font-weight: 800;
    font-size: clamp(1rem, .6vw + 1rem, 1.35rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg,
        var(--text) 0%,
        color-mix(in srgb, var(--text) 85%, transparent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 100%;
}

.m-label {
    opacity: .75;
    font-size: clamp(.85rem, .4vw + .75rem, 1rem);
    line-height: 1.2;
}

/* Responsividade */
@media (max-width: 900px) {
    .proj-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .proj {
        padding: 4rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .proj {
        padding: 3.5rem 1rem;
    }
    
    .proj-headline {
        margin-bottom: 2.5rem;
    }
    
    .proj-card {
        padding: 1.5rem;
    }
}

/* Desabilitar hovers em dispositivos touch */
@media (hover: none) {
    .proj-card:hover {
        transform: none;
        box-shadow: 
            0 4px 24px color-mix(in srgb, var(--text) 12%, transparent),
            0 1px 3px color-mix(in srgb, var(--text) 16%, transparent);
        background: 
            linear-gradient(135deg, 
                color-mix(in srgb, var(--text) 8%, transparent) 0%,
                color-mix(in srgb, var(--text) 4%, transparent) 100%);
    }
    
    .metric:hover {
        transform: none;
        box-shadow: 
            0 2px 8px color-mix(in srgb, var(--text) 12%, transparent),
            inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
        background: 
            linear-gradient(135deg,
                color-mix(in srgb, var(--text) 8%, transparent) 0%,
                color-mix(in srgb, var(--text) 4%, transparent) 100%);
    }
}

/* Redução de movimento - fallback para gradientes simples */
@media (prefers-reduced-motion: reduce) {
    .proj, .proj-card, .metric {
        transition: none !important;
        transform: none !important;
    }
    
    .proj-card {
        background: color-mix(in srgb, var(--text) 6%, transparent) !important;
    }
    
    .proj-card::before,
    .proj-card::after,
    .metric::before {
        display: none !important;
    }
    
    .metric {
        background: color-mix(in srgb, var(--text) 4%, transparent) !important;
    }
    
    .m-value {
        background: none !important;
        background-clip: unset !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
        color: var(--text) !important;
    }
}


/* ========================================
   SEÇÃO SOBRE
========================================= */

/* —— CONTRASTE SUAVE DA FAIXA SOBRE (híbrido) —— */
:root{
  /* faixa ligeiramente contrastante ao tema atual */
  --about-bg: color-mix(in srgb, var(--text) 6%, transparent);
  --about-stroke: color-mix(in srgb, var(--text) 18%, transparent);
  --about-stroke-strong: color-mix(in srgb, var(--text) 32%, transparent);
}
[data-theme="dark"]{
  /* no dark, um pouco mais de contraste para legibilidade */
  --about-bg: color-mix(in srgb, var(--text) 9%, transparent);
}

/* Seção */
.about{
  position:relative;
  background: var(--about-bg);
  border-block: 1px solid var(--about-stroke);
  transition: background-color var(--t-instant), border-color var(--t-instant);
  /* Entrada suave (IO) */
  transform: translateY(18px);
  opacity: 0;
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

.about.entered{
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--t-enter), opacity var(--t-enter);
}

/* Container */
.about-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 40px);
}

/* Cabeçalho */
.about-head{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 44px);
}
@media (max-width: 900px){
  .about-head{ grid-template-columns: 1fr; }
}

.about-identity{ display:flex; gap: 16px; align-items: center; }
.about-logo{
  width: clamp(64px, 7vw, 84px);
  height: clamp(64px, 7vw, 84px);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--about-stroke);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--t-instant);
}
.about-titles{ display:flex; flex-direction:column; gap:4px; }

.about-hl{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.3vw + 1.2rem, 2rem);
}
.about-tag{
  opacity: .8;
  font-size: clamp(.95rem, .4vw + .85rem, 1.05rem);
}

.about-lead{
  max-width: 72ch;
  line-height: 1.75;
  opacity: .9;
  font-size: clamp(1rem, .6vw + .95rem, 1.2rem);
}

/* Destaques */
.about-highlights{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(12px, 2vw, 16px);
  list-style:none;
  padding:0; margin:0;
}
@media (max-width: 900px){
  .about-highlights{ grid-template-columns: 1fr; }
}
.about-item{
  display:flex; gap:12px; align-items:flex-start;
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: 14px;
  background: transparent;              /* sem cartão pesado */
  box-shadow: inset 0 0 0 1px var(--about-stroke);
  transition: transform var(--t-soft), box-shadow var(--t-instant);
  transform: translateZ(0);
  /* Stagger leve (apenas na primeira entrada) */
  animation: none;
}
.about-item:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--about-stroke),
    0 2px 10px color-mix(in srgb, var(--text) 8%, transparent);
}
.about-icon{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; }
.about-item-title{ font-weight: 700; letter-spacing:-.01em; }
.about-item-desc{ opacity:.8; }

/* Quando a seção entrar, atrasos leves para cada item */
.about.entered .about-item{ 
    transition-delay: calc(var(--i,0) * 80ms); /* Mais lento para suavidade */
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .about, .about-item{ transition: none !important; transform:none !important; }
}

/* ========================================
   RESPONSIVIDADE
========================================= */

/* Responsividade - Tablet */
@media (max-width: 1024px) {
    .header-container {
        padding: 0.5rem 1.5rem; /* Ajustado para manter consistência */
    }
    
    /* Logo um pouco menor no tablet */
    .logo {
        height: 72px; /* Reduzido de 80px para 72px no tablet */
    }
    
    .nav-desktop {
        gap: 1.5rem;
    }
    
    .hero {
        padding: clamp(64px, 8vh, 96px) 1.25rem 3rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-content {
        max-width: 640px;
        margin: 0 auto;
    }
    
    .hero-shapes {
        width: clamp(220px, 25vw, 280px);
        height: clamp(280px, 35vh, 350px);
        margin: 0 auto;
    }
}

/* Responsividade - Mobile */
@media (max-width: 768px) {
    .header-container {
        grid-template-columns: 1fr auto;
        gap: 1rem;
        padding: 0.5rem 1rem;
        min-height: 52px;
    }
    
    /* Logo menor no mobile */
    .logo {
        height: 64px; /* Reduzido de 80px para 64px no mobile */
        gap: 0.5rem;
    }
    
    .logo-text {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    
    .nav-desktop {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    /* Padronizar todos os botões no mobile - HIT TARGET 44px */
    .control-btn, .mobile-menu-btn {
        width: 44px;
        height: 44px;
        padding: 0.75rem;
        border-radius: 9999px;
        gap: 0;
    }
    
    /* Botão de tema mobile - apenas ícone, maior e animado */
    #theme-toggle {
        padding: 0.5rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Sobreescrever regras gerais no mobile com maior especificidade */
    #theme-toggle .theme-icon {
        width: 28px !important;
        height: 28px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Desabilitar hover e rotating no mobile */
    #theme-toggle:hover .theme-icon {
        transform: translate(-50%, -50%) !important;
    }
    
    #theme-toggle.rotating .theme-icon {
        transform: translate(-50%, -50%) !important;
    }
    
    #theme-toggle.rotating:hover .theme-icon {
        transform: translate(-50%, -50%) !important;
    }
    
    #theme-toggle .theme-icon-light {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    }
    
    #theme-toggle .theme-icon-dark {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-90deg) scale(0.8) !important;
    }
    
    [data-theme="dark"] #theme-toggle .theme-icon-light {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg) scale(0.8) !important;
    }
    
    [data-theme="dark"] #theme-toggle .theme-icon-dark {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    }
    
    /* Texto do idioma em mobile - apenas PT/EN */
    .lang-text {
        font-size: 0.8125rem;
    }
    
    /* Esconder indicador de idioma no mobile */
    .lang-indicator {
        display: none;
    }
    
    /* Hero responsivo */
    .hero {
        padding: clamp(56px, 8vh, 80px) 1rem 2.25rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .hero-content {
        order: 1;
        text-align: center;
    }
    
    /* Formas vão para o fundo no mobile - minimalismo */
    .hero-shapes {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.15;
        z-index: 0;
        width: 100vw;
        height: 100vh;
        order: 2;
    }
    
    .hero-shapes .geometric-shape {
        opacity: 0.4;
        border-width: 0.5px;
    }
    
    /* Reposicionar formas no mobile - USANDO VERSÃO OTIMIZADA abaixo */
    
    /* CTAs full-width empilhados no mobile */
    .hero-ctas {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cta-primary, .cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .section-content h2 {
        font-size: 1.75rem;
    }
    
    .content-section {
        padding: 5rem 1rem 3rem;
    }
    
    .header-controls {
        gap: 0.5rem;
        justify-self: end;
    }
}

/* ========================================
   SEÇÃO DE CONTATO - DESIGN DA IMAGEM
========================================= */

.contact {
    position: relative;
    background: var(--bg);
    padding: clamp(4rem, 8vw, 8rem) 2rem clamp(1rem, 2vw, 1.5rem);
    transform: translateY(18px);
    opacity: 0;
    transition: background-color var(--t-instant), transform var(--t-enter), opacity var(--t-enter);
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}

.contact.entered {
    transform: translateY(0);
    opacity: 1;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-head {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 4rem);
}

.contact-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    color: var(--text);
}

.contact-sub {
    opacity: 0.85;
    max-width: 72ch;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
    color: var(--text);
}

/* Grid horizontal dos 3 cards */
.contact-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cards menores com bordas neutras por padrão - adaptáveis ao tema */
.contact-card {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    min-height: 280px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color var(--t-instant);
    cursor: pointer;
}

/* Tema escuro - cards mais contrastantes */
[data-theme="dark"] .contact-card {
    background: color-mix(in srgb, var(--text) 12%, transparent);
    border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

/* Tema claro - cards sutis */
[data-theme="light"] .contact-card {
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

/* Bordas coloridas APENAS no hover */
.contact-card[data-channel="linkedin"]:hover {
    border-color: #0077b5;
}

.contact-card[data-channel="whatsapp"]:hover {
    border-color: #25d366;
}

.contact-card[data-channel="email"]:hover {
    border-color: #ea4335;
}

/* Hover effects - mais sutis e adaptáveis */
.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px color-mix(in srgb, var(--text) 25%, transparent);
}

.contact-card[data-channel="linkedin"]:hover {
    box-shadow: 0 15px 30px rgba(0, 119, 181, 0.3);
}

.contact-card[data-channel="whatsapp"]:hover {
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3);
}

.contact-card[data-channel="email"]:hover {
    box-shadow: 0 15px 30px rgba(234, 67, 53, 0.3);
}

/* Link ocupando todo o card */
.contact-link {
    display: flex;
    height: 100%;
    color: var(--text);
    text-decoration: none;
    transition: color var(--t-instant);
}

.contact-link--stack {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    gap: 1.5rem;
}

/* Ícone com círculo colorido - cores mais suaves */
.contact-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}

.contact-card[data-channel="linkedin"] .contact-icon {
    background: linear-gradient(135deg, #0077b5, #005885);
}

.contact-card[data-channel="whatsapp"] .contact-icon {
    background: linear-gradient(135deg, #25d366, #1da851);
}

.contact-card[data-channel="email"] .contact-icon {
    background: linear-gradient(135deg, #ea4335, #c23321);
}

.contact-card:hover .contact-icon {
    transform: scale(1.05);
}

.contact-icon svg {
    width: 28px;
    height: 28px;
    fill: #ffffff;
    opacity: 0.95;
}

/* Conteúdo do card - adaptável aos temas */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.contact-name {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text);
    margin: 0;
    transition: color var(--t-instant);
}

.contact-desc {
    color: color-mix(in srgb, var(--text) 70%, transparent);
    line-height: 1.5;
    font-size: 0.95rem;
    text-align: center;
    max-width: 200px;
    transition: color var(--t-instant);
}

.contact-cta {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}

.contact-card[data-channel="linkedin"]:hover .contact-cta {
    color: #0077b5;
}

.contact-card[data-channel="whatsapp"]:hover .contact-cta {
    color: #25d366;
}

.contact-card[data-channel="email"]:hover .contact-cta {
    color: #ea4335;
}

/* Seta animada */
.contact-cta::after {
    content: "→";
    margin-left: 8px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.contact-card:hover .contact-cta::after {
    opacity: 1;
    transform: translateX(0);
}

/* Faixa final - design moderno e compacto - SEM backdrop-filter para performance */
.contact-footer {
    position: relative;
    margin: clamp(1rem, 2vw, 1.5rem) auto 0;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    max-width: clamp(300px, 80vw, 800px);
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--text) 15%, transparent) 0%,
        color-mix(in srgb, var(--text) 10%, transparent) 50%,
        color-mix(in srgb, var(--text) 15%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    border-radius: 16px;
    text-align: center;
    /* Removido backdrop-filter - usando background mais opaco */
    /* Lazy loading - estado inicial */
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity var(--t-enter),
        transform var(--t-enter),
        background var(--t-instant),
        border-color var(--t-instant);
}

/* Estado carregado - animação de entrada suave */
.contact-footer.lazy-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito de destaque adicional no estado não carregado */
.contact-footer.lazy-unloaded {
    opacity: 0;
    transform: translateY(30px);
}

/* Tema escuro - mais contrastante - SEM backdrop-filter */
[data-theme="dark"] .contact-footer {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--text) 22%, transparent) 0%,
        color-mix(in srgb, var(--text) 16%, transparent) 50%,
        color-mix(in srgb, var(--text) 22%, transparent) 100%);
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

/* Tema claro - mais sutil - SEM backdrop-filter */
[data-theme="light"] .contact-footer {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--text) 12%, transparent) 0%,
        color-mix(in srgb, var(--text) 8%, transparent) 50%,
        color-mix(in srgb, var(--text) 12%, transparent) 100%);
    border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

.contact-footer-text {
    color: var(--text);
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    transition: color var(--t-instant);
    margin: 0;
}

/* Responsividade */
@media (max-width: 1024px) {
    .contact-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-card {
        min-height: 260px;
    }
}

@media (max-width: 768px) {
    .contact-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-card {
        min-height: 240px;
    }
    
    .contact-link--stack {
        padding: 1.5rem;
        gap: 1.25rem;
    }
    
    .contact-icon {
        width: 64px;
        height: 64px;
    }
    
    .contact-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .contact-name {
        font-size: 1.25rem;
    }
    
    .contact-desc {
        font-size: 0.875rem;
    }
}

/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .contact, .contact-card{ transition:none !important; transform:none !important; }
}

/* ================================ */
/* PERFORMANCE SUMMARY - OTIMIZAÇÕES APLICADAS */
/* ================================ */
/* 
1. ✅ Backdrop-filter reduzido de 20+ para elementos críticos (header)
2. ✅ Blur radius reduzido: 20px → 12px (desktop), 8px → 4px (mobile)
3. ✅ Box-shadows simplificadas: múltiplas camadas → single layer
4. ✅ Gradients otimizados: 3+ cores → 2 cores no mobile
5. ✅ Animações pausáveis via Intersection Observer (classes .paused)
6. ✅ Will-change gerenciado dinamicamente
7. ✅ Transform 3D removidos no mobile
8. ✅ Utility classes para consolidar código repetitivo
9. ✅ CSS duplicado removido (formas geométricas mobile)
10. ✅ Preferências de acessibilidade respeitadas
11. ✅ Código CSS ultra-limpo e otimizado
*/

/* Desabilitar hovers em dispositivos touch para performance */
/* Mobile: hovers desabilitados para economia de recursos */
@media (hover: none) {
    .nav-link:hover,
    .control-btn:hover, .mobile-menu-btn:hover, .btn-pill:hover,
    .cta-primary:hover, .cta-secondary:hover {
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        background-color: inherit !important;
    }
}

/* MOBILE: Simplificar gradients complexos para performance */
@media (max-width: 768px) {
    /* Simplificar todos os gradients com 3+ cores para 2 cores no mobile */
    .contact-footer,
    [data-theme="dark"] .contact-footer,
    [data-theme="light"] .contact-footer,
    .final-phrase {
        background: color-mix(in srgb, var(--text) 12%, transparent) !important;
    }
    
    /* Reduzir box-shadows complexos no mobile */
    .contact-card:hover {
        box-shadow: 0 8px 16px color-mix(in srgb, var(--text) 15%, transparent) !important;
    }
}

/* Backdrop filter otimizado para mobile - MÍNIMO NECESSÁRIO */
@media (max-width: 480px) {
    #header.scrolled {
        backdrop-filter: blur(4px) saturate(100%);
        -webkit-backdrop-filter: blur(4px) saturate(100%);
    }
}

/* ================================ */
/* FRASE FINAL SECTION             */
/* ================================ */

.final-phrase {
    padding: var(--space-section-sm) 0;
    border-top: 1px solid var(--border-soft);
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--accent) 3%, transparent),
        color-mix(in srgb, var(--primary) 2%, transparent)
    );
    position: relative;
    overflow: hidden;
}

.final-phrase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, 
        color-mix(in srgb, var(--accent) 8%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.final-phrase-container {
    max-width: var(--container-prose);
    margin: 0 auto;
    padding: 0 var(--space-container);
    text-align: center;
    position: relative;
    z-index: 1;
}

.final-phrase-text {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 1rem 0;
    font-weight: 500;
    font-style: italic;
    text-wrap: balance;
}

.final-phrase-author {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.025em;
    display: block;
}

/* Animação de entrada */
.final-phrase.entered .final-phrase-text {
    animation: fadeInUp 0.8s var(--ease-spring) forwards;
}

.final-phrase.entered .final-phrase-author {
    animation: fadeInUp 0.8s var(--ease-spring) 0.2s forwards;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .final-phrase {
        padding: var(--space-section-xs) 0;
    }
    
    .final-phrase-text {
        font-size: clamp(1.125rem, 4vw, 1.5rem);
        line-height: 1.35;
    }
    
    .final-phrase-author {
        font-size: 0.9rem;
    }
}

/* ================================ */
/* FOOTER SEGUINDO TEMA DO SITE     */
/* ================================ */

.site-footer {
    /* Cores seguindo o tema atual */
    background: var(--bg);
    color: var(--text);
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    margin-top: 0;
    position: relative;
    border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
    
    /* Transição suave para mudança de tema */
    transition: background-color 0.3s var(--ease-spring), 
                color 0.3s var(--ease-spring),
                border-color 0.3s var(--ease-spring);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-container);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.footer-text {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    opacity: 0.8;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-link {
    font-size: 0.875rem;
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s var(--ease-spring);
}

.footer-link:hover {
    opacity: 0.9;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .site-footer {
        padding: clamp(1.5rem, 3vw, 2rem) 0;
    }
    
    .footer-content {
        gap: 0.75rem;
    }
    
    .footer-text {
        font-size: clamp(0.8rem, 2vw, 0.875rem);
    }
    
    .footer-link {
        font-size: 0.8rem;
    }
}

/* ========================================
   FAQ BOT - EXPANSÍVEL REFATORADO
======================================== */

/* ===== FAQ BOT - REFATORADO SEGUINDO PROTOCOLO ===== */

/* Container principal */
.faq-bot {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

/* Container expansível com animação círculo→retângulo */
.faq-bot-container {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    
    /* Background sólido para contraste AA - Otimizado */
    background: var(--faq-surface);
    backdrop-filter: blur(8px);
    border: 1px solid var(--faq-border);
    
    /* Sombra sutil */
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);
    
    /* Transições com nova velocidade - usando variáveis */
    transition: 
        width var(--btn2modal-duration) var(--btn2modal-ease),
        height var(--btn2modal-duration) var(--btn2modal-ease),
        border-radius var(--btn2modal-duration) var(--btn2modal-ease);
}

/* Estado expandido - dimensões atualizadas conforme protocolo */
.faq-bot.expanded .faq-bot-container {
    width: min(92vw, 520px);
    height: min(78vh, 680px);
    border-radius: 16px;
    cursor: default;
    overflow-x: hidden;
    
    /* Glass effect mais pronunciado no estado expandido */
    backdrop-filter: blur(16px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.06);
}

/* Desktop: dimensões maiores */
@media (min-width: 769px) {
    .faq-bot.expanded .faq-bot-container {
        width: clamp(420px, 34vw, 560px);
    }
}

/* Ícones do botão - usando variáveis de timing */
.faq-bot-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-bot-icons .chat-icon,
.faq-bot-icons .close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--faq-text);
    transition: all var(--btn2modal-duration) var(--btn2modal-ease);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-bot-icons .close-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.7);
}

.faq-bot.expanded .faq-bot-icons .chat-icon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.7);
}

.faq-bot.expanded .faq-bot-icons .close-icon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Hover states apenas quando fechado */
.faq-bot:not(.expanded) .faq-bot-container:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Conteúdo do modal */
.faq-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.85);
    transition: 
        opacity var(--btn2modal-duration) var(--btn2modal-ease),
        transform var(--btn2modal-duration) var(--btn2modal-ease);
    pointer-events: none;
    
    /* Container scroll com overscroll-behavior - SEM SCROLL HORIZONTAL */
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
}

.faq-bot.expanded .faq-content {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Header do modal com role="dialog" aria-modal="true" */
.faq-modal-header {
    padding: var(--faq-space-xl) var(--faq-space-xl) var(--faq-space-lg);
    background: var(--faq-surface);
    border-bottom: 1px solid var(--faq-border);
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: var(--faq-space-md);
    position: relative;
}

.faq-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--faq-text);
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    grid-column: 2;
}

/* Botão voltar - primeira coluna */
.faq-back-btn {
    grid-column: 1;
    justify-self: start;
}

/* Botão do header (close) - terceira coluna */
.faq-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--faq-space-sm);
    padding: var(--faq-space-md);
    grid-column: 3;
    justify-self: end;
    background: transparent;
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-sm);
    cursor: pointer;
    transition: all var(--t-soft);
    color: var(--faq-text);
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    min-width: 44px;
}

.faq-close-btn:hover {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    color: var(--faq-accent);
}

.faq-close-btn:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 2px;
}

.faq-close-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    transition: transform var(--t-soft);
}

.faq-close-btn:hover svg {
    transform: scale(1.1);
}

/* Botão voltar - só visível dentro das respostas */
.faq-back-btn {
    display: none; /* Oculto por padrão */
    align-items: center;
    justify-content: center;
    padding: var(--faq-space-md);
    background: transparent;
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-sm);
    cursor: pointer;
    transition: all var(--t-soft);
    color: var(--faq-text);
    min-height: 44px;
    min-width: 44px;
    grid-column: 1;
    justify-self: start;
}

/* Mostrar botão voltar apenas quando uma resposta está ativa */
.faq-answer.active ~ .faq-modal-header .faq-back-btn,
.faq-answer.active + .faq-modal-header .faq-back-btn,
.faq-content:has(.faq-answer.active) .faq-back-btn {
    display: flex;
}

.faq-back-btn:hover {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    color: var(--faq-accent);
}

.faq-back-btn:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 2px;
}

.faq-back-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    transition: transform var(--t-soft);
}

.faq-back-btn:hover svg {
    transform: scale(1.1);
}

/* Container de perguntas */
.faq-questions {
    flex: 1;
    padding: var(--faq-space-lg) var(--faq-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-md);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--faq-muted) transparent;
}

.faq-questions::-webkit-scrollbar {
    width: 4px;
}

.faq-questions::-webkit-scrollbar-track {
    background: transparent;
}

.faq-questions::-webkit-scrollbar-thumb {
    background: var(--faq-muted);
    border-radius: 2px;
}

/* Botões de perguntas com altura mínima 44px para acessibilidade */
.faq-question {
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    padding: var(--faq-space-lg) var(--faq-space-xl);
    text-align: left;
    cursor: pointer;
    transition: all var(--t-soft);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--faq-text);
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-question::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    color: var(--faq-muted);
    transition: all var(--t-soft);
    flex-shrink: 0;
}

.faq-question:hover,
.faq-question:focus-visible {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03);
    outline: none;
}

.faq-question:hover::after,
.faq-question:focus-visible::after {
    color: var(--faq-accent);
    transform: translateX(4px);
}

/* Container de respostas */
.faq-answers {
    flex: 1;
    padding: var(--faq-space-lg) var(--faq-space-xl) 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--faq-muted) transparent;
    display: none;
}

.faq-answers.active {
    display: block;
}

.faq-answers::-webkit-scrollbar {
    width: 4px;
}

.faq-answers::-webkit-scrollbar-track {
    background: transparent;
}

.faq-answers::-webkit-scrollbar-thumb {
    background: var(--faq-muted);
    border-radius: 2px;
}

/* Resposta individual */
.faq-answer {
    display: none;
    padding-bottom: var(--faq-space-xl);
}

.faq-answer.active {
    display: block;
    animation: fadeInScale var(--btn2modal-duration) var(--btn2modal-ease);
}

/* Header da resposta com SVG + título */
.faq-header {
    display: flex;
    align-items: center;
    gap: var(--faq-space-md);
    margin-bottom: var(--faq-space-lg);
    padding-bottom: var(--faq-space-md);
    border-bottom: 1px solid var(--faq-border);
}

.faq-header svg {
    color: var(--faq-accent);
    flex-shrink: 0;
}

.faq-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--faq-text);
    margin: 0;
}

/* Conteúdo da resposta - garantir contraste AA */
.faq-answer .faq-content {
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
    overflow: visible;
}

.faq-answer .faq-content p {
    color: var(--faq-text);
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0 0 1rem 0;
}

.faq-answer .faq-content p:last-child {
    margin-bottom: 0;
}

/* Nota especial para "soluções sob medida" */
.faq-answer .faq-content .note {
    padding: var(--faq-space-md);
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-sm);
    font-size: 0.875rem;
    color: var(--faq-text);
    margin-top: var(--faq-space-lg);
}

/* Grade de serviços - design limpo e performático */
.pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--faq-space-md);
    margin: var(--faq-space-lg) 0;
}

/* Pills individuais - minimalista preto/branco */
.pill {
    display: flex;
    align-items: flex-start;
    gap: var(--faq-space-md);
    padding: var(--faq-space-lg);
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--faq-text);
    word-wrap: break-word;
    hyphens: auto;
}

.pill svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--faq-text);
    opacity: 0.8;
}

.pill span {
    font-weight: 500;
    word-wrap: break-word;
    hyphens: auto;
}

/* Responsividade para mobile */
@media (max-width: 640px) {
    .pill-grid {
        grid-template-columns: 1fr;
        gap: var(--faq-space-sm);
    }
    
    .pill {
        padding: var(--faq-space-md);
        font-size: 0.875rem;
    }
}

/* Grade de benefícios - Como Ajudamos */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--faq-space-md);
    margin: var(--faq-space-lg) 0;
}

/* Items individuais de benefícios */
.item {
    display: flex;
    align-items: center;
    gap: var(--faq-space-md);
    padding: var(--faq-space-lg);
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--faq-text);
    word-wrap: break-word;
    hyphens: auto;
}

.item svg {
    flex-shrink: 0;
    color: var(--faq-text);
    opacity: 0.8;
}

.item span {
    line-height: 1.4;
    word-wrap: break-word;
    hyphens: auto;
}

/* Responsividade para mobile - items */
@media (max-width: 640px) {
    .item-grid {
        grid-template-columns: 1fr;
        gap: var(--faq-space-sm);
    }
    
    .item {
        padding: var(--faq-space-md);
        font-size: 0.875rem;
    }
}

/* Grade de métricas - Resultados Comprovados */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--faq-space-md);
    margin: var(--faq-space-lg) 0;
}

/* Métricas individuais - design limpo para FAQ */
.faq-answer .metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--faq-space-xl);
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    gap: var(--faq-space-sm);
    position: static;
    overflow: visible;
    transition: none;
    transform: none;
    box-shadow: none;
}

.faq-answer .metric::before {
    display: none;
}

.faq-answer .metric svg {
    color: var(--faq-text);
    opacity: 0.8;
    margin-bottom: var(--faq-space-xs);
}

.faq-answer .metric .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--faq-text);
    line-height: 1.1;
    margin: 0;
}

.faq-answer .metric .metric-label {
    font-size: 0.875rem;
    color: var(--faq-text);
    opacity: 0.9;
    line-height: 1.3;
    margin: 0;
    word-wrap: break-word;
    hyphens: auto;
    text-align: center;
}

/* Responsividade para mobile - métricas */
@media (max-width: 640px) {
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--faq-space-sm);
    }
    
    .faq-answer .metric {
        padding: var(--faq-space-lg);
    }
    
    .faq-answer .metric .metric-value {
        font-size: 1.25rem;
    }
    
    .faq-answer .metric .metric-label {
        font-size: 0.8rem;
    }
}

/* Refinamento para estrutura hierárquica - Nossos Clientes */
.faq-answer .item div {
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-xs);
}

.faq-answer .item strong {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--faq-text);
    line-height: 1.3;
}

.faq-answer .item span {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--faq-text);
    opacity: 0.8;
    line-height: 1.4;
}

/* Responsividade para estrutura hierárquica */
@media (max-width: 640px) {
    .faq-answer .item strong {
        font-size: 0.9rem;
    }
    
    .faq-answer .item span {
        font-size: 0.8rem;
    }
}

/* CTA links com cores semânticas */
.faq-answer .cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--faq-space-sm);
    color: var(--faq-text);
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: var(--faq-space-lg);
    transition: all var(--t-soft);
}

.faq-answer .cta-link:hover {
    color: var(--faq-muted);
    transform: translateX(4px);
    text-decoration: none;
}

.faq-answer .cta-link svg {
    transition: transform var(--t-soft);
}

.faq-answer .cta-link:hover svg {
    transform: translateX(2px);
}

/* Canais de contato com SVGs inline (WhatsApp/LinkedIn/E-mail) */
.contact-channels {
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-md);
    margin: var(--faq-space-lg) 0;
    max-width: 100%;
    overflow-x: hidden;
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: var(--faq-space-md);
    padding: var(--faq-space-lg);
    background: var(--faq-surface);
    backdrop-filter: blur(8px);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: all var(--t-soft);
    min-height: 44px;
}

.contact-channel:hover {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

.contact-channel svg {
    color: var(--faq-accent);
    flex-shrink: 0;
}

.contact-channel div {
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-xs);
}

.contact-channel strong {
    color: var(--faq-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.contact-channel span {
    color: var(--faq-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Bordas temáticas por canal - design limpo */
.contact-channel:nth-child(1) {
    border-color: #25D366; /* WhatsApp verde */
}

.contact-channel:nth-child(1) svg {
    color: #25D366;
}

.contact-channel:nth-child(2) {
    border-color: #0077B5; /* LinkedIn azul */
}

.contact-channel:nth-child(2) svg {
    color: #0077B5;
}

.contact-channel:nth-child(3) {
    border-color: #EA4335; /* Email vermelho */
}

.contact-channel:nth-child(3) svg {
    color: #EA4335;
}

/* Estilo específico para botão LinkedIn */
.contact-channel.linkedin-modal-trigger {
    background: var(--faq-surface);
    border: 1px solid #0077B5;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}

.contact-channel.linkedin-modal-trigger:hover {
    background: var(--faq-surface);
    border-color: #0077B5;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Estilo para botão LinkedIn na seção de contatos principal */
.contact-link.linkedin-modal-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    text-align: left;
    width: 100%;
    padding: 0;
}

/* Prefers reduced motion - reduzir transições conforme protocolo */
@media (prefers-reduced-motion: reduce) {
    .faq-bot-container,
    .faq-content,
    .faq-question,
    .contact-channel {
        transition: none !important;
    }
    
    .faq-question:hover,
    .contact-channel:hover {
        transform: none !important;
    }
    
    .faq-answer.active {
        animation: none !important;
    }
}

/* Animação fade in scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsividade mobile */
@media (max-width: 768px) {
    .faq-bot {
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .faq-bot-container {
        width: 56px;
        height: 56px;
    }
    
    .faq-modal-header {
        padding: var(--faq-space-lg) var(--faq-space-lg) var(--faq-space-md);
    }
    
    .faq-modal-header h3 {
        font-size: 1.125rem;
    }
    
    .faq-questions,
    .faq-answers {
        padding: var(--faq-space-md) var(--faq-space-lg);
    }
    
    .faq-question {
        padding: var(--faq-space-md) var(--faq-space-lg);
        font-size: 0.875rem;
    }
}


.faq-bot.expanded .faq-content {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Header do modal */
.faq-modal-header {
    padding: var(--faq-space-xl) var(--faq-space-xl) var(--faq-space-lg);
    background: var(--faq-surface);
    border-bottom: 1px solid var(--faq-border);
    flex-shrink: 0;
    border-radius: var(--faq-radius-lg) var(--faq-radius-lg) 0 0;
}

/* Container de perguntas */
.faq-questions {
    flex: 1;
    padding: var(--faq-space-lg) var(--faq-space-xl) var(--faq-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--faq-space-md);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--faq-muted) transparent;
}

.faq-questions::-webkit-scrollbar {
    width: 4px;
}

.faq-questions::-webkit-scrollbar-track {
    background: transparent;
}

.faq-questions::-webkit-scrollbar-thumb {
    background: var(--faq-muted);
    border-radius: 2px;
}

/* Botões de perguntas com acessibilidade */
.faq-question {
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    padding: var(--faq-space-lg) var(--faq-space-xl);
    text-align: left;
    cursor: pointer;
    transition: all var(--t-soft);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--faq-text);
    position: relative;
    min-height: 44px; /* Acessibilidade - toque mínimo */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-question::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    color: var(--faq-muted);
    transition: all var(--t-soft);
    flex-shrink: 0;
}

.faq-question:hover,
.faq-question:focus-visible {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);
    outline: none;
}

.faq-question:hover::after,
.faq-question:focus-visible::after {
    color: var(--faq-accent);
    transform: translateX(4px);
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .faq-bot-container,
    .faq-content,
    .faq-question {
        transition: none;
    }
    
    .faq-question:hover {
        transform: none;
    }
}

.faq-answers::-webkit-scrollbar {
    width: 4px;
}

.faq-answers::-webkit-scrollbar-track {
    background: transparent;
}

.faq-answers::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

[data-theme="dark"] .faq-answers::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

/* Mini card da resposta */
.answer-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

[data-theme="dark"] .answer-card {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

.answer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.answer-icon {
    width: 24px;
    height: 24px;
    color: var(--faq-text);
    flex-shrink: 0;
}

[data-theme="dark"] .answer-icon {
    color: var(--faq-text);
}

.answer-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--faq-text);
    margin: 0;
}

[data-theme="dark"] .answer-title {
    color: var(--faq-text);
}

.answer-content {
    color: var(--faq-text);
    line-height: 1.5;
    font-size: 0.875rem;
    margin: 0;
}

[data-theme="dark"] .answer-content {
    color: var(--faq-text);
}

/* CTA de contato */
.answer-cta {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.cta-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--faq-text);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

[data-theme="dark"] .cta-link {
    background: var(--faq-surface);
    border-color: var(--faq-border);
    color: var(--faq-text);
}

.cta-link:hover {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
    transform: translateY(-1px);
}

[data-theme="dark"] .cta-link:hover {
    background: var(--faq-surface);
    border-color: var(--faq-accent);
}

.cta-link svg {
    width: 14px;
    height: 14px;
    color: currentColor;
}

/* FAQ Bot - Mini Cards */
.mini-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.mini-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--faq-text);
    transition: all 0.2s ease;
    text-decoration: none;
}

.mini-card:hover {
    background: var(--faq-accent);
    border-color: var(--faq-border);
    transform: translateY(-1px);
}

.mini-card svg {
    flex-shrink: 0;
    color: var(--faq-text);
}

.mini-card.metric {
    background: linear-gradient(135deg, var(--faq-surface) 0%, var(--faq-accent) 100%);
    font-weight: 500;
}

.mini-card.link {
    cursor: pointer;
    color: inherit;
}

.mini-card.link:hover {
    color: var(--faq-text);
}

/* Dark theme variations */
[data-theme="dark"] .mini-card {
    background: var(--faq-surface);
    border-color: var(--faq-border);
    color: var(--faq-text);
}

[data-theme="dark"] .mini-card:hover {
    background: var(--faq-accent);
    border-color: var(--faq-border);
}

[data-theme="dark"] .mini-card svg {
    color: var(--faq-text);
}

[data-theme="dark"] .mini-card.metric {
    background: linear-gradient(135deg, var(--faq-surface) 0%, var(--faq-accent) 100%);
}

[data-theme="dark"] .mini-card.link:hover {
    color: var(--faq-text);
}

.mini-cards.contact {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.mini-cards.contact .mini-card {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
}

/* Answer CTA Button Override */
.faq-answer .answer-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--faq-text);
    color: var(--faq-bg);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.faq-answer .answer-cta:hover {
    background: #333;
    transform: translateY(-1px);
}

[data-theme="dark"] .faq-answer .answer-cta {
    background: var(--faq-surface);
    color: var(--faq-text);
}

[data-theme="dark"] .faq-answer .answer-cta:hover {
    background: var(--faq-accent);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse animation */
.faq-bot-container::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
    z-index: -2;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

[data-theme="dark"] .faq-bot-container::after {
    background: rgba(0, 0, 0, 0.2);
}

.faq-bot.expanded .faq-bot-container::after {
    opacity: 0;
}

/* Prevenir pseudo-elementos indevidos no modal expandido */
.faq-bot.expanded .faq-content::before,
.faq-bot.expanded .faq-content::after {
    display: none;
}

.faq-bot.expanded .faq-modal-header::before,
.faq-bot.expanded .faq-modal-header::after {
    display: none;
}

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

/* Sistema Unificado e Otimizado para Respostas FAQ */

/* Base unificada para todas as respostas */
.faq-answer {
    background: var(--faq-surface);
    border: 2px solid var(--faq-border);
    border-radius: 16px;
    padding: 28px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

/* Variações visuais simples via classes */
.faq-answer--accent-left {
    border-left-width: 6px;
    border-left-color: var(--faq-accent);
}

.faq-answer--accent-top {
    border-top-width: 6px;
    border-top-color: var(--faq-accent);
}

.faq-answer--accent-right {
    border-right-width: 6px;
    border-right-color: var(--faq-accent);
}

.faq-answer--accent-bottom {
    border-bottom-width: 6px;
    border-bottom-color: var(--faq-accent);
}

/* Cards de Contato Otimizados com Classes Diretas */
.contact-channel {
    padding: 16px 24px;
    margin: 12px 0;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    color: white;
}

.contact-channel--whatsapp {
    background: #25D366;
    border-color: #25D366;
}

.contact-channel--whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.contact-channel--email {
    background: #EA4335;
    border-color: #EA4335;
}

.contact-channel--email:hover {
    background: #D33B2C;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 67, 53, 0.4);
}

.contact-channel--linkedin {
    background: #0077B5;
    border-color: #0077B5;
}

.contact-channel--linkedin:hover {
    background: #005885;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}

/* SOLUÇÃO AGRESSIVA: Esconder TODOS os close-icons exceto os específicos */
.faq-bot.expanded .close-icon {
    display: none !important;
}

/* ============================= */
/*         MODAL LINKEDIN        */
/* ============================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
    transform: scale(0.95) translateY(20px);
    transition: all 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.modal-close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

.modal-close:hover {
    background: var(--surface);
    border-color: var(--text);
}

.modal-body {
    padding: 24px;
    text-align: center;
}

.modal-icon {
    margin-bottom: 16px;
    opacity: 0.9;
}

.modal-body p {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.modal-body p:last-child {
    margin-bottom: 0;
    font-weight: 500;
    opacity: 0.9;
}

.modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: center;
}

.modal-btn-primary {
    background: #0077B5;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.modal-btn-primary:hover {
    background: #005885;
    transform: translateY(-1px);
}

/* Responsividade do modal */
@media (max-width: 640px) {
    .modal-content {
        width: 95%;
        max-width: none;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }
    
    .modal-header h3 {
        font-size: 1.1rem;
    }
    
    .modal-body p {
        font-size: 0.9rem;
    }
}

/* Mostrar apenas os corretos */
.faq-bot.expanded .faq-bot-icons .close-icon {
    display: flex !important;
}

/* SOLUÇÃO EXTREMA: Bloquear qualquer pseudo-elemento que possa criar "X" */
.faq-bot.expanded *::before,
.faq-bot.expanded *::after {
    content: none !important;
    display: none !important;
}

/* Preservar apenas o pulse do container */
.faq-bot.expanded .faq-bot-container::after {
    content: '' !important;
    display: block !important;
    opacity: 0 !important;
}

/* SOLUÇÃO FINAL: ELIMINAR TODOS OS CLOSE-ICONS NO FAQ */
.faq-bot.expanded .close-icon,
.faq-bot.expanded [class*="close"],
.faq-bot.expanded [class*="Close"],
.faq-bot.expanded [id*="close"],
.faq-bot.expanded [id*="Close"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 0 !important;
    height: 0 !important;
}

/* SOLUÇÃO DIAGNÓSTICA: Esconder completamente os ícones do botão FAQ */
.faq-bot.expanded .faq-bot-icons {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
}

/* RESTAURAR: Botão de fechar no canto superior direito do modal */
.faq-bot.expanded .faq-close-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 3 !important;
    justify-self: end !important;
    align-items: center !important;
    justify-content: center !important;
}

.faq-bot.expanded .faq-close-btn svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* GARANTIR: Header do modal mantém estrutura correta */
.faq-bot.expanded .faq-modal-header {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    align-items: center !important;
}

.faq-bot.expanded .faq-modal-header h3 {
    grid-column: 2 !important;
    text-align: center !important;
}