/* =========================================
   PARTE 0: WEB FONTS DA MARCA
   ========================================= */

/* TGS Perfect Condensed — fonte de títulos (1 peso disponível) */
@font-face {
    font-family: 'TGS Perfect Condensed';
    src: url('assets/fonts/TGSPerfectCondensed.woff2') format('woff2'),
         url('assets/fonts/TGSPerfectCondensed.woff') format('woff');
    font-weight: 400 700; /* range para o browser sintetizar peso quando preciso */
    font-style: normal;
    font-display: swap;
}

/* Hando — fonte de corpo (5 pesos, WOFF2 com fallback TTF) */
@font-face {
    font-family: 'Hando';
    src: url('assets/fonts/Hando-Light.woff2') format('woff2'),
         url('assets/fonts/Hando-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hando';
    src: url('assets/fonts/Hando-Regular.woff2') format('woff2'),
         url('assets/fonts/Hando-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hando';
    src: url('assets/fonts/Hando-Medium.woff2') format('woff2'),
         url('assets/fonts/Hando-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hando';
    src: url('assets/fonts/Hando-SemiBold.woff2') format('woff2'),
         url('assets/fonts/Hando-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hando';
    src: url('assets/fonts/Hando-Bold.woff2') format('woff2'),
         url('assets/fonts/Hando-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   PARTE 1: VARIÁVEIS, BASE E HERO PREMIUM
   ========================================= */

:root {
    /* Paleta — cores da marca ONE preservadas */
    --cor-primaria: #9500c8;       /* Roxo signature ONE */
    --cor-secundaria: #481066;     /* Roxo escuro ONE */
    --cor-fundo: #fafafa;          /* Off-white institucional */
    --cor-texto: #0F172A;          /* slate-900 — body institucional */
    --cor-branco: #FFFFFF;

    /* Tokens semânticos — neutros + status */
    --brand:         #9500c8;      /* Roxo ONE (signature) */
    --brand-strong:  #481066;      /* Roxo ONE escuro (pressed/dark surfaces) */
    --brand-soft:    rgba(149, 0, 200, 0.08); /* Roxo ONE 8% — backgrounds discretos */
    --ink:           #0F172A;      /* slate-900 — texto institucional */
    --ink-muted:     #334155;      /* slate-700 — body alternativo */
    --ink-soft:      #64748B;      /* slate-500 — captions, labels */
    --paper:         #fafafa;      /* off-white — fundo de página */
    --paper-card:    #FFFFFF;      /* superfície de card */
    --line-subtle:   #E2E8F0;      /* slate-200 — bordas sutis */
    --line-hi:       #CBD5E1;      /* slate-300 — bordas com destaque */
    --success:       #059669;      /* emerald-600 — verde de segurança/status ok */
    --warn:          #D97706;      /* amber-600 — atenção */
    --danger:        #DC2626;      /* red-600 — erro/destructive */

    /* Glow/halo do roxo claro (#b833ea = --acento-soft) */
    --acento-glow-bg:     rgba(184, 51, 234, 0.12);
    --acento-glow-border: rgba(184, 51, 234, 0.28);
    --acento-glow-text:   #f0c5ff;       /* magenta-clara AAA sobre dark */

    /* Fontes da marca — carregadas via @font-face acima */
    --fonte-titulos: 'TGS Perfect Condensed', 'Impact', 'Helvetica Neue Condensed', 'Arial Narrow', sans-serif;
    --fonte-textos: 'Hando', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-textos);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4%;
}

/* =========================================
   ANIMAÇÕES (KEYFRAMES)
   ========================================= */
@keyframes surgirCima {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes piscarOnline {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; box-shadow: 0 0 2px #b833ea; }
}

/* Classes utilitárias de animação */
.animar-fade-up {
    opacity: 0;
    animation: surgirCima 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--delay, 0s);
}

/* =========================================
   HERO PREMIUM (DARK MODE)
   ========================================= */
.hero-premium {
    background-color: #07010a;
    position: relative;
    padding: 160px 0 100px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    color: var(--cor-branco);
    z-index: 1;
}

.grade-perspectiva {
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 50%;
    background-image: 
        linear-gradient(rgba(149, 0, 200, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 0, 200, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    z-index: -1;
    opacity: 0.5;
}

.luz-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -2;
}

.orb-primaria {
    width: 60vw; height: 60vw;
    background: var(--cor-secundaria);
    top: -30vw; left: -10vw;
    opacity: 0.6;
}

.orb-secundaria {
    width: 40vw; height: 40vw;
    background: var(--cor-primaria);
    bottom: 0; right: -10vw;
    opacity: 0.4;
    animation-delay: 2s;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero-text-center {
    text-align: center;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.badge-tech {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.pulse-dot {
    width: 8px; height: 8px;
    background-color: #b833ea;
    border-radius: 50%;
    box-shadow: 0 0 10px #b833ea;
    animation: piscarOnline 2s infinite;
}

.hero-title {
    font-family: var(--fonte-titulos);
    font-size: 4.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.text-gradient {
    background: linear-gradient(to right, #b833ea, #9500c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #b3b3b3;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 650px;
}

.hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    justify-content: center;
}






.stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #888;
    font-size: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.linha-separadora {
    width: 1px; height: 20px;
    background: rgba(255, 255, 255, 0.2);
}

/* MOCKUP DO SISTEMA (BASEADO NO REAL)
   ========================================= */
/* BUILD-024 Fix 5 — legacy hero mockup class deleted (3x cascade leak).
   Componente canônico agora é chrome-window--hero (style.css ~10047).
   mockup-body também deletado (dead code documentado por BUILD-023). */

/* Sidebar refinada parecida com a original */
.dash-sidebar {
    width: 60px;
    background: rgba(0,0,0,0.6);
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; align-items: center; padding: 15px 0; gap: 20px;
}

.dash-logo { width: 30px; opacity: 0.9; }

.dash-icon-list {
    display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center;
}

.dash-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.1); }
.dash-icon.ativo { background: var(--cor-primaria); }

/* Área Principal com os Gráficos */
.dash-main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 15px; background: rgba(0,0,0,0.2); }

/* Topo: KPIs Roxos */
.dash-kpi-row { display: flex; gap: 15px; height: 50px; }
.dash-kpi { flex: 1; background: var(--cor-primaria); border-radius: 6px; opacity: 0.85; }

/* Meio: Pizza e Barras */
.dash-middle-row { display: flex; gap: 15px; height: 120px; }
.dash-box { background: rgba(255,255,255,0.04); border-radius: 8px; flex: 1; border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; padding: 15px; }

.fake-pie {
    width: 80px; height: 80px; border-radius: 50%;
    /* Recriando as cores do seu gráfico de pizza (Roxo e Coral) */
    background: conic-gradient(var(--cor-primaria) 0% 64%, #ff6b6b 64% 100%);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.dash-bars-box { flex-direction: column; gap: 12px; align-items: flex-start; justify-content: center; }
.fake-bar { height: 10px; background: linear-gradient(90deg, #e290ff, var(--cor-primaria)); border-radius: 5px; opacity: 0.9; }

/* Base: Gráfico de Área com picos */
.dash-area-chart { flex: 1; background: rgba(255,255,255,0.04); border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); position: relative; overflow: hidden; }

.fake-area {
    position: absolute; bottom: 0; left: 0; right: 0; height: 80%;
    background: linear-gradient(180deg, rgba(226, 144, 255, 0.5) 0%, rgba(149, 0, 200, 0) 100%);
    /* Desenhando os picos exatos do seu gráfico de área */
    clip-path: polygon(0% 100%, 0% 40%, 15% 80%, 30% 20%, 45% 60%, 60% 10%, 75% 50%, 90% 20%, 100% 60%, 100% 100%);
}

/* =========================================
   SEÇÃO PIPELINE (MODELO DE NEGÓCIO)
   ========================================= */
.secao-pipeline {
    padding: 120px 0;
    background-color: var(--cor-branco);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
}

.pipeline-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 80px;
}

.pipeline-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pipeline-sub {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

.tag-discreta {
    display: inline-block;
    color: var(--cor-secundaria);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 4px;
}

/* O Fluxo (Gráfico Horizontal) */
.pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.flow-node {
    flex: 1;
    background-color: var(--cor-branco);
    border: 1px solid #eaeaea;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;
}

.flow-node:hover {
    transform: translateY(-3px);
}

.node-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(149, 0, 200, 0.05);
    color: var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.node-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.6rem;
    color: var(--cor-secundaria);
    margin-bottom: 10px;
}

.node-content p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Destaque para o Afiliado (O Centro do Negócio) */
.destaque-neon {
    border: 2px solid var(--cor-primaria);
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(149, 0, 200, 0.15);
}

.destaque-neon:hover {
    transform: scale(1.05) translateY(-3px);
}

.destaque-neon .node-icon {
    background: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
    color: var(--cor-branco);
    box-shadow: 0 10px 20px rgba(149, 0, 200, 0.3);
}

/* Conexões e Animação de Dados (Pulsos) */
.flow-connection {
    width: 100px; /* Distância entre os cards */
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

.connection-line {
    width: 100%;
    height: 4px;
    background: #eeeeee;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Bolinha de energia passando pelo fio */
.data-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 15px;
    height: 15px;
    background: var(--cor-primaria);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 15px var(--cor-primaria), 0 0 30px var(--cor-primaria);
}

.pulse-2 {
    animation-delay: 1.25s; /* Começa depois que o primeiro pulso termina */
}

/* Estatísticas minimalistas abaixo do fluxo */
.pipeline-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 80px;
}

.stat-box-minimal {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-primaria);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.stat-divider {
    width: 2px;
    height: 40px;
    background: #eaeaea;
}

/* Responsividade do Pipeline */
@media (max-width: 900px) {
    .pipeline-flow {
        flex-direction: column;
        gap: 20px;
    }
    
    .destaque-neon {
        transform: scale(1);
    }
    .destaque-neon:hover {
        transform: translateY(-3px);
    }
    
    .flow-connection {
        width: 4px;
        height: 60px;
    }
    
    .connection-line {
        width: 4px;
        height: 100%;
    }
    
    .data-pulse {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    }

/* =========================================
   SEÇÃO SOLUÇÕES (BENTO BOX LAYOUT)
   ========================================= */
.secao-bento {
    padding: 120px 0;
    background-color: var(--cor-fundo);
    overflow: hidden;
}

.bento-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px;
}

.bento-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-secundaria);
    line-height: 1.1;
    margin-bottom: 16px;
    text-transform: uppercase;
}





/* .icon-wrap moved to unified system at the end of file (V3) */








.pulse-ring {
    width: 100px;
    height: 100px;
    border: 4px solid var(--cor-primaria);
    border-radius: 50%;
    position: relative;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border: 4px solid rgba(149, 0, 200, 0.3);
    border-radius: 50%;
}

.bento-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cor-branco);
    text-decoration: none;
    font-weight: bold;
    margin-top: 24px;
    font-family: var(--fonte-titulos);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.bento-link:hover { color: var(--cor-primaria); }

/* =========================================
   ANIMAÇÃO DE SCROLL (REVEAL DA PÁGINA)
   ========================================= */
.animar-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--delay, 0s);
}

.animar-scroll.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   CONSOLIDAÇÃO DE RESPONSIVIDADE (TABLET E MOBILE)
   ========================================= */

/* Ajustes para Tablets (até 1024px) */
@media (max-width: 1024px) {
    /* Ajusta grids principais para 1 coluna (bento já coberto por V4) */
    .sobre-grid,
    .pipeline-flow,
    .software-recursos {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Reduz tamanhos de fontes do Hero */
    .hero-title {
        font-size: 3.5rem;
    }

}

/* =========================================
   AJUSTES FINOS PARA CELULAR (ATÉ 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Otimização de espaço no topo da Home */
    .hero-premium { 
        padding: 110px 0 50px; /* Menos espaço vazio em cima */
    }

    /* 2. Título menor para não quebrar as palavras errado */
    .hero-title { 
        font-size: 2.2rem !important; /* Diminuímos de 2.8rem para 2.2rem */
        line-height: 1.15;
        margin-bottom: 16px;
    }

    /* 3. Subtítulo mais direto */
    .hero-subtitle { 
        font-size: 1rem !important; 
        margin-bottom: 24px; 
        padding: 0; 
    }

    /* 4. Botões empilhados e fáceis de clicar com o dedão */
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-bottom: 30px;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* 5. Estatísticas menores para caberem lado a lado */
    .stats-row {
        font-size: 0.85rem;
        gap: 12px;
    }
    
    .linha-separadora {
        height: 15px;
    }

    /* BUILD-024 Fix 5 — legacy hero mockup class + mockup-body deletados (cascade leak). */

    .dash-sidebar {
        width: 100%;
        flex-direction: row;
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        justify-content: center;
    }
    
    .dash-icon-list {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }
    
    .dash-main { 
        padding: 12px; 
        gap: 12px; 
    }
    
    .dash-kpi-row { 
        height: 35px; /* Barras roxas mais finas */
    }
    
    .dash-middle-row { 
        flex-direction: column; 
        height: auto; 
    }

    /* Outros ajustes de seções (mantidos para consistência) */
    .secao-pipeline, .secao-bento, .secao-diferenciais-dark, 
    .secao-software-showcase, .secao-cta {
        padding: 80px 0;
    }

    h2 { font-size: 2.5rem !important; } /* Força títulos de seções a ficarem menores */

    .cta-botoes {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    
    /* Ajustes no CTA Final */
    .cta-box {
        padding: 50px 20px;
        border-radius: 20px;
    }

    /* Pipeline (Modelo de Negócio) Vertical */
    .flow-connection {
        width: 4px;
        height: 50px;
        margin: 0 auto;
    }
    .connection-line {
        width: 4px;
        height: 100%;
    }
    .data-pulse {
        top: 0;
        left: -5px; /* Centraliza a bolinha na linha vertical */
    }
    
}
/* =========================================
   HEADER PREMIUM (GLASSMORPHISM)
   ========================================= */
.header-premium {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Efeito Vidro Escuro */
    background: rgba(7, 1, 10, 0.75); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px; /* Altura padrão da barra */
}

.logo-link {
    display: flex;
    align-items: center;
}

.header-logo {
    height: 35px; /* Ajuste conforme a proporção da sua logo */
    width: auto;
}

/* Navegação Desktop */
.nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}

.nav-link:hover, .nav-link.ativo {
    color: var(--cor-branco);
}

.nav-seta {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

/* Sistema de Dropdown (Hover) */
.nav-item-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px;
    background: rgba(20, 5, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Alinha o dropdown do afiliado para a direita para não vazar da tela */
.dropdown-right {
    left: auto;
    right: 0;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-item-dropdown:hover .nav-seta,
.nav-item-dropdown.is-open .nav-seta {
    transform: rotate(180deg);
}

/* Reset de botão para os triggers de dropdown — força cor light (header é dark) */
button.nav-link,
button.nav-link--dropdown,
button.btn-login-afiliado {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: rgba(255, 255, 255, 0.78);
}
button.nav-link:hover,
button.nav-link--dropdown:hover,
button.nav-link[aria-expanded="true"],
button.nav-link--dropdown[aria-expanded="true"] {
    color: #fff;
}

button.btn-login-afiliado {
    /* Mantém box do botão de afiliado mesmo após reset acima */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dropdown-item i {
    color: var(--cor-primaria);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.dropdown-item:hover {
    background: rgba(149, 0, 200, 0.15);
    color: var(--cor-branco);
    padding-left: 20px; /* Efeito de seta ao passar o mouse */
}

/* Botão Área do Afiliado */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-login-afiliado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--cor-branco);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-login-afiliado:hover {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

/* Menu Mobile (Oculto no Desktop) */
.btn-mobile-menu {
    display: none;
    background: none;
    border: none;
    color: var(--cor-branco);
    font-size: 1.8rem;
    cursor: pointer;
}

/* =========================================
   RESPONSIVIDADE DO HEADER (MENU MOBILE ATIVO)
   ========================================= */
@media (max-width: 1024px) {
    .btn-mobile-menu {
        display: block; /* Mostra o botão hambúrguer */
        z-index: 1001;
    }
    
    .afiliado-dropdown {
        display: none; /* Esconde o botão solto no topo para não espremer a logo */
    }

    /* Transforma a navegação desktop em uma gaveta mobile */
    .nav-desktop {
        position: absolute;
        top: 80px; /* Fica exatamente abaixo da barra do header */
        left: 0;
        width: 100%;
        background: rgba(7, 1, 10, 0.95); /* Vidro bem escuro */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 20px 4%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        
        /* Oculto por padrão, esperando o clique */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    /* Classe que o Javascript vai injetar ao clicar no botão */
    .nav-desktop.menu-aberto {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .nav-link {
        width: 100%;
        padding: 15px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Ajuste dos Dropdowns dentro do celular */
    .nav-item-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static; /* Tira o absolute para empurrar os itens pra baixo */
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 10px 0 10px 20px; /* Recuo para parecer sub-menu */
        display: none; /* Escondido até abrir o menu mobile */
    }

    /* Exibe os sub-itens direto no mobile para facilitar a navegação */
    .nav-desktop.menu-aberto .dropdown-menu {
        display: flex;
        flex-direction: column;
    }
}

/* =========================================
   SEÇÃO DIFERENCIAIS (DARK PREMIUM GRID)
   ========================================= */
.secao-diferenciais-dark {
    padding: 120px 0;
    background-color: #0c0211; /* Fundo extremamente escuro */
    color: var(--cor-branco);
    position: relative;
    overflow: hidden;
}

/* Luzes difusas no fundo da seção escura */
.luz-fundo-dif {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

.secao-diferenciais-dark .container {
    position: relative;
    z-index: 2;
}

.dif-dark-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 60px;
}


.dif-dark-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    margin-bottom: 16px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 0%, #b3b3b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dif-dark-header p {
    color: #a0a0a0;
    font-size: 1.15rem;
    line-height: 1.6;
}

.dif-dark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Efeito Hover Neon nos Cards */
.dif-dark-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 1px; /* Espaço para a borda brilhar */
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.dif-border-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    z-index: 1;
    border-radius: 20px;
    transition: opacity 0.4s ease;
}

.dif-dark-card:hover {
    transform: translateY(-3px);
}

.dif-dark-card:hover .dif-border-glow {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, transparent 100%);
    opacity: 1;
}

.dif-card-content {
    background: #110418; /* Cor interna do card */
    padding: 40px 30px;
    border-radius: 19px;
    height: 100%;
    position: relative;
    z-index: 2;
}

.dif-icon-glass {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cor-branco);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.dif-dark-card:hover .dif-icon-glass {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}

.dif-card-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.dif-card-content p {
    color: #888;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================================
   SEÇÃO: SHOWCASE DO SOFTWARE ONEPLUS
   ========================================= */
.secao-software-showcase {
    padding: 120px 0;
    background-color: var(--cor-fundo); /* Fundo claro para contrastar com a seção escura de cima */
    position: relative;
    overflow: hidden;
}

.software-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
}


.software-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-secundaria);
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.1;
}

.software-header p {
    color: #555;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* O Mockup que guarda a imagem real */
.mockup-container {
    max-width: 1200px;
    margin: 0 auto 60px;
    perspective: 1000px;
}

/* A Imagem Real */
.software-img-real {
    width: 100%;
    display: block;
    height: auto;
}

/* Recursos Rápidos abaixo da Imagem */
.software-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.recurso-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--cor-branco);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #fff;
    transition: transform 0.3s ease;
}

.recurso-item:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200,0.2);
}

.recurso-icone {
    width: 48px;
    height: 48px;
    background: rgba(149, 0, 200,0.1);
    color: var(--cor-primaria);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.recurso-item h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    color: var(--cor-secundaria);
    margin-bottom: 6px;
}

.recurso-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* Responsividade */
@media (max-width: 992px) {
    .software-recursos { grid-template-columns: 1fr; }
}

/* =========================================
   SEÇÃO CALL TO ACTION (CTA FINAL)
   ========================================= */
.secao-cta {
    padding: 60px 0 120px;
    background-color: var(--cor-branco);
}

.cta-box {
    background-color: #07010a; /* Fundo escuro premium */
    border-radius: 32px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Luz de fundo do CTA */
.cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(149, 0, 200,0.2) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-branco);
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.cta-content p {
    color: #b3b3b3;
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.cta-botoes {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}



/* Responsividade do CTA */
@media (max-width: 768px) {
    .cta-box {
        padding: 50px 20px;
        border-radius: 20px;
    }
    .cta-content h2 {
        font-size: 2.5rem;
    }
    .cta-botoes {
        flex-direction: column;
    }
}

/* =========================================
   FOOTER PREMIUM (DARK)
   ========================================= */
.footer-premium {
    background-color: #07010a;
    color: var(--cor-branco);
    padding: 100px 0 20px; /* Muito respiro no topo */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

/* Coluna da Marca */
.brand-col {
    padding-right: 40px;
}

.footer-logo {
    height: 40px;
    margin-bottom: 24px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
}

.footer-desc {
    color: #888;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.social-links {
    display: flex;
    gap: 16px;
}

/* Colunas de Links */
.footer-col h3,
.footer-col h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    color: var(--cor-branco);
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-links a i {
    color: var(--cor-primaria);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--cor-primaria);
    padding-left: 6px; /* Deslocamento suave pro lado ao passar o mouse */
}

/* Informações de Contato (Substitua as antigas por estas) */
.footer-contact-info {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    color: #888;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start; /* Mantém o ícone alinhado ao topo caso o texto tenha 2 linhas */
    gap: 12px;
    line-height: 1.5;
}

.info-item i {
    color: var(--cor-primaria);
    font-size: 1.1rem;
    margin-top: 4px; /* Desce o ícone um pouquinho para alinhar com a primeira letra */
}

/* Barra Inferior (Bottom) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #666;
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 20px;
}

.legal-links {
    display: flex;
    gap: 24px;
}

.legal-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--cor-primaria);
}

/* Responsividade do Footer */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .brand-col {
        grid-column: span 2;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .footer-premium {
        padding: 80px 0 20px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .brand-col {
        grid-column: span 1;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/*
/
/
/
/
/
/
/
/* =========================================
   PÁGINAS INTERNAS (QUEM SOMOS)
   ========================================= */

/* =========================================
   HERO INTERNO (FOTO E VÍDEO DE FUNDO)
   ========================================= */
.hero-interno {
    position: relative;
    padding: 220px 0 140px; /* Aumentei o espaço para mostrar mais a foto da equipe */
    text-align: center;
    color: var(--cor-branco);
    overflow: hidden;
    background-color: #07010a;
}

/* Container de mídia que fica preso no fundo */
.hero-media-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* =========================================
   EFEITOS DE MÍDIA DO HERO (QUEM SOMOS)
   ========================================= */

/* Vídeo de hero self-hosted */
.hero-bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 1s ease-in-out;
}

.hero-bg-video.mostrar-video {
    opacity: 0.85;
}

/* Película Mesclada (O Segredo do Fundo Infinito) */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Começa translúcido e termina na exata cor do fundo da próxima seção (#07010a) */
    background: linear-gradient(to bottom, rgba(7, 1, 10, 0.4) 0%, rgba(7, 1, 10, 0.7) 60%, #07010a 100%);
    z-index: 3;
}

.hero-interno-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10; /* Garante que o texto fique acima de toda a mídia */
}

.hero-interno h1 {
    font-family: var(--fonte-titulos);
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-interno p {
    color: #e0e0e0;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* =========================================
   SEÇÃO 3: ORIGEM & SEDE (DARK SHOWCASE)
   ========================================= */
.secao-origem-showcase {
    padding: 100px 0 60px;
    background-color: var(--cor-fundo);
}

/* O Painel Principal */
.showcase-dark-panel {
    display: flex;
    background-color: #0c0211; /* Escuro profundo */
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
}

/* Metade Texto */
.showcase-texto {
    flex: 1;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}


.showcase-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.showcase-texto p {
    font-size: 1.1rem;
    color: #a0a0a0;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Metade Visual (Hub Maringá) */
.showcase-visual {
    flex: 1;
    background: linear-gradient(135deg, rgba(20, 5, 30, 1) 0%, rgba(7, 1, 10, 1) 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    min-height: 500px;
}

.grid-fundo-visual {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

/* O Nó Central (Maringá) */
.node-maringa {
    position: absolute;
    top: 40%;
    left: 45%;
    width: 60px;
    height: 60px;
    background: var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--cor-branco);
    z-index: 10;
    box-shadow: 0 0 30px var(--cor-primaria);
}

.pulse-ring {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    border: 1px solid var(--cor-primaria);
    border-radius: 50%;
}

.ring-2 { animation-delay: 1.5s; }

/* Linhas de Dados Espaciais */
.data-lines {
    position: absolute;
    top: 40%; left: 45%;
    width: 100%; height: 100%;
    z-index: 5;
}

.line {
    position: absolute;
    top: 30px; /* Alinha com o centro do node */
    left: 30px; /* Alinha com o centro do node */
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform-origin: left center;
}

.line-top-right { width: 300px; transform: rotate(-35deg); }
.line-bottom-right { width: 400px; transform: rotate(25deg); }
.line-bottom-left { width: 250px; transform: rotate(140deg); }

/* Luzes trafegando nas linhas */
.light-trail {
    position: absolute;
    top: -1px; left: 0;
    width: 40px; height: 4px;
    background: #e290ff;
    box-shadow: 0 0 10px #e290ff, 0 0 20px var(--cor-primaria);
    border-radius: 4px;
    opacity: 0;
}

/* Bloco de Informação Flutuante */
.visual-info-floating {
    position: absolute;
    bottom: 40px;
    right: 40px;
    left: 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.visual-info-floating h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    color: var(--cor-branco);
    margin-bottom: 8px;
}

.visual-info-floating p {
    color: #a0a0a0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   RESPONSIVIDADE DO SHOWCASE (ATÉ 992px)
   ========================================= */
@media (max-width: 992px) {
    .showcase-dark-panel {
        flex-direction: column;
        border-radius: 20px;
    }
    
    .showcase-texto {
        padding: 50px 30px;
    }
    
    .showcase-visual {
        min-height: 400px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .node-maringa {
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
    }

    .data-lines {
        top: 30%;
        left: 50%;
    }
    
    .visual-info-floating {
        bottom: 20px; right: 20px; left: 20px;
    }
}

@media (max-width: 768px) {
    .showcase-texto h2 { font-size: 2.5rem; }
}

/* =========================================
   SEÇÃO 4: PILARES TECH (CARDS SEPARADOS)
   ========================================= */
.secao-pilares-tech {
    padding: 80px 0 120px;
    background-color: var(--cor-fundo);
}

.pilares-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}


.pilares-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-secundaria);
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.1;
}

.pilares-header p {
    color: #555;
    font-size: 1.15rem;
}

.pilares-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pilar-tech-card {
    background: var(--cor-branco);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
}

.pilar-tech-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200, 0.3);
    box-shadow: 0 20px 40px rgba(149, 0, 200, 0.08);
}

.pilar-icon-wrap {
    width: 60px;
    height: 60px;
    background: rgba(149, 0, 200, 0.1);
    color: var(--cor-primaria);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.pilar-tech-card:hover .pilar-icon-wrap {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    box-shadow: 0 10px 20px rgba(149, 0, 200, 0.2);
}

.pilar-tech-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.6rem;
    color: var(--cor-secundaria);
    margin-bottom: 12px;
}

.pilar-tech-card p {
    color: #666;
    line-height: 1.6;
}

/* =========================================
   SEÇÃO 4: ECOSSISTEMA E AUTOATENDIMENTO (DARK)
   ========================================= */
.secao-ecossistema-dark {
    padding: 120px 0;
    background-color: #07010a; /* Fundo super escuro para destacar a nuvem roxa */
    border-top: 1px solid rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}

.ecossistema-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

.eco-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.eco-texto p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.lista-eco-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.eco-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}


.eco-item:hover .eco-icon {
    background: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 0 15px rgba(149, 0, 200,0.5);
    transform: scale(1.05);
}

.eco-item h3 {
    font-size: 1.3rem;
    color: var(--cor-branco);
    margin-bottom: 8px;
}

.eco-item p {
    color: #888;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Animação Visual da Sincronização */
.eco-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
}

.sync-animation-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.sync-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.15) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 0;
}

/* Os Nós (Base e Mobile) */
.sync-node {
    width: 100px; height: 100px;
    background: #110517;
    border: 2px solid rgba(149, 0, 200,0.5);
    border-radius: 24px;
    display: flex; justify-content: center; align-items: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.node-cloud {
    background: #000;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 30px rgba(149, 0, 200,0.4);
}

.node-logo { height: 35px; }
.node-mobile i { font-size: 2.5rem; color: #fff; }

.node-badge {
    position: absolute;
    bottom: -15px;
    background: #fff; color: #000;
    font-size: 0.75rem; font-weight: bold;
    padding: 4px 12px; border-radius: 20px;
}

/* Anel de Pulsação da Nuvem */
.node-ring {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid var(--cor-primaria);
    border-radius: 24px;
    z-index: -1;
}

/* O fluxo de dados conectando a Nuvem e o Mobile */
.sync-connection {
    position: absolute;
    top: 100px; bottom: 100px; /* Conecta os dois nós verticalmente */
    width: 4px;
    background: rgba(149, 0, 200,0.2);
    border-radius: 2px;
    z-index: 1;
}

.data-packet {
    position: absolute;
    left: -3px; /* Centraliza a bolinha de 10px na linha de 4px */
    width: 10px; height: 30px;
    background: #e290ff;
    border-radius: 10px;
    box-shadow: 0 0 15px #e290ff, 0 0 30px var(--cor-primaria);
}

.backward { } /* Delay de 1s */

/* =========================================
   SEÇÃO 5: FUNCIONALIDADES EXTRAS (LIGHT)
   ========================================= */
.secao-app-extras-clara {
    padding: 100px 0 140px; /* Mais espaço em baixo para separar do CTA */
    background-color: var(--cor-branco);
}

.extras-header {
    text-align: center;
    margin-bottom: 70px;
}

.extras-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-secundaria);
    margin-bottom: 16px;
    line-height: 1.1;
}

.extras-header p {
    font-size: 1.15rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.extras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.extra-card {
    background: #fbfbfd;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
}

.extra-card:hover {
    background: var(--cor-branco);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: rgba(149, 0, 200,0.2);
}


.extra-card:hover .extra-icon {
    background: var(--cor-primaria);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(149, 0, 200,0.3);
}

.panic-icon {
    background: rgba(255, 51, 51, 0.05);
    color: #ff3333;
}

.extra-card:hover .panic-icon {
    background: #ff3333;
    color: #fff;
    box-shadow: 0 10px 20px rgba(255, 51, 51, 0.3);
}

.extra-card h3 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 16px;
}

.extra-card p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   SEÇÃO: CTA FINAL PREMIUM (ATUALIZADO)
   ========================================= */
.secao-cta-premium {
    padding: 160px 0 120px; /* Aumentado o respiro interno do topo */
    margin-top: 100px; /* Descola completamente a seção da que está acima */
    background-color: var(--cor-fundo);
    position: relative;
}

.cta-premium-box {
    background: #0c0211;
    border-radius: 32px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.1);
    border: 1px solid rgba(149, 0, 200,0.3);
}

.cta-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.25) 0%, transparent 70%);
    z-index: 1;
    filter: blur(40px);
}

.cta-premium-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.cta-premium-content h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-branco);
    margin-bottom: 24px;
    line-height: 1.1;
}

.cta-premium-content p {
    font-size: 1.2rem;
    color: #a0a0a0;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Responsividade Quem Somos */
@media (max-width: 992px) {
    .pilares-tech-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .secao-cta-premium { margin-top: 60px; padding: 100px 0 80px; }
    .cta-premium-content h2 { font-size: 2.5rem; }
    .cta-premium-box { padding: 50px 20px; }
}

/* =========================================
   LINHA DO TEMPO (QUEM SOMOS)
   ========================================= */
.secao-timeline-dark {
    padding: 100px 0 120px;
    background-color: #07010a; /* Continuação do Hero Escuro */
    color: var(--cor-branco);
    position: relative;
    overflow: hidden;
}

.luz-fundo-timeline {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.1) 0%, rgba(0,0,0,0) 60%);
    z-index: 1;
    pointer-events: none;
}
.timeline-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 2;
}
.timeline-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-branco);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.timeline-header p {
    color: #a0a0a0;
    font-size: 1.15rem;
}

/* Estrutura Vertical */
.timeline-vertical {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 2;
}

/* A Linha do meio */
.linha-central {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    background: linear-gradient(180deg, rgba(149, 0, 200,0.1) 0%, rgba(149, 0, 200,0.8) 50%, rgba(149, 0, 200,0.1) 100%);
    border-radius: 4px;
}

/* Linhas e Cards */
.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 60px;
    position: relative;
}

.timeline-row:last-child {
    margin-bottom: 0;
}

/* Posições Alternadas */
.row-esquerda { flex-direction: row-reverse; }
.row-direita { flex-direction: row; }

/* O Ponto Central */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #07010a;
    border: 4px solid var(--cor-primaria);
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 15px var(--cor-primaria);
    transition: all 0.3s ease;
}

.pulse-dot-active {
    background: var(--cor-primaria);
}

/* O Card de Conteúdo */
.timeline-card {
    width: 45%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, border-color 0.4s ease;
    position: relative;
}

.timeline-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.timeline-card:hover + .timeline-dot {
    background: var(--cor-primaria);
    transform: translate(-50%, -50%) scale(1.3);
}

.border-destaque {
    border: 1px solid var(--cor-primaria);
    box-shadow: 0 10px 30px rgba(149, 0, 200, 0.15);
}

.ano-neon {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    position: absolute;
    top: -20px;
    right: 20px;
    line-height: 1;
    z-index: 0;
    transition: all 0.4s ease;
}

.row-esquerda .ano-neon { right: auto; left: 20px; } /* Inverte pro outro lado */

.timeline-card:hover .ano-neon {
    color: var(--cor-primaria);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 20px rgba(149, 0, 200, 0.5);
}

.timeline-card h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    color: var(--cor-branco);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.timeline-card p {
    color: #a0a0a0;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* =========================================
   RESPONSIVIDADE DA TIMELINE (ATÉ 768px)
   ========================================= */
@media (max-width: 768px) {
    .linha-central {
        left: 20px; /* Joga a linha pra esquerda */
    }
    .timeline-row {
        flex-direction: column !important; /* Desfaz o ziguezague */
        align-items: flex-end;
    }
    .timeline-card {
        width: calc(100% - 60px); /* Dá espaço pra linha na esquerda */
        padding: 30px 20px;
    }
    .timeline-dot {
        left: 20px; /* Alinha a bolinha com a linha da esquerda */
        top: 30px; /* Alinha com o topo do card */
    }
    .ano-neon {
        font-size: 2.5rem;
        top: -15px;
        right: 15px !important;
        left: auto !important;
    }
}

/*
/
/
/
/
/
/
/
/
*/

/* =========================================
   PÁGINA: MODELO DE NEGÓCIO - DARK BLEND
   ========================================= */

.hero-negocio-dark {
    padding: 220px 0 140px; /* Respiro do header */
    background-color: #07010a; /* Fundo base escuro da ONE */
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-bg-banner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.banner-img-direita {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 80% center; /* Puxa a imagem para mostrar bem o rosto na direita */
}

/* O Efeito Cinematográfico */
.banner-overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Começa 100% escuro na esquerda (texto) e vai clareando para a direita (foto) */
    background: linear-gradient(to right, #07010a 0%, rgba(7, 1, 10, 0.95) 45%, rgba(7, 1, 10, 0.1) 100%);
    z-index: 2;
}

.hero-banner-container {
    position: relative;
    z-index: 10;
}

.hero-text-blend {
    max-width: 650px;
    color: var(--cor-branco);
}

.hero-text-blend h1 {
    font-family: var(--fonte-titulos);
    font-size: 4.8rem;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--cor-branco);
}

.hero-text-blend p {
    font-size: 1.25rem;
    color: #b3b3b3;
    line-height: 1.6;
}

.panel-header-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
}

/* Responsividade do Dark Blend */
@media (max-width: 1024px) {
    .hero-text-blend h1 { font-size: 3.8rem; }
}

@media (max-width: 768px) {
    .hero-negocio-dark { padding: 140px 0 80px; }
    
    /* No celular, o degradê precisa cobrir a imagem quase toda para o texto dar leitura em cima do rosto */
    .banner-overlay-dark {
        background: linear-gradient(to bottom, rgba(7, 1, 10, 0.95) 0%, rgba(7, 1, 10, 0.8) 100%);
    }
    
    .hero-text-blend { text-align: center; margin: 0 auto; }
    .hero-text-blend h1 { font-size: 2.8rem; }
    .hero-text-blend p { font-size: 1.1rem; padding: 0 10px; }
    .panel-header-brand { justify-content: center; }
    .hero-actions { justify-content: center !important; }
}

/* =========================================
   SECÇÃO: COMO FUNCIONA (VÍDEO + PASSOS)
   ========================================= */
.secao-video-passos {
    padding: 120px 0;
    background-color: var(--cor-branco);
}

.video-passos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.video-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    border: 1px solid rgba(149, 0, 200,0.1);
    background: #000;
}

/* Garante que o YouTube mantenha o formato 16:9 responsivo */
.video-container {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-caption {
    background: #07010a;
    padding: 20px;
    text-align: center;
    border-top: 2px solid var(--cor-primaria);
}

.video-caption p {
    color: #e290ff;
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
}

.passos-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-secundaria);
    margin-bottom: 16px;
    line-height: 1.1;
}

.passos-header p {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 40px;
}

.passos-lista {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.passo-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.passo-icon {
    width: 60px;
    height: 60px;
    background: rgba(149, 0, 200,0.1);
    color: var(--cor-primaria);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.passo-item h4 {
    font-size: 1.4rem;
    color: var(--cor-secundaria);
    margin-bottom: 8px;
}

.passo-item p {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   SEÇÃO: O COMPARATIVO (MESA DE DECISÃO)
   ========================================= */
.secao-comparativo-premium {
    padding: 100px 0 140px;
    background-color: var(--cor-fundo);
}

.comparativo-header {
    text-align: center;
    margin-bottom: 80px;
}

.comparativo-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    text-transform: uppercase;
}

.comparativo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 950px;
    margin: 0 auto;
    position: relative;
}

.comp-card {
    flex: 1;
    border-radius: 24px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.comp-titulo {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    gap: 12px;
}

.comp-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comp-lista li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Estilo Lado Ruim (Tradicional) */
.comp-ruim {
    background: var(--cor-branco);
    border: 1px solid #ddd;
    color: #666;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.comp-ruim .comp-titulo {
    color: #888;
    border-bottom-color: #eee;
}

.comp-ruim i {
    color: #ff5f56;
    font-size: 1.2rem;
    margin-top: 4px;
}

/* Estilo Lado Bom (ONE) */
.comp-one {
    background: #07010a;
    color: var(--cor-branco);
    border: 1px solid rgba(149, 0, 200,0.5);
    box-shadow: 0 20px 50px rgba(149, 0, 200,0.15);
    transform: scale(1.05); /* Destaque */
    z-index: 2;
}

.comp-glow {
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.2) 0%, transparent 70%);
}

.comp-one .comp-titulo {
    color: var(--cor-branco);
    border-bottom-color: rgba(255,255,255,0.1);
}

.comp-one i {
    color: var(--cor-primaria);
    font-size: 1.2rem;
    margin-top: 4px;
}

.comp-one p { color: #ccc; }

/* Distintivo VS */
.vs-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    background: var(--cor-branco);
    border: 2px solid #eee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    color: #aaa;
    z-index: 3;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* =========================================
   SECÇÃO: O ARSENAL (BENTO BOX CLARO)
   ========================================= */
.secao-arsenal-bento {
    padding: 100px 0 140px;
    background-color: var(--cor-fundo);
}

.arsenal-bento-header {
    text-align: center;
    margin-bottom: 60px;
}

.arsenal-bento-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.arsenal-bento-header p {
    color: #555;
    font-size: 1.15rem;
}









/* Responsividade Geral */
@media (max-width: 1024px) {
    .comparativo-wrapper { flex-direction: column; gap: 40px; }
    .comp-card { width: 100%; transform: none !important; }
    .vs-badge { display: none; /* Esconde o VS no tablet/mobile para não bugar a leitura */ }
}

/* Responsividade Vídeo (bento já coberto por V4) */
@media (max-width: 992px) {
    .video-passos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .passos-header h2, .arsenal-bento-header h2 { font-size: 2.5rem; }
    .video-caption p { font-size: 0.95rem; }
}

/*
/
/
/
/
/
/
/
/
*/

/* =========================================
   PÁGINA: PORTARIA REMOTA
   ========================================= */

/* Hero Original (com ajuste de 2s) */
.hero-produto-dark {
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0;
    background-color: #07030c;
    text-align: center;
}

.hero-produto-dark .hero-media-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-video-produto {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0.65;
    transition: opacity 1s ease-in-out;
}

.hero-bg-video-produto.mostrar-video { opacity: 0.9; }

.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 95% 85% at 50% 46%, rgba(7, 1, 10, 0.42) 0%, rgba(7, 1, 10, 0.72) 62%, rgba(7, 1, 10, 0.92) 100%),
        linear-gradient(to bottom, rgba(7, 1, 10, 0.28) 0%, rgba(7, 1, 10, 0.55) 100%);
    z-index: 2;
}

.glow-produto-bg {
    position: absolute;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.15) 0%, rgba(0,0,0,0) 60%);
    z-index: 3;
    pointer-events: none;
    transition: opacity 2s ease;
}

.hero-produto-dark .container { position: relative; z-index: 10; }

.hero-produto-dark h1 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-produto-dark p {
    font-size: 1.1rem;
    color: #b3b3b3;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* ── Hero Portaria — editorial cinematográfico (bottom-anchored) ── */
.hero-pr-container {
    position: relative;
    z-index: 10;
    width: 100%;
}
.hero-pr-content { max-width: 1040px; margin: 0 auto; text-align: center; }

.hero-pr-marker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.86);
    margin-bottom: 24px;
}
.hero-pr-marker-line {
    width: 32px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b833ea, transparent);
}

.hero-produto-dark .hp-title {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    text-align: center;
    font-size: clamp(2.4rem, 3.9vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: #fff;
    max-width: 900px;
    margin: 0 auto 36px;
    text-wrap: balance;
    text-shadow: 0 2px 34px rgba(7, 1, 10, 0.55);
}
.hp-title-grad {
    display: block;
    font-style: normal;
    background: linear-gradient(108deg, #f4d0ff 0%, #c259f0 50%, #9500c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-produto-dark .hp-sub {
    font-family: var(--fonte-textos);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.82);
    max-width: 600px;
    margin: 0 auto 32px;
    text-shadow: 0 1px 16px rgba(7, 1, 10, 0.6);
}

.hero-pr-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}
.hero-pr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.hero-pr-link span { transition: transform 0.3s ease; color: #c259f0; }
.hero-pr-link:hover { color: #f4d0ff; }
.hero-pr-link:hover span { transform: translateX(5px); }

.hero-pr-status {
    list-style: none;
    max-width: 720px;
    margin: clamp(38px, 6vh, 56px) auto 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(184, 51, 234, 0.22);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 30px;
}
.hero-pr-status li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fonte-textos);
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}
.hero-pr-status-ic {
    width: 18px;
    height: 18px;
    stroke: #c259f0;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hero-produto-dark { min-height: 86vh; padding-top: 108px; }
    .hero-produto-dark .hp-title { font-size: clamp(2.1rem, 8.6vw, 2.95rem); max-width: 19ch; }
    .hero-produto-dark .hp-sub { font-size: 0.98rem; }
    .hero-pr-status { gap: 12px 22px; }
    .hero-pr-status li { font-size: 0.8rem; }
    .hero-pr-actions { gap: 18px; }
}

/* =========================================
   SEÇÃO 2: PIPELINE DE DADOS (PREMIUM)
   ========================================= */
.secao-pipeline-premium {
    padding: clamp(92px, 11vw, 132px) 0;
    background: linear-gradient(180deg, #0a0510 0%, #07030c 100%);
    position: relative;
    overflow: hidden;
}

.pipeline-header {
    text-align: center;
    margin-bottom: 80px;
}

.pipeline-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    text-transform: uppercase;
    margin: 16px 0;
}

/* ===== CAMINHO DO DADO — trace horizontal animado (portaria-remota) ===== */
/* header herdado (.pipeline-header é compartilhado com index) — força claro no fundo escuro */
.secao-pipeline-premium .pipeline-header h2 { color: #fff; }
.secao-pipeline-premium .pipeline-header p { color: rgba(255, 255, 255, 0.64); }
@media (max-width: 768px) {
    #caminho-do-dado .pipeline-header h2 {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }
    #caminho-do-dado .pipeline-header p { font-size: 0.96rem; max-width: 100%; }
}

.cd-glow {
    position: absolute;
    top: 34%;
    left: 50%;
    width: min(900px, 92%);
    height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(149, 0, 200, 0.28), transparent 68%);
    filter: blur(42px);
    pointer-events: none;
    z-index: 0;
}

.cd-flow {
    position: relative;
    z-index: 1;
    margin-top: clamp(50px, 6vw, 84px);
}

/* trilho + pacote viajando */
.cd-track {
    position: absolute;
    top: 38px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    z-index: 1;
    overflow: hidden;
}
.cd-track-line {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.12), rgba(184, 51, 234, 0.55) 50%, rgba(184, 51, 234, 0.12));
}
.cd-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 70px;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #f4d0ff 65%, #ffffff);
    box-shadow: 0 0 18px 2px rgba(244, 208, 255, 0.7);
    animation: cdTravel 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.cd-pulse--2 { animation-delay: 1.8s; opacity: 0.65; }
@keyframes cdTravel {
    0%   { left: -70px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* paradas (nós) */
.cd-stops {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cd-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
}
.cd-body { width: 100%; }
.cd-node {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    background: radial-gradient(circle at 30% 25%, #1c1230, #0c0614);
    border: 1px solid rgba(184, 51, 234, 0.5);
    box-shadow: 0 0 0 6px rgba(149, 0, 200, 0.10), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.cd-node svg {
    width: 30px;
    height: 30px;
    stroke: #f4d0ff;
    stroke-width: 1.8;
    fill: none;
}
.cd-stop--mid .cd-node {
    border-color: rgba(244, 208, 255, 0.8);
    box-shadow: 0 0 0 6px rgba(149, 0, 200, 0.16), 0 0 42px rgba(184, 51, 234, 0.55);
}
.cd-node--live::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(244, 208, 255, 0.55);
    animation: cdRing 2.6s ease-out infinite;
}
@keyframes cdRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

.cd-step {
    display: inline-block;
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.80);
    margin-bottom: 10px;
}
.cd-title {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}
.cd-desc {
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
    margin: 0 auto;
    max-width: 30ch;
}

/* rótulos de segmento sobre o trilho */
.cd-segs {
    position: absolute;
    top: 38px;
    left: 16.66%;
    right: 16.66%;
    z-index: 3;
    pointer-events: none;
}
.cd-seg {
    position: absolute;
    top: -32px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--fonte-textos);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.92);
    background: rgba(18, 10, 26, 0.82);
    border: 1px solid rgba(184, 51, 234, 0.42);
    white-space: nowrap;
}
.cd-seg--a { left: 25%; }
.cd-seg--b { left: 75%; }

/* ── responsivo: vira lista vertical limpa ── */
@media (max-width: 860px) {
    .cd-track, .cd-segs { display: none; }
    .cd-stops { grid-template-columns: 1fr; gap: 38px; max-width: 440px; margin: 0 auto; }
    .cd-stop {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 18px;
        padding: 0;
        position: relative;
    }
    .cd-node { margin-bottom: 0; flex-shrink: 0; width: 58px; height: 58px; }
    .cd-node svg { width: 24px; height: 24px; }
    .cd-body { flex: 1; }
    .cd-title { font-size: 1.4rem; }
    .cd-desc { max-width: none; margin: 0; }
    .cd-stop:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 28px;
        top: 64px;
        bottom: -38px;
        width: 2px;
        background: linear-gradient(180deg, rgba(184, 51, 234, 0.5), rgba(184, 51, 234, 0.08));
    }
}

/* =========================================
   SEÇÃO 3: ENGENHARIA (MATRIZ HOLOGRÁFICA)
   ========================================= */
.secao-matriz-tech {
    padding: 100px 0 120px;
    background-color: #050008; /* Um tom de preto quase absoluto */
    position: relative;
    overflow: hidden;
    color: var(--cor-branco);
}

/* O Fundo de Luz Fluida */
.mesh-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.mesh-blob {
    position: absolute;
    top: 50%; left: 50%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.4) 0%, rgba(226,144,255,0.2) 40%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    filter: blur(60px); /* Deixa a luz difusa */
}

/* Estrutura de Texto */
.relative-z {
    position: relative;
    z-index: 10;
}

.matriz-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.matriz-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 16px 0;
    text-transform: uppercase;
}

.matriz-header p {
    color: #a0a0a0;
    font-size: 1.15rem;
}

/* Grid de Cartões de Vidro */
/* ===== ARQUITETURA — painel de engenharia (instrumento único) ===== */
.arq-panel {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 22px;
    border: 1px solid rgba(184, 51, 234, 0.22);
    background: linear-gradient(180deg, rgba(26, 16, 38, 0.72), rgba(12, 6, 20, 0.74));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 80px rgba(149, 0, 200, 0.12);
    overflow: hidden;
}

.arq-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 26px;
    border-bottom: 1px solid rgba(184, 51, 234, 0.18);
    background: rgba(255, 255, 255, 0.02);
}
.arq-bar-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f4d0ff;
}
.arq-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c259f0;
    box-shadow: 0 0 0 4px rgba(194, 89, 240, 0.16);
    animation: arqLive 2.4s ease-in-out infinite;
}
@keyframes arqLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.arq-bar-meta {
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.arq-body {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
}

/* ── módulo em destaque: latência ── */
.arq-feature {
    padding: 32px 34px 36px;
    border-right: 1px solid rgba(184, 51, 234, 0.16);
}
.arq-index {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(242, 197, 255, 0.5);
}
.arq-signal {
    position: relative;
    height: 56px;
    margin: 22px 0 24px;
    overflow: hidden;
}
.arq-signal-line {
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.12), rgba(184, 51, 234, 0.5) 50%, rgba(184, 51, 234, 0.12));
}
.arq-signal-line::before,
.arq-signal-line::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0c0614;
    border: 1.5px solid rgba(184, 51, 234, 0.7);
}
.arq-signal-line::before { left: -5px; }
.arq-signal-line::after { right: -5px; background: #1c1230; border-color: rgba(244, 208, 255, 0.85); }
.arq-signal-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #f4d0ff 60%, #ffffff);
    box-shadow: 0 0 14px 1px rgba(244, 208, 255, 0.7);
    animation: arqRace 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes arqRace {
    0%   { left: -52px; opacity: 0; }
    12%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.arq-signal-tag {
    position: absolute;
    top: calc(50% + 15px);
    font-family: var(--fonte-textos);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.arq-signal-tag--a { left: 0; }
.arq-signal-tag--b { right: 0; }
.arq-feature-title {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: clamp(1.5rem, 2vw, 1.95rem);
    color: #fff;
    margin: 0 0 12px;
}
.arq-feature-desc {
    font-family: var(--fonte-textos);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}

/* ── lista compacta: 3 decisões ── */
.arq-list { list-style: none; margin: 0; padding: 0; }
.arq-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 21px 28px;
    border-bottom: 1px solid rgba(184, 51, 234, 0.12);
    transition: background 0.3s ease;
}
.arq-item:last-child { border-bottom: none; }
.arq-item:hover { background: rgba(184, 51, 234, 0.05); }
.arq-item .arq-index { align-self: start; padding-top: 3px; }
.arq-item-body h3 {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: 1.22rem;
    color: #fff;
    margin: 0 0 5px;
}
.arq-item-body p {
    font-family: var(--fonte-textos);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* glyphs custom (CSS, sem ícone genérico) */
.arq-glyph { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.arq-glyph--ha::before,
.arq-glyph--ha::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid rgba(184, 51, 234, 0.55);
    background: rgba(149, 0, 200, 0.14);
}
.arq-glyph--ha::before { top: 6px; }
.arq-glyph--ha::after { bottom: 6px; border-color: rgba(244, 208, 255, 0.7); }
.arq-glyph--ota {
    border: 2px solid rgba(184, 51, 234, 0.45);
    border-top-color: #f4d0ff;
    border-radius: 50%;
}
.arq-glyph--ota::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #f4d0ff;
}
.arq-glyph--video {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}
.arq-glyph--video i {
    border-radius: 3px;
    background: rgba(149, 0, 200, 0.18);
    border: 1px solid rgba(184, 51, 234, 0.4);
}
.arq-glyph--video i:first-child {
    background: rgba(184, 51, 234, 0.6);
    border-color: rgba(244, 208, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .arq-signal-dot, .arq-live { animation: none; }
    .arq-signal-dot { left: 40%; }
}

/* responsivo */
@media (max-width: 860px) {
    .matriz-header h2 { font-size: 2.4rem; }
    .arq-body { grid-template-columns: 1fr; }
    .arq-feature { border-right: none; border-bottom: 1px solid rgba(184, 51, 234, 0.16); }
}
@media (max-width: 560px) {
    .arq-bar { padding: 13px 18px; }
    .arq-bar-meta { display: none; }
    .arq-feature { padding: 26px 20px 28px; }
    .arq-item { padding: 18px 18px; gap: 14px; }
    .arq-glyph { width: 36px; height: 36px; }
}

/* =========================================
   SEÇÃO 3.5: HARDWARE CÓRTEX (TEMA CLARO)
   ========================================= */
.secao-cortex-clara {
    padding: 120px 0;
    background-color: var(--cor-branco); /* Traz o respiro visual claro */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.cortex-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.cortex-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.cortex-texto p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

.cortex-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.c-feature {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.c-feature i {
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-top: 4px;
}

.c-feature h3,
.c-feature h4 {
    font-size: 1.25rem;
    color: var(--cor-secundaria);
    margin-bottom: 6px;
}

.c-feature p {
    color: #666;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* O Visual do Hardware Córtex (Clean) */
.cortex-visual {
    display: flex;
    justify-content: center;
    position: relative;
}

.hardware-mockup {
    width: 100%;
    max-width: 440px;
    position: relative;
    background: linear-gradient(165deg, #1a1030, #0c0614);
    border-radius: 24px;
    padding: 36px;
    border: 1px solid rgba(184, 51, 234, 0.30);
    box-shadow: 0 30px 60px rgba(10, 5, 16, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.hardware-mockup::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: -30px;
    height: 110px;
    background: none;
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

.hard-board {
    width: 100%;
    height: 360px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 46%, rgba(149, 0, 200, 0.16), transparent 58%), #0a0510;
    border: 1px solid rgba(184, 51, 234, 0.25);
}

.hard-chip.principal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 106px; height: 106px;
    border-radius: 18px;
    background: linear-gradient(160deg, #2a1840, #120a1f);
    border: 1px solid rgba(184, 51, 234, 0.6);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 44px rgba(149, 0, 200, 0.5), 0 10px 24px rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.chip-logo { height: 42px; opacity: 1; }

.hard-chip.secundario {
    position: absolute;
    bottom: 44px; right: 44px;
    width: 46px; height: 46px;
    border-radius: 10px;
    background: rgba(184, 51, 234, 0.12);
    border: 1px solid rgba(184, 51, 234, 0.35);
    z-index: 2;
}

.hard-ports {
    position: absolute;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 9px;
    z-index: 2;
}
.hard-ports span {
    width: 26px; height: 12px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #b833ea, #6a1f8c);
    box-shadow: 0 0 10px rgba(184, 51, 234, 0.55);
}

.hard-leds {
    position: absolute;
    top: 26px; left: 26px;
    display: flex; gap: 9px;
    z-index: 2;
}
.led { width: 8px; height: 8px; border-radius: 50%; }
.led-power { background: #f4d0ff; box-shadow: 0 0 10px #f4d0ff; }
.led-net { background: #b833ea; box-shadow: 0 0 10px #b833ea; animation: arqLive 2s ease-in-out infinite; }

.circuit-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 14px;
    opacity: 0.5;
    background-image:
        linear-gradient(90deg, transparent 49%, rgba(184, 51, 234, 0.12) 50%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(184, 51, 234, 0.12) 50%, transparent 51%);
    background-size: 44px 44px;
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
    mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}

/* ── polish do Córtex ── */
.hardware-mockup { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hardware-mockup:hover { transform: translateY(-6px); }
.hardware-mockup:hover .hard-chip.principal {
    box-shadow: 0 0 60px rgba(149, 0, 200, 0.65), 0 10px 24px rgba(0, 0, 0, 0.5);
}
.hard-tag {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 4;
    font-family: var(--fonte-textos);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 208, 255, 0.66);
}
.hard-trace {
    position: absolute;
    top: 50%; left: calc(50% + 52px); right: 22px;
    height: 2px;
    transform: translateY(-50%);
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.45), rgba(184, 51, 234, 0.08));
}
.hard-pulse {
    position: absolute;
    top: 0; left: -28px;
    width: 28px; height: 100%;
    background: linear-gradient(90deg, transparent, #f4d0ff);
    box-shadow: 0 0 10px #f4d0ff;
    animation: cortexPulse 2.8s ease-in-out infinite;
}
@keyframes cortexPulse {
    0%   { left: -28px; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.cortex-features .c-feature > svg.icon {
    width: 42px; height: 42px;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(149, 0, 200, 0.10), rgba(184, 51, 234, 0.05));
    border: 1px solid rgba(149, 0, 200, 0.18);
    color: #9500c8;
    margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .hard-pulse { animation: none; opacity: 0.5; }
    .hardware-mockup { transition: none; }
}

/* Responsividade da Seção Clara */
@media (max-width: 992px) {
    .cortex-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .cortex-texto h2 { font-size: 2.8rem; }
    .c-feature { text-align: left; }
    .cortex-visual { order: -1; } /* Coloca a imagem da placa acima do texto no celular */
}

/* =========================================
   SEÇÃO 4: SHOWCASE ONEPLUS (TELA REAL)
   ========================================= */
.secao-oneplus-showcase {
    /* Aumentamos o padding superior de 120px para 180px para separar bem da seção clara */
    padding: 180px 0 120px; 
    background: #07010a; 
    color: var(--cor-branco);
}

.oneplus-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}


.oneplus-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.1;
}

.oneplus-header p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
}

/* Envelopamento Premium para o Print de Tela */
.oneplus-visual {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 80px;
    z-index: 2;
}

/* Luz explodindo de trás do software */
.frame-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 105%;
    background: radial-gradient(circle, rgba(149, 0, 200, 0.3) 0%, transparent 60%);
    z-index: -1;
    filter: blur(40px);
}

/* Cards de Features (Embaixo da Tela) */
.oneplus-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.oneplus-features .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.oneplus-features .feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200, 0.4);
    box-shadow: 0 15px 30px rgba(149, 0, 200, 0.1);
}

.oneplus-features i {
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.oneplus-features h3,
.oneplus-features h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--cor-branco);
}

.oneplus-features p {
    color: #888;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* =========================================
   ESTILOS DO MENU INTERATIVO (TABS)
   ========================================= */
.oneplus-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a0a0a0;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--cor-branco);
    border-color: rgba(255, 255, 255, 0.4);
}

.tab-btn.active {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
    box-shadow: 0 0 20px rgba(149, 0, 200, 0.4);
}

/* Responsividade do Showcase */
@media (max-width: 992px) {
    .oneplus-features { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    .oneplus-header h2 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    .hero-produto-dark h1 { font-size: 2.5rem; }
}

/*
/
/
/
/
/
/
/
/
/
/* =========================================
   PÁGINA: CONTROLE DE ACESSO (HERO VÍDEO)
   ========================================= */

.hero-acesso-video {
    padding: 180px 0 100px;
    background-color: #0c0211;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 80vh; /* Garante que ocupa bem a tela inicial */
}

.hero-media-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #0c0211;
}

/* Vídeo self-hosted MP4 */
.hero-bg-video-acesso {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

/* O Segredo: O Degradê que mescla o vídeo escuro com o site */
.hero-overlay-acesso {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 100% escuro na esquerda (para o texto) e translúcido na direita (para o vídeo) */
    background: linear-gradient(to right, #07010a 0%, rgba(7,1,10, 0.8) 50%, rgba(7,1,10, 0.2) 100%);
    z-index: 2;
}

.hero-acesso-container {
    position: relative;
    z-index: 10;
}

/* Alinha o texto à esquerda para não cobrir a máquina */
.hero-acesso-content {
    max-width: 750px; 
    text-align: left;
}

.hero-acesso-video h1 {
    font-family: var(--fonte-titulos);
    font-size: 3.8rem;
    color: var(--cor-branco);
    line-height: 1.1;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.hero-acesso-video p {
    font-size: 1.15rem;
    color: #b3b3b3;
    line-height: 1.6;
    max-width: 600px;
}

/* Responsividade do Hero de Acesso */
@media (max-width: 992px) {
    .hero-acesso-video h1 { font-size: 3.2rem; }
}

@media (max-width: 768px) {
    .hero-acesso-video { padding: 140px 0 80px; min-height: auto; }
    
    /* No telemóvel, o degradê precisa cobrir a imagem de cima a baixo para dar leitura */
    .hero-overlay-acesso {
        background: linear-gradient(to bottom, rgba(7,1,10, 0.95) 0%, rgba(7,1,10, 0.7) 100%);
    }
    
    .hero-acesso-content { text-align: center; margin: 0 auto; }
    .hero-acesso-video h1 { font-size: 2.5rem; }
    .hero-actions { justify-content: center !important; }
}

/* Seção Métodos de Acesso */
.secao-metodos-acesso {
    padding: 100px 0;
    background-color: #07010a; /* Mantém escuro para dar continuidade */
    border-top: 1px solid rgba(255,255,255,0.05);
}

.metodos-header {
    text-align: center;
    margin-bottom: 80px;
}

.metodos-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    line-height: 1.2;
    margin-bottom: 16px;
}

.metodos-header p {
    font-size: 1.15rem;
    color: #a0a0a0;
    max-width: 700px;
    margin: 0 auto;
}

.metodos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.metodo-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.metodo-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(149, 0, 200,0.5);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(149, 0, 200,0.15);
}


.metodo-card h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    color: var(--cor-branco);
    margin-bottom: 12px;
}

.metodo-card p {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.6;
}

/* Seção Recursos Corporativos (TEMA CLARO) */
.secao-recursos-corporativos {
    padding: 120px 0;
    background-color: var(--cor-branco);
}

.corp-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

.corp-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.corp-texto p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

.lista-corp-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.corp-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.corp-item i {
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-top: 5px;
}

.corp-item h4 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 8px;
}

.corp-item p {
    color: #666;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Visual Abstrato: Catraca/Eclusa Animada */
.corp-visual {
    display: flex;
    justify-content: center;
}

.access-mockup-wrapper {
    width: 100%;
    max-width: 450px;
    height: 450px;
    background: var(--cor-fundo);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.access-gate-abstract {
    width: 200px; height: 250px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Portas de Vidro da Catraca */
.gate-door {
    width: 45%; height: 100%;
    background: rgba(149, 0, 200,0.1);
    border: 2px solid var(--cor-primaria);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    transition: width 0.5s ease;
}

/* Animação de Abertura */
.access-mockup-wrapper:hover .gate-door { width: 10%; } /* As portas abrem */
.access-mockup-wrapper:hover .status-indicator { background: #27c93f; color: #fff; box-shadow: 0 10px 20px rgba(39,201,63,0.3); opacity: 1; bottom: -20px; }

/* Linha de Scanner Facial */
.scan-line {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 120%; height: 4px;
    background: #e290ff;
    box-shadow: 0 0 15px var(--cor-primaria);
    z-index: 5;
}

/* Status Flutuante */
.status-indicator {
    position: absolute;
    bottom: -40px; left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
    opacity: 0;
    transition: all 0.5s ease;
    white-space: nowrap;
}

/* Responsividade Controle de Acesso */
@media (max-width: 1024px) {
    .metodos-grid { grid-template-columns: repeat(2, 1fr); }
    .corp-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .corp-item { text-align: left; }
}

@media (max-width: 768px) {
    .metodos-grid { grid-template-columns: 1fr; }
    .access-mockup-wrapper { height: 350px; border-radius: 30px; }
}

/* =========================================
   SEÇÃO 4: GESTÃO E VISITANTES (DARK)
   ========================================= */
.secao-visitantes-dark {
    padding: 120px 0;
    background-color: #07010a;
    color: var(--cor-branco);
    overflow: hidden;
}

.visitantes-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* Mockup do Passaporte/Ticket Virtual */
.visitantes-visual {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.ticket-mockup {
    width: 320px;
    background: #150a1f;
    border-radius: 20px;
    border: 1px solid rgba(149, 0, 200,0.4);
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2;
    transform: rotateY(15deg) rotateX(10deg);
    transition: transform 0.5s ease;
}

.visitantes-visual:hover .ticket-mockup {
    transform: rotateY(0deg) rotateX(0deg) translateY(-3px);
}

.ticket-header {
    background: var(--cor-primaria);
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.ticket-logo { height: 24px; width: auto; }

.ticket-body {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(180deg, #150a1f 0%, #0c0211 100%);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.qr-code-fake {
    width: 150px; height: 150px;
    background: #fff;
    margin: 0 auto 20px;
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 6rem;
    color: #000;
    position: relative;
    overflow: hidden;
}

.scan-laser {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: #ff3333;
    box-shadow: 0 0 10px #ff3333;
    opacity: 0;
    animation: ticketScan 2.6s ease-in-out infinite;
}
@keyframes ticketScan {
    0%   { top: 2px; opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { top: calc(100% - 5px); opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { top: 2px; opacity: 0; }
}

.ticket-body h4 { font-size: 1.5rem; margin-bottom: 5px; color: var(--cor-branco); }
.ticket-body p { color: #aaa; margin-bottom: 24px; font-size: 0.9rem; }

.ticket-info {
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
    text-align: left;
}

.ticket-info small { color: #888; font-size: 0.75rem; text-transform: uppercase; }
.ticket-info strong { color: #e290ff; font-size: 0.95rem; }

/* Detalhe do "furo" no crachá */
.ticket-hole {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 8px;
    background: #07010a;
    border-radius: 10px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

.ticket-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.2) 0%, transparent 60%);
    z-index: 1;
    filter: blur(30px);
}

/* Textos da Seção 4 */
.visitantes-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    margin: 16px 0 24px;
    line-height: 1.1;
}

.visitantes-texto p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.lista-visitantes-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.v-feature { display: flex; gap: 20px; align-items: flex-start; }


.v-feature h4 { font-size: 1.25rem; margin-bottom: 8px; color: var(--cor-branco); }
.v-feature p { color: #888; font-size: 1rem; margin: 0; line-height: 1.5; }

/* =========================================
   SEÇÃO 5: RETROFIT E INTEGRAÇÃO (LIGHT)
   ========================================= */
.secao-retrofit-clara {
    padding: 120px 0;
    background-color: var(--cor-fundo);
}

.retrofit-header {
    text-align: center;
    margin-bottom: 80px;
}

.retrofit-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.retrofit-header p {
    font-size: 1.15rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

/* Diagrama de Retrofit */
.retrofit-diagrama {
    position: relative;
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retro-center {
    position: relative;
    z-index: 5;
}

.retro-cortex-box {
    width: 140px; height: 140px;
    background: #0c0211;
    border: 2px solid var(--cor-primaria);
    border-radius: 24px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
    color: var(--cor-branco);
    box-shadow: 0 20px 40px rgba(149, 0, 200,0.3);
}

.retro-cortex-box i { font-size: 2.5rem; color: var(--cor-primaria); }
.retro-cortex-box span { font-weight: bold; font-family: var(--fonte-titulos); letter-spacing: 1px;}

.retro-lines {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 60%;
    border: 2px dashed #ccc;
    border-radius: 30px;
    z-index: 1;
}

.retro-item {
    position: absolute;
    background: var(--cor-branco);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 1px solid #ddd;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 180px; text-align: center;
    z-index: 2;
    transition: transform 0.3s ease;
}

.retro-item:hover { transform: translateY(-3px); border-color: rgba(149, 0, 200,0.3); }
.retro-item i { font-size: 2rem; color: #555; }
.retro-item span { font-size: 0.9rem; font-weight: bold; color: var(--cor-secundaria); }

.item-top-left { top: 0; left: 0; }
.item-top-right { top: 0; right: 0; }
.item-bottom-left { bottom: 0; left: 0; }
.item-bottom-right { bottom: 0; right: 0; }


/* Responsividade das Novas Seções */
@media (max-width: 992px) {
    .visitantes-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .visitantes-visual { order: -1; }
    .v-feature { text-align: left; }
    
    .retrofit-diagrama { height: auto; flex-direction: column; gap: 30px; }
    .retro-lines { display: none; }
    .retro-item { position: static; width: 100%; max-width: 300px; flex-direction: row; justify-content: flex-start; padding: 15px 20px; }
    .retro-item i { margin-right: 15px; }
}

@media (max-width: 768px) {
    .visitantes-texto h2, .retrofit-header h2 { font-size: 2.8rem; }
}

/*
/
/
/
/
/
/
/
/
/
/*
/* =========================================
   PÁGINA: APP SIMPLES (NÍVEL PREMIUM)
   ========================================= */

/* Hero Premium Dark */
.hero-app-premium {
    padding: 150px 0 110px;
    background-color: #050008; /* Preto absoluto com um leve tom roxo */
    position: relative;
    overflow: hidden;
}

.hero-aura-bg {
    position: absolute;
    top: 50%; left: 70%;
    transform: translate(-50%, -50%);
    width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.2) 0%, rgba(226,144,255,0.05) 40%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.app-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.app-hero-texto h1 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.6rem, 5vw, 4.2rem); /* BUILD-APP-001 Fix 7 — fluid (site-critic P0.4) */
    color: var(--cor-branco);
    line-height: 1.08;
    margin-bottom: 24px;
    margin-top: 16px;
    text-wrap: balance;
}

.app-hero-texto p {
    font-size: 1.15rem;
    color: #b3b3b3;
    line-height: 1.6;
}

/* O Mockup do Smartphone */
.app-hero-visual {
    display: flex;
    justify-content: center;
    position: relative; /* Crucial para posicionar os badges */
}




/* Animação flutuante para o Hero */

/* Badges de Notificação 3D */
.ui-badge {
    position: absolute;
    background: rgba(20, 10, 30, 0.85); /* Fundo vidro escuro */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 15px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    z-index: 10;
    white-space: nowrap;
}

.badge-top { top: 80px; left: clamp(-80px, -6vw, -40px); }
.badge-bottom { bottom: 120px; right: clamp(-60px, -4.5vw, -30px); }

.badge-icon {
    width: 40px; height: 40px;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(149, 0, 200,0.5);
}

.badge-icon.ok { background: #27c93f; box-shadow: 0 0 15px rgba(39,201,63,0.4); }

.badge-text { display: flex; flex-direction: column; }
.badge-text strong { color: #fff; font-size: 0.95rem; margin-bottom: 2px; }
.badge-text span { color: #aaa; font-size: 0.85rem; }


/* =========================================
   SEÇÃO 2: SHOWCASE APPLE-STYLE (PREMIUM)
   ========================================= */
.secao-sticky-showcase {
    background-color: #050008;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.sticky-wrapper {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- LADO ESQUERDO: CARTÕES DE VIDRO SCROLL --- */
.scroll-content-left {
    flex: 1;
    padding: 10vh 50px 10vh 20px; 
    z-index: 2;
}

.scroll-step {
    min-height: 100vh; /* Cada passo exige uma rolagem completa de tela */
    display: flex;
    align-items: center; /* Centraliza o cartão no meio da tela */
    /* Button reset (a11y: scroll-step is <button> in app-simples) */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
    width: 100%;
}

/* O Design do Cartão (Bento Glass) */
.step-card {
    background: rgba(20, 10, 30, 0.4);
    border: 1px solid rgba(255,255,255,0.03);
    padding: 50px 40px;
    border-radius: 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0.6; /* BUILD-APP-001 Fix 2 — was 0.3 (WCAG 1.4.3 / 1.4.11) */
    transform: scale(0.9) translateY(30px);
    transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                background 0.3s ease,
                box-shadow 0.3s ease;
}

/* Quando o cartão chega ao centro da tela */
.scroll-step.step-active .step-card {
    opacity: 1;
    transform: scale(1) translateY(0);
    border-color: rgba(149, 0, 200,0.4);
    background: rgba(20, 10, 30, 0.85);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 0 20px rgba(149, 0, 200,0.1);
}

.step-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--acento-soft, #b833ea); /* BUILD-APP-001 Fix 2 — was var(--cor-primaria) (WCAG 1.4.3, 5.4:1) */
    margin-bottom: 12px;
}

.step-icon {
    width: 65px; height: 65px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.8rem;
    color: #666;
    margin-bottom: 24px;
    transition: all 0.5s ease;
}

.scroll-step.step-active .step-icon {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
    box-shadow: 0 10px 30px rgba(149, 0, 200,0.5);
}

.step-card h2 {
    font-family: var(--fonte-titulos);
    font-size: 2.8rem;
    color: #c9ccd1; /* BUILD-APP-001 Fix 2 — was #888 (WCAG 1.4.3 inactive ~9:1) */
    margin-bottom: 16px;
    line-height: 1.1;
    transition: color 0.5s ease;
}

.scroll-step.step-active .step-card h2 { color: var(--cor-branco); }

.step-card p {
    font-size: 1.2rem;
    color: #a8acb3; /* BUILD-APP-001 Fix 2 — was #555 (WCAG 1.4.3 inactive ~6.5:1) */
    line-height: 1.6;
    margin: 0;
    transition: color 0.5s ease;
}

.scroll-step.step-active .step-card p { color: #b3b3b3; }


/* --- LADO DIREITO: CELULAR FIXO (STICKY) --- */
.sticky-visual-right {
    flex: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}


/* O Chassi do iPhone */

/* Botões Físicos Laterais */

/* Dynamic Island (Entalhe no ecrã) */


/* As Imagens da Tela */


/* =========================================
   SEÇÃO 3: BENTO BOX (LIGHT PREMIUM)
   ========================================= */
.secao-bento-chaves {
    padding: 120px 0;
    background-color: #fbfbfd; 
    border-top: 1px solid #eaeaea;
}

.bento-header {
    text-align: center;
    margin-bottom: 60px;
}

.bento-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin-top: 16px;
    line-height: 1.15;
}


/* Os Cartões Brancos */





/* --- NOVA ANIMAÇÃO: SMART LOCK (BLINDADA CONTRA BUGS) --- */
.bento-visual-secure {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.secure-lock-ring {
    width: 140px; 
    height: 140px;
    border-radius: 50%;
    background: rgba(149, 0, 200, 0.05);
    border: 2px solid rgba(149, 0, 200, 0.15);
    display: flex; 
    justify-content: center; 
    align-items: center;
    position: absolute;
    box-shadow: 0 0 30px rgba(149, 0, 200, 0.1);
    /* Pulsação do anel */
}

.secure-lock-ring i {
    font-size: 3rem;
    position: absolute;
    transition: all 0.5s ease;
}

/* O Cadeado Fechado (Roxo) */
.lock-closed {
    color: var(--cor-primaria);
    animation: animateClosed 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* O Cadeado Aberto (Verde) */
.lock-opened {
    color: #27c93f;
    opacity: 0;
    transform: scale(0.8);
    animation: animateOpened 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* As animações usam Opacity e Scale, que NUNCA quebram o layout */
@keyframes animateClosed {
    0%, 40% { opacity: 1; transform: scale(1); }
    45%, 85% { opacity: 0; transform: scale(1.2); } /* Fica invisível enquanto o verde aparece */
    90%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes animateOpened {
    0%, 40% { opacity: 0; transform: scale(0.8); }
    50%, 80% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 15px rgba(39, 201, 63, 0.4)); }
    90%, 100% { opacity: 0; transform: scale(0.8); }
}

/* Estilos dos Cartões Menores */



/* =========================================
   RESPONSIVIDADE BLINDADA: APP SIMPLES
   ========================================= */

@media (max-width: 992px) {
    /* 1. Hero - Coloca o celular no topo e centraliza o texto */
    .app-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .app-hero-visual { order: -1; } /* Força a imagem a aparecer antes do texto */
    .app-hero-texto h1 { font-size: 3rem; }
    .ui-badge { display: none; } /* Oculta as notificações 3D no celular para não poluir */

    /* 2. Showcase Híbrido (Carrossel Mobile) */
    .sticky-wrapper { 
        display: flex; 
        flex-direction: column; 
    }
    
    .sticky-visual-right {
        position: relative; /* Remove o sticky */
        height: auto;
        padding: 60px 0 40px;
        order: -1; /* Força o iPhone a vir antes dos textos */
    }
    
    

    .scroll-content-left {
        padding: 0 0 60px 20px;
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* Habilita a rolagem lateral */
        scroll-snap-type: x mandatory; /* Efeito magnético ao arrastar */
        gap: 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Esconde a barra de rolagem nativa */
    .scroll-content-left::-webkit-scrollbar { display: none; }

    .scroll-step {
        min-height: auto;
        min-width: 85vw; /* Cada cartão ocupa 85% da tela, mostrando um pedaço do próximo */
        scroll-snap-align: center;
        opacity: 0.6; /* Cartões inativos ficam um pouco apagados */
        transform: scale(0.95);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* Cartão Ativo (Focado) */
    .scroll-step.step-active {
        opacity: 1;
        transform: scale(1);
    }

    /* O Vidro do Cartão no Mobile */
    .step-card {
        opacity: 1; /* Sobrescreve a opacidade do desktop */
        transform: none !important;
        background: rgba(20, 10, 30, 0.85);
        padding: 40px 30px;
        border-color: rgba(149, 0, 200,0.2);
        height: 100%; /* Deixa todos os cartões com a mesma altura */
    }

    .scroll-step.step-active .step-card {
        border-color: rgba(149, 0, 200,0.6);
        box-shadow: 0 10px 30px rgba(149, 0, 200,0.3);
    }

    .step-card h2 { font-size: 2rem; }

    /* Bento Box (Segurança) responsivo coberto por V4 */
    .bento-visual-secure { padding: 0; }

    /* 4. Ecossistema Nuvem - Empilha e centraliza */
    .ecossistema-grid { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .eco-visual { order: -1; height: 350px; }
    .eco-item { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }

    /* 5. Extras (Grid de 3) - Coloca um embaixo do outro */
    .extras-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .secao-app-extras-clara { padding: 80px 0; }
}

/* Ajustes finos para telas de telemóvel muito pequenas (Ex: iPhone SE) */
@media (max-width: 768px) {
    .app-hero-texto h1 { font-size: 2.5rem; }
    .bento-header h2, .eco-texto h2, .extras-header h2 { font-size: 2.3rem; }
    
    .scroll-content-left { padding-left: 15px; }
    .scroll-step { min-width: 90vw; }
}

/* Mobile bento-large ajustes específicos (visual: cadeado em cima, texto embaixo, sem fundo roxo) */
@media (max-width: 1024px) {
    .bento-visual-secure {
        order: -1;
        padding: 50px 20px 10px;
        background: transparent;
        border: none;
        width: 100%;
    }

    .secure-lock-ring {
        width: 110px; height: 110px;
        margin: 0 auto;
    }
    .secure-lock-ring i { font-size: 2.2rem; }

    .bento-texto-large {
        padding: 20px 30px 40px;
        text-align: center;
        background: transparent;
    }
}

/* =========================================
   BUILD-APP-001 Fix 6 — restore lista-eco-features on mobile
   (site-critic P0.3: conteúdo institucional não pode sumir em ≤992px)
   ========================================= */
@media (max-width: 992px) {
    /* Mostra a lista de funcionalidades em coluna empilhada (era display:none) */
    .secao-ecossistema-dark .lista-eco-features {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 32px;
    }

    /* Reduz um pouco a margem do parágrafo */
    .eco-texto p {
        margin-bottom: 0;
    }
}

/* =========================================
   BOTÕES DUPLOS NO HERO (DESKTOP E MOBILE)
   ========================================= */
.hero-actions-duplo {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    align-items: center;
}

/* O novo botão de contorno (Mais quadrado e tecnológico) */


/* Responsividade: Empilha os botões no telemóvel para não quebrar a tela */
@media (max-width: 768px) {
    .hero-actions-duplo {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    
    .hero-actions-duplo a {
        width: 100%; /* Botões esticam 100% no telemóvel */
        text-align: center;
    }
}
/*
/
/
/
/
/
/
/
/
/* =========================================
   PÁGINA: ENTREGA SIMPLES
   ========================================= */

/* Hero de Entregas (Estilo Estúdio Apple) */
.hero-entregas {
    padding: 180px 0 120px;
    background-color: #f8f8fa; /* Fundo super claro e limpo */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eaeaea;
}

.studio-bg-glow {
    position: absolute;
    top: 50%; right: 10%;
    transform: translateY(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.entregas-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.entregas-texto h1 {
    font-family: var(--fonte-titulos);
    font-size: 4rem;
    color: var(--cor-secundaria);
    line-height: 1.1;
    margin-bottom: 24px;
    margin-top: 16px;
}

.entregas-texto p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Hero Entregas tem fundo claro — força o ghost na variante clara */
.hero-entregas .btn--ghost {
    background: rgba(0,0,0,0.02);
    color: var(--cor-secundaria);
    border-color: rgba(0,0,0,0.15);
}
.hero-entregas .btn--ghost:hover {
    background: rgba(149, 0, 200, 0.05);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    transform: translateY(-1px);
}

/* Composição Físico + Digital */
.entregas-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
}

/* O Armário ao fundo */
.armario-render-box {
    position: absolute;
    right: 0;
    width: 450px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15); /* Dá profundidade de estúdio */
    overflow: hidden;
    z-index: 2;
}

.img-armario {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply; /* Tira fundos brancos residuais da imagem */
}

/* O Celular sobreposto à esquerda */



.img-tela-app {
    position: absolute;
    top: 6px; left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 34px;
    object-fit: cover;
    object-position: top center;
}

/* Badge Flutuante no Celular (Corrigido) */
.badge-encomenda {
    position: absolute;
    top: 40px; /* Baixei o card para não brigar com a câmera do topo */
    right: -60px; /* Joguei mais para fora para dar sensação de 3D */
    z-index: 50; /* <-- CORREÇÃO DO BUG: Passa por cima da câmera (z-index 20) */
    
    /* Efeito de Vidro (Glassmorphism) Apple */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    padding: 14px 24px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.4);
}

.badge-icon {
    width: 40px; height: 40px;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(149, 0, 200,0.4);
}

.badge-info strong { display: block; font-size: 0.95rem; color: #111; margin-bottom: 2px; }
.badge-info span { font-size: 0.85rem; color: #666; font-weight: 500; }


/* =========================================
   SEÇÃO 2: COMO FUNCIONA (JORNADA DARK)
   ========================================= */
.secao-jornada-dark {
    padding: 120px 0;
    background-color: #050008; /* Contraste total com o Hero claro */
    border-top: 1px solid rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}

.jornada-header {
    text-align: center;
    margin-bottom: 80px;
}

.jornada-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    margin-bottom: 16px;
    line-height: 1.1;
}

.jornada-header p {
    font-size: 1.15rem;
    color: #a0a0a0;
    max-width: 650px;
    margin: 0 auto;
}

.jornada-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* A linha que conecta os 3 passos */
.jornada-linha-conexao {
    position: absolute;
    top: 50px; /* Alinhado com o centro dos ícones */
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(149, 0, 200,0.5), transparent);
    z-index: 1;
}

.jornada-step {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.jornada-step:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200,0.3);
    background: rgba(255,255,255,0.04);
}

.step-destaque {
    border-color: rgba(149, 0, 200,0.3);
    background: linear-gradient(180deg, rgba(149, 0, 200,0.1) 0%, rgba(20,10,30,0.8) 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.step-numero {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 30px;
    background: #222;
    color: #888;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold;
    font-size: 0.9rem;
    border: 2px solid #333;
}

.destaque-num {
    background: var(--cor-primaria);
    color: #fff;
    border-color: #e290ff;
    box-shadow: 0 0 15px rgba(149, 0, 200,0.6);
}

.step-icon-box {
    width: 80px; height: 80px;
    margin: 0 auto 24px;
    background: #110517;
    border: 1px solid rgba(149, 0, 200,0.2);
    color: #e290ff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem;
    position: relative;
    z-index: 2;
}

.pulse-roxo {
    box-shadow: 0 0 0 0 rgba(149, 0, 200,0.4);
}

.jornada-step h4 {
    font-size: 1.4rem;
    color: var(--cor-branco);
    margin-bottom: 16px;
}

.jornada-step p {
    font-size: 1rem;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

/* Responsividade Jornada */
@media (max-width: 992px) {
    .jornada-grid { grid-template-columns: 1fr; max-width: 400px; }
    .jornada-linha-conexao {
        width: 2px; height: 70%;
        left: 50%; top: 10%;
        transform: translateX(-50%);
        background: linear-gradient(180deg, transparent, rgba(149, 0, 200,0.5), transparent);
    }
}

@media (max-width: 768px) {
    .jornada-header h2 { font-size: 2.4rem; }
    .jornada-step { padding: 40px 20px 30px; margin-bottom: 20px; }
}

/* =========================================
   SEÇÃO 3: GESTÃO NO APP (LIGHT)
   ========================================= */
.secao-gestao-entregas {
    padding: 120px 0;
    background-color: var(--cor-branco);
    overflow: hidden;
}

.gestao-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* O Visual do Celular */
.gestao-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Badge de Status Flutuante (A Retirar) */
.badge-status-flutuante {
    position: absolute;
    bottom: 60px; right: -30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(149, 0, 200,0.2);
    padding: 16px 24px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(149, 0, 200,0.15);
    z-index: 10;
    text-align: right;
}

.status-dot {
    position: absolute;
    top: -6px; left: -6px;
    width: 18px; height: 18px;
    background: #e290ff;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(149, 0, 200,0.5);
}

.badge-status-flutuante span {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 4px;
}

.badge-status-flutuante strong {
    font-size: 1.1rem;
    color: var(--cor-primaria);
}

/* Os Textos e Funcionalidades */
.gestao-texto h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.gestao-texto p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

.lista-gestao-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.gestao-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}


.gestao-item:hover .gestao-icon {
    background: var(--cor-primaria);
    color: #fff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 20px rgba(149, 0, 200,0.2);
}

.gestao-item h4 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 8px;
}

.gestao-item p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsividade: Gestão de Entregas */
@media (max-width: 992px) {
    .gestao-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .gestao-visual { order: -1; margin-bottom: 20px; }
    .gestao-item { text-align: left; }
    .badge-status-flutuante { right: 20px; bottom: 20px; }
}

@media (max-width: 768px) {
    .gestao-texto h2 { font-size: 2.6rem; }
    .badge-status-flutuante { padding: 12px 20px; right: 0; }
}

/* =========================================
   SEÇÃO 4: SHOWROOM HARDWARE (CENTRAL)
   ========================================= */
.secao-showroom-locker {
    padding: 120px 0 160px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f9 100%); /* Fundo claro premium */
    overflow: hidden;
}

.showroom-header {
    text-align: center;
    margin-bottom: 60px;
}

.showroom-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.showroom-header p {
    font-size: 1.15rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

/* O Palco Central */
.showroom-palco {
    position: relative;
    max-width: 1050px; /* Um pouco mais largo para acomodar o armário maior */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
}

/* O Armário agora está MAIOR */
.locker-center-display {
    position: relative;
    width: 520px; /* Aumentado de 450px para 520px */
    z-index: 2;
}

/* Bordas ARREDONDADAS aplicadas diretamente na imagem */
.img-locker-gigante {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply; /* MÁGICA: Some o fundo branco da foto e deixa só o armário roxo! */
    border-radius: 40px; /* <-- Bordas bem arredondadas e suaves */
}

.locker-shadow-floor {
    position: absolute;
    bottom: -15px; left: 50%;
    transform: translateX(-50%);
    width: 85%; height: 25px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
    z-index: -1;
}

/* Cartões de Vidro Flutuantes (Afastados levemente para caber o novo tamanho) */
.glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
    padding: 24px;
    width: 300px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 30px 50px rgba(149, 0, 200,0.15);
    border-color: rgba(149, 0, 200,0.2);
}

.glass-icon {
    width: 45px; height: 45px;
    background: #fcf4ff;
    color: var(--cor-primaria);
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.glass-card h4 {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    margin-bottom: 8px;
}

.glass-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Posições reajustadas para o armário de 520px */
.card-left { top: 20%; left: -80px; }
.card-right-top { top: 10%; right: -80px; }
.card-right-bottom { bottom: 15%; right: -50px; }

/* Responsividade Showroom Ajustada */
@media (max-width: 992px) {
    .showroom-palco { flex-direction: column; min-height: auto; gap: 30px; }
    .locker-center-display { width: 420px; margin-bottom: 40px; } /* Maior no tablet também */
    
    .glass-card { 
        position: relative; 
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100%; max-width: 400px;
    }
}

@media (max-width: 768px) {
    .showroom-header h2 { font-size: 2.6rem; }
    .locker-center-display { width: 320px; } /* Maior no telemóvel também */
}
/* Animações Flutuantes Desincronizadas */

/* Responsividade Hero Entregas */
@media (max-width: 992px) {
    .entregas-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .entregas-visual { height: 500px; order: -1; margin-top: 40px; }
    .armario-render-box { right: auto; left: 50%; transform: translateX(-40%); width: 350px; }
    .badge-encomenda { right: -20px; }
}

@media (max-width: 768px) {
    .entregas-texto h1 { font-size: 2.8rem; }
    .armario-render-box { width: 280px; }
}


/* =========================================
   SEÇÃO FINAL: CTA PADRÃO (TODAS AS PÁGINAS)
   ========================================= */
.secao-cta-padrao {
    padding: 100px 0;
    background-color: #050008; /* Fundo escuro premium ONE */
    border-top: 1px solid rgba(149, 0, 200,0.15); /* Linha sutil separando da seção de cima */
    text-align: center;
}

.cta-box-center {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-box-center h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    margin: 24px 0 20px;
    line-height: 1.2;
}

.cta-box-center p {
    font-size: 1.15rem;
    color: #a0a0a0;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Botão maior e com animação de pulso para o final da página */
.btn-cta-pulse {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* Responsividade do CTA Padrão */
@media (max-width: 768px) {
    .secao-cta-padrao { padding: 80px 20px; }
    .cta-box-center h2 { font-size: 2.4rem; }
    .btn-cta-pulse { width: 100%; text-align: center; }
}

/* =========================================
   CORREÇÃO DEFINITIVA: HERO ENTREGA SIMPLES
   ========================================= */
@media (max-width: 992px) {
    .entregas-hero-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 40px;
    }
    
    .hero-entregas .hero-actions-duplo { justify-content: center; }

    /* Transformamos a área num Flexbox que centraliza TUDO perfeitamente */
    .entregas-visual {
        display: flex;
        justify-content: center; /* Centraliza a caixa do telemóvel à força */
        align-items: flex-end;
        position: relative;
        height: 500px; 
        margin-top: 40px;
    }

    /* O telemóvel deixa de ter 'left' e 'transform', e fica centralizado pelo Flexbox */

    /* O armário fica fixo ao centro no fundo usando margens (sem conflito de animação) */
    .armario-render-box {
        position: absolute;
        left: 0; right: 0; /* Estica a caixa */
        margin: 0 auto; /* Centraliza perfeitamente */
        top: 20px;
        width: 320px;
        z-index: 1;
    }
}

@media (max-width: 768px) {
    .hero-entregas { padding: 120px 0 60px; }
    .entregas-texto h1 { font-size: 2.5rem; }
    .entregas-visual { height: 420px; }

    .armario-render-box {
        width: 250px;
        top: 10px;
    }

    /* Encolhemos fisicamente as caixas em vez de usar scale() para proteger a animação */

    /* Puxamos o pop-up para não gerar barra de scroll lateral */
    .badge-encomenda {
        right: -10px; 
        top: 30px;
        transform: scale(0.85);
        transform-origin: right center;
    }
}
/*
/
/
/
/
/
/
/
/
/* =========================================
   PÁGINA: BI OPERACIONAL
   ========================================= */

.hero-bi-dashboard {
    padding: 160px 0 100px;
    background-color: #030005; /* Fundo super escuro (quase preto) para dar contraste ao Dashboard */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(149, 0, 200,0.15);
}

.bi-hero-content {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
}

.bi-hero-content h1 {
    font-family: var(--fonte-titulos);
    font-size: 4.2rem;
    color: var(--cor-branco);
    line-height: 1.1;
    margin: 20px 0;
}

.bi-hero-content p {
    font-size: 1.2rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.justify-center { justify-content: center; }

/* Composição 3D do Dashboard */
.bi-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px; /* Cria a profundidade de campo 3D */
    margin-top: 20px;
}

.bi-glow-bg {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: radial-gradient(ellipse, rgba(149, 0, 200,0.2) 0%, transparent 60%);
    filter: blur(50px);
    z-index: 1;
}

/* O Envoltório que inclina a imagem */
.dashboard-3d-wrapper {
    position: relative;
    z-index: 5;
    transform: rotateX(8deg) scale(0.95); /* Inclinação no eixo X (deita a imagem para trás levemente) */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d; /* Permite que os elementos filhos saltem no eixo Z */
}

.dashboard-3d-wrapper:hover {
    transform: rotateX(0deg) scale(1) translateY(-3px); /* Levanta e fica de frente quando passa o mouse */
}

.img-dashboard-main {
    width: 100%;
    max-width: 1100px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(149, 0, 200,0.3);
    display: block;
}

/* Métrica Flutuante (Glassmorphism) */
.glass-metric {
    position: absolute;
    background: rgba(20, 10, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(149, 0, 200,0.5);
    padding: 16px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transform: translateZ(60px); /* Efeito parallax: salta na frente da imagem inclinada */
    z-index: 10;
}

.metric-left { top: -20px; left: -30px; }

.metric-icon {
    width: 45px; height: 45px;
    background: rgba(39, 201, 63, 0.1);
    color: #27c93f; /* Verde sucesso */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem;
}

.glass-metric span { display: block; font-size: 0.85rem; color: #a0a0a0; margin-bottom: 2px; }
.glass-metric strong { font-size: 1.3rem; color: #fff; }

/* Responsividade: Hero BI */
@media (max-width: 992px) {
    .bi-hero-content h1 { font-size: 3.2rem; }
    .dashboard-3d-wrapper { transform: rotateX(0deg) scale(1); } /* Remove o 3D no tablet para facilitar visualização */
    .dashboard-3d-wrapper:hover { transform: none; }
    .metric-left { top: -30px; left: 15px; }
}

@media (max-width: 768px) {
    .hero-bi-dashboard { padding: 120px 0 60px; }
    .bi-hero-content h1 { font-size: 2.6rem; }
    .bi-hero-content p { font-size: 1.05rem; }
    .glass-metric { transform: scale(0.85); left: 0; right: 0; margin: 0 auto; width: max-content; }
}

/* =========================================
   SEÇÃO 2: RAIO-X DA OPERAÇÃO (DARK HOLOGRÁFICO)
   ========================================= */
.secao-raiox-operacao {
    padding: 80px 0 140px;
    background-color: #030005; /* Mantém o fundo contínuo com o Hero */
    overflow: hidden;
    position: relative;
}

.raiox-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.raiox-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-branco);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.raiox-header p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
}

/* O Palco Central (Chassi + Hologramas) */
.raiox-palco {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    z-index: 5;
}

.raiox-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: radial-gradient(ellipse, rgba(149, 0, 200,0.15) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

.img-raiox {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.95; /* Suaviza o brilho branco da imagem no fundo escuro */
}

/* Cartões Holográficos de Vidro (Extraídos da Imagem) */
.glass-hologram {
    position: absolute;
    background: rgba(15, 5, 25, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(149, 0, 200,0.4);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(149, 0, 200,0.1);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
}

.holo-icon {
    width: 45px; height: 45px;
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem;
}

.green-glow { background: rgba(39, 201, 63, 0.1); color: #27c93f; box-shadow: 0 0 15px rgba(39, 201, 63, 0.2); }
.purple-glow { background: rgba(149, 0, 200,0.2); color: #e290ff; box-shadow: 0 0 15px rgba(149, 0, 200,0.4); }
.orange-glow { background: rgba(184, 51, 234, 0.1); color: #b833ea; box-shadow: 0 0 15px rgba(184, 51, 234, 0.2); }

.holo-info span { display: block; font-size: 0.85rem; color: #a0a0a0; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }
.holo-info strong { font-size: 1.2rem; color: #fff; }
.status-green { color: #27c93f; font-size: 0.9em; margin-left: 4px; }

/* Posições Perfeitas (Intersetando a borda da imagem) */
.holo-left { top: 15%; left: -40px; }
.holo-right-top { top: 10%; right: -40px; }
.holo-right-bottom { bottom: 20%; right: -20px; }

/* Responsividade Raio-X */
@media (max-width: 1200px) {
    .holo-left { left: 20px; }
    .holo-right-top { right: 20px; }
    .holo-right-bottom { right: 20px; }
}

@media (max-width: 992px) {
    .raiox-header h2 { font-size: 3rem; }
    
    /* Empilha os hologramas abaixo da imagem no mobile para não cobrir tudo */
    .glass-hologram {
        position: relative;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100%;
        margin-top: 15px;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .raiox-header h2 { font-size: 2.4rem; }
}

/* =========================================
   SEÇÃO 3: ACESSOS E EVENTOS (DUAL DASHBOARD LIGHT)
   ========================================= */
.secao-dual-dashboards {
    padding: 120px 0;
    background-color: var(--cor-branco);
    overflow: hidden;
}

.dual-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.dual-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.dual-header p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

.dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* O Cartão de Dashboard */
.dash-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    padding: 30px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-destaque {
    background: linear-gradient(180deg, #ffffff 0%, #fcf8ff 100%);
    border-color: rgba(149, 0, 200,0.1);
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px rgba(149, 0, 200,0.12);
}

/* A Área da Imagem */
.dash-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible; /* Permite que os badges flutuem para fora */
    margin-bottom: 30px;
}

.glow-dash-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.05) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

.purple-version {
    background: radial-gradient(ellipse, rgba(149, 0, 200,0.15) 0%, transparent 70%);
}

.dash-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s ease;
}

.dash-card:hover .dash-img-wrapper img {
    transform: scale(1.02);
}

/* Badges Flutuantes (Dados Reais) */
.dash-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(149, 0, 200,0.2);
    padding: 12px 20px;
    border-radius: 14px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.dash-badge i {
    font-size: 1.4rem;
    color: var(--cor-primaria);
    background: #fcf4ff;
    padding: 10px;
    border-radius: 10px;
}

.dash-badge span { display: block; font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.dash-badge strong { font-size: 1.1rem; color: var(--cor-secundaria); }

.badge-top-right { top: -20px; right: -20px; }
.badge-bottom-left { bottom: -20px; left: -20px; }

/* Textos Explicativos */
.dash-texto h3 {
    font-size: 1.5rem;
    color: var(--cor-secundaria);
    margin-bottom: 12px;
}

.dash-texto p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Responsividade Dual Dashboards */
@media (max-width: 992px) {
    .dual-grid { grid-template-columns: 1fr; max-width: 600px; }
    .badge-top-right { right: 10px; top: -15px; }
    .badge-bottom-left { left: 10px; bottom: -15px; }
}

@media (max-width: 768px) {
    .dual-header h2 { font-size: 2.6rem; }
    .dash-card { padding: 20px; }
    .dash-badge { padding: 10px 15px; }
    .dash-badge i { font-size: 1.2rem; padding: 8px; }
}

/* =========================================
   SEÇÃO 4: ANÁLISE INDIVIDUAL (OVERLAP GLASS)
   ========================================= */
.secao-foco-operador {
    padding: 100px 0 160px;
    background-color: #020003; /* Escuro profundo para destacar o vidro */
    position: relative;
    overflow: hidden;
}

/* O Display da Imagem Gigante */
.foco-image-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 1;
}

.foco-glow-top {
    position: absolute;
    top: -50px; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 200px;
    background: radial-gradient(ellipse, rgba(149, 0, 200,0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

.img-foco-dash {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px 16px 0 0; /* Arredonda só em cima */
    border: 1px solid rgba(255,255,255,0.05);
    border-bottom: none;
    box-shadow: 0 -20px 60px rgba(149, 0, 200,0.08);
    opacity: 0.95;
}

/* O Painel de Vidro Sobreposto (A Mágica) */
.glass-overlap-panel {
    position: relative;
    max-width: 1100px;
    margin: -120px auto 0; /* PUXA O PAINEL PARA CIMA DA IMAGEM */
    z-index: 10;
    
    /* Efeito Glassmorphism Premium */
    background: rgba(18, 5, 25, 0.75);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(149, 0, 200,0.4);
    border-top: 1px solid rgba(255,255,255,0.2); /* Linha de luz no topo do vidro */
    border-radius: 24px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8), inset 0 20px 40px rgba(255,255,255,0.02);
    
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Textos da Esquerda */
.overlap-text h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.2rem;
    color: var(--cor-branco);
    margin: 16px 0 20px;
    line-height: 1.1;
}

.overlap-text p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin: 0;
}

/* Argumentos da Direita */
.overlap-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-card-glass {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255,255,255,0.03);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: background 0.3s ease, transform 0.3s ease;
}

.feature-card-glass:hover {
    background: rgba(255,255,255,0.06);
    transform: translateX(10px);
    border-color: rgba(149, 0, 200,0.3);
}



.feature-card-glass h3 {
    font-size: 1.2rem;
    color: var(--cor-branco);
    margin-bottom: 6px;
}

.feature-card-glass p {
    font-size: 0.95rem;
    color: #888;
    line-height: 1.5;
    margin: 0;
}

/* Responsividade do Painel Flutuante */
@media (max-width: 992px) {
    .glass-overlap-panel {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px;
        margin-top: -60px; /* Reduz a sobreposição no tablet */
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .secao-foco-operador { padding: 80px 0 100px; }
    .overlap-text h2 { font-size: 2.5rem; }
    .glass-overlap-panel {
        padding: 30px 20px;
        margin-top: -30px; /* Sobreposição mínima no telemóvel */
        border-radius: 20px;
        max-width: 95%;
    }
    .feature-card-glass { padding: 16px; flex-direction: column; gap: 12px; }
}

/* =========================================
   SEÇÃO 5: ESCALA E FILTROS (PREMIUM LIGHT)
   ========================================= */
.secao-filtros-escala {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f9 100%);
    overflow: hidden;
}

.escala-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.escala-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.escala-header p {
    font-size: 1.15rem;
    color: #666;
    line-height: 1.6;
}

/* O Palco Central (Navegador + Filtros Flutuantes) */
.escala-showcase {
    position: relative;
    max-width: 1050px;
    margin: 0 auto 80px;
    z-index: 5;
}

.escala-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; height: 90%;
    background: radial-gradient(ellipse, rgba(149, 0, 200,0.1) 0%, transparent 60%);
    filter: blur(40px);
    z-index: -1;
}

.img-escala {
    width: 100%;
    height: auto;
    display: block;
}

/* Tags de Filtro Flutuantes */
.filter-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(149, 0, 200,0.2);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-secundaria);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    z-index: 10;
}

.filter-badge i { color: var(--cor-primaria); font-size: 1.1rem; }

/* Posições das Tags */
.fb-1 { top: -20px; left: 40px; }
.fb-2 { top: 20%; right: -30px; }
.fb-3 { bottom: -20px; right: 60px; }

/* Linha de Funcionalidades (Rodapé da Secção) */
.escala-features-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.ef-card {
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.ef-card h3 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 12px;
}

.ef-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Responsividade: Secção 5 */
@media (max-width: 992px) {
    .escala-features-row { grid-template-columns: 1fr; gap: 40px; }
    .fb-1, .fb-2, .fb-3 { position: relative; top: 0; left: 0; right: 0; bottom: 0; width: max-content; margin: 0 auto 10px; transform: none !important; }
    .escala-showcase { display: flex; flex-direction: column; }
    .escala-browser-chassi { order: -1; margin-bottom: 30px; }
}

@media (max-width: 768px) {
    .escala-header h2 { font-size: 2.6rem; }
}

/* =========================================
   SEÇÃO 6: TIMELINE OPERACIONAL (DARK FLOW)
   ========================================= */
.secao-timeline-operacional {
    padding: 140px 0;
    background-color: #040006; /* Dark mode profundo */
    border-top: 1px solid rgba(149, 0, 200,0.1);
    overflow: hidden;
    position: relative;
}

.timeline-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.timeline-header h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-branco);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.timeline-header p {
    font-size: 1.15rem;
    color: #a0a0a0;
    line-height: 1.6;
}

/* O Trilho Central */
.timeline-trilho {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

.linha-neon-central {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(149, 0, 200,0.8) 20%, rgba(184, 51, 234, 0.8) 80%, transparent 100%);
    box-shadow: 0 0 15px rgba(149, 0, 200,0.5);
    z-index: 1;
}

/* Blocos da Timeline */
.timeline-bloco {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    position: relative;
    z-index: 2;
}

.timeline-bloco:last-child { margin-bottom: 0; }

.tl-conteudo {
    width: 45%; /* Deixa 10% de respiro no meio para a linha */
}

/* Os Pontos Brilhantes no Centro */
.ponto-timeline {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    background: #11051a;
    border: 2px solid var(--cor-primaria);
    color: #e290ff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(149, 0, 200,0.6);
    z-index: 5;
}

.ponto-orange {
    border-color: #b833ea;
    color: #b833ea;
    box-shadow: 0 0 20px rgba(184, 51, 234, 0.4);
}

/* Textos da Timeline */
.tl-texto {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.tl-esquerda .tl-texto { text-align: right; }
.tl-direita .tl-texto { text-align: left; }

.tl-texto h3 {
    font-size: 1.8rem;
    color: var(--cor-branco);
    margin-bottom: 16px;
}

.tl-texto p {
    font-size: 1.1rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Badges de Destaque */
.badge-tl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.badge-tl.purple { background: rgba(149, 0, 200,0.2); color: #e290ff; border: 1px solid rgba(149, 0, 200,0.3); }
.badge-tl.orange { background: rgba(184, 51, 234, 0.15); color: #b833ea; border: 1px solid rgba(184, 51, 234, 0.3); }

/* Imagens com Perspectiva 3D Suave */
.tl-imagem-wrapper {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.5s ease;
}

.tl-imagem-wrapper img {
    width: 100%; height: auto; display: block;
    border-radius: 12px;
    position: relative; z-index: 2;
    opacity: 0.9;
}

.timeline-bloco:hover .tl-imagem-wrapper img { opacity: 1; }

.glow-img-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(149, 0, 200,0.3) 0%, transparent 60%);
    filter: blur(40px);
    z-index: 1;
}

.orange-glow { background: radial-gradient(circle, rgba(184, 51, 234, 0.2) 0%, transparent 60%); }

/* Inclinando as Imagens para a linha central */
.tilt-left { transform: perspective(1000px) rotateY(8deg); }
.tilt-right { transform: perspective(1000px) rotateY(-8deg); }

.timeline-bloco:hover .tilt-left { transform: perspective(1000px) rotateY(0deg) scale(1.02); }
.timeline-bloco:hover .tilt-right { transform: perspective(1000px) rotateY(0deg) scale(1.02); }

/* Responsividade: Timeline */
@media (max-width: 992px) {
    .linha-neon-central { left: 30px; }
    .timeline-bloco { flex-direction: column; align-items: flex-start; margin-bottom: 80px; padding-left: 80px; }
    .ponto-timeline { left: 30px; top: 0; transform: translate(-50%, 0); }
    
    .tl-conteudo { width: 100%; }
    .tl-esquerda .tl-texto { text-align: left; margin-bottom: 30px; }
    .tl-direita .tl-texto { text-align: left; }
    
    .inverte-mobile { order: -1; margin-bottom: 30px; } /* Garante que a imagem ou texto venham na ordem certa no telemóvel */
    
    .tilt-left, .tilt-right { transform: none; }
}

@media (max-width: 768px) {
    .timeline-header h2 { font-size: 2.5rem; }
    .tl-texto h3 { font-size: 1.5rem; }
    .tl-texto { padding: 24px; }
}

/* =========================================
   SEÇÃO 7: VISÃO EXECUTIVA
   Substituiu o MacBook mockup CSS pela screenshot real
   apresentada via .product-shot (CRITICA-007.5 + CRITICA-008).
   ========================================= */
.secao-visao-executiva {
    padding: 120px 0 160px;
    background: linear-gradient(180deg, #fdfdfd 0%, #f4f4f9 100%);
    overflow: hidden;
}

.executiva-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px;
}

.executiva-header h2 {
    color: var(--cor-secundaria);
    margin: 16px 0 24px;
}

.executiva-header p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .secao-visao-executiva {
        padding: 80px 0 96px;
    }
    .executiva-header {
        margin-bottom: 48px;
    }
}

/* =========================================
   ===========================================
   REFORM 2026 — CAMADA DE REFINAMENTO
   ===========================================
   Override e complemento da identidade visual.
   Aplicada acima das regras anteriores.
   ========================================= */

/* ----------------------------------------
   TIPOGRAFIA — refino e ritmo responsivo
   ---------------------------------------- */
.hero-title,
.hero-produto-content h1,
.hero-acesso-content h1,
.hero-interno-content h1,
.app-hero-texto h1,
.entregas-texto h1,
.bi-hero-content h1,
.hero-text-blend h1 {
    font-size: clamp(2.4rem, 5.2vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.secao-pipeline h2,
.bento-header h2,
.dif-dark-header h2,
.software-header h2,
.pipeline-header h2,
.matriz-header h2,
.oneplus-header h2,
.metodos-header h2,
.corp-texto h2,
.visitantes-texto h2,
.retrofit-header h2,
.cortex-texto h2,
.timeline-header h2,
.pilares-header h2,
.bento-header h2,
.extras-header h2,
.jornada-header h2,
.gestao-texto h2,
.showroom-header h2,
.raiox-header h2,
.dual-header h2,
.overlap-text h2,
.escala-header h2,
.executiva-header h2,
.cta-premium-content h2,
.comparativo-header h2,
.arsenal-bento-header h2,
.passos-header h2,
.pactos-header h2,
.mvv-header h2,
.cta-content h2,
.showcase-texto h2,
.eco-texto h2 {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
}

.hero-subtitle,
.hero-produto-content p,
.hero-acesso-content p,
.hero-interno-content p,
.app-hero-texto p,
.entregas-texto p,
.bi-hero-content p,
.hero-text-blend p {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.55;
}

/* H2/H3 padrão de seção — mais compactos no mobile */
@media (max-width: 640px) {
    .secao-pipeline h2,
    .bento-header h2,
    .dif-dark-header h2,
    .software-header h2,
    .pipeline-header h2,
    .matriz-header h2,
    .oneplus-header h2,
    .metodos-header h2,
    .corp-texto h2,
    .visitantes-texto h2,
    .retrofit-header h2,
    .cortex-texto h2,
    .timeline-header h2,
    .pilares-header h2,
    .extras-header h2,
    .jornada-header h2,
    .gestao-texto h2,
    .showroom-header h2,
    .raiox-header h2,
    .dual-header h2,
    .overlap-text h2,
    .escala-header h2,
    .executiva-header h2,
    .cta-premium-content h2,
    .comparativo-header h2,
    .arsenal-bento-header h2,
    .passos-header h2,
    .pactos-header h2,
    .mvv-header h2,
    .cta-content h2,
    .showcase-texto h2,
    .eco-texto h2 {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.12;
    }

    /* Tira os <br> dos títulos no mobile, deixa o texto fluir */
    .hero-title br,
    .secao-pipeline h2 br,
    .bento-header h2 br,
    .dif-dark-header h2 br,
    .pipeline-header h2 br,
    .matriz-header h2 br,
    .oneplus-header h2 br,
    .corp-texto h2 br,
    .visitantes-texto h2 br,
    .cortex-texto h2 br,
    .timeline-header h2 br,
    .raiox-header h2 br,
    .dual-header h2 br,
    .overlap-text h2 br,
    .escala-header h2 br,
    .executiva-header h2 br,
    .showcase-texto h2 br,
    .eco-texto h2 br {
        display: none;
    }
}

/* ----------------------------------------
   EYEBROW MINI — substituto leve dos tags-tech
   Usado em headers de seção internos.
   ---------------------------------------- */
.eyebrow-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fonte-textos);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--cor-primaria);
    font-weight: 600;
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: none;
}

.eyebrow-mini::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--cor-primaria);
    flex-shrink: 0;
}

.eyebrow-mini.eyebrow-light {
    color: #c596de;
}

.eyebrow-mini.eyebrow-light::before {
    background: #c596de;
    opacity: 0.6;
}

/* Permite centralizar quando o header é central */
.bento-header,
.dif-dark-header,
.pipeline-header,
.matriz-header,
.oneplus-header,
.metodos-header,
.retrofit-header,
.timeline-header,
.pilares-header,
.extras-header,
.jornada-header,
.showroom-header,
.raiox-header,
.dual-header,
.escala-header,
.executiva-header,
.comparativo-header,
.arsenal-bento-header,
.passos-header,
.pactos-header,
.mvv-header {
    text-align: center;
}

.bento-header .eyebrow-mini,
.dif-dark-header .eyebrow-mini,
.pipeline-header .eyebrow-mini,
.matriz-header .eyebrow-mini,
.oneplus-header .eyebrow-mini,
.metodos-header .eyebrow-mini,
.retrofit-header .eyebrow-mini,
.timeline-header .eyebrow-mini,
.pilares-header .eyebrow-mini,
.extras-header .eyebrow-mini,
.jornada-header .eyebrow-mini,
.showroom-header .eyebrow-mini,
.raiox-header .eyebrow-mini,
.dual-header .eyebrow-mini,
.escala-header .eyebrow-mini,
.executiva-header .eyebrow-mini,
.comparativo-header .eyebrow-mini,
.arsenal-bento-header .eyebrow-mini,
.passos-header .eyebrow-mini,
.pactos-header .eyebrow-mini,
.mvv-header .eyebrow-mini {
    justify-content: center;
}

.passos-header,
.gestao-texto,
.cortex-texto,
.visitantes-texto,
.corp-texto,
.showcase-texto,
.eco-texto,
.overlap-text {
    text-align: left;
}

/* ----------------------------------------
   BENTO LINK MINIMAL — link de CTA dentro de card
   ---------------------------------------- */
.bento-link-min {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--fonte-textos);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cor-primaria);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    transition: gap 0.25s ease, color 0.25s ease;
}

.bento-link-min i {
    font-size: 0.78rem;
    transition: transform 0.25s ease;
}

.bento-link-min:hover {
    gap: 14px;
    color: var(--cor-secundaria);
}

.bento-link-min:hover i {
    transform: translateX(2px);
}

.bento-destaque .bento-link-min {
    color: rgba(255, 255, 255, 0.95);
}

.bento-destaque .bento-link-min:hover {
    color: #ffffff;
}

/* Empurra o link para a base do card — só nos verticais */
.bento-item .bento-content:not(.row-content) {
    display: flex;
    flex-direction: column;
}

.bento-item .bento-content:not(.row-content) > p {
    flex: 1;
}

/* ----------------------------------------
   3 STATS NO INDEX — antes eram 2
   ---------------------------------------- */
.pipeline-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

@media (max-width: 720px) {
    .pipeline-stats .stat-divider {
        display: none;
    }
}

/* ----------------------------------------
   QUEM SOMOS — MISSÃO/VISÃO/VALORES (FAIXA)
   Substituto visual do antigo .secao-pilares-tech duplicado.
   ---------------------------------------- */
.secao-mvv-faixa {
    padding: 100px 0;
    background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
    position: relative;
    overflow: hidden;
}

.secao-mvv-faixa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: linear-gradient(180deg, transparent, var(--cor-primaria));
    opacity: 0.5;
}

.mvv-header {
    max-width: 700px;
    margin: 0 auto 64px;
}

.mvv-header h2 {
    font-family: var(--fonte-titulos);
    text-transform: uppercase;
    color: var(--cor-secundaria);
    margin: 0;
}

.mvv-faixa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(72, 16, 102, 0.12);
    border-bottom: 1px solid rgba(72, 16, 102, 0.12);
}

.mvv-bloco {
    padding: 56px 36px;
    position: relative;
    border-right: 1px solid rgba(72, 16, 102, 0.12);
    transition: background 0.4s ease;
}

.mvv-bloco:last-child {
    border-right: none;
}

.mvv-bloco:hover {
    background: rgba(149, 0, 200, 0.04);
}

.mvv-marca {
    font-family: var(--fonte-titulos);
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: rgba(149, 0, 200, 0.4);
    display: block;
    margin-bottom: 24px;
}


.mvv-bloco h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.7rem;
    text-transform: uppercase;
    color: var(--cor-secundaria);
    margin-bottom: 14px;
    letter-spacing: -0.005em;
}

.mvv-bloco p {
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
}

@media (max-width: 880px) {
    .mvv-faixa-grid {
        grid-template-columns: 1fr;
    }
    .mvv-bloco {
        border-right: none;
        border-bottom: 1px solid rgba(72, 16, 102, 0.12);
        padding: 40px 28px;
    }
    .mvv-bloco:last-child {
        border-bottom: none;
    }
}

/* ----------------------------------------
   QUEM SOMOS — PACTOS (substitui o segundo pilares-tech)
   ---------------------------------------- */
.secao-pactos {
    padding: 120px 0;
    background-color: #07010a;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.secao-pactos::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(149, 0, 200, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(72, 16, 102, 0.32) 0%, transparent 50%);
    pointer-events: none;
}

.pactos-header {
    max-width: 720px;
    margin: 0 auto 64px;
    position: relative;
    z-index: 1;
}

.pactos-header h2 {
    font-family: var(--fonte-titulos);
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}

.pactos-header p {
    color: #b3b3b3;
    font-size: 1.1rem;
    line-height: 1.6;
}

.pactos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

.pacto-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.pacto-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200, 0.4);
    background: rgba(149, 0, 200, 0.04);
}

.pacto-card.pacto-destaque {
    background: linear-gradient(160deg, rgba(149, 0, 200, 0.18) 0%, rgba(72, 16, 102, 0.04) 100%);
    border-color: rgba(149, 0, 200, 0.35);
}

.pacto-numero {
    font-family: var(--fonte-titulos);
    font-size: 0.78rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    margin-bottom: 28px;
}


.pacto-card.pacto-destaque .pacto-icone {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    box-shadow: 0 8px 24px rgba(149, 0, 200, 0.4);
}

.pacto-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: -0.005em;
}

.pacto-card p {
    color: #a8a8a8;
    line-height: 1.6;
    font-size: 0.98rem;
}

@media (max-width: 980px) {
    .pactos-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   ESCONDE O TAG ANTIGO QUANDO HOUVER EYEBROW
   (Evita duplo eyebrow em seções que migrei)
   ---------------------------------------- */
.bento-header .tag-discreta,
.pipeline-header .tag-discreta {
    display: none;
}

/* Quem Somos: timeline-header centralizado mesmo */
.timeline-header { text-align: center; }
.timeline-header h2 br { display: inline; }

/* ----------------------------------------
   REMOVE EXCESSO DE GRADIENT TEXT
   Em headers internos com .text-gradient repetido o gradiente
   continua, mas o tom geral fica mais sóbrio com a tipografia maior.
   ---------------------------------------- */
.text-gradient {
    background: linear-gradient(105deg, #c08bff 0%, var(--cor-primaria) 60%, var(--cor-secundaria) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----------------------------------------
   SECTION DIVIDERS — transições mais suaves
   ---------------------------------------- */
.secao-pipeline,
.secao-bento,
.secao-software-showcase,
.secao-cortex-clara,
.secao-oneplus-showcase,
.secao-metodos-acesso,
.secao-recursos-corporativos,
.secao-retrofit-clara,
.secao-gestao-entregas,
.secao-bento-chaves,
.secao-app-extras-clara,
.secao-arsenal-bento,
.secao-mvv-faixa,
.secao-foco-operador,
.secao-filtros-escala,
.secao-visao-executiva {
    position: relative;
}

/* ----------------------------------------
   AJUSTES PONTUAIS DE CTAs
   ---------------------------------------- */
.cta-content h2,
.cta-premium-content h2 {
    margin-bottom: 18px;
    text-transform: none;
    letter-spacing: -0.012em;
}

.cta-botoes {
    flex-wrap: wrap;
}

/* CTA outline com ícone */

/* ----------------------------------------
   BI — REDUÇÃO DA POLUIÇÃO DE HOLOGRAMAS
   (Removi um dos 3 originais — esses ajustes finalizam o layout)
   ---------------------------------------- */
.raiox-palco .glass-hologram.holo-right-top {
    display: none;
}

.dash-img-wrapper .dash-badge {
    display: none;
}

/* ----------------------------------------
   FOOTER — refino leve
   ---------------------------------------- */
.footer-desc em {
    color: var(--cor-primaria);
    font-style: normal;
    font-weight: 600;
    display: block;
    margin-top: 8px;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
}

.footer-col h3,
.footer-col h4 {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.88rem;
}

/* ----------------------------------------
   AJUSTE: tag-tech (hero), reduz visual ruído
   compacto
   ---------------------------------------- */
.hero-interno-content h1,
.hero-text-blend h1 {
    margin-bottom: 22px;
}

/* ----------------------------------------
   STAT BOX MAIS RESPIRADO
   ---------------------------------------- */
.stat-number {
    line-height: 1;
}

/* ----------------------------------------
   MOBILE: pilha hero do index
   ---------------------------------------- */
@media (max-width: 980px) {
    .hero-container {
        gap: 40px;
    }
    .hero-text-center {
        max-width: 100%;
    }
}

/* Centraliza grupo de botões no CTA do index */
.cta-botoes[style*="center"] {
    justify-content: center !important;
}

/* ----------------------------------------
   MODELO DE NEGÓCIO — pequeno fix de spacing
   ---------------------------------------- */
.passos-lista .passo-item p {
    line-height: 1.55;
}

/* =========================================================
   ============================================================
   CAMADA EDITORIAL V3 — REFINAMENTO INSTITUCIONAL
   ============================================================
   Inspirado em Anthropic, Linear, Vercel, Apple institucional.
   Menos neon, mais tipografia. Menos glow, mais hierarquia.
   Foco: respiro, contraste, ritmo, e contenção de efeitos.
   ========================================================= */

:root {
    /* Paleta refinada — ink com matiz roxa ONE preservada */
    --ink-900: #0a0510;          /* preto-tinta da marca (warm dark com matiz roxa) */
    --ink-800: #15091e;
    --ink-700: #1f0e2b;
    --ink-600: #2a1239;
    --ink-100: #1a0a23;
    --paper-50: #fafafa;
    --paper-100: #f4f4f5;
    --paper-200: #ececec;
    --paper-300: #d4d4d8;
    --paper-400: #a1a1aa;
    --line: rgba(10, 5, 16, 0.08);
    --line-dark: rgba(255, 255, 255, 0.08);
    --line-dark-hi: rgba(255, 255, 255, 0.14);

    /* Acentos — roxo signature ONE preservado */
    --acento: #9500c8;
    --acento-soft: #b833ea;
    --acento-fog: rgba(149, 0, 200, 0.12);

    /* Tipo — escala modular 1.250 (major third) */
    --type-eyebrow: 0.74rem;
    --type-body: 1rem;
    --type-body-lead: 1.125rem;
    --type-h3: clamp(1.35rem, 1.4vw, 1.6rem);
    --type-h2: clamp(1.85rem, 3.4vw, 2.85rem);
    --type-h1: clamp(2.4rem, 5vw, 4rem);

    /* Spacing rhythm — base 8 */
    --gap-xs: 8px;
    --gap-sm: 16px;
    --gap-md: 32px;
    --gap-lg: 56px;
    --gap-xl: 96px;
    --section-y: clamp(80px, 11vw, 140px);

    /* Raios e sombras refinadas */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --shadow-soft: 0 1px 2px rgba(10,5,16,0.04), 0 8px 24px rgba(10,5,16,0.06);
    --shadow-card: 0 1px 0 rgba(10,5,16,0.04), 0 18px 48px rgba(10,5,16,0.08);
    --shadow-card-dark: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.5);
}

/* ----------------------------------------
   BASE: features tipográficas
   ---------------------------------------- */
body {
    font-feature-settings: "kern", "liga", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--paper-50);
}

/* Container ligeiramente mais respirado */
.container {
    padding: 0 max(24px, 4vw);
}

/* ----------------------------------------
   HERO HOME — modo editorial
   Reduz a "ficção científica" e puxa para a presença tipográfica.
   ---------------------------------------- */
.hero-premium {
    background: radial-gradient(ellipse at 50% 0%, #18082a 0%, #0a0510 55%);
    padding: 180px 0 100px;
    min-height: auto;
}

/* Grade de perspectiva: menos opaca, mais sutil */
.hero-premium .grade-perspectiva {
    background-image:
        linear-gradient(rgba(149, 0, 200, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 0, 200, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.45;
    mask-image: radial-gradient(ellipse at 50% 100%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 30%, transparent 75%);
}

/* Orbs muito mais sutis — sem o look "AI generator" */
.hero-premium .orb-primaria {
    width: 50vw; height: 50vw;
    top: -25vw; left: -15vw;
    opacity: 0.32;
    filter: blur(180px);
}

.hero-premium .orb-secundaria {
    width: 32vw; height: 32vw;
    right: -8vw; bottom: -8vw;
    opacity: 0.22;
    filter: blur(180px);
}

/* Badge tech mais discreta */
.hero-premium .badge-tech {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 7px 16px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    margin-bottom: 28px;
    color: rgba(255,255,255,0.85);
}

.hero-premium .badge-tech .pulse-dot {
    width: 6px; height: 6px;
}

/* Título do hero — tipografia editorial */
.hero-title {
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.02;
    color: #fff;
    text-transform: none;
}

.hero-title .text-gradient {
    background: linear-gradient(95deg, #f2c5ff 0%, #b833ea 60%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--type-body-lead);
    max-width: 620px;
    margin: 0 auto 44px;
}

.hero-actions {
    gap: 14px;
    margin-bottom: 56px;
}

/* Modifier: centered + extra top spacing (portaria-remota hero CTA isolado) */
.hero-actions--centered {
    margin-top: 40px;
    justify-content: center;
}

/* Botões — bordas menores, presença mais sóbria */





/* Stats row — mais técnica e legível */
.hero-premium .stats-row {
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    gap: 22px;
}

.hero-premium .stats-row .stat i {
    color: rgba(255,255,255,0.55);
    margin-right: 8px;
}

.hero-premium .linha-separadora {
    height: 14px;
    background: rgba(255,255,255,0.12);
}

/* BUILD-024 Fix 5 — legacy hero mockup override R20 deletado (cascade leak).
   Componente canônico é chrome-window--hero. */

/* ----------------------------------------
   PIPELINE — diagramação institucional
   ---------------------------------------- */
.secao-pipeline {
    padding: var(--section-y) 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper-50);
}

.pipeline-header h2 {
    color: var(--ink-900);
    font-weight: 400;
    letter-spacing: -0.018em;
}

.pipeline-header .pipeline-sub {
    color: #4b4554;
    font-size: var(--type-body-lead);
    max-width: 640px;
    margin: 0 auto;
}

.pipeline-flow {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 36px 28px;
    box-shadow: var(--shadow-soft);
    gap: 0;
}

.flow-node {
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 24px 18px;
}

.flow-node .node-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--acento-fog);
    color: var(--acento);
    font-size: 1.45rem;
    margin-bottom: 18px;
    box-shadow: 0 1px 0 rgba(149, 0, 200,0.08) inset;
}

.flow-node .node-content h3 {
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ink-900);
}

.flow-node .node-content p {
    color: #6b6573;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Destaque do afiliado — sem escala, com selo de status */
.destaque-neon {
    border: none !important;
    background: linear-gradient(180deg, rgba(149, 0, 200,0.04) 0%, rgba(149, 0, 200,0.01) 100%) !important;
    border-radius: var(--r-lg) !important;
    transform: none !important;
    box-shadow: 0 0 0 1px var(--acento-fog) inset !important;
    position: relative;
}

.destaque-neon::before {
    content: "Em destaque";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--acento);
    color: #fff;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    font-weight: 600;
}

.destaque-neon:hover {
    transform: translateY(-2px) !important;
}

.destaque-neon .node-icon {
    background: linear-gradient(180deg, var(--acento) 0%, var(--ink-700) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(149, 0, 200, 0.28);
}

/* Conexões — linha mais sutil, pulse mais discreto */
.flow-connection {
    width: 60px;
    flex-shrink: 0;
}

.connection-line {
    height: 1px;
    background: var(--line);
}

.data-pulse {
    width: 8px;
    height: 8px;
    background: var(--acento);
    box-shadow: 0 0 8px rgba(149, 0, 200,0.6);
}

/* Stats institucionais — números grandes, label discreto */
.pipeline-stats {
    margin-top: 64px;
    padding: 36px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.pipeline-stats .stat-number {
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: var(--ink-900);
    font-weight: 400;
    letter-spacing: -0.02em;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.pipeline-stats .stat-label {
    color: #8a8392;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

.pipeline-stats .stat-divider {
    background: var(--line);
    height: 32px;
    width: 1px;
}

/* ----------------------------------------
   BENTO — refinamento institucional
   ---------------------------------------- */
.secao-bento {
    padding: var(--section-y) 0;
    background: var(--paper-50);
}

.bento-header {
    max-width: 720px;
    margin: 0 auto 64px;
}

.bento-header h2 {
    color: var(--ink-900);
    font-weight: 400;
    letter-spacing: -0.018em;
    text-transform: none;
}

.bento-header p {
    color: #4b4554;
    font-size: var(--type-body-lead);
}






/* .icon-wrap V2 declaration removed — unified system at end of file is canonical */

/* Bento destaque — profundidade mais sóbria */


.bento-destaque p { color: rgba(255,255,255,0.7); }


/* Bento wide / row content */
.bento-wide .pulse-ring {
    border-width: 1.5px;
    border-color: rgba(149, 0, 200,0.5);
    width: 90px;
    height: 90px;
}

.bento-wide .pulse-ring::before {
    border-width: 1.5px;
    border-color: rgba(149, 0, 200,0.2);
}

/* ----------------------------------------
   DIF DARK — cards de vidro institucional
   ---------------------------------------- */
.secao-diferenciais-dark {
    padding: var(--section-y) 0;
    background: linear-gradient(180deg, #0a0510 0%, #08030f 100%);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.luz-fundo-dif {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(149, 0, 200,0.08) 0%, rgba(0,0,0,0) 60%);
    filter: blur(40px);
}

.dif-dark-header {
    max-width: 720px;
    margin: 0 auto 72px;
}

.dif-dark-header h2 {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
}

.dif-dark-header p {
    color: rgba(255,255,255,0.6);
    font-size: var(--type-body-lead);
}

.dif-dark-grid {
    gap: 16px;
}

.dif-dark-card {
    border-radius: var(--r-xl);
    padding: 0;
    background: transparent;
}

.dif-border-glow {
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%);
    opacity: 1;
}

.dif-card-content {
    background: linear-gradient(180deg, rgba(20,8,30,0.7) 0%, rgba(10,3,16,0.95) 100%);
    border-radius: calc(var(--r-xl) - 1px);
    padding: 36px 32px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dif-dark-card:hover .dif-border-glow {
    background: linear-gradient(180deg, rgba(184,51,234,0.55) 0%, rgba(149, 0, 200,0.0) 100%);
}

.dif-icon-glass {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1.15rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    margin-bottom: 22px;
}

.dif-card-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #fff;
    text-transform: none;
    margin-bottom: 10px;
}

.dif-card-content p {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ----------------------------------------
   CTA — caixa institucional, menos neon
   ---------------------------------------- */
.secao-cta,
.secao-cta-premium {
    padding: 80px 0 var(--section-y);
    background: var(--paper-50);
}

.cta-box,
.cta-premium-box {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(184,51,234,0.18) 0%, transparent 50%),
        linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,0.06);
    padding: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 80px);
    box-shadow: 0 30px 80px rgba(10,5,16,0.18);
}

.cta-glow,
.cta-glow-bg {
    width: 60%;
    height: 60%;
    opacity: 0.5;
    filter: blur(80px);
}

.cta-content h2,
.cta-premium-content h2 {
    font-weight: 400;
    letter-spacing: -0.022em;
    color: #fff;
    text-transform: none;
}

.cta-content p,
.cta-premium-content p {
    color: rgba(255,255,255,0.68);
    font-size: var(--type-body-lead);
    margin: 18px auto 40px;
    max-width: 620px;
}



/* ----------------------------------------
   HEADER — glass mais sóbrio, navegação refinada
   ---------------------------------------- */
.header-premium {
    background: rgba(10, 5, 16, 0.7);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-container {
    height: 72px;
}

.header-logo {
    height: 40px;
    width: auto;
    display: block;
}

.nav-list {
    gap: 28px;
}

.nav-link {
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding: 8px 0;
    position: relative;
}

.nav-link:hover, .nav-link.ativo {
    color: #fff;
}

.nav-link.ativo::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--acento-soft);
}

.dropdown-menu {
    background: rgba(10,3,18,0.92);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    box-shadow: 0 24px 50px rgba(0,0,0,0.55);
    padding: 10px;
    width: 240px;
}

.dropdown-item {
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.06);
    padding-left: 14px;
    color: #fff;
}

.dropdown-item:hover i {
    color: var(--acento-soft);
}

.btn-login-afiliado {
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.005em;
}

.btn-login-afiliado:hover,
.btn-login-afiliado[aria-expanded="true"] {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}

/* ----------------------------------------
   FOOTER — editorial e mais leve
   ---------------------------------------- */
.footer-premium {
    background: #07020c;
    padding: 88px 0 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-grid {
    grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
    gap: 48px;
    margin-bottom: 64px;
}

.footer-logo {
    height: 64px;
    width: auto;
    margin-bottom: 18px;
    display: block;
}

.footer-desc {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    max-width: 360px;
    line-height: 1.6;
}

.footer-desc em {
    color: rgba(255,255,255,0.85);
    font-style: normal;
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.social-links {
    gap: 10px;
    margin-top: 24px;
}

.social-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--cor-branco);
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1);
}

.social-icon:hover {
    background: rgba(149, 0, 200,0.18);
    border-color: rgba(184,51,234,0.45);
    transform: translateY(-2px);
    box-shadow: none;
}

.footer-col h3,
.footer-col h4 {
    font-family: var(--fonte-textos);
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.95);
    margin-bottom: 22px;
}

.footer-links {
    gap: 12px;
}

.footer-links a {
    color: rgba(255,255,255,0.55);
    font-size: 0.92rem;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 0;
}

.footer-contact-info .info-item {
    color: rgba(255,255,255,0.55);
    font-size: 0.92rem;
    line-height: 1.55;
}

.footer-contact-info .info-item i {
    color: var(--acento-soft);
    font-size: 1rem;
    margin-top: 3px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 24px;
    margin-top: 24px;
    color: rgba(255,255,255,0.4);
    font-size: 0.82rem;
}

.footer-bottom p {
    color: rgba(255,255,255,0.45);
}

.legal-links a {
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    transition: color 0.2s ease;
}

.legal-links a:hover {
    color: rgba(255,255,255,0.85);
}

/* ----------------------------------------
   EYEBROW — refinamento global
   ---------------------------------------- */
.eyebrow-mini {
    font-size: var(--type-eyebrow);
    letter-spacing: 0.24em;
    font-weight: 600;
    color: var(--acento);
    margin-bottom: 20px;
}

.eyebrow-mini::before {
    width: 22px;
    background: var(--acento);
    opacity: 0.7;
}

.eyebrow-mini.eyebrow-light {
    color: rgba(255,255,255,0.7);
}

.eyebrow-mini.eyebrow-light::before {
    background: rgba(255,255,255,0.6);
}

/* H2 padrão: peso e tracking institucional */
.bento-header h2,
.dif-dark-header h2,
.pipeline-header h2,
.matriz-header h2,
.oneplus-header h2,
.metodos-header h2,
.retrofit-header h2,
.cortex-texto h2,
.timeline-header h2,
.pilares-header h2,
.extras-header h2,
.jornada-header h2,
.gestao-texto h2,
.showroom-header h2,
.raiox-header h2,
.dual-header h2,
.overlap-text h2,
.escala-header h2,
.executiva-header h2,
.cta-premium-content h2,
.comparativo-header h2,
.arsenal-bento-header h2,
.passos-header h2,
.pactos-header h2,
.mvv-header h2,
.cta-content h2,
.showcase-texto h2,
.eco-texto h2 {
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.018em;
}

/* ----------------------------------------
   PÁGINAS INTERNAS — heros mais sóbrios
   ---------------------------------------- */
.hero-interno,
.hero-produto-dark,
.hero-negocio-dark,
.hero-acesso-dark,
.app-hero-dark,
.entregas-hero,
.bi-hero {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hero-interno-content p,
.hero-produto-content p,
.hero-acesso-content p,
.app-hero-texto p,
.entregas-texto p,
.bi-hero-content p,
.hero-text-blend p {
    color: rgba(255,255,255,0.72);
    font-size: var(--type-body-lead);
    max-width: 580px;
}

/* ----------------------------------------
   COMPARATIVO (modelo de negócio)
   ---------------------------------------- */
.comp-card {
    border-radius: var(--r-xl);
    padding: 36px;
    border: 1px solid var(--line);
}

.comp-card.comp-ruim {
    background: #fff;
}

.comp-card.comp-one {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184,51,234,0.18) 0%, transparent 55%),
        linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

.comp-card .comp-titulo {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
}

.vs-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgba(10,5,16,0.12);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

/* ----------------------------------------
   ARSENAL BENTO (modelo de negócio)
   ---------------------------------------- */





/* ----------------------------------------
   PILARES / PASSOS
   ---------------------------------------- */
.passo-item .passo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--acento-fog);
    color: var(--acento);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.passo-item h4 {
    font-weight: 500;
    color: var(--ink-900);
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: -0.005em;
}

.passo-item p {
    color: #5a5462;
    font-size: 0.95rem;
}

/* ----------------------------------------
   PACTOS (quem somos)
   ---------------------------------------- */
.pacto-card {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: #fff;
    padding: 36px 32px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease;
}

.pacto-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200,0.18);
}

.pacto-card .pacto-numero {
    font-family: var(--fonte-textos);
    color: var(--acento);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.pacto-card .pacto-icone {
    color: var(--ink-700);
    font-size: 1.6rem;
    margin-bottom: 18px;
}

.pacto-card h3 {
    font-family: var(--fonte-titulos);
    color: var(--ink-900);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 14px;
}

.pacto-card p {
    color: #5a5462;
    font-size: 0.97rem;
    line-height: 1.55;
}

.pacto-destaque {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184,51,234,0.18) 0%, transparent 60%),
        linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
    border: 1px solid rgba(255,255,255,0.08);
}

.pacto-destaque .pacto-numero,
.pacto-destaque h3,
.pacto-destaque p,
.pacto-destaque .pacto-icone {
    color: #fff;
}

.pacto-destaque p { color: rgba(255,255,255,0.72); }
.pacto-destaque .pacto-numero { color: rgba(255,255,255,0.85); }

/* ----------------------------------------
   MVV — missão visão valores
   ---------------------------------------- */
.mvv-bloco {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.mvv-bloco .mvv-marca {
    font-family: var(--fonte-textos);
    color: var(--acento);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    font-weight: 600;
}

.mvv-bloco .mvv-icon {
    color: var(--ink-700);
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.mvv-bloco h3 {
    font-family: var(--fonte-titulos);
    color: var(--ink-900);
    font-weight: 500;
    font-size: 1.35rem;
    text-transform: none;
    letter-spacing: -0.005em;
    margin-bottom: 10px;
}

.mvv-bloco p {
    color: #5a5462;
    font-size: 0.97rem;
}

/* ----------------------------------------
   TIMELINE (quem somos)
   ---------------------------------------- */
.timeline-card {
    background: linear-gradient(180deg, rgba(20,8,30,0.6) 0%, rgba(10,3,16,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: 28px 28px;
    backdrop-filter: blur(20px);
}

.timeline-card .ano-neon {
    font-family: var(--fonte-textos);
    color: var(--acento-soft);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
}

.timeline-card h4 {
    font-family: var(--fonte-titulos);
    color: #fff;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.005em;
    text-transform: none;
    margin: 10px 0 8px;
}

.timeline-card p {
    color: rgba(255,255,255,0.6);
    font-size: 0.94rem;
    line-height: 1.55;
}

.timeline-dot {
    background: var(--acento) !important;
    box-shadow: 0 0 0 4px rgba(149, 0, 200,0.18), 0 0 16px rgba(149, 0, 200,0.5) !important;
}

.linha-central {
    background: linear-gradient(180deg, rgba(149, 0, 200,0) 0%, rgba(149, 0, 200,0.5) 15%, rgba(149, 0, 200,0.5) 85%, rgba(149, 0, 200,0) 100%) !important;
    width: 1px !important;
}

/* ----------------------------------------
   MATRIZ GLASS CARDS (portaria remota)
   ---------------------------------------- */
.matriz-glass-card {
    background: linear-gradient(180deg, rgba(20,8,30,0.55) 0%, rgba(10,3,16,0.85) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: 32px;
    backdrop-filter: blur(20px);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease;
}

.matriz-glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184,51,234,0.3);
}

.matriz-glass-card .glass-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 1.15rem;
    margin-bottom: 22px;
    box-shadow: none;
}

.matriz-glass-card h3 {
    font-family: var(--fonte-titulos);
    color: #fff;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: -0.005em;
    text-transform: none;
    margin-bottom: 10px;
}

.matriz-glass-card p {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ----------------------------------------
   NODES PREMIUM (pipeline portaria)
   ---------------------------------------- */
.node-premium {
    background: linear-gradient(180deg, rgba(20,8,30,0.6) 0%, rgba(10,3,16,0.9) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: 28px;
    backdrop-filter: blur(20px);
}

.node-premium .node-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--acento-soft);
    font-size: 1.2rem;
    margin-bottom: 22px;
}

.node-premium .node-step {
    color: rgba(255,255,255,0.4);
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    font-weight: 600;
}

.node-premium h4 {
    font-family: var(--fonte-titulos);
    color: #fff;
    font-weight: 500;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: -0.005em;
    margin: 6px 0 8px;
}

.node-premium p {
    color: rgba(255,255,255,0.55);
    font-size: 0.93rem;
    line-height: 1.55;
}

.node-premium.node-center {
    border-color: rgba(184,51,234,0.35);
    box-shadow: 0 0 0 1px rgba(184,51,234,0.18), 0 20px 40px rgba(149, 0, 200,0.15);
}

.node-premium.node-center .node-icon-wrap {
    background: linear-gradient(180deg, var(--acento) 0%, var(--ink-700) 100%);
    color: #fff;
    border-color: transparent;
}

/* ----------------------------------------
   CORTEX (hardware)
   ---------------------------------------- */
.cortex-features .c-feature {
    border-top: 1px solid var(--line);
    padding-top: 22px;
}

.cortex-features .c-feature:first-child {
    border-top: none;
    padding-top: 0;
}

.cortex-features .c-feature h3,
.cortex-features .c-feature h4 {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    color: var(--ink-900);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: -0.005em;
}

.cortex-features .c-feature p {
    color: #5a5462;
    font-size: 0.93rem;
}

.cortex-features .c-feature i {
    color: var(--acento);
}

/* ----------------------------------------
   ONEPLUS Tabs
   ---------------------------------------- */
.oneplus-tabs .tab-btn {
    background: #fff;
    border: 1px solid var(--line);
    color: #5a5462;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 500;
    transition: all 0.25s ease;
    position: relative;
}

.oneplus-tabs .tab-btn.active {
    background: var(--ink-900);
    color: #fff;
    border-color: var(--ink-900);
}

/* Reform 2026 — underline indicator de selected state (a11y reinforce) */
.oneplus-tabs .tab-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--acento);
    border-radius: 1px;
}

.oneplus-tabs .tab-btn:hover {
    border-color: var(--acento);
    color: var(--ink-900);
}

.oneplus-tabs .tab-btn.active:hover {
    color: #fff;
}

/* ----------------------------------------
   FEATURE CARD (portaria-remota)
   ---------------------------------------- */
.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200,0.18);
}

.feature-card i {
    color: var(--acento);
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.feature-card h3,
.feature-card h4 {
    font-family: var(--fonte-titulos);
    color: var(--ink-900);
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: -0.005em;
    margin-bottom: 8px;
}

.feature-card p {
    color: #5a5462;
    font-size: 0.93rem;
    line-height: 1.55;
}

/* ----------------------------------------
   SCROLL FORA DO HERO — micro animação mais sutil
   ---------------------------------------- */
.animar-scroll {
    transform: translateY(28px);
}

/* ----------------------------------------
   MOBILE — refinos
   ---------------------------------------- */
@media (max-width: 768px) {
    .hero-premium {
        padding: 140px 0 72px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* BUILD-024 Fix 5 — legacy hero mockup mobile override deletado. */

    .pipeline-flow {
        padding: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ----------------------------------------
   FOCUS-VISIBLE — acessibilidade institucional
   ---------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.tab-btn:focus-visible {
    outline: 2px solid var(--acento-soft);
    outline-offset: 3px;
    border-radius: 6px;
}

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

    .luz-orb,
    .data-pulse,
    .pulse-ring::before {
        animation: none !important;
    }
}

/* ----------------------------------------
   RITMO VERTICAL UNIVERSAL
   Normaliza padding de todas as seções principais.
   ---------------------------------------- */
.secao-pipeline,
.secao-bento,
.secao-diferenciais-dark,
.secao-software-showcase,
.secao-pipeline-premium,
.secao-matriz-tech,
.secao-cortex-clara,
.secao-oneplus-showcase,
.secao-comparativo-premium,
.secao-arsenal-bento,
.secao-video-passos,
.secao-mvv-faixa,
.secao-origem-showcase,
.secao-pactos,
.secao-timeline-dark,
.secao-metodos-acesso,
.secao-visitantes-dark,
.secao-retrofit-clara,
.secao-recursos-corporativos,
.secao-sticky-showcase,
.secao-bento-chaves,
.secao-app-extras-clara,
.secao-jornada-dark,
.secao-gestao-entregas,
.secao-showroom-locker,
.secao-ecossistema-dark,
.secao-raiox-operacao,
.secao-dual-dashboards,
.secao-foco-operador,
.secao-filtros-escala,
.secao-timeline-operacional,
.secao-visao-executiva {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

/* ----------------------------------------
   HEROS INTERNAS — padding consistente
   ---------------------------------------- */
.hero-interno,
.hero-produto-dark,
.hero-negocio-dark,
.hero-app-premium,
.hero-entregas {
    padding-top: clamp(140px, 16vw, 200px);
    padding-bottom: clamp(80px, 10vw, 120px);
    position: relative;
}

/* Overlays mais densos para legibilidade tipográfica */
.hero-overlay,
.hero-overlay-dark,
.hero-overlay-acesso,
.banner-overlay-dark {
    background: linear-gradient(105deg, rgba(7, 1, 10, 0.92) 0%, rgba(7, 1, 10, 0.62) 60%, rgba(7, 1, 10, 0.35) 100%) !important;
}

/* ----------------------------------------
   DARK SECTIONS — coerência institucional
   Unifica todos os fundos escuros num gradiente sutil de respiro.
   ---------------------------------------- */
.secao-timeline-dark,
.secao-visitantes-dark,
.secao-ecossistema-dark,
.secao-jornada-dark,
.secao-raiox-operacao,
.secao-timeline-operacional,
.secao-matriz-tech {
    background: linear-gradient(180deg, #0a0510 0%, #08030f 100%);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #fff;
}

/* Headers de seção dark recebem a paleta clara */
.secao-timeline-dark h2,
.secao-visitantes-dark h2,
.secao-ecossistema-dark h2,
.secao-jornada-dark h2,
.secao-raiox-operacao h2,
.secao-timeline-operacional h2,
.secao-matriz-tech h2 {
    color: #fff;
}

.secao-timeline-dark p,
.secao-visitantes-dark p,
.secao-ecossistema-dark p,
.secao-jornada-dark p,
.secao-raiox-operacao p,
.secao-timeline-operacional p,
.secao-matriz-tech p {
    color: rgba(255,255,255,0.6);
}

/* ----------------------------------------
   LIGHT SECTIONS — coerência clara
   ---------------------------------------- */
.secao-cortex-clara,
.secao-retrofit-clara,
.secao-app-extras-clara,
.secao-gestao-entregas,
.secao-dual-dashboards,
.secao-filtros-escala,
.secao-mvv-faixa,
.secao-pactos,
.secao-arsenal-bento,
.secao-video-passos,
.secao-comparativo-premium,
.secao-bento-chaves,
.secao-foco-operador {
    background: var(--paper-50);
}

/* Texto institucional em seções claras */
.secao-cortex-clara h2,
.secao-retrofit-clara h2,
.secao-app-extras-clara h2,
.secao-gestao-entregas h2,
.secao-dual-dashboards h2,
.secao-filtros-escala h2,
.secao-foco-operador h2 {
    color: var(--ink-900);
}

.secao-cortex-clara p,
.secao-retrofit-clara p,
.secao-app-extras-clara p,
.secao-gestao-entregas p,
.secao-dual-dashboards p,
.secao-filtros-escala p {
    color: #5a5462;
}

/* ----------------------------------------
   TEXT GRADIENT — refinado
   Final stop bumped a11y AA (3:1 large-text) on dark hero bg.
   ---------------------------------------- */
.text-gradient {
    background: linear-gradient(95deg, var(--acento-soft) 0%, #b833ea 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Em seções claras, gradient mais saturado */
.secao-cortex-clara .text-gradient,
.secao-retrofit-clara .text-gradient,
.secao-mvv-faixa .text-gradient,
.secao-pactos .text-gradient,
.secao-arsenal-bento .text-gradient,
.secao-video-passos .text-gradient,
.secao-comparativo-premium .text-gradient,
.bento-header .text-gradient,
.pipeline-header .text-gradient {
    background: linear-gradient(95deg, var(--acento) 0%, var(--ink-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------------------------------
   PANEL HEADER BRAND (modelo-negocio hero)
   ---------------------------------------- */
.panel-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    margin-bottom: 28px;
}

.panel-header-brand .tag-tech {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.72rem;
}

/* ============================================================
   PENTE-FINO DE TÍTULOS — balanceamento, escala e quebras
   ============================================================
   Problema: <br> forçados + clamp() criam linhas desbalanceadas
   (uma linha cheia + uma palavra solta). Solução em 4 frentes:
   1) text-wrap: balance — balanceia linhas como Linear/Vercel.
   2) Escala de clamp() recalibrada (menos agressiva no max).
   3) max-width nos títulos para nunca extrapolar 14 palavras/linha.
   4) <br> só vale acima de 1100px (auto-wrap em telas menores).
   ============================================================ */

/* Balanceamento universal de títulos e parágrafos de hero */
h1, h2, h3, h4,
.hero-title,
.hero-interno-content h1,
.hero-produto-content h1,
.hero-acesso-content h1,
.app-hero-texto h1,
.entregas-texto h1,
.bi-hero-content h1,
.hero-text-blend h1 {
    text-wrap: balance;
    -webkit-text-wrap: balance;
    hyphens: manual;
    -webkit-hyphens: manual;
    word-break: normal;
    overflow-wrap: normal;
}

/* Parágrafos de hero/header — quebra mais bonita */
.hero-subtitle,
.hero-interno-content p,
.hero-produto-content p,
.hero-acesso-content p,
.app-hero-texto p,
.entregas-texto p,
.bi-hero-content p,
.hero-text-blend p,
.pipeline-sub,
.bento-header p,
.dif-dark-header p,
.pipeline-header p,
.matriz-header p,
.oneplus-header p,
.timeline-header p,
.pactos-header p,
.passos-header p,
.comparativo-header p,
.arsenal-bento-header p,
.cta-content p,
.cta-premium-content p {
    text-wrap: pretty;
    -webkit-text-wrap: pretty;
}

/* ---------- ESCALA DE CLAMP() RECALIBRADA ----------
   max menor para não estourar em desktop intermediário.
   Antes: h1 ia até 4rem (64px) e quebrava em tablet. Agora 3.4rem. */

.hero-title {
    font-size: clamp(2.4rem, 5.2vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    max-width: 28ch;
    margin: 0 auto 28px;
}
.hero-title br {
    display: block;
}

.hero-interno-content h1,
.hero-produto-content h1,
.hero-acesso-content h1,
.app-hero-texto h1,
.entregas-texto h1,
.bi-hero-content h1,
.hero-text-blend h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    max-width: 16ch;
}

/* Quando o hero é centralizado, recolhe o max-width via margin */
.hero-interno-content h1,
.hero-produto-content h1,
.hero-acesso-content h1,
.app-hero-texto h1,
.entregas-texto h1,
.bi-hero-content h1 {
    margin-left: auto;
    margin-right: auto;
}

/* H2 das seções — clamp() mais contido + cap em ch */
.secao-pipeline h2,
.bento-header h2,
.dif-dark-header h2,
.software-header h2,
.pipeline-header h2,
.matriz-header h2,
.oneplus-header h2,
.metodos-header h2,
.corp-texto h2,
.visitantes-texto h2,
.retrofit-header h2,
.cortex-texto h2,
.timeline-header h2,
.pilares-header h2,
.extras-header h2,
.jornada-header h2,
.gestao-texto h2,
.showroom-header h2,
.raiox-header h2,
.dual-header h2,
.overlap-text h2,
.escala-header h2,
.executiva-header h2,
.cta-premium-content h2,
.comparativo-header h2,
.arsenal-bento-header h2,
.passos-header h2,
.pactos-header h2,
.mvv-header h2,
.cta-content h2,
.showcase-texto h2,
.eco-texto h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    max-width: 22ch;
    text-wrap: balance;
}

/* Headers centralizados: max-width vira margin auto */
.bento-header h2,
.dif-dark-header h2,
.pipeline-header h2,
.matriz-header h2,
.oneplus-header h2,
.metodos-header h2,
.retrofit-header h2,
.timeline-header h2,
.pilares-header h2,
.extras-header h2,
.jornada-header h2,
.showroom-header h2,
.raiox-header h2,
.dual-header h2,
.escala-header h2,
.executiva-header h2,
.comparativo-header h2,
.arsenal-bento-header h2,
.passos-header h2,
.pactos-header h2,
.mvv-header h2,
.cta-content h2,
.cta-premium-content h2 {
    margin-left: auto;
    margin-right: auto;
}

/* H3 dos cards — também balanceado */
.dif-card-content h3,
.matriz-glass-card h3 h4,
.pacto-card h3,
.mvv-bloco h3,
.feature-card h3,
.feature-card h4,
.timeline-card h4,
.node-premium h3,
.node-premium h4 {
    text-wrap: balance;
    -webkit-text-wrap: balance;
    max-width: 18ch;
}

/* H2 menor dentro de blocos (cortex, oneplus, etc.) — não centralizados */
.cortex-texto h2,
.gestao-texto h2,
.visitantes-texto h2,
.corp-texto h2,
.showcase-texto h2,
.eco-texto h2,
.overlap-text h2,
.passos-header h2 {
    max-width: 18ch;
}

/* ---------- DEFENSIVO: qualquer <br> remanescente em título ----------
   Se algum <br> sobreviver em h1/h2 (conteúdo dinâmico, edição futura),
   colapsa para espaço inline. text-wrap: balance assume o controle.
   Exceção: .hero-title usa <br> intencional para forçar 2 linhas. */
h1 br,
h2 br {
    display: none;
}
.hero-title br { display: block; }

/* Mobile pequeno — máx font ainda menor para evitar quebras de 1 palavra */
@media (max-width: 640px) {
    .hero-title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
        max-width: 100%;
    }

    .hero-interno-content h1,
    .hero-produto-content h1,
    .hero-acesso-content h1,
    .app-hero-texto h1,
    .entregas-texto h1,
    .bi-hero-content h1,
    .hero-text-blend h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.3rem);
        max-width: 100%;
    }

    .secao-pipeline h2,
    .bento-header h2,
    .dif-dark-header h2,
    .pipeline-header h2,
    .matriz-header h2,
    .oneplus-header h2,
    .cortex-texto h2,
    .timeline-header h2,
    .pilares-header h2,
    .extras-header h2,
    .jornada-header h2,
    .gestao-texto h2,
    .showroom-header h2,
    .raiox-header h2,
    .dual-header h2,
    .overlap-text h2,
    .escala-header h2,
    .executiva-header h2,
    .comparativo-header h2,
    .arsenal-bento-header h2,
    .passos-header h2,
    .pactos-header h2,
    .mvv-header h2,
    .cta-content h2,
    .cta-premium-content h2,
    .showcase-texto h2,
    .eco-texto h2,
    .visitantes-texto h2,
    .corp-texto h2,
    .retrofit-header h2,
    .metodos-header h2 {
        font-size: clamp(1.5rem, 7vw, 1.95rem);
        max-width: 100%;
        line-height: 1.15;
    }
}

/* ----------------------------------------
   SISTEMA DE ÍCONES UNIFICADO (round 3)
   .icon-wrap é o nome canônico. Variantes históricas
   (metodo-icon, eco-icon, gestao-icon, etc.) ficam
   *aliasadas* via seletores agrupados — não precisam
   migrar no HTML; herdam o baseline de .icon-wrap e
   continuam usando as overrides específicas de cada
   seção. Migração HTML 1-a-1 fica para round futuro.
   ---------------------------------------- */

/* Baseline universal — vale para .icon-wrap e 13 legados (single source of truth) */
.icon-wrap,
.metodo-icon,
.eco-icon,
.gestao-icon,
.v-icon,
.f-icon,
.ef-icon,
.extra-icon,
.pacto-icone,
.mvv-icon,
.bento-icon-box,
.step-icon-box,
.passo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1.15rem;
    color: var(--acento);
    background: var(--acento-fog);
    box-shadow: 0 1px 0 rgba(149, 0, 200,0.08) inset;
    margin-bottom: 22px;
    transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), background 0.25s ease;
}

/* Glass variant — sobre dark, vidro discreto */
.glass-icon,
.glass-icon-wrap,
.holo-icon,
.dif-icon-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1.15rem;
    color: #fff;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Modifiers institucionais (uso em código novo) */
.icon-wrap--dark,
.icon-wrap.dark-icon {
    background: rgba(10,5,16,0.06);
    color: var(--ink-900);
    box-shadow: none;
}

.icon-wrap--accent {
    background: linear-gradient(180deg, var(--acento) 0%, var(--ink-700) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(149, 0, 200,0.28);
}

.icon-wrap--lg {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.4rem;
}

.icon-wrap--circle {
    border-radius: 50%;
}

/* Passo-icon e step-icon mantêm seu papel de "número numerado" */
.passo-icon,
.step-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ----------------------------------------
   SISTEMA DE BOTÕES UNIFICADO (round 3)
   2 variantes: primário (CTA) + ghost (secundário).
   Substitui: btn-premium btn-glow, btn-premium btn-glass,
              btn-outline-claro, btn-outline-hero.
   Mantém: btn-login-afiliado (header CTA específico),
           btn-mobile-menu (utility), tab-btn (componente tab).
   ---------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--r-md);
    font-family: var(--fonte-textos);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1),
                box-shadow 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
}

.btn--primary {
    background: linear-gradient(180deg, #a416d5 0%, #8500b4 100%);
    color: #fff;
    border-color: rgba(255,255,255,0.12);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 8px 24px rgba(149, 0, 200, 0.28);
}

.btn--primary:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.22) inset,
        0 14px 32px rgba(149, 0, 200, 0.42);
    transform: translateY(-1px);
}

/* Ghost institucional — variante automática por contexto */
.btn--ghost {
    background: transparent;
    color: var(--ink-900);
    border: 1px solid var(--line);
}

.btn--ghost:hover {
    background: rgba(10,5,16,0.04);
    border-color: rgba(10,5,16,0.18);
    transform: translateY(-1px);
}

/* Ghost em fundo escuro — vira claro automaticamente */
.hero-premium .btn--ghost,
.hero-interno .btn--ghost,
.hero-produto-dark .btn--ghost,
.hero-negocio-dark .btn--ghost,
.hero-acesso-video .btn--ghost,
.hero-app-premium .btn--ghost,
.hero-entregas .btn--ghost,
.hero-bi-dashboard .btn--ghost,
.secao-cta .btn--ghost,
.secao-cta-premium .btn--ghost,
.secao-diferenciais-dark .btn--ghost,
.cta-box .btn--ghost,
.cta-premium-box .btn--ghost {
    background: rgba(255,255,255,0.04);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
}

/* A11Y INDEX-001 P1.3 — escopo hero-premium: border contrast ≥3:1 (1.4.11) */
/* A11Y BI-001 P0.2 — extended to .hero-bi-dashboard for AA contrast compliance */
/* APP-002 — extended to .hero-app-premium for AA contrast compliance */
.hero-premium .btn--ghost,
.hero-bi-dashboard .btn--ghost,
.hero-app-premium .btn--ghost {
    border-color: rgba(255,255,255,0.45);
}

.hero-premium .btn--ghost:hover,
.hero-interno .btn--ghost:hover,
.hero-produto-dark .btn--ghost:hover,
.hero-negocio-dark .btn--ghost:hover,
.hero-acesso-video .btn--ghost:hover,
.hero-app-premium .btn--ghost:hover,
.hero-entregas .btn--ghost:hover,
.hero-bi-dashboard .btn--ghost:hover,
.secao-cta .btn--ghost:hover,
.secao-cta-premium .btn--ghost:hover,
.secao-diferenciais-dark .btn--ghost:hover,
.cta-box .btn--ghost:hover,
.cta-premium-box .btn--ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.35);
}

/* Foco unificado */
.btn:focus-visible {
    outline: 2px solid var(--acento-soft);
    outline-offset: 3px;
}

/* ----------------------------------------
   TABULAR NUMS — números institucionais alinhados (round 4 polish)
   ---------------------------------------- */
.stat-number,
.pipeline-stats .stat-number,
.stats-row,
.metric-icon + div strong,
.glass-metric strong,
.glass-hologram strong,
.holo-info strong,
.metric-left strong,
.ano-neon,
.proof-badge-text strong,
.passo-icon,
.step-icon-box,
.node-step {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "kern", "liga";
}

/* ----------------------------------------
   UTILITY: animation delays (substituição dos style="--delay")
   ---------------------------------------- */
.delay-1 { --delay: 0.1s; }
.delay-2 { --delay: 0.2s; }
.delay-3 { --delay: 0.3s; }
.delay-4 { --delay: 0.4s; }
.delay-5 { --delay: 0.5s; }
.delay-6 { --delay: 0.6s; }
.delay-7 { --delay: 0.7s; }
.delay-8 { --delay: 0.8s; }
.delay-9 { --delay: 0.9s; }
.delay-10 { --delay: 1s; }
.delay-11 { --delay: 1.1s; }
.delay-12 { --delay: 1.2s; }

/* ----------------------------------------
   PRODUCT SHOT — moldura editorial para screenshots reais
   Substitui mockups CSS de iPhone/MacBook (CRITICA P1.2)
   ---------------------------------------- */
.product-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-subtle);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 24px 60px rgba(10,5,16,0.18),
        0 4px 12px rgba(10,5,16,0.06);
    background: var(--paper-card);
}

.executiva-shot {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.executiva-shot picture {
    display: block;
}

/* =========================================
   ADR-002 §4 — Phone bezel premium (iPhone 14+ vocabulary)
   Substitui o bloco .phone-shot original (style.css:9110-9134)
   ========================================= */
.phone-shot {
    display: inline-block;
    max-width: 320px;
    width: 100%;
    border-radius: 44px;
    overflow: visible; /* BUILD-024 Fix 4 — permite que .phone-shot__btn (right/left: -12px) seja visível. Clip da imagem migrou para o filho. */
    border: 10px solid #0a0510;
    background: #0a0510;
    box-shadow:
        0 0 0 1.5px rgba(149, 0, 200, 0.22),       /* hairline roxo external */
        0 0 0 1px rgba(255, 255, 255, 0.06) inset, /* highlight inner bezel */
        0 30px 80px rgba(10, 5, 16, 0.4),
        0 8px 24px rgba(10, 5, 16, 0.15);
    position: relative;
    aspect-ratio: 1080 / 2341;
    isolation: isolate; /* stacking context para z-index dos side buttons */
}

.phone-shot picture,
.phone-shot img,
.phone-shot-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 34px;
    overflow: hidden; /* BUILD-024 Fix 4 — clip da imagem ao border-radius, preservando cantos arredondados quando parent é overflow:visible */
}

/* Dynamic island — pill central com highlights internos (ADR-003 §6.3) */
.phone-shot::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 26px;
    background: #000;
    border-radius: 13px;
    box-shadow:
        inset 0 0 0 0.5px rgba(255,255,255,0.05),
        21px 0 0 -8px rgba(48,33,55,0.6),
        16px 0 0 -10px rgba(48,33,55,0.4);
    z-index: 4;
    pointer-events: none;
}

/* Side buttons agora via HTML real (.phone-shot__btn), pseudo-::after aposentado */
.phone-shot::after { display: none; }

/* Sticky-phone (app-simples sticky-showcase) — mantém sticky position */
.phone-shot.sticky-phone {
    position: sticky;
    top: 100px;
}

.phone-shot.sticky-phone picture.app-real-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.2,0.8,0.2,1);
    pointer-events: none;
}

.phone-shot.sticky-phone picture.app-real-screen.screen-active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile: bezel encolhe proporcionalmente para não dominar a viewport */
@media (max-width: 480px) {
    .phone-shot {
        border-width: 8px;
        border-radius: 38px;
    }
    .phone-shot::before {
        width: 72px; height: 18px; top: 8px;
        border-radius: 10px;
    }
    .phone-shot::after { display: none; } /* esconde botões laterais em mobile */
}

/* ============================================================
   SISTEMA BENTO UNIFICADO V4 (CRITICA-008 P1 / round bento)
   Consolida 3 nomenclaturas em 1 sistema canônico via aliasing CSS.
   HTML segue usando as 3 namings (zero risco de typo na migração);
   este bloco garante que todas convirjam visualmente.

   Canônico:   .bento-grid          + .bento-card
   Aliases:    .bento-chaves-grid     → .bento-grid
               .arsenal-bento-grid    → .bento-grid
               .bento-item            → .bento-card
               .bento-card-chaves     → .bento-card
               .arsenal-bento-card    → .bento-card

   Modifiers (canônico + aliases legados):
   .bento-card--feature  / .bento-destaque                — dark gradient + span 2x2
   .bento-card--wide     / .bento-wide / .card-largo       — span 2 cols
   .bento-card--large    / .bento-large                    — span 2 + grid interno 1.2/0.8 + light grad
   ============================================================ */

/* CONTAINER */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(240px, auto);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Modifier 2-col + alias legado .bento-chaves-grid */
.bento-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1000px;
}

/* CARD BASE */
.bento-card {
    background: var(--paper-card);
    border: 1px solid var(--line-subtle);
    border-radius: var(--r-xl);
    padding: 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Decisão arquitetural (CRITICA-012 + R18): hover translateY(-3px) é o canon
   skill ui-ux-pro-max [-2 a -4]. A/B vs -2px+shadow boost (Linear-tier) diferido
   conscientemente — exige instrumentação visual humana. Documentado para que
   futuros devs não revertam para o -8px original do arsenal-bento-card. */
.bento-card:hover {
    transform: translateY(-3px);
    border-color: rgba(149, 0, 200, 0.18);
    box-shadow: 0 1px 0 rgba(149, 0, 200, 0.06), 0 24px 48px rgba(10, 5, 16, 0.08);
}

/* TIPOGRAFIA DOS CARDS */
.bento-card h3,
.bento-card h4 {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    color: var(--ink-900);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-transform: none;
}

.bento-card h3 {
    font-size: 1.4rem;
}

.bento-card h4 {
    font-size: 1.25rem;
}

.bento-card p {
    color: #5a5462;
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
}

/* ÍCONE DIRETO NO CARD (modelo-de-negocio usa <i> filho direto) */
.bento-card > i:first-child {
    font-size: 1.4rem;
    color: var(--acento);
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--acento-fog);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 1px 0 rgba(149, 0, 200, 0.08) inset;
}

/* MODIFIER: FEATURE (dark hero card — span 2x2) */
.bento-card--feature {
    grid-column: span 2;
    grid-row: span 2;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184, 51, 234, 0.22) 0%, transparent 55%),
        linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--cor-branco);
}

.bento-card--feature h3,
.bento-card--feature p {
    color: var(--cor-branco);
}

.bento-card--feature p {
    color: rgba(255, 255, 255, 0.72);
}

.bento-card--feature .icon-wrap {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* MODIFIER: WIDE (span 2 cols) */
.bento-card--wide {
    grid-column: span 2;
}

/* MODIFIER: LARGE (span 2 + grid interno text/visual + light gradient) */
.bento-card--large {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
    padding: 48px;
    background: linear-gradient(135deg, #ffffff 0%, var(--paper-100) 100%);
}

.bento-texto-large h3,
.bento-card--large h3 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin-bottom: 16px;
}

.bento-texto-large p,
.bento-card--large p {
    font-size: 1.05rem;
    line-height: 1.55;
}

/* ROW CONTENT (layout interno text|visual usado em .bento-wide do index) */
.row-content {
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.text-side {
    flex: 1;
    min-width: 0;
}

.visual-side {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bento-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* GLOW DECORATIVO (legacy bento-glow no destaque) */
.bento-glow {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: var(--cor-primaria);
    filter: blur(80px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* RESPONSIVIDADE UNIFICADA */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bento-card--feature,
    .bento-card--wide,
    .bento-card--large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-card--large {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px;
    }

    .row-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   FIM SISTEMA BENTO UNIFICADO V4
   ============================================================ */

/* ============================================================
   SEÇÃO TELA ÚNICA (CRITICA-017 #1 — ativação tela-02 na home)
   "Operador na central. Morador no bolso." — BI desktop + app mobile lado a lado.
   ============================================================ */
.secao-tela-unica {
    padding: clamp(80px, 12vw, 140px) 0;
    background: linear-gradient(180deg, var(--paper-50) 0%, #fff 100%);
    overflow: hidden;
}

.tela-unica-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 72px;
}

.tela-unica-header h2 {
    color: var(--ink-900);
    margin: 16px 0 20px;
}

.tela-unica-header p {
    color: #5a5462;
    font-size: var(--type-body-lead);
    line-height: 1.55;
}

.tela-unica-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.tela-unica-shot {
    margin: 0;
    text-align: center;
}

.tela-unica-shot figcaption {
    margin-top: 20px;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.tela-unica-shot--desktop picture,
.tela-unica-shot--desktop img {
    display: block;
    width: 100%;
}

/* Override scoped: chrome-window--bi neste contexto fica reto e preserva
   a proporção nativa do dashboard (1600 × 720), sem recorte lateral. */
.tela-unica-shot--desktop .chrome-window--bi {
    transform: none;
    transform-style: flat;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
    box-shadow:
        0 24px 60px rgba(10, 5, 16, 0.18),
        0 0 0 1px rgba(149, 0, 200, 0.10),
        0 0 60px rgba(149, 0, 200, 0.08);
}
.tela-unica-shot--desktop .chrome-window--bi:hover {
    transform: translateY(-4px);
    box-shadow:
        0 32px 72px rgba(10, 5, 16, 0.22),
        0 0 0 1px rgba(184, 51, 234, 0.18),
        0 0 80px rgba(149, 0, 200, 0.12);
}

/* Remove o mask vertical (panel slice) — neste contexto a janela é uma tela "real", não um recorte panorâmico */
.tela-unica-shot--desktop .chrome-window--bi .chrome-window__body {
    -webkit-mask-image: none;
            mask-image: none;
    aspect-ratio: auto;
    overflow: hidden;
    position: relative;
}

/* A altura acompanha a imagem: o painel inteiro permanece visível. */
.tela-unica-shot--desktop .chrome-window--bi .chrome-window__body picture {
    display: block;
    width: 100%;
    height: auto;
}
.tela-unica-shot--desktop .chrome-window--bi .chrome-window__body img,
.tela-unica-shot--desktop .chrome-window--bi .img-dashboard-main,
.tela-unica-shot--desktop .chrome-window--bi .product-shot {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.tela-unica-shot--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tela-unica-shot--mobile .phone-shot {
    max-width: 260px;
    aspect-ratio: auto;
}

.tela-unica-shot--mobile .phone-shot picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 34px;
    overflow: hidden;
}

.tela-unica-shot--mobile .phone-shot img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .tela-unica-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .tela-unica-shot--mobile .phone-shot {
        max-width: 240px;
    }
}

/* ============================================================
   SISTEMA TAG-TECH UNIFICADO V5 (CRITICA-015 → R16.5 lock-in tokens)
   Consolida 5 variants em 2 modifiers.
   Canônico:   .tag-tech (base)
   Modifiers:  --dark (sobre fundos escuros — era tag-tech-neon)
               --light (sobre fundos claros — era tag-tech-roxa/-clara/-flutuante)
   ============================================================ */
.tag-tech {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 100px;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.tag-tech--dark {
    background: var(--acento-glow-bg);
    border: 1px solid var(--acento-glow-border);
    color: var(--acento-glow-text);
}

.tag-tech--light {
    background: var(--acento-fog);
    border: 1px solid rgba(149, 0, 200, 0.2);
    color: var(--acento);
}

/* ============================================================
   FIM SISTEMA TAG-TECH UNIFICADO V5
   ============================================================ */

/* ============================================================
   LUCIDE ICONS (piloto index.html, CRITICA-014 #3)
   SVG sprite inline com 13 symbols.
   Substitui <i class="fa-solid fa-X"> por
   <svg class="icon"><use href="#icon-Y"/></svg>
   ============================================================ */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.18em;
    stroke-width: 2;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Em contextos de .icon-wrap, o ícone usa todo o espaço da caixa */
.icon-wrap .icon {
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: middle;
}

/* Estatísticas no hero — ícone alinhado com texto */
.stats-row .stat .icon {
    margin-right: 8px;
    width: 0.95em;
    height: 0.95em;
}

/* Bento link ícone (seta) */
.bento-link-min .icon {
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.1em;
    margin-left: 2px;
}

/* Baseline drift fix (TGS Condensed tem x-height alto — CRITICA-015 #3) */
h2 .icon,
h3 .icon {
    vertical-align: -0.12em;
}

.tag-tech-neon .icon,
.tag-tech-roxa .icon,
.tag-tech-clara .icon,
.tag-tech .icon,
.stat .icon,
.eyebrow-mini .icon {
    vertical-align: -0.16em;
}

/* ----------------------------------------
   SEÇÃO "APP VAI ALÉM DO ÓBVIO" (CRITICA-009 #1)
   Ativa tela-13 (caixa d'água IoT) + tela-17 (painel síndico)
   como diferenciadores categoria-fora-do-óbvio.
   ---------------------------------------- */
.secao-app-alem {
    padding: clamp(80px, 12vw, 140px) 0;
    background: linear-gradient(180deg, var(--paper-50) 0%, #fff 100%);
    overflow: hidden;
}

.alem-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 72px;
}

.alem-header h2 {
    color: var(--ink-900);
    margin: 16px 0 20px;
}

.alem-header p {
    color: #5a5462;
    font-size: var(--type-body-lead);
    line-height: 1.55;
}

.alem-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 1140px;
    margin: 0 auto;
}

.alem-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 48px;
    background: var(--paper-card);
    border: 1px solid var(--line-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-soft);
}

.alem-card-invert {
    /* DOM = text → shot (igual ao card 1); order desktop inverte visualmente */
    grid-template-columns: 1fr 1.2fr;
}

.alem-card-invert .alem-card-text {
    order: 2;
}

.alem-card-invert .alem-card-shot {
    order: 1;
}

.alem-card-text {
    min-width: 0;
}

.alem-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--acento);
    background: var(--acento-fog);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.alem-tag i {
    font-size: 0.85rem;
}

.alem-card h3 {
    font-family: var(--fonte-titulos);
    color: var(--ink-900);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin-bottom: 16px;
    max-width: 18ch;
}

.alem-card p {
    color: #5a5462;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 38ch;
}

.alem-card-shot {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-shot-alem {
    max-width: 280px;
}

@media (max-width: 900px) {
    .alem-card,
    .alem-card-invert {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px;
        text-align: center;
    }

    /* Mobile: DOM order natural (text → shot) em AMBOS os cards. */
    .alem-card-invert .alem-card-text,
    .alem-card-invert .alem-card-shot {
        order: 0;
    }

    .alem-card h3,
    .alem-card p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Phone variantes posicionadas (entrega-simples hero + gestão) */
.phone-shot-flutuante {
    max-width: 280px;
}

.phone-shot-gestao {
    max-width: 300px;
}

/* ----------------------------------------
   PROOF SECTION INSTITUCIONAL (UIPROMAX-001: pattern Trust & Authority)
   Logos de clientes em wordmark grayscale + badges de credibilidade.
   ---------------------------------------- */

.secao-proof {
    padding: clamp(56px, 7vw, 96px) 0;
    background: #fff;
    border-top: 1px solid var(--line-subtle);
    border-bottom: 1px solid var(--line-subtle);
}

.proof-eyebrow {
    text-align: center;
    margin-bottom: 32px;
}

.proof-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
    margin-bottom: 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line-subtle);
}

.proof-logo {
    font-family: var(--fonte-titulos);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    text-transform: uppercase;
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.25s ease;
    text-align: center;
    line-height: 1.1;
}

.proof-logo:hover {
    opacity: 1;
    color: var(--ink);
}

.proof-stats {
    list-style: none;
    margin: 0 0 56px;
    padding: 0 0 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
    border-bottom: 1px solid var(--line-subtle);
}

.proof-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.proof-stat .big-number {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.proof-stat span {
    font-family: var(--fonte-textos);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .proof-stats {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.proof-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.proof-badge {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--paper-50);
    border: 1px solid var(--line-subtle);
    border-radius: var(--r-lg);
    transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}

.proof-badge:hover {
    transform: translateY(-2px);
    border-color: var(--line-hi);
}

.proof-badge-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(149, 0, 200, 0.08); /* --cor-primaria / 8% */
    color: var(--cor-primaria);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.proof-badge-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.proof-badge-text strong {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.proof-badge-text span {
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Responsivo */
@media (max-width: 900px) {
    .proof-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 20px;
    }
    .proof-badges {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .proof-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
    }
}

/* ----------------------------------------
   PODA DE MOTION (UIPROMAX-001 + skill anti-pattern "Excessive Motion" High)
   Mantém: pulse-dot do status "online", hover de cards/botões,
           tilt do mockup do hero, reveal de scroll.
   Suspende: floats, scan-lines, ripples decorativos,
           glows pulsantes, sync-glows, parallax-like.
   ---------------------------------------- */

.float-slow,
.float-fast,
.float-animation,
.armario-render-box.float-slow,

/* Pulses decorativos — apenas o status dot do hero permanece animado */
/* .data-traveler removido da suppression list — agora anima (pipeline narrativa portaria-remota) */
.pulse-ring::before,
.data-pulse,
.data-packet,
.scan-laser,
.scan-line,
.sync-glow,
.bento-glow,
.cta-glow,
.cta-glow-bg,
.luz-fundo-dif,
.luz-fundo-timeline,
.mesh-blob,
.glow-portaria,
.glow-acesso,
.studio-bg-glow,
.glow-showcase-phone,
.glow-gestao-phone,
.bi-glow-bg,
.raiox-glow-bg,
.escala-glow-bg,
.frame-glow,
.foco-glow-top,
.ticket-glow,
.glow-img-bg,
.glow-dash-bg,
.holo-icon.green-glow,
.holo-icon.orange-glow,
.green-glow,
.orange-glow,
.purple-glow {
    animation: none !important;
}

/* Lights pulsantes nos LEDs e equivalentes — manter visível, sem pulsar */
.led-power,
.led-net,
.scan-face,
.pulse-roxo {
    animation: none !important;
}

/* Orbs do hero da home: ficam visíveis (estática), sem o pulsar */
.luz-orb {
    animation: none !important;
}

/* Mantém ativos (motion comunica estado): */
/* - .pulse-dot (status online no badge do hero) */
/* - hover transitions em cards e botões (definidos via :hover) */
/* - .animar-fade-up e .animar-scroll (reveal de scroll, intencional) */
/* - .chrome-window--hero transform no hover */

/* ----------------------------------------
   FIXES P0 — fontes carregadas + a11y institucional
   ---------------------------------------- */

/* Skip-link (acessibilidade WCAG 2.1 A) */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 9999;
    background: var(--ink-900);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--r-md);
    font-family: var(--fonte-textos);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(10,5,16,0.25);
    transition: top 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 16px;
    outline: 2px solid var(--acento-soft);
    outline-offset: 3px;
}

/* Smooth scroll global (respeitando prefers-reduced-motion) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: clamp(80px, 12vh, 120px); /* compensa header fixo, fluido entre desktop/mobile */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ----------------------------------------
   REDUCED-MOTION REINFORCED (CRITICA-005 #2 — skill Severity High)
   Cobre os reveals de scroll, delays utilitários e transitions.
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Vídeos de hero: troca por poster estático (autoplay viola reduced-motion) */
    .hero-bg-video,
    .hero-bg-video-produto,
    .hero-bg-video-acesso {
        display: none !important;
    }

    .animar-fade-up,
    .animar-scroll,
    .animar-scroll.visivel,
    [class*="delay-"],
    .float-slow,
    .float-fast,
    .float-animation {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .chrome-window--hero,
    .chrome-window--hero:hover,
    .proof-badge,
    .proof-badge:hover,
    .matriz-glass-card,
    .matriz-glass-card:hover,
    .feature-card,
    .feature-card:hover,
    .pacto-card,
    .pacto-card:hover:hover {
        transform: none !important;
        transition: border-color 0.2s ease !important;
    }
}

/* ----------------------------------------
   FOOTER — breakpoint intermediário 720px (CRITICA-002 P2.7)
   Entre tablet e mobile, 2 colunas dão mais densidade.
   ---------------------------------------- */
@media (max-width: 980px) and (min-width: 720px) {
    .footer-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 40px;
    }
    .brand-col {
        grid-column: span 2;
        padding-right: 0;
        max-width: 100%;
    }
}

@media (max-width: 720px) and (min-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .brand-col {
        grid-column: span 2;
        padding-right: 0;
    }
}

/* ----------------------------------------
   FIM DA CAMADA EDITORIAL V3
   ---------------------------------------- */

/* ----------------------------------------
   FIM DA CAMADA REFORM 2026
   ========================================= */

/* ----------------------------------------
   LEGAL PAGES (privacidade.html, termos.html)
   ---------------------------------------- */
.legal-section {
    padding: 120px 0 80px;
    background: var(--paper-50, #F8FAFC);
    min-height: 60vh;
}

.legal-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.legal-container h1 {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--ink-900, #0F172A);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
}

.legal-container p {
    font-family: var(--fonte-textos);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink, #1e293b);
    margin-bottom: 20px;
}

.legal-container a {
    color: var(--cor-primaria, #9500c8);
    text-decoration: underline;
}

.legal-container a:hover {
    color: var(--acento-soft, #b833ea);
}

/* ===========================================================
   ADR-003 §5 — Browser chrome unificado (chrome-window)
   Substitui os 4 sistemas legacy de chrome (header macOS, browser
   pseudo-elements ADR-002 §2/§3, e raiox/escala dark/light bars).
   =========================================================== */

/* --- TOKENS chrome semânticos ------------------------------- */
:root {
    --chrome-bg-top:      #1a1320;
    --chrome-bg-bottom:   #0f0815;
    --chrome-line:        rgba(149, 0, 200, 0.28);
    --chrome-dot-1:       #3a2f48;
    --chrome-dot-2:       #5c4f68;
    --chrome-dot-3:       #7e7388;
    --chrome-pill-bg:     rgba(255, 255, 255, 0.06);
    --chrome-pill-line:   rgba(255, 255, 255, 0.10);
    --chrome-pill-text:   rgba(255, 255, 255, 0.72);
    --chrome-pill-divider:rgba(255, 255, 255, 0.18);
    --chrome-shadow:      0 30px 60px rgba(0,0,0,0.6), 0 0 60px rgba(149, 0, 200, 0.18);
}

/* ----- Componente base ----- */
.chrome-window {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--chrome-line);
    background: var(--chrome-bg-bottom);
    box-shadow: var(--chrome-shadow);
    overflow: hidden;
    isolation: isolate;
}

.chrome-window__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 36px;
    padding: 0 12px;
    background: linear-gradient(180deg, var(--chrome-bg-top), var(--chrome-bg-bottom));
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.chrome-window__dots {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.chrome-window__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--chrome-dot-1);
}
.chrome-window__dot:nth-child(2) { background: var(--chrome-dot-2); }
.chrome-window__dot:nth-child(3) { background: var(--chrome-dot-3); }

.chrome-window__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 22px;
    line-height: 22px;
    padding: 0 12px;
    border-radius: 11px;
    background: var(--chrome-pill-bg);
    border: 1px solid var(--chrome-pill-line);
    color: var(--chrome-pill-text);
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chrome-window__pill-divider {
    color: var(--chrome-pill-divider);
    font-weight: 400;
    margin: 0 -2px;
}

.chrome-window__body {
    flex: 1;
    background: #000;
}
.chrome-window__body > picture,
.chrome-window__body > img,
.chrome-window__body > div {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Modifier: --bi (BI dashboard tilt 3D + glass floats irmãos) ----- */
.chrome-window--bi {
    transform-style: preserve-3d;
    transform: rotateX(8deg) scale(0.95);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.chrome-window--bi:hover {
    transform: rotateX(0deg) scale(1) translateY(-3px);
}
@media (max-width: 992px) {
    .chrome-window--bi {
        transform: none;
    }
}

/* Sutil fade nas bordas verticais do panel slice BI (Decisão 2) */
.chrome-window--bi .chrome-window__body {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* ----- Modifier: --compact (sub-screens BI) ----- */
.chrome-window--compact .chrome-window__bar { height: 30px; padding: 0 10px; }
.chrome-window--compact .chrome-window__dots { left: 10px; }
.chrome-window--compact .chrome-window__dot { width: 9px; height: 9px; }
.chrome-window--compact .chrome-window__pill { height: 18px; line-height: 18px; font-size: 0.65rem; padding: 0 10px; }

/* ============================================
   INDEX — secao-porque-one (Por que ONE)
   Formato SPLIT-DIFF (ref: Linear product, Vercel "why", Stripe diagram-as-content).
   3 linhas editoriais: "no mercado" vs "na ONE" + métrica âncora.
   ============================================ */

.secao-porque-one {
    position: relative;
    padding: 90px 0 100px;
    background: linear-gradient(180deg, #0a0510 0%, #07010a 100%);
    color: #fff;
    overflow: hidden;
}
.porque-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 12%, rgba(149, 0, 200, 0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 82% 88%, rgba(72, 16, 102, 0.28) 0%, transparent 50%);
    pointer-events: none;
}
.secao-porque-one .container {
    position: relative;
    z-index: 1;
}
.porque-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}
.porque-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    margin: 8px 0 18px;
}
.porque-header h2 em {
    font-style: normal;
    background: linear-gradient(95deg, #ffffff 0%, #f2c5ff 60%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.porque-header p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
}

.porque-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1140px;
    margin: 0 auto;
}

/* Linha editorial — base */
.porque-row {
    position: relative;
    padding: 32px 36px 28px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.porque-row:hover {
    border-color: rgba(184, 51, 234, 0.32);
    background: rgba(184, 51, 234, 0.04);
    transform: translateY(-2px);
}

.porque-row__head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 24px;
}
.porque-row__num {
    font-family: var(--fonte-titulos);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(184, 51, 234, 0.95);
    font-variant-numeric: tabular-nums;
}
.porque-row__head h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0;
    text-transform: none;
}

/* Split: 2 colunas mercado vs ONE */
.porque-row__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.porque-col {
    position: relative;
    padding: 22px 22px 18px;
    border-radius: 16px;
    min-height: 188px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.porque-col__label {
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.porque-col p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: auto 0 0;
}

/* Coluna "mercado" — washed-out, sem vida */
.porque-col--gray {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.porque-col--gray .porque-col__label { color: rgba(255, 255, 255, 0.42); }

/* Coluna "ONE" — brand, com sutileza */
.porque-col--one {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(184, 51, 234, 0.12) 0%, transparent 60%),
        rgba(184, 51, 234, 0.04);
    border: 1px solid rgba(184, 51, 234, 0.22);
}
.porque-col--one .porque-col__label { color: rgba(242, 197, 255, 0.95); }
.porque-col--one p { color: rgba(255, 255, 255, 0.78); }

/* --- Visualização 01: Hardware nativo --- */
.porque-vis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    flex-wrap: wrap;
}
.porque-vis--chain {
    gap: 6px;
}
.vis-block {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}
.vis-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--fonte-textos);
    font-size: 0.9rem;
}
.vis-arrow--bold {
    color: #b833ea;
    font-weight: 600;
    font-size: 1.05rem;
}
.porque-vis--core { flex-direction: column; gap: 4px; }
.vis-core {
    padding: 14px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #481066 0%, #9500c8 100%);
    border: 1px solid rgba(184, 51, 234, 0.4);
    color: #fff;
    font-family: var(--fonte-titulos);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    box-shadow:
        0 8px 22px rgba(149, 0, 200, 0.25),
        0 0 0 4px rgba(184, 51, 234, 0.05);
    position: relative;
}
.vis-core::before,
.vis-core::after {
    content: "";
    position: absolute;
    background: rgba(184, 51, 234, 0.45);
    border-radius: 1px;
}
.vis-core::before { left: 50%; transform: translateX(-50%); top: -10px; width: 60%; height: 2px; }
.vis-core::after  { left: 50%; transform: translateX(-50%); bottom: -10px; width: 60%; height: 2px; }

/* --- Visualização 02: Suporte (escalation chain) --- */
.porque-vis--escalation {
    gap: 4px;
}
.vis-step {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.vis-step--muted {
    opacity: 0.45;
    border-style: dashed;
}
.vis-step--brand {
    background: linear-gradient(135deg, #481066 0%, #9500c8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(149, 0, 200, 0.28);
    padding: 9px 16px;
}
.vis-step-line {
    width: 14px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.porque-vis--direct { gap: 12px; }

/* --- Visualização 03: Velocidade (barras chart) --- */
.porque-vis--velocity {
    align-items: flex-end;
    gap: 8px;
    min-height: 88px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vel-bar {
    flex: 1;
    max-width: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px 3px 0 0;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vel-bar--brand {
    background: linear-gradient(180deg, #b833ea 0%, #481066 100%);
    box-shadow: 0 0 12px rgba(184, 51, 234, 0.2);
}
.porque-row.visivel .vel-bar { transform: scaleY(1); }
.porque-row.visivel .vis-velocity--flat .vel-bar:nth-child(1) { transition-delay: 0.10s; }
.porque-row.visivel .vis-velocity--flat .vel-bar:nth-child(2) { transition-delay: 0.16s; }
.porque-row.visivel .vis-velocity--flat .vel-bar:nth-child(3) { transition-delay: 0.22s; }
.porque-row.visivel .vis-velocity--flat .vel-bar:nth-child(4) { transition-delay: 0.28s; }
.porque-row.visivel .vis-velocity--flat .vel-bar:nth-child(5) { transition-delay: 0.34s; }
.porque-row.visivel .vis-velocity--rising .vel-bar:nth-child(1) { transition-delay: 0.10s; }
.porque-row.visivel .vis-velocity--rising .vel-bar:nth-child(2) { transition-delay: 0.20s; }
.porque-row.visivel .vis-velocity--rising .vel-bar:nth-child(3) { transition-delay: 0.30s; }
.porque-row.visivel .vis-velocity--rising .vel-bar:nth-child(4) { transition-delay: 0.40s; }
.porque-row.visivel .vis-velocity--rising .vel-bar:nth-child(5) { transition-delay: 0.50s; }

/* Métrica âncora — fecha cada linha */
.porque-row__anchor {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    padding-left: 14px;
    position: relative;
}
.porque-row__anchor::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #b833ea 0%, #481066 100%);
}
.porque-row__anchor strong {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.018em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(95deg, #ffffff 0%, #f2c5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.porque-row__anchor span {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Mobile: split empilha vertical, ratios mantidos */
@media (max-width: 768px) {
    .secao-porque-one { padding: 64px 0 72px; }
    .porque-header { margin-bottom: 44px; }
    .porque-row { padding: 24px 22px 22px; }
    .porque-row__split { grid-template-columns: 1fr; gap: 14px; }
    .porque-col { min-height: 160px; }
    .porque-row__head h3 { font-size: 1.3rem; }
    .vis-step, .vis-block { font-size: 0.7rem; padding: 6px 10px; }
    .vis-step-line { width: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .vel-bar { transition: none; transform: scaleY(0.6); }
    .porque-row { transition: none; }
    .porque-row:hover { transform: none; }
}

/* ============================================
   INDEX — secao-bento (Ecossistema) — V2 layout 2×3 sem células vazias
   Row 1: [Portaria FEATURE 2-col horizontal] [App 1-col vertical]
   Row 2: [BI 1-col vertical] [Córtex WIDE 2-col horizontal]
   Cards "row" têm visual+texto lado a lado.
   ============================================ */

#solucoes.secao-bento {
    padding: 70px 0 80px;
}
#solucoes .bento-header {
    margin: 0 auto 44px;
}

/* Grid V2 — 3 cols × 2 rows, denso, sem auto-rows altos */
#solucoes .bento-grid--eco {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 20px;
}

/* Layout: cards row são flex-row, cards vertical são flex-col */
#solucoes .bento-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    min-height: 240px;
    overflow: hidden;
    position: relative;
}
#solucoes .bento-card--row {
    flex-direction: row;
    align-items: stretch;
    grid-column: span 2;
    gap: 24px;
    grid-row: auto;
}
/* Override do bento-card--feature legacy (era 2x2) e wide (era span 2 row 1) */
#solucoes .bento-card--feature { grid-row: span 1; }
#solucoes .bento-card--wide   { grid-row: span 1; }

#solucoes .bento-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#solucoes .bento-content .bento-link-min { margin-top: auto; }

/* Refino dos icon-wraps internos — menor, mais discreto, deixa o protagonismo pro signature */
#solucoes .bento-content > .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    margin-bottom: 20px;
}
#solucoes .bento-content > .icon-wrap .icon {
    width: 22px;
    height: 22px;
}
#solucoes .bento-card--feature .bento-content > .icon-wrap {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* H3 mais firme dentro dos cards do ecossistema */
#solucoes .bento-card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    text-wrap: balance;
}
#solucoes .bento-card--feature h3 {
    font-size: 1.7rem;
    max-width: 24ch;
}
#solucoes .bento-card p {
    font-size: 0.95rem;
    line-height: 1.55;
}
#solucoes .bento-card--feature p {
    max-width: 38ch;
}

/* Anchor metric — barra brand sutil à esquerda + tipografia limpa */
#solucoes .bento-anchor {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 22px;
    padding-left: 14px;
    position: relative;
}
#solucoes .bento-anchor::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #b833ea 0%, #481066 100%);
}
#solucoes .bento-anchor strong {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
    color: var(--cor-primaria);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#solucoes .bento-card--feature .bento-anchor strong {
    background: linear-gradient(95deg, #ffffff 0%, #f2c5ff 60%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f2c5ff;
}
#solucoes .bento-anchor span {
    font-size: 0.82rem;
    color: #6a5e74;
    letter-spacing: 0.02em;
    line-height: 1.35;
    max-width: 22ch;
}
#solucoes .bento-card--feature .bento-anchor span {
    color: rgba(255, 255, 255, 0.66);
}

/* bento-visual: bloco visual em flex (não mais absoluto) */
#solucoes .bento-visual {
    position: relative;
    pointer-events: none;
    flex-shrink: 0;
}

/* Visuais nos cards verticais (App + BI) ficam como banner topo */
#solucoes .bento-card--app .bento-visual,
#solucoes .bento-card--bi .bento-visual {
    width: 100%;
    margin-bottom: 16px;
}

/* ---------- VISUAL: PORTARIA — viewfinder grande + scanline + AO VIVO ---------- */
.bento-visual--cam {
    flex: 0 0 40%;
    align-self: stretch;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(184, 51, 234, 0.16) 0%, transparent 65%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.cam-glow {
    position: absolute;
    inset: 30% 25%;
    background: radial-gradient(ellipse at center, rgba(184, 51, 234, 0.32) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}
.cam-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    transition: border-color 0.4s ease, width 0.4s ease, height 0.4s ease;
}
.cam-corner--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.cam-corner--tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.cam-corner--bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.cam-corner--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.cam-scanline {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 51, 234, 0.95) 50%, transparent);
    box-shadow: 0 0 8px rgba(184, 51, 234, 0.6);
    animation: camScan 3.4s ease-in-out infinite;
}
@keyframes camScan {
    0%   { top: 18px;          opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: calc(100% - 18px); opacity: 0; }
}
/* "Ao vivo" centralizado no viewfinder */
.cam-live {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fonte-textos);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(10, 5, 16, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cam-live-dot {
    width: 5px;
    height: 5px;
    background: #ff3854;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 56, 84, 0.55);
    animation: camLivePulse 1.8s ease-in-out infinite;
}
@keyframes camLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 56, 84, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 56, 84, 0); }
}
.bento-card--feature:hover .cam-corner { border-color: rgba(184, 51, 234, 0.95); width: 18px; height: 18px; }

/* ---------- VISUAL: APP — mini-phone como banner top ---------- */
.bento-visual--phone {
    height: 110px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 60% 40%, rgba(184, 51, 234, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, rgba(149, 0, 200, 0.05), rgba(149, 0, 200, 0.01));
    border: 1px solid rgba(149, 0, 200, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
}
.bento-visual--phone .mini-phone {
    position: relative;
    inset: auto;
    width: 56px;
    height: 96px;
}
.bento-visual--phone .mini-notif {
    top: 6px;
    right: calc(50% - 36px);
}
.mini-phone {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1a0e26 0%, #0a0510 100%);
    border: 1px solid rgba(184, 51, 234, 0.32);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(10, 5, 16, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transform: rotate(-5deg);
    transform-origin: center bottom;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mini-phone-island {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 5px;
    background: #000;
    border-radius: 3px;
}
.mini-phone-screen {
    position: absolute;
    inset: 14px 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}
.mini-phone-bar {
    display: block;
    height: 4px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.55), rgba(184, 51, 234, 0.08));
    border-radius: 2px;
}
.mini-phone-bar--1 { width: 80%; }
.mini-phone-bar--2 { width: 55%; opacity: 0.75; }
.mini-phone-bar--3 { width: 92%; opacity: 0.55; }
.mini-notif {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #b833ea 0%, #9500c8 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--paper-card, #ffffff), 0 0 10px rgba(184, 51, 234, 0.5);
    animation: miniNotifPing 2.4s ease-in-out infinite;
}
@keyframes miniNotifPing {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 3px var(--paper-card, #ffffff), 0 0 0 0 rgba(184, 51, 234, 0.5); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 3px var(--paper-card, #ffffff), 0 0 0 7px rgba(184, 51, 234, 0); }
}
.bento-card--app:hover .mini-phone { transform: rotate(-1deg) translateY(-4px); }

/* ---------- VISUAL: BI — sparkline como banner top ---------- */
.bento-visual--spark {
    height: 110px;
    padding: 22px 26px 16px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 40% 100%, rgba(184, 51, 234, 0.15) 0%, transparent 65%),
        linear-gradient(180deg, rgba(149, 0, 200, 0.04), rgba(149, 0, 200, 0.01));
    border: 1px solid rgba(149, 0, 200, 0.14);
    display: flex;
    align-items: flex-end;
    gap: 7px;
    position: relative;
}
.bento-visual--spark::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(149, 0, 200, 0.32) 50%, transparent);
}
.spark-bar {
    flex: 1;
    background: linear-gradient(180deg, #b833ea 0%, #481066 100%);
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    transform: scaleY(0.15);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
    min-height: 6px;
}
#solucoes .bento-card--bi.visivel .spark-bar--1 { transform: scaleY(0.42); transition-delay: 0.10s; }
#solucoes .bento-card--bi.visivel .spark-bar--2 { transform: scaleY(0.68); transition-delay: 0.18s; }
#solucoes .bento-card--bi.visivel .spark-bar--3 { transform: scaleY(0.32); transition-delay: 0.26s; }
#solucoes .bento-card--bi.visivel .spark-bar--4 { transform: scaleY(0.82); transition-delay: 0.34s; }
#solucoes .bento-card--bi.visivel .spark-bar--5 { transform: scaleY(0.52); transition-delay: 0.42s; }
#solucoes .bento-card--bi.visivel .spark-bar--6 { transform: scaleY(0.96); transition-delay: 0.50s; }
#solucoes .bento-card--bi.visivel .spark-bar--7 { transform: scaleY(0.40); transition-delay: 0.58s; }
.bento-card--bi:hover .spark-bar { filter: brightness(1.15) saturate(1.12); }
/* sparkline já é banner top — fica em qualquer breakpoint */

/* ---------- VISUAL: CÓRTEX — placa-mãe ao lado do texto ---------- */
.bento-visual--cortex {
    flex: 0 0 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(184, 51, 234, 0.10) 0%, transparent 65%),
        linear-gradient(135deg, rgba(149, 0, 200, 0.03), rgba(149, 0, 200, 0.01));
    border: 1px solid rgba(149, 0, 200, 0.12);
}
.cortex-board {
    position: relative;
    width: 200px;
    height: 200px;
}
.cortex-board .cortex-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(149, 0, 200, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 0, 200, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 14px;
    border: 1px solid rgba(149, 0, 200, 0.16);
    background-color: rgba(149, 0, 200, 0.025);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 92%);
            mask-image: radial-gradient(ellipse at center, #000 55%, transparent 92%);
}
.cortex-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #1a0e26 0%, #0a0510 100%);
    border: 1px solid rgba(184, 51, 234, 0.45);
    border-radius: 12px;
    box-shadow:
        0 12px 28px rgba(10, 5, 16, 0.22),
        0 0 0 4px rgba(149, 0, 200, 0.04),
        0 0 28px rgba(184, 51, 234, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cortex-chip-core {
    font-family: var(--fonte-titulos);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    background: linear-gradient(95deg, #ffffff 0%, #f2c5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cortex-chip-pin {
    position: absolute;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.05), rgba(184, 51, 234, 0.6) 50%, rgba(184, 51, 234, 0.05));
    border-radius: 1px;
}
.cortex-chip-pin--b,
.cortex-chip-pin--t {
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.05), rgba(184, 51, 234, 0.6) 50%, rgba(184, 51, 234, 0.05));
}
.cortex-chip-pin--l,
.cortex-chip-pin--r {
    background: linear-gradient(180deg, rgba(184, 51, 234, 0.05), rgba(184, 51, 234, 0.6) 50%, rgba(184, 51, 234, 0.05));
}
.cortex-chip-pin--t { top: -14px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; }
.cortex-chip-pin--b { bottom: -14px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; }
.cortex-chip-pin--l { left: -14px; top: 50%; transform: translateY(-50%); height: 60px; width: 2px; }
.cortex-chip-pin--r { right: -14px; top: 50%; transform: translateY(-50%); height: 60px; width: 2px; }
.cortex-led {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b833ea;
    animation: cortexLed 2.4s ease-in-out infinite;
}
.cortex-led--1 { top: 16px; left: 16px; }
.cortex-led--2 { top: 16px; right: 16px; animation-delay: 0.6s; }
.cortex-led--3 { bottom: 16px; left: 16px; animation-delay: 1.2s; }
.cortex-led--4 { bottom: 16px; right: 16px; animation-delay: 1.8s; }
@keyframes cortexLed {
    0%, 100% { opacity: 0.35; box-shadow: 0 0 4px rgba(184, 51, 234, 0.4); }
    50%      { opacity: 1;    box-shadow: 0 0 10px rgba(184, 51, 234, 0.95), 0 0 22px rgba(184, 51, 234, 0.45); }
}
#solucoes .bento-card--cortex:hover .cortex-chip { transform: translate(-50%, -50%) scale(1.04); }

/* Empilha em mobile */
@media (max-width: 760px) {
    #solucoes .bento-card--cortex .row-content {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }
    #solucoes .bento-card--cortex .bento-anchor {
        justify-content: center;
    }
}

/* prefers-reduced-motion: tudo para */
@media (prefers-reduced-motion: reduce) {
    .cam-scanline,
    .cam-live-dot,
    .mini-notif,
    .cortex-led {
        animation: none;
    }
    #solucoes .bento-card--bi .spark-bar {
        transition: none;
        transform: scaleY(0.6);
    }
}

/* Refino tipográfico do card --feature (Portaria dark) — já não é 2x2, mas continua protagonista */
#solucoes .bento-card--feature h3 { font-size: 1.55rem; max-width: 18ch; }
#solucoes .bento-card--feature p { max-width: 36ch; font-size: 0.95rem; }

/* Refino tipográfico do Cortex wide */
#solucoes .bento-card--cortex h3 { font-size: 1.45rem; max-width: 22ch; }
#solucoes .bento-card--cortex p { max-width: 42ch; }

/* Refino visual: cards mais densos */
#solucoes .bento-card { padding: 24px; }
#solucoes .bento-card--feature,
#solucoes .bento-card--cortex { padding: 28px; }
#solucoes .bento-card p { font-size: 0.92rem; line-height: 1.5; }
#solucoes .bento-content > .icon-wrap { margin-bottom: 14px; }

/* ----- ECOSSISTEMA RESPONSIVE — granular V2 ----- */

/* TABLET LARGE (1024px) — grid 3-col mantém, mas aperta */
@media (max-width: 1024px) {
    #solucoes .bento-grid--eco { gap: 16px; }
    #solucoes .bento-card { padding: 22px; }
    #solucoes .bento-card--feature,
    #solucoes .bento-card--cortex { padding: 24px; }
    .bento-visual--cam { flex-basis: 38%; }
    .bento-visual--cortex { flex-basis: 36%; }
    .cortex-board { width: 180px; height: 180px; }
    .cortex-chip { width: 88px; height: 88px; }
    #solucoes .bento-card--row { gap: 18px; }
    #solucoes .bento-card { min-height: 220px; }
    #solucoes .bento-card--feature h3 { font-size: 1.4rem; }
    #solucoes .bento-card--cortex h3 { font-size: 1.3rem; }
}

/* TABLET (860px) — row cards stacka (visual em cima do texto), grid mantém 3-col p/ App+BI */
@media (max-width: 860px) {
    #solucoes .bento-grid--eco {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    /* Cards row ocupam ambas colunas, em coluna */
    #solucoes .bento-card--row {
        grid-column: span 2;
        flex-direction: column;
        gap: 18px;
    }
    /* Visuais viram banners horizontais */
    .bento-visual--cam,
    .bento-visual--cortex {
        flex: 0 0 auto;
        width: 100%;
        height: 160px;
    }
    /* App + BI ficam lado a lado em row dedicado */
    #solucoes .bento-card { min-height: 240px; }
    /* Sparkline + phone banners proporcionais */
    .bento-visual--phone,
    .bento-visual--spark { height: 100px; }
    /* Tipografia */
    #solucoes .bento-card--feature h3,
    #solucoes .bento-card--cortex h3 { font-size: 1.35rem; max-width: 100%; }
    #solucoes .bento-card--feature p,
    #solucoes .bento-card--cortex p { max-width: 100%; }
}

/* MOBILE LARGE (640px) — tudo 1-col, mas mantém visuais maiores p/ ler */
@media (max-width: 640px) {
    #solucoes.secao-bento { padding: 52px 0 60px; }
    #solucoes .bento-header { margin-bottom: 32px; padding: 0 6px; }
    #solucoes .bento-grid--eco {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    #solucoes .bento-card,
    #solucoes .bento-card--row {
        grid-column: span 1 !important;
        min-height: 0;
        padding: 22px;
    }
    .bento-visual--cam,
    .bento-visual--cortex { height: 140px; }
    .bento-visual--phone,
    .bento-visual--spark { height: 92px; }
    .cortex-board { width: 160px; height: 160px; }
    .cortex-chip { width: 80px; height: 80px; }
    .cortex-chip-pin--t { width: 50px; }
    .cortex-chip-pin--b { width: 50px; }
    .cortex-chip-pin--l { height: 50px; }
    .cortex-chip-pin--r { height: 50px; }
    /* Sparkline barras com gap menor */
    .bento-visual--spark { padding: 18px 22px 12px; gap: 5px; }
    /* Camera corners menores */
    .cam-corner { width: 18px; height: 18px; }
    .cam-corner--tl, .cam-corner--tr { top: 14px; }
    .cam-corner--bl, .cam-corner--br { bottom: 14px; }
    .cam-corner--tl, .cam-corner--bl { left: 14px; }
    .cam-corner--tr, .cam-corner--br { right: 14px; }
    /* H3 e p ajustes */
    #solucoes .bento-card h3 { font-size: 1.18rem; }
    #solucoes .bento-card--feature h3,
    #solucoes .bento-card--cortex h3 { font-size: 1.3rem; }
    #solucoes .bento-card p { font-size: 0.9rem; }
    /* Anchor metric compactado */
    #solucoes .bento-anchor strong { font-size: 1.5rem; }
    #solucoes .bento-anchor span { font-size: 0.78rem; max-width: 100%; }
}

/* MOBILE PEQUENO (400px) — aperta tudo */
@media (max-width: 400px) {
    #solucoes .bento-card,
    #solucoes .bento-card--row { padding: 18px; }
    .bento-visual--cam,
    .bento-visual--cortex { height: 120px; }
    .bento-visual--phone,
    .bento-visual--spark { height: 84px; }
    .cortex-board { width: 140px; height: 140px; }
    .cortex-chip { width: 70px; height: 70px; }
    .cortex-chip-pin--t,
    .cortex-chip-pin--b { width: 40px; }
    .cortex-chip-pin--l,
    .cortex-chip-pin--r { height: 40px; }
    #solucoes .bento-card h3 { font-size: 1.1rem; }
    #solucoes .bento-card p { font-size: 0.85rem; }
    .bento-visual--spark { padding: 14px 18px 10px; }
    .vis-step { font-size: 0.66rem; padding: 5px 9px; }
}

/* ============================================
   INDEX — secao-pipeline (Modelo de parceria) — polish
   Escopo restrito a #quem-somos para não vazar para portaria-remota.
   ============================================ */

#quem-somos.secao-pipeline {
    padding: 80px 0 56px;
}
#quem-somos .pipeline-header {
    margin: 0 auto 48px;
}

/* Fundo sutil — dot grid + radial accent */
#quem-somos.secao-pipeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(149, 0, 200, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
#quem-somos .pipeline-header,
#quem-somos .pipeline-flow {
    position: relative;
    z-index: 2;
}

/* Linhas de conexão: gradient ao invés de cinza flat */
#quem-somos .flow-connection {
    width: 120px;
    z-index: 2;
    position: relative;
}
#quem-somos .connection-line {
    background: linear-gradient(90deg, rgba(149, 0, 200, 0.08) 0%, rgba(149, 0, 200, 0.45) 50%, rgba(149, 0, 200, 0.08) 100%);
    height: 2px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#quem-somos .flow-connection.visivel .connection-line {
    transform: scaleX(1);
}

/* Pulses ANIMADOS de verdade — viajam L→R com fade — só após linha desenhar */
#quem-somos .data-pulse {
    width: 12px;
    height: 12px;
    left: 0;
    opacity: 0;
    background: var(--cor-primaria);
    box-shadow: 0 0 12px rgba(149, 0, 200, 0.8), 0 0 24px rgba(184, 51, 234, 0.4);
}
#quem-somos .flow-connection.visivel .data-pulse {
    animation: flowDataPulse 2.6s ease-in-out infinite;
    animation-delay: 0.8s;
}
#quem-somos .flow-connection.visivel .pulse-2 {
    animation-delay: 2.1s;
}
@keyframes flowDataPulse {
    0%   { left: 0;    opacity: 0; transform: translateY(-50%) scale(0.6); }
    15%  { opacity: 1; transform: translateY(-50%) scale(1); }
    85%  { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { left: 100%; opacity: 0; transform: translateY(-50%) scale(0.6); }
}

/* Flow-node — entrance + hover refinado */
#quem-somos .flow-node {
    position: relative;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease;
}
#quem-somos .flow-node:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(149, 0, 200, 0.12);
    border-color: rgba(149, 0, 200, 0.25);
}

/* Ícone — escala suave na entrada + leve rotação no hover */
#quem-somos .node-icon {
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s,
                opacity 0.5s ease 0.15s;
}
#quem-somos .animar-scroll.visivel .node-icon {
    transform: scale(1);
    opacity: 1;
}
#quem-somos .flow-node:hover .node-icon {
    transform: scale(1.08) rotate(-4deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Destaque-neon (Sua Empresa) — respira sutil */
#quem-somos .destaque-neon.animar-scroll.visivel {
    animation: destaqueBreath 4.5s ease-in-out infinite 1.2s;
}
@keyframes destaqueBreath {
    0%, 100% {
        box-shadow: 0 15px 40px rgba(149, 0, 200, 0.15),
                    0 0 0 0 rgba(184, 51, 234, 0);
    }
    50% {
        box-shadow: 0 22px 50px rgba(149, 0, 200, 0.22),
                    0 0 0 8px rgba(184, 51, 234, 0.06);
    }
}

/* Conteúdo textual: fade-in sequencial dentro do nó já revelado */
#quem-somos .node-content h3,
#quem-somos .node-content p {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#quem-somos .animar-scroll.visivel .node-content h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}
#quem-somos .animar-scroll.visivel .node-content p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* prefers-reduced-motion: tudo estático mas visível */
@media (prefers-reduced-motion: reduce) {
    #quem-somos .data-pulse,
    #quem-somos .destaque-neon.animar-scroll.visivel {
        animation: none;
    }
    #quem-somos .data-pulse {
        opacity: 0.6;
        left: 50%;
    }
    #quem-somos .connection-line {
        transform: scaleX(1);
        transition: none;
    }
    #quem-somos .node-icon,
    #quem-somos .node-content h3,
    #quem-somos .node-content p {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    #quem-somos.secao-pipeline { padding: 60px 0 40px; }
    #quem-somos .pipeline-header { margin-bottom: 36px; }
}

/* ----- Modifier: --hero (index hero) ----- */
.chrome-window--hero {
    position: relative;
    transform: perspective(1200px) rotateX(6deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(149, 0, 200, 0.18),
        0 0 0 1px rgba(184, 51, 234, 0.18);
    isolation: isolate;
}
/* Encaixa imagem 2,22 (panorâmica nativa) em janela 16:9 — preserva sidebar, corta direita */
.chrome-window--hero .chrome-window__body {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}
.chrome-window--hero .chrome-window__body > picture {
    display: block;
    width: 100%;
    height: 100%;
}
.chrome-window--hero .chrome-window__body img,
.chrome-window--hero .img-dashboard-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.chrome-window--hero:hover {
    transform: perspective(1200px) rotateX(0deg) translateY(-6px);
    box-shadow:
        0 36px 80px rgba(0, 0, 0, 0.6),
        0 0 120px rgba(149, 0, 200, 0.28),
        0 0 0 1px rgba(184, 51, 234, 0.32);
}

/* "Em operação" float — sinal de produto vivo */
.chrome-window__live {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: rgba(10, 5, 16, 0.78);
    border: 1px solid rgba(184, 51, 234, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3;
    pointer-events: none;
}
.chrome-window__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b833ea;
    box-shadow: 0 0 0 0 rgba(184, 51, 234, 0.6);
    animation: chromeLivePulse 2s ease-in-out infinite;
}
.chrome-window__live-label {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}
@keyframes chromeLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 51, 234, 0.55); }
    50% { box-shadow: 0 0 0 6px rgba(184, 51, 234, 0); }
}
@media (max-width: 768px) {
    .chrome-window__live { top: 8px; right: 8px; padding: 4px 9px 4px 8px; }
    .chrome-window__live-label { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
    .chrome-window__live-dot { animation: none; }
}

/* ----- Modifier: --desktop (portaria-remota cockpit ONE PLUS) ----- */
.chrome-window--desktop {
    max-width: 1100px;
    margin: 0 auto;
    transform: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.chrome-window--desktop:hover {
    transform: translateY(-4px);
}

/* ----- Mobile: pill some, bar encolhe ----- */
@media (max-width: 768px) {
    .chrome-window__bar { height: 28px; }
    .chrome-window__dots { left: 10px; }
    .chrome-window__dot { width: 9px; height: 9px; }
    .chrome-window__pill { display: none; }
}

/* ----- Floor reflection (ADR-002 §2 floor, agora componentizado) ----- */
.chrome-window__floor {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -60px;
    height: 70px;
    background: radial-gradient(ellipse 60% 100% at center top, rgba(149,0,200,0.22) 0%, transparent 70%);
    filter: blur(28px);
    z-index: -1;
    pointer-events: none;
}

/* ===========================================================
   BUILD-024 Fix 3 — .bi-hero-stage containing-block para .glass-metric
   HTML existia (bi-operacional.html:143) sem CSS, fazendo o glass-metric
   resolver position:absolute contra .bi-hero-visual (containing block errado).
   =========================================================== */
.bi-hero-stage {
    position: relative;
    display: block;
    transform-style: preserve-3d;
}

/* ===========================================================
   ADR-003 §5.5 — Tab panel stack para ONE PLUS
   =========================================================== */
.oneplus-stack {
    display: grid;
    grid-template-areas: "stack";
    position: relative;
}
.oneplus-panel {
    grid-area: stack;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.oneplus-panel.tela-ativa {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}
/* BUILD-024 Fix 1 — removed the [hidden]+display:block!important rule on oneplus-panel
   which created WCAG 4.1.2 state-mismatch: hidden-attr panels stayed visible but
   were removed from accessibility tree. JS now toggles the hidden attribute in sync with
   the tela-ativa class. Inactive panels obey UA stylesheet display:none from hidden. */
.oneplus-panel > picture,
.oneplus-panel > picture > img { display: block; width: 100%; height: auto; }

/* ===========================================================
   ADR-003 §6 — Phone polish (side buttons real, dynamic island)
   =========================================================== */
.phone-shot__btn {
    position: absolute;
    width: 3px;
    background: #1a0f22;
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}
.phone-shot__btn--power   { right: -12px; top: 22%; height: 56px; }
.phone-shot__btn--action  { left: -12px; top: 14%; height: 24px; }
.phone-shot__btn--volup   { left: -12px; top: 22%; height: 36px; }
.phone-shot__btn--voldn   { left: -12px; top: 32%; height: 36px; }

@media (max-width: 480px) {
    .phone-shot__btn { display: none; }
}

/* ----------------------------------------
   Reform 2026 — produto-dark hero typography
   Override do legado caps em .hero-produto-dark h1 (linha ~2811).
   Aplica sentence-case + peso 500 para todos heros produto.
   ---------------------------------------- */
.hero-produto-content h1,
.bi-hero-content h1,
.app-hero-texto h1,
.hero-interno-content h1 {
    text-transform: none;
    font-weight: 500;
    letter-spacing: -0.024em;
}

/* Quem somos hero — padding mais editorial + tipografia escalonada */
.hero-interno {
    padding: 160px 0 110px;
}
.hero-interno-content {
    max-width: 760px;
}
.hero-interno h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.04;
    margin-bottom: 24px;
    text-shadow: 0 2px 32px rgba(10, 5, 16, 0.45);
}
.hero-interno p {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 16px rgba(10, 5, 16, 0.5);
}
/* Gradient da "a base." mais vivo + escalado p/ desktop */
.hero-interno h1 .text-gradient {
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 40%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: heroGradientShift 6s ease-in-out infinite;
}
@keyframes heroGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Marker "Desde 2006" — linha brand + label discreto acima do H1 */
.hero-marker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    opacity: 0.92;
}
.hero-marker-line {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 51, 234, 0.85) 50%, rgba(184, 51, 234, 0.4));
}
.hero-marker-label {
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

/* CTA quiet — link sub-CTA depois do parágrafo */
.hero-cta-quiet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 8px 0 4px;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 51, 234, 0.35);
    transition: border-color 0.3s ease, gap 0.3s ease, color 0.3s ease;
}
.hero-cta-quiet .icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
.hero-cta-quiet:hover {
    color: #fff;
    border-bottom-color: var(--acento-soft);
    gap: 12px;
}
.hero-cta-quiet:hover .icon {
    transform: translateX(2px);
}

/* Scroll indicator — linha + dot caindo */
.hero-scroll-down {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 14px;
    height: 48px;
    z-index: 11;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.72;
    transition: opacity 0.3s ease;
}
.hero-scroll-down:hover { opacity: 1; }
.hero-scroll-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.15));
    position: relative;
}
.hero-scroll-dot {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 3px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--acento-soft);
    border-radius: 2px;
    animation: scrollDotFall 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    box-shadow: 0 0 6px rgba(184, 51, 234, 0.6);
}
@keyframes scrollDotFall {
    0%   { top: 0; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: calc(100% - 8px); opacity: 0; }
}

/* Vídeo bg — leve clareada pra contraste de texto, e película mais densa em baixo */
.hero-interno .hero-overlay {
    background: linear-gradient(to bottom,
        rgba(7, 1, 10, 0.55) 0%,
        rgba(7, 1, 10, 0.72) 50%,
        rgba(7, 1, 10, 0.92) 80%,
        #07010a 100%);
}

@media (max-width: 768px) {
    .hero-interno { padding: 130px 0 80px; }
    .hero-interno h1 { font-size: clamp(2rem, 7.5vw, 2.8rem); }
    .hero-interno p { font-size: 1rem; padding: 0 8px; }
    .hero-marker { gap: 10px; margin-bottom: 16px; }
    .hero-marker-line { width: 24px; }
    .hero-marker-label { font-size: 0.66rem; letter-spacing: 0.2em; }
    .hero-cta-quiet { margin-top: 22px; font-size: 0.9rem; }
    .hero-scroll-down { bottom: 22px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-interno h1 .text-gradient { animation: none; }
    .hero-scroll-dot { animation: none; opacity: 0.5; }
}

/* =====================================================
   QUEM SOMOS — secao-historia (timeline reimaginada)
   Formato: dossier editorial com rail por década + chips
   + barra de progresso da stack ONE crescendo ao longo dos anos.
   ===================================================== */

.secao-historia {
    position: relative;
    padding: 96px 0 110px;
    background: linear-gradient(180deg, #07010a 0%, #0a0510 60%, #07010a 100%);
    color: #fff;
    overflow: hidden;
}
.historia-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 14%, rgba(149, 0, 200, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 82% 86%, rgba(72, 16, 102, 0.22) 0%, transparent 50%);
    pointer-events: none;
}
.secao-historia .container { position: relative; z-index: 1; }

.historia-header {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}
.historia-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 8px 0 18px;
    color: #fff;
}
.historia-header h2 em {
    font-style: normal;
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 50%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.historia-header p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
}

/* Timeline vertical clássica — axis no centro, cards alternados L/R */
.historia-timeline {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Axis central — linha vertical com gradient brand + glow sutil */
.historia-axis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0,
        rgba(184, 51, 234, 0.45) 8%,
        rgba(184, 51, 234, 0.55) 50%,
        rgba(184, 51, 234, 0.45) 92%,
        transparent 100%
    );
    box-shadow: 0 0 24px rgba(184, 51, 234, 0.12);
}
.historia-axis::before,
.historia-axis::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b833ea 0%, #481066 100%);
    box-shadow: 0 0 0 4px rgba(184, 51, 234, 0.12), 0 0 18px rgba(184, 51, 234, 0.5);
}
.historia-axis::before { top: -6px; }
.historia-axis::after  { bottom: -6px; }

/* Card individual */
.historia-card {
    position: relative;
    width: calc(50% - 36px);
    padding: 38px 0;
    display: flex;
}
.historia-card--left {
    margin-right: auto;
    justify-content: flex-end;
    padding-right: 8px;
}
.historia-card--right {
    margin-left: auto;
    justify-content: flex-start;
    padding-left: 8px;
}

/* Marker no axis central — dot pulsando idle, expande no hover */
.historia-marker {
    position: absolute;
    top: calc(50% - 7px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b833ea 0%, #481066 100%);
    box-shadow:
        0 0 0 4px #07010a,
        0 0 0 5px rgba(184, 51, 234, 0.35),
        0 0 18px rgba(184, 51, 234, 0.55);
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    animation: markerPulse 3.5s ease-in-out infinite;
}
@keyframes markerPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px #07010a,
            0 0 0 5px rgba(184, 51, 234, 0.35),
            0 0 18px rgba(184, 51, 234, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 4px #07010a,
            0 0 0 7px rgba(184, 51, 234, 0.5),
            0 0 28px rgba(184, 51, 234, 0.85);
    }
}
/* Majors têm pulse mais intenso */
.historia-card--major .historia-marker {
    animation: markerPulseMajor 3s ease-in-out infinite;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
}
@keyframes markerPulseMajor {
    0%, 100% {
        box-shadow:
            0 0 0 4px #07010a,
            0 0 0 6px rgba(184, 51, 234, 0.45),
            0 0 22px rgba(184, 51, 234, 0.65);
    }
    50% {
        box-shadow:
            0 0 0 4px #07010a,
            0 0 0 9px rgba(184, 51, 234, 0.6),
            0 0 34px rgba(184, 51, 234, 1);
    }
}
.historia-card--left .historia-marker {
    right: -36px;
    transform-origin: right center;
}
.historia-card--right .historia-marker {
    left: -36px;
    transform-origin: left center;
}
/* Traço fino do dot até a borda do card */
.historia-card--left .historia-marker::before,
.historia-card--right .historia-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.6), rgba(184, 51, 234, 0.1));
    transform: translateY(-50%);
}
.historia-card--left .historia-marker::before {
    right: 100%;
    width: 22px;
    background: linear-gradient(-90deg, rgba(184, 51, 234, 0.6), rgba(184, 51, 234, 0.1));
}
.historia-card--right .historia-marker::before {
    left: 100%;
    width: 22px;
}

/* Card content — bloco editorial com depth */
.historia-card-content {
    width: 100%;
    padding: 26px 28px 22px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) 60%),
        rgba(7, 1, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}
.historia-card:hover .historia-card-content {
    border-color: rgba(184, 51, 234, 0.35);
    box-shadow: 0 22px 50px rgba(149, 0, 200, 0.16), 0 0 0 1px rgba(184, 51, 234, 0.18);
}
.historia-card:hover .historia-marker {
    transform: scale(1.15);
    box-shadow:
        0 0 0 4px #07010a,
        0 0 0 6px rgba(184, 51, 234, 0.45),
        0 0 24px rgba(184, 51, 234, 0.75);
}
.historia-card--left:hover .historia-card-content {
    transform: translateX(-3px);
}
.historia-card--right:hover .historia-card-content {
    transform: translateX(3px);
}

/* Cabeçalho do card — agora só com o chip (year saiu pra ser peça gráfica) */
.historia-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.historia-card--left .historia-card-head {
    justify-content: flex-end;
}

/* =========================================
   ANO — peça gráfica posicionada FORA da caixa
   Outline puro por padrão · hover preenche com gradient
   Animações: float idle, glow respiração, hover scale dramático
   ========================================= */
.historia-year {
    position: absolute;
    z-index: 0;
    top: -14px;
    font-family: var(--fonte-titulos);
    font-size: clamp(5rem, 10vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.82;
    font-variant-numeric: tabular-nums;
    /* OUTLINE ONLY no estado padrão */
    color: transparent;
    -webkit-text-stroke: 1.8px rgba(184, 51, 234, 0.55);
    pointer-events: none;
    user-select: none;
    /* float idle */
    animation: yearFloat 7s ease-in-out infinite;
    transition:
        -webkit-text-stroke 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
        color 0.6s ease,
        filter 0.6s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        letter-spacing 0.6s ease;
}
/* Cards à esquerda: year ancora à DIREITA do card (lado do eixo, "atrás" da chip) */
.historia-card--left .historia-year {
    right: 14px;
    transform-origin: right top;
}
/* Cards à direita: year ancora à ESQUERDA do card */
.historia-card--right .historia-year {
    left: 14px;
    transform-origin: left top;
}

/* Card-content sobe um pouco pra dar espaço pro ano "estampar" o topo */
.historia-card-content {
    position: relative;
    z-index: 1;
    margin-top: 64px;
}

/* Float idle — number balança levemente como peça flutuante */
@keyframes yearFloat {
    0%, 100% {
        transform: translateY(0);
        -webkit-text-stroke-color: rgba(184, 51, 234, 0.55);
    }
    50% {
        transform: translateY(-5px);
        -webkit-text-stroke-color: rgba(184, 51, 234, 0.75);
    }
}

/* HOVER: PREENCHE com gradient brand cinematic + glow + scale + tracking abre */
.historia-card:hover .historia-year {
    -webkit-text-stroke: 0;
    background: linear-gradient(165deg, #ffffff 0%, #f2c5ff 35%, #d68bff 65%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 32px rgba(184, 51, 234, 0.55));
    transform: translateY(-10px) scale(1.08);
    letter-spacing: -0.045em;
    animation: none; /* desliga float idle no hover pra hover ficar firme */
}

/* MAJORS: ano TAMBÉM outline-only no idle (mesmo comportamento dos normais),
   mas com outline mais grosso + cor brand mais vívida + size maior +
   filter glow já no idle pra denotar protagonismo sem preencher. */
.historia-card--major .historia-year {
    font-size: clamp(5.5rem, 11vw, 8rem);
    -webkit-text-stroke: 2.2px rgba(242, 197, 255, 0.85);
    filter: drop-shadow(0 4px 18px rgba(184, 51, 234, 0.32));
    animation: yearMajorFloat 5.5s ease-in-out infinite;
}
@keyframes yearMajorFloat {
    0%, 100% {
        transform: translateY(0);
        -webkit-text-stroke-color: rgba(242, 197, 255, 0.85);
        filter: drop-shadow(0 4px 18px rgba(184, 51, 234, 0.32));
    }
    50% {
        transform: translateY(-7px);
        -webkit-text-stroke-color: rgba(255, 255, 255, 1);
        filter: drop-shadow(0 8px 28px rgba(184, 51, 234, 0.55));
    }
}
/* Major hover usa o mesmo fill do hover normal, mas com scale e glow mais dramáticos */
.historia-card--major:hover .historia-year {
    transform: translateY(-14px) scale(1.10);
    filter: drop-shadow(0 16px 44px rgba(184, 51, 234, 0.78));
    letter-spacing: -0.04em;
}

/* Chips */
.historia-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
}
.historia-chip--solid {
    background: rgba(184, 51, 234, 0.14);
    border-color: rgba(184, 51, 234, 0.35);
    color: rgba(242, 197, 255, 0.95);
}
.historia-chip--gradient {
    background: linear-gradient(135deg, #481066 0%, #9500c8 50%, #b833ea 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(149, 0, 200, 0.28);
    animation: chipGradientSweep 6s ease-in-out infinite;
}
@keyframes chipGradientSweep {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 4px 12px rgba(149, 0, 200, 0.28);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 6px 20px rgba(149, 0, 200, 0.5), 0 0 0 1px rgba(184, 51, 234, 0.4);
    }
}

/* Texto */
.historia-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.018em;
    margin: 0 0 10px;
    color: #fff;
    text-transform: none;
}
.historia-card--left h3 { text-align: right; }
.historia-card--major h3 { font-size: 1.45rem; }
.historia-card p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
}
.historia-card--left p { text-align: right; }

/* Animação refinada: entrada vinda do lado correto */
.historia-card.animar-scroll { opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.historia-card--left.animar-scroll { transform: translateX(-30px); }
.historia-card--right.animar-scroll { transform: translateX(30px); }
.historia-card.animar-scroll.visivel { opacity: 1; transform: translateX(0); }

/* RESPONSIVE — colapsa pra timeline single-side em mobile */
@media (max-width: 760px) {
    .historia-axis {
        left: 26px;
        transform: none;
    }
    .historia-axis::before,
    .historia-axis::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .historia-card {
        width: 100%;
        padding: 22px 0;
        padding-left: 60px;
        justify-content: flex-start;
        margin: 0;
    }
    .historia-card--left,
    .historia-card--right {
        padding-right: 0;
        padding-left: 60px;
        margin-right: 0;
        margin-left: 0;
        justify-content: flex-start;
    }
    .historia-card--left .historia-marker,
    .historia-card--right .historia-marker {
        left: 26px;
        right: auto;
        transform: translateX(-50%);
    }
    .historia-card--left .historia-marker::before,
    .historia-card--right .historia-marker::before {
        right: auto;
        left: 100%;
        width: 22px;
        background: linear-gradient(90deg, rgba(184, 51, 234, 0.6), rgba(184, 51, 234, 0.1));
    }
    .historia-card--left .historia-card-head,
    .historia-card--left h3,
    .historia-card--left p {
        justify-content: flex-start;
        text-align: left;
    }
    .historia-card--left.animar-scroll,
    .historia-card--right.animar-scroll {
        transform: translateY(20px);
    }
    .historia-card--left.animar-scroll.visivel,
    .historia-card--right.animar-scroll.visivel {
        transform: translateY(0);
    }
    /* No mobile, hover shifts não fazem sentido (touch) — só border + box-shadow */
    .historia-card:hover .historia-card-content,
    .historia-card--left:hover .historia-card-content,
    .historia-card--right:hover .historia-card-content {
        transform: none;
    }
}

@media (max-width: 480px) {
    .secao-historia { padding: 64px 0 80px; }
    .historia-header { margin-bottom: 44px; }
    .historia-card-content { padding: 22px 22px 18px; }
    .historia-year {
        font-size: clamp(2.3rem, 11vw, 2.9rem);
        -webkit-text-stroke-width: 1.2px;
    }
    .historia-card--major .historia-year { font-size: clamp(2.6rem, 12vw, 3.3rem); }
    .historia-card h3 { font-size: 1.15rem; }
    .historia-card--major h3 { font-size: 1.28rem; }
    .historia-card p { font-size: 0.9rem; }
    .historia-chip { font-size: 0.6rem; letter-spacing: 0.14em; padding: 4px 10px; }
    .historia-card,
    .historia-card--left,
    .historia-card--right { padding-left: 52px; }
    .historia-card--left .historia-marker,
    .historia-card--right .historia-marker { left: 22px; }
    .historia-axis { left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .historia-card.animar-scroll { transform: none; }
    .historia-card:hover .historia-card-content,
    .historia-card:hover .historia-marker,
    .historia-card:hover .historia-year {
        transform: none;
    }
    .historia-year,
    .historia-card--major .historia-year,
    .historia-marker,
    .historia-card--major .historia-marker,
    .historia-chip--gradient {
        animation: none !important;
    }
}

/* =====================================================
   QUEM SOMOS — secao-manifesto (Missão · Visão · Valores)
   Formato editorial: chapters distintos para M/V + lista
   numerada romana para os 5 Valores.
   ===================================================== */

.secao-manifesto {
    position: relative;
    padding: 100px 0 110px;
    background: linear-gradient(180deg, #07010a 0%, #0c0316 50%, #07010a 100%);
    color: #fff;
    overflow: hidden;
}
.manifesto-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(149, 0, 200, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 88% 82%, rgba(72, 16, 102, 0.22) 0%, transparent 50%);
    pointer-events: none;
}
.secao-manifesto .container { position: relative; z-index: 1; }

.manifesto-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}
.manifesto-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 8px 0 18px;
    color: #fff;
}
.manifesto-header h2 em {
    font-style: normal;
    background: linear-gradient(95deg, #f2c5ff 0%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.manifesto-header p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 auto;
}

/* PAR Missão + Visão lado a lado */
.manifesto-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto 28px;
}

/* Bloco editorial individual (M ou V) */
.manifesto-block {
    position: relative;
    padding: 40px 36px 36px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015) 60%),
        rgba(10, 5, 16, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.manifesto-block:hover {
    border-color: rgba(184, 51, 234, 0.32);
    box-shadow: 0 22px 56px rgba(149, 0, 200, 0.14);
    transform: translateY(-3px);
}

/* Cabeçalho do bloco: número + label + ícone */
.manifesto-block-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(184, 51, 234, 0.18);
}
.manifesto-num {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(184, 51, 234, 0.9);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.manifesto-label {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    flex: 1;
}
.manifesto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(184, 51, 234, 0.10);
    border: 1px solid rgba(184, 51, 234, 0.28);
    color: rgba(242, 197, 255, 0.92);
}
.manifesto-icon .icon { width: 18px; height: 18px; }

/* Statement — peça editorial central */
.manifesto-statement {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0 0 22px;
    text-wrap: balance;
}
.manifesto-statement em {
    font-style: normal;
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 50%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.manifesto-support {
    font-family: var(--fonte-textos);
    font-size: 0.96rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Decoração no rodapé do bloco — específica por chapter */
.manifesto-decoration {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 0;
    height: 24px;
    opacity: 0.85;
}
/* Mission: base de coluna grega (3 pedras) — "fundação" */
.manifesto-decoration--anchor {
    justify-content: center;
    gap: 4px;
}
.anchor-base {
    width: 14px;
    height: 6px;
    background: linear-gradient(180deg, rgba(184, 51, 234, 0.6), rgba(184, 51, 234, 0.25));
    border-radius: 2px;
}
.anchor-pillar {
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, rgba(184, 51, 234, 0.8), rgba(184, 51, 234, 0.3));
    border-radius: 2px;
}
/* Vision: seta horizontal — "movimento, expansão" */
.manifesto-decoration--arrow {
    justify-content: center;
    gap: 0;
    width: 100%;
}
.arrow-line {
    flex: 1;
    max-width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(184, 51, 234, 0.55) 30%, rgba(184, 51, 234, 0.95) 100%);
    border-radius: 1px;
    animation: arrowGlow 3.5s ease-in-out infinite;
}
.arrow-head {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(184, 51, 234, 0.95);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    filter: drop-shadow(0 0 6px rgba(184, 51, 234, 0.6));
}
@keyframes arrowGlow {
    0%, 100% { opacity: 0.6; transform: translateX(0); }
    50%      { opacity: 1;   transform: translateX(3px); }
}

/* CHAPTER 03 — Valores (full-width abaixo do par) */
.manifesto-valores {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 40px 40px;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184, 51, 234, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) 60%),
        rgba(7, 1, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.manifesto-valores-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: end;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(184, 51, 234, 0.18);
}
.manifesto-valores-head > div {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.manifesto-valores-lead {
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    max-width: 56ch;
    margin: 0;
}

.valor-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.valor-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 28px;
    padding: 22px 0 22px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.4s ease, padding-left 0.4s ease;
    overflow: hidden;
}
.valor-item:last-child { border-bottom: none; }
.valor-item:hover {
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.06), transparent 60%);
    padding-left: 16px;
}

/* Roman numeral — peça gráfica */
.valor-num {
    font-family: var(--fonte-titulos);
    font-size: 1.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(184, 51, 234, 0.6);
    align-self: start;
    padding-top: 2px;
    transition: -webkit-text-stroke-color 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-variant-numeric: tabular-nums;
}
.valor-item:hover .valor-num {
    -webkit-text-stroke: 0;
    background: linear-gradient(165deg, #ffffff 0%, #f2c5ff 50%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(1.08);
    filter: drop-shadow(0 4px 14px rgba(184, 51, 234, 0.5));
}

.valor-corpo h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
    margin: 0 0 6px;
    color: #fff;
    text-transform: none;
}
.valor-corpo p {
    font-family: var(--fonte-textos);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.55;
    margin: 0;
    max-width: 62ch;
}

/* Rule decorativa que aparece no hover (efeito "linha de marcador") */
.valor-rule {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #b833ea, transparent);
    border-radius: 1px;
    transform: translateY(-50%);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.valor-item:hover .valor-rule {
    width: 24px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .manifesto-pair {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 24px;
    }
    .manifesto-block { padding: 32px 28px 28px; }
    .manifesto-valores { padding: 40px 28px 32px; }
    .manifesto-valores-head {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }
    .valor-item {
        grid-template-columns: 54px 1fr;
        gap: 20px;
        padding: 20px 0 20px 8px;
    }
    .valor-num { font-size: 1.5rem; }
}

@media (max-width: 560px) {
    .secao-manifesto { padding: 72px 0 80px; }
    .manifesto-header { margin-bottom: 44px; }
    .manifesto-block { padding: 28px 22px 24px; }
    .manifesto-block-head { gap: 10px; margin-bottom: 20px; padding-bottom: 14px; }
    .manifesto-label { letter-spacing: 0.22em; font-size: 0.66rem; }
    .manifesto-statement { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
    .manifesto-icon { width: 32px; height: 32px; }
    .manifesto-icon .icon { width: 16px; height: 16px; }
    .manifesto-valores { padding: 32px 22px 24px; }
    .valor-item {
        grid-template-columns: 42px 1fr;
        gap: 14px;
        padding: 18px 0;
    }
    .valor-num { font-size: 1.35rem; }
    .valor-corpo h3 { font-size: 1.08rem; }
    .valor-corpo p { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .arrow-line { animation: none; }
    .manifesto-block:hover,
    .valor-item:hover .valor-num {
        transform: none;
    }
}

/* =====================================================
   QUEM SOMOS — secao-arquitetura (Arquitetura nativa)
   Stack visualizado: 4 camadas + trilho com pulso de dados
   subindo do hardware aos apps.
   ===================================================== */

.secao-arquitetura {
    position: relative;
    padding: 96px 0 110px;
    background: linear-gradient(180deg, #faf7fc 0%, #f4eef9 60%, #faf7fc 100%);
    color: #1a0a26;
    overflow: hidden;
}
.arquitetura-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(149, 0, 200, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 14% 78%, rgba(184, 51, 234, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, rgba(149, 0, 200, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(45deg, rgba(149, 0, 200, 0.025) 1px, transparent 1px) 0 0 / 32px 32px;
    pointer-events: none;
}
.secao-arquitetura .container { position: relative; z-index: 1; }

.arquitetura-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}
.arquitetura-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #1a0a26;
    margin: 8px 0 0;
}
.arquitetura-header h2 em {
    font-style: normal;
    background: linear-gradient(95deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.arquitetura-header .eyebrow-light { color: rgba(106, 31, 140, 0.95); }

.arquitetura-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: center;
}

/* TEXTO SIDE */
.arquitetura-texto { display: flex; flex-direction: column; gap: 22px; }
.arquitetura-statement {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: #1a0a26;
    margin: 0;
    text-wrap: balance;
}
.arquitetura-support {
    font-family: var(--fonte-textos);
    font-size: 1rem;
    color: #5a4a6a;
    line-height: 1.6;
    margin: 0;
    max-width: 48ch;
}
/* Anchors — duas métricas chave */
.arquitetura-anchors {
    display: flex;
    gap: 36px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.arquitetura-anchor {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-left: 14px;
    position: relative;
}
.arquitetura-anchor::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #b833ea, #481066);
}
.arquitetura-anchor strong {
    font-family: var(--fonte-titulos);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(95deg, #9500c8 0%, #b833ea 60%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.arquitetura-anchor span {
    font-size: 0.86rem;
    line-height: 1.3;
    color: #6a5e74;
    max-width: 14ch;
}
.arquitetura-anchor em {
    font-style: normal;
    color: #1a0a26;
    font-weight: 600;
}

/* STACK VISUAL — 4 camadas + trilho lateral */
.arquitetura-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 36px;
}

/* Trilho lateral esquerdo — linha vertical + pulse subindo */
.stack-rail {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 14px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(184, 51, 234, 0.5),
        rgba(184, 51, 234, 0.25) 50%,
        rgba(184, 51, 234, 0.5));
    border-radius: 1px;
    overflow: hidden;
}
.stack-rail::before,
.stack-rail::after {
    content: "";
    position: absolute;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b833ea, #481066);
    box-shadow: 0 0 0 3px #faf7fc, 0 0 12px rgba(184, 51, 234, 0.45);
}
.stack-rail::before { top: -4px; }
.stack-rail::after  { bottom: -4px; }

/* Pulso de dados subindo pelo trilho (data flowing from hardware up to apps) */
.stack-rail-pulse {
    position: absolute;
    top: 100%;
    left: -2px;
    width: 6px;
    height: 28px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        rgba(184, 51, 234, 0) 0%,
        rgba(184, 51, 234, 0.55) 30%,
        #f2c5ff 70%,
        rgba(184, 51, 234, 0) 100%);
    box-shadow: 0 0 14px rgba(184, 51, 234, 0.85);
    animation: stackPulseUp 4.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes stackPulseUp {
    0%   { top: 100%; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: -10%;  opacity: 0; }
}

/* Layer — card horizontal individual (light theme) */
.stack-layer {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 14px;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid rgba(149, 0, 200, 0.10);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(149, 0, 200, 0.05), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition:
        border-color 0.4s ease,
        background 0.4s ease,
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease;
}
.stack-layer:hover {
    border-color: rgba(184, 51, 234, 0.45);
    background: linear-gradient(135deg, rgba(184, 51, 234, 0.04), #ffffff 60%);
    transform: translateX(4px);
    box-shadow: 0 16px 36px rgba(149, 0, 200, 0.14);
}

.stack-layer-tag {
    font-family: var(--fonte-titulos);
    font-size: 1.05rem;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(149, 0, 200, 0.7);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: center;
    transition: -webkit-text-stroke-color 0.4s ease;
}
.stack-layer:hover .stack-layer-tag {
    -webkit-text-stroke-color: #6a1f8c;
}

.stack-layer-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.stack-layer-name {
    font-family: var(--fonte-titulos);
    font-size: 1.05rem;
    font-weight: 500;
    color: #1a0a26;
    line-height: 1.2;
    letter-spacing: -0.014em;
}
.stack-layer-desc {
    font-family: var(--fonte-textos);
    font-size: 0.85rem;
    color: #6a5e74;
    line-height: 1.4;
}

/* Dot na ponta direita do layer */
.stack-layer-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(184, 51, 234, 0.45);
    box-shadow: 0 0 0 3px rgba(184, 51, 234, 0.08), 0 0 8px rgba(184, 51, 234, 0.35);
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.stack-layer:hover .stack-layer-dot {
    background: #9500c8;
    box-shadow: 0 0 0 4px rgba(184, 51, 234, 0.16), 0 0 14px rgba(184, 51, 234, 0.75);
    transform: scale(1.15);
}

/* Tints brand sutis por camada (mais saturado no Hardware, decrescendo até Apps) */
.stack-layer--hardware { background: linear-gradient(135deg, rgba(184, 51, 234, 0.06), #ffffff 65%); }
.stack-layer--firmware { background: linear-gradient(135deg, rgba(184, 51, 234, 0.045), #ffffff 65%); }
.stack-layer--platform { background: linear-gradient(135deg, rgba(184, 51, 234, 0.035), #ffffff 65%); }
.stack-layer--apps     { background: linear-gradient(135deg, rgba(184, 51, 234, 0.025), #ffffff 65%); }

/* Responsive */
@media (max-width: 920px) {
    .arquitetura-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .arquitetura-anchors { gap: 28px; }
    .arquitetura-anchor strong { font-size: 2rem; }
}

@media (max-width: 560px) {
    .secao-arquitetura { padding: 72px 0 80px; }
    .arquitetura-header { margin-bottom: 44px; }
    .arquitetura-anchors { flex-direction: column; gap: 18px; }
    .arquitetura-anchor strong { font-size: 1.85rem; }
    .arquitetura-stack { padding-left: 28px; }
    .stack-rail { left: 10px; }
    .stack-layer {
        grid-template-columns: 36px 1fr 12px;
        gap: 14px;
        padding: 16px 18px;
    }
    .stack-layer-name { font-size: 1rem; }
    .stack-layer-desc { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-rail-pulse { animation: none; opacity: 0.6; top: 50%; }
    .stack-layer:hover { transform: none; }
}

/* =====================================================
   QUEM SOMOS — secao-pactos-novo (Compromissos / Cláusulas)
   Formato: documento editorial com 3 cláusulas numeradas
   romanas + linha de assinatura por cláusula.
   ===================================================== */

.secao-pactos-novo {
    position: relative;
    padding: 96px 0 110px;
    background: linear-gradient(180deg, #07010a 0%, #0a0510 60%, #07010a 100%);
    color: #fff;
    overflow: hidden;
}
.pactos-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 86% 16%, rgba(149, 0, 200, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 12% 86%, rgba(72, 16, 102, 0.22) 0%, transparent 50%);
    pointer-events: none;
}
.secao-pactos-novo .container { position: relative; z-index: 1; }

.secao-pactos-novo .pactos-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.secao-pactos-novo .pactos-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
    margin: 0;
    text-align: center;
    text-wrap: balance;
}
.secao-pactos-novo .pactos-header h2 em {
    font-style: normal;
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 50%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.secao-pactos-novo .pactos-header p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
    text-align: center;
}

.pactos-doc {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1020px;
    margin: 0 auto;
}

/* Cláusula individual — formato documento (dark theme) */
.pacto-clausula {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr 64px;
    gap: 32px;
    align-items: start;
    padding: 36px 36px 32px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014) 60%),
        rgba(10, 5, 16, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.pacto-clausula:hover {
    border-color: rgba(184, 51, 234, 0.34);
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(149, 0, 200, 0.14);
}
.pacto-clausula::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(184, 51, 234, 0.55), rgba(184, 51, 234, 0.12));
    border-radius: 1px;
}

/* Numeral romano editorial */
.pacto-num {
    font-family: var(--fonte-titulos);
    font-size: clamp(3.6rem, 7vw, 5.2rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1.8px rgba(184, 51, 234, 0.6);
    align-self: start;
    padding-top: 4px;
    transition: -webkit-text-stroke-color 0.5s ease, color 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pacto-clausula:hover .pacto-num {
    -webkit-text-stroke: 0;
    background: linear-gradient(165deg, #ffffff 0%, #f2c5ff 50%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(1.04);
    filter: drop-shadow(0 6px 18px rgba(184, 51, 234, 0.5));
}

.pacto-corpo h3 {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.018em;
    text-transform: none;
    color: #fff;
    margin: 0 0 12px;
    text-wrap: balance;
}
.pacto-corpo p {
    font-family: var(--fonte-textos);
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 60ch;
}

/* Linha de assinatura — formato contrato */
.pacto-assinatura {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px dashed rgba(184, 51, 234, 0.22);
}
.pacto-assinatura-linha {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #b833ea, rgba(184, 51, 234, 0.25));
    border-radius: 1px;
}
.pacto-assinatura-label {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.78);
}

/* Selo / ícone — canto direito como "carimbo" */
.pacto-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(184, 51, 234, 0.08);
    border: 1px solid rgba(184, 51, 234, 0.28);
    color: rgba(242, 197, 255, 0.92);
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pacto-selo .icon { width: 24px; height: 24px; }
.pacto-clausula:hover .pacto-selo {
    background: linear-gradient(135deg, #481066, #9500c8);
    border-color: transparent;
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
    box-shadow: 0 12px 28px rgba(149, 0, 200, 0.4);
}

/* Cláusula de destaque (II) — mais peso visual */
.pacto-clausula--destaque {
    background:
        linear-gradient(135deg, rgba(149, 0, 200, 0.10), rgba(72, 16, 102, 0.04) 60%),
        rgba(10, 5, 16, 0.7);
    border-color: rgba(184, 51, 234, 0.32);
}
.pacto-clausula--destaque::before {
    width: 3px;
    background: linear-gradient(180deg, #b833ea, #481066);
}
.pacto-clausula--destaque .pacto-num {
    -webkit-text-stroke-color: rgba(242, 197, 255, 0.85);
}

/* Responsive */
@media (max-width: 780px) {
    .pacto-clausula {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        gap: 18px 22px;
        padding: 28px 24px 24px;
    }
    .pacto-selo {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        width: 44px;
        height: 44px;
    }
    .pacto-selo .icon { width: 20px; height: 20px; }
    .pacto-corpo {
        grid-row: 2;
        grid-column: 1 / -1;
    }
    .pacto-num { font-size: clamp(2.8rem, 12vw, 3.6rem); }
}

@media (max-width: 480px) {
    .secao-pactos-novo { padding: 72px 0 80px; }
    .pacto-clausula { padding: 24px 20px 20px; gap: 14px 16px; }
    .pacto-num { font-size: clamp(2.4rem, 14vw, 3rem); }
    .pacto-corpo h3 { font-size: 1.18rem; }
    .pacto-corpo p { font-size: 0.92rem; margin-bottom: 18px; }
    .pacto-assinatura-label { font-size: 0.62rem; letter-spacing: 0.14em; }
    .pacto-assinatura-linha { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .pacto-clausula:hover { transform: none; }
    .pacto-clausula:hover .pacto-num,
    .pacto-clausula:hover .pacto-selo { transform: none; }
}

/* =====================================================
   INDEX — RESPONSIVE POLISH (final pass)
   Cobre as seções novas: hero chrome, pipeline V2, bento V2,
   porque-row split-diff, tela-única, footer.
   ===================================================== */

/* ----- HERO RESPONSIVE — granular V2 ----- */

/* TABLET LARGE (1100px → chrome ainda com perspective, título compacta) */
@media (max-width: 1100px) {
    .hero-premium { padding: 150px 0 80px; }
    .hero-title { font-size: clamp(2.3rem, 4.8vw, 3.6rem); max-width: 26ch; }
    .hero-subtitle { max-width: 560px; font-size: 1.04rem; }
    .hero-actions { gap: 14px; }
    .chrome-window--hero { transform: perspective(1200px) rotateX(5deg); }
}

/* TABLET MEDIUM (960px → reduz perspective, ajusta dashboard) */
@media (max-width: 960px) {
    .hero-premium { padding: 130px 0 70px; }
    .hero-title { font-size: clamp(2.1rem, 5vw, 3.2rem); max-width: 24ch; }
    .hero-subtitle { font-size: 1rem; max-width: 520px; padding: 0 8px; }
    .chrome-window--hero {
        transform: perspective(1200px) rotateX(3deg);
        margin: 0 8px;
    }
    .chrome-window--hero:hover {
        transform: perspective(1200px) rotateX(0deg) translateY(-4px);
    }
    .chrome-window__live { top: 10px; right: 10px; padding: 4px 9px 4px 8px; }
    .chrome-window__live-label { font-size: 0.6rem; }
    /* Sombra do chrome reduz pra não vazar nos cantos */
    .chrome-window--hero {
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.48),
            0 0 60px rgba(149, 0, 200, 0.14),
            0 0 0 1px rgba(184, 51, 234, 0.16);
    }

    /* Header da seção porque — h2 reduz */
    .porque-header h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
    .porque-header { margin-bottom: 48px; }

    /* Footer grid — passa de 4-col para 2x2 antes de empilhar */
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr !important;
        gap: 36px !important;
    }
    .brand-col { grid-column: 1 / -1; }
}

/* TABLET MEDIUM porque-row split — empilha mais cedo (range 640-820 fica cramped em split) */
@media (max-width: 820px) {
    .porque-row__split { grid-template-columns: 1fr !important; gap: 14px; }
    .porque-col { min-height: 168px; }
    .porque-row { padding: 26px 26px 22px; }
    .porque-row__head h3 { font-size: 1.35rem; }
}

/* =====================================================
   MOBILE NAV — polish unificado
   Botão hamburger 44×44, drawer alinhado com container,
   itens com rhythm 4/8/16, sub-items indentados claro.
   ===================================================== */
@media (max-width: 1024px) {
    /* Hamburger: 44×44 (WCAG 2.5.5 AAA) + alinhado verticalmente */
    .btn-mobile-menu {
        width: 44px;
        height: 44px;
        padding: 10px;
        margin-right: -8px; /* visualmente alinha com a borda direita do container */
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: background 0.25s ease, border-color 0.25s ease;
    }
    .btn-mobile-menu:hover,
    .btn-mobile-menu[aria-expanded="true"] {
        background: rgba(184, 51, 234, 0.12);
        border-color: rgba(184, 51, 234, 0.35);
    }
    .btn-mobile-menu .icon {
        width: 22px;
        height: 22px;
        color: rgba(255, 255, 255, 0.92);
    }

    /* Drawer: usa max-width do container (em vez de 4%) */
    .nav-desktop {
        top: 100%; /* logo após o header (não fixed 80px) */
        padding: 14px 0 18px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav-desktop .nav-list {
        padding: 0 max(20px, calc((100vw - 1200px) / 2 + 20px));
        gap: 2px;
    }

    /* Nav-link primário: padding generoso, altura mínima 44px, divider sutil */
    .nav-link {
        width: 100%;
        padding: 14px 14px;
        font-size: 1.02rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transition: background 0.25s ease, color 0.25s ease;
    }
    .nav-link:hover,
    .nav-link.ativo {
        background: rgba(184, 51, 234, 0.08);
        color: #fff;
    }
    .nav-link.ativo {
        border-left: 2px solid var(--acento-soft);
        padding-left: 12px;
    }
    .nav-link.ativo::after {
        display: none; /* underline desktop não vale aqui */
    }
    /* Dropdown trigger no mobile: chevron rotaciona quando expandido */
    .nav-link--dropdown .nav-seta {
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        flex-shrink: 0;
    }
    .nav-link--dropdown[aria-expanded="true"] .nav-seta {
        transform: rotate(180deg);
    }

    /* Container do dropdown item: indentação + sub-menu visual */
    .nav-item-dropdown {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-bottom: 2px;
    }
    .nav-item-dropdown .nav-link {
        border-bottom: none;
    }
    .dropdown-menu {
        padding: 4px 0 8px 12px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        width: 100% !important;
        margin-left: 14px;
        border-left: 2px solid rgba(184, 51, 234, 0.18);
    }
    .dropdown-item {
        padding: 11px 14px !important;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.72) !important;
        border-radius: 6px;
        min-height: 40px;
        gap: 10px;
    }
    .dropdown-item:hover {
        color: #fff !important;
        background: rgba(184, 51, 234, 0.10) !important;
        padding-left: 16px !important;
    }
    .dropdown-item .icon {
        width: 16px;
        height: 16px;
        color: var(--acento-soft);
        flex-shrink: 0;
    }

    /* "Sou Afiliado" — mostra no mobile dentro do drawer como CTA destacado */
    .afiliado-dropdown {
        display: block !important;
        width: calc(100% - 2 * max(20px, calc((100vw - 1200px) / 2 + 20px)));
        margin: 14px max(20px, calc((100vw - 1200px) / 2 + 20px)) 0;
    }
    .btn-login-afiliado {
        width: 100%;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px !important;
        font-size: 0.98rem !important;
        background: linear-gradient(135deg, #481066 0%, #9500c8 100%) !important;
        border-color: transparent !important;
        color: #fff !important;
        font-weight: 500;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .btn-login-afiliado .icon {
        width: 18px;
        height: 18px;
    }
    /* Dropdown de afiliado no mobile: igual ao dropdown padrão */
    .afiliado-dropdown .dropdown-menu {
        margin-top: 8px;
        margin-left: 0;
    }
}

/* MOBILE (640px) — refino do drawer pra telas pequenas */
@media (max-width: 640px) {
    .nav-desktop .nav-list {
        padding: 0 18px;
    }
    .afiliado-dropdown {
        width: calc(100% - 36px);
        margin: 14px 18px 0;
    }
    .nav-link {
        font-size: 1rem;
        padding: 13px 12px;
    }
    .dropdown-item { font-size: 0.92rem; }
    .btn-mobile-menu { width: 42px; height: 42px; }
}

/* Scroll-lock quando menu mobile aberto (visual cleaner sem rolagem fantasma) */
@media (max-width: 1024px) {
    body.nav-mobile-open {
        overflow: hidden;
    }
}

/* TABLET SMALL (820px → CTAs full-width-ish, chrome quase flat) */
@media (max-width: 820px) {
    .hero-premium { padding: 120px 0 64px; }
    .hero-title { font-size: clamp(2rem, 6.5vw, 2.9rem); max-width: 22ch; }
    .hero-subtitle { font-size: 0.98rem; max-width: 480px; }
    .hero-actions { flex-wrap: wrap; justify-content: center; }
    .chrome-window--hero {
        transform: perspective(1200px) rotateX(2deg);
        max-width: 96%;
        margin: 0 auto;
    }
    .chrome-window__live { font-size: 0.58rem; }
}

/* MOBILE LARGE (640px → flat, single-col actions) */
@media (max-width: 640px) {
    /* Hero — flat, sem perspective */
    .chrome-window--hero {
        transform: none;
        margin: 0 6px;
        box-shadow:
            0 14px 32px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(184, 51, 234, 0.14);
    }
    .chrome-window--hero:hover {
        transform: translateY(-3px);
    }
    /* Chrome bar mais compacto */
    .chrome-window__bar { height: 28px; padding: 0 8px; }
    .chrome-window__dot { width: 8px; height: 8px; }
    .chrome-window__pill { display: none; }
    .chrome-window__live {
        top: 7px;
        right: 7px;
        padding: 3px 7px 3px 6px;
        font-size: 0.54rem;
    }
    .chrome-window__live-dot { width: 5px; height: 5px; }

    .hero-premium { padding: 100px 0 56px; }
    .hero-title { font-size: clamp(1.95rem, 8.5vw, 2.6rem); max-width: 100%; padding: 0 4px; }
    .hero-title br { display: none; } /* deixa text-wrap balance escolher */
    .hero-subtitle { font-size: 0.95rem; padding: 0 12px; }
    .hero-actions { gap: 10px; padding: 0 8px; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .badge-tech { font-size: 0.72rem; padding: 6px 12px; }

    /* Pipeline (modelo de parceria) — pulses verticais ao invés de L→R */
    @keyframes flowDataPulseVertical {
        0%   { top: 0; left: 50%; opacity: 0; transform: translateX(-50%) scale(0.6); }
        15%  { opacity: 1; transform: translateX(-50%) scale(1); }
        85%  { opacity: 1; transform: translateX(-50%) scale(1); }
        100% { top: 100%; left: 50%; opacity: 0; transform: translateX(-50%) scale(0.6); }
    }
    #quem-somos .flow-connection.visivel .data-pulse {
        animation-name: flowDataPulseVertical;
    }
    #quem-somos .connection-line {
        transform-origin: top center;
        transform: scaleY(0);
        transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #quem-somos .flow-connection.visivel .connection-line {
        transform: scaleY(1);
    }

    /* Por que ONE — porque-row split empilha vertical */
    .secao-porque-one { padding: 60px 0 70px; }
    .porque-header { margin-bottom: 36px; }
    .porque-header h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
    .porque-row { padding: 24px 22px 22px; }
    .porque-row__head { gap: 12px; margin-bottom: 18px; }
    .porque-row__head h3 { font-size: 1.25rem; }
    .porque-row__split { grid-template-columns: 1fr !important; gap: 12px; }
    .porque-col { min-height: 152px; padding: 18px; }
    .porque-vis { min-height: 56px; }
    .vis-block, .vis-step { font-size: 0.7rem; padding: 6px 10px; }
    .vis-step-line { width: 10px; }
    .vel-bar { max-width: 18px; }
    .porque-vis--velocity { min-height: 72px; }
    .porque-row__anchor strong { font-size: 1.3rem; }
    .porque-row__anchor span { font-size: 0.78rem; }

    /* Ecossistema bento — section padding */
    #solucoes.secao-bento { padding: 56px 0 64px; }
    .bento-header h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); }

    /* Tela única já tem 900px break — só reforço */
    .secao-tela-unica { padding: 60px 0 70px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
        margin-bottom: 40px !important;
    }
    .brand-col {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 12px;
    }
    .footer-logo { height: 56px; }
}

/* MOBILE (560px → tudo 1-col, tipografia compactada) */
@media (max-width: 560px) {
    .hero-premium { padding: 100px 0 48px; }
    .hero-title { font-size: clamp(1.85rem, 9vw, 2.4rem); }
    .hero-subtitle { font-size: 0.92rem; }
    .hero-actions { gap: 10px; }
    .hero-actions .btn { padding: 12px 18px; font-size: 0.92rem; }

    /* Footer single-col */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .footer-logo { height: 52px; }

    /* Header da página — container padding reduzido */
    .container { padding: 0 18px; }

    /* Eyebrows menores */
    .eyebrow-mini { font-size: 0.7rem; letter-spacing: 0.18em; }

    /* Porque — número 01/02/03 menor */
    .porque-row__num { font-size: 0.85rem; }
    .porque-row__head h3 { font-size: 1.15rem; }

    /* Bento header */
    .bento-header { max-width: 100%; padding: 0 4px; }

    /* Proof stats — reduzir gap */
    .proof-stats { gap: 24px !important; }
}

/* MOBILE PEQUENO (380px → últimas correções) */
@media (max-width: 380px) {
    .container { padding: 0 14px; }
    .hero-title { font-size: clamp(1.7rem, 10vw, 2.1rem); }
    .porque-row { padding: 20px 18px 18px; }
    .porque-col { padding: 16px; min-height: 138px; }
    .vis-block, .vis-step { font-size: 0.66rem; padding: 5px 8px; }
}

/* LANDSCAPE PHONE — evita corte vertical em hero */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .hero-premium { padding: 90px 0 40px; }
    .chrome-window--hero { display: none; }
    /* esconde mockup em landscape de phone — espaço apertado, hero pesado */
}

/* TOUCH DEVICES — desliga hovers que dependem de pointer fino */
@media (hover: none) {
    .bento-card:hover { transform: none; }
    .flow-node:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
    .porque-row:hover { transform: none; }
    .chrome-window--hero:hover { transform: inherit; }
    .bento-card--app:hover .mini-phone,
    .bento-card--feature:hover .cam-corner,
    .bento-card--cortex:hover .cortex-chip,
    .bento-card--bi:hover .spark-bar {
        transform: inherit;
        filter: none;
        border-color: inherit;
    }
}

/* =========================================================
   MODELO-NEGOCIO HERO — refinamento + faixa de termos inline
   Override de paddings/h1 (legado 2382, pente-fino 8303)
   ========================================================= */
.hero-negocio-dark {
    padding: clamp(120px, 14vw, 170px) 0 clamp(80px, 9vw, 110px);
    min-height: 78vh;
}

/* Overlay reformulado: denso à esquerda (texto), respira à direita (foto) */
.hero-negocio-dark .banner-overlay-dark {
    background: linear-gradient(95deg,
        rgba(7, 1, 10, 0.94) 0%,
        rgba(7, 1, 10, 0.78) 40%,
        rgba(7, 1, 10, 0.32) 75%,
        rgba(7, 1, 10, 0.05) 100%) !important;
}

/* Grão fino discreto pra dar matéria à seção */
.hero-negocio-grain {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 18% 22%, rgba(149, 0, 200, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 14% 88%, rgba(72, 16, 102, 0.16) 0%, transparent 55%);
    pointer-events: none;
    z-index: 3;
}

/* ---------- texto refinado ---------- */
.hero-negocio-dark .hero-text-blend {
    max-width: 640px;
}

.hero-negocio-dark .hero-text-blend h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    text-shadow: 0 2px 32px rgba(10, 5, 16, 0.45);
    margin-bottom: 22px;
    text-wrap: balance;
}

.hero-negocio-dark .hero-text-blend h1 br {
    display: block;
}

.hero-negocio-dark .hero-text-blend p {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    text-shadow: 0 1px 16px rgba(10, 5, 16, 0.5);
    max-width: 540px;
}

/* Gradient animado em "Nossa engenharia." */
.hero-negocio-dark .hero-text-blend h1 .text-gradient {
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 40%, #b833ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.hero-negocio-dark .hero-marker {
    margin-bottom: 22px;
}

.hero-negocio-dark .hero-actions {
    margin-top: 30px;
    justify-content: flex-start;
    gap: 18px;
}

.hero-negocio-dark .hero-cta-quiet {
    margin-top: 26px;
}

/* ---------- HERO TERMS STRIP — faixa horizontal de cláusulas ---------- */
.hero-terms-strip {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.hero-term {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-term:hover {
    transform: translateY(-2px);
}

.hero-term-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-term-mark .icon {
    width: 12px;
    height: 12px;
}

.hero-term-label {
    font-family: var(--fonte-textos);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    white-space: nowrap;
}

.hero-term--off .hero-term-mark {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.hero-term--off .hero-term-label {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.30);
    text-decoration-thickness: 1px;
}

.hero-term--on .hero-term-mark {
    background: linear-gradient(140deg, #b833ea, #481066);
    color: #fff;
    box-shadow: 0 4px 12px rgba(184, 51, 234, 0.40);
}

.hero-term--on {
    border-color: rgba(184, 51, 234, 0.32);
    background: rgba(184, 51, 234, 0.08);
}

.hero-term--on .hero-term-label {
    color: #f2c5ff;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .hero-negocio-dark .hero-text-blend h1 .text-gradient {
        animation: none;
    }
    .hero-term:hover {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .hero-negocio-dark .hero-text-blend h1 {
        font-size: clamp(2.2rem, 5.2vw, 3.4rem);
    }
}

@media (max-width: 768px) {
    .hero-negocio-dark { padding: 130px 0 70px; min-height: 0; }
    .hero-negocio-dark .banner-overlay-dark {
        background: linear-gradient(to bottom,
            rgba(7, 1, 10, 0.78) 0%,
            rgba(7, 1, 10, 0.88) 50%,
            rgba(7, 1, 10, 0.95) 100%) !important;
    }

    .hero-negocio-dark .hero-text-blend { text-align: center; margin: 0 auto; }
    .hero-negocio-dark .hero-text-blend h1 {
        font-size: clamp(2rem, 7.5vw, 2.8rem);
        margin-left: auto;
        margin-right: auto;
    }
    .hero-negocio-dark .hero-text-blend p {
        font-size: 1rem;
        padding: 0 4px;
        margin: 0 auto;
    }
    .hero-negocio-dark .hero-marker { justify-content: center; }
    .hero-negocio-dark .hero-actions { justify-content: center !important; }
    .hero-negocio-dark .hero-cta-quiet { margin-left: auto; margin-right: auto; }

    .hero-terms-strip { justify-content: center; gap: 8px; margin-top: 24px; }
    .hero-term { padding: 6px 12px 6px 6px; }
    .hero-term-mark { width: 20px; height: 20px; }
    .hero-term-mark .icon { width: 11px; height: 11px; }
    .hero-term-label { font-size: 0.76rem; }
}

/* =========================================================
   CLÁUSULAS COM SELOS — institucional autoral
   5 cláusulas contratuais com selo wax/heráldico custom,
   perfuração brand entre cláusulas. Light, papel envelhecido.
   ========================================================= */
.secao-clausulas-selos {
    position: relative;
    padding: clamp(80px, 9vw, 130px) 0;
    background:
        linear-gradient(180deg, #f8f3fb 0%, #fdfafe 50%, #f8f3fb 100%);
    color: #1a0a26;
    overflow: hidden;
}

/* Cancela bg forçado de .secao-video-passos (legado 8150) */
body .secao-clausulas-selos {
    background:
        linear-gradient(180deg, #f8f3fb 0%, #fdfafe 50%, #f8f3fb 100%) !important;
}

/* Textura sutil de papel — dot grid + radial brand glow */
.clausulas-paper {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(149, 0, 200, 0.06) 1px, transparent 1px),
        radial-gradient(ellipse at 15% 25%, rgba(184, 51, 234, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(72, 16, 102, 0.06) 0%, transparent 50%);
    background-size: 32px 32px, auto, auto;
    background-position: center, center, center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.secao-clausulas-selos > .container {
    position: relative;
    z-index: 1;
}

/* ---------- HEADER ---------- */
.clausulas-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.clausulas-stamp {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.clausulas-stamp-line {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(149, 0, 200, 0.55));
}

.clausulas-stamp:has(.clausulas-stamp-label) .clausulas-stamp-line:last-child {
    background: linear-gradient(90deg, rgba(149, 0, 200, 0.55), transparent);
}

.clausulas-stamp-label {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #6a1f8c;
    white-space: nowrap;
}

.clausulas-header h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.06;
    color: #1a0a26;
    margin: 0 0 18px;
    letter-spacing: -0.022em;
    text-wrap: balance;
    font-weight: 500;
}

.clausulas-header h2 .text-gradient {
    background: linear-gradient(95deg, #9500c8 0%, #481066 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.clausulas-header p {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.6;
    color: #5a4a6a;
    margin: 0 auto;
    max-width: 620px;
}

/* ---------- STACK DE CLÁUSULAS ---------- */
.clausulas-stack {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1060px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---------- CLÁUSULA — selo + texto ---------- */
.clausula {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(32px, 4vw, 48px) 8px;
    position: relative;
}

/* ---------- SELO HERÁLDICO — wax stamp aesthetic ---------- */
.selo-emblema {
    position: relative;
    width: 144px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* tilt sutil baseado em data-tilt (-3..3) */
.clausula[data-tilt="-2"] .selo-emblema { transform: rotate(-2deg); }
.clausula[data-tilt="-1.5"] .selo-emblema { transform: rotate(-1.5deg); }
.clausula[data-tilt="-1"] .selo-emblema { transform: rotate(-1deg); }
.clausula[data-tilt="1"] .selo-emblema { transform: rotate(1deg); }
.clausula[data-tilt="1.5"] .selo-emblema { transform: rotate(1.5deg); }
.clausula[data-tilt="2"] .selo-emblema { transform: rotate(2deg); }

.clausula:hover .selo-emblema {
    transform: rotate(0deg) scale(1.04);
}

/* Shadow stamp atrás — efeito carimbo */
.selo-emblema::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 51, 234, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.selo-emblema::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 35%);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: overlay;
}

/* anéis */
.selo-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.selo-ring--outer {
    inset: 0;
    border: 2px solid rgba(149, 0, 200, 0.55);
    background:
        radial-gradient(circle, rgba(184, 51, 234, 0.08) 0%, rgba(184, 51, 234, 0.02) 70%, rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 0 0 1px rgba(149, 0, 200, 0.15),
        0 14px 32px -10px rgba(72, 16, 102, 0.22);
}

.selo-ring--inner {
    inset: 12px;
    border: 1px dashed rgba(149, 0, 200, 0.40);
}

/* corpo central */
.selo-corpo {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.selo-icone {
    width: 28px;
    height: 28px;
    color: #6a1f8c;
    margin-bottom: 2px;
}

/* texto curvado no topo do selo (simulado com tracking + posição absoluta) */
.selo-arco-top {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--fonte-textos);
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(74, 31, 122, 0.7);
    white-space: nowrap;
    text-transform: uppercase;
}

.selo-code {
    font-family: var(--fonte-textos);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #481066;
    line-height: 1;
    margin-top: 2px;
}

.selo-cat {
    font-family: var(--fonte-textos);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(74, 31, 122, 0.62);
    line-height: 1;
    padding-top: 4px;
    border-top: 1px solid rgba(149, 0, 200, 0.30);
    margin-top: 4px;
    min-width: 64px;
}

/* ---------- CORPO DA CLÁUSULA ---------- */
.clausula-corpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clausula-eyebrow {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9500c8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.clausula-eyebrow::before {
    content: "§";
    font-family: var(--fonte-titulos);
    font-size: 1rem;
    font-weight: 700;
    color: #b833ea;
    letter-spacing: 0;
    line-height: 0.8;
}

.clausula-titulo {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.35rem, 2.3vw, 1.75rem);
    line-height: 1.14;
    color: #1a0a26;
    margin: 0;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}

.clausula-body {
    font-family: var(--fonte-textos);
    font-size: clamp(0.96rem, 1.18vw, 1.04rem);
    line-height: 1.62;
    color: #5a4a6a;
    margin: 0;
    max-width: 56ch;
    text-wrap: pretty;
}

/* ---------- RUBRICA — linha de assinatura + compromisso ---------- */
.clausula-rubrica {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(149, 0, 200, 0.18);
    max-width: 540px;
}

.rubrica-traco {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.6) 0%, rgba(184, 51, 234, 0.15) 100%);
    flex-shrink: 0;
}

.rubrica-label {
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6a1f8c;
}

/* ---------- PERFURAÇÃO entre cláusulas — tear/dashed line ---------- */
.clausula-perfuracao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 8px;
    margin: 0 auto;
    max-width: 760px;
    list-style: none;
}

.perfuracao-traco {
    flex: 1;
    height: 1px;
    background-image: linear-gradient(to right,
        rgba(149, 0, 200, 0.35) 0%,
        rgba(149, 0, 200, 0.35) 50%,
        transparent 50%,
        transparent 100%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
}

.perfuracao-marca {
    font-family: var(--fonte-titulos);
    font-weight: 400;
    font-size: 0.9rem;
    color: rgba(149, 0, 200, 0.55);
    line-height: 1;
    user-select: none;
}

/* ---------- FOOTER — firma do documento ---------- */
.clausulas-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 1060px;
    margin: 36px auto 0;
}

.clausulas-foot-traco {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(149, 0, 200, 0.35) 50%, transparent 100%);
}

.clausulas-foot-firma {
    font-family: var(--fonte-textos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6a1f8c;
    white-space: nowrap;
}

/* ---------- META BAR — "documento" institucional ---------- */
.spec-sheet-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto 14px;
    padding: 0 8px;
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(74, 58, 90, 0.55);
}

.spec-meta-tag { white-space: nowrap; }

.spec-meta-divider {
    flex: 0 0 32px;
    height: 1px;
    background: rgba(149, 0, 200, 0.30);
}

/* ---------- SPEC SHEET — lista de cláusulas ---------- */
.spec-sheet {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1080px;
    border-top: 1px solid rgba(149, 0, 200, 0.18);
    border-bottom: 1px solid rgba(149, 0, 200, 0.18);
}

.spec-row {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 200px;
    align-items: start;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(24px, 3vw, 36px) clamp(8px, 1.5vw, 18px);
    border-top: 1px solid rgba(149, 0, 200, 0.10);
    transition: background 0.35s ease;
}

.spec-row:first-child { border-top: 0; }

.spec-row::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.4s ease;
}

.spec-row:hover {
    background: rgba(184, 51, 234, 0.025);
}

.spec-row:hover::after {
    background: linear-gradient(180deg, transparent 0%, #b833ea 30%, #b833ea 70%, transparent 100%);
}

/* ---------- CODE column ---------- */
.spec-code {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.spec-code-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid #b833ea;
    background: transparent;
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: background 0.35s ease, transform 0.35s ease;
}

.spec-row:hover .spec-code-mark {
    background: #b833ea;
    transform: rotate(45deg) scale(1.15);
}

.spec-code-num {
    font-family: var(--fonte-textos);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #6a1f8c;
    white-space: nowrap;
}

.spec-code-cat {
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(74, 58, 90, 0.60);
    padding-left: 10px;
    border-left: 1px solid rgba(149, 0, 200, 0.25);
    white-space: nowrap;
}

/* ---------- CONTENT column ---------- */
.spec-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spec-title {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.18;
    color: #1a0a26;
    margin: 0;
    letter-spacing: -0.018em;
    font-weight: 500;
    text-wrap: balance;
}

.spec-body {
    font-family: var(--fonte-textos);
    font-size: clamp(0.95rem, 1.15vw, 1.02rem);
    line-height: 1.55;
    color: #5a4a6a;
    margin: 0;
    max-width: 58ch;
    text-wrap: pretty;
}

/* ---------- META column ---------- */
.spec-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.spec-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    background: rgba(184, 51, 234, 0.10);
    border: 1px solid rgba(184, 51, 234, 0.32);
    border-radius: 100px;
    color: #6a1f8c;
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.35s ease;
}

.spec-status .icon {
    width: 12px;
    height: 12px;
}

.spec-row:hover .spec-status {
    background: rgba(184, 51, 234, 0.18);
}

.spec-detail {
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(74, 58, 90, 0.55);
    text-align: right;
}

/* ---------- FOOTER — "assinatura" do documento ---------- */
.spec-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 1080px;
    margin: 28px auto 0;
}

.spec-foot-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(149, 0, 200, 0.30) 50%, transparent 100%);
}

.spec-foot-label {
    font-family: var(--fonte-textos);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(74, 58, 90, 0.55);
    white-space: nowrap;
}

/* ---------- LEGACY: keep manifesto classes unused but defined to be tree-shake safe ---------- */
/* (intentionally removed — manifesto-* classes no longer present in HTML) */
/* ---------- MANIFESTO PAGES — typographic editorial pillars ---------- */
.manifesto-stack {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.manifesto-page {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    --manifesto-text-align: left;
    --manifesto-align-items: flex-start;
    --manifesto-offset: 0;
}

.manifesto-page:first-child { padding-top: clamp(40px, 5vw, 64px); }
.manifesto-page:last-child { border-bottom: 0; }

.manifesto-page[data-align="right"] {
    --manifesto-text-align: right;
    --manifesto-align-items: flex-end;
    --manifesto-offset: 60px;
}

/* Conteúdo flui no eixo de alinhamento da página */
.manifesto-page > * {
    text-align: var(--manifesto-text-align);
}

/* ---------- KICKER — linha brand + label discreto ---------- */
.manifesto-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    opacity: 0.92;
}

.manifesto-page[data-align="right"] .manifesto-kicker {
    flex-direction: row;
}

.manifesto-kicker-line {
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.9) 0%, rgba(184, 51, 234, 0.25) 100%);
    flex-shrink: 0;
}

.manifesto-page[data-align="right"] .manifesto-kicker-line {
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.25) 0%, rgba(184, 51, 234, 0.9) 100%);
}

.manifesto-kicker-label {
    font-family: var(--fonte-textos);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

/* ---------- HEADLINE — tipografia editorial gigante ---------- */
.manifesto-headline {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    color: #fff;
    margin: 0 0 28px;
    max-width: 18ch;
    text-wrap: balance;
    font-weight: 500;
}

.manifesto-page[data-align="right"] .manifesto-headline {
    margin-left: auto;
}

.manifesto-headline .text-gradient {
    background: linear-gradient(95deg, #f2c5ff 0%, #d68bff 40%, #b833ea 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 200% 100%;
    animation: heroGradientShift 8s ease-in-out infinite;
}

/* ---------- BODY — paragraph com dropcap discreto ---------- */
.manifesto-body {
    font-family: var(--fonte-textos);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 32px;
    max-width: 54ch;
    text-wrap: pretty;
}

.manifesto-page[data-align="right"] .manifesto-body {
    margin-left: auto;
}

/* dropcap: primeira letra grande, brand, ascendendo */
.manifesto-dropcap {
    font-family: var(--fonte-titulos);
    font-size: 3.4em;
    line-height: 0.86;
    float: left;
    margin: 6px 12px -4px -2px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(184, 51, 234, 0.55);
    background: linear-gradient(180deg, rgba(242, 197, 255, 0.4) 0%, rgba(184, 51, 234, 0.15) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 700;
    user-select: none;
}

/* ---------- PROMISE — selo discreto com seta brand ---------- */
.manifesto-promise {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 8px;
    border-top: 1px solid rgba(184, 51, 234, 0.22);
    font-family: var(--fonte-textos);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(242, 197, 255, 0.92);
    letter-spacing: 0.01em;
    width: fit-content;
}

.manifesto-page[data-align="right"] .manifesto-promise {
    margin-left: auto;
}

.manifesto-promise-arrow {
    font-family: var(--fonte-titulos);
    font-size: 1.2rem;
    color: #b833ea;
    line-height: 1;
    transition: transform 0.3s ease;
}

.manifesto-page:hover .manifesto-promise-arrow {
    transform: translateX(4px);
}

.manifesto-page[data-align="right"]:hover .manifesto-promise-arrow {
    transform: translateX(-4px);
}

/* "selo" decorativo lateral exclusivo do manifesto — um quadrado outline brand */
.manifesto-page::before {
    content: "";
    position: absolute;
    top: clamp(56px, 7vw, 96px);
    width: 12px;
    height: 12px;
    border: 1px solid rgba(184, 51, 234, 0.4);
    background: rgba(184, 51, 234, 0.08);
    transform: rotate(45deg);
    transition: transform 0.5s ease, background 0.5s ease;
}

.manifesto-page[data-align="left"]::before {
    left: 0;
}

.manifesto-page[data-align="right"]::before {
    right: 0;
}

.manifesto-page:hover::before {
    transform: rotate(45deg) scale(1.4);
    background: rgba(184, 51, 234, 0.28);
}

/* ---------- FOUNDER QUOTE — video + pull-quote ---------- */
.pilares-founder {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    max-width: 1040px;
    margin: clamp(72px, 9vw, 110px) auto 0;
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.founder-video {
    position: relative;
}

.founder-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(184, 51, 234, 0.20);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(184, 51, 234, 0.05) inset;
}

.founder-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.founder-quote {
    margin: 0;
    padding: 0;
    position: relative;
}

.founder-mark {
    font-family: var(--fonte-titulos);
    font-size: clamp(4rem, 7vw, 6rem);
    line-height: 0.4;
    color: rgba(184, 51, 234, 0.32);
    display: block;
    margin-bottom: -16px;
    user-select: none;
    pointer-events: none;
}

.founder-text {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.18;
    color: #fff;
    margin: 0 0 22px;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.founder-cite {
    display: flex;
    align-items: center;
    gap: 14px;
    font-style: normal;
    font-family: var(--fonte-textos);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.founder-cite-line {
    height: 1px;
    width: 36px;
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.8), rgba(184, 51, 234, 0.15));
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .selo-emblema,
    .clausula:hover .selo-emblema {
        transition: none;
        transform: none;
    }
}

/* ---------- TABLET ---------- */
@media (max-width: 820px) {
    .clausula {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 22px;
        padding: 32px 4px;
    }
    .selo-emblema { width: 116px; height: 116px; }
    .selo-corpo { width: 80px; height: 80px; }
    .selo-icone { width: 22px; height: 22px; }
    .selo-code { font-size: 0.78rem; }
    .selo-cat { font-size: 0.54rem; }
    .selo-arco-top { font-size: 0.38rem; }
    .clausula-titulo { font-size: 1.3rem; }
    .clausula-body { font-size: 0.98rem; max-width: none; }
}

/* ---------- MOBILE — selo vai pro topo, texto embaixo ---------- */
@media (max-width: 600px) {
    .secao-clausulas-selos { padding: 70px 0 60px; }
    .clausulas-header { margin-bottom: 36px; }

    .clausula {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 4px;
        text-align: center;
    }
    .selo-emblema {
        margin-left: auto;
        margin-right: auto;
    }
    .clausula-corpo {
        align-items: center;
    }
    .clausula-body { margin-left: auto; margin-right: auto; }
    .clausula-rubrica {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .clausula-titulo { font-size: 1.18rem; }
    .clausula-body { font-size: 0.94rem; }
    .clausula-eyebrow { font-size: 0.66rem; }
    .rubrica-label { font-size: 0.66rem; letter-spacing: 0.12em; }

    .clausula-perfuracao { max-width: 380px; }
    .perfuracao-traco { background-size: 6px 1px; }

    .clausulas-stamp { gap: 10px; }
    .clausulas-stamp-line { width: 22px; }
    .clausulas-stamp-label { font-size: 0.6rem; letter-spacing: 0.24em; }
    .clausulas-foot-firma { font-size: 0.6rem; letter-spacing: 0.22em; }
}

/* =========================================
   PILARES PALCO — modelo-de-negocio.html
   Stage tabbed: 1 pilar por vez no palco
   com visual SVG custom por pilar
   ========================================= */

.secao-pilares-palco {
    position: relative;
    background:
        linear-gradient(180deg, #ffffff 0%, #faf6fd 60%, #ffffff 100%);
    padding: 110px 0 130px;
    overflow: hidden;
}

.secao-pilares-palco::before,
.secao-pilares-palco::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.secao-pilares-palco::before {
    width: 480px; height: 480px;
    top: -120px; right: -120px;
    background: radial-gradient(circle, rgba(184, 51, 234, 0.10), transparent 70%);
}
.secao-pilares-palco::after {
    width: 520px; height: 520px;
    bottom: -180px; left: -160px;
    background: radial-gradient(circle, rgba(149, 0, 200, 0.08), transparent 70%);
}

.palco-container { position: relative; z-index: 1; }

/* HEADER */
.palco-topo {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.palco-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6a1f8c;
    margin-bottom: 20px;
}

.palco-eyebrow-mark {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(149, 0, 200, 0), #9500c8);
    display: inline-block;
}

.palco-h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #1a0a26;
    margin: 0 0 18px;
    font-weight: 700;
}

.palco-h2 em {
    font-style: normal;
    background: linear-gradient(165deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.palco-sub {
    color: #5a4a6a;
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 0;
}

/* APP (tabs + stage) */
.palco-app {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(149, 0, 200, 0.10);
    border-radius: 18px;
    box-shadow:
        0 30px 60px rgba(72, 16, 102, 0.08),
        0 4px 14px rgba(149, 0, 200, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

/* TABS */
.palco-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-bottom: 1px solid rgba(149, 0, 200, 0.10);
    background:
        linear-gradient(180deg, rgba(149, 0, 200, 0.02), rgba(149, 0, 200, 0));
}

.palco-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 22px 18px 20px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background .25s ease, color .25s ease;
    color: #5a4a6a;
    font-family: inherit;
    border-right: 1px solid rgba(149, 0, 200, 0.08);
    overflow: hidden;
}

.palco-tab:last-child { border-right: none; }

.palco-tab:hover {
    background: rgba(149, 0, 200, 0.03);
    color: #1a0a26;
}

.palco-tab:focus-visible {
    outline: 2px solid #b833ea;
    outline-offset: -2px;
}

.tab-roman {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(149, 0, 200, 0.35);
    letter-spacing: 0.02em;
    transition: color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

.tab-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    color: inherit;
}

.tab-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.palco-tab.is-active {
    background: linear-gradient(180deg, rgba(149, 0, 200, 0.06), rgba(149, 0, 200, 0));
    color: #1a0a26;
}

.palco-tab.is-active .tab-roman {
    color: #9500c8;
    transform: translateY(-1px);
}

.palco-tab.is-active .tab-progress {
    transform: scaleX(1);
}

/* STAGE (painels) */
.palco-stage {
    position: relative;
    background:
        radial-gradient(circle at 90% -10%, rgba(184, 51, 234, 0.06), transparent 50%);
}

.palco-painel {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 50px;
    padding: 50px 56px 56px;
    align-items: center;
    animation: painelFadeIn .45s cubic-bezier(.2,.7,.2,1) both;
}

.palco-painel:not(.is-active) { display: none; }

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

/* PAINEL — conteúdo (esquerda) */
.painel-conteudo {
    max-width: 520px;
}

.painel-marker {
    display: inline-block;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6a1f8c;
    background: rgba(149, 0, 200, 0.06);
    border: 1px solid rgba(149, 0, 200, 0.20);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
    font-weight: 600;
}

.painel-conteudo h3 {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #1a0a26;
    margin: 0 0 14px;
    font-weight: 700;
}

.painel-lead {
    color: #4a3a5e;
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 0 0 22px;
}

.painel-pontos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.painel-pontos li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #1a0a26;
    font-size: 0.96rem;
    line-height: 1.45;
    padding-left: 0;
}

.ponto-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ffffff 0%, #ffffff 30%, transparent 32%),
        linear-gradient(135deg, #9500c8, #6a1f8c);
    box-shadow: 0 0 0 1px rgba(149, 0, 200, 0.25), 0 2px 6px rgba(149, 0, 200, 0.18);
    position: relative;
}

/* Vídeo embed no pilar V */
.painel-video {
    margin-top: 26px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(149, 0, 200, 0.14);
    box-shadow: 0 14px 32px rgba(72, 16, 102, 0.10);
}
.painel-video .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #07010a;
}
.painel-video .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.painel-video-cap {
    font-size: 0.86rem;
    color: #5a4a6a;
    margin: 12px 0 0;
    line-height: 1.4;
}
.painel-video-cap span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9500c8;
    margin-top: 4px;
    font-weight: 600;
}

/* PAINEL — visual (direita) */
.painel-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 30px;
    background:
        linear-gradient(160deg, #fbf6ff 0%, #ffffff 100%);
    border-radius: 14px;
    border: 1px solid rgba(149, 0, 200, 0.08);
    min-height: 260px;
    justify-content: center;
}

.painel-visual .viz {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}

.viz-caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a7a9a;
    text-align: center;
}

/* SVG anim: stack pulse */
@keyframes vizStackPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.4); opacity: 1; }
}
.viz-stack-pulse circle {
    animation: vizStackPulse 2.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.viz-stack-pulse circle:nth-child(2) { animation-delay: .4s; }
.viz-stack-pulse circle:nth-child(3) { animation-delay: .8s; }

/* SVG anim: link pulse (pilar III) */
@keyframes vizLinkPulse {
    0%   { transform: translateX(0);   opacity: 1; }
    100% { transform: translateX(160px); opacity: 0; }
}
.viz-link-pulse {
    animation: vizLinkPulse 2s ease-in-out infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .palco-painel,
    .viz-stack-pulse circle,
    .viz-link-pulse,
    .tab-progress {
        animation: none !important;
        transition: none !important;
    }
}

/* RESPONSIVO */
@media (max-width: 980px) {
    .palco-painel {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 36px 32px 40px;
    }
    .painel-visual { order: -1; min-height: 200px; padding: 22px; }
}

@media (max-width: 760px) {
    .secao-pilares-palco { padding: 80px 0 90px; }
    .palco-topo { margin-bottom: 40px; }
    .palco-h2 { font-size: 1.9rem; }
    .palco-sub { font-size: 0.95rem; }

    .palco-tabs {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .palco-tab {
        scroll-snap-align: start;
        padding: 16px 14px 14px;
    }
    .tab-roman { font-size: 1.35rem; }
    .tab-name { font-size: 0.78rem; }

    .palco-painel {
        padding: 26px 22px 30px;
        gap: 24px;
    }
    .painel-conteudo h3 { font-size: 1.4rem; }
    .painel-lead { font-size: 0.96rem; }
}

/* Legacy compatibility — keep variables for any leftover */
.pilares-spec {
    position: relative;
    --spec-ink: #1a0a26;
    --spec-body: #4a3a5e;
    --spec-muted: #8a7a9a;
    --spec-brand: #6a1f8c;
    --spec-brand-strong: #481066;
    --spec-grid: rgba(149, 0, 200, 0.08);
    --spec-line: rgba(149, 0, 200, 0.22);
    font-family: 'Inter', sans-serif;
}

/* ───── HEADER (estilo título de documento técnico) ───── */
.spec-doc-header {
    margin-bottom: 28px;
    text-align: left;
}

.spec-doc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--spec-brand);
}

.spec-doc-id {
    background: rgba(149, 0, 200, 0.08);
    border: 1px solid rgba(149, 0, 200, 0.22);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.08em;
    color: var(--spec-brand-strong);
}

.spec-doc-divider {
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, rgba(149, 0, 200, 0.45), rgba(149, 0, 200, 0));
}

.spec-doc-label {
    color: rgba(106, 31, 140, 0.85);
}

.spec-doc-title {
    font-family: var(--fonte-titulos);
    font-size: 2.4rem;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--spec-ink);
    margin: 0 0 14px;
    font-weight: 700;
}

.spec-doc-title em {
    font-style: normal;
    background: linear-gradient(165deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.spec-doc-sub {
    color: var(--spec-body);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 52ch;
}

/* Hairline + ticks de régua (estilo escala técnica) */
.spec-doc-rule {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.spec-doc-rule .rule-line {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(149, 0, 200, 0) 0%,
        rgba(149, 0, 200, 0.35) 10%,
        rgba(149, 0, 200, 0.35) 90%,
        rgba(149, 0, 200, 0) 100%);
}

.spec-doc-rule .rule-marks {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 8%;
}

.spec-doc-rule .rule-marks i {
    display: block;
    width: 1px;
    height: 5px;
    background: rgba(149, 0, 200, 0.45);
}

.spec-doc-rule .rule-marks i:nth-child(odd) {
    height: 8px;
}

/* ───── CLAIMS LIST (lista de pilares = cláusulas técnicas) ───── */
.spec-claims {
    list-style: none;
    margin: 0;
    padding: 32px 24px 30px 24px;
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(149, 0, 200, 0.10);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Blueprint dot grid (sutil, atrás) */
.spec-claims-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--spec-grid) 1px, transparent 1.4px);
    background-size: 16px 16px;
    background-position: 0 0;
    opacity: 0.55;
    pointer-events: none;
    border-radius: 6px;
    z-index: 0;
}

/* Corner brackets (cantos do documento técnico) */
.spec-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(149, 0, 200, 0.45);
    pointer-events: none;
    z-index: 2;
}
.spec-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.spec-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.spec-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.spec-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Trilho dashed vertical conectando os badges */
.spec-trilho {
    position: absolute;
    left: 51px;
    top: 60px;
    bottom: 60px;
    width: 0;
    border-left: 1.4px dashed rgba(149, 0, 200, 0.32);
    z-index: 1;
}

/* Cada cláusula */
.spec-claim {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: flex-start;
    z-index: 2;
}

/* Badge hexagonal sólido */
.spec-claim-badge {
    position: relative;
    width: 54px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spec-hex {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #9500c8 0%, #6a1f8c 70%, #481066 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow:
        0 6px 14px rgba(72, 16, 102, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                filter .35s ease,
                background .35s ease;
}

.spec-hex::before {
    content: "";
    position: absolute;
    inset: 3px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}

.spec-roman {
    position: relative;
    font-family: 'Playfair Display', 'Georgia', serif;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.04em;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* Card da cláusula */
.spec-claim-card {
    position: relative;
    padding: 4px 0 4px 14px;
    border-left: 1px solid rgba(149, 0, 200, 0.16);
    transition: border-color .35s ease, transform .35s ease;
}

.spec-claim-card::before {
    /* leader line dashed do badge ao card */
    content: "";
    position: absolute;
    left: -18px;
    top: 22px;
    width: 16px;
    border-top: 1.2px dashed rgba(149, 0, 200, 0.45);
}

/* Meta row: tag entre colchetes + ref técnica */
.spec-claim-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.spec-claim-tag {
    color: var(--spec-brand-strong);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.spec-claim-ref {
    color: rgba(149, 0, 200, 0.55);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    padding-left: 14px;
}

.spec-claim-ref::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(149, 0, 200, 0.45);
}

.spec-claim-card h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.18rem;
    line-height: 1.25;
    color: var(--spec-ink);
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.spec-claim-card p {
    color: var(--spec-body);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
}

/* HOVER state */
.spec-claim:hover .spec-hex,
.spec-claim:focus-within .spec-hex {
    transform: scale(1.08);
    filter: drop-shadow(0 8px 20px rgba(149, 0, 200, 0.45));
    background: linear-gradient(160deg, #b833ea 0%, #9500c8 60%, #6a1f8c 100%);
}

.spec-claim:hover .spec-claim-card,
.spec-claim:focus-within .spec-claim-card {
    border-left-color: rgba(184, 51, 234, 0.55);
    transform: translateX(2px);
}

.spec-claim:hover .spec-claim-tag,
.spec-claim:focus-within .spec-claim-tag {
    color: #9500c8;
}

/* ───── FOOTER (stamp de revisão) ───── */
.spec-doc-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 0 6px;
}

.spec-doc-foot .foot-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(149, 0, 200, 0) 0%,
        rgba(149, 0, 200, 0.35) 50%,
        rgba(149, 0, 200, 0) 100%);
}

.spec-doc-foot .foot-stamp {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--spec-brand);
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid rgba(149, 0, 200, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

/* ───── Reduce motion ───── */
@media (prefers-reduced-motion: reduce) {
    .spec-hex,
    .spec-claim-card {
        transition: none !important;
    }
}

/* ───── Responsivo ───── */
@media (max-width: 900px) {
    .spec-doc-title { font-size: 2rem; }
    .spec-claims { padding: 26px 18px 24px 18px; }
    .spec-trilho { left: 41px; }
    .spec-claim { grid-template-columns: 46px 1fr; gap: 14px; }
    .spec-claim-badge { width: 44px; height: 50px; }
    .spec-roman { font-size: 1.15rem; }
    .spec-claim-card::before { left: -14px; width: 12px; top: 20px; }
}

@media (max-width: 600px) {
    .spec-doc-meta { flex-wrap: wrap; gap: 8px; }
    .spec-doc-title { font-size: 1.7rem; }
    .spec-doc-sub { font-size: 0.94rem; }
    .spec-claims { padding: 22px 14px 22px 14px; gap: 22px; }
    .spec-trilho { display: none; }
    .spec-claim-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .spec-claim-ref { padding-left: 0; }
    .spec-claim-ref::before { display: none; }
    .spec-claim-card h4 { font-size: 1.05rem; }
    .spec-claim-card p { font-size: 0.9rem; }
}

/* =========================================
   PILARES MURAL — modelo-de-negocio.html (ATIVO)
   Mural editorial assimétrico com mídia real do produto
   - Real product mockups (ONE PLUS, BI dashboards)
   - Real team photo (equipe-one.jpg)
   - CEO video
   - Editorial typography composition
   ========================================= */

.secao-pilares-mural {
    position: relative;
    background: #ffffff;
    padding: 110px 0 130px;
    overflow: hidden;
}

.mural-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 88% -10%, rgba(184, 51, 234, 0.10), transparent 55%),
        radial-gradient(circle at 8% 110%, rgba(149, 0, 200, 0.08), transparent 55%);
    z-index: 0;
}

.mural-container { position: relative; z-index: 1; }

/* TOPO */
.mural-topo {
    text-align: center;
    margin: 0 auto 64px;
    max-width: 780px;
}

.mural-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6a1f8c;
    margin-bottom: 22px;
}

.mural-eyebrow-line {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9500c8, transparent);
}

.mural-h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #1a0a26;
    margin: 0 0 22px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mural-h2 .h2-line { display: block; }

.mural-h2 .h2-em {
    font-style: normal;
    background: linear-gradient(135deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.18em;
    letter-spacing: -0.025em;
}

.mural-sub {
    color: #5a4a6a;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* MURAL — grid assimétrico */
.mural {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
}

.mural-cell {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.mural-cell:hover { transform: translateY(-3px); }

/* Posicionamento assimétrico */
.mural-cell--hero      { grid-column: 1 / span 7;  grid-row: 1 / span 2; min-height: 520px; }
.mural-cell--class     { grid-column: 8 / span 5;  grid-row: 1; }
.mural-cell--photo     { grid-column: 8 / span 5;  grid-row: 2; min-height: 240px; }
.mural-cell--editorial { grid-column: 1 / span 6;  grid-row: 3; min-height: 380px; }
.mural-cell--manifesto { grid-column: 7 / span 6;  grid-row: 3; min-height: 380px; }

/* BG variants */
.cell-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.cell-bg--dark {
    background:
        radial-gradient(circle at 30% 20%, rgba(149, 0, 200, 0.35), transparent 55%),
        linear-gradient(160deg, #1a0623 0%, #07010a 60%, #0e0212 100%);
}
.cell-bg--manifesto {
    background:
        radial-gradient(circle at 70% 80%, rgba(184, 51, 234, 0.28), transparent 55%),
        linear-gradient(160deg, #07010a 0%, #1a0623 100%);
}

/* CAP (label de identificação no canto top-left de cada cell) */
.cell-cap {
    position: absolute;
    top: 22px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}

.cell-cap-id {
    color: #b833ea;
    padding: 3px 8px;
    background: rgba(184, 51, 234, 0.12);
    border: 1px solid rgba(184, 51, 234, 0.32);
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 0.08em;
}

.cell-cap-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b833ea, #6a1f8c);
    box-shadow: 0 0 0 2px rgba(184, 51, 234, 0.18);
}

.cell-cap-name {
    color: #5a4a6a;
}

.mural-cell--hero .cell-cap-name,
.mural-cell--manifesto .cell-cap-name { color: rgba(255, 255, 255, 0.85); }

.cell-cap--on-photo {
    color: rgba(255, 255, 255, 0.95);
}
.cell-cap--on-photo .cell-cap-id {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}
.cell-cap--on-photo .cell-cap-name { color: rgba(255, 255, 255, 0.85); }

/* ROMAN — numeral romano grande como elemento gráfico */
.cell-roman {
    position: absolute;
    font-family: 'Playfair Display', 'Georgia', serif;
    line-height: 0.85;
    font-weight: 700;
    letter-spacing: -0.05em;
    z-index: 2;
    pointer-events: none;
}

/* Roman ghost (dark cells): white outline */
.cell-roman--ghost {
    bottom: -28px;
    right: -10px;
    font-size: clamp(10rem, 18vw, 18rem);
    color: transparent;
    -webkit-text-stroke: 2px rgba(184, 51, 234, 0.42);
    z-index: 1;
}

/* Roman inked (light cells): solid brand */
.cell-roman--inked {
    top: 50px;
    right: 24px;
    font-size: 9.5rem;
    background: linear-gradient(135deg, #b833ea, #481066);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.92;
    z-index: 1;
}

/* Roman ghost light (editorial cell): outline brand */
.cell-roman--ghost-light {
    top: 16px;
    right: 28px;
    font-size: 11rem;
    color: transparent;
    -webkit-text-stroke: 2.2px rgba(149, 0, 200, 0.32);
    z-index: 1;
}

/* Roman cut (photo cell): white solid with shadow */
.cell-roman--cut {
    bottom: -20px;
    right: -10px;
    font-size: clamp(9rem, 16vw, 14rem);
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.40);
    z-index: 1;
}

/* ───── CELL HERO — Pilar I ───── */
.mural-cell--hero {
    color: #ffffff;
    padding: 28px;
    background: #0a0510;
}

.cell-mockup {
    position: relative;
    margin: 56px 0 22px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0510;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 3;
    transform: translateY(0);
}

.chrome-bar {
    background: linear-gradient(180deg, #1f0f2c 0%, #150a1f 100%);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(184, 51, 234, 0.18);
}

.chrome-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.chrome-dot--r { background: #f87171; }
.chrome-dot--y { background: #fbbf24; }
.chrome-dot--g { background: #34d399; }

.chrome-url {
    flex: 1;
    text-align: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: rgba(242, 197, 255, 0.75);
}

.cell-mockup img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 12px 12px;
}

.cell-content--hero {
    margin-top: auto;
    position: relative;
    z-index: 3;
}

.mural-cell--hero .cell-title {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 12px;
    font-weight: 700;
}

.cell-title em {
    font-style: normal;
    background: linear-gradient(135deg, #f2c5ff, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mural-cell--hero .cell-body {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.cell-anota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: rgba(184, 51, 234, 0.10);
    border-left: 2px solid #b833ea;
    border-radius: 0 6px 6px 0;
    font-size: 0.84rem;
    color: rgba(242, 197, 255, 0.92);
}

.anota-mark {
    color: #b833ea;
    font-weight: 700;
    flex-shrink: 0;
}

.anota-text strong { color: #ffffff; }

.cell-stack {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

.cell-stack li {
    flex: 1;
    min-width: 90px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(184, 51, 234, 0.22);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-stack li span {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: #b833ea;
    font-weight: 700;
}

/* ───── CELL CLASS — Pilar II ───── */
.mural-cell--class {
    background: linear-gradient(160deg, #fbf6ff 0%, #f4eef9 100%);
    border: 1px solid rgba(149, 0, 200, 0.10);
    padding: 28px;
    color: #1a0a26;
}

.cell-deck {
    position: relative;
    margin: 56px 0 18px;
    height: 180px;
    flex: 1;
}

.deck-card {
    position: absolute;
    background: #ffffff;
    border-radius: 10px;
    box-shadow:
        0 12px 28px rgba(72, 16, 102, 0.18),
        0 2px 4px rgba(72, 16, 102, 0.08);
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    width: 80%;
    border: 1px solid rgba(149, 0, 200, 0.10);
}

.deck-card--1 {
    bottom: 0;
    left: 0;
    transform: rotate(-4deg);
    z-index: 3;
}
.deck-card--2 {
    bottom: 18px;
    left: 28px;
    transform: rotate(2deg);
    z-index: 2;
    opacity: 0.92;
}
.deck-card--3 {
    bottom: 32px;
    left: 50px;
    transform: rotate(6deg);
    z-index: 1;
    opacity: 0.78;
}

.mural-cell--class:hover .deck-card--1 { transform: rotate(-6deg) translateY(-4px); }
.mural-cell--class:hover .deck-card--2 { transform: rotate(0deg) translateY(-6px); }
.mural-cell--class:hover .deck-card--3 { transform: rotate(8deg) translateY(-2px); }

.deck-tag {
    display: block;
    background: linear-gradient(90deg, #1a0623, #2a0a3a);
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    padding: 5px 10px;
    font-weight: 600;
}

.deck-card img {
    display: block;
    width: 100%;
    height: auto;
}

.mural-cell--class .cell-content {
    margin-top: auto;
    position: relative;
    z-index: 4;
}

.mural-cell--class .cell-title {
    font-family: var(--fonte-titulos);
    font-size: 1.55rem;
    line-height: 1.15;
    color: #1a0a26;
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mural-cell--class .cell-body {
    color: #5a4a6a;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* ───── CELL PHOTO — Pilar III (equipe-one) ───── */
.mural-cell--photo {
    background: #0a0510;
    color: #ffffff;
    padding: 28px;
    overflow: hidden;
}

.cell-photo-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.cell-photo-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(0.85) contrast(1.05);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.mural-cell--photo:hover .cell-photo-bg img {
    transform: scale(1.04);
}

.cell-photo-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(7,1,10,0.65) 0%, rgba(72, 16, 102, 0.55) 60%, rgba(7,1,10,0.85) 100%),
        radial-gradient(circle at 80% 90%, rgba(184, 51, 234, 0.32), transparent 50%);
}

.cell-content--on-photo {
    margin-top: auto;
    position: relative;
    z-index: 3;
    max-width: 88%;
}

.cell-quote {
    margin: 0 0 14px;
    font-family: var(--fonte-titulos);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    line-height: 1.2;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.005em;
    position: relative;
    padding-left: 0;
}

.quote-mark {
    display: inline-block;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.6em;
    line-height: 0;
    color: #b833ea;
    margin-right: 4px;
    vertical-align: -0.25em;
}

.cell-body--light {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.cell-credit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.credit-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b833ea;
    box-shadow: 0 0 8px rgba(184, 51, 234, 0.85);
    animation: creditPulse 2.4s ease-in-out infinite;
}

@keyframes creditPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ───── CELL EDITORIAL — Pilar IV ───── */
.mural-cell--editorial {
    background: linear-gradient(160deg, #ffffff 0%, #fbf6ff 100%);
    border: 1px solid rgba(149, 0, 200, 0.10);
    padding: 28px;
    color: #1a0a26;
    position: relative;
}

.mural-cell--editorial::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(149, 0, 200, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 0, 200, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.cell-editorial {
    position: relative;
    margin: 50px 0 22px;
    flex: 1;
    min-height: 200px;
    z-index: 1;
}

.edit-page {
    position: absolute;
    background: #ffffff;
    border: 1px solid rgba(149, 0, 200, 0.18);
    border-radius: 4px;
    padding: 14px 16px;
    box-shadow:
        0 8px 24px rgba(72, 16, 102, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.edit-page--1 {
    top: 0;
    left: 0;
    width: 70%;
    transform: rotate(-1.2deg);
    z-index: 3;
}

.edit-page--2 {
    top: 36%;
    right: 0;
    width: 50%;
    transform: rotate(2.5deg);
    z-index: 2;
}

.edit-page--3 {
    bottom: 0;
    left: 10%;
    width: 56%;
    transform: rotate(-2.8deg);
    z-index: 1;
    opacity: 0.95;
}

.mural-cell--editorial:hover .edit-page--1 { transform: rotate(-2deg) translateY(-3px); }
.mural-cell--editorial:hover .edit-page--2 { transform: rotate(4deg)  translateY(-2px); }
.mural-cell--editorial:hover .edit-page--3 { transform: rotate(-4deg) translateY(-1px); }

.edit-page-num {
    display: block;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: #b833ea;
    margin-bottom: 3px;
    font-weight: 700;
}

.edit-page-tag {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    color: #1a0a26;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.edit-page-q {
    margin: 8px 0 0;
    font-family: var(--fonte-titulos);
    font-size: 0.86rem;
    line-height: 1.35;
    color: #6a1f8c;
    font-style: normal;
}

.mural-cell--editorial .cell-content {
    margin-top: auto;
    position: relative;
    z-index: 4;
}

.mural-cell--editorial .cell-title {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    line-height: 1.15;
    color: #1a0a26;
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mural-cell--editorial .cell-body {
    color: #5a4a6a;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

/* ───── CELL MANIFESTO — Pilar V (CEO video) ───── */
.mural-cell--manifesto {
    color: #ffffff;
    padding: 28px;
    background: #07010a;
}

.cell-video {
    margin: 56px 0 22px;
    position: relative;
    z-index: 3;
}

.cell-video-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(184, 51, 234, 0.22) inset;
}

.video-rec {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 1, 10, 0.78);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    padding: 5px 9px 5px 10px;
    border-radius: 4px;
    z-index: 4;
    text-transform: uppercase;
    font-weight: 700;
}

.video-rec i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: recBlink 1.4s ease-in-out infinite;
    display: inline-block;
}

@keyframes recBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.cell-video .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.cell-video .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cell-content--manifesto {
    margin-top: auto;
    position: relative;
    z-index: 3;
}

.cell-quote--big {
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    line-height: 1.18;
    margin-bottom: 6px;
}

.cell-quote em {
    font-style: normal;
    background: linear-gradient(135deg, #f2c5ff, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cell-attr {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 14px;
    font-weight: 600;
}

.mural-cell--manifesto .cell-body--light {
    color: rgba(255, 255, 255, 0.78);
}

/* ───── Reduce motion ───── */
@media (prefers-reduced-motion: reduce) {
    .mural-cell,
    .cell-photo-bg img,
    .deck-card,
    .edit-page,
    .credit-dot,
    .video-rec i {
        animation: none !important;
        transition: none !important;
    }
}

/* ───── RESPONSIVO ───── */
@media (max-width: 1080px) {
    .mural-cell--hero      { grid-column: 1 / span 12; grid-row: 1; min-height: 480px; }
    .mural-cell--class     { grid-column: 1 / span 6;  grid-row: 2; }
    .mural-cell--photo     { grid-column: 7 / span 6;  grid-row: 2; min-height: 320px; }
    .mural-cell--editorial { grid-column: 1 / span 12; grid-row: 3; }
    .mural-cell--manifesto { grid-column: 1 / span 12; grid-row: 4; }
}

@media (max-width: 720px) {
    .secao-pilares-mural { padding: 80px 0 100px; }
    .mural-topo { margin-bottom: 44px; }
    .mural-h2 { font-size: 2rem; }
    .mural-sub { font-size: 0.95rem; }

    .mural { gap: 16px; }
    .mural-cell--hero,
    .mural-cell--class,
    .mural-cell--photo,
    .mural-cell--editorial,
    .mural-cell--manifesto {
        grid-column: 1 / span 12;
        min-height: 0;
    }
    .mural-cell--hero { grid-row: 1; min-height: 440px; }
    .mural-cell--class { grid-row: 2; }
    .mural-cell--photo { grid-row: 3; min-height: 280px; }
    .mural-cell--editorial { grid-row: 4; min-height: 320px; }
    .mural-cell--manifesto { grid-row: 5; min-height: 360px; }

    .mural-cell { padding: 22px; }
    .cell-cap { top: 16px; left: 18px; }
    .cell-roman--ghost { font-size: 11rem; }
    .cell-roman--inked { font-size: 7rem; top: 32px; right: 16px; }
    .cell-roman--ghost-light { font-size: 8rem; }
    .cell-roman--cut { font-size: 10rem; }
    .cell-mockup, .cell-video, .cell-editorial, .cell-deck { margin-top: 50px; }
    .mural-cell--hero .cell-title,
    .cell-quote--big { font-size: 1.4rem; }
    .cell-stack li { min-width: 80px; font-size: 0.7rem; }
}

/* =========================================
   COMPARATIVO DIFF — modelo-de-negocio.html
   Code-diff editorial: A (tradicional) × B (ONE)
   Dark theme alternando com o mural acima
   ========================================= */

.secao-comparativo-diff {
    position: relative;
    background:
        linear-gradient(180deg, #07010a 0%, #0d0316 50%, #07010a 100%);
    padding: 120px 0 130px;
    overflow: hidden;
    color: #ffffff;
}

.diff-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(184, 51, 234, 0.18), transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(149, 0, 200, 0.14), transparent 50%);
}

.secao-comparativo-diff > .container {
    position: relative;
    z-index: 1;
}

/* TOPO */
.diff-topo {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 780px;
}

.diff-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: #b833ea;
    margin-bottom: 22px;
}

.diff-eyebrow .eyebrow-line {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b833ea, transparent);
}

.diff-h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 20px;
    font-weight: 700;
    text-transform: none;
}

.diff-h2 em {
    font-style: italic;
    background: linear-gradient(135deg, #f2c5ff 0%, #b833ea 50%, #9500c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.diff-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 0;
}

/* ARENA — o "arquivo" diff */
.diff-arena {
    position: relative;
    background:
        linear-gradient(180deg, #100416 0%, #0a020e 100%);
    border: 1px solid rgba(184, 51, 234, 0.22);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* TOP BAR — file header */
.diff-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: linear-gradient(180deg, #1c0a2c 0%, #150624 100%);
    border-bottom: 1px solid rgba(184, 51, 234, 0.22);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.74rem;
    flex-wrap: wrap;
}

.bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.bar-dots {
    display: inline-flex;
    gap: 6px;
}

.bar-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.bar-dots i:nth-child(1) { background: #f87171; }
.bar-dots i:nth-child(2) { background: #fbbf24; }
.bar-dots i:nth-child(3) { background: #34d399; }

.bar-file {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bar-meta {
    color: rgba(184, 51, 234, 0.75);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bar-right {
    display: flex;
    gap: 8px;
}

.bar-tag {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
}

.bar-tag--a {
    color: #ff8a8a;
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.30);
}

.bar-tag--b {
    color: #f2c5ff;
    background: rgba(184, 51, 234, 0.14);
    border: 1px solid rgba(184, 51, 234, 0.42);
}

/* GRID — 2 colunas + spine */
.diff-grid {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: stretch;
    min-height: 360px;
}

/* COLUNA */
.diff-col {
    padding: 30px 28px 32px;
    display: flex;
    flex-direction: column;
}

.diff-col--a {
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.04), transparent 60%),
        rgba(255, 255, 255, 0.015);
    color: rgba(255, 255, 255, 0.78);
}

.diff-col--b {
    background:
        linear-gradient(180deg, rgba(184, 51, 234, 0.07), transparent 60%),
        rgba(184, 51, 234, 0.03);
    color: #ffffff;
}

/* COL HEAD */
.col-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(184, 51, 234, 0.20);
    margin-bottom: 18px;
}

.col-letter {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.2rem;
    font-weight: 700;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: #ff8a8a;
    flex-shrink: 0;
}

.col-letter--b {
    background: linear-gradient(135deg, #9500c8, #6a1f8c);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(149, 0, 200, 0.35);
}

.col-info {
    flex: 1;
    min-width: 0;
}

.col-title {
    font-family: var(--fonte-titulos);
    font-size: 1.32rem;
    line-height: 1.1;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

.diff-col--b .col-title {
    color: #ffffff;
}

.col-title em {
    font-style: italic;
    background: linear-gradient(135deg, #f2c5ff, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.col-sub {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
    text-transform: lowercase;
}

.col-status {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.col-status--a {
    color: #ff8a8a;
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.col-status--b {
    color: #c4ffaa;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.32);
}

.col-status--b i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: diffPulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes diffPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* DIFF LIST */
.diff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.diff-line {
    display: grid;
    grid-template-columns: 32px 22px 1fr;
    gap: 10px;
    padding: 12px 12px 12px 4px;
    border-radius: 6px;
    transition: background .25s ease, transform .25s ease;
    position: relative;
}

.diff-line:hover {
    background: rgba(184, 51, 234, 0.06);
    transform: translateX(2px);
}

.diff-line--minus:hover {
    background: rgba(248, 113, 113, 0.05);
}

.line-num {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.25);
    text-align: right;
    padding-top: 2px;
    user-select: none;
}

.line-sign {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
    padding-top: 2px;
    user-select: none;
}

.diff-line--minus .line-sign {
    color: #ff8a8a;
}

.diff-line--plus .line-sign {
    color: #b833ea;
    text-shadow: 0 0 12px rgba(184, 51, 234, 0.6);
}

.line-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.line-tag {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: rgba(184, 51, 234, 0.7);
    font-weight: 700;
    text-transform: uppercase;
}

.diff-line--minus .line-tag {
    color: rgba(248, 113, 113, 0.55);
}

.line-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.45;
    color: inherit;
}

.diff-line--minus .line-text {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    text-decoration-color: rgba(248, 113, 113, 0.4);
    text-decoration-thickness: 1px;
}

.diff-line--minus .line-text em {
    font-style: italic;
    color: rgba(248, 113, 113, 0.85);
}

.diff-line--plus .line-text {
    color: #ffffff;
}

.diff-line--plus .line-text strong {
    color: #f2c5ff;
    font-weight: 700;
}

/* SPINE — central com setas brand */
.diff-spine {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 75px 0 25px;
    background: linear-gradient(180deg, transparent, rgba(184, 51, 234, 0.04), transparent);
}

.spine-rail {
    position: absolute;
    top: 60px;
    bottom: 20px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(184, 51, 234, 0) 0%,
        rgba(184, 51, 234, 0.28) 12%,
        rgba(184, 51, 234, 0.28) 88%,
        rgba(184, 51, 234, 0) 100%);
}

.spine-arrow {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9500c8, #6a1f8c);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow:
        0 0 0 4px rgba(7, 1, 10, 1),
        0 0 18px rgba(184, 51, 234, 0.55);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.diff-col--b:hover ~ .diff-spine .spine-arrow,
.diff-col--a:hover ~ .diff-spine .spine-arrow {
    transform: translateX(2px);
}

/* FOOT — saldo + assinatura */
.diff-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    background: linear-gradient(180deg, #0a020e 0%, #150624 100%);
    border-top: 1px dashed rgba(184, 51, 234, 0.22);
    flex-wrap: wrap;
}

.foot-saldo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.saldo-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.saldo-cell--a {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #ff8a8a;
}

.saldo-cell--b {
    background: rgba(184, 51, 234, 0.10);
    border: 1px solid rgba(184, 51, 234, 0.38);
    color: #f2c5ff;
}

.saldo-num {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.saldo-label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

.saldo-eq {
    font-family: 'Inter', sans-serif;
    color: #b833ea;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(184, 51, 234, 0.55);
}

.foot-sign {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.sign-stamp {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9500c8, #6a1f8c);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(149, 0, 200, 0.45);
    flex-shrink: 0;
}

.sign-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sign-label {
    font-family: var(--fonte-titulos);
    font-size: 1rem;
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
}

.sign-meta {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: rgba(184, 51, 234, 0.7);
    text-transform: uppercase;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .diff-line,
    .col-status--b i,
    .spine-arrow {
        transition: none !important;
        animation: none !important;
    }
}

/* RESPONSIVO */
@media (max-width: 900px) {
    .diff-grid {
        grid-template-columns: 1fr;
    }
    .diff-spine {
        flex-direction: row;
        padding: 24px 28px;
        gap: 12px;
        justify-content: space-around;
        background: linear-gradient(90deg, transparent, rgba(184, 51, 234, 0.05), transparent);
        border-top: 1px dashed rgba(184, 51, 234, 0.22);
        border-bottom: 1px dashed rgba(184, 51, 234, 0.22);
    }
    .spine-arrow {
        transform: rotate(90deg);
    }
    .spine-rail {
        top: 50%;
        bottom: auto;
        left: 24px;
        right: 24px;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, rgba(184, 51, 234, 0.28) 10%, rgba(184, 51, 234, 0.28) 90%, transparent);
    }
}

@media (max-width: 720px) {
    .secao-comparativo-diff { padding: 80px 0 90px; }
    .diff-topo { margin-bottom: 36px; }
    .diff-h2 { font-size: 1.95rem; }
    .diff-sub { font-size: 0.95rem; }
    .diff-bar {
        padding: 10px 14px;
        font-size: 0.66rem;
    }
    .bar-left { gap: 10px; flex-wrap: wrap; }
    .bar-meta { font-size: 0.6rem; }
    .diff-col { padding: 22px 18px 24px; }
    .col-head { gap: 10px; }
    .col-letter { width: 28px; height: 28px; font-size: 0.95rem; }
    .col-title { font-size: 1.1rem; }
    .col-status { font-size: 0.55rem; padding: 2px 6px; }
    .diff-line { grid-template-columns: 26px 18px 1fr; gap: 8px; padding: 10px 8px 10px 2px; }
    .line-num { font-size: 0.62rem; }
    .line-sign { font-size: 1rem; }
    .line-text { font-size: 0.88rem; }
    .diff-foot { padding: 16px 18px; gap: 16px; flex-direction: column; align-items: flex-start; }
    .saldo-num { font-size: 1.3rem; }
}

/* =========================================
   COMPARATIVO PÁGINAS — modelo-de-negocio.html
   Editorial dossiê: 2 páginas A × B, light theme
   Mescla com a linguagem do mural (numeral romano,
   mono micro-labels, brand italic, mockup real)
   ========================================= */

.secao-comparativo-paginas {
    position: relative;
    background:
        linear-gradient(180deg, #fbf7fd 0%, #f5edf9 50%, #fbf7fd 100%);
    padding: 120px 0 130px;
    overflow: hidden;
}

.paginas-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(184, 51, 234, 0.10), transparent 50%),
        radial-gradient(circle at 88% 84%, rgba(149, 0, 200, 0.08), transparent 50%);
}

.secao-comparativo-paginas > .container {
    position: relative;
    z-index: 1;
}

/* TOPO */
.paginas-topo {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 780px;
}

.paginas-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6a1f8c;
    margin-bottom: 22px;
}

.paginas-eyebrow .eyebrow-line {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9500c8, transparent);
}

.paginas-h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1a0a26;
    margin: 0 0 20px;
    font-weight: 700;
    text-transform: none;
}

.paginas-h2 em {
    font-style: italic;
    background: linear-gradient(135deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.paginas-sub {
    color: #5a4a6a;
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 0;
}

/* ARENA — 2 colunas + spine */
.paginas-arena {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    gap: 0;
    align-items: stretch;
}

/* PÁGINA — documento editorial */
.pagina {
    position: relative;
    padding: 32px 32px 28px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.pagina--a {
    background: linear-gradient(180deg, #fbf5ee 0%, #f5ece1 100%);
    border: 1px solid rgba(120, 100, 80, 0.18);
    box-shadow:
        0 10px 24px rgba(72, 16, 102, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #6a5e54;
    transform: rotate(-0.8deg);
}

.pagina--a::before {
    /* watermark "modelo herdado" diagonal subtle */
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -38deg,
            transparent 0,
            transparent 80px,
            rgba(120, 100, 80, 0.025) 80px,
            rgba(120, 100, 80, 0.025) 81px
        );
    border-radius: 12px;
    pointer-events: none;
}

.pagina--b {
    background:
        radial-gradient(circle at 100% 0%, rgba(184, 51, 234, 0.06), transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fbf6ff 100%);
    border: 1px solid rgba(149, 0, 200, 0.20);
    box-shadow:
        0 30px 60px rgba(149, 0, 200, 0.12),
        0 4px 12px rgba(149, 0, 200, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #1a0a26;
    transform: rotate(0.4deg);
    z-index: 2;
}

.pagina:hover {
    transform: rotate(0) translateY(-2px);
}

/* PÁGINA HEAD */
.pagina-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px dashed rgba(120, 100, 80, 0.30);
    position: relative;
    z-index: 1;
}

.pagina--b .pagina-head {
    border-bottom-color: rgba(149, 0, 200, 0.22);
}

.pagina-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.pagina-letra {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.35rem;
    font-weight: 700;
    background: rgba(120, 100, 80, 0.10);
    border: 1px solid rgba(120, 100, 80, 0.25);
    color: #8a7a6a;
    flex-shrink: 0;
}

.pagina-letra--b {
    background: linear-gradient(135deg, #9500c8, #6a1f8c);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(149, 0, 200, 0.35);
}

.pagina-title {
    font-family: var(--fonte-titulos);
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0 0 4px;
    color: #6a5e54;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

.pagina--b .pagina-title {
    color: #1a0a26;
}

.pagina-title em {
    font-style: italic;
    background: linear-gradient(135deg, #9500c8, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pagina-dek {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(120, 100, 80, 0.85);
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.pagina--b .pagina-dek {
    color: #6a1f8c;
}

.pagina-status {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.pagina-status--a {
    color: #8a7a6a;
    background: rgba(120, 100, 80, 0.08);
    border: 1px solid rgba(120, 100, 80, 0.28);
}

.pagina-status--b {
    color: #6a1f8c;
    background: rgba(184, 51, 234, 0.08);
    border: 1px solid rgba(184, 51, 234, 0.35);
}

.pagina-status--b i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b833ea;
    box-shadow: 0 0 6px rgba(184, 51, 234, 0.7);
    animation: vigentePulse 2.2s ease-in-out infinite;
    display: inline-block;
}

@keyframes vigentePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* CLÁUSULAS */
.clausulas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.clausula {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: flex-start;
}

/* Numeral romano editorial — outline na A, gradient solid na B */
.clausula-num {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.2rem;
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(120, 100, 80, 0.6);
    text-align: center;
    padding-top: 2px;
}

.clausula-num--b {
    -webkit-text-stroke: 0;
    background: linear-gradient(135deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.clausula-corpo {
    min-width: 0;
}

.clausula-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(120, 100, 80, 0.85);
    background: rgba(120, 100, 80, 0.08);
    border: 1px solid rgba(120, 100, 80, 0.22);
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 700;
}

.clausula-tag--b {
    color: #6a1f8c;
    background: rgba(184, 51, 234, 0.08);
    border-color: rgba(184, 51, 234, 0.30);
}

.clausula-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #6a5e54;
    margin: 0;
}

.pagina--b .clausula-text {
    color: #1a0a26;
}

.clausula-text em {
    font-style: italic;
    color: rgba(120, 100, 80, 0.95);
    border-bottom: 1px solid rgba(120, 100, 80, 0.45);
}

.pagina--b .clausula-text em {
    border: none;
    color: inherit;
}

.clausula-text strong {
    color: #481066;
    font-weight: 700;
}

/* TILE — mockup real da Tela Única dentro da cláusula Stack do B */
.clausula-tile {
    margin-top: 12px;
    background: #0a0510;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(184, 51, 234, 0.25);
    box-shadow: 0 14px 30px rgba(72, 16, 102, 0.18);
    position: relative;
    max-width: 280px;
}

.clausula-tile img {
    display: block;
    width: 100%;
    height: auto;
}

.tile-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    background: rgba(7, 1, 10, 0.78);
    backdrop-filter: blur(6px);
    color: #f2c5ff;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

/* RODAPÉ */
.pagina-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed rgba(120, 100, 80, 0.30);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.pagina--b .pagina-foot {
    border-top-color: rgba(149, 0, 200, 0.22);
}

.foot-firma {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: 0.88rem;
    color: rgba(120, 100, 80, 0.78);
}

.foot-firma--b {
    color: #6a1f8c;
}

/* SPINE central */
.paginas-spine {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
    gap: 8px;
}

.spine-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(149, 0, 200, 0.7);
    font-weight: 700;
}

.spine-rail {
    flex: 1;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(149, 0, 200, 0) 0%,
        rgba(149, 0, 200, 0.32) 30%,
        rgba(149, 0, 200, 0.32) 70%,
        rgba(149, 0, 200, 0) 100%);
    min-height: 60px;
}

.spine-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9500c8, #6a1f8c);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow:
        0 0 0 5px rgba(251, 247, 253, 1),
        0 8px 20px rgba(184, 51, 234, 0.40);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .pagina,
    .pagina-status--b i {
        transition: none !important;
        animation: none !important;
    }
}

/* RESPONSIVO */
@media (max-width: 920px) {
    .paginas-arena {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pagina--a { transform: none; }
    .pagina--b { transform: none; }
    .paginas-spine {
        flex-direction: row;
        padding: 14px 0;
        gap: 14px;
        justify-content: center;
    }
    .spine-rail {
        height: 1px;
        width: auto;
        flex: 1;
        max-width: 120px;
        min-height: 0;
        background: linear-gradient(90deg,
            rgba(149, 0, 200, 0) 0%,
            rgba(149, 0, 200, 0.32) 30%,
            rgba(149, 0, 200, 0.32) 70%,
            rgba(149, 0, 200, 0) 100%);
    }
    .spine-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 720px) {
    .secao-comparativo-paginas { padding: 80px 0 90px; }
    .paginas-topo { margin-bottom: 40px; }
    .paginas-h2 { font-size: 1.95rem; }
    .paginas-sub { font-size: 0.95rem; }
    .pagina { padding: 24px 22px 22px; }
    .pagina-letra { width: 32px; height: 32px; font-size: 1.1rem; }
    .pagina-title { font-size: 1.2rem; }
    .pagina-dek { font-size: 0.72rem; }
    .pagina-status { font-size: 0.56rem; padding: 3px 7px; }
    .clausula { grid-template-columns: 36px 1fr; gap: 12px; }
    .clausula-num { font-size: 1.75rem; }
    .clausula-text { font-size: 0.92rem; }
    .clausula-tile { max-width: 100%; }
    .foot-firma { font-size: 0.8rem; }
}

/* =========================================================
   CONJUNTO — modelo-de-negocio.html  (v3, "produto imersivo")
   Direção Linear/Vercel: dashboard real grande inclinado em
   perspectiva sobre glow de marca, selos flutuantes, app no
   canto e Córtex como base. Faixa comparativa enxuta embaixo.
   Sem itálico. Reaproveita .chrome-window e .phone-shot.
   ========================================================= */

.secao-conjunto {
    position: relative;
    overflow: hidden;
    padding: clamp(92px, 11vw, 148px) 0;
    background:
        radial-gradient(120% 80% at 50% -10%, #120a1d 0%, #0a0510 46%, #07030c 100%);
    color: #fff;
}

/* aura ambiente grande (topo) */
.conj-aura {
    position: absolute;
    top: -16%;
    left: 50%;
    width: min(1100px, 120%);
    height: 720px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(149, 0, 200, 0.30) 0%, rgba(72, 16, 102, 0.12) 38%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
/* malha técnica sutil */
.conj-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(184, 51, 234, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 51, 234, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask: radial-gradient(ellipse 72% 58% at 50% 36%, #000, transparent 76%);
    mask: radial-gradient(ellipse 72% 58% at 50% 36%, #000, transparent 76%);
}

.secao-conjunto > .container { position: relative; z-index: 1; }

/* ---------- Topo ---------- */
.conj-topo {
    max-width: 800px;
    margin: 0 auto clamp(44px, 5vw, 66px);
    text-align: center;
}
.conj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.85);
    margin-bottom: 22px;
}
.conj-eyebrow-tick {
    width: 28px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #b833ea);
}
.conj-vs { color: rgba(255, 255, 255, 0.45); font-weight: 400; }

.conj-titulo {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-style: normal;
    font-size: clamp(2.5rem, 5.4vw, 4.05rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 20px;
    text-wrap: balance;
}
.conj-brand {
    display: block;
    font-style: normal;
    background: linear-gradient(116deg, #f4d0ff 0%, #c259f0 48%, #9500c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.conj-sub {
    font-family: var(--fonte-textos);
    font-size: clamp(0.99rem, 1.3vw, 1.14rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.62);
    max-width: 680px;
    margin: 0 auto;
}

/* ---------- Palco imersivo ---------- */
.conj-palco {
    position: relative;
    margin-top: clamp(20px, 3vw, 40px);
}
.conj-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 92%;
    height: 88%;
    max-width: 980px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(149, 0, 200, 0.55) 0%, rgba(149, 0, 200, 0.18) 40%, transparent 66%);
    filter: blur(52px);
    z-index: 0;
    pointer-events: none;
    animation: conjGlow 7s ease-in-out infinite;
}
@keyframes conjGlow {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

.conj-deck {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    perspective: 2200px;
}

/* dashboard inclinado */
.conj-dash {
    width: 100%;
    transform: rotateX(7deg);
    transform-origin: center 70%;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.62),
        0 0 80px rgba(149, 0, 200, 0.22);
}
.conj-dash:hover { transform: rotateX(0deg) translateY(-4px); }
.conj-dash .chrome-window__pill { max-width: 82%; }

/* selos flutuantes (glass) */
.conj-flag {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 13px;
    font-family: var(--fonte-textos);
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(22, 13, 31, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 51, 234, 0.42);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.conj-flag svg { stroke: #f4d0ff; stroke-width: 2; fill: none; flex-shrink: 0; }
.conj-flag--tl { top: -20px; left: -26px; }
.conj-flag--tr { top: 40px; right: -30px; }

/* App Simples no canto */
.conj-phone-wrap {
    position: absolute;
    left: -30px;
    bottom: -36px;
    width: clamp(146px, 15vw, 182px);
    z-index: 7;
}
.conj-phone {
    transform: rotate(-6deg);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow:
        0 0 0 1.5px rgba(149, 0, 200, 0.24),
        0 36px 72px rgba(0, 0, 0, 0.62);
}
.conj-phone:hover { transform: rotate(-2deg) translateY(-6px); }
.conj-phone .phone-shot__btn { display: none; }
.conj-phone::before { width: 48px; height: 13px; top: 5px; border-radius: 7px; }

.conj-phone-chip {
    position: absolute;
    top: 22%;
    right: -56px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    font-family: var(--fonte-textos);
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgba(149, 0, 200, 0.96), rgba(72, 16, 102, 0.96));
    border: 1px solid rgba(242, 197, 255, 0.34);
    box-shadow: 0 12px 28px rgba(149, 0, 200, 0.45);
    white-space: nowrap;
}
.conj-phone-chip svg { stroke: #fff; stroke-width: 2; fill: none; }

/* Córtex hardware */
.conj-cortex {
    position: absolute;
    right: -22px;
    bottom: -30px;
    z-index: 6;
    width: clamp(198px, 21vw, 238px);
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas: "icon nome" "icon meta" "icon specs";
    column-gap: 13px;
    row-gap: 2px;
    align-items: center;
    padding: 15px 17px;
    border-radius: 15px;
    background: rgba(15, 8, 21, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(184, 51, 234, 0.32);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.55);
}
.conj-cortex-icon {
    grid-area: icon;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(149, 0, 200, 0.34), rgba(72, 16, 102, 0.34));
    border: 1px solid rgba(184, 51, 234, 0.44);
}
.conj-cortex-icon svg { stroke: #f4d0ff; stroke-width: 2; fill: none; }
.conj-cortex-nome {
    grid-area: nome;
    align-self: end;
    font-family: var(--fonte-titulos);
    font-weight: 500;
    font-size: 1.14rem;
    color: #fff;
}
.conj-cortex-meta {
    grid-area: meta;
    font-family: var(--fonte-textos);
    font-size: 0.72rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.58);
}
.conj-cortex-specs {
    grid-area: specs;
    margin-top: 4px;
    font-family: var(--fonte-textos);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.68);
}

.conj-legenda {
    margin: clamp(40px, 5vw, 60px) auto 0;
    max-width: 540px;
    text-align: center;
    font-family: var(--fonte-textos);
    font-size: 0.83rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.56);
}
.conj-legenda b { color: #f4d0ff; font-weight: 700; }

/* ---------- Faixa comparativa ---------- */
.conj-faixa {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(58px, 6.5vw, 92px);
    border-top: 1px solid rgba(184, 51, 234, 0.18);
}
.conj-col {
    padding: 30px 28px 6px;
    border-left: 1px solid rgba(184, 51, 234, 0.14);
}
.conj-col:first-child { border-left: none; padding-left: 4px; }
.conj-col:last-child { padding-right: 4px; }
.conj-col-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 16px;
    background: linear-gradient(150deg, rgba(149, 0, 200, 0.20), rgba(72, 16, 102, 0.20));
    border: 1px solid rgba(184, 51, 234, 0.30);
}
.conj-col-ico svg { stroke: #f4d0ff; stroke-width: 2; fill: none; }
.conj-rotulo {
    display: block;
    font-family: var(--fonte-textos);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 197, 255, 0.68);
    margin-bottom: 9px;
}
.conj-win {
    font-family: var(--fonte-textos);
    font-size: 1.0rem;
    line-height: 1.42;
    font-weight: 500;
    color: #fff;
    margin: 0 0 8px;
}
.conj-key { color: #f4d0ff; font-weight: 700; font-style: normal; }
.conj-old {
    font-family: var(--fonte-textos);
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
    .conj-glow { animation: none; }
    .conj-dash, .conj-phone { transition: none; }
    .conj-dash { transform: rotateX(4deg); }
    .conj-dash:hover { transform: rotateX(4deg); }
    .conj-phone:hover { transform: rotate(-6deg); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
    .conj-deck { max-width: 620px; }
    .conj-dash { transform: rotateX(5deg); }
    .conj-faixa { grid-template-columns: repeat(2, 1fr); }
    .conj-col { padding: 26px 22px 6px; }
    .conj-col:nth-child(3) { border-left: none; padding-left: 4px; }
    .conj-col:nth-child(odd) { border-left: none; padding-left: 4px; }
    .conj-col:nth-child(even) { border-left: 1px solid rgba(184, 51, 234, 0.14); }
    .conj-col:nth-child(3), .conj-col:nth-child(4) { border-top: 1px solid rgba(184, 51, 234, 0.12); padding-top: 26px; }
}

@media (max-width: 620px) {
    .conj-deck { max-width: 100%; }
    .conj-flag--tl { top: -14px; left: -8px; font-size: 0.68rem; padding: 7px 11px; }
    .conj-flag--tr { top: 30px; right: -6px; font-size: 0.68rem; padding: 7px 11px; }
    .conj-phone-wrap { left: -8px; bottom: -22px; width: 116px; }
    .conj-phone-chip { right: -44px; font-size: 0.62rem; padding: 6px 9px; }
    .conj-cortex { right: -6px; bottom: -18px; width: 188px; padding: 13px 14px; }
    .conj-faixa { grid-template-columns: 1fr; }
    .conj-col { border-left: none !important; padding: 24px 2px; border-top: 1px solid rgba(184, 51, 234, 0.12); }
    .conj-col:first-child { border-top: none; }
    .conj-col-ico { margin-bottom: 12px; }
}
/* =========================================================
   COMPARATIVO v4 — REVISTA EDITORIAL (white)
   ─ Não é diagrama. Não é painel. É spread de revista de arquitetura.
   ─ Fundo branco puro, tipografia bold, mockup real integrado na coluna
   ─ Folios mono nos cantos, margens com pull-quote + roman
   ─ Cláusulas numeradas mono, stamps editoriais
   ========================================================= */

.secao-revista {
    position: relative;
    background: #ffffff;
    padding: 110px 0 120px;
    overflow: hidden;
    isolation: isolate;
}

body .secao-revista { background: #ffffff !important; }

.secao-revista > .container { position: relative; }

/* ── FOLIO mono nos cantos da seção ── */
.revista-folio {
    position: absolute;
    top: 28px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(74, 31, 122, 0.55);
    font-weight: 700;
    z-index: 4;
}

.revista-folio--tl { left: 24px; }
.revista-folio--tr { right: 24px; }

.revista-folio--tl::before,
.revista-folio--tr::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 1px;
    background: rgba(149, 0, 200, 0.55);
    vertical-align: middle;
}

.revista-folio--tl::before { margin-right: 8px; }
.revista-folio--tr::after  { margin-left: 8px; }

/* ── CABEÇA — kicker + título editorial 3-linhas + deck ── */
.revista-cabeca {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 72px;
    padding-top: 24px;
}

.revista-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    color: #6a1f8c;
    margin-bottom: 28px;
}

.kicker-marca {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #b833ea, #481066);
    flex-shrink: 0;
}

/* h2 manifesto-style — 3 linhas, terceira com palavra em italic gradient brand */
.revista-h2 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.4rem, 5.2vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.022em;
    color: #1a0a26;
    margin: 0 0 24px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rev-line { display: block; }

.rev-line--1 { color: rgba(120, 100, 80, 0.6); font-style: italic; font-weight: 500; }
.rev-line--2 { color: rgba(120, 100, 80, 0.6); font-style: italic; font-weight: 500; }
.rev-line--3 { color: #1a0a26; }

.rev-line--3 em {
    font-style: italic;
    background: linear-gradient(135deg, #9500c8 0%, #b833ea 50%, #6a1f8c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.1em;
    letter-spacing: -0.025em;
}

.revista-deck {
    color: #5a4a6a;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ── SPREAD — 2 páginas editoriais lado a lado, SEM caixas ── */
.revista-spread {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto 68px;
    position: relative;
}

/* PÁGINA — editorial flow, sem border/background panel */
.rev-pagina {
    position: relative;
    padding: 36px 8px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rev-pagina--esq { padding-right: 28px; }
.rev-pagina--dir { padding-left: 28px; }

/* HEAD da página — folio + cabeçalho */
.rev-pagina-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(120, 100, 80, 0.18);
}

.rev-pagina--dir .rev-pagina-head { border-bottom-color: rgba(184, 51, 234, 0.22); }

.rev-pagina-num {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: rgba(120, 100, 80, 0.75);
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid rgba(120, 100, 80, 0.30);
    border-radius: 2px;
    text-transform: uppercase;
}

.rev-pagina--dir .rev-pagina-num {
    color: #6a1f8c;
    border-color: rgba(184, 51, 234, 0.35);
    background: rgba(184, 51, 234, 0.06);
}

.rev-pagina-cab {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(120, 100, 80, 0.78);
    font-weight: 600;
}

.rev-pagina--dir .rev-pagina-cab { color: #6a1f8c; }

/* TÍTULO da página — display editorial, balanced */
.rev-pagina-titulo {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    color: #1a0a26;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.022em;
    text-wrap: balance;
    text-transform: none;
}

.rev-pagina--esq .rev-pagina-titulo { color: rgba(120, 100, 80, 0.95); }

.titulo-strike {
    text-decoration: line-through;
    text-decoration-color: rgba(184, 70, 14, 0.6);
    text-decoration-thickness: 2px;
}

.titulo-em {
    font-style: italic;
    background: linear-gradient(135deg, #9500c8, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* LEAD — paragraph editorial */
.rev-pagina-lead {
    font-family: var(--fonte-textos);
    font-size: 1.04rem;
    line-height: 1.65;
    color: #5a4a6a;
    margin: 0;
    max-width: 52ch;
}

.rev-pagina--esq .rev-pagina-lead {
    color: rgba(120, 100, 80, 0.85);
}

/* MARGEM — pull-quote com numeral romano lateral (estilo revista impressa) */
.rev-pagina-marg {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 18px;
    border-left: 3px solid rgba(120, 100, 80, 0.32);
    background:
        linear-gradient(90deg, rgba(120, 100, 80, 0.03), transparent 70%);
}

.rev-pagina-marg--brand {
    border-left-color: rgba(184, 51, 234, 0.55);
    background: linear-gradient(90deg, rgba(184, 51, 234, 0.05), transparent 70%);
}

.marg-roman {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    line-height: 0.85;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(120, 100, 80, 0.5);
    flex-shrink: 0;
}

.marg-roman--brand {
    -webkit-text-stroke: 0;
    background: linear-gradient(135deg, #b833ea, #481066);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.marg-quote {
    font-family: var(--fonte-titulos);
    font-size: 1rem;
    line-height: 1.35;
    color: rgba(120, 100, 80, 0.9);
    font-style: italic;
    font-weight: 500;
    padding-top: 6px;
}

.marg-quote--brand {
    color: #1a0a26;
}

.marg-quote--brand em {
    font-style: italic;
    background: linear-gradient(135deg, #9500c8, #b833ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* FIGURA — mockup real integrado no fluxo (fig + caption editorial) */
.rev-figura {
    margin: 6px 0 4px;
    position: relative;
}

.rev-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow:
        0 18px 38px rgba(149, 0, 200, 0.16),
        0 0 0 1px rgba(184, 51, 234, 0.22);
}

.rev-figura figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(184, 51, 234, 0.30);
}

.fig-id {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: #6a1f8c;
    font-weight: 700;
    padding: 2px 7px;
    background: rgba(184, 51, 234, 0.08);
    border: 1px solid rgba(184, 51, 234, 0.32);
    border-radius: 2px;
}

.fig-cap {
    font-family: var(--fonte-textos);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: rgba(74, 31, 122, 0.78);
    font-style: italic;
}

/* CLÁUSULAS — lista numerada editorial */
.rev-clausulas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rev-clausulas li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(120, 100, 80, 0.18);
    font-family: var(--fonte-textos);
    font-size: 0.94rem;
    line-height: 1.45;
}

.rev-clausulas--esq li { color: rgba(120, 100, 80, 0.88); }
.rev-clausulas--dir li { color: #1a0a26; border-bottom-color: rgba(184, 51, 234, 0.18); }

.rev-clausulas li:last-child { border-bottom: 0; }

.clau-id {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: rgba(120, 100, 80, 0.7);
    flex-shrink: 0;
    padding-top: 2px;
}

.clau-id--brand { color: #b833ea; }

/* STAMP da página */
.rev-stamp {
    align-self: flex-end;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 2px;
    transform: rotate(-3deg);
    margin-top: 12px;
}

.rev-stamp--alert {
    color: #b8460e;
    border: 1.5px solid rgba(184, 70, 14, 0.55);
    background: rgba(184, 70, 14, 0.06);
    opacity: 0.88;
}

.rev-stamp--brand {
    color: #6a1f8c;
    border: 1.5px solid rgba(184, 51, 234, 0.55);
    background: rgba(184, 51, 234, 0.10);
}

/* ── DIVISOR central ── */
.rev-divisor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0 30px;
    gap: 0;
    height: 100%;
}

.div-vertical {
    position: absolute;
    top: 36px;
    bottom: 30px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(149, 0, 200, 0) 0%,
        rgba(149, 0, 200, 0.40) 25%,
        rgba(184, 51, 234, 0.50) 50%,
        rgba(149, 0, 200, 0.40) 75%,
        rgba(149, 0, 200, 0) 100%);
    transform: translateX(-50%);
}

.div-stamp {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9500c8, #481066);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 6px #ffffff,
        0 0 0 7px rgba(184, 51, 234, 0.32),
        0 12px 24px rgba(184, 51, 234, 0.42);
    margin-top: 50%;
    margin-bottom: 50%;
}

.div-stamp::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(184, 51, 234, 0.30);
    animation: divPulse 2.6s ease-out infinite;
}

@keyframes divPulse {
    0%   { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.45); opacity: 0; }
}

.div-arrow {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
}

.div-cap {
    position: absolute;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(74, 31, 122, 0.78);
    font-weight: 800;
    padding: 4px 8px;
    background: #ffffff;
    z-index: 3;
}

.div-cap--top { top: 12px; left: 50%; transform: translateX(-50%); }
.div-cap--bot { bottom: 12px; left: 50%; transform: translateX(-50%); }

/* ── PÉ — assinatura editorial ── */
.revista-pe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.pe-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(149, 0, 200, 0.40) 50%, transparent 100%);
}

.pe-marca {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(74, 31, 122, 0.78);
    font-weight: 700;
    white-space: nowrap;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .div-stamp::before { animation: none !important; }
}

/* ── RESPONSIVO ── */
@media (max-width: 1024px) {
    .revista-spread {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .rev-pagina--esq,
    .rev-pagina--dir { padding-left: 8px; padding-right: 8px; }
    .rev-divisor {
        flex-direction: row;
        padding: 12px 0 28px;
        height: auto;
        position: relative;
    }
    .div-vertical {
        position: relative;
        top: auto; bottom: auto; left: auto;
        height: 1px;
        width: 60%;
        max-width: 300px;
        transform: none;
        background: linear-gradient(90deg,
            rgba(149, 0, 200, 0) 0%,
            rgba(184, 51, 234, 0.5) 50%,
            rgba(149, 0, 200, 0) 100%);
        order: 1;
    }
    .div-stamp { margin: 0 12px; order: 2; }
    .div-stamp::before { animation: none; }
    .div-vertical:first-of-type { order: 0; }
    .div-cap { position: relative; left: auto; transform: none; }
    .div-cap--top { order: -1; }
    .div-cap--bot { order: 99; }
}

@media (max-width: 720px) {
    .secao-revista { padding: 70px 0 80px; }
    .revista-folio--tl,
    .revista-folio--tr { display: none; }
    .revista-cabeca { margin-bottom: 44px; padding-top: 0; }
    .revista-h2 { font-size: 1.95rem; }
    .revista-deck { font-size: 0.95rem; }
    .rev-pagina { padding: 24px 4px 18px; gap: 16px; }
    .rev-pagina-titulo { font-size: 1.55rem; }
    .rev-pagina-lead { font-size: 0.94rem; }
    .rev-clausulas li { font-size: 0.88rem; padding: 7px 0; }
    .clau-id { font-size: 0.64rem; }
    .rev-stamp { font-size: 0.58rem; padding: 4px 10px; letter-spacing: 0.24em; }
    .marg-roman { font-size: 2rem; }
    .marg-quote { font-size: 0.88rem; }
    .pe-marca { font-size: 0.58rem; letter-spacing: 0.22em; }
}

/* ============================================================
   CONTROLE DE ACESSO — HERO "Um acesso. Cinco caminhos." (v20260615)
   Namespace ISOLADO .ca-hero — não depende de nem altera regras
   compartilhadas (.hero-acesso-content / .hero-media-bg pertencem a
   outras páginas / outro agente). Refs aplicadas: Vercel blueprint-grid
   + Linear (1 cor de destaque + produto real + contenção) + Stripe
   (um único gesto de gradiente). Sem itálico; ênfase via cor da marca.
   ============================================================ */
.ca-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(125% 120% at 78% 6%, #160a23 0%, #0a0510 46%, #07030c 100%);
    padding: clamp(132px, 17vh, 196px) 0 clamp(76px, 10vh, 116px);
}

/* Blueprint-grid (Vercel): linhas 1px, tint da marca, opacidade mínima,
   célula grande p/ leitura calma + fade radial nas bordas */
.ca-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(244, 208, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 208, 255, 0.06) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(125% 105% at 26% 12%, #000 36%, transparent 80%);
            mask-image: radial-gradient(125% 105% at 26% 12%, #000 36%, transparent 80%);
}

/* Glow roxo — único gesto de cor (Linear/Stripe), atrás do produto */
.ca-hero__glow {
    position: absolute;
    z-index: 0;
    top: -10%;
    right: -6%;
    width: 60vw;
    max-width: 760px;
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(149, 0, 200, 0.42) 0%, rgba(72, 16, 102, 0.18) 38%, transparent 70%);
    filter: blur(6px);
}

.ca-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 5vw, 84px);
}

.ca-hero__copy { max-width: 600px; min-width: 0; }

.ca-hero__title {
    font-family: var(--fonte-titulos);
    font-style: normal;
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(2.7rem, 6vw, 4.7rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
}
.ca-hero__title br { display: block; }

/* Credencial cinética — 5 métodos, um acende por vez (sweep) */
.ca-hero__methods {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ca-hero__method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    font-family: var(--fonte-textos);
    font-size: 0.9rem;
    font-weight: 500;
    color: #c9b6d6;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(244, 208, 255, 0.14);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    will-change: color, border-color, box-shadow, transform;
    animation: caMethodSweep 10s ease-in-out infinite;
    animation-delay: calc(var(--i) * -2s);
}
.ca-hero__method .icon {
    width: 17px;
    height: 17px;
    color: #b833ea;
    flex-shrink: 0;
}
@keyframes caMethodSweep {
    0%, 14% {
        color: #fff;
        border-color: rgba(184, 51, 234, 0.85);
        box-shadow: 0 0 0 1px rgba(184, 51, 234, 0.35), 0 8px 26px rgba(149, 0, 200, 0.34);
        transform: translateY(-2px);
        background: rgba(149, 0, 200, 0.16);
    }
    24%, 100% {
        color: #c9b6d6;
        border-color: rgba(244, 208, 255, 0.14);
        box-shadow: 0 0 0 1px transparent;
        transform: translateY(0);
        background: rgba(255, 255, 255, 0.03);
    }
}

.ca-hero__lead {
    margin: 26px 0 0;
    font-family: var(--fonte-textos);
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.62;
    color: #b7a6c4;
    max-width: 33em;
}
.ca-hero__lead strong {
    color: #f4d0ff;
    font-weight: 600;
}

.ca-hero__actions {
    margin: 34px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* Ghost sobre fundo escuro — claro, no próprio namespace (não usa seletor compartilhado) */
.ca-hero .btn--ghost {
    color: #f4d0ff;
    border-color: rgba(244, 208, 255, 0.28);
    background: transparent;
}
.ca-hero .btn--ghost:hover {
    background: rgba(244, 208, 255, 0.08);
    border-color: rgba(244, 208, 255, 0.5);
}

/* Produto real — herda .chrome-window--bi (tilt 3D + máscara já prontos) */
.ca-hero__visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    perspective: 1600px;
}
.ca-hero__chrome {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 620px;
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
    .ca-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(36px, 6vw, 56px);
        text-align: center;
    }
    .ca-hero__copy { max-width: 640px; margin: 0 auto; }
    .ca-hero__methods,
    .ca-hero__actions { justify-content: center; }
    .ca-hero__lead { margin-left: auto; margin-right: auto; }
    .ca-hero__chrome { margin: 0 auto; max-width: 560px; }
    .ca-hero__glow { right: -22%; top: -12%; }
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
    .ca-hero { padding: clamp(116px, 16vh, 150px) 0 64px; }
    .ca-hero__methods { gap: 8px; }
    .ca-hero__method { padding: 8px 12px; font-size: 0.82rem; }
    .ca-hero__method .icon { width: 15px; height: 15px; }
    .ca-hero__title { font-size: clamp(2.4rem, 11vw, 3.3rem); }
}

/* ---- Acessibilidade: sem movimento ---- */
@media (prefers-reduced-motion: reduce) {
    .ca-hero__method {
        animation: none;
        color: #d8c8e4;
        transform: none;
    }
}

/* ============================================================
   CONTROLE DE ACESSO — SEÇÃO MÉTODOS: "A SOLEIRA"
   Namespace ISOLADO .soleira. Cena 3D (perspectiva + parallax de
   cursor): um PORTAL central em arco cujo NÚCLEO troca por método —
   telas reais p/ App e QR; scan abstrato (malha facial / digital /
   ondas NFC) p/ os leitores físicos. 5 chaves em 2 pistas (no celular
   / no leitor) orbitam o portal. JS faz parallax + auto-ciclo.
   Fallback empilhado <=900px; reduced-motion congela as animações.
   Uma cor de destaque (roxo da marca). Sem itálico.
   ============================================================ */
.soleira {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(135% 100% at 80% 0%, #180b27 0%, #0a0510 52%, #07030c 100%);
    padding: clamp(80px, 10vh, 130px) 0 clamp(90px, 12vh, 150px);
}

/* Atmosfera */
.soleira__atmo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.soleira__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(244, 208, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 208, 255, 0.05) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(80% 72% at 50% 44%, #000 28%, transparent 80%);
            mask-image: radial-gradient(80% 72% at 50% 44%, #000 28%, transparent 80%);
}
.soleira__glow {
    position: absolute; left: 50%; top: 46%; width: 70vw; max-width: 920px; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(149, 0, 200, 0.30) 0%, rgba(72, 16, 102, 0.12) 40%, transparent 68%);
    filter: blur(22px);
}
.soleira__grain {
    position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cabeçalho */
.soleira__head {
    position: relative; z-index: 2;
    max-width: 720px; margin: 0 auto clamp(34px, 5vh, 58px);
    text-align: center;
}
.soleira__title {
    font-family: var(--fonte-titulos); font-style: normal; color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.0; letter-spacing: -0.02em;
    margin: 14px 0 0;
}
.soleira__intro {
    margin: 18px auto 0; max-width: 56ch;
    font-family: var(--fonte-textos); color: #b7a6c4;
    font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.62;
}
.soleira__intro strong { color: #f4d0ff; font-weight: 600; }

/* Palco 3D */
.soleira__stage {
    position: relative; z-index: 2;
    max-width: 1080px; margin: 0 auto;
    height: clamp(440px, 56vh, 600px);
    perspective: 1300px;
}
.soleira__world {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 9deg));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Rótulos de pista */
.soleira__lane {
    position: absolute; z-index: 4; top: 4%;
    font-family: var(--fonte-textos); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: #7d6e8c;
    transform: translateZ(46px);
}
.soleira__lane::before { content: ""; display: inline-block; width: 18px; height: 1px; background: rgba(244, 208, 255, 0.4); vertical-align: middle; margin-right: 8px; }
.soleira__lane--cel { left: 7%; }
.soleira__lane--ler { right: 7%; }

/* Portal */
.soleira__portal {
    position: absolute; left: 50%; top: 50%;
    width: clamp(196px, 23vw, 256px);
    aspect-ratio: 3 / 4.4;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}
.soleira__portal-frame {
    position: absolute; inset: 0;
    border-radius: 130px 130px 24px 24px;
    overflow: hidden;
    background: #090410;
    border: 1px solid rgba(244, 208, 255, 0.16);
    box-shadow:
        0 0 0 1px rgba(149, 0, 200, 0.28),
        0 40px 90px rgba(10, 5, 16, 0.7),
        inset 0 0 70px rgba(149, 0, 200, 0.28),
        inset 0 0 0 7px rgba(9, 4, 16, 0.85),
        inset 0 0 0 8px rgba(244, 208, 255, 0.06);
}
.soleira__portal-core { position: absolute; inset: 0; }
.soleira__viz {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    opacity: 0; transform: scale(1.05);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.soleira__viz.is-active { opacity: 1; transform: none; }
.soleira__viz-ico {
    position: relative; z-index: 2;
    width: 60px; height: 60px; color: #ecc6ff;
    filter: drop-shadow(0 0 16px rgba(184, 51, 234, 0.7));
}

/* Viz facial — malha 3D + scan */
.soleira__mesh {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(184, 51, 234, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 51, 234, 0.22) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(58% 56% at 50% 46%, #000 38%, transparent 76%);
            mask-image: radial-gradient(58% 56% at 50% 46%, #000 38%, transparent 76%);
}
.soleira__scan {
    position: absolute; left: 0; right: 0; top: 0; height: 36%; z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(184, 51, 234, 0.32) 72%, rgba(244, 208, 255, 0.85));
    box-shadow: 0 0 20px rgba(184, 51, 234, 0.65);
    animation: soleiraScan 2.6s ease-in-out infinite;
}
@keyframes soleiraScan {
    0%   { transform: translateY(-70%); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateY(260%); opacity: 0; }
}

/* Viz biometria / tag — ondas */
.soleira__rings { position: absolute; width: 130px; height: 130px; }
.soleira__rings::before,
.soleira__rings::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(184, 51, 234, 0.55);
    animation: soleiraRipple 2.6s ease-out infinite;
}
.soleira__rings::after { animation-delay: 1.3s; }
@keyframes soleiraRipple {
    0%   { transform: scale(0.35); opacity: 0.85; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Viz app / qr — tela real + brilho */
.soleira__viz--shot img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.soleira__slide {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(115deg, transparent 42%, rgba(244, 208, 255, 0.26) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: soleiraSheen 3.2s ease-in-out infinite;
}
@keyframes soleiraSheen {
    0%   { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

/* Luz de topo + chão + "liberado" */
.soleira__beam {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(120% 55% at 50% -8%, rgba(244, 208, 255, 0.20), transparent 58%);
}
.soleira__floor {
    position: absolute; left: 50%; bottom: -9%; width: 130%; height: 18%;
    transform: translateX(-50%) rotateX(72deg);
    background: radial-gradient(ellipse at center, rgba(149, 0, 200, 0.42), transparent 68%);
    filter: blur(9px);
}
.soleira__liberado {
    position: absolute; z-index: 3; left: 50%; bottom: 7%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 13px; border-radius: 999px;
    background: rgba(9, 4, 16, 0.84); border: 1px solid rgba(54, 224, 127, 0.45);
    color: #36e07f; font-family: var(--fonte-textos); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 26px rgba(10, 5, 16, 0.55);
}
.soleira__liberado .icon { width: 13px; height: 13px; color: #36e07f; }

/* Chaves orbitando */
.soleira__key {
    position: absolute; left: var(--l); top: var(--t);
    transform: translate(-50%, -50%) translateZ(var(--kz, 70px));
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 16px 11px 13px; border-radius: 14px;
    background: rgba(20, 11, 32, 0.72);
    border: 1px solid rgba(244, 208, 255, 0.14);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #c4b0d4; font-family: var(--fonte-textos); font-size: 0.9rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 18px 44px rgba(10, 5, 16, 0.5);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.soleira__key .icon { width: 19px; height: 19px; color: #9a76b4; transition: color 0.3s ease; }
.soleira__key:hover { border-color: rgba(244, 208, 255, 0.42); color: #e6d4f2; }
.soleira__key.is-active {
    color: #fff;
    background: linear-gradient(160deg, rgba(149, 0, 200, 0.58), rgba(72, 16, 102, 0.5));
    border-color: rgba(244, 208, 255, 0.6);
    transform: translate(-50%, -50%) translateZ(calc(var(--kz, 70px) + 62px)) scale(1.07);
    box-shadow: 0 0 0 1px rgba(184, 51, 234, 0.5), 0 28px 64px rgba(149, 0, 200, 0.42);
}
.soleira__key.is-active .icon { color: #f4d0ff; }

/* Detalhe do método ativo (abaixo do palco) */
.soleira__detail {
    position: relative; z-index: 2;
    max-width: 640px; margin: clamp(28px, 4vh, 48px) auto 0;
    text-align: center; min-height: 10em;
}
.soleira__step {
    position: absolute; left: 0; right: 0; top: 0;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.soleira__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.soleira__step-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--fonte-textos); font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase; color: #9a8aa8;
}
.soleira__dot-cel, .soleira__dot-ler { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.soleira__dot-cel { background: #f4d0ff; box-shadow: 0 0 8px rgba(244, 208, 255, 0.7); }
.soleira__dot-ler { background: #b833ea; box-shadow: 0 0 8px rgba(184, 51, 234, 0.8); }
.soleira__step h3 {
    font-family: var(--fonte-titulos); font-style: normal; text-transform: uppercase;
    font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.04; letter-spacing: -0.01em;
    color: #fff; margin: 12px 0 0;
}
.soleira__step p {
    margin: 12px auto 0; max-width: 52ch;
    font-family: var(--fonte-textos); color: #b7a6c4;
    font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6;
}

/* --- Fallback empilhado (mobile/tablet) --- */
@media (max-width: 900px) {
    .soleira__stage { perspective: none; height: auto; }
    .soleira__world {
        position: static; transform: none !important; transform-style: flat;
        display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .soleira__lane { display: none; }
    .soleira__portal { position: static; transform: none; width: min(208px, 60vw); margin: 0 auto 8px; }
    .soleira__key {
        position: static; transform: none !important;
        width: min(320px, 86vw); justify-content: flex-start;
    }
    .soleira__key.is-active { transform: none !important; }
    .soleira__detail { min-height: 12.5em; }
}

/* --- Sem movimento: congela animações, mantém a cena --- */
@media (prefers-reduced-motion: reduce) {
    .soleira__scan, .soleira__slide,
    .soleira__rings::before, .soleira__rings::after { animation: none; }
    .soleira__world { transition: none; }
    .soleira__scan { opacity: 0.6; transform: translateY(60%); }
}

/* ── Cockpit do operador em tema CLARO (override final) ── */
.secao-oneplus-showcase { background: var(--paper-50); color: #4a4453; }
.secao-oneplus-showcase .oneplus-header h2 { color: #1a0a26; }
.secao-oneplus-showcase .oneplus-header p { color: #5a5462; }
.secao-oneplus-showcase .feature-card { background: #fff; border: 1px solid rgba(149,0,200,0.12); box-shadow: 0 12px 30px rgba(149,0,200,0.06); }
.secao-oneplus-showcase .feature-card h3 { color: #1a0a26; }
.secao-oneplus-showcase .feature-card p { color: #5a5462; }
.secao-oneplus-showcase .feature-card svg.icon { color: #9500c8; }

/* ── Cockpit do operador — cards refinados (override final 2) ── */
.secao-oneplus-showcase .oneplus-features { gap: 24px; }

.secao-oneplus-showcase .feature-card {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 32px 28px 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fcf8ff 100%);
    border: 1px solid rgba(149,0,200,0.10);
    box-shadow: 0 14px 36px -18px rgba(72,16,102,0.22);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}

/* faixa de acento no topo — cresce no hover */
.secao-oneplus-showcase .feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px; width: 40px;
    background: linear-gradient(90deg, #9500c8, #b833ea);
    border-radius: 0 0 3px 0;
    transition: width .45s cubic-bezier(.2,.8,.2,1);
}

.secao-oneplus-showcase .feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(149,0,200,0.28);
    box-shadow: 0 24px 46px -16px rgba(72,16,102,0.30);
}
.secao-oneplus-showcase .feature-card:hover::before { width: 100%; }

/* ícone em chip da marca — herda o look da seção Córtex */
.secao-oneplus-showcase .feature-card svg.icon {
    width: 46px; height: 46px;
    padding: 11px;
    box-sizing: border-box;
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(149,0,200,0.10), rgba(184,51,234,0.05));
    border: 1px solid rgba(149,0,200,0.18);
    color: #9500c8;
    margin-bottom: 18px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.secao-oneplus-showcase .feature-card:hover svg.icon { transform: translateY(-2px); }

.secao-oneplus-showcase .feature-card h3 {
    font-size: 1.18rem;
    line-height: 1.15;
    margin-bottom: 9px;
}
.secao-oneplus-showcase .feature-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .secao-oneplus-showcase .feature-card,
    .secao-oneplus-showcase .feature-card::before,
    .secao-oneplus-showcase .feature-card svg.icon { transition: none; }
}

/* ── Arquitetura (portaria) — título em 2 linhas, não 3 ── */
.secao-matriz-tech .matriz-header { max-width: 920px; }
.secao-matriz-tech .matriz-header h2 { max-width: none; }
.secao-matriz-tech .matriz-header h2 .text-gradient { display: block; }

/* =====================================================================
   APP SIMPLES — HERO "Phone 3D + camadas vivas"  (namespace ash-)
   ===================================================================== */
.hero-app-premium .app-hero-grid { grid-template-columns: 1fr 1.04fr; align-items: center; }
.hero-app-premium .app-hero-texto h1 { margin-top: 0; }
.ash-marker { color: rgba(242, 197, 255, 0.86); margin-bottom: 22px; }

/* Palco 3D */
.ash-stage {
    position: relative;
    width: 100%;
    max-width: 540px;
    min-height: 580px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
    transform-style: preserve-3d;
}

/* halo + anel de profundidade atrás do phone */
.ash-aura {
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(149,0,200,0.42) 0%, rgba(184,51,234,0.14) 38%, transparent 68%);
    filter: blur(18px);
    z-index: 0;
    animation: ashAura 9s ease-in-out infinite;
}
.ash-ring {
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(244, 208, 255, 0.10);
    box-shadow: 0 0 0 28px rgba(149,0,200,0.04);
    z-index: 0;
}

/* Phone — tilt 3D + float contínuo (tilt embutido no keyframe) */
.ash-phone {
    position: relative;
    z-index: 3;
    width: 300px;
    transform: rotateY(-16deg) rotateX(5deg);
    transform-style: preserve-3d;
    animation: ashPhoneFloat 7.5s ease-in-out infinite;
    will-change: transform, translate;
    filter: drop-shadow(0 44px 64px rgba(10, 5, 16, 0.55));
    translate: var(--px, 0px) var(--py, 0px);
}
.ash-phone .phone-shot { max-width: 300px; }

/* Cards de mídia real flutuando */
.ash-card {
    position: absolute;
    z-index: 5;
    width: 196px;
    background: rgba(18, 9, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 26px 52px -18px rgba(0, 0, 0, 0.7);
    opacity: 0;
    translate: var(--px, 0px) var(--py, 0px);
    animation: ashIn .6s var(--delay, 0s) cubic-bezier(.2,.8,.2,1) forwards,
               ashFloatCard 6.5s var(--delay, 0s) ease-in-out infinite;
    will-change: transform, translate, opacity;
}
.ash-card__media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
}
.ash-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ash-card__cap { display: flex; flex-direction: column; gap: 2px; padding: 9px 8px 5px; }
.ash-card__cap strong { font-family: var(--fonte-textos); color: #fff; font-size: 0.86rem; font-weight: 600; }
.ash-card__cap span { color: rgba(255,255,255,0.6); font-size: 0.74rem; }

.ash-card--cam  { top: 8%;  left: -9%; --rot: -3deg; }
.ash-card--pack { bottom: 7%; right: -10%; --rot: 3deg; width: 188px; }

/* selo AO VIVO */
.ash-rec {
    position: absolute;
    top: 9px; left: 9px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    border-radius: 100px;
    background: rgba(10, 5, 16, 0.62);
    backdrop-filter: blur(6px);
    color: #fff; font-family: var(--fonte-textos);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
}
.ash-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: ashPulse 1.6s ease-in-out infinite; }

/* Chips de notificação viva */
.ash-chip {
    position: absolute;
    z-index: 6;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px 11px 11px;
    border-radius: 15px;
    background: rgba(18, 9, 28, 0.78);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 22px 44px -16px rgba(0,0,0,0.66);
    white-space: nowrap;
    opacity: 0;
    translate: var(--px, 0px) var(--py, 0px);
    animation: ashIn .6s var(--delay, 0s) cubic-bezier(.2,.8,.2,1) forwards,
               ashFloatChip 7s var(--delay, 0s) ease-in-out infinite;
    will-change: transform, translate, opacity;
}
.ash-chip__ic {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, rgba(149,0,200,0.9), rgba(184,51,234,0.7));
    color: #fff;
    box-shadow: 0 0 16px rgba(149,0,200,0.45);
}
.ash-chip__ic--ok { background: linear-gradient(150deg, #1fb84a, #27c93f); box-shadow: 0 0 16px rgba(39,201,63,0.4); }
.ash-chip__ic .icon { width: 18px; height: 18px; }
.ash-chip__tx { display: flex; flex-direction: column; gap: 1px; }
.ash-chip__tx strong { color: #fff; font-family: var(--fonte-textos); font-size: 0.85rem; font-weight: 600; }
.ash-chip__tx span { color: rgba(255,255,255,0.58); font-size: 0.74rem; }

.ash-chip--door   { top: 17%; right: -11%; --rot: 2deg; }
.ash-chip--invite { bottom: 19%; left: -12%; --rot: -2deg; }

/* Keyframes */
@keyframes ashPhoneFloat {
    0%, 100% { transform: rotateY(-16deg) rotateX(5deg) translate3d(0,0,0); }
    50%      { transform: rotateY(-13deg) rotateX(3.5deg) translate3d(0,-16px,0); }
}
@keyframes ashFloatCard {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-13px) rotate(var(--rot, 0deg)); }
}
@keyframes ashFloatChip {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-11px) rotate(var(--rot, 0deg)); }
}
@keyframes ashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ashAura { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes ashPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* Tablet/mobile */
@media (max-width: 992px) {
    .hero-app-premium .app-hero-grid { grid-template-columns: 1fr; }
    .ash-stage { min-height: 520px; }
}
@media (max-width: 768px) {
    .ash-phone { transform: none; animation: ashPhoneFloat768 7s ease-in-out infinite; }
    @keyframes ashPhoneFloat768 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .ash-card--cam  { top: 2%;  left: -4%; width: 150px; }
    .ash-card--pack { bottom: 3%; right: -4%; width: 150px; }
    .ash-chip { padding: 9px 12px 9px 9px; }
    .ash-chip--door   { top: 12%; right: -4%; }
    .ash-chip--invite { bottom: 14%; left: -4%; }
    .ash-chip__tx span, .ash-card__cap span { display: none; }
}
@media (max-width: 520px) {
    .ash-card, .ash-chip { display: none; }
    .ash-aura { width: 320px; height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .ash-phone, .ash-card, .ash-chip, .ash-aura, .ash-rec i {
        animation: none !important;
    }
    .ash-card, .ash-chip { opacity: 1; }
    .ash-phone { transform: rotateY(-12deg) rotateX(4deg); }
}

/* =========================================================
   CONTROLE DE ACESSO — Plataforma ONE PLUS (namespace cpx-*)
   Cena CLARA/branca: tipografia forte + UMA tela real do ONE PLUS
   (livro ata) flutuando, mostrada COMPLETA, foco com respiro
   (ref. Stripe/Linear). Aurora suave da marca sobre branco.
   Motion ambiente (float + aurora + sweep), sem hover.
   ========================================================= */
.secao-cpx {
    position: relative;
    padding: clamp(96px, 12vw, 160px) 0;
    background: linear-gradient(180deg, #ffffff 0%, #faf7fc 56%, #f4eef9 100%);
    overflow: hidden;
    isolation: isolate;
}
.cpx-aurora { position: absolute; inset: -10%; z-index: 0; pointer-events: none; filter: blur(80px); }
.cpx-aurora span { position: absolute; display: block; border-radius: 50%; }
.cpx-aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -12%; top: -16%;
    background: radial-gradient(circle, rgba(149, 0, 200, 0.13), transparent 70%);
    animation: cpxAur1 23s ease-in-out infinite alternate; }
.cpx-aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -10%; top: 10%;
    background: radial-gradient(circle, rgba(184, 51, 234, 0.11), transparent 70%);
    animation: cpxAur2 27s ease-in-out infinite alternate; }
.cpx-aurora span:nth-child(3) { width: 36vw; height: 36vw; left: 26%; bottom: -20%;
    background: radial-gradient(circle, rgba(149, 0, 200, 0.09), transparent 70%);
    animation: cpxAur3 31s ease-in-out infinite alternate; }
.cpx-grid-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(149, 0, 200, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 0, 200, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at 62% 42%, #000 0%, transparent 74%);
            mask-image: radial-gradient(ellipse at 62% 42%, #000 0%, transparent 74%); }
.secao-cpx .container { position: relative; z-index: 2; }
/* ════════ Plataforma ONE PLUS — split assimétrico (copy + lista | tela herói) ════════ */
.cpx-split { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: clamp(34px, 4.5vw, 84px); align-items: center; }

/* ---- coluna de copy (claro) ---- */
.cpx-copy { max-width: 480px; }
.cpx-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fonte-textos);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #7a1fa8; }
.cpx-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #9500c8;
    box-shadow: 0 0 0 4px rgba(149, 0, 200, 0.12); animation: cpxDot 3s ease-in-out infinite; }
.cpx-copy h2 { font-family: var(--fonte-titulos); font-size: clamp(2.3rem, 3.4vw, 3.5rem);
    line-height: 1.0; color: #1a0a26; letter-spacing: -0.015em; margin: 16px 0 0; text-wrap: balance; }
.cpx-em { background: linear-gradient(96deg, #9500c8, #b833ea 50%, #6a1f8c);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cpx-lead { font-family: var(--fonte-textos); font-size: clamp(1.0rem, 1.4vw, 1.12rem);
    line-height: 1.6; color: #5a4a6a; margin: 18px 0 0; }

/* ---- capacidades em filetes (sem cards) ---- */
.cpx-list { list-style: none; margin: clamp(26px, 2.6vw, 40px) 0 0; padding: 0; }
.cpx-item { display: flex; gap: 15px; align-items: flex-start; padding: 17px 4px;
    border-top: 1px solid rgba(149, 0, 200, 0.12); transition: padding-left .3s ease; }
.cpx-item:last-child { border-bottom: 1px solid rgba(149, 0, 200, 0.12); }
.cpx-item:hover { padding-left: 10px; }
.cpx-item-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    color: #fff; background: linear-gradient(150deg, #9500c8, #6a1f8c); box-shadow: 0 8px 18px rgba(149, 0, 200, 0.28);
    transition: transform .3s ease; }
.cpx-item:hover .cpx-item-ico { transform: translateY(-2px) scale(1.05); }
.cpx-item-ico .icon { width: 19px; height: 19px; }
.cpx-item-txt strong { display: block; font-family: var(--fonte-textos); font-weight: 700; font-size: 1.02rem;
    color: #1a0a26; line-height: 1.2; margin-bottom: 3px; }
.cpx-item-txt > span { display: block; font-family: var(--fonte-textos); font-size: 0.88rem; line-height: 1.45; color: #5a4a6a; }

/* ---- tela ONE PLUS: herói à direita, sangra pra fora ---- */
.cpx-stage { position: relative; }
.cpx-glow { position: absolute; z-index: 0; inset: -12% -8% -12% -14%; pointer-events: none;
    background: radial-gradient(ellipse at 52% 50%, rgba(149, 0, 200, 0.32), rgba(184, 51, 234, 0.12) 46%, transparent 72%);
    filter: blur(54px); }
.cpx-screen { position: relative; z-index: 2; margin-right: clamp(-78px, -3.4vw, -8px);
    animation: cpxFloat 9s ease-in-out infinite; will-change: transform; }
.cpx-frame { position: relative; border-radius: 16px; border: 1px solid rgba(149, 0, 200, 0.14);
    box-shadow: 0 52px 110px -36px rgba(74, 16, 102, 0.46), 0 16px 40px rgba(74, 16, 102, 0.12), 0 0 0 1px rgba(149, 0, 200, 0.05); }
.cpx-frame .chrome-window__body img { display: block; width: 100%; height: auto; }
.cpx-sweep { position: absolute; left: 0; right: 0; top: 36px; bottom: 0; z-index: 2; pointer-events: none;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
    background-size: 240% 100%; background-repeat: no-repeat;
    animation: cpxSweep 7.5s ease-in-out infinite; }

@keyframes cpxAur1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(7%, 9%) scale(1.16); } }
@keyframes cpxAur2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-8%, 6%) scale(1.22); } }
@keyframes cpxAur3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5%, -7%) scale(1.12); } }
@keyframes cpxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cpxSweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -55% 0; } }
@keyframes cpxDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(149,0,200,0.12); } 50% { box-shadow: 0 0 0 7px rgba(149,0,200,0.20); } }

/* ---- responsivo: empilha (copy em cima, tela embaixo) ---- */
@media (max-width: 992px) {
    .cpx-split { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
    .cpx-copy { max-width: none; }
    .cpx-copy h2 { font-size: clamp(2.3rem, 8vw, 3.2rem); }
    .cpx-aurora { filter: blur(60px); }
    .cpx-screen { margin-right: 0; animation: none; }
    .cpx-glow { inset: -6% -4% 30% -4%; }
}

@media (prefers-reduced-motion: reduce) {
    .cpx-aurora span, .cpx-screen, .cpx-sweep, .cpx-eyebrow-dot { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   app-simples · HERO — fundo ambiente vivo + alinhamento do título
   Escopado 100% em .hero-app-premium (classes usadas só nesta página).
   Não altera regras compartilhadas de outros heros.
   ════════════════════════════════════════════════════════════════ */

/* alinhamento — o H1 herdava margin:auto (regra de heros centralizados) e
   ficava indentado vs. marker/parágrafo flush-left. Trava à esquerda.
   Só no desktop: em ≤992px o hero é centralizado (mantém o margin:auto). */
@media (min-width: 993px) {
    .hero-app-premium .app-hero-texto h1 {
        margin-left: 0;
        margin-right: 0;
        /* maior: teto antigo era 3.2rem (regra duplicada ~8707). Sobe o display. */
        font-size: clamp(3.4rem, 5vw, 4.8rem);
        line-height: 1.04;
    }
}

/* aura principal (direita): respira/deriva devagar — deixa de ser estática */
.hero-app-premium .hero-aura-bg {
    animation: asbgAuraBreath 16s ease-in-out infinite;
    will-change: transform, opacity;
}

/* profundidade à ESQUERDA (atrás do texto, antes preto-morto): dois glows
   brand derivando — sutis, baixa opacidade, fase própria (usa a div órfã) */
.hero-app-premium .grid-tech-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 46% at 15% 28%, rgba(149, 0, 200, 0.16) 0%, transparent 70%),
        radial-gradient(32% 38% at 30% 80%, rgba(72, 16, 102, 0.20) 0%, transparent 72%);
    animation: asbgDrift 28s ease-in-out infinite alternate;
    will-change: transform;
}

/* grão fino: textura que mata o preto chapado (banding). Estático, 5%. */
.hero-app-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='asn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23asn)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

@keyframes asbgAuraBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.82; }
    50%      { transform: translate(-50%, -53%) scale(1.10); opacity: 1; }
}
@keyframes asbgDrift {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(28px, -24px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-app-premium .hero-aura-bg,
    .hero-app-premium .grid-tech-overlay { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
   app-simples · "POR DENTRO DO APP" — palco interativo (substitui a
   antiga secao-sticky-showcase). Namespace aps-*. App-only; JS inline
   proprio (main.js antigo fica inerte). Guard prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */
.secao-app-showcase {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #07030c 0%, #0a0510 48%, #07030c 100%);
    padding: clamp(72px, 9vw, 124px) 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.aps-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.aps-glow {
    position: absolute; left: 50%; top: -12%; transform: translateX(-50%);
    width: 1100px; height: 720px; max-width: 130%;
    background: radial-gradient(ellipse at center, rgba(149,0,200,0.20) 0%, rgba(72,16,102,0.10) 38%, transparent 70%);
}
.aps-floor {
    position: absolute; left: 50%; bottom: -60px;
    transform: translateX(-50%) perspective(640px) rotateX(62deg);
    transform-origin: bottom center;
    width: 150%; height: 380px;
    background-image:
        linear-gradient(rgba(184,51,234,0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184,51,234,0.16) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
    opacity: 0.45;
}
.aps-inner { position: relative; z-index: 2; }
.aps-head { text-align: center; max-width: 760px; margin: 0 auto clamp(30px, 4vw, 52px); }
.aps-head .ash-marker { justify-content: center; display: inline-flex; }
.aps-title {
    font-family: var(--fonte-titulos); font-weight: 500; font-style: normal;
    font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em;
    color: #fff; margin: 14px 0 0; text-wrap: balance;
}
.aps-stage { position: relative; display: flex; flex-direction: column; align-items: center; }

/* copy que troca (acima do device) — stack absoluto, centralizado */
.aps-copy { position: relative; width: 100%; max-width: 640px; margin: 0 auto; min-height: 172px; text-align: center; }
.aps-panel {
    position: absolute; inset: 0; opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.aps-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.aps-kicker {
    display: inline-block; font-family: var(--fonte-textos); font-size: .78rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--acento-soft, #b833ea); margin-bottom: 12px;
}
.aps-panel h3 {
    font-family: var(--fonte-titulos); font-weight: 500; font-style: normal;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.12; color: #fff; margin: 0 0 12px; letter-spacing: -0.01em;
}
.aps-panel p { font-family: var(--fonte-textos); font-size: 1.05rem; line-height: 1.6; color: #b3b3b3; margin: 0 auto; max-width: 52ch; }

/* device */
.aps-device { position: relative; perspective: 1500px; margin: clamp(16px,3vw,32px) auto clamp(34px,5vw,54px); width: clamp(230px, 26vw, 300px); }
.aps-device-glow {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 150%; height: 124%;
    background: radial-gradient(ellipse at center, rgba(149,0,200,0.42) 0%, rgba(184,51,234,0.12) 42%, transparent 70%);
    filter: blur(26px); z-index: 0; animation: apsGlow 9s ease-in-out infinite;
}
.aps-phone {
    position: relative; z-index: 2; transform: rotateY(-13deg) rotateX(4deg);
    transform-style: preserve-3d; animation: apsFloat 7.5s ease-in-out infinite;
}
.aps-phone .aps-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transform: scale(1.05); filter: blur(7px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; pointer-events: none;
}
.aps-phone .aps-screen.is-active { opacity: 1; transform: none; filter: none; }

/* props flutuantes por feature */
.aps-props { position: absolute; inset: -4% -26%; z-index: 3; pointer-events: none; }
.aps-prop {
    position: absolute; top: 12%; right: 0; display: flex; align-items: center; gap: 11px;
    padding: 12px 15px; border-radius: 16px; background: rgba(20,10,30,0.82);
    border: 1px solid rgba(184,51,234,0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.5); min-width: 158px;
    opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.aps-prop.is-active { opacity: 1; transform: none; animation: apsPropBob 6s ease-in-out infinite .4s; }
.aps-prop-cap { font-family: var(--fonte-textos); font-size: .8rem; color: #cfd2d8; line-height: 1.3; }
.aps-prop-cap strong { display: block; color: #fff; font-weight: 600; font-size: .9rem; }
.aps-rec { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: #ff5470; }
.aps-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 0 rgba(255,59,92,.6); animation: apsRec 1.8s ease-out infinite; }
.aps-qr { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: #fff; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 3px; padding: 5px; position: relative; overflow: hidden; }
.aps-qr i { background: #1a0a26; border-radius: 2px; }
.aps-qr::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: linear-gradient(90deg, transparent, #b833ea, transparent); animation: apsScan 2.4s ease-in-out infinite; }
.aps-toggle { flex-shrink: 0; width: 46px; height: 26px; border-radius: 14px; background: linear-gradient(90deg,#9500c8,#b833ea); position: relative; }
.aps-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); animation: apsToggle 4s ease-in-out infinite; }

/* tabs / segmented progress */
.aps-tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: clamp(6px,1.6vw,16px); }
.aps-tab {
    appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; text-align: left;
    flex: 0 1 232px; min-width: 168px; display: flex; align-items: center; gap: 12px;
    padding: 14px 18px 17px; border-radius: 16px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07); color: #a8acb3; position: relative; overflow: hidden;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.aps-tab:hover { transform: translateY(-2px); border-color: rgba(184,51,234,0.30); color: #d7d2de; }
.aps-tab.is-active { background: rgba(149,0,200,0.12); border-color: rgba(184,51,234,0.45); color: #fff; }
.aps-tab__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #b3b3b3; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.aps-tab.is-active .aps-tab__ic { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; box-shadow: 0 8px 22px rgba(149,0,200,0.45); }
.aps-tab__ic .icon { width: 20px; height: 20px; }
.aps-tab__tx { font-family: var(--fonte-titulos); font-weight: 500; font-size: 1.05rem; }
.aps-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.06); }
.aps-tab__bar i { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg,#9500c8,#b833ea); }
.aps-tab.is-active .aps-tab__bar i { animation: apsProgress var(--aps-dwell, 5.2s) linear forwards; }

@keyframes apsFloat { 0%,100% { transform: rotateY(-13deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-11deg) rotateX(4deg) translateY(-12px); } }
@keyframes apsGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes apsPropBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes apsRec { 0% { box-shadow: 0 0 0 0 rgba(255,59,92,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,59,92,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); } }
@keyframes apsScan { 0% { top: 2px; } 50% { top: 28px; } 100% { top: 2px; } }
@keyframes apsToggle { 0%,45% { left: 3px; } 55%,100% { left: 23px; } }
@keyframes apsProgress { from { width: 0; } to { width: 100%; } }

@media (max-width: 760px) {
    .aps-props { display: none; }
    .aps-device { width: clamp(210px, 60vw, 260px); }
    .aps-tab { flex: 1 1 100%; }
    .aps-copy { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    .aps-phone, .aps-device-glow, .aps-prop.is-active, .aps-rec i, .aps-qr::after, .aps-toggle i { animation: none; }
    .aps-phone { transform: rotateY(-13deg) rotateX(4deg); }
    .aps-phone .aps-screen { transition: opacity .3s ease; transform: none; filter: none; }
    .aps-tab.is-active .aps-tab__bar i { animation: none; width: 100%; }
}


/* ── APS POLISH: device maior, parallax 3D, props ricos, profundidade ── */
.aps-device { width: clamp(264px, 30vw, 344px); }

/* parallax: rotacao no wrapper (segue o mouse); float (translateY) no phone */
.aps-tilt {
    transform: rotateX(var(--aps-rx, 4deg)) rotateY(var(--aps-ry, -13deg));
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}
.aps-device .aps-phone { transform: none; animation: apsFloat 7.5s ease-in-out infinite; }
@keyframes apsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* glow do device mais forte + pool de luz no chao (ancora) */
.aps-device-glow { width: 168%; height: 138%; }
.aps-device::after {
    content: ""; position: absolute; left: 50%; bottom: -7%; transform: translateX(-50%);
    width: 80%; height: 44px;
    background: radial-gradient(ellipse at center, rgba(149,0,200,0.50) 0%, rgba(149,0,200,0) 70%);
    filter: blur(13px); z-index: 0; pointer-events: none;
}
.aps-floor { opacity: 0.55; }

/* transicao de tela mais suave + nitidez no repouso */
.aps-phone .aps-screen { transform: scale(1.03); filter: blur(5px); }
.aps-phone .aps-screen.is-active { transform: none; filter: none; }

/* gloss de vidro no device */
.aps-phone::after {
    content: ""; position: absolute; inset: 0; border-radius: 34px; pointer-events: none; z-index: 5;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 32%);
}

/* props maiores e mais ricos */
.aps-props { inset: -2% -28%; }
.aps-prop { gap: 12px; padding: 13px 16px; min-width: 172px; border-radius: 18px; }
.aps-prop--cam { top: 7%; align-items: flex-start; }
.aps-prop--qr, .aps-prop--auto { top: 13%; }
.aps-prop-thumb { position: relative; flex-shrink: 0; width: 80px; height: 58px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); }
.aps-prop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aps-prop-thumb .aps-rec { position: absolute; left: 7px; top: 7px; padding: 3px 6px; border-radius: 6px; background: rgba(7,3,12,0.6); backdrop-filter: blur(4px); }

/* vinheta sutil pra dar profundidade */
.secao-app-showcase::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(0,0,0,0.34) 100%);
}

@media (max-width: 760px) {
    .aps-props { display: none; }
    .aps-device::after { bottom: -5%; }
}
@media (prefers-reduced-motion: reduce) {
    .aps-tilt { transition: none; }
    .aps-device .aps-phone { animation: none; }
}


/* ── APS v2: layout 2 colunas (device + lista) — usa o espaco, menos vazio ── */
.aps-layout { display: grid; grid-template-columns: 0.94fr 1.06fr; align-items: center; gap: clamp(30px, 4.5vw, 78px); }
.aps-stage-col { display: flex; justify-content: center; position: relative; }
.aps-content-col { position: relative; }
.aps-layout .aps-device { width: clamp(228px, 23vw, 292px); margin: 0 auto; }

/* header passa pra coluna da direita, alinhado a esquerda */
.aps-content-col .aps-head { text-align: left; max-width: none; margin: 0 0 clamp(20px, 2.6vw, 32px); }
.aps-content-col .aps-head .ash-marker { justify-content: flex-start; display: inline-flex; }
.aps-content-col .aps-title { font-size: clamp(1.7rem, 2.6vw, 2.6rem); margin-top: 12px; }

/* lista de features — ativa expande */
.aps-list { display: flex; flex-direction: column; gap: 12px; }
.aps-item {
    appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; text-align: left; width: 100%;
    display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
    padding: 18px 22px 20px; border-radius: 18px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: #cfd2d8;
    position: relative; overflow: hidden;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.aps-item:hover { border-color: rgba(184,51,234,0.30); transform: translateX(3px); }
.aps-item.is-active { background: rgba(149,0,200,0.10); border-color: rgba(184,51,234,0.42); }
.aps-item__ic { width: 48px; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #9a9aa2; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.aps-item.is-active .aps-item__ic { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; box-shadow: 0 8px 22px rgba(149,0,200,0.45); }
.aps-item__ic .icon { width: 22px; height: 22px; }
.aps-item__title { display: block; font-family: var(--fonte-titulos); font-weight: 500; font-size: 1.32rem; color: #d7d2de; transition: color .3s ease; }
.aps-item.is-active .aps-item__title { color: #fff; }
.aps-item__desc { display: block; max-height: 0; opacity: 0; overflow: hidden; color: #a8acb3; font-family: var(--fonte-textos); font-size: 1rem; line-height: 1.55; transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .4s ease, margin-top .4s ease; }
.aps-item.is-active .aps-item__desc { max-height: 220px; opacity: 1; margin-top: 10px; }
.aps-item__desc strong { color: #fff; font-weight: 600; }
.aps-item__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.aps-item__bar i { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg,#9500c8,#b833ea); }
.aps-item.is-active .aps-item__bar i { animation: apsProgress var(--aps-dwell, 5.2s) linear forwards; }

/* props ficam coladas no device (nao invadem a coluna de texto) */
.aps-layout .aps-props { inset: 0 -8%; }
.aps-layout .aps-prop--cam { top: 3%; right: -4%; }
.aps-layout .aps-prop--qr, .aps-layout .aps-prop--auto { top: 8%; right: -4%; }

@media (max-width: 900px) {
    .aps-layout { grid-template-columns: 1fr; gap: 32px; }
    .aps-content-col .aps-head { text-align: center; }
    .aps-content-col .aps-head .ash-marker { justify-content: center; }
    .aps-layout .aps-props { display: none; }
}


/* fix: card de Camera (AO VIVO) tampava o topo da tela — reposiciona pro
   rodape-direito (estilo notificacao), sobrepondo so a borda inferior */
.aps-layout .aps-props { inset: 0; }
.aps-layout .aps-prop { max-width: 188px; }
.aps-layout .aps-prop--cam { top: auto; bottom: 7%; right: -7%; }
.aps-layout .aps-prop--qr,
.aps-layout .aps-prop--auto { top: auto; bottom: 12%; right: -7%; }
.aps-prop-thumb { width: 70px; height: 52px; }

/* fix#2: AO VIVO sai de cima da thumb (estava sendo cortado) e vai pra legenda */
.aps-layout .aps-prop--cam { max-width: 208px; }
.aps-prop--cam .aps-prop-cap { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.aps-prop--cam .aps-rec { background: rgba(255, 59, 92, 0.14); padding: 2px 7px; border-radius: 5px; }
.aps-prop--cam .aps-prop-sub { font-size: .76rem; color: #b6b9c0; }
.aps-prop-thumb { width: 76px; height: 56px; }


/* ════════════════════════════════════════════════════════════════
   PARA ALÉM DO ÓBVIO — díptico de telemetria (light). Namespace alm-*.
   App-only; NÃO toca .phone-shot-alem (usada no index). reduced-motion ok.
   ════════════════════════════════════════════════════════════════ */
.secao-app-alem {
    position: relative; overflow: hidden;
    padding: clamp(72px, 9vw, 120px) 0;
    background: linear-gradient(180deg, #faf7fc 0%, #f4eef9 58%, #faf7fc 100%);
}
.alm-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse at 82% 12%, rgba(149,0,200,0.10) 0%, transparent 52%),
        radial-gradient(ellipse at 14% 86%, rgba(184,51,234,0.08) 0%, transparent 52%),
        linear-gradient(135deg, rgba(149,0,200,0.025) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(45deg, rgba(149,0,200,0.025) 1px, transparent 1px) 0 0 / 34px 34px;
}
.secao-app-alem .container { position: relative; z-index: 2; }

.alm-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.alm-head .alm-eyebrow { justify-content: center; display: inline-flex; color: rgba(106,31,140,0.95); }
.alm-head .alm-eyebrow .hero-pr-marker-line { background: linear-gradient(90deg, #9500c8, transparent); }
.alm-title { font-family: var(--fonte-titulos); font-weight: 500; font-style: normal; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: #1a0a26; margin: 14px 0 16px; text-wrap: balance; }
.alm-lead { font-family: var(--fonte-textos); font-size: 1.08rem; line-height: 1.6; color: #5a4a6a; margin: 0 auto; max-width: 60ch; }

.alm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 30px); }
.alm-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: #fff; border: 1px solid rgba(149,0,200,0.10); border-radius: 26px;
    box-shadow: 0 4px 16px rgba(149,0,200,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
    transition: border-color .3s ease, box-shadow .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.alm-card:hover { border-color: rgba(184,51,234,0.4); box-shadow: 0 24px 50px rgba(149,0,200,0.13); transform: translateY(-5px); }
.alm-card-top { padding: clamp(26px, 3vw, 38px) clamp(26px, 3vw, 38px) 0; }
.alm-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fonte-textos); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a1f8c; }
.alm-tag-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(149,0,200,0.08); color: var(--cor-primaria); }
.alm-tag-ic .icon { width: 17px; height: 17px; }
.alm-card h3 { font-family: var(--fonte-titulos); font-weight: 500; font-style: normal; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.14; color: #1a0a26; margin: 16px 0 12px; letter-spacing: -0.01em; }
.alm-card-top p { font-family: var(--fonte-textos); font-size: 1rem; line-height: 1.6; color: #5a4a6a; margin: 0; }

.alm-stage { position: relative; margin-top: clamp(18px, 2.5vw, 28px); height: clamp(210px, 23vw, 264px); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.alm-glow { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: 80%; height: 90%; background: radial-gradient(ellipse at center, rgba(149,0,200,0.16) 0%, transparent 66%); filter: blur(10px); z-index: 0; }
.alm-phone { width: clamp(206px, 17vw, 234px); position: relative; z-index: 1; animation: almFloat 8s ease-in-out infinite; }
.alm-card:nth-child(2) .alm-phone { animation-delay: -2.6s; }

.alm-readout { position: absolute; top: 8%; right: 5%; z-index: 3; display: flex; flex-direction: column; gap: 8px; min-width: 138px; padding: 13px 15px; border-radius: 16px; background: rgba(255,255,255,0.94); border: 1px solid rgba(149,0,200,0.14); box-shadow: 0 16px 36px rgba(149,0,200,0.16); backdrop-filter: blur(6px); animation: almBob 6.5s ease-in-out infinite .5s; }
.alm-live { display: inline-flex; align-items: center; gap: 7px; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9500c8; }
.alm-live i { width: 7px; height: 7px; border-radius: 50%; background: #b833ea; box-shadow: 0 0 0 0 rgba(184,51,234,.5); animation: almPulse 1.8s ease-out infinite; }
.alm-readout-cap { font-family: var(--fonte-textos); font-size: .74rem; color: #5a4a6a; line-height: 1.3; }
.alm-readout-cap strong { display: block; color: #1a0a26; font-weight: 600; font-size: .84rem; }
.alm-gauge { height: 8px; border-radius: 5px; background: rgba(149,0,200,0.10); overflow: hidden; }
.alm-gauge-fill { display: block; height: 100%; width: 33%; border-radius: 5px; background: linear-gradient(90deg, #9500c8, #b833ea); animation: almFill 3s cubic-bezier(.4,0,.2,1) infinite; }
.alm-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.alm-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #b833ea, #9500c8); height: 45%; animation: almBars 2.4s ease-in-out infinite; }
.alm-bars i:nth-child(2) { animation-delay: .15s; }
.alm-bars i:nth-child(3) { animation-delay: .3s; }
.alm-bars i:nth-child(4) { animation-delay: .45s; }
.alm-bars i:nth-child(5) { animation-delay: .6s; }

@keyframes almFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes almBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes almPulse { 0% { box-shadow: 0 0 0 0 rgba(184,51,234,.5); } 70% { box-shadow: 0 0 0 7px rgba(184,51,234,0); } 100% { box-shadow: 0 0 0 0 rgba(184,51,234,0); } }
@keyframes almFill { 0%,100% { width: 30%; } 50% { width: 40%; } }
@keyframes almBars { 0%,100% { height: 35%; } 50% { height: 92%; } }

@media (max-width: 860px) {
    .alm-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .alm-phone, .alm-readout, .alm-live i, .alm-gauge-fill, .alm-bars i { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
   IMPACTO NA OPERAÇÃO — offload da portaria pro morador (dark).
   Namespace imp-*. App-only. reduced-motion ok.
   ════════════════════════════════════════════════════════════════ */
.secao-ecossistema-dark { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; background: linear-gradient(180deg, #07010a 0%, #0a0510 50%, #07010a 100%); }
.imp-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 80% 16%, rgba(149,0,200,0.16) 0%, transparent 54%), radial-gradient(ellipse at 16% 88%, rgba(72,16,102,0.22) 0%, transparent 56%); }
.secao-ecossistema-dark .container { position: relative; z-index: 2; }

.imp-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(36px, 5vw, 78px); }
.imp-title { font-family: var(--fonte-titulos); font-weight: 500; font-style: normal; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 16px 0 14px; text-wrap: balance; }
.imp-lead { font-family: var(--fonte-textos); font-size: 1.08rem; line-height: 1.6; color: #b3b3b3; margin: 0; max-width: 46ch; }

.imp-feats { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }
.imp-feat { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.imp-feat:hover { background: rgba(149,0,200,0.07); border-color: rgba(184,51,234,0.32); transform: translateX(3px); }
.imp-feat-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(149,0,200,0.12); border: 1px solid rgba(184,51,234,0.22); color: var(--acento-soft, #b833ea); }
.imp-feat-ic .icon { width: 21px; height: 21px; }
.imp-feat-tx h3 { font-family: var(--fonte-titulos); font-weight: 500; font-size: 1.12rem; color: #fff; margin: 0 0 4px; }
.imp-feat-tx p { font-family: var(--fonte-textos); font-size: .92rem; line-height: 1.5; color: #a8acb3; margin: 0; }

/* visual: fluxo de offload (Portaria -> tokens -> Morador) */
.imp-visual { display: flex; justify-content: center; }
.imp-flow { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.imp-source { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(20,10,30,0.7); border: 1px solid rgba(184,51,234,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.imp-source-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(149,0,200,0.18); color: #f2c5ff; }
.imp-source-ic .icon { width: 16px; height: 16px; }
.imp-source-lb { font-family: var(--fonte-textos); font-weight: 600; font-size: .82rem; letter-spacing: .06em; color: #e8d4f5; text-transform: uppercase; }

.imp-track { position: relative; width: 2px; height: clamp(120px, 15vw, 168px); margin: 6px 0; background: linear-gradient(180deg, rgba(184,51,234,0.55) 0%, rgba(184,51,234,0.06) 100%); overflow: visible; }
.imp-token { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; padding: 6px 13px; border-radius: 999px; background: rgba(20,10,30,0.92); border: 1px solid rgba(184,51,234,0.4); color: #f2c5ff; font-family: var(--fonte-textos); font-size: .74rem; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,0.5); animation: impFall 5.6s linear infinite; }
.imp-token--1 { animation-delay: 0s; }
.imp-token--2 { animation-delay: 1.4s; }
.imp-token--3 { animation-delay: 2.8s; }
.imp-token--4 { animation-delay: 4.2s; }

.imp-device { position: relative; display: flex; flex-direction: column; align-items: center; }
.imp-device-glow { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 150%; height: 120%; background: radial-gradient(ellipse at center, rgba(149,0,200,0.42) 0%, rgba(184,51,234,0.12) 44%, transparent 70%); filter: blur(24px); z-index: 0; animation: impGlow 9s ease-in-out infinite; }
.imp-phone { width: clamp(196px, 16vw, 224px); position: relative; z-index: 1; animation: impFloat 7.5s ease-in-out infinite; }
.imp-device-lb { margin-top: 16px; font-family: var(--fonte-textos); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #e8d4f5; position: relative; z-index: 1; }

@keyframes impFall { 0% { top: -4px; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes impFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes impGlow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

@media (max-width: 900px) {
    .imp-layout { grid-template-columns: 1fr; gap: 48px; }
    .imp-visual { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .imp-token, .imp-phone, .imp-device-glow { animation: none; }
    .imp-token--2, .imp-token--3, .imp-token--4 { display: none; }
    .imp-token--1 { top: 40%; opacity: 1; }
}


/* fix: topo do celular era cortado pelo clip do stage no pico do float (subia).
   Float passa a descer + folga no topo -> topo nunca corta. */
.alm-stage { padding-top: 12px; }
@keyframes almFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }


/* ════════════════════════════════════════════════════════════════
   MUITO ALÉM DO ACESSO — mural editorial de mockups reais (light).
   Namespace xtr-*. App-only. reduced-motion ok.
   ════════════════════════════════════════════════════════════════ */
.secao-app-extras-clara { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) 0; background: linear-gradient(180deg, #faf7fc 0%, #f4eef9 58%, #faf7fc 100%); }
.xtr-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 16% 14%, rgba(149,0,200,0.10) 0%, transparent 50%), radial-gradient(ellipse at 86% 88%, rgba(184,51,234,0.08) 0%, transparent 52%), linear-gradient(135deg, rgba(149,0,200,0.025) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(45deg, rgba(149,0,200,0.025) 1px, transparent 1px) 0 0 / 34px 34px; }
.secao-app-extras-clara .container { position: relative; z-index: 2; }

.xtr-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.xtr-head .xtr-eyebrow { justify-content: center; display: inline-flex; color: rgba(106,31,140,0.95); }
.xtr-head .xtr-eyebrow .hero-pr-marker-line { background: linear-gradient(90deg, #9500c8, transparent); }
.secao-app-extras-clara .xtr-title { font-family: var(--fonte-titulos); font-weight: 500; font-style: normal; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: #1a0a26; margin: 14px 0 16px; text-wrap: balance; }
.secao-app-extras-clara .xtr-lead { font-family: var(--fonte-textos); font-size: 1.08rem; line-height: 1.6; color: #5a4a6a; margin: 0 auto; max-width: 56ch; }

.xtr-mural { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: clamp(16px, 2.2vw, 38px); align-items: start; max-width: 1060px; margin: 0 auto; }
.xtr-feat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.xtr-feat--side { margin-top: clamp(26px, 4vw, 60px); }
.xtr-shot { position: relative; display: flex; justify-content: center; width: 100%; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.xtr-glow { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 132%; height: 112%; background: radial-gradient(ellipse at center, rgba(149,0,200,0.14) 0%, transparent 66%); filter: blur(14px); z-index: 0; }
.xtr-phone { position: relative; z-index: 1; width: 100%; max-width: 198px; animation: xtrFloat 8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.xtr-feat--mid .xtr-phone { max-width: 230px; }
.xtr-feat:first-child .xtr-shot { transform: rotate(-3deg); }
.xtr-feat:last-child .xtr-shot { transform: rotate(3deg); }
.xtr-feat:hover .xtr-shot { transform: rotate(0deg) translateY(-6px); }
.xtr-cap { margin-top: clamp(20px, 2.5vw, 30px); max-width: 320px; }
.secao-app-extras-clara .xtr-cap h3 { font-family: var(--fonte-titulos); font-weight: 500; font-style: normal; font-size: clamp(1.18rem, 1.6vw, 1.4rem); color: #1a0a26; margin: 0 0 8px; letter-spacing: -0.01em; }
.secao-app-extras-clara .xtr-cap p { font-family: var(--fonte-textos); font-size: .95rem; line-height: 1.55; color: #5a4a6a; margin: 0; }

@keyframes xtrFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 860px) {
    .xtr-mural { grid-template-columns: 1fr; gap: 46px; max-width: 360px; }
    .xtr-feat--side { margin-top: 0; }
    .xtr-feat:first-child .xtr-shot, .xtr-feat:last-child .xtr-shot { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xtr-phone { animation: none; }
}


/* fundo branco (em vez do lavanda/roxo) — pedido do usuário */
.secao-app-extras-clara { background: #fff; }
.xtr-bg { background: none; }

/* ============================================================
   HERO ENTREGA SIMPLES — studio dark (redesign 2026-06-22, EH-001)
   Substitui o hero claro bugado (texto branco em fundo claro).
   Namespace .hero-entrega-studio / .eh-*  — reusa .phone-shot, .badge-encomenda, .btn.
   Anexado ao fim => vence o cascade das regras antigas espalhadas de .hero-entregas.
   ============================================================ */
.hero-entrega-studio {
    background: radial-gradient(125% 120% at 80% 16%, #170a26 0%, #0c0617 42%, #07010a 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: clamp(120px, 14vw, 168px) 0 clamp(80px, 9vw, 112px);
    overflow: hidden;
}

.hero-entrega-studio .eh-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-entrega-studio .eh-glow { position: absolute; border-radius: 50%; filter: blur(36px); }
.hero-entrega-studio .eh-glow--1 {
    top: -12%; right: -6%; width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(149,0,200,0.30) 0%, transparent 66%);
}
.hero-entrega-studio .eh-glow--2 {
    bottom: -22%; left: -12%; width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(72,16,102,0.34) 0%, transparent 70%);
}
.hero-entrega-studio .eh-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(78% 72% at 72% 38%, #000 0%, transparent 76%);
    mask-image: radial-gradient(78% 72% at 72% 38%, #000 0%, transparent 76%);
}

.hero-entrega-studio .container { position: relative; z-index: 2; }

.hero-entrega-studio .eh-grid-2 {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 86px);
    align-items: center;
}

/* ---- copy ---- */
.hero-entrega-studio .eh-copy h1 {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.8rem, 5.2vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 18px 0 22px;
}
.hero-entrega-studio .eh-copy p {
    color: rgba(255,255,255,0.74);
    font-size: clamp(1.02rem, 1.2vw, 1.18rem);
    line-height: 1.6;
    max-width: 30em;
    margin-bottom: 32px;
}

/* ghost button — variante dark explícita */
.hero-entrega-studio .btn--ghost {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.45);
}
.hero-entrega-studio .btn--ghost:hover {
    background: rgba(255,255,255,0.11);
    border-color: var(--acento-soft);
    color: #fff;
}

/* spec row */
.hero-entrega-studio .eh-spec {
    list-style: none; padding: 22px 0 0; margin: 38px 0 0;
    display: flex; flex-wrap: wrap; gap: 30px;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.hero-entrega-studio .eh-spec li { display: flex; flex-direction: column; gap: 3px; }
.hero-entrega-studio .eh-spec strong {
    font-family: var(--fonte-titulos);
    font-size: 1.18rem; font-weight: 600; color: #fff;
}
.hero-entrega-studio .eh-spec span { font-size: 0.82rem; color: rgba(255,255,255,0.55); }

/* ---- stage (visual) ---- */
.hero-entrega-studio .eh-stage {
    position: relative;
    min-height: 540px;
    display: flex; align-items: center; justify-content: center;
}

/* placa de produto (clara) com o Smart Locker */
.hero-entrega-studio .eh-plate {
    position: relative;
    width: min(400px, 80%);
    padding: 30px 30px 26px;
    border-radius: 28px;
    background: linear-gradient(165deg, #e9ebef 0%, #e1e3e8 100%);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow:
        0 44px 80px -22px rgba(0,0,0,0.62),
        0 0 0 1px rgba(149,0,200,0.10),
        inset 0 1px 0 rgba(255,255,255,0.9);
    z-index: 2;
}
.hero-entrega-studio .eh-plate-shine {
    position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 32%);
}
.hero-entrega-studio .eh-locker {
    position: relative; z-index: 1;
    width: 100%; height: auto; display: block;
    border-radius: 12px;
}
.hero-entrega-studio .eh-floor {
    position: absolute; left: 50%; bottom: -42px; transform: translateX(-50%);
    width: 76%; height: 56px; z-index: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 72%);
    filter: blur(7px);
}

/* phone sobreposto à placa */
.hero-entrega-studio .phone-shot-flutuante {
    position: absolute; left: 1%; bottom: 3%;
    max-width: 208px; z-index: 4;
    filter: drop-shadow(0 30px 52px rgba(0,0,0,0.55));
}
/* badge "Nova encomenda" — padrão glass escuro da marca (igual glass-hologram/glass-metric do BI),
   substitui o card branco genérico. Ícone em chip com glow + ping de status "ao vivo". */
.hero-entrega-studio .badge-encomenda {
    top: 22px; right: -46px;
    background: rgba(15, 5, 25, 0.82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(149, 0, 200, 0.42);
    border-radius: 16px;
    padding: 13px 18px;
    box-shadow: 0 22px 44px rgba(0,0,0,0.55), inset 0 0 22px rgba(149,0,200,0.12);
}
.hero-entrega-studio .badge-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(149, 0, 200, 0.22);
    color: var(--acento-soft);
    box-shadow: 0 0 16px rgba(184, 51, 234, 0.40), inset 0 0 0 1px rgba(180, 51, 234, 0.35);
    position: relative;
}
.hero-entrega-studio .badge-icon::after {
    content: ""; position: absolute; top: -4px; right: -4px;
    width: 11px; height: 11px; border-radius: 50%;
    background: linear-gradient(135deg, #b833ea, #9500c8);
    border: 2px solid rgba(15, 5, 25, 0.9);
    box-shadow: 0 0 10px rgba(184, 51, 234, 0.6);
    animation: ehNotifPing 2.4s ease-in-out infinite;
}
@keyframes ehNotifPing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 51, 234, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(184, 51, 234, 0); }
}
.hero-entrega-studio .badge-info strong { color: #fff; font-size: 0.92rem; }
.hero-entrega-studio .badge-info span { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
    .hero-entrega-studio .badge-icon::after { animation: none; }
}

/* ---- responsivo ---- */
@media (max-width: 980px) {
    .hero-entrega-studio { min-height: auto; padding: 128px 0 70px; }
    .hero-entrega-studio .eh-grid-2 { grid-template-columns: 1fr; text-align: center; gap: 54px; }
    .hero-entrega-studio .eh-copy p { margin-left: auto; margin-right: auto; }
    .hero-entrega-studio .eh-spec { justify-content: center; }
    .hero-entrega-studio .eh-stage { min-height: 0; }
    .hero-entrega-studio .eh-plate { width: min(340px, 76%); margin: 0 auto; }
    .hero-entrega-studio .phone-shot-flutuante { left: 2%; bottom: -8px; max-width: 148px; }
    .hero-entrega-studio .badge-encomenda { right: -8px; }
}
@media (max-width: 560px) {
    .hero-entrega-studio .eh-spec { gap: 16px; }
    .hero-entrega-studio .eh-spec strong { font-size: 1.05rem; }
    .hero-entrega-studio .eh-plate { width: 80%; }
    .hero-entrega-studio .phone-shot-flutuante { max-width: 124px; left: 0; }
}

/* ============================================================
   A JORNADA — linha do tempo da encomenda (tracking artifact, EH-002)
   Substitui os 3 cards numerados genéricos. Artefato do App Simples:
   glass escuro da marca (padrão glass-hologram / badge do hero), estados
   com horário + status, sem numeral, sem pulse-rail decorativo.
   ============================================================ */
.secao-jornada-dark .jor-scene {
    display: flex; justify-content: center;
    margin-top: clamp(40px, 5vw, 66px);
}
.secao-jornada-dark .jor-card {
    position: relative;
    width: min(760px, 100%);
    background: rgba(15, 5, 25, 0.62);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border: 1px solid rgba(149, 0, 200, 0.30);
    border-radius: 22px;
    box-shadow: 0 44px 90px -34px rgba(0,0,0,0.72), inset 0 0 44px rgba(149,0,200,0.06);
    padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 38px);
}
/* header */
.secao-jornada-dark .jor-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.secao-jornada-dark .jor-id { display: flex; align-items: center; gap: 13px; }
.secao-jornada-dark .jor-id__ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: rgba(149,0,200,0.18); color: var(--acento-soft);
    box-shadow: inset 0 0 0 1px rgba(180,51,234,0.32);
}
.secao-jornada-dark .jor-id__ic .icon { width: 20px; height: 20px; }
.secao-jornada-dark .jor-id__tx strong {
    display: block; font-family: var(--fonte-titulos); font-size: 1.14rem;
    color: #fff; letter-spacing: 0.01em; line-height: 1.2;
}
.secao-jornada-dark .jor-id__tx span { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.secao-jornada-dark .jor-live {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #5ef08a; background: rgba(39,201,63,0.10);
    border: 1px solid rgba(39,201,63,0.30); border-radius: 100px; padding: 6px 13px;
}
.secao-jornada-dark .jor-live__dot {
    width: 8px; height: 8px; border-radius: 50%; background: #27c93f;
    box-shadow: 0 0 8px rgba(39,201,63,0.85);
}
/* states */
.secao-jornada-dark .jor-states { list-style: none; margin: 0; padding: 6px 0 0; }
.secao-jornada-dark .jor-state {
    position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 20px;
    padding: 22px 0;
}
.secao-jornada-dark .jor-state__rail { position: relative; display: flex; justify-content: center; }
.secao-jornada-dark .jor-state__node {
    position: relative; z-index: 2;
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    display: grid; place-items: center;
    background: rgba(149,0,200,0.16); color: var(--acento-soft);
    box-shadow: inset 0 0 0 1px rgba(180,51,234,0.30);
}
.secao-jornada-dark .jor-state__node .icon { width: 20px; height: 20px; }
/* linha conectora entre os nós */
.secao-jornada-dark .jor-state:not(:last-child) .jor-state__rail::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: 50px; bottom: -38px; width: 2px;
    background: linear-gradient(180deg, rgba(180,51,234,0.55) 0%, rgba(180,51,234,0.12) 100%);
}
/* concluído */
.secao-jornada-dark .jor-state--done .jor-state__node {
    background: linear-gradient(135deg, rgba(149,0,200,0.95), rgba(72,16,102,0.95));
    color: #fff; box-shadow: 0 8px 22px rgba(149,0,200,0.42);
}
/* agora */
.secao-jornada-dark .jor-state--now .jor-state__node {
    background: rgba(149,0,200,0.22); color: var(--acento-soft);
    box-shadow: 0 0 0 4px rgba(149,0,200,0.12), inset 0 0 0 1px rgba(180,51,234,0.55);
}
.secao-jornada-dark .jor-state--now .jor-state__node::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, #b833ea, #9500c8);
    border: 2px solid #0a0510;
    box-shadow: 0 0 10px rgba(184,51,234,0.6);
    animation: ehNotifPing 2.4s ease-in-out infinite;
}
/* body */
.secao-jornada-dark .jor-state__top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 7px;
}
.secao-jornada-dark .jor-state__title {
    font-family: var(--fonte-titulos); font-size: 1.2rem; color: #fff; margin: 0; line-height: 1.2;
}
.secao-jornada-dark .jor-tag {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 100px;
}
.secao-jornada-dark .jor-tag--done {
    color: rgba(255,255,255,0.62); background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}
.secao-jornada-dark .jor-tag--now {
    color: var(--acento-soft); background: rgba(149,0,200,0.18);
    border: 1px solid rgba(180,51,234,0.42);
}
.secao-jornada-dark .jor-state__time {
    margin-left: auto; font-size: 0.82rem; color: rgba(255,255,255,0.45); white-space: nowrap;
}
.secao-jornada-dark .jor-state__desc {
    margin: 0; font-size: 0.96rem; line-height: 1.56; color: rgba(255,255,255,0.62); max-width: 48ch;
}
/* mobile */
@media (max-width: 620px) {
    .secao-jornada-dark .jor-state { grid-template-columns: 40px 1fr; gap: 15px; }
    .secao-jornada-dark .jor-state__node { width: 40px; height: 40px; border-radius: 11px; }
    .secao-jornada-dark .jor-state:not(:last-child) .jor-state__rail::after { top: 44px; }
    .secao-jornada-dark .jor-state__time { margin-left: 0; flex-basis: 100%; }
    .secao-jornada-dark .jor-card__head { flex-wrap: wrap; }
}

/* ============================================================
   GESTÃO TRANSPARENTE — refino premium (seção clara, EH-003)
   eyebrow-mini + features em chip da marca + badge de status reestilizado.
   ============================================================ */
.secao-gestao-entregas .gestao-visual::before {
    content: ""; position: absolute; inset: -8% -6%;
    background: radial-gradient(60% 55% at 50% 45%, rgba(149,0,200,0.10) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.secao-gestao-entregas .phone-shot-gestao { position: relative; z-index: 1; }

/* badge de status — premium na seção clara, no padrão de tag do app real */
.secao-gestao-entregas .gst-status {
    bottom: 46px; right: -26px;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(20,8,30,0.07);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 26px 52px -14px rgba(72,16,102,0.26);
}
.secao-gestao-entregas .gst-status__id {
    font-size: 0.76rem; color: #8a8593; font-weight: 500; letter-spacing: 0.02em;
}
.secao-gestao-entregas .gst-status__tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--fonte-titulos); font-size: 0.98rem; color: #481066;
    background: rgba(149,0,200,0.09); border: 1px solid rgba(149,0,200,0.22);
    border-radius: 100px; padding: 5px 13px 5px 11px;
}
.secao-gestao-entregas .gst-status__dot {
    width: 9px; height: 9px; border-radius: 50%; background: #9500c8;
    box-shadow: 0 0 0 3px rgba(149,0,200,0.16);
}

/* features — chip de ícone da marca + divisores hairline */
.secao-gestao-entregas .lista-gestao-features { gap: 0; }
.secao-gestao-entregas .gestao-item { gap: 18px; align-items: flex-start; padding: 26px 0; }
.secao-gestao-entregas .gestao-item + .gestao-item { border-top: 1px solid rgba(20,8,30,0.07); }
.secao-gestao-entregas .gestao-item:first-child { padding-top: 6px; }
.secao-gestao-entregas .gestao-item .icon-wrap {
    width: 46px; height: 46px; flex: none; border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, rgba(149,0,200,0.11), rgba(149,0,200,0.03));
    border: 1px solid rgba(149,0,200,0.16);
    color: var(--cor-primaria);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.secao-gestao-entregas .gestao-item .icon-wrap .icon { width: 20px; height: 20px; }
.secao-gestao-entregas .gestao-item:hover .icon-wrap {
    background: var(--cor-primaria); color: #fff;
    box-shadow: 0 10px 22px rgba(149,0,200,0.28);
}
.secao-gestao-entregas .gestao-item h4 {
    font-family: var(--fonte-titulos); font-size: 1.2rem; color: var(--ink-900);
    margin: 2px 0 5px;
}
.secao-gestao-entregas .gestao-item > div > p { color: #5a5462; font-size: 0.96rem; line-height: 1.56; margin: 0; }
.secao-gestao-entregas .gestao-texto .eyebrow-mini { margin-bottom: 18px; }

@media (max-width: 880px) {
    .secao-gestao-entregas .gst-status { right: -10px; bottom: 24px; }
}

/* ============================================================
   GESTÃO TRANSPARENTE — composição imersiva "interface explodida" (EH-003b)
   Palco claro + phone ancorado + cards de UI reais flutuando.
   ============================================================ */
.secao-gestao-entregas .gestao-visual::before { content: none; }   /* remove glow antigo */
.secao-gestao-entregas .gestao-visual { overflow: visible; }

.secao-gestao-entregas .gst-stage {
    position: relative; display: flex; justify-content: center; align-items: center;
    padding: 24px 0;
}
.secao-gestao-entregas .gst-stage__glow {
    position: absolute; inset: -12% -10%;
    background: radial-gradient(56% 50% at 50% 42%, rgba(149,0,200,0.14) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.secao-gestao-entregas .gst-stage__grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(72,16,102,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72,16,102,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(58% 60% at 50% 45%, #000 0%, transparent 72%);
    mask-image: radial-gradient(58% 60% at 50% 45%, #000 0%, transparent 72%);
}
/* phone real, reto, apresentado no palco premium */
.secao-gestao-entregas .gst-phone {
    position: relative; z-index: 2;
    max-width: 300px;
    box-shadow: 0 42px 80px -28px rgba(72,16,102,0.42);
    border-radius: 46px;
}
/* sombra de chão — grounding do phone */
.secao-gestao-entregas .gst-stage::after {
    content: ""; position: absolute; z-index: 1;
    left: 50%; bottom: 3%; transform: translateX(-50%);
    width: 66%; height: 48px;
    background: radial-gradient(ellipse at center, rgba(72,16,102,0.28) 0%, transparent 72%);
    filter: blur(10px); pointer-events: none;
}

/* status pill reposicionada no palco */
.secao-gestao-entregas .gst-status { bottom: 38px; right: -28px; }

/* título em 2 linhas controladas (vence max-width:18ch e h2 br{display:none} globais) */
.secao-gestao-entregas .gestao-texto h2 {
    font-size: clamp(2.05rem, 2.9vw, 2.75rem); line-height: 1.08;
    max-width: none; text-wrap: normal;
}
.secao-gestao-entregas .gestao-texto h2 br { display: block; }

@media (max-width: 880px) {
    .secao-gestao-entregas .gst-phone {
        transform: none; max-width: 268px;
        box-shadow: 0 30px 60px -20px rgba(72,16,102,0.42);
    }
    .secao-gestao-entregas .gst-status { right: -6px; bottom: 20px; }
    .secao-gestao-entregas .gestao-texto h2 br { display: none; }
}

/* ============================================================
   SMART LOCKER ONE — showcase cinematográfico (EH-004)
   Locker recortado (fundo removido) em palco dark com spotlight,
   glow volumétrico, reflexo no chão, grid de perspectiva e
   anotações apontando pras partes reais. Namespace .lsc-*
   ============================================================ */
.locker-showcase {
    position: relative;
    background: radial-gradient(120% 92% at 50% -4%, #1b0d2d 0%, #0c0617 44%, #070109 100%);
    color: #fff;
    padding: clamp(92px, 11vw, 150px) 0 clamp(80px, 10vw, 132px);
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.locker-showcase .lsc-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lsc-spotlight {
    position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
    width: min(960px, 96vw); height: 800px;
    background: radial-gradient(ellipse 48% 58% at 50% 0%, rgba(184,51,234,0.32) 0%, rgba(149,0,200,0.10) 40%, transparent 70%);
    filter: blur(8px);
}
.lsc-glow {
    position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%);
    width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(149,0,200,0.36) 0%, transparent 64%);
    filter: blur(34px);
}
.lsc-floor {
    position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%);
    width: 780px; height: 210px;
    background: radial-gradient(ellipse at center, rgba(149,0,200,0.24) 0%, transparent 70%);
    filter: blur(22px);
}
.lsc-grid {
    position: absolute; left: -10%; right: -10%; bottom: 0; height: 42%;
    background-image:
        linear-gradient(rgba(180,51,234,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,51,234,0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(62deg); transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    opacity: 0.55;
}

.locker-showcase .container { position: relative; z-index: 2; }

/* header */
.locker-showcase .showroom-header { position: relative; z-index: 2; text-align: center; max-width: 700px; margin: 0 auto clamp(24px, 4vw, 54px); }
.locker-showcase .showroom-header h2 { color: #fff; }
.locker-showcase .showroom-header p { color: rgba(255,255,255,0.62); margin-left: auto; margin-right: auto; }

/* stage + locker */
.locker-showcase .lsc-stage { position: relative; z-index: 2; display: flex; justify-content: center; }
.locker-showcase .lsc-locker { position: relative; width: min(540px, 82%); }
/* NOTA: drop-shadow no img + os filter:blur da atmosfera quebram o compositing
   no Chrome headless (--disable-gpu) e somem com a imagem. Profundidade feita
   por glow atrás (.lsc-glow) + sombra de contato (::after) em vez de drop-shadow. */
.locker-showcase .lsc-locker__img {
    width: 100%; height: auto; display: block; position: relative; z-index: 2;
}
.locker-showcase .lsc-locker::after {
    content: ""; position: absolute; z-index: 0;
    left: 50%; bottom: -4%; transform: translateX(-50%);
    width: 84%; height: 60px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 72%);
    filter: blur(12px); pointer-events: none;
}
.locker-showcase .lsc-locker__reflection {
    position: absolute; top: 99.5%; left: 0; width: 100%; height: auto; z-index: 1;
    transform: scaleY(-1); opacity: 0.16;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 44%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 44%);
}

/* anotações */
.locker-showcase .lsc-note { position: absolute; z-index: 5; }
.lsc-note__dot {
    position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; border-radius: 50%;
    background: #f4d0ff;
    box-shadow: 0 0 0 4px rgba(244,208,255,0.16), 0 0 14px rgba(184,51,234,0.95);
}
.lsc-note__line { position: absolute; top: -0.5px; height: 1.5px; }
.lsc-note__card {
    position: absolute; width: 216px;
    background: rgba(15,5,25,0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(180,51,234,0.36); border-radius: 14px; padding: 12px 15px;
    box-shadow: 0 20px 42px rgba(0,0,0,0.5), inset 0 0 24px rgba(149,0,200,0.08);
}
.lsc-note__card strong { display: block; font-family: var(--fonte-titulos); font-size: 1.08rem; color: #fff; margin-bottom: 3px; }
.lsc-note__card span { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.42; }

/* direção: card à direita */
.lsc-note--right .lsc-note__line { left: 6px; width: 62px;
    background: linear-gradient(90deg, rgba(244,208,255,0.75), rgba(244,208,255,0.08)); }
.lsc-note--right .lsc-note__card { left: 74px; top: -24px; }
/* direção: card à esquerda */
.lsc-note--left .lsc-note__line { right: 6px; width: 62px;
    background: linear-gradient(270deg, rgba(244,208,255,0.75), rgba(244,208,255,0.08)); }
.lsc-note--left .lsc-note__card { right: 74px; top: -24px; text-align: right; }

/* responsivo: vira lista sob o locker */
@media (max-width: 860px) {
    .locker-showcase .lsc-locker { width: min(420px, 88%); margin-bottom: 18px; }
    .locker-showcase .lsc-note { position: static; display: block; margin: 12px auto 0; max-width: 360px; }
    .lsc-note__dot, .lsc-note__line { display: none; }
    .lsc-note__card { position: static; width: 100%; text-align: left; }
    .lsc-note--left .lsc-note__card { text-align: left; }
    .locker-showcase .lsc-stage { flex-direction: column; align-items: center; }
}

/* ============================================================
   HERO BI ONE DASH — upgrade (EH-BI-001)
   Marcador padrão + palco cockpit (spotlight + grid) + 3 métricas
   "ao vivo" com números reais do dashboard. Reusa .glass-metric.
   ============================================================ */
.hero-bi-dashboard .bi-atmos { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-bi-dashboard .bi-spot {
    position: absolute; top: -12%; left: 50%; transform: translateX(-50%);
    width: min(1100px, 96vw); height: 720px;
    background: radial-gradient(ellipse 46% 60% at 50% 0%, rgba(184,51,234,0.22) 0%, rgba(149,0,200,0.07) 42%, transparent 72%);
}
.hero-bi-dashboard .bi-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(149,0,200,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149,0,200,0.05) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(72% 60% at 50% 32%, #000 0%, transparent 78%);
    mask-image: radial-gradient(72% 60% at 50% 32%, #000 0%, transparent 78%);
}
/* conteúdo acima da atmosfera (sem depender do z-index do .container global) */
.hero-bi-dashboard .container { position: relative; z-index: 2; }
.hero-bi-dashboard .bi-hero-content,
.hero-bi-dashboard .bi-hero-visual { position: relative; z-index: 2; }
.hero-bi-dashboard .bi-hero-content .hero-pr-marker { justify-content: center; }

/* posições das 3 métricas flutuantes no dashboard inclinado */
.hero-bi-dashboard .metric-rt { top: -22px; right: -26px; }
.hero-bi-dashboard .metric-bl { bottom: -26px; left: 4%; }
.hero-bi-dashboard .glass-metric { transform: translateZ(60px); }

/* ícones temáticos das métricas */
.hero-bi-dashboard .metric-icon--live { background: rgba(39,201,63,0.12); color: #27c93f; }
.hero-bi-dashboard .metric-icon--wait { background: rgba(184,51,234,0.14); color: var(--acento-soft); }

/* dot "ao vivo" verde ao lado do label */
.bi-live-dot {
    display: inline-block; width: 7px; height: 7px; margin-left: 5px; vertical-align: middle;
    background: #27c93f; box-shadow: 0 0 8px rgba(39,201,63,0.9);
}

@media (max-width: 992px) {
    .hero-bi-dashboard .metric-rt { top: -18px; right: 8px; }
    .hero-bi-dashboard .metric-bl { bottom: -18px; left: 8px; }
}
@media (max-width: 768px) {
    /* no mobile o 3D é removido; empilha as métricas de forma legível */
    .hero-bi-dashboard .glass-metric { position: static; transform: scale(0.9); margin: 10px auto 0; width: max-content; }
    .hero-bi-dashboard .bi-hero-stage { display: flex; flex-direction: column; align-items: center; }
}

/* Hero BI centralizado: marcador simétrico (linha dos 2 lados) p/ centrar o texto */
.hero-bi-dashboard .bi-hero-content .hero-pr-marker { justify-content: center; gap: 12px; }
.hero-bi-dashboard .bi-hero-content .hero-pr-marker::after {
    content: ""; width: 32px; height: 1.5px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #b833ea);
}

/* Hero BI: centra a CAIXA do parágrafo (tinha max-width:580px sem margin auto -> encostava à esquerda) */
.hero-bi-dashboard .bi-hero-content p { margin-left: auto; margin-right: auto; }

/* dashboard do hero BI: ergue no scroll (JS seta transform inline). Transição curta evita lag. */
.hero-bi-dashboard .dashboard-3d-wrapper { transition: transform 0.15s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .hero-bi-dashboard .dashboard-3d-wrapper { transform: rotateX(0deg) scale(1) !important; }
}

/* ============================================================
   MONITORAMENTO AO VIVO — layout split (EH-BI-002)
   Copy + 3 pontos do título à esquerda, dashboard ao vivo à direita.
   Diferencia do hero (que é centralizado).
   ============================================================ */
.raiox-split .raiox-grid {
    display: grid; grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(36px, 5vw, 76px); align-items: center;
}
.raiox-split .raiox-texto { position: relative; z-index: 2; }
.raiox-split .raiox-texto h2 {
    font-family: var(--fonte-titulos); font-size: clamp(2rem, 3vw, 2.9rem);
    line-height: 1.1; color: #fff; margin: 16px 0 18px; max-width: 15ch;
}
.raiox-split .raiox-texto > p {
    color: rgba(255,255,255,0.62); font-size: 1.08rem; line-height: 1.6;
    margin-bottom: 30px; max-width: 46ch;
}
/* 3 pontos */
.raiox-pontos { list-style: none; margin: 0; padding: 0; }
.raiox-pontos li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 19px 0; }
.raiox-pontos li + li { border-top: 1px solid rgba(255,255,255,0.08); }
.raiox-ponto__ic {
    width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
    background: rgba(149,0,200,0.16); color: var(--acento-soft);
    box-shadow: inset 0 0 0 1px rgba(180,51,234,0.30);
}
.raiox-ponto__ic .icon { width: 20px; height: 20px; }
.raiox-pontos strong { display: block; font-family: var(--fonte-titulos); font-size: 1.14rem; color: #fff; margin-bottom: 3px; }
.raiox-pontos li > div > span { font-size: 0.93rem; color: rgba(255,255,255,0.6); line-height: 1.5; }

/* visual à direita */
.raiox-split .raiox-visual { position: relative; z-index: 2; }
.raiox-split .raiox-glow-bg {
    position: absolute; inset: -12% -10%; z-index: 0;
    background: radial-gradient(60% 60% at 55% 45%, rgba(149,0,200,0.28) 0%, transparent 70%);
    filter: blur(30px); pointer-events: none;
}
.raiox-split .raiox-chassi { position: relative; z-index: 2; }
/* card flutuante único (Pico), na base do dashboard à direita */
.raiox-split .raiox-pico { position: absolute; z-index: 5; bottom: -24px; right: 4%; }

@media (max-width: 980px) {
    .raiox-split .raiox-grid { grid-template-columns: 1fr; gap: 40px; }
    .raiox-split .raiox-texto h2 { max-width: none; }
    .raiox-split .raiox-pico { right: 2%; bottom: -18px; }
}

/* ============================================================
   MONITORAMENTO AO VIVO — monitor de operação (EH-BI-003)
   Painel grande tipo sala de controle: HUD ao vivo, scanline,
   anel-alvo pulsante no pico (gargalo) + pinos pra regiões reais.
   ============================================================ */
.raiox-monitor { position: relative; overflow: hidden; }
.raiox-monitor .rxm-atmos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.raiox-monitor .rxm-glow {
    position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%);
    width: min(1000px, 92vw); height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(149,0,200,0.28) 0%, transparent 64%);
    filter: blur(40px);
}
.raiox-monitor .container { position: relative; z-index: 2; }

/* header compacto, centralizado */
.raiox-monitor .rxm-head { text-align: center; max-width: 680px; margin: 0 auto clamp(34px, 5vw, 60px); }
.raiox-monitor .rxm-head h2 { color: #fff; }
.raiox-monitor .rxm-head p { color: rgba(255,255,255,0.62); margin: 14px auto 0; max-width: 56ch; }

/* monitor */
.raiox-monitor .rxm-stage { position: relative; display: flex; justify-content: center; }
.raiox-monitor .rxm-screen { position: relative; z-index: 2; width: min(960px, 100%); overflow: visible; }
.raiox-monitor .rxm-screen .chrome-window__body { position: relative; overflow: hidden; border-radius: 0 0 12px 12px; }
.raiox-monitor .img-raiox { display: block; width: 100%; height: auto; }
/* overlay das anotações: nível da tela (não cortado pelo overflow do body) */
.raiox-monitor .rxm-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* scanline sutil de "tela ao vivo" */
.raiox-monitor .rxm-scan {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay; opacity: 0.5;
}

/* ---- anel-alvo no gargalo (o "wow") ---- */
.raiox-monitor .rxm-target { position: absolute; z-index: 6; }
.raiox-monitor .rxm-target__ring {
    position: absolute; top: -42px; left: -42px; width: 84px; height: 84px; border-radius: 50%;
    border: 2px solid #ffb24d;
    box-shadow: 0 0 18px rgba(255,160,40,0.7), inset 0 0 18px rgba(255,160,40,0.35);
    animation: rxmTargetPulse 2.2s ease-in-out infinite;
}
.raiox-monitor .rxm-target__ring::after {
    content: ""; position: absolute; inset: -8px; border-radius: 50%;
    border: 1px solid rgba(255,160,40,0.35);
}
@keyframes rxmTargetPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(255,160,40,0.7), inset 0 0 18px rgba(255,160,40,0.35); }
    50%      { transform: scale(1.08); box-shadow: 0 0 28px rgba(255,160,40,0.9), inset 0 0 18px rgba(255,160,40,0.35); }
}
.raiox-monitor .rxm-target__label {
    position: absolute; left: 52px; top: -28px; width: 188px;
    background: rgba(20,9,4,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255,160,40,0.5); border-radius: 13px; padding: 11px 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.raiox-monitor .rxm-target__label strong { display: block; font-family: var(--fonte-titulos); font-size: 1.04rem; color: #ffce93; margin-bottom: 2px; }
.raiox-monitor .rxm-target__label span { font-size: 0.8rem; color: rgba(255,255,255,0.66); }

/* ---- pinos de insight ---- */
.raiox-monitor .rxm-pin { position: absolute; z-index: 5; }
.raiox-monitor .rxm-pin__dot {
    position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; border-radius: 50%;
    background: #f4d0ff; box-shadow: 0 0 0 4px rgba(244,208,255,0.16), 0 0 12px rgba(184,51,234,0.9);
}
.raiox-monitor .rxm-pin__line { position: absolute; top: -0.5px; height: 1.5px; }
.raiox-monitor .rxm-pin__card {
    position: absolute; width: 188px;
    background: rgba(15,5,25,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(180,51,234,0.36); border-radius: 13px; padding: 11px 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.raiox-monitor .rxm-pin__card strong { display: block; font-family: var(--fonte-titulos); font-size: 1.02rem; color: #fff; margin-bottom: 2px; }
.raiox-monitor .rxm-pin__card span { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.raiox-monitor .rxm-pin--left .rxm-pin__line { right: 6px; width: 54px; background: linear-gradient(270deg, rgba(244,208,255,0.75), rgba(244,208,255,0.06)); }
.raiox-monitor .rxm-pin--left .rxm-pin__card { right: 66px; top: -22px; text-align: right; }
.raiox-monitor .rxm-pin--right .rxm-pin__line { left: 6px; width: 54px; background: linear-gradient(90deg, rgba(244,208,255,0.75), rgba(244,208,255,0.06)); }
.raiox-monitor .rxm-pin--right .rxm-pin__card { left: 66px; top: -22px; }

@media (prefers-reduced-motion: reduce) {
    .raiox-monitor .rxm-target__ring { animation: none; }
}
/* mobile: some os pinos (cobririam a tela pequena), mantém só o alvo do gargalo discreto */
@media (max-width: 820px) {
    .raiox-monitor .rxm-pin, .raiox-monitor .rxm-target__label { display: none; }
    .raiox-monitor .rxm-target__ring { top: -30px; left: -30px; width: 60px; height: 60px; }
}

/* Por condomínio: título em 2 linhas (vence text-wrap:balance e h2 br{display:none}) */
.secao-dual-dashboards .dual-header h2 { max-width: none; text-wrap: normal; }
.secao-dual-dashboards .dual-header h2 br { display: block; }

/* ============================================================
   POR OPERADOR — fix + perfeiçoamento (EH-BI-004)
   Dashboard emoldurado + callout de comparação; painel com
   largura casada e contraste corrigido. Namespace .foco-v2
   ============================================================ */
.foco-v2 .foco-stage { position: relative; max-width: 1000px; margin: 0 auto; z-index: 1; }
.foco-v2 .foco-screen { position: relative; z-index: 2; }
.foco-v2 .foco-screen .chrome-window__body { overflow: hidden; border-radius: 0 0 12px 12px; }
.foco-v2 .img-foco-dash { display: block; width: 100%; height: auto; }

/* callout de comparação (no canto do dashboard) */
.foco-v2 .foco-compare {
    position: absolute; z-index: 6; top: 64px; right: -22px;
    display: flex; align-items: center; gap: 12px;
    background: rgba(15,5,25,0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(180,51,234,0.4); border-radius: 14px; padding: 12px 16px;
    box-shadow: 0 20px 44px rgba(0,0,0,0.55);
}
.foco-v2 .foco-compare__ic {
    width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
    background: rgba(149,0,200,0.20); color: var(--acento-soft); box-shadow: inset 0 0 0 1px rgba(180,51,234,0.35);
}
.foco-v2 .foco-compare__ic .icon { width: 19px; height: 19px; }
.foco-v2 .foco-compare__tx strong { display: block; font-family: var(--fonte-titulos); font-size: 0.98rem; color: #fff; }
.foco-v2 .foco-compare__tx span { font-size: 0.78rem; color: rgba(255,255,255,0.58); }

/* painel: largura casada com o dashboard + overlap menor */
.foco-v2 .foco-panel {
    max-width: 1000px; margin: -56px auto 0;
    background: rgba(16,7,24,0.86);
    border: 1px solid rgba(149,0,200,0.32);
    border-top: 1px solid rgba(255,255,255,0.14);
    padding: clamp(34px, 4vw, 56px);
}

/* contraste corrigido */
.foco-v2 .overlap-text p { color: rgba(255,255,255,0.66); }
.foco-v2 .overlap-text h2 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.foco-v2 .feature-card-glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); }
.foco-v2 .feature-card-glass:hover { background: rgba(255,255,255,0.08); transform: translateX(6px); border-color: rgba(180,51,234,0.34); }
.foco-v2 .feature-card-glass h3 { color: #fff; }
.foco-v2 .feature-card-glass p { color: rgba(255,255,255,0.62); }
.foco-v2 .feature-card-glass .icon-wrap {
    width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
}
.foco-v2 .feature-card-glass .icon-wrap.purple { background: rgba(149,0,200,0.18); color: var(--acento-soft); box-shadow: inset 0 0 0 1px rgba(180,51,234,0.32); }
.foco-v2 .feature-card-glass .icon-wrap.green  { background: rgba(39,201,63,0.14); color: #5ef08a; box-shadow: inset 0 0 0 1px rgba(39,201,63,0.30); }
.foco-v2 .feature-card-glass .icon-wrap .icon { width: 20px; height: 20px; }

@media (max-width: 820px) {
    .foco-v2 .foco-compare { right: 8px; top: 48px; }
    .foco-v2 .foco-panel { margin-top: -36px; }
}

/* POR OPERADOR — vira split (dashboard esq + conteúdo dir), menos "blocão" (EH-BI-004b) */
.foco-v2 .container { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(34px, 4.5vw, 62px); align-items: center; }
.foco-v2 .foco-glow-top { top: 30%; left: 26%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(149,0,200,0.30) 0%, transparent 66%); }
.foco-v2 .foco-stage { max-width: none; margin: 0; }
.foco-v2 .foco-screen { box-shadow: 0 40px 80px -28px rgba(0,0,0,0.7), 0 0 0 1px rgba(149,0,200,0.18); border-radius: 14px; }
/* painel deixa de ser glass pesado e vira a coluna de conteúdo à direita */
.foco-v2 .foco-panel {
    max-width: none; margin: 0; padding: 0; display: block;
    background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.foco-v2 .foco-panel .overlap-text { margin-bottom: 30px; }
.foco-v2 .foco-compare { top: 54px; right: -18px; }
@media (max-width: 980px) {
    .foco-v2 .container { grid-template-columns: 1fr; gap: 36px; }
    .foco-v2 .foco-compare { right: 8px; top: 46px; }
}

/* POR OPERADOR split: força fundo escuro (o grupo de seções claras estava sobrescrevendo) + texto branco */
.secao-foco-operador.foco-v2 { background: radial-gradient(120% 110% at 24% 18%, #160a24 0%, #0a0510 46%, #07010a 100%); }
.secao-foco-operador.foco-v2 .overlap-text h2 { color: #fff; }
.secao-foco-operador.foco-v2 .overlap-text p { color: rgba(255,255,255,0.66); }
.secao-foco-operador.foco-v2 .feature-card-glass h3 { color: #fff; }
.secao-foco-operador.foco-v2 .feature-card-glass p { color: rgba(255,255,255,0.62); }

/* POR OPERADOR — régua de performance (EH-BI-004c) substitui o split */
.foco-v2 .container { display: block; }
.foco-v2 .opx-head { text-align: center; max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }
.foco-v2 .opx-head h2 { color: #fff; font-size: clamp(1.9rem, 2.7vw, 2.7rem); }
.foco-v2 .opx-head p { color: rgba(255,255,255,0.64); margin: 14px auto 0; max-width: 52ch; }

.foco-v2 .opx-ruler { position: relative; z-index: 2; max-width: 880px; margin: clamp(56px, 7vw, 92px) auto 0; }
.foco-v2 .opx-zones { display: flex; justify-content: space-between; margin-bottom: 30px; font-family: var(--fonte-textos); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.foco-v2 .opx-zone { display: inline-flex; align-items: center; gap: 8px; }
.foco-v2 .opx-zone i { width: 8px; height: 8px; border-radius: 50%; }
.foco-v2 .opx-zone--good { color: #5ef08a; } .foco-v2 .opx-zone--good i { background: #5ef08a; box-shadow: 0 0 8px rgba(94,240,138,0.7); }
.foco-v2 .opx-zone--help { color: #ffb24d; } .foco-v2 .opx-zone--help i { background: #ffb24d; box-shadow: 0 0 8px rgba(255,178,77,0.7); }

.foco-v2 .opx-track { position: relative; height: 8px; }
.foco-v2 .opx-track__bar { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(39,201,63,0.55) 0%, rgba(149,0,200,0.25) 50%, rgba(255,160,40,0.6) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

.foco-v2 .opx-op { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; }
.foco-v2 .opx-op__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.38); border: 2px solid #0a0510; }
.foco-v2 .opx-op--good .opx-op__dot { background: #5ef08a; }
.foco-v2 .opx-op--help .opx-op__dot { background: #ffb24d; }
.foco-v2 .opx-op--star .opx-op__dot { width: 22px; height: 22px; }
.foco-v2 .opx-op--good.opx-op--star .opx-op__dot { box-shadow: 0 0 0 5px rgba(94,240,138,0.16), 0 0 16px rgba(94,240,138,0.7); }
.foco-v2 .opx-op--help.opx-op--star .opx-op__dot { box-shadow: 0 0 0 5px rgba(255,178,77,0.16), 0 0 16px rgba(255,178,77,0.7); }
.foco-v2 .opx-op__tag { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--fonte-textos); font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: 100px; }
.foco-v2 .opx-op__tag--up { color: #5ef08a; background: rgba(39,201,63,0.12); border: 1px solid rgba(39,201,63,0.34); }
.foco-v2 .opx-op__tag--down { color: #ffb24d; background: rgba(255,160,40,0.12); border: 1px solid rgba(255,160,40,0.36); top: 26px; bottom: auto; }

.foco-v2 .opx-avg { position: absolute; top: 50%; transform: translateX(-50%); z-index: 4; }
.foco-v2 .opx-avg__line { position: absolute; left: 50%; top: -34px; height: 68px; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55), transparent); }
.foco-v2 .opx-avg__chip { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(15,5,25,0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(180,51,234,0.4); border-radius: 12px; padding: 8px 14px; font-family: var(--fonte-textos); font-size: 0.82rem; color: rgba(255,255,255,0.66); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
.foco-v2 .opx-avg__chip strong { display: block; font-family: var(--fonte-titulos); font-size: 1.15rem; color: #fff; }
.foco-v2 .opx-note { text-align: center; margin: 86px auto 0; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

.foco-v2 .opx-feats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: clamp(48px, 6vw, 76px) auto 0; }
.foco-v2 .opx-feats .feature-card-glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); }
.foco-v2 .opx-feats .feature-card-glass h3 { color: #fff; } .foco-v2 .opx-feats .feature-card-glass p { color: rgba(255,255,255,0.62); }
.foco-v2 .opx-feats .icon-wrap { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.foco-v2 .opx-feats .icon-wrap.purple { background: rgba(149,0,200,0.18); color: var(--acento-soft); box-shadow: inset 0 0 0 1px rgba(180,51,234,0.32); }
.foco-v2 .opx-feats .icon-wrap.green { background: rgba(39,201,63,0.14); color: #5ef08a; box-shadow: inset 0 0 0 1px rgba(39,201,63,0.30); }
.foco-v2 .opx-feats .icon-wrap .icon { width: 20px; height: 20px; }
@media (max-width: 700px) {
    .foco-v2 .opx-feats { grid-template-columns: 1fr; }
    .foco-v2 .opx-op__tag { font-size: 0.66rem; padding: 4px 8px; }
}

/* POR OPERADOR — ranking-régua (bullet chart) EH-BI-004d */
.foco-v2 .opl-board { position: relative; z-index: 2; max-width: 720px; margin: clamp(48px,6vw,82px) auto 0;
    background: rgba(15,5,25,0.6); border: 1px solid rgba(149,0,200,0.28); border-radius: 20px;
    padding: clamp(24px,3vw,36px); box-shadow: 0 44px 90px -34px rgba(0,0,0,0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.foco-v2 .opl-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.foco-v2 .opl-top__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fonte-textos); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.foco-v2 .opl-top__title .icon { width: 16px; height: 16px; color: var(--acento-soft); }
.foco-v2 .opl-top__avg { font-size: 0.8rem; color: rgba(255,255,255,0.5); white-space: nowrap; }
.foco-v2 .opl-top__avg strong { color: #fff; font-family: var(--fonte-titulos); margin-left: 5px; font-size: 1.02rem; }
.foco-v2 .opl-list { list-style: none; margin: 6px 0 0; padding: 0; }
.foco-v2 .opl-row { display: grid; grid-template-columns: 38px 1fr 128px; gap: 16px; align-items: center; padding: 13px 0; }
.foco-v2 .opl-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fonte-titulos); font-size: 0.9rem; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.foco-v2 .opl-row--good .opl-av { border-color: rgba(39,201,63,0.45); }
.foco-v2 .opl-row--help .opl-av { border-color: rgba(255,160,40,0.45); }
.foco-v2 .opl-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.06); }
.foco-v2 .opl-track::after { content: ''; position: absolute; left: 60%; top: -9px; bottom: -9px; border-left: 1.5px dashed rgba(255,255,255,0.36); }
.foco-v2 .opl-fill { display: block; height: 100%; border-radius: 999px; position: relative; z-index: 1; }
.foco-v2 .opl-row--good .opl-fill { background: linear-gradient(90deg, rgba(39,201,63,0.45), #27c93f); }
.foco-v2 .opl-row--mid .opl-fill { background: linear-gradient(90deg, rgba(149,0,200,0.4), #b833ea); }
.foco-v2 .opl-row--help .opl-fill { background: linear-gradient(90deg, rgba(255,160,40,0.45), #ffb24d); }
.foco-v2 .opl-stat { font-family: var(--fonte-textos); font-size: 0.7rem; font-weight: 600; text-align: center; padding: 5px 10px; border-radius: 100px; white-space: nowrap; }
.foco-v2 .opl-stat--good { color: #5ef08a; background: rgba(39,201,63,0.12); border: 1px solid rgba(39,201,63,0.32); }
.foco-v2 .opl-stat--mid { color: var(--acento-soft); background: rgba(149,0,200,0.14); border: 1px solid rgba(180,51,234,0.34); }
.foco-v2 .opl-stat--help { color: #ffb24d; background: rgba(255,160,40,0.12); border: 1px solid rgba(255,160,40,0.34); }
.foco-v2 .opl-note { text-align: center; margin: 16px 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.4); }
@media (max-width: 620px) {
    .foco-v2 .opl-row { grid-template-columns: 30px 1fr; gap: 11px; }
    .foco-v2 .opl-stat { display: none; }
    .foco-v2 .opl-top { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* DA CHAMADA À MANUTENÇÃO — polimento (EH-BI-005) */
.secao-timeline-operacional .tl-texto h3 { color: #fff; }
.secao-timeline-operacional .tl-texto p { color: rgba(255,255,255,0.64); }
.secao-timeline-operacional .timeline-header p { color: rgba(255,255,255,0.6); }
.secao-timeline-operacional .tl-imagem-wrapper {
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 64px -26px rgba(0,0,0,0.7), 0 0 0 1px rgba(149,0,200,0.12);
}
.secao-timeline-operacional .ponto-timeline {
    box-shadow: 0 0 0 5px rgba(10,5,16,0.9), 0 0 18px rgba(184,51,234,0.6);
}

/* VISÃO EXECUTIVA — emoldura o dashboard (chrome) + glow/sombra na seção clara (EH-BI-006) */
.secao-visao-executiva .ve-stage { position: relative; max-width: 1000px; margin: clamp(36px,4vw,58px) auto 0; }
.secao-visao-executiva .ve-glow { position: absolute; inset: -8% -5% -12%; z-index: 0; background: radial-gradient(58% 60% at 50% 42%, rgba(149,0,200,0.20) 0%, transparent 70%); filter: blur(34px); pointer-events: none; }
.secao-visao-executiva .ve-screen { position: relative; z-index: 1; box-shadow: 0 52px 100px -32px rgba(72,16,102,0.42), 0 2px 0 0 rgba(255,255,255,0.5) inset; border-radius: 14px; }
.secao-visao-executiva .ve-screen .chrome-window__body { overflow: hidden; border-radius: 0 0 12px 12px; }
.secao-visao-executiva .product-shot { display: block; width: 100%; height: auto; }

/* ============================================================
   INTEGRIDADE DOS PRINTS DE PRODUTO
   Capturas de interface devem aparecer completas: sem crop,
   deformação ou máscara que esconda conteúdo funcional.
   Fotos editoriais e imagens de fundo não entram nesta regra.
   ============================================================ */

/* Janelas desktop: o conteúdo define a altura pela proporção nativa. */
.chrome-window__body > picture,
.chrome-window__body > picture > img,
.chrome-window__body > img,
.img-dashboard-main {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.chrome-window--hero .chrome-window__body {
    aspect-ratio: auto;
}

.chrome-window--hero .chrome-window__body > picture,
.chrome-window--hero .chrome-window__body img,
.chrome-window--hero .img-dashboard-main {
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* O fade do modifier BI escondia as bordas superior e inferior dos painéis. */
.chrome-window--bi .chrome-window__body {
    -webkit-mask-image: none;
            mask-image: none;
}

/* Molduras mobile: a borda não participa mais do cálculo da proporção. */
.phone-shot {
    aspect-ratio: auto;
}

.phone-shot > picture,
.phone-shot > picture > img,
.phone-shot > img,
.phone-shot > .phone-shot-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* O showcase troca três telas sobrepostas; a primeira ancora a altura real. */
.aps-phone > .aps-screen {
    height: auto;
}

.aps-phone > .aps-screen:first-of-type {
    position: relative;
}

.aps-phone > .aps-screen > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Estas duas telas eram deliberadamente truncadas por um palco de 264 px. */
.alm-stage {
    height: auto;
    min-height: 520px;
    padding: 12px 0 24px;
    overflow: visible;
}

/* Prints verticais de acesso cabem por inteiro dentro do portal. */
.soleira__viz--shot {
    background: #090410;
}

.soleira__viz--shot img {
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
    object-position: center;
    border-radius: 116px 116px 18px 18px;
}

@media (max-width: 560px) {
    .alm-stage {
        min-height: 500px;
    }
}
/* Iframe original do webchat: o próprio widget renderiza o botão e o painel. */
.one-webchat-frame {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99999;
    width: 420px;
    height: 620px;
    max-width: 100vw;
    max-height: 100svh;
    margin: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 520px) {
    .one-webchat-frame {
        width: 100vw;
        height: 100svh;
    }
}