/* ==========================================================================
   PSFWhats - Design System
   Tema escuro, mobile-first, foco em acessibilidade e performance.
   Organizacao: tokens -> base -> layout -> componentes -> paginas -> utils
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
    /* Cores base */
    --fundo: #05080f;
    --fundo-2: #080d18;
    --superficie: #0b1120;
    --superficie-2: #101a2e;
    --superficie-3: #16233c;
    --borda: rgba(255, 255, 255, .08);
    --borda-forte: rgba(0, 212, 255, .22);
    --borda-suave: rgba(255, 255, 255, .14);

    /* Marca */
    --ciano: #00d4ff;
    --menta: #00ffc8;
    --azul: #006cff;
    --violeta: #7b5cff;
    --gradiente: linear-gradient(120deg, var(--azul), var(--ciano) 55%, var(--menta));
    --gradiente-suave: linear-gradient(120deg, rgba(0, 108, 255, .18), rgba(0, 255, 200, .14));
    /* Variante com contraste suficiente sobre fundo branco (texto e botões) */
    --gradiente-claro: linear-gradient(120deg, #0a4fd0, #00796b);
    --gradiente-claro-suave: linear-gradient(135deg, #eaf3ff, #e2fbf5);

    /* Mascote animado: quadro exibido e quantidade de quadros do sprite */
    --marca-quadro: 42px;
    --marca-quadros: 22;
    --marca-duracao: 2.2s;

    /* Texto */
    --texto: #eaf2ff;
    --texto-suave: #a9bad4;
    --texto-fraco: #7488a6;

    /* Superfícies claras (header branco) */
    --superficie-clara: #ffffff;
    --texto-claro: #0b1120;
    --texto-claro-medio: #475569;
    --texto-claro-fraco: #64748b;

    /* Semanticas */
    --sucesso: #22d38a;
    /* Verde do WhatsApp: reservado ao CTA de contato, nunca usado em decoracao,
       para que o botao de falar com a empresa seja sempre o mais saliente. */
    --verde-whats: #25d366;
    --aviso: #ffc44d;
    --erro: #ff6b6b;
    --info: #4da3ff;

    /* Tipografia */
    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fonte-display: 'Space Grotesk', var(--fonte);
    --fs-xs: .78rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: clamp(1.15rem, .4vw + 1.05rem, 1.35rem);
    --fs-2xl: clamp(1.4rem, 1vw + 1.15rem, 1.9rem);
    --fs-3xl: clamp(1.75rem, 2.2vw + 1.2rem, 2.6rem);
    --fs-4xl: clamp(2.1rem, 4vw + 1.2rem, 3.6rem);

    /* Espacamento */
    --e-1: .25rem;
    --e-2: .5rem;
    --e-3: .75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --secao-y: clamp(3.5rem, 7vw, 6.5rem);

    /* Formas */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* Sombras */
    --sombra-1: 0 2px 8px rgba(0, 0, 0, .3);
    --sombra-2: 0 18px 40px -18px rgba(0, 0, 0, .75);
    --sombra-3: 0 40px 80px -40px rgba(0, 0, 0, .9);
    --brilho: 0 0 0 1px rgba(0, 212, 255, .18), 0 20px 60px -30px rgba(0, 212, 255, .45);

    /* Movimento */
    --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
    --transicao-lenta: 420ms cubic-bezier(.22, 1, .36, 1);

    /* Layout */
    --container: 1180px;
    --container-estreito: 820px;
    --altura-cabecalho: 72px;
}

/* ------------------------------------------------------------------ Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.menu-aberto,
body.scroll-bloqueado {
    overflow: hidden;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--e-3);
    font-family: var(--fonte-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

p {
    margin: 0 0 var(--e-4);
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--ciano);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: rgba(0, 212, 255, .28);
}

/* --------------------------------------------------------- Utilitarios */
.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.container--estreito {
    width: min(100% - 2.5rem, var(--container-estreito));
}

.oculto-visualmente {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.justificado {
    text-align: justify;
    hyphens: auto;
}

.texto-gradiente {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.traco-gradiente {
    display: block;
    width: 62px;
    height: 3px;
    margin: var(--e-4) auto 0;
    border-radius: var(--r-full);
    background: var(--gradiente);
}

.secao-cabecalho--left .traco-gradiente {
    margin-inline: 0;
}

/* Escondido por percentual (e nao por px fixo): o deslocamento e sempre maior
   que a propria altura do link, entao ele nunca invade o topo da pagina —
   acontecia antes de o link quebrar em duas linhas e deixar 3px de ciano
   aparecendo acima do cabecalho branco.                                   */
.pular-para-conteudo {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 999;
    transform: translate(-50%, -150%);
    padding: .75rem 1.25rem;
    background: var(--ciano);
    color: #001018;
    font-weight: 700;
    border-radius: 0 0 var(--r-md) var(--r-md);
    transition: transform var(--transicao);
}

.pular-para-conteudo:focus {
    transform: translate(-50%, 0);
}

/* -------------------------------------------------------------- Botoes */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: .8rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font-weight: 650;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), border-color var(--transicao);
    text-align: center;
}

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

.botao:active {
    transform: translateY(0);
}

.botao .icone {
    flex-shrink: 0;
    transition: transform var(--transicao);
}

.botao:hover .icone {
    transform: translateX(3px);
}

.botao--primario {
    background: var(--gradiente);
    color: #00131c;
    box-shadow: 0 12px 30px -14px rgba(0, 212, 255, .75);
}

.botao--primario:hover {
    box-shadow: 0 18px 40px -14px rgba(0, 255, 200, .6);
}

.botao--contorno {
    border-color: var(--borda-suave);
    background: rgba(255, 255, 255, .03);
    color: var(--texto);
}

.botao--contorno:hover {
    border-color: var(--ciano);
    color: #fff;
}

.botao--claro {
    background: #fff;
    color: #06121f;
}

.botao--contorno-claro {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.botao--contorno-claro:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

.botao--pequeno {
    min-height: 44px;
    padding: .55rem 1.1rem;
    font-size: var(--fs-xs);
}

.botao--grande {
    min-height: 56px;
    padding: 1rem 1.9rem;
    font-size: var(--fs-base);
}

.botao--bloco {
    display: flex;
    width: 100%;
}

/* CTA de contato: o verde do WhatsApp fica reservado a esta variante para
   que "falar com a empresa" seja sempre o botao mais saliente da pagina. */
.botao--whatsapp {
    background: var(--verde-whats);
    color: #04240f;
    box-shadow: 0 12px 30px -14px rgba(37, 211, 102, .8);
}

.botao--whatsapp:hover {
    box-shadow: 0 18px 40px -14px rgba(37, 211, 102, .65);
}

/* ------------------------------------------------------------ Cabecalho
   Header branco fixo: fundo opaco e texto escuro. O mascote tem fundo
   transparente e ganha apenas uma sombra neutra (sem chip colorido).    */
.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--superficie-clara);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: box-shadow var(--transicao), border-color var(--transicao);
}

.cabecalho--rolado {
    background: var(--superficie-clara);
    border-bottom-color: rgba(15, 23, 42, .14);
    box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .45);
}

/* Grade de 3 colunas: marca | navegacao | acoes.
   O `auto` no meio centraliza o menu de verdade — com `space-between` o
   menu ficaria deslocado para a esquerda, pois a marca e mais larga que o
   bloco de acoes. `minmax(0, 1fr)` deixa as pontas encolherem sem estourar. */
.cabecalho__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--e-4);
    min-height: var(--altura-cabecalho);
}

.cabecalho__interno > .marca {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
}

.cabecalho__interno > .navegacao {
    grid-column: 2;
    justify-self: center;
}

.cabecalho__interno > .cabecalho__acoes {
    grid-column: 3;
    justify-self: end;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
    min-width: 0;
    min-height: 44px;
}

.marca__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 212, 255, .35));
}

.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.marca__texto strong {
    font-family: var(--fonte-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.marca__texto strong span {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.marca__texto small {
    font-size: .68rem;
    color: var(--texto-fraco);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Mascote animado no header: sprite sheet de 22 quadros empilhados
   verticalmente (84 x 1848). Mesma animacao do GIF original, porem ~8x mais
   leve (139 KB contra 1,2 MB), sem custo de decodificacao e nitido em
   qualquer resolucao.

   O fundo branco que veio embutido no GIF foi removido (alpha 0), entao o
   mascote assenta direto no branco do cabecalho: sem chip, sem fundo e sem
   sombra — a silhueta dele ja e um quadrado arredondado e qualquer sombra
   virava um "quadrado com sombra" artificial.

   O deslocamento vem do proprio CSS (--marca-quadro e --marca-quadros sao
   variaveis do :root, ajustadas por breakpoint): com background-size:100%
   auto, o quadro N fica em -N x --marca-quadro.                        */
.marca__logo--animado {
    width: var(--marca-quadro, 42px);
    height: var(--marca-quadro, 42px);
    /* --sprite-marca vem do <style> com nonce do layout (sem style="" inline,
       para podermos fechar style-src-attr com 'none' na CSP) e precisa ser
       url("...") — uma string solta faria o navegador recusar o valor e o
       mascote sumiria. */
    background-image: var(--sprite-marca);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    animation: marca-quadros var(--marca-duracao, 2.2s) steps(var(--marca-quadros)) infinite;
}

/* Sem CSS-animation o mascot fica no primeiro quadro (olhos fechados) */
@media (prefers-reduced-motion: reduce) {
    .marca__logo--animado {
        animation: none;
        background-position: 0 0;
    }
}

/* steps(22) no intervalo 0 .. -22x<quadro> expoe exatamente os quadros
   0 a 21 e segura o ultimo durante o resto do ciclo.                  */
@keyframes marca-quadros {
    from { background-position: 0 0; }
    to { background-position: 0 calc(-1 * var(--marca-quadros, 22) * var(--marca-quadro, 42px)); }
}

/* Marca no header branco: tom escuro no texto (fundo transparente) */
.cabecalho .marca__texto strong {
    color: var(--texto-claro);
}

.cabecalho .marca__texto strong span {
    /* background-image (e não background) para não resetar o background-clip: text */
    background-image: var(--gradiente-claro);
}

.cabecalho .marca__texto small {
    color: var(--texto-claro-fraco);
}

/* Navegacao desktop */
.navegacao {
    display: none;
}

.navegacao__lista {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.navegacao__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .65rem .9rem;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--texto-claro-medio);
    transition: color var(--transicao), background var(--transicao);
}

.navegacao__link:hover,
.navegacao__link.ativa {
    color: var(--texto-claro);
    background: rgba(15, 23, 42, .05);
}

.navegacao__link.ativa {
    color: #0a4fd0;
    background: rgba(0, 108, 255, .08);
    box-shadow: inset 0 -2px 0 #0a4fd0;
}

.navegacao__seta {
    transition: transform var(--transicao);
    opacity: .55;
}

.navegacao__item--com-filhos {
    position: relative;
}

.navegacao__item--com-filhos:hover .navegacao__seta,
.navegacao__item--com-filhos:focus-within .navegacao__seta {
    transform: rotate(180deg);
}

.submenu {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 230px;
    padding: .5rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: var(--r-md);
    box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.navegacao__item--com-filhos:hover .submenu,
.navegacao__item--com-filhos:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem .75rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--texto-claro-medio);
}

.submenu a:hover,
.submenu a.ativa {
    background: rgba(0, 108, 255, .08);
    color: #0a4fd0;
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* CTA e botão de menu no header branco */
.cabecalho__cta {
    display: none;
    background: var(--gradiente-claro);
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(10, 79, 208, .7);
}

.cabecalho__cta:hover {
    box-shadow: 0 14px 30px -14px rgba(10, 79, 208, .6);
    color: #fff;
}

/* Botao do menu mobile */
.botao-icone-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: var(--r-md);
    color: var(--texto-claro);
    cursor: pointer;
    transition: background var(--transicao), border-color var(--transicao);
}

.botao-icone-menu:hover {
    background: rgba(0, 108, 255, .07);
    border-color: rgba(0, 108, 255, .35);
}

.botao-icone-menu__barras {
    display: grid;
    gap: 5px;
    width: 20px;
}

.botao-icone-menu__barras i {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transicao), opacity var(--transicao);
}

.menu-aberto .botao-icone-menu__barras i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-aberto .botao-icone-menu__barras i:nth-child(2) {
    opacity: 0;
}

.menu-aberto .botao-icone-menu__barras i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile (drawer) */
.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(3, 6, 12, .72);
    backdrop-filter: blur(6px);
    animation: aparecer var(--transicao) both;
}

.menu-mobile[hidden] {
    display: none;
}

.menu-mobile__painel {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    width: min(88vw, 380px);
    height: 100%;
    padding: var(--e-4);
    margin-left: auto;
    background: var(--superficie);
    border-left: 1px solid var(--borda);
    overflow-y: auto;
    animation: entrar-direita var(--transicao-lenta) both;
}

.menu-mobile__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-mobile__marca {
    font-family: var(--fonte-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

/* Botão de fechar dentro do painel escuro */
.menu-mobile__painel .botao-icone-menu {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.menu-mobile__painel .botao-icone-menu:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
}

.menu-mobile__lista {
    display: grid;
    gap: .25rem;
}

.menu-mobile__lista a,
.menu-mobile__grupo summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem .75rem;
    border-radius: var(--r-md);
    font-weight: 550;
    color: var(--texto);
    cursor: pointer;
}

.menu-mobile__lista a:hover,
.menu-mobile__grupo summary:hover {
    background: rgba(255, 255, 255, .05);
}

.menu-mobile__lista a.ativa,
.menu-mobile__grupo summary.ativa {
    color: var(--ciano);
    background: rgba(0, 212, 255, .1);
}

.menu-mobile__grupo summary::-webkit-details-marker {
    display: none;
}

.menu-mobile__grupo[open] summary .icone {
    transform: rotate(180deg);
}

.menu-mobile__grupo ul {
    padding: .25rem 0 .5rem .75rem;
    border-left: 1px solid var(--borda);
    margin-left: .5rem;
}

.menu-mobile__grupo ul a {
    padding: .65rem .5rem;
    font-weight: 450;
    color: var(--texto-suave);
}

.menu-mobile__rodape {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
}

.menu-mobile__contato {
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
    text-align: center;
}

/* ------------------------------------------------------------- Secoes */
.secao {
    position: relative;
    padding-block: var(--secao-y);
}

.secao--contato,
.secao--comparativo,
.secao--politica {
    background: var(--fundo-2);
}

/* Ritmo mais fechado na home (solucoes -> demonstracao -> numeros ->
   compliance -> CTA). Com o --secao-y global (6.5rem no desktop), duas
   secoes adjacentes somavam ~181px de respiro; aqui cada lado fica em
   3.5rem, o que da ~112px entre elas. So nestas secoes: as demais paginas
   mantem o respiro padrao do site. */
.secao--solucoes,
.secao--demo,
.secao--numeros,
.secao--compliance,
.secao--cta {
    --secao-y: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Mesmo ritmo fechado na pagina "Quem somos" (equipe -> pilares ->
   endereco). Sem isto o respiro entre duas secoes ficava em ~181px no
   desktop. */
.secao--equipe,
.secao--pilares,
.secao--endereco {
    --secao-y: clamp(2.25rem, 4.5vw, 3.5rem);
}

.secao-cabecalho {
    max-width: 720px;
    margin: 0 auto var(--e-7);
    text-align: center;
}

.secao-cabecalho--left {
    margin-inline: 0;
    text-align: left;
}

.secao-titulo {
    font-size: var(--fs-3xl);
}

.secao-texto {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--fs-lg);
}

/* Selo / eyebrow */
.selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    margin-bottom: var(--e-4);
    background: rgba(0, 212, 255, .08);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ciano);
}

.selo__ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--menta);
    box-shadow: 0 0 0 0 rgba(0, 255, 200, .6);
    animation: pulsar 2.4s infinite;
}

.selo--heroi {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(8px);
}

.selo--claro {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ---------------------------------------------------------------- Hero */
.heroi {
    position: relative;
    padding-top: clamp(3.5rem, 9vw, 7rem);
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
    isolation: isolate;
}

.heroi__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, #0a1730 0%, var(--fundo) 60%);
}

.heroi__blob {
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}

.heroi__blob--1 {
    top: -14%;
    left: -8%;
    background: rgba(0, 108, 255, .55);
}

.heroi__blob--2 {
    top: 6%;
    right: -12%;
    background: rgba(0, 212, 255, .45);
}

.heroi__blob--3 {
    bottom: -22%;
    left: 30%;
    background: rgba(123, 92, 255, .4);
}

.heroi__grade {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%);
}

.heroi__orbita {
    position: absolute;
    border: 1px solid rgba(0, 212, 255, .16);
    border-radius: 50%;
    animation: girar 40s linear infinite;
}

.heroi__orbita::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ciano);
    box-shadow: 0 0 14px var(--ciano);
}

.heroi__orbita--1 {
    width: 620px;
    height: 620px;
    top: 4%;
    right: -12%;
}

.heroi__orbita--2 {
    width: 420px;
    height: 420px;
    top: 20%;
    right: -6%;
    animation-duration: 28s;
    animation-direction: reverse;
}

.heroi__interno {
    text-align: center;
}

.heroi__interno--compacto {
    max-width: 900px;
}

.heroi__titulo {
    font-size: var(--fs-4xl);
    margin-bottom: var(--e-5);
}

.heroi__texto {
    max-width: 62ch;
    margin: 0 auto var(--e-6);
    color: var(--texto-suave);
    font-size: var(--fs-lg);
}

.heroi__texto--justificado {
    text-align: justify;
}

.heroi__meta {
    margin: 0;
    color: var(--texto-fraco);
    font-size: var(--fs-sm);
}

.heroi__acoes,
.heroi-sobre__acoes,
.heroi-parcerias__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}

.heroi__prova {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-top: var(--e-6);
    color: var(--texto-fraco);
    font-size: var(--fs-sm);
}

.heroi__prova-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.heroi__prova-item .icone {
    color: var(--menta);
}

.heroi--baixo {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.heroi-sobre,
.heroi-parcerias {
    display: grid;
    gap: var(--e-7);
    align-items: center;
    text-align: left;
}

.heroi-sobre .selo,
.heroi-parcerias .selo {
    margin-inline: 0;
}

.heroi-sobre__texto .heroi__texto,
.heroi-parcerias__texto .heroi__texto {
    margin-left: 0;
}

.heroi-sobre__acoes,
.heroi-parcerias__acoes {
    justify-content: flex-start;
    margin-top: var(--e-5);
}

.heroi-sobre__arte,
.heroi-parcerias__arte {
    position: relative;
    display: grid;
    place-items: center;
}

.heroi-sobre__arte img {
    width: min(72%, 300px);
    animation: flutuar 6s ease-in-out infinite;
}

.heroi-sobre__halo {
    position: absolute;
    inset: 8%;
    background: var(--gradiente);
    filter: blur(70px);
    opacity: .28;
    border-radius: 50%;
}

.heroi-parcerias__arte img {
    width: min(80%, 360px);
    border-radius: var(--r-xl);
    background: #fff;
    padding: var(--e-4);
    box-shadow: var(--sombra-3);
}

/* Indicadores (planos) */
.indicadores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-4);
    margin-top: var(--e-6);
}

.indicadores li {
    padding: var(--e-3) var(--e-2);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
}

.indicadores strong {
    display: block;
    font-family: var(--fonte-display);
    font-size: var(--fs-xl);
    color: #fff;
}

.indicadores span {
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
}

/* Faixa de confianca (marquee) */
.faixa-confianca {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-block: var(--e-3);
    border-block: 1px solid var(--borda);
    background: rgba(255, 255, 255, .02);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.faixa-confianca__faixa {
    display: flex;
    width: max-content;
    animation: marquee 34s linear infinite;
}

.faixa-confianca:hover .faixa-confianca__faixa {
    animation-play-state: paused;
}

.faixa-confianca__grupo {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    padding-right: var(--e-6);
}

.faixa-confianca__item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
    font-family: var(--fonte-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--texto);
}

.faixa-confianca__brilho {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradiente);
}

/* ------------------------------------------------------------- Secoes */
.demo {
    display: grid;
    gap: var(--e-6);
    /* Stretch (e nao center): as duas colunas passam a ter exatamente a
       mesma altura. A coluna dos 3 cards e a mais alta (o texto nao cabe
       em menos), entao quem cresce e o video — o player ocupa a altura
       inteira em vez de deixar um buraco abaixo dele. */
    align-items: stretch;
}

.demo__destaques {
    display: grid;
    gap: var(--e-4);
    /* 1fr em cada linha: os 3 cards ficam com a MESMA altura entre si e
       dividem a coluna por igual, em vez de ficarem com alturas diferentes
       conforme o texto de cada um. */
    grid-auto-rows: 1fr;
}

.demo__conversa {
    min-width: 0;
    /* Stretch para o .video ocupar a altura da linha (que e a soma dos
       3 cards). Sem este flex, o .video fica com a altura do proprio
       conteudo e sobra um buraco abaixo do player. */
    display: flex;
}

.video {
    display: grid;
    /* A tela do video cresce (1fr) e a legenda fica com a altura natural
       (auto): e isso que faz a coluna do video casar com a soma dos 3
       cards ao lado. */
    grid-template-rows: 1fr auto;
    gap: var(--e-3);
    /* min-width: 0 e obrigatorio: sem isso o item do grid assume a largura
       intrinsica do <video>/<img> (1280px) e a linha estoura o container,
       criando rolagem horizontal em telas estreitas. */
    min-width: 0;
    flex: 1;
}

.demo__cartao {
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.demo__cartao:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
}

.demo__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--e-3);
    border-radius: var(--r-md);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
}

.demo__cartao h3 {
    font-size: var(--fs-lg);
}

.demo__cartao p {
    margin: 0;
    color: var(--texto-suave);
}

/* ------------------------------------------------- Player de video
   Substitui o antigo mock de conversa: a secao prometia "video
   demonstrativo" e mostrava um chat simulado. O player real ocupa o mesmo
   lugar na grade, entao a hierarquia da pagina nao muda.              */
.demo__conversa {
    min-width: 0;
}

.video {
    display: grid;
    gap: var(--e-3);
    /* min-width: 0 e obrigatorio: sem isso o item do grid assume a largura
       intrinsica do <video>/<img> (1280px) e a linha estoura o container,
       criando rolagem horizontal em telas estreitas. */
    min-width: 0;
}

.video__tela {
    position: relative;
    min-width: 0;
    /* A tela ocupa a linha inteira (1fr) e o <video> e centralizado
       dentro dela. Com contain, o quadro 16:9 aparece inteiro mesmo
       quando a caixa fica mais alta que a比例 — cortaria a imagem. */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-xl);
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(0, 108, 255, .16), transparent 60%),
        #05070d;
    box-shadow: var(--sombra-3, 0 30px 60px -30px rgba(0, 0, 0, .9));
    isolation: isolate;
}

.video__elemento {
    display: block;
    width: 100%;
    /* O poster e 16:9; reserva a proporcao para o layout nao pular ao carregar. */
    aspect-ratio: 16 / 9;
    /* contain + centralizado na .video__tela: o quadro cabe inteiro mesmo
       quando a caixa fica mais alta que a proporcao. Com cover, o video
       seria cortado. */
    object-fit: contain;
    background: #05070d;
}

/* Controles nativos ficam escondidos ate o primeiro play: antes disso, um
   unico botao centralizado comunica melhor a acao e ocupa o alvo de toque
   inteiro. Depois de comecar, o usuario precisa de play/pause, volume,
   legenda e tela cheia —delegamos ao player do proprio navegador.       */
.video__elemento:not([controls]) {
    cursor: pointer;
}

.video__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    width: 100%;
    padding: var(--e-4);
    text-align: center;
    color: #fff;
    cursor: pointer;
    /* O proprio botao e o alvo: o texto dentro nunca e alvo separado. */
    background: linear-gradient(180deg, rgba(3, 6, 14, .06), rgba(3, 6, 14, .5));
    transition: background var(--transicao), opacity var(--transicao);
}

.video__play:hover {
    background: linear-gradient(180deg, rgba(3, 6, 14, .14), rgba(3, 6, 14, .62));
}

.video__play-icone {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--gradiente);
    color: #00131c;
    box-shadow: 0 16px 40px -14px rgba(0, 212, 255, .8);
    transition: transform var(--transicao);
}

.video__play-icone .icone {
    /* O glifo de play ja tem folga propria no viewBox. */
    margin-left: 4px;
}

.video__play:hover .video__play-icone {
    transform: scale(1.06);
}

.video__play-texto {
    display: grid;
    gap: .2rem;
    /* Sombra propria: sobre o poster claro o texto branco perderia leitura. */
    text-shadow: 0 2px 12px rgba(3, 6, 14, .9);
}

.video__play-texto strong {
    font-family: var(--fonte-display);
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* Some assim que o video comeca (classe adicionada pelo JS). */
.video--assistindo .video__play {
    opacity: 0;
    pointer-events: none;
}

/* Sem JS o botao nao faz nada: esconde para nao prometer interacao. */
.sem-js .video__play {
    display: none;
}

.video__duracao {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    z-index: 2;
    padding: .22rem .55rem;
    border-radius: var(--r-full);
    background: rgba(3, 6, 14, .78);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.video--assistindo .video__duracao {
    display: none;
}

.video__legenda {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

.video__legenda .icone {
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--ciano);
}

/* Foco visivel no botao de play: sem isto o teclado nao acha o player. */
.video__play:focus-visible {
    outline: 3px solid var(--ciano);
    outline-offset: -6px;
}

/* Conversa visual (mock de chat) */
.conversa-visual {
    max-width: 420px;
    margin-inline: auto;
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-3);
}

.conversa-visual__topo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--borda);
}

.conversa-visual__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradiente);
}

.conversa-visual__topo strong {
    display: block;
    font-size: var(--fs-sm);
}

.conversa-visual__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: var(--menta);
}

.conversa-visual__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.conversa-visual__mensagens {
    display: grid;
    gap: .6rem;
    padding: var(--e-4) 0;
    min-height: 190px;
    align-content: start;
}

.conversa-visual__texto {
    max-width: 85%;
    margin: 0;
    padding: .65rem .9rem;
    border-radius: 16px;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.conversa-visual__texto--digita,
.conversa-visual__texto--entrada {
    justify-self: start;
    background: var(--superficie-3);
    border-bottom-left-radius: 5px;
}

.conversa-visual__texto--saida {
    justify-self: end;
    background: var(--gradiente);
    color: #00131c;
    border-bottom-right-radius: 5px;
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--menta);
    animation: piscar 1s steps(2) infinite;
}

.conversa-visual__digitando {
    display: inline-flex;
    gap: .3rem;
    padding: .8rem .9rem;
    width: fit-content;
    background: var(--superficie-3);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
}

.conversa-visual__digitando i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--texto-fraco);
    animation: saltitar 1.2s infinite;
}

.conversa-visual__digitando i:nth-child(2) {
    animation-delay: .15s;
}

.conversa-visual__digitario i:nth-child(3) {
    animation-delay: .3s;
}

.conversa-visual__campo {
    padding: .8rem 1rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

/* Bento de solucoes
   Antes eram 12 colunas com spans 8/4/4/6/6/6: a soma (34) nao fecha em 12,
   e o auto-posicionamento empurrava "100% LGPD" (span 4) + "Métricas em
   tempo real" (span 6) para uma linha de 10 de 12 — os 2 slots sobrando
   viravam aquele retangulo vazio no fim da linha.

   Agora as linhas fecham exatas em cada breakpoint (ver os blocos @media
   abaixo): no desktop o destaque ocupa 2x2, os dois "pequenos" empilham na
   coluna ao lado e os tres "medios" fecham a ultima linha — todos com a
   MESMA largura, sem sobra. */
.bento {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: minmax(0, 1fr);
}

.bento__cartao--grande,
.bento__cartao--pequeno,
.bento__cartao--medio {
    grid-column: span 1;
    grid-row: span 1;
}

/* 2 colunas: o destaque e o ultimo card ocupam a linha inteira, senao o
   sexto card ficaria sozinho com uma coluna vazia ao lado. */
@media (min-width: 600px) {
    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento__cartao--grande,
    .bento__cartao:last-child {
        grid-column: 1 / -1;
    }
}

/* 3 colunas: 2x2 + 1 + 1 na primeira linha e 1 + 1 + 1 na segunda. */
@media (min-width: 900px) {
    .bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bento__cartao--grande {
        grid-column: span 2;
        grid-row: span 2;
    }

    .bento__cartao:last-child {
        grid-column: span 1;
    }
}

.bento__cartao {
    position: relative;
    padding: var(--e-5);
    background: linear-gradient(160deg, var(--superficie), rgba(11, 17, 32, .55));
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.bento__cartao::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 212, 255, .12), transparent 60%);
    opacity: 0;
    transition: opacity var(--transicao-lenta);
}

.bento__cartao:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
}

.bento__cartao:hover::before {
    opacity: 1;
}

.bento__cartao > * {
    position: relative;
}

.bento__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--e-3);
    border-radius: var(--r-md);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
}

.bento__cartao h3 {
    font-size: var(--fs-xl);
}

.bento__cartao p {
    margin: 0;
    color: var(--texto-suave);
}

.mini-conversa {
    display: grid;
    gap: .45rem;
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
}

.mini-conversa__bolha {
    max-width: 88%;
    padding: .5rem .75rem;
    border-radius: 14px;
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.mini-conversa__bolha--entrada {
    justify-self: start;
    background: var(--superficie-3);
}

.mini-conversa__bolha--saida {
    justify-self: end;
    background: var(--gradiente);
    color: #00131c;
}

/* Numeros */
.numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-4);
}

.numeros__item {
    padding: var(--e-5) var(--e-4);
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

.numeros__valor {
    display: block;
    font-family: var(--fonte-display);
    font-size: var(--fs-3xl);
    line-height: 1;
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.numeros__rotulo {
    display: block;
    margin-top: var(--e-2);
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

.numeros__barra {
    display: block;
    height: 4px;
    margin-top: var(--e-3);
    background: rgba(255, 255, 255, .08);
    border-radius: var(--r-full);
    overflow: hidden;
}

.numeros__barra span {
    display: block;
    width: var(--largura, 0%);
    height: 100%;
    background: var(--gradiente);
    border-radius: inherit;
    transition: width 1.4s var(--transicao-lenta);
}

/* Compliance */
.compliance {
    display: grid;
    gap: var(--e-4);
}

.compliance__item {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-lg);
}

.compliance__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 212, 255, .12);
    color: var(--ciano);
}

.compliance__item strong {
    display: block;
    font-size: var(--fs-base);
}

.compliance__item span {
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

/* ------------------------------------------------------------- Planos */
.periodo {
    display: grid;
    justify-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-7);
}

.periodo__opcoes {
    position: relative;
    display: inline-flex;
    padding: 5px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
}

.periodo__botao {
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: .6rem 1.4rem;
    background: none;
    border: 0;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: color var(--transicao);
}

.periodo__botao.ativa {
    color: #00131c;
}

.periodo__realce {
    position: absolute;
    top: 5px;
    left: 0;
    width: 0;
    height: calc(100% - 10px);
    background: var(--gradiente);
    border-radius: var(--r-full);
    transition: transform var(--transicao-lenta), width var(--transicao-lenta);
    will-change: transform, width;
}

.periodo__economia {
    padding: .15rem .5rem;
    background: rgba(0, 0, 0, .18);
    border-radius: var(--r-full);
    font-size: .7rem;
    font-weight: 700;
}

.periodo__botao:not(.ativa) .periodo__economia {
    background: rgba(0, 255, 200, .16);
    color: var(--menta);
}

.periodo__aviso {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

.grupo-planos {
    margin-bottom: var(--e-8);
}

.planos {
    display: grid;
    gap: var(--e-4);
}

.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.plano:hover {
    transform: translateY(-5px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
}

.plano--destaque {
    border-color: var(--borda-forte);
    box-shadow: var(--brilho);
    background: linear-gradient(180deg, rgba(0, 212, 255, .07), var(--superficie) 55%);
}

.plano--premium {
    background: linear-gradient(180deg, rgba(255, 196, 77, .1), var(--superficie) 55%);
    border-color: rgba(255, 196, 77, .35);
}

.plano__etiqueta {
    position: absolute;
    top: -11px;
    left: var(--e-5);
    padding: .3rem .8rem;
    background: var(--gradiente);
    color: #00131c;
    border-radius: var(--r-full);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.plano__etiqueta--premium {
    background: linear-gradient(120deg, #ffd479, #ff9f43);
    color: #3a1f00;
}

.plano__nome {
    font-size: var(--fs-xl);
    margin: 0;
}

.plano__descricao {
    margin: 0;
    min-height: 3em;
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

.plano__preco {
    padding: var(--e-4) 0;
    border-block: 1px solid var(--borda);
}

.plano__preco-rotulo {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-fraco);
}

.plano__preco-linha {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    flex-wrap: wrap;
}

.plano__moeda {
    font-family: var(--fonte-display);
    font-size: var(--fs-lg);
    color: var(--texto-suave);
}

.plano__valor {
    font-family: var(--fonte-display);
    font-size: clamp(1.9rem, 1.4vw + 1.5rem, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.plano__periodo {
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

.plano__preco-anterior {
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
}

.plano__preco-anterior s {
    color: var(--texto-fraco);
}

.plano__lista {
    display: grid;
    gap: .5rem;
    margin-bottom: var(--e-3);
    flex: 1;
}

.plano__lista li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

.plano__lista .icone {
    flex-shrink: 0;
    margin-top: .2rem;
    color: var(--menta);
}

.observacao-nota {
    margin-top: var(--e-5);
    padding: var(--e-4);
    background: rgba(255, 196, 77, .07);
    border: 1px solid rgba(255, 196, 77, .25);
    border-left: 3px solid var(--aviso);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: #ffe4ad;
}

/* Tabela comparativa */
.dica-tabela {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: -2rem auto var(--e-4);
    color: var(--texto-fraco);
    font-size: var(--fs-xs);
}

.tabela-rolagem {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    -webkit-overflow-scrolling: touch;
}

.tabela-comparativa {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.tabela-comparativa th,
.tabela-comparativa td {
    padding: .85rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}

.tabela-comparativa thead th {
    position: sticky;
    top: 0;
    background: var(--superficie-2);
    font-family: var(--fonte-display);
    font-size: var(--fs-sm);
    letter-spacing: .02em;
}

.tabela-comparativa tbody th {
    text-align: left;
    font-weight: 550;
    color: var(--texto-suave);
    background: var(--superficie);
    position: sticky;
    left: 0;
    z-index: 1;
}

.tabela-comparativa tbody tr:hover td,
.tabela-comparativa tbody tr:hover th {
    background: rgba(0, 212, 255, .05);
}

.tabela-comparativa .coluna-destaque {
    background: rgba(0, 212, 255, .07);
}

.tabela-comparativa thead .coluna-destaque {
    color: var(--ciano);
}

.tabela-sim {
    display: inline-flex;
    color: var(--menta);
}

.tabela-nao {
    color: var(--texto-fraco);
}

/* Observacoes */
.lista-observacoes {
    display: grid;
    gap: var(--e-3);
    counter-reset: obs;
}

.lista-observacoes__item {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
}

.lista-observacoes__numero {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.lista-observacoes__item p {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--fs-sm);
}

/* Integracoes */
.integracoes {
    display: grid;
    gap: var(--e-6);
    padding: var(--e-6);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-xl);
}

.integracoes .selo {
    margin-bottom: var(--e-3);
}

.integracoes__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.integracoes__lista li {
    padding: .9rem 1rem;
    background: rgba(8, 13, 24, .7);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    font-weight: 600;
    text-align: center;
    font-size: var(--fs-sm);
}

.integracoes__nota {
    margin: var(--e-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

/* --------------------------------------------------------------- FAQ */
.faq {
    display: grid;
    gap: .75rem;
    max-width: 820px;
    margin-inline: auto;
}

.faq__item {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--transicao), background var(--transicao);
}

.faq__item:has(.faq__pergunta[aria-expanded='true']) {
    border-color: var(--borda-forte);
    background: var(--superficie-2);
}

.faq__pergunta-titulo {
    margin: 0;
    font-size: inherit;
}

.faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    width: 100%;
    padding: var(--e-4);
    background: none;
    border: 0;
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-base);
    cursor: pointer;
    color: var(--texto);
}

.faq__mais {
    flex-shrink: 0;
    color: var(--ciano);
    transition: transform var(--transicao);
}

.faq__pergunta[aria-expanded='true'] .faq__mais {
    transform: rotate(135deg);
}

.faq__resposta[hidden] {
    display: none;
}

.faq__resposta-conteudo {
    padding: 0 var(--e-4) var(--e-4);
    color: var(--texto-suave);
    animation: revelar var(--transicao-lenta) both;
}

.faq__resposta-conteudo p {
    margin: 0;
}

/* ------------------------------------------------------------- Equipe */
.equipe {
    display: grid;
    gap: var(--e-4);
}

.equipe__cartao {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.equipe__cartao:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-2);
}

.equipe__foto {
    display: grid;
    place-items: center;
}

.equipe__foto img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 3px solid var(--borda-forte);
    background: var(--superficie-3);
    box-shadow: var(--brilho);
}

.equipe__nome {
    font-size: var(--fs-xl);
    margin-bottom: .15rem;
}

.equipe__nome span {
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.equipe__cargo {
    display: inline-block;
    margin-bottom: var(--e-3);
    padding: .25rem .7rem;
    background: rgba(0, 212, 255, .1);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ciano);
}

.equipe__conteudo p {
    margin-bottom: var(--e-3);
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

/* Pilares */
.pilares {
    display: grid;
    gap: var(--e-4);
}

.pilar {
    padding: var(--e-6) var(--e-5);
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    transition: transform var(--transicao), border-color var(--transicao);
}

.pilar:hover {
    transform: translateY(-4px);
    border-color: var(--borda-forte);
}

.pilar__icone {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto var(--e-4);
    border-radius: 50%;
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
}

.pilar h3 {
    font-size: var(--fs-lg);
}

.pilar p {
    margin: 0;
    color: var(--texto-suave);
}

.lista-check {
    display: grid;
    gap: .55rem;
    text-align: left;
}

.lista-check li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

.lista-check .icone {
    color: var(--menta);
}

/* Endereco */
.endereco,
.contato-parceira {
    display: grid;
    gap: var(--e-5);
}

.endereco__info,
.contato-parceira__info {
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

.endereco__titulo {
    font-size: var(--fs-xl);
}

.endereco__titulo span {
    color: var(--texto-suave);
}

.endereco__lista,
.contato-parceira__lista {
    display: grid;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
}

.endereco__lista li,
.contato-parceira__lista li {
    display: flex;
    gap: var(--e-3);
}

.endereco__icone,
.contato-parceira__icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
}

.endereco__rotulo,
.contato-parceira__rotulo {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-fraco);
}

.endereco__valor,
.contato-parceira__valor {
    display: block;
    font-weight: 600;
}

.endereco__complemento,
.contato-parceira__complemento {
    display: block;
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

.endereco__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.endereco__mapa,
.contato-parceira__mapa {
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    filter: grayscale(.25) contrast(1.05);
}

.endereco__mapa iframe,
.contato-parceira__mapa iframe {
    display: block;
    width: 100%;
    /* O mapa acompanha a altura do painel de informacoes ao lado (o grid
       estica as duas colunas). O min-height preserva os 360px quando o
       painel de infos for mais baixo — e no mobile, onde o mapa fica
       abaixo e nao tem com quem dividir a altura. */
    height: 100%;
    min-height: 360px;
    border: 0;
}

/* --------------------------------------------------------- Parcerias */
.faixa-destaque {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-xl);
}

.faixa-destaque__icone {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 212, 255, .14);
    color: var(--ciano);
}

.faixa-destaque h2 {
    font-size: var(--fs-xl);
    margin-bottom: .25rem;
}

.faixa-destaque p {
    margin: 0;
    color: var(--texto-suave);
}

.sistemas__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-bottom: var(--e-5);
}

.sistemas__filtro {
    min-height: 44px;
    padding: .5rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
    transition: all var(--transicao);
}

.sistemas__filtro:hover,
.sistemas__filtro.ativo {
    background: var(--gradiente);
    border-color: transparent;
    color: #00131c;
}

.sistemas__lista {
    display: grid;
    gap: var(--e-3);
}

.sistema {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    transition: transform var(--transicao), border-color var(--transicao);
}

.sistema:hover {
    transform: translateX(4px);
    border-color: var(--borda-forte);
}

.sistema[hidden] {
    display: none;
}

.sistema__letra {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    font-family: var(--fonte-display);
    font-weight: 700;
    color: var(--ciano);
}

.sistema h3 {
    font-size: var(--fs-base);
    margin-bottom: .2rem;
}

.sistema p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--texto-suave);
}

/* ------------------------------------------------------------ Contato */
.contato {
    display: grid;
    gap: var(--e-6);
}

.contato__titulo-secao {
    font-size: var(--fs-2xl);
}

.contato__intro {
    color: var(--texto-suave);
}

.canais {
    display: grid;
    gap: var(--e-3);
    margin-block: var(--e-5);
}

.canal {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    transition: transform var(--transicao), border-color var(--transicao);
}

.canal:hover {
    transform: translateY(-3px);
    border-color: var(--borda-forte);
}

.canal__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    color: var(--ciano);
}

.canal__rotulo {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-fraco);
}

.canal__valor {
    display: block;
    min-height: 44px;
    align-content: center;
    font-weight: 600;
    word-break: break-word;
}

a.canal__valor:hover {
    color: var(--ciano);
}

.canal__complemento,
.canal__nota {
    display: block;
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
}

.contato__social {
    display: flex;
    gap: .6rem;
}

.contato__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    transition: all var(--transicao);
}

.contato__social a:hover {
    color: #fff;
    border-color: var(--borda-forte);
    background: rgba(0, 212, 255, .12);
    transform: translateY(-2px);
}

/* --------------------------------------------- Acesso direto (sem formulario)
   Substitui o antigo formulario de contato: um cartao de acesso rapido que
   coloca o WhatsApp (canal ja usado pela carteira) como acao principal e
   organiza os demais canais como opcoes secundarias. Menos passos para o
   usuario, menos atrito e nenhum dado pessoal trafegando pelo navegador.  */
.acesso {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    padding: var(--e-5);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(37, 211, 102, .10), transparent 55%),
        var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-2);
    overflow: hidden;
}

/* Brilho superior que confirma a acao principal sem poluir o restante */
.acesso::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--verde-whats, #25d366), transparent);
}

.acesso__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    background: rgba(37, 211, 102, .14);
    border: 1px solid rgba(37, 211, 102, .32);
    color: var(--verde-whats, #25d366);
}

.acesso__rotulo {
    display: inline-block;
    margin-bottom: .4rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--verde-whats, #25d366);
}

.acesso__conteudo h2 {
    font-size: var(--fs-2xl);
    margin-bottom: .4rem;
}

.acesso__conteudo p {
    font-size: var(--fs-sm);
    color: var(--texto-suave);
    max-width: 46ch;
}

/* Botao principal em largura total: alvo de toque generoso em mobile */
.acesso__cta {
    justify-content: center;
    min-height: 56px;
    gap: .6rem;
    font-size: var(--fs-base);
}

.acesso__opcoes {
    display: grid;
    gap: .6rem;
    margin-top: var(--e-2);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
}

.acesso__opcoes a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--e-3);
    min-height: 56px;
    padding: .6rem .85rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}

.acesso__opcoes a:hover {
    border-color: var(--borda-forte);
    background: rgba(255, 255, 255, .06);
    transform: translateX(3px);
}

.acesso__opcao-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    background: var(--gradiente-suave);
    color: var(--ciano);
}

.acesso__opcao-texto {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.acesso__opcao-texto strong {
    font-size: var(--fs-sm);
    color: var(--texto);
}

.acesso__opcao-texto small {
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
    /* E-mails e telefones longos precisam poder quebrar sem estourar o card */
    overflow-wrap: anywhere;
}

.acesso__opcao-seta {
    color: var(--texto-fraco);
    transition: transform var(--transicao), color var(--transicao);
}

.acesso__opcoes a:hover .acesso__opcao-seta {
    color: var(--ciano);
    transform: translateX(2px);
}

.acesso__nota {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
}

.acesso__nota .icone {
    flex-shrink: 0;
    color: var(--menta);
}

[data-enviando] [data-enviar-rotulo] {
    opacity: .7;
}

[data-enviando] {
    pointer-events: none;
    opacity: .8;
}

/* Duvidas rapidas */
.duvidas-rapidas {
    display: grid;
    gap: var(--e-4);
}

.duvida-rapida {
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

.duvida-rapida h3 {
    font-size: var(--fs-lg);
}

.duvida-rapida p {
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--fs-sm);
}

/* ------------------------------------------------------------ Politica */
.politica {
    display: grid;
    gap: var(--e-6);
}

.politica__indice-card {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 20px);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

.politica__indice-titulo {
    font-size: var(--fs-base);
    margin-bottom: var(--e-3);
}

.politica__indice ol {
    display: grid;
    gap: .25rem;
    counter-reset: none;
}

.politica__indice a {
    display: flex;
    gap: .6rem;
    align-items: center;
    min-height: 44px;
    padding: .4rem .5rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--texto-suave);
    transition: background var(--transicao), color var(--transicao);
}

.politica__indice a:hover {
    background: rgba(0, 212, 255, .08);
    color: #fff;
}

.politica__indice a span {
    color: var(--ciano);
    font-weight: 700;
}

.politica__texto {
    font-size: var(--fs-sm);
}

.politica__introducao {
    padding: var(--e-5);
    margin-bottom: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--ciano);
    border-radius: var(--r-lg);
}

.politica__introducao p {
    margin-bottom: var(--e-3);
    text-align: justify;
}

.politica__introducao p:last-child {
    margin-bottom: 0;
}

.politica__secao {
    margin-bottom: var(--e-6);
    scroll-margin-top: calc(var(--altura-cabecalho) + 20px);
}

.politica__secao h2 {
    font-size: var(--fs-xl);
    padding-bottom: var(--e-2);
    border-bottom: 1px solid var(--borda);
}

.politica__secao p {
    color: var(--texto-suave);
}

.politica__lista {
    display: grid;
    gap: .5rem;
    margin: 0 0 var(--e-4);
    padding-left: 1.2rem;
    list-style: disc;
    color: var(--texto-suave);
}

.politica__lista li::marker {
    color: var(--ciano);
}

.politica__contato {
    padding: var(--e-5);
    background: var(--gradiente-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-lg);
}

.politica__contato h2 {
    font-size: var(--fs-lg);
}

.politica__contato p {
    margin: 0;
    color: var(--texto-suave);
}

.politica__contato a {
    color: var(--ciano);
    text-decoration: underline;
}

/* ----------------------------------------------------------- Paginas de erro */
.pagina-erro {
    display: grid;
    place-items: center;
    min-height: 65vh;
    padding-block: var(--e-8);
    text-align: center;
    background: radial-gradient(90% 60% at 50% 0%, #0a1730, var(--fundo) 70%);
}

.pagina-erro__codigo {
    display: block;
    font-family: var(--fonte-display);
    font-size: clamp(4rem, 16vw, 8rem);
    font-weight: 700;
    line-height: 1;
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pagina-erro__texto {
    max-width: 52ch;
    margin: 0 auto var(--e-5);
    color: var(--texto-suave);
}

.pagina-erro__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-bottom: var(--e-6);
}

.pagina-erro__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.pagina-erro__atalhos a {
    padding: .4rem .9rem;
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    color: var(--texto-suave);
    transition: all var(--transicao);
}

.pagina-erro__atalhos a:hover {
    color: #fff;
    border-color: var(--borda-forte);
    background: rgba(0, 212, 255, .08);
}

.pagina-erro__detalhe {
    max-width: 700px;
    margin: 0 auto var(--e-5);
    padding: var(--e-4);
    background: rgba(255, 107, 107, .08);
    border: 1px solid rgba(255, 107, 107, .3);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    text-align: left;
    overflow-x: auto;
    color: #ffc9c9;
}

/* ------------------------------------------------------------------ CTA */
.caixa-cta {
    position: relative;
    display: grid;
    gap: var(--e-5);
    padding: clamp(1.75rem, 5vw, 3.25rem);
    background: linear-gradient(130deg, rgba(0, 108, 255, .28), rgba(0, 255, 200, .18));
    border: 1px solid rgba(0, 212, 255, .35);
    border-radius: var(--r-xl);
    overflow: hidden;
    text-align: center;
}

.caixa-cta::after {
    content: "";
    position: absolute;
    inset: -40% 20%;
    background: radial-gradient(closest-side, rgba(0, 212, 255, .3), transparent);
    animation: brilhar 6s ease-in-out infinite;
    pointer-events: none;
}

.caixa-cta__conteudo,
.caixa-cta__acoes {
    position: relative;
    z-index: 1;
}

.caixa-cta h2 {
    font-size: var(--fs-3xl);
}

.caixa-cta p {
    max-width: 60ch;
    margin: 0 auto;
    color: #dbe8ff;
}

.caixa-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

/* --------------------------------------------------------------- Alertas */
.alerta {
    position: relative;
    z-index: 50;
    padding-block: .75rem;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--borda);
    animation: descer var(--transicao-lenta) both;
}

.alerta__interno {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.alerta__interno p {
    margin: 0;
    flex: 1;
}

.alerta--sucesso {
    background: rgba(34, 211, 138, .12);
    border-color: rgba(34, 211, 138, .35);
    color: #9df3cf;
}

.alerta--erro {
    background: rgba(255, 107, 107, .12);
    border-color: rgba(255, 107, 107, .35);
    color: #ffc0c0;
}

.alerta--aviso {
    background: rgba(255, 196, 77, .12);
    border-color: rgba(255, 196, 77, .35);
    color: #ffe4ad;
}

.alerta--info {
    background: rgba(77, 163, 255, .12);
    border-color: rgba(77, 163, 255, .35);
    color: #bcdcff;
}

.alerta .icone {
    flex-shrink: 0;
}

.alerta__fechar {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: .25rem;
    opacity: .7;
}

.alerta__fechar:hover {
    opacity: 1;
}

/* --------------------------------------------------------------- Rodape */
.rodape {
    padding-top: var(--e-8);
    background: #070b14;
    border-top: 1px solid var(--borda);
}

.rodape__grade {
    display: grid;
    gap: var(--e-6);
    padding-bottom: var(--e-6);
    border-bottom: 1px solid var(--borda);
}

.marca--rodape .marca__texto strong {
    font-size: 1.15rem;
}

.rodape__descricao {
    margin-top: var(--e-3);
    font-size: var(--fs-sm);
    color: var(--texto-fraco);
    max-width: 42ch;
}

.redes-sociais {
    display: flex;
    gap: .5rem;
}

.redes-sociais a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    transition: all var(--transicao);
}

.redes-sociais a:hover {
    color: #fff;
    transform: translateY(-3px);
    border-color: var(--borda-forte);
    background: rgba(0, 212, 255, .12);
}

.rodape__titulo {
    font-size: var(--fs-base);
    margin-bottom: var(--e-3);
    color: #fff;
}

.rodape__lista {
    display: grid;
    gap: .6rem;
    font-size: var(--fs-sm);
}

.rodape__lista a,
.rodape__lista--contato a,
.rodape__lista--contato span {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-height: 44px;
    color: var(--texto-fraco);
    transition: color var(--transicao);
}

.rodape__lista--contato > li {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-height: 44px;
    color: var(--texto-fraco);
}

.rodape__lista a:hover {
    color: var(--ciano);
}

.rodape__lista .icone {
    flex-shrink: 0;
    color: var(--texto-fraco);
}

.rodape__lista a:hover .icone {
    color: var(--ciano);
}

/* Parceiro + atalho do aplicativo.
   O card tem largura fixa e o conjunto fica centralizado: esticar o card
   ate a borda do container criava uma linha longa e desequilibrada, e o
   link do app ficava orfa no canto oposto. */
.rodape__parceiro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-3) var(--e-4);
    padding-block: var(--e-5);
    border-bottom: 1px solid var(--borda);
}

.rodape__parceiro-card {
    display: flex;
    gap: var(--e-3);
    align-items: center;
    flex: 0 1 auto;
    width: 100%;
    max-width: 480px;
    padding: var(--e-4);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
}

.rodape__parceiro-card img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: var(--r-sm);
    background: #fff;
    padding: .35rem;
}

.rodape__parceiro-card > div {
    display: grid;
    gap: .1rem;
    font-size: var(--fs-sm);
}

.rodape__parceiro-rotulo {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-fraco);
}

.rodape__parceiro-card strong {
    color: #fff;
}

.rodape__parceiro-card span {
    color: var(--texto-fraco);
    font-size: var(--fs-xs);
}

.rodape__app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .6rem 1.2rem;
    border: 1px solid var(--borda-suave);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--texto-suave);
    transition: all var(--transicao);
}

.rodape__app:hover {
    color: #fff;
    border-color: var(--borda-forte);
    background: rgba(0, 212, 255, .08);
}

/* Selos de seguranca (Safe Browsing / SSL) — centralizados no rodape. */
.rodape__selos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    align-items: center;
    justify-content: center;
    padding-block: var(--e-5);
}

.rodape__selos img {
    width: auto;
    height: 50px;
    border-radius: var(--r-sm);
    opacity: .85;
    transition: opacity var(--transicao);
}

.rodape__selos a:hover img {
    opacity: 1;
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    padding-block: var(--e-5);
    border-top: 1px solid var(--borda);
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
}

.rodape__base p {
    margin: 0;
}

/* ------------------------------------------------- Barra mobile / flutuante */
.barra-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: rgba(5, 8, 15, .95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--borda);
    transform: translateY(110%);
    transition: transform var(--transicao-lenta);
}

.barra-mobile--visivel {
    transform: translateY(0);
}

.barra-mobile__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 48px;
    border-radius: var(--r-md);
    border: 1px solid var(--borda-suave);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.barra-mobile__item--destaque {
    background: var(--gradiente);
    color: #00131c;
    border-color: transparent;
}

/* ------------------------------------------------- Chat flutuante (fallback)
   Usado apenas se o widget WBot nao inicializar (ver partials/chat.php). */
.chat-site {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}

.chat-site[hidden] {
    display: none;
}

.chat-site__botao {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 56px;
    padding: .5rem 1.15rem .5rem .5rem;
    background: var(--gradiente);
    color: #00131c;
    border: 0;
    border-radius: var(--r-full);
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    box-shadow: 0 16px 34px -14px rgba(0, 212, 255, .8);
    transition: transform var(--transicao), box-shadow var(--transicao);
}

.chat-site__botao:hover {
    transform: scale(1.03);
}

.chat-site__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .16);
    border-radius: 50%;
}

.chat-site__painel {
    width: min(92vw, 340px);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-3);
    overflow: hidden;
    animation: revelar var(--transicao-lenta) both;
}

.chat-site__painel[hidden] {
    display: none;
}

.chat-site__topo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    background: var(--gradiente-suave);
    border-bottom: 1px solid var(--borda);
}

.chat-site__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradiente);
    color: #00131c;
}

.chat-site__topo strong {
    display: block;
    font-size: var(--fs-sm);
    color: #fff;
}

.chat-site__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: var(--menta);
}

.chat-site__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.chat-site__fechar {
    margin-left: auto;
    padding: .35rem;
    background: none;
    border: 0;
    color: var(--texto-fraco);
    cursor: pointer;
    border-radius: var(--r-sm);
}

.chat-site__fechar:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.chat-site__corpo {
    display: grid;
    gap: .6rem;
    padding: 1rem;
}

.chat-site__bolha {
    position: relative;
    margin: 0 0 .25rem;
    padding: .75rem .9rem;
    background: var(--superficie-3);
    border-radius: 14px 14px 14px 4px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--texto);
}

.chat-site__acao {
    min-height: 46px;
}

.chat-site__nota {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .15rem 0 0;
    font-size: var(--fs-xs);
    color: var(--texto-fraco);
}

.chat-site__link {
    font-size: var(--fs-xs);
    color: var(--ciano);
    text-align: center;
}

.chat-site__link:hover {
    text-decoration: underline;
}

/* some quando o rodape entra em cena (nao cobre o CTA de atendimento) */
.flutuante--oculto {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* ------------------------------------------------- Widget original (WBot)
   O script de terceiros injeta #wbot-chat / #wbot-open-chat /
   #wbot-notificacao com position: fixed e z-index proprio. Aqui so
   ajustamos tamanho e posicao para nao quebrar o layout responsivo.  */
#wbot-chat {
    max-width: calc(100vw - 2rem);
}

#wbot-open-chat {
    /* fica acima da barra de acao mobile */
    transition: bottom var(--transicao);
}

/* ------------------------------------------- Botao flutuante do WhatsApp
   Substitui o widget de terceiro no mobile: circulo, verde oficial do
   WhatsApp, com um pulso lento que chama atencao sem ser agressivo. No
   desktop continua sendo o widget original (ver @media abaixo).        */
.whats-flutuante {
    position: fixed;
    right: 1rem;
    /* acima da barra de acao mobile (que tem ~72px) */
    bottom: calc(5.5rem + 12px);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .7);
    animation: pulsar-whats 3.2s var(--transicao) infinite;
    transition: transform var(--transicao);
}

.whats-flutuante:active {
    transform: scale(.94);
}

/* O halo cresce e some devagar: 3,2 s por ciclo, sem piscar. */
@keyframes pulsar-whats {
    0% {
        box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .7), 0 0 0 0 rgba(37, 211, 102, .55);
    }

    70%,
    100% {
        box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .7), 0 0 0 18px rgba(37, 211, 102, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .whats-flutuante {
        animation: none;
    }
}

/* No desktop o botao nao existe: quem aparece e o widget. */
@media (min-width: 1024px) {
    .whats-flutuante {
        display: none;
    }
}

.voltar-topo {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 89;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--superficie-2);
    border: 1px solid var(--borda-suave);
    border-radius: 50%;
    color: var(--texto);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transicao), transform var(--transicao);
}

.voltar-topo--visivel {
    opacity: 1;
    transform: translateY(0);
}

.voltar-topo[hidden] {
    display: none;
}

/* ------------------------------------------------------ Animações de entrada
   Sem JS (.sem-js) tudo aparece normalmente. Com JS, animamos apenas o que
   está em viewport — e existe uma rede de segurança no main.js que revela
   o conteúdo caso o IntersectionObserver não dispare. */
.reveal {
    opacity: 1;
}

.js .reveal,
.js [data-revelar]:not(.reveal) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--transicao-lenta), transform .7s var(--transicao-lenta);
    transition-delay: calc(var(--revelar-atraso, 0) * 80ms);
    will-change: opacity, transform;
}

.js .reveal.visivel,
.js [data-revelar]:not(.reveal).visivel {
    opacity: 1;
    transform: none;
}

/* Rede de seguranca final: o <script> do <head> marca `js-destravado` 1,5 s
   depois do load. Se o main.js nao rodar (bloqueado pela CSP, falha de
   rede, erro de sintaxe), e esta regra que garante que nada fica com
   opacity: 0 para sempre — texto e imagens sempre visiveis. */
.js-destravado .reveal,
.js-destravado [data-revelar]:not(.reveal) {
    opacity: 1 !important;
    transform: none !important;
}

/* Elementos marcados com data-revelar atrasado */
.reveal[data-revelar-atraso],
[data-revelar][data-revelar-atraso] {
    --revelar-atraso: 0;
}

/* Respeita quem desativou animações */
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js [data-revelar]:not(.reveal) {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------- Animações */
@keyframes girar {
    to { transform: rotate(360deg); }
}

@keyframes pulsar {
    70% { box-shadow: 0 0 0 10px rgba(0, 255, 200, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 200, 0); }
}

@keyframes piscar {
    50% { opacity: 0; }
}

@keyframes saltitar {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes brilhar {
    0%, 100% { transform: translateX(-10%); opacity: .5; }
    50% { transform: translateX(10%); opacity: .9; }
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes entrar-direita {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes descer {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes revelar {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Esc responsiva
   320  → 1 coluna, marca compacta, alvos de toque confortáveis
   480  → tagline da marca volta, alvos seguem grandes
   600  → grades de 2 colunas
   900  → navegação desktop, grades de 3/4 colunas, hero em 2 colunas
   1100 → 4 colunas em planos compactos e política com índice lateral
   1200 → 3 colunas em planos
   ========================================================================== */

/* ------------------------------------------------- Telas pequenas (≤479) */
@media (max-width: 479px) {
    :root {
        --e-5: 1.25rem;
        --e-6: 1.5rem;
        --e-7: 2.25rem;
        --secao-y: clamp(2.75rem, 9vw, 4rem);
        --marca-quadro: 38px;
    }

    /* A tagline da marca estourava o header em telas de 320px */
    .marca__texto small {
        display: none;
    }

    .marca__texto strong {
        font-size: 1.1rem;
    }

    .marca__logo {
        width: 38px;
        height: 38px;
    }

    /* Alvos de toque confortáveis (recomendação WCAG 2.5.5 / Apple HIG) */
    .botao--pequeno,
    .periodo__botao,
    .sistemas__filtro,
    .botao-icone-menu {
        min-height: 44px;
    }

    .redes-sociais a,
    .contato__social a {
        width: 44px;
        height: 44px;
    }

    .canal__valor {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Ajustes tipograficos para caber sem quebrar linha */
    .selo {
        font-size: .68rem;
        letter-spacing: .04em;
        padding: .4rem .75rem;
    }

    .canal__valor {
        font-size: .9rem;
        overflow-wrap: anywhere;
    }

    /* Evita que numeros e precos estourem em telas estreitas */
    .plano__valor {
        font-size: 1.75rem;
    }

    .plano__preco-linha {
        gap: .25rem;
    }

    .rodape__parceiro-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ------------------------------------------------------------- ≥ 480px */
@media (min-width: 480px) {
    .marca__logo {
        width: 42px;
        height: 42px;
    }
}

/* ------------------------------------------------------------- ≥ 600px */
@media (min-width: 600px) {
    .numeros,
    .indicadores {
        grid-template-columns: repeat(2, 1fr);
    }

    .formulario__dupla {
        grid-template-columns: 1fr 1fr;
    }

    .lista-observacoes,
    .sistemas__lista {
        grid-template-columns: repeat(2, 1fr);
    }

    .duvidas-rapidas {
        grid-template-columns: repeat(2, 1fr);
    }

    .compliance {
        grid-template-columns: repeat(2, 1fr);
    }

    .planos {
        grid-template-columns: repeat(2, 1fr);
    }

    .politica {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------- ≥ 900px */
@media (min-width: 900px) {
    .navegacao {
        display: block;
    }

    .cabecalho__cta {
        display: inline-flex;
    }

    .botao-icone-menu {
        display: none;
    }

    .demo {
        grid-template-columns: 1fr 1.05fr;
    }

    .numeros,
    .indicadores {
        grid-template-columns: repeat(4, 1fr);
    }

    .duvidas-rapidas {
        grid-template-columns: repeat(3, 1fr);
    }

    .sistemas__lista {
        grid-template-columns: repeat(3, 1fr);
    }

    .equipe__cartao {
        grid-template-columns: 160px 1fr;
        align-items: start;
    }

    .pilares,
    .contato {
        grid-template-columns: repeat(2, 1fr);
    }

    .pilares {
        grid-template-columns: repeat(3, 1fr);
    }

    .endereco,
    .contato-parceira {
        grid-template-columns: 1fr 1.15fr;
        /* stretch (e nao start): mapa e painel de infos terminam na mesma
           altura. Com start, o iframe ficava nos seus 360px fixos e o painel
           variava conforme o texto, deixando as bordas desalinhadas. */
        align-items: stretch;
    }

    .heroi-sobre,
    .heroi-parcerias {
        grid-template-columns: 1.15fr .85fr;
    }

    /* O bento ja e 3 colunas desde o mobile: ver .bento no corpo do CSS. */

    /* 3 colunas: marca, navegacao e contato */
    .rodape__grade {
        grid-template-columns: 1.5fr 1fr 1.4fr;
    }

    .rodape__chamada {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: var(--e-5) var(--e-6);
    }

    .rodape__chamada-acoes {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
    }

    .rodape__parceiro {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .caixa-cta {
        grid-template-columns: 1.4fr auto;
        align-items: center;
        text-align: left;
    }

    .caixa-cta p {
        margin: 0;
    }

    .caixa-cta__acoes {
        justify-content: flex-end;
    }

    .integracoes {
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
    }

    /* A dica de arrastar a tabela so faz sentido onde ela realmente rola */
    .dica-tabela {
        display: none;
    }
}

/* ------------------------------------------------------------ ≥ 1100px */
@media (min-width: 1100px) {
    /* 4 planos por linha: vale tanto para o grupo de 8 (2 linhas de 4)
       quanto para o grupo de 4 da API QR Code (1 linha de 4). */
    .planos--quarteto {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Reserva a altura da descricao para os cards ficarem alinhados quando
       o texto wraps em 2 linhas. */
    .planos--quarteto .plano__descricao {
        min-height: 4.5em;
    }

    .politica {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--e-6);
    }
}

/* ------------------------------------------------------------ ≥ 1200px */
@media (min-width: 1200px) {
    /* Grupo de exatamente 3 planos: 3 por linha. */
    .planos--tres {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Barra mobile some no desktop */
@media (min-width: 1024px) {
    .barra-mobile {
        display: none;
    }

    .chat-site {
        bottom: 1rem;
    }

    .rodape {
        padding-bottom: var(--e-5);
    }
}

/* Acima da barra de acao mobile, o chat e o botao de topo sobem */
@media (max-width: 1023px) {
    .chat-site {
        bottom: 5.5rem;
    }

    /* O botao flutuante do WhatsApp ocupa a faixa entre a barra e o
       "voltar ao topo", entao o topo sobe mais um passo (60px + folga). */
    .voltar-topo {
        bottom: calc(5.5rem + 12px + 60px + 12px);
    }

    /* No mobile quem atende e o botao verde do WhatsApp (.whats-flutuante):
       o widget de terceiro la abre um painel que cobre a tela e atrapalha a
       rolagem, alem de custar uma chamada de API em toda visita. */
    #wbot-chat-container {
        display: none !important;
    }
}

/* Em telas estreitas o painel do widget (350px fixo) nao caberia */
@media (max-width: 640px) {
    #wbot-chat-container #wbot-chat {
        width: calc(100vw - 24px) !important;
    }

    #wbot-chat-container #wbot-open-chat {
        right: 12px !important;
    }
}

/* O widget define altura em vh; limitamos para nunca invadir topo nem rodape */
#wbot-chat-container #wbot-chat {
    max-height: min(560px, calc(100vh - 120px)) !important;
    height: auto !important;
}

#wbot-chat-container #wbot-chat-main-wrapper {
    min-height: 0;
}

/* O widget usa #428ffa no botao de acao rápida ("Iniciar"): branco sobre
   esse azul da 3.21:1 de contraste. Escurecemos o fundo do quick reply. */
#wbot-chat-container .wbot-quick-replies button,
#wbot-chat-container #wbot-quick-replies button {
    background: #0a5bd0 !important;
    color: #fff !important;
}

/* --------------------------------------------------------- Acessibilidade
   O widget injeta botoes apenas com icone (sem texto nem aria-label), o que
   reprova em leitores de tela. Rotulos sao apenas para leitores de tela:
   visualmente os botoes seguem identicos ao original.                 */
.sr-wbot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- Preferencias */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .faixa-confianca__faixa {
        animation: none;
    }
}

@media print {
    .cabecalho,
    .rodape,
    .barra-mobile,
    .chat-site,
    #wbot-chat-container,
    #wbot-notificacao,
    .voltar-topo,
    .politica__indice,
    .caixa-cta {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a {
        color: #000;
    }
}