/* =====================================================
   AtlasPoli v2 (modelo pingback.com)
   7.0 base · 7.1 topo
   Estrutura e efeitos estudados no site de referência; traçados,
   textos e imagens são próprios da AtlasPoli.
   ===================================================== */

:root{
    /* cor viva de cada módulo */
    --c-liderancas:#6A37E2;
    --c-atendimentos:#F27A1A;
    --c-whatsapp:#5E9A0E;
    --c-emendas:#E2474F;
    --c-agenda:#2F63C9;
    --c-gastos:#E9A712;
    /* base */
    --navy:#1E2657;
    --navy-fundo:#171C43;          /* onde a referência usa preto */
    --tinta:#141833;               /* texto escuro sobre as cores vivas */
    --creme:#F6F3EE;
    --branco:#FFFFFF;
    --linha:#E4E0D8;

    --f-display:'Archivo',system-ui,sans-serif;
    --f-texto:'Public Sans',system-ui,sans-serif;

    /* curvas (skill de movimento): mola para entradas, suave para trocas, rápida para hover */
    --mola:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067 22.5%,1.089 26%,1.079 30.3%,1.049 36%,1.024 42.6%,1.011 50.3%,1.004 59.2%,1.001 69.3%,1);
    --suave:cubic-bezier(.65,0,.35,1);
    --rapida:cubic-bezier(.22,1,.36,1);

    --r-1:3px; --r-2:6px; --r-3:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-texto);color:var(--tinta);background:var(--creme);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botões (pílula, como os do site atual) ---------- */
.bt{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    min-height:44px;padding:.8rem 1.4rem;border-radius:999px;
    font:600 .92rem/1 var(--f-texto);white-space:nowrap;cursor:pointer;border:0;
    transition:transform .16s var(--rapida),background-color .2s var(--rapida),box-shadow .2s var(--rapida);
}
.bt:active{transform:scale(.97)}
.bt-escuro{background:#15162A;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bt-claro{background:#fff;color:var(--navy)}
@media (hover:hover) and (pointer:fine){
    .bt-escuro:hover{background:#23254a}
    .bt-claro:hover{background:#EEF1F8}
}

/* =====================================================
   7.0 · CABEÇALHO
   Logo à esquerda, links numa pílula escura no centro, ação à direita.
   ===================================================== */
.topo-nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
    padding:1.1rem clamp(1rem,4vw,3rem);
    transition:background-color .3s var(--suave),padding .3s var(--suave);
}
.topo-nav.rolou{padding-block:.7rem}
.topo-logo{justify-self:start}
.topo-logo img{height:26px;width:auto}
.topo-links{
    display:flex;gap:.2rem;padding:.3rem;border-radius:999px;
    background:rgba(20,22,44,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.topo-links a{
    padding:.55rem .95rem;border-radius:999px;color:#fff;font:500 .92rem/1 var(--f-texto);
    transition:background-color .2s var(--rapida);
}
@media (hover:hover) and (pointer:fine){ .topo-links a:hover{background:rgba(255,255,255,.14)} }
.topo-acoes{justify-self:end}
.topo-menu,.topo-gaveta{display:none}

@media (max-width:980px){
    .topo-nav{grid-template-columns:1fr auto}
    .topo-links,.topo-acoes{display:none}
    .topo-menu{
        display:grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;
        border:0;border-radius:999px;background:rgba(20,22,44,.72);cursor:pointer;
    }
    .topo-menu span{display:block;width:18px;height:2px;background:#fff;transition:transform .25s var(--rapida)}
    .topo-menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
    .topo-menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
    .topo-gaveta{
        display:grid;gap:.2rem;grid-column:1/-1;
        max-height:0;overflow:hidden;opacity:0;
        background:rgba(20,22,44,.94);border-radius:var(--r-3);
        transition:max-height .35s var(--suave),opacity .25s var(--suave),padding .35s var(--suave);
    }
    .topo-gaveta.aberta{max-height:420px;opacity:1;padding:.8rem}
    .topo-gaveta a{color:#fff;padding:.8rem .6rem;font-weight:500}
    .topo-gaveta .bt{margin-top:.4rem}
}

/* =====================================================
   7.1 · TOPO
   Camadas, de trás para a frente:
   cor → pontos → PARA QUEM + verbo → luz → fita → pessoa →
   palavra do módulo → notebook → botão
   ===================================================== */
.hero{
    --cor:var(--c-liderancas);
    position:relative;overflow:hidden;isolation:isolate;
    height:max(90svh,680px);max-height:880px;
    background:var(--cor);
    transition:background-color .7s var(--suave);
    color:#fff;
}
.hero[data-variante="1"]{--cor:var(--c-atendimentos)}
.hero[data-variante="2"]{--cor:var(--c-whatsapp)}
.hero[data-variante="3"]{--cor:var(--c-emendas)}

/* grade de pontos, 33.5px como na referência, bem discreta */
.hero-pontos{
    position:absolute;inset:0;z-index:0;opacity:.28;
    background-image:radial-gradient(circle,rgba(255,255,255,.55) 1.1px,transparent 1.4px);
    background-size:33.5px 33.5px;background-position:center top;
}

/* ---- tipografia gigante: Archivo na largura mais estreita ---- */
.hero-linha,.hero-meio{
    position:absolute;left:50%;transform:translateX(-50%);
    width:min(92vw,1180px);text-align:center;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    text-transform:uppercase;letter-spacing:-.01em;line-height:.8;
}
.hero-cima{top:15.5%;z-index:6;color:var(--tinta);font-size:clamp(4.2rem,15.2vw,14rem);height:.86em}
.hero-baixo{top:56%;z-index:2;color:rgba(255,255,255,.5);font-size:clamp(4.2rem,15.2vw,14rem);height:.86em}
.hero-meio{
    top:41.5%;z-index:2;display:flex;justify-content:space-between;
    font-size:clamp(3rem,8.4vw,7.6rem);color:rgba(255,255,255,.5);
    width:min(62vw,880px);
}

/* troca de palavra: a atual sobe e some, a próxima sobe de baixo */
.hero-palavra{
    position:absolute;left:0;right:0;top:0;
    opacity:0;transform:translateY(70%);
    transition:transform .75s var(--mola),opacity .35s var(--suave);
}
.hero-palavra.on{opacity:1;transform:none}
.hero-palavra.sai{opacity:0;transform:translateY(-70%);transition:transform .6s var(--suave),opacity .3s var(--suave)}

/* luz branca que nasce atrás do notebook */
.hero-luz{
    position:absolute;z-index:3;left:50%;bottom:-18%;transform:translateX(-50%);
    width:min(70vw,900px);aspect-ratio:1.1;
    background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.28) 45%,transparent 72%);
    pointer-events:none;
}

/* fita colorida */
.hero-fita{position:absolute;z-index:4;left:-4%;width:108%;bottom:4%;height:auto;aspect-ratio:2020/642;overflow:visible;pointer-events:none}
.hero-fita path{fill:none;stroke-width:35;stroke-linecap:butt}

/* pessoa */
.hero-pessoas{
    position:absolute;z-index:5;left:50%;bottom:0;transform:translateX(-50%);
    width:min(46vw,560px);aspect-ratio:5/6;
}
.hero-pessoa{
    position:absolute;inset:0;margin:0;
    opacity:0;transform:scale(.92);transform-origin:50% 100%;
    transition:opacity .45s var(--suave),transform .7s var(--mola);
}
.hero-pessoa.on{opacity:1;transform:none}
.hero-pessoa img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* espaço reservado: silhueta na tinta escura da variação */
.hero-pessoa svg{width:100%;height:100%;fill:rgba(20,24,51,.32)}
.hero-pessoa figcaption{
    position:absolute;left:50%;top:44%;transform:translateX(-50%);
    font:600 .8rem/1.3 var(--f-texto);color:rgba(255,255,255,.85);text-align:center;
    background:rgba(20,24,51,.45);padding:.35rem .6rem;border-radius:var(--r-1);white-space:nowrap;
}

/* notebook: só a tampa aparece, o corpo fica cortado pela borda */
.hero-notebook{
    position:absolute;z-index:7;left:50%;transform:translateX(-50%);
    top:72%;width:min(58vw,820px);
}
.hero-notebook img{width:100%;height:auto;filter:drop-shadow(0 -8px 40px rgba(255,255,255,.35))}

.bt-hero{
    position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:5.5%;
    min-height:52px;padding-inline:1.6rem;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 6px rgba(255,255,255,.12),0 14px 30px -12px rgba(0,0,0,.45);
}
.bt-hero:active{transform:translateX(-50%) scale(.97)}

/* entrada da página: palavra, pessoa e notebook sobem em sequência */
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sobeCentro{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.hero-cima,.hero-meio,.hero-baixo{animation:sobeCentro .8s var(--mola) both}
.hero-meio{animation-delay:.1s}
.hero-baixo{animation-delay:.18s}
.hero-pessoas{animation:sobeCentro .9s var(--mola) .22s both}
.hero-notebook{animation:sobeCentro .9s var(--mola) .34s both}
.bt-hero{animation:sobeCentro .7s var(--mola) .5s both}

/* ---------- tablet e celular ----------
   Mesma pilha, proporções de tela em pé: palavras maiores em relação à
   largura, pessoa no meio, notebook mostrando só a tampa na base. */
@media (max-width:900px){
    .hero{height:max(100svh,640px);max-height:980px}
    .hero-cima{top:13%;font-size:clamp(3.2rem,16.5vw,8.4rem)}
    .hero-meio{top:26%;width:86vw;font-size:clamp(2.2rem,10.5vw,5.2rem)}
    .hero-baixo{top:34.5%;font-size:clamp(3.2rem,16.5vw,8.4rem)}
    .hero-pessoas{width:min(80vw,460px);bottom:17%}
    .hero-notebook{top:auto;bottom:-24%;width:min(92vw,640px)}
    .hero-fita{bottom:16%;width:190%;left:-45%}
    .hero-luz{width:130vw;bottom:-14%}
    .bt-hero{bottom:3.5%}
}
@media (max-width:520px){
    .hero-pessoas{bottom:15%}
    .hero-notebook{bottom:-20%;width:96vw}
}

@media (prefers-reduced-motion:reduce){
    .hero,.hero-palavra,.hero-pessoa{transition:opacity .2s linear}
    .hero-palavra,.hero-palavra.sai{transform:none}
    .hero-pessoa{transform:none}
    .hero-cima,.hero-meio,.hero-baixo,.hero-pessoas,.hero-notebook,.bt-hero{animation:none}
}

/* marcador provisório das próximas etapas */
.proxima{min-height:60vh;display:grid;place-items:center;background:var(--navy-fundo);color:rgba(255,255,255,.5);font:500 1rem var(--f-texto)}

/* palavra encolhida para caber fica apoiada na mesma linha de base das outras */
.hero-palavra{height:100%;display:flex;align-items:flex-end;justify-content:center;white-space:nowrap}

/* ---------- notebook visto por trás (tampa em CSS, no lugar da foto do painel) ----------
   Mesmas proporções da referência: 57% da largura, a tampa sobe ~28% do topo
   a partir da borda de baixo, cantos de cima arredondados, alumínio bege. */
.hero-notebook{top:auto;bottom:0;width:min(57vw,820px);height:28%;animation-name:sobeCentro}
.hero-notebook img{display:none}
.tampa{
    position:absolute;inset:0;
    border-radius:clamp(12px,1.6vw,22px) clamp(12px,1.6vw,22px) 0 0 !important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 3px),            /* aresta de cima pega luz */
        repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px), /* escovado do alumínio */
        linear-gradient(90deg,#9D8E85 0%,#A5938A 30%,#A58F84 55%,#AE9F97 82%,#B6ABA4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -30px 40px -30px rgba(80,60,50,.25),
        0 -18px 60px -10px rgba(255,255,255,.35);
}
@media (max-width:900px){
    .hero-notebook{bottom:0;width:min(88vw,620px);height:22%}
}

/* =====================================================
   7.2 · FAIXAS CRUZADAS
   Medido na referência: 80px, inclinadas +3° e -3°, centradas na divisa,
   uma para a esquerda (~47px/s) e outra para a direita (~36px/s).
   ===================================================== */
.faixas{position:relative;z-index:20;height:0}
.faixa{
    position:absolute;left:-6%;width:112%;height:80px;top:-40px;
    display:flex;align-items:center;overflow:hidden;
    background:var(--navy-fundo);
    box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.faixa-a{transform:rotate(3deg)}
.faixa-b{transform:rotate(-3deg);background:#1B2150}
.faixa-trilho{display:flex;align-items:center;width:max-content;will-change:transform;animation:faixaAnda var(--dur,60s) linear infinite}
.faixa-trilho[data-sentido="1"]{animation-direction:reverse}
@keyframes faixaAnda{to{transform:translate3d(-50%,0,0)}}
.faixa-item{
    padding:0 .2rem;white-space:nowrap;color:#fff;
    font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;
    font-size:1.45rem;letter-spacing:-.01em;text-transform:uppercase;
}
.faixa-b .faixa-item{color:rgba(255,255,255,.72)}
/* separador: o globo da marca, pequeno */
.faixa-sep{
    flex:none;width:22px;height:22px;margin:0 1.4rem;opacity:.75;
    background:url(../img/marca-globo-64.webp) center/contain no-repeat;
}
@media (max-width:900px){
    .faixa{height:56px;top:-28px}
    .faixa-item{font-size:1.05rem}
    .faixa-sep{width:16px;height:16px;margin:0 1rem}
}
@media (prefers-reduced-motion:reduce){ .faixa-trilho{animation:none} }
/* as faixas inclinadas passam da largura da tela: corta só na horizontal */
main{overflow-x:clip}
/* celular: tela estreita demais para o X aparecer; as faixas ficam deslocadas
   uma da outra, ainda inclinadas para lados opostos */
@media (max-width:900px){
    .faixa-a{top:-50px;transform:rotate(2.5deg)}
    .faixa-b{top:-8px;transform:rotate(-2.5deg)}
}
/* celular: o botão do topo fica acima da faixa de cima */
@media (max-width:900px){ .bt-hero{bottom:78px} .hero-notebook{height:calc(22% + 20px)} }

/* pontos do fundo mais visíveis (pedido do Edmar) */
.hero-pontos{opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.85) 1.25px,transparent 1.6px)}

/* =====================================================
   7.3 · O ATLASPOLI É PARA QUEM FAZ
   Estudado na referência: 8 cards sobrepostos; o aberto ocupa o espaço,
   os fechados viram abas de 80px com o nome na vertical. Clique abre;
   passar o mouse levanta a aba 40px. Cada card fica por cima do seguinte.
   Cantos: 18px (a referência usa 56px; o Edmar prefere arredondado discreto).
   ===================================================== */
.modulos{
    --aba:80px; --r-card:18px;
    position:relative;background:var(--navy-fundo);color:#F7F3F0;
    padding:clamp(7rem,11vw,9.5rem) 0 clamp(5rem,8vw,7rem);text-align:center;
}
.modulos-marca{width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%}
.modulos-titulo{
    margin:0 0 clamp(2.4rem,4vw,3.4rem);
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    font-size:clamp(2.4rem,4.4vw,4rem);line-height:.95;text-transform:uppercase;letter-spacing:-.005em;
}
.cards-mod{display:flex;width:min(1200px,92vw);height:620px;margin:0 auto;text-align:left}
.card-mod{
    --i:0;
    position:relative;flex:0 0 var(--aba);min-width:0;
    margin-right:calc(var(--r-card) * -1);
    background:var(--cor);border-radius:var(--r-card);
    box-shadow:6px 0 18px -8px rgba(0,0,0,.35);
    transition:flex-grow .7s var(--suave),flex-basis .7s var(--suave),transform .45s var(--mola);
}
.card-mod:last-child{margin-right:0}
.card-mod.aberto{flex:1 1 var(--aba)}
/* cada card por cima do seguinte (o JS escreve o z-index) */
.card-aba{
    position:absolute;inset:0;width:100%;padding:0;border:0;background:none;cursor:pointer;
    border-radius:inherit;text-align:left;color:inherit;font:inherit;
}
.card-aba:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.card-nome{
    position:absolute;top:28px;left:calc((var(--aba) - 1em) / 2 - 2px);
    writing-mode:vertical-rl;white-space:nowrap;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    font-size:3.2rem;line-height:1;text-transform:uppercase;color:#F7F3F0;
    transition:opacity .25s var(--suave);
}
.card-mod.aberto .card-aba{pointer-events:none}
.card-mod.aberto .card-nome{opacity:0}
/* passar o mouse levanta a aba fechada */
@media (hover:hover) and (pointer:fine){
    .card-mod:not(.aberto):hover{transform:translateY(-40px)}
}
.card-corpo{
    position:absolute;top:0;bottom:0;left:0;
    width:calc(100% - var(--r-card));min-width:520px;
    padding:18px 26px 26px calc(var(--r-card) + 18px);
    display:flex;flex-direction:column;gap:14px;
    opacity:0;visibility:hidden;transition:opacity .2s var(--suave),visibility 0s .2s;
}
.card-mod:first-child .card-corpo{padding-left:18px}
.card-mod.aberto .card-corpo{opacity:1;visibility:visible;transition:opacity .45s var(--suave) .3s,visibility 0s .3s}
.card-midia{
    aspect-ratio:16/9;border-radius:12px;overflow:hidden;
    background:rgba(255,255,255,.16);display:grid;place-items:center;
}
.card-midia img{width:100%;height:100%;object-fit:contain;padding:8px}
.card-reserva{font:600 .9rem/1.3 var(--f-texto);color:rgba(255,255,255,.8);padding:.4rem .7rem;border:1px dashed rgba(255,255,255,.5);border-radius:var(--r-1)}
.card-titulo{
    margin:6px 0 0;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;
    font-size:1.75rem;line-height:1.05;letter-spacing:-.01em;
}
.card-desc{margin:0;font-size:1rem;line-height:1.55;color:rgba(247,243,240,.9);max-width:52ch}

/* ---------- tablet e celular: pilha vertical ---------- */
@media (max-width:1100px){
    .cards-mod{flex-direction:column;height:auto;width:min(640px,92vw)}
    .card-mod{
        flex:none;margin-right:0;margin-bottom:calc(var(--r-card) * -1);
        display:grid;grid-template-rows:auto 0fr;
        box-shadow:0 6px 18px -8px rgba(0,0,0,.4);
        transition:grid-template-rows .6s var(--suave);
    }
    .card-mod:last-child{margin-bottom:0}
    .card-mod.aberto{flex:none;grid-template-rows:auto 1fr}
    .card-aba{position:relative;inset:auto;height:calc(64px + var(--r-card));padding-bottom:var(--r-card)}
    .card-nome{writing-mode:horizontal-tb;top:18px;left:20px;font-size:2.1rem}
    .card-mod.aberto .card-aba{height:64px;padding-bottom:0}
    .card-mod.aberto .card-nome{opacity:1}
    .card-corpo{position:relative;width:auto;min-width:0;overflow:hidden;padding:0 16px;gap:12px}
    .card-mod.aberto .card-corpo{padding:0 16px calc(22px + var(--r-card))}
    .card-mod:first-child .card-corpo{padding-left:16px}
    .card-titulo{font-size:1.45rem}
    .card-desc{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){ .card-mod,.card-corpo{transition:none} }

/* =====================================================
   Títulos de seção (7.4 em diante)
   ===================================================== */
.sec-tit{
    margin:0 auto .6rem;max-width:22ch;text-align:center;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    font-size:clamp(2.2rem,4.2vw,3.8rem);line-height:.98;letter-spacing:-.005em;color:var(--tinta);
    text-wrap:balance;
}
.sec-tit.menor{font-size:clamp(1.9rem,3.2vw,2.8rem);margin-top:clamp(3.5rem,6vw,5rem)}
.sec-sub{margin:0 auto clamp(2rem,4vw,3rem);max-width:58ch;text-align:center;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;color:#5B5D72}
.claro{color:#F7F3F0}
.sec-sub.claro{color:rgba(247,243,240,.72)}

/* =====================================================
   7.4 · CASOS DE USO (continua o fundo escuro dos módulos)
   ===================================================== */
.casos{background:var(--navy-fundo);padding:clamp(2rem,4vw,3rem) 0 clamp(7rem,10vw,9rem)}
.casos-palco{position:relative;width:min(1320px,100%);margin:0 auto}
.casos-trilho{
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    padding:.5rem clamp(16px,4vw,48px) 1rem;scrollbar-width:none;
}
.casos-trilho::-webkit-scrollbar{display:none}
.caso{
    position:relative;flex:0 0 clamp(240px,22vw,300px);aspect-ratio:3/4.4;scroll-snap-align:start;
    border-radius:18px;overflow:hidden;background:#0F1330;isolation:isolate;
    transition:transform .45s var(--mola);
}
@media (hover:hover) and (pointer:fine){ .caso:hover{transform:translateY(-8px)} }
/* espaço reservado da imagem C1 a C6: luz na cor do caso */
.caso-img{
    position:absolute;inset:0;z-index:-1;display:grid;place-items:start center;padding-top:22%;
    background:radial-gradient(70% 55% at 50% 38%,color-mix(in srgb,var(--cor) 85%,#fff 15%),transparent 70%),
               linear-gradient(180deg,#141a44,#0B0F28);
}
.caso-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.caso-img span{font:600 .78rem/1.3 var(--f-texto);color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.55);padding:.35rem .6rem;border-radius:var(--r-1)}
.caso-txt{
    position:absolute;left:0;right:0;bottom:0;padding:3.2rem 1rem 1.3rem;text-align:center;
    background:linear-gradient(180deg,transparent,rgba(8,10,30,.88) 55%);
}
.caso-rot{margin:0 0 .3rem;font:500 .8rem/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.caso-tit{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:2.1rem;line-height:.92;text-transform:uppercase;color:#fff}
.casos-seta{
    position:absolute;top:42%;z-index:3;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
    background:#15162A;color:#fff;font:600 1.6rem/1 var(--f-texto);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
    transition:transform .16s var(--rapida),opacity .2s;
}
.casos-seta:active{transform:scale(.95)}
.casos-seta.anterior{left:clamp(6px,2vw,24px)}
.casos-seta.seguinte{right:clamp(6px,2vw,24px)}
.casos-seta[disabled]{opacity:.3;cursor:default}
@media (max-width:700px){ .casos-seta{display:none} .caso{flex-basis:72vw} }

/* =====================================================
   7.5 · PLANOS com a marca de fundo cortada
   ===================================================== */
.planos{
    --traco:rgba(30,38,87,.28);
    background:#F7F3F0;padding:clamp(4.5rem,7vw,6rem) 0 clamp(3rem,5vw,4rem);overflow:hidden;
}
.marca-dagua{width:min(1200px,92vw);margin:0 auto;overflow:hidden;position:relative}
.marca-dagua span{
    display:block;text-align:center;white-space:nowrap;
    font-family:var(--f-display);font-variation-settings:'wdth' 100;font-weight:900;
    font-size:var(--fs-marca,200px);line-height:1;letter-spacing:-.03em;
    color:transparent;-webkit-text-stroke:1.5px var(--traco);
}
/* de cima: mostra o alto das letras e corta na linha onde a moldura começa */
.marca-cima{height:calc(var(--fs-marca,200px) * .62)}
/* de baixo: esconde o alto e mostra a parte de baixo das letras */
.marca-baixo{height:calc(var(--fs-marca,200px) * .5)}
.marca-baixo span{transform:translateY(calc(var(--fs-marca,200px) * -.5))}
.planos-moldura{
    width:min(1200px,92vw);margin:0 auto;padding:clamp(2.5rem,4vw,3.5rem) clamp(16px,3vw,40px) clamp(3rem,5vw,4rem);
    border-left:1.5px solid var(--traco);border-right:1.5px solid var(--traco);
}
.planos-grade{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}
.plano{
    background:#fff;border-radius:18px;padding:clamp(20px,2.4vw,30px);
    box-shadow:0 1px 0 rgba(30,38,87,.06),0 20px 40px -32px rgba(30,38,87,.35);
    display:flex;flex-direction:column;gap:14px;text-align:left;
}
.plano header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.plano-nome{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:clamp(2rem,3vw,2.6rem);line-height:1;color:var(--cor);text-transform:uppercase}
.plano-preco{margin:0;text-align:right;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;color:color-mix(in srgb,var(--cor) 70%,#fff)}
.plano-preco small{display:block;font:600 .72rem/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:#8A8CA0;margin-bottom:.25rem}
.plano-extra{margin:0;font-weight:600;font-size:.95rem;color:var(--tinta)}
.plano-texto{margin:0;font-size:.98rem;line-height:1.55;color:#4A4C60}
.plano-itens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.2rem;font-size:.92rem;color:#3D3F52}
.plano-itens li{display:flex;gap:.55rem;align-items:baseline}
.plano-itens li::before{content:"";flex:none;width:.55em;height:.55em;background:var(--cor);transform:translateY(-.05em) rotate(45deg);border-radius:1px}
.plano .bt{align-self:flex-start;margin-top:auto}
.plano-grande{min-height:430px}
.bt-contorno{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta);min-height:40px;padding:.6rem 1rem;font-size:.85rem}
.plano-selo{
    position:absolute;left:50%;top:190px;z-index:2;transform:translateX(-50%);
    width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;
    box-shadow:0 0 0 8px #F7F3F0;
}
.plano-selo svg{position:absolute;inset:0;animation:gira 16s linear infinite}
.plano-selo text{font:800 9.5px/1 var(--f-texto);letter-spacing:.14em;fill:var(--tinta)}
.plano-selo img{width:40px;height:40px}
@keyframes gira{to{transform:rotate(360deg)}}
.adicionais{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}
.adicional{background:#EDE6DF;border-radius:18px;padding:22px 24px;text-align:left}
.adicional header{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.adicional h4{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.5rem;text-transform:uppercase;color:var(--tinta)}
.adicional span{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:800;font-size:1.25rem;color:#8A7D72}
.adicional p{margin:.6rem 0 0;font-size:.92rem;line-height:1.5;color:#5A5048}
@media (max-width:820px){
    .planos-grade,.adicionais{grid-template-columns:1fr}
    .plano-selo{position:relative;left:auto;top:auto;transform:none;margin:-6px auto}
    .plano-grande{min-height:0}
}
@media (max-width:420px){ .plano-itens{grid-template-columns:1fr} }

/* =====================================================
   7.6 · FAQ: perguntas à esquerda, respostas empilhadas à direita
   ===================================================== */
.faq{background:#F7F3F0;padding:clamp(4rem,7vw,6rem) clamp(16px,4vw,48px)}
.faq-grade{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.2rem,3vw,2.4rem);max-width:1100px;margin:0 auto;align-items:start}
.faq-lista{display:flex;flex-direction:column;gap:8px;position:sticky;top:6rem}
.faq-p{
    text-align:left;border:0;cursor:pointer;padding:.9rem 1.1rem;border-radius:12px;min-height:44px;
    background:#ECE7E1;color:#56586C;font:600 .95rem/1.35 var(--f-texto);
    transition:background-color .2s var(--rapida),color .2s var(--rapida),transform .16s var(--rapida);
}
.faq-p:active{transform:scale(.98)}
.faq-p.on{background:#15162A;color:#fff}
@media (hover:hover) and (pointer:fine){ .faq-p:not(.on):hover{background:#E2DCD4;color:var(--tinta)} }
.faq-respostas{display:flex;flex-direction:column;gap:14px}
.faq-r{background:#fff;border-radius:16px;padding:22px 24px;text-align:left;transition:background-color .35s var(--suave),color .35s var(--suave),transform .45s var(--mola)}
.faq-r h3{margin:0 0 .5rem;font:700 1rem/1.35 var(--f-texto);color:inherit}
.faq-r p{margin:0;font-size:.95rem;line-height:1.6;color:#55576A;transition:color .35s var(--suave)}
.faq-r.on{background:#15162A;color:#fff;transform:translateX(-6px)}
.faq-r.on p{color:rgba(255,255,255,.82)}
@media (max-width:860px){
    .faq-grade{grid-template-columns:1fr}
    .faq-lista{position:static}
    .faq-respostas{display:none}
    .faq-lista .faq-r{margin:-2px 0 6px;transform:none}
    .faq-lista .faq-r h3{display:none}
    .faq-lista .faq-r:not(.on){display:none}
}

/* =====================================================
   7.7 · DEPOIMENTOS em leque
   ===================================================== */
.depo{background:#F7F3F0;padding:clamp(3rem,6vw,5rem) 0 clamp(8rem,12vw,10rem);text-align:center;overflow:hidden}
.depo-leque{display:flex;justify-content:center;align-items:flex-start;padding:2rem 0 3.5rem;margin-bottom:.5rem}
.dep{
    --k:0; --meio:2;
    flex:0 0 250px;height:340px;margin:0 -34px;position:relative;
    display:flex;flex-direction:column;gap:14px;padding:22px 20px;text-align:left;
    border-radius:18px;color:#fff;overflow:hidden;
    background:
        radial-gradient(90% 60% at 20% 110%,rgba(242,122,26,.55),transparent 60%),
        radial-gradient(80% 60% at 90% 100%,rgba(101,163,13,.45),transparent 60%),
        radial-gradient(70% 50% at 50% 120%,rgba(106,55,226,.7),transparent 70%),
        #16172B;
    box-shadow:0 24px 40px -22px rgba(20,24,51,.55);
    transform:rotate(calc((var(--k) - var(--meio)) * -7deg)) translateY(calc(max(var(--k) - var(--meio), var(--meio) - var(--k)) * 18px));
    transition:transform .5s var(--mola),margin .5s var(--mola);
}
.dep-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#F7F3F0;color:var(--tinta);font:800 .95rem var(--f-texto)}
.dep blockquote{margin:0;font-style:italic;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.92)}
.dep figcaption{margin-top:auto}
.dep figcaption b{display:block;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;font-size:1.25rem;line-height:1.1}
.dep figcaption span{font-size:.78rem;color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){
    .depo-leque:hover .dep{margin:0 -8px}
    .dep:hover{transform:rotate(0) translateY(-14px);z-index:5}
}
@media (max-width:760px){
    .depo-leque{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:2rem 20px 3rem;gap:14px;scrollbar-width:none}
    .dep{margin:0;flex-basis:78vw;height:auto;min-height:300px;scroll-snap-align:center;transform:rotate(calc((var(--k) - var(--meio)) * -2deg))}
}

/* =====================================================
   7.8 · LISTA DE NOVIDADES: onda, partículas, órbita e envelope
   ===================================================== */
.novidades{
    position:relative;background:#F26B2E;color:#fff;text-align:center;overflow:hidden;
    padding:clamp(7rem,10vw,9rem) clamp(16px,4vw,48px) 0;
}
.onda{position:absolute !important;left:0;width:200%;height:clamp(50px,6vw,90px);pointer-events:none;z-index:2}
.onda-cima{top:-1px}
.onda-baixo{bottom:-1px}
.onda-cima .onda-a,.onda-baixo .onda-a{fill:#F7F3F0}
.onda-cima .onda-b{fill:#F7F3F0;opacity:.45}
.onda .onda-a{animation:onda 14s linear infinite}
.onda .onda-b{animation:onda 22s linear infinite reverse}
@keyframes onda{to{transform:translateX(-1440px)}}
.nov-particulas{position:absolute !important;inset:0;z-index:0;pointer-events:none}
.nov-particulas svg{position:absolute;width:34px;height:34px;fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:flutua var(--t,9s) ease-in-out infinite alternate}
@keyframes flutua{from{transform:translateY(0) rotate(var(--r0,0deg))}to{transform:translateY(-22px) rotate(var(--r1,12deg))}}
.novidades>*:not(.onda):not(.nov-particulas){position:relative;z-index:1}

.orbita{position:relative;width:min(1000px,100%);height:560px;margin:0 auto clamp(3rem,6vw,4.5rem)}
.orbita-linhas{position:absolute;inset:0;width:100%;height:100%}
.orbita-linhas path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:6 8;animation:tracejado 3s linear infinite}
@keyframes tracejado{to{stroke-dashoffset:-28}}
.bola{
    position:absolute;display:grid;place-items:center;border-radius:50%;text-align:center;
    background:#15162A;color:#fff;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    text-transform:uppercase;line-height:.95;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);
    animation:bolaFlutua 6s ease-in-out infinite alternate;
}
.bola.clara{background:#F7F3F0;color:var(--tinta)}
.b1{width:120px;height:120px;left:6%;top:8%;font-size:1.35rem}
.b2{width:150px;height:150px;left:2%;top:62%;font-size:1.55rem;animation-delay:-2s}
.b3{width:150px;height:150px;right:3%;top:52%;font-size:1.45rem;animation-delay:-4s}
.b4{width:110px;height:110px;right:9%;top:4%;font-size:1.3rem;border-radius:28px;animation-delay:-1s}
@keyframes bolaFlutua{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.orbita-card{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:min(310px,72vw);height:540px;border-radius:40px;background:#15162A;
    padding:48px 26px 26px;text-align:left;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
    display:flex;flex-direction:column;gap:14px;
}
.oc-rot{margin:0;font:600 .72rem/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:#F2A06E}
.oc-tit{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:2.1rem;line-height:.95;text-transform:uppercase}
.orbita-card ul{margin:auto 0 0;padding:0;list-style:none;display:grid;gap:10px}
.orbita-card li{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);font-size:.9rem;line-height:1.35;color:rgba(255,255,255,.85)}

.envelope{
    position:relative;width:min(1000px,100%);margin:0 auto;border-radius:22px;overflow:hidden;
    padding:clamp(2.4rem,4vw,3.4rem) clamp(18px,4vw,48px) clamp(3rem,5vw,4rem);
    background:
        radial-gradient(60% 70% at 20% 120%,rgba(106,55,226,.75),transparent 65%),
        radial-gradient(60% 70% at 85% 120%,rgba(242,122,26,.7),transparent 65%),
        #15162A;
    box-shadow:0 40px 70px -40px rgba(0,0,0,.6);
}
.envelope-abas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.envelope-abas path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;vector-effect:non-scaling-stroke}
.env-tit{position:relative;margin:0 auto .5rem;max-width:24ch;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1;color:#fff}
.env-sub{position:relative;margin:0 auto 1.8rem;max-width:52ch;color:rgba(255,255,255,.75);line-height:1.5}
.env-form{
    position:relative;display:grid;gap:8px;width:min(380px,100%);margin:0 auto;text-align:left;
    padding:20px;border-radius:16px;background:rgba(10,11,28,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.env-form label{font:600 .8rem var(--f-texto);color:rgba(255,255,255,.85)}
.env-form input[type=email],.env-form select{
    width:100%;min-height:44px;padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);color:#fff;font:500 .95rem var(--f-texto);margin-bottom:6px;
}
.env-form select option{color:var(--tinta)}
.env-form .invalido{border-color:#FF8A8A}
.env-aceite{display:flex;gap:.55rem;align-items:flex-start;font-weight:500 !important;line-height:1.4;cursor:pointer}
.env-aceite input{margin-top:.15rem;accent-color:#F26B2E}
.env-form .bt{width:100%;margin-top:6px}
.env-nota{margin:.3rem 0 0;min-height:1.2em;font-size:.82rem;color:rgba(255,255,255,.8)}
.env-marca{
    margin:clamp(1.5rem,3vw,2.5rem) 0 0;white-space:nowrap;line-height:.78;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;text-transform:uppercase;
    font-size:clamp(4rem,16vw,15rem);color:#fff;opacity:.95;
}
@media (max-width:760px){
    .orbita{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:0}
    .orbita-linhas{display:none}
    .bola{position:static;width:96px;height:96px;font-size:1.05rem}
    .orbita-card{position:relative;left:auto;transform:none;order:-1;width:100%;height:auto;margin-bottom:12px;border-radius:28px;padding:32px 22px 22px}
}

/* =====================================================
   7.9 · FUNDADORES (polaroid)
   ===================================================== */
.fundadores{background:#F7F3F0;padding:clamp(4rem,7vw,6rem) clamp(16px,4vw,48px) clamp(9rem,13vw,12rem);text-align:center}
.polaroid{
    width:min(300px,78vw);margin:0 auto 2rem;padding:14px 14px 18px;background:#fff;
    transform:rotate(-3deg);box-shadow:0 26px 44px -26px rgba(20,24,51,.45);
    transition:transform .5s var(--mola);
}
@media (hover:hover) and (pointer:fine){ .polaroid:hover{transform:rotate(0)} }
.polaroid-foto{aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(135deg,#5b5b5b,#2a2a2a);filter:grayscale(1)}
.polaroid-foto span{font:600 .8rem/1.4 var(--f-texto);color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.5);padding:.4rem .7rem}
.polaroid figcaption{padding-top:14px}
.polaroid b{display:block;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.6rem;text-transform:uppercase;color:var(--tinta)}
.polaroid figcaption span{font-size:.85rem;color:#7A7C8E}
.carta{max-width:62ch;margin:0 auto 2rem;font-size:1.05rem;line-height:1.7;color:#4A4C60}

/* =====================================================
   7.10 · RODAPÉ: divisa de fronteiras + céu com estrelas
   ===================================================== */
.rodape{position:relative;margin-top:calc(clamp(60px,9vw,130px) * -1)}
.divisa{display:block;width:100%;height:clamp(60px,9vw,130px)}
.divisa-tras{fill:#2B3478}
.divisa-frente{fill:var(--navy-fundo)}
.rodape-ceu{
    position:relative;margin-top:-1px;padding:clamp(2rem,4vw,3rem) clamp(16px,4vw,48px) 1.6rem;text-align:center;color:#fff;
    background:
        radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.8),transparent),
        radial-gradient(1.4px 1.4px at 28% 62%,rgba(255,255,255,.7),transparent),
        radial-gradient(1px 1px at 44% 30%,rgba(255,255,255,.8),transparent),
        radial-gradient(1.3px 1.3px at 63% 70%,rgba(255,255,255,.7),transparent),
        radial-gradient(1px 1px at 78% 22%,rgba(255,255,255,.8),transparent),
        radial-gradient(1.4px 1.4px at 90% 55%,rgba(255,255,255,.7),transparent),
        radial-gradient(1px 1px at 55% 12%,rgba(255,255,255,.7),transparent),
        radial-gradient(120% 90% at 50% 130%,rgba(47,99,201,.55),transparent 60%),
        var(--navy-fundo);
}
.rodape-marca{width:60px;height:60px;margin:0 auto 1rem;border-radius:50%}
.rodape-slogan{margin:0 0 2.4rem;font:400 clamp(.9rem,1.4vw,1.2rem)/1.3 var(--f-texto);letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.rodape-slogan b{font-weight:700;color:#fff}
.rodape-linha{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;max-width:1100px;margin:0 auto 1.6rem}
.rodape-logo img{height:30px;width:auto}
.rodape-base{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:.6rem 2rem;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem}
.rodape-base p{margin:0}
.rodape-base a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){ .rodape-linha,.rodape-base{justify-content:center;text-align:center} }

@media (prefers-reduced-motion:reduce){
    .onda .onda-a,.onda .onda-b,.nov-particulas svg,.bola,.orbita-linhas path,.plano-selo svg{animation:none}
}
/* selo entre os dois cards grandes, no vão, sem cobrir o texto */
@media (min-width:821px){
    .planos-grade{column-gap:64px}
    .plano-selo{width:104px;height:104px;top:163px}
}
/* o nome da Lista vai de ponta a ponta da seção (o JS ajusta o tamanho) */
.novidades{padding-left:0;padding-right:0}
.novidades>.sec-tit,.novidades>.sec-sub,.orbita,.envelope{margin-left:auto;margin-right:auto}
.orbita,.envelope{width:min(1000px,calc(100% - 32px))}
.novidades>.sec-sub{padding-inline:16px}
.env-marca{text-align:center}
/* tablet: o leque de 5 cards fica mais estreito para caber inteiro */
@media (min-width:761px) and (max-width:1100px){
    .dep{flex-basis:190px;height:300px;margin:0 -28px;padding:18px 16px}
    .dep blockquote{font-size:.86rem}
    .dep figcaption b{font-size:1.05rem}
}
.plano-preco small{font-size:.8rem}
/* até 820px os depoimentos viram carrossel de arrastar (o leque não cabe) */
@media (max-width:820px){
    .depo-leque{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:2rem 20px 3rem;gap:14px;scrollbar-width:none}
    .dep{margin:0;flex-basis:min(78vw,300px);height:auto;min-height:300px;scroll-snap-align:center;transform:rotate(calc((var(--k) - var(--meio)) * -2deg))}
    .depo-leque:hover .dep{margin:0}
}

/* =====================================================
   Ajustes de 28/09 (rodada de revisão do Edmar)
   ===================================================== */

/* ---------- faixas com logos (provisórios: Simple Icons via CDN) ---------- */
.faixa-logo{
    display:inline-flex;align-items:center;gap:.6rem;padding:0 1.7rem;
    font-family:var(--f-texto);font-variation-settings:normal;font-weight:700;font-size:1.15rem;
    letter-spacing:-.005em;text-transform:none;color:#fff;
}
.faixa-logo img{width:28px;height:28px;filter:brightness(0) invert(1);opacity:.95}
.faixa-b .faixa-logo{color:rgba(255,255,255,.8)}
@media (max-width:900px){ .faixa-logo{font-size:.9rem;padding:0 1.1rem} .faixa-logo img{width:20px;height:20px} }

/* ---------- fundo de estrelas (módulos e casos) ---------- */
.modulos,.casos{position:relative;isolation:isolate;overflow:hidden}
.estrelas{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85}
.estrelas i{
    position:absolute;border-radius:50%;background:#fff;opacity:var(--o,.5);
    animation:pisca 4s ease-in-out infinite alternate;
}
@keyframes pisca{from{opacity:var(--o,.5)}to{opacity:calc(var(--o,.5) * .25)}}
.estrelas b{
    position:absolute;width:120px;height:1.5px;opacity:0;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
    transform:rotate(-24deg);animation:cadente 14s linear infinite;
}
@keyframes cadente{
    0%,86%{opacity:0;transform:translate(0,0) rotate(-24deg)}
    88%{opacity:1}
    96%{opacity:0;transform:translate(-340px,150px) rotate(-24deg)}
    100%{opacity:0}
}
/* uma névoa de cor bem leve, como nebulosa */
.modulos::before{
    content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
    background:
        radial-gradient(40% 30% at 15% 35%,rgba(106,55,226,.18),transparent 70%),
        radial-gradient(35% 28% at 85% 60%,rgba(47,99,201,.16),transparent 70%);
}

/* ---------- "para quem faz": pastas largas e sobrepostas (computador) ---------- */
@media (min-width:1101px){
    .cards-mod{position:relative;display:block;height:620px}
    .card-mod{
        position:absolute;top:0;left:0;margin:0;width:var(--w,640px);height:100%;flex:none;
        transform:translate3d(var(--x,0px),calc(var(--y0,0px) + var(--y,0px)),0) rotate(var(--rot,0deg));
        transform-origin:50% 190%;
        transition:transform .7s var(--suave);
        box-shadow:none;
    }
    .card-mod.lado-esq{box-shadow:8px 0 22px -10px rgba(0,0,0,.45)}
    .card-mod.lado-dir{box-shadow:-8px 0 22px -10px rgba(0,0,0,.45)}
    .card-mod.aberto{box-shadow:0 0 34px -10px rgba(0,0,0,.5)}
    /* nome da pasta na borda que aparece */
    .card-mod .card-nome{left:auto;right:auto}
    .card-mod.lado-esq .card-nome{left:calc((80px - 1em) / 2 - 2px)}
    .card-mod.lado-dir .card-nome,.cards-mod.leque .card-mod .card-nome{right:calc((80px - 1em) / 2 - 2px);left:auto}
    .card-corpo{width:100%;min-width:0;padding:22px 30px 30px}
    .card-mod:first-child .card-corpo{padding-left:30px}
    /* aba sobe no hover; o card de trás continua ocupando o espaço */
    .card-mod:not(.aberto):hover{--y:-40px;transform:translate3d(var(--x,0px),calc(var(--y0,0px) + var(--y,0px)),0) rotate(var(--rot,0deg))}
    /* leque de entrada: sem transição (quem manda é a rolagem), todos os nomes à vista */
    .cards-mod.leque .card-mod{transition:none}
    .cards-mod.leque .card-mod .card-nome{opacity:1}
    .cards-mod.leque .card-mod .card-corpo{opacity:0;visibility:hidden;transition:none}
}

/* ---------- planos: selo de desconto por cima dos dois cards grandes ---------- */
.planos-dupla{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto 16px}
.planos-grade{margin-top:0}
.plano-selo{
    position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
    width:150px;height:150px;padding:0;border:0;border-radius:50% !important;cursor:pointer;
    background:#fff;box-shadow:0 0 0 14px #F7F3F0;display:grid;place-items:center;
    transition:transform .45s var(--mola);
}
.plano-selo:active{transform:translate(-50%,-50%) scale(.96)}
.plano-selo:focus-visible{outline:3px solid var(--c-liderancas);outline-offset:4px}
.plano-selo svg{position:absolute;inset:0;width:100%;height:100%;animation:gira 18s linear infinite;will-change:transform}
.plano-selo text{font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:900;font-size:12.5px;letter-spacing:.06em;fill:var(--tinta);text-rendering:geometricPrecision}
.selo-chave{display:grid;justify-items:center;gap:0;font-family:var(--f-display);font-variation-settings:'wdth' 100;font-weight:900;font-size:1.2rem;line-height:1.05}
.selo-chave b{color:var(--tinta)}
.selo-chave i{font-style:normal;color:#E2474F}
.plano-selo[aria-pressed="true"] .selo-chave b{color:#2FA35A}
.plano-selo[aria-pressed="true"] .selo-chave i{color:rgba(20,24,51,.25)}
@media (hover:hover) and (pointer:fine){ .plano-selo:hover{transform:translate(-50%,-50%) scale(1.04)} }
/* mensal x anual */
.so-anual{display:none}
.planos.anual .so-anual{display:inline}
.planos.anual .plano-preco .so-anual{display:block}
.planos.anual .so-mensal{display:none}
@media (max-width:820px){
    .planos-dupla{grid-template-columns:1fr;gap:0}
    .plano-selo{position:relative;left:auto;top:auto;transform:none;margin:-60px auto;width:124px;height:124px}
    .plano-selo:active{transform:scale(.96)}
    .planos-dupla .plano:first-child{padding-bottom:70px}
    .planos-dupla .plano:last-of-type{padding-top:74px}
}

/* ---------- depoimentos: leque ABERTO (base junta, topos espalhados) ---------- */
@media (min-width:821px){
    .depo-leque{padding:4rem 0 2rem}
    .dep{
        transform-origin:50% 140%;
        transform:rotate(calc((var(--k) - var(--meio)) * 8deg)) translateY(calc(max(var(--k) - var(--meio), var(--meio) - var(--k)) * 6px));
    }
    .depo-leque:hover .dep{margin:0 -20px}
    .dep:hover{transform:rotate(calc((var(--k) - var(--meio)) * 8deg)) translateY(-26px)}
}

/* ---------- rodapé: horizonte do globo ---------- */
.divisa{height:clamp(70px,10vw,150px)}
.divisa-atmos{fill:rgba(111,160,255,.14)}
.divisa-frente{fill:var(--navy-fundo)}
.divisa-luz{fill:none;stroke:url(#brilho-horizonte);stroke-width:2.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 -4px 10px rgba(111,160,255,.7))}
.divisa-tras{display:none}
.rodape{margin-top:calc(clamp(70px,10vw,150px) * -1)}
@media (min-width:821px){ .planos-grade{column-gap:16px} }
/* o selo invade os dois cards: o texto de cada um recua do lado do selo */
@media (min-width:821px){
    .planos-dupla .plano:first-child{padding-right:92px}
    .planos-dupla .plano:nth-child(2){padding-left:92px}
}
/* celular: selo entre os dois cards, por cima da emenda */
@media (max-width:820px){
    .planos-dupla .plano:first-child{order:1}
    .planos-dupla .plano-selo{order:2;z-index:3}
    .planos-dupla .plano:nth-child(2){order:3}
}

/* ---------- leque de entrada: menor, girando pela base; monta sozinho ---------- */
@media (min-width:1101px){
    .card-mod{
        transform:translate3d(var(--x,0px),calc(var(--y0,0px) + var(--y,0px)),0) rotate(var(--rot,0deg)) scale(var(--s,1));
        transform-origin:50% 100%;
    }
    .card-mod:not(.aberto):hover{transform:translate3d(var(--x,0px),calc(var(--y0,0px) + var(--y,0px)),0) rotate(var(--rot,0deg)) scale(var(--s,1))}
    .cards-mod.leque .card-mod:hover{--y:0px}
    /* montagem: cada card sai do leque na sua vez */
    .cards-mod.juntando .card-mod{transition:transform .95s var(--mola) calc(var(--ordem,0) * 70ms)}
    .cards-mod.juntando .card-mod.aberto .card-corpo{transition:opacity .5s var(--suave) .9s,visibility 0s .9s}
}
/* fundo: canvas da viagem pela galáxia */
.estrelas canvas{position:absolute;inset:0;display:block}
.estrelas{opacity:1}

/* ---------- Auditoria mobile v2 (28/09) ----------
   Efeitos de hover pensados para a tela larga vazavam para o layout estreito
   quando a janela do computador era estreitada. */
@media (max-width:1100px){
    .card-mod:not(.aberto):hover{transform:none}
}
@media (max-width:820px){
    .plano-selo,.plano-selo:hover{transform:none}
    .plano-selo:active{transform:scale(.96)}
    .planos-dupla{justify-items:stretch}
    .planos-dupla .plano-selo{justify-self:center;margin:-62px auto;width:124px;height:124px;box-shadow:0 0 0 12px #F7F3F0}
    .planos-dupla .plano:first-child{padding-bottom:78px}
    .planos-dupla .plano:nth-child(2){padding-top:78px}
}
/* faixas em tela estreita: menos inclinação e mais distância, sem uma cobrir a outra */
@media (max-width:900px){
    .faixa-a{top:-62px;transform:rotate(1.6deg)}
    .faixa-b{top:0;transform:rotate(-1.6deg)}
}
/* alvos de toque: caixinha de aceite e links do rodapé */
.env-aceite input{width:20px;height:20px;flex:none}
@media (max-width:900px){
    .rodape-base a{display:inline-flex;align-items:center;min-height:44px}
    .rodape-logo{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- celular no padrão da referência ---------- */
.bola em{font-style:normal}
.bola small{display:none}
@media (max-width:900px){
    /* topo compacto (a referência usa ~550px), pessoa grande no centro */
    .hero{height:640px;min-height:0;max-height:none}
    .hero-cima{top:12%;font-size:clamp(3.2rem,17vw,8rem)}
    .hero-meio{top:39%;width:94vw;font-size:clamp(2.4rem,12vw,5.4rem)}
    .hero-baixo{top:55%;font-size:clamp(3.2rem,17vw,8rem)}
    .hero-pessoas{width:min(92vw,520px);bottom:6%}
    .hero-notebook{height:24%;width:min(90vw,620px)}
    .bt-hero{bottom:88px}
    .hero-fita{bottom:10%}
}
@media (max-width:820px){
    /* depoimentos retos no carrossel, como na referência */
    .dep{transform:none !important}
}
@media (max-width:760px){
    /* Lista: os círculos viram cards coloridos empilhados, com texto */
    .orbita{flex-direction:column;flex-wrap:nowrap;gap:12px}
    .bola{
        position:static;width:100%;height:auto;border-radius:22px !important;animation:none;
        display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.5rem;padding:22px;
        font-size:1.7rem;line-height:.95;
    }
    .bola em br{display:none}
    .bola small{display:block;font-family:var(--f-texto);font-variation-settings:normal;font-weight:500;font-size:.95rem;line-height:1.5;text-transform:none;color:rgba(255,255,255,.85)}
    .b1{background:#6A37E2}
    .b2{background:#15162A}
    .b3{background:#E9A712;color:var(--tinta)}
    .b3 small{color:rgba(20,24,51,.8)}
    .b4.clara{background:#E05362;color:#fff}
    .b4 small{color:rgba(255,255,255,.88)}
}

/* =====================================================
   Faixas: ajustes de 28/09
   - computador: nas pontas do X as duas faixas se afastam alguns pixels e o
     fundo da seção aparecia no meio (a "fissura"). Uma tira navy por trás,
     da altura exata dessa abertura, fecha o vão sem aparecer no centro.
   - tablet e celular: faixas retas, uma em cima da outra, sem cruzar.
   ===================================================== */
.faixas::before{
    content:"";position:absolute;left:0;right:0;
    height:max(0px,calc(6.4vw - 70px));top:calc(max(0px,calc(6.4vw - 70px)) / -2);
    background:var(--navy-fundo);pointer-events:none;
}
@media (max-width:1100px){
    .faixas::before{display:none}
    .faixa{left:0;width:100%}
    .faixa-a{top:-80px;transform:none}
    .faixa-b{top:0;transform:none}
}
@media (max-width:900px){
    .faixa-a{top:-56px;transform:none}
    .faixa-b{top:0;transform:none}
}

/* =====================================================
   Topo fixo por baixo (como na referência: position sticky, sem escala nem
   fade). O hero fica parado no fundo e o resto do site sobe por cima,
   começando pelas faixas cruzadas.
   ===================================================== */
.hero{position:sticky;top:0;z-index:0}
main > section:not(.hero){position:relative;z-index:1}
/* o topo nunca passa da altura da tela, senão a base dele (botão) some por baixo */
@media (min-width:901px){ .hero{height:min(max(90svh,680px),100svh)} }
@media (max-width:900px) and (max-height:639px){ .hero{position:relative} }
/* computador: botão mais longe das faixas */
@media (min-width:901px){ .bt-hero{bottom:96px} }

/* ---------- entrada das seções (js/v2-revela.js) ----------
   Três curvas só: --mola (chegadas), --pula (pops e carimbo, com quique)
   e --suave (cortinas e máscaras). Os keyframes só têm o "de": o "para" é o
   estado natural do elemento, e o fill backwards segura o "de" durante o
   atraso sem deixar nada preso depois que termina. */
:root{
    --pula:linear(0,.014,.055 1.8%,.218 3.7%,.867 8.5%,1.085 10.7%,1.212 12.9%,1.264 15%,1.262 17%,1.217 19.5%,1.098 24%,1.035 28.5%,.993 33%,.981 38%,.988 45%,.998 55%,1.001 68%,1);
}
.revela:not(.visto){opacity:0}
.revela.visto{animation:.85s var(--mola) var(--atraso,0ms) backwards}

/* sobe: o básico, para blocos de apoio */
@keyframes r-sobe{from{opacity:0;translate:0 36px}}
.revela.visto[data-ef="sobe"]{animation-name:r-sobe}

/* foco: sai do desfoque (subtítulos e textos) */
@keyframes r-foco{from{opacity:0;translate:0 14px;filter:blur(12px)}}
.revela.visto[data-ef="foco"]{animation-name:r-foco;animation-duration:.9s}

/* gira: o globo da marca chega girando */
@keyframes r-gira{from{opacity:0;scale:.3;rotate:-220deg}}
.revela.visto[data-ef="gira"]{animation-name:r-gira;animation-duration:1s}

/* pop: botões e setas estalam no lugar */
@keyframes r-pop{from{opacity:0;scale:.4}}
.revela.visto[data-ef="pop"]{animation-name:r-pop;animation-timing-function:var(--pula);animation-duration:.6s}

/* baralho: cards entram pela direita como cartas sendo dadas */
@keyframes r-baralho{from{opacity:0;translate:180px 40px;rotate:9deg}}
.revela.visto[data-ef="baralho"]{animation-name:r-baralho;animation-duration:.95s}

/* lados: os dois planos grandes vêm de fora e se encontram no meio */
@keyframes r-esq{from{opacity:0;translate:-140px 0;rotate:-5deg}}
@keyframes r-dir{from{opacity:0;translate:140px 0;rotate:5deg}}
.revela.visto[data-ef="esq"]{animation-name:r-esq;animation-duration:.95s}
.revela.visto[data-ef="dir"]{animation-name:r-dir;animation-duration:.95s}

/* carimbo: o selo de desconto cai de cima e bate na mesa */
@keyframes r-carimbo{from{opacity:0;scale:2.4;rotate:-70deg}}
.revela.visto[data-ef="carimbo"]{animation-name:r-carimbo;animation-timing-function:var(--pula);animation-duration:.75s}

/* esquerda: perguntas do FAQ entram em fila */
@keyframes r-esquerda{from{opacity:0;translate:-60px 0}}
.revela.visto[data-ef="esquerda"]{animation-name:r-esquerda}

/* leque: os depoimentos começam empilhados no meio e abrem
   (o rotate solto desfaz o giro do transform no começo) */
@keyframes r-leque{from{opacity:0;rotate:calc((var(--k) - var(--meio)) * -8deg);translate:0 60px}}
.revela.visto[data-ef="leque"]{animation-name:r-leque;animation-duration:1.1s}

/* cortina: a marca-d'água sobe revelada de baixo para cima */
@keyframes r-cortina{from{clip-path:inset(100% 0 0 0);translate:0 50px}to{clip-path:inset(-20% -5% -20% -5%)}}
.revela.visto[data-ef="cortina"]{animation-name:r-cortina;animation-timing-function:var(--suave);animation-duration:1s}
@keyframes r-cortina-lado{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
.revela.visto[data-ef="cortina-lado"]{animation-name:r-cortina-lado;animation-timing-function:var(--suave);animation-duration:1.1s}
.revela:not(.visto)[data-ef^="cortina"]{opacity:1;clip-path:inset(100% 0 0 0)}

/* círculo: a órbita da Lista se abre do centro para fora */
@keyframes r-circulo{from{clip-path:circle(0% at 50% 50%);scale:.9}to{clip-path:circle(80% at 50% 50%)}}
.revela.visto[data-ef="circulo"]{animation-name:r-circulo;animation-timing-function:var(--suave);animation-duration:1.1s}
.revela:not(.visto)[data-ef="circulo"]{opacity:1;clip-path:circle(0% at 50% 50%)}

/* envelope: tomba para a frente, como uma carta chegando na mesa */
.novidades{perspective:1400px}
@keyframes r-envelope{from{opacity:0;rotate:x 55deg;translate:0 80px}}
.revela.visto[data-ef="envelope"]{animation-name:r-envelope;animation-duration:1s;transform-origin:50% 100%}

/* foto: a polaroid é jogada na mesa, girando, e assenta */
@keyframes r-foto{from{opacity:0;translate:-120px -90px;rotate:-24deg;scale:1.15}}
.revela.visto[data-ef="foto"]{animation-name:r-foto;animation-timing-function:var(--pula);animation-duration:.95s}

/* títulos palavra por palavra, de trás de uma máscara */
.palavra{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .1em;margin:-.14em -.04em -.1em}
.palavra>span{display:inline-block}
.revela-palavras:not(.visto) .palavra>span{translate:0 115%}
@keyframes r-palavra{from{translate:0 115%;rotate:8deg}}
.revela-palavras.visto .palavra>span{animation:r-palavra .8s var(--mola) calc(var(--atraso,0ms) + var(--p,0) * 70ms) backwards;transform-origin:0 100%}

@media (prefers-reduced-motion:reduce){
    .revela,.revela:not(.visto){opacity:1;clip-path:none}
    .revela.visto,.revela-palavras.visto .palavra>span{animation:none}
    .revela-palavras:not(.visto) .palavra>span{translate:none}
}

/* rodapé por cima das seções: a divisa (horizonte do globo) sobe sobre a
   última seção e precisa ficar na frente dela */
.rodape{z-index:2}

/* =====================================================
   Planos: desconto anual ativado (como na referência)
   Os dois cards grandes se enchem da própria cor e o texto fica branco;
   o selo inverte (fundo escuro, "DESCONTO ATIVADO").
   ===================================================== */
.plano-grande{transition:background-color .6s var(--suave),box-shadow .6s var(--suave)}
.plano-grande .plano-nome,.plano-grande .plano-preco,.plano-grande .plano-extra,.plano-grande .plano-itens,.plano-grande .plano-preco small{transition:color .6s var(--suave)}
.planos.anual .plano-grande{background:var(--cor);box-shadow:0 30px 60px -34px color-mix(in srgb,var(--cor) 80%,#000)}
.planos.anual .plano-grande .plano-nome,
.planos.anual .plano-grande .plano-extra{color:#fff}
.planos.anual .plano-grande .plano-preco{color:color-mix(in srgb,var(--cor) 30%,#fff)}
.planos.anual .plano-grande .plano-preco small{color:rgba(255,255,255,.72)}
.planos.anual .plano-grande .plano-itens{color:rgba(255,255,255,.94);font-weight:500}
.planos.anual .plano-grande .plano-itens li::before{background:#fff}
.plano-preco em{font-style:normal;font-size:.6em}
/* selo invertido */
.plano-selo{transition:transform .45s var(--mola),background-color .5s var(--suave)}
.plano-selo text{transition:fill .5s var(--suave)}
.plano-selo[aria-pressed="true"]{background:var(--tinta)}
.plano-selo[aria-pressed="true"] text{fill:#fff}
.plano-selo[aria-pressed="true"] .selo-chave i{color:rgba(255,255,255,.35)}
.planos.anual .plano-selo text.so-anual{display:inline}

/* celular e tablet: respiro entre Completo e Campanha Total empilhados */
@media (max-width:820px){ .planos-dupla{row-gap:18px} }

/* =====================================================
   Roteiro do cliente (29/09): ajustes de conteúdo e das peças novas
   ===================================================== */

/* ---------- cabeçalho: Entrar + Falar no WhatsApp ---------- */
@media (min-width:981px){ .topo-acoes{display:flex;align-items:center;gap:.5rem} }
.bt-entrar{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
@media (hover:hover) and (pointer:fine){ .bt-entrar:hover{background:rgba(255,255,255,.14)} }
.topo-gaveta .bt-entrar{margin-top:.4rem}

/* ---------- topo: frase em duas linhas, uma na frente e outra atrás da pessoa ---------- */
.hero[data-variante="4"]{--cor:var(--c-agenda)}
.hero-frases .hero-palavra{white-space:nowrap}
.hero-frases .hero-cima{top:13%;font-size:clamp(3rem,8.6vw,8.4rem)}
.hero-frases .hero-baixo{top:44%;font-size:clamp(3rem,8.6vw,8.4rem);color:rgba(255,255,255,.55)}
.hero-sub{
    position:absolute;z-index:8;left:50%;bottom:170px;transform:translateX(-50%);
    width:min(640px,calc(100% - 32px));margin:0;padding:.75rem 1.1rem;border-radius:14px;
    background:rgba(15,18,32,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#fff;text-align:center;font:500 clamp(.95rem,1.2vw,1.08rem)/1.45 var(--f-texto);
    animation:sobeCentro .7s var(--mola) .42s both;
}
@media (max-width:900px){
    /* no celular a frase quebra em linhas no lugar de encolher até sumir */
    .hero-frases .hero-palavra{white-space:normal}
    .hero-frases .hero-cima{top:11%;font-size:clamp(2.4rem,11vw,4.6rem);line-height:.86}
    .hero-frases .hero-baixo{top:44%;font-size:clamp(2.2rem,10vw,4.2rem);line-height:.86}
    .hero-sub{bottom:150px;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){ .hero-sub{animation:none} }

/* ---------- faixas: texto (cargos e módulos) ---------- */
.faixa-item{font-size:1.35rem}
@media (max-width:900px){ .faixa-item{font-size:1rem} }

/* ---------- ferramentas ---------- */
.modulos-titulo{max-width:24ch;margin-inline:auto;margin-bottom:1rem;font-size:clamp(2rem,3.8vw,3.5rem);line-height:.98}
.mod-sub{margin:0 auto clamp(2.2rem,4vw,3rem)}
.mod-extra{max-width:62ch;margin:clamp(2.4rem,4vw,3.2rem) auto 0;padding:0 16px;font-size:1rem;line-height:1.6;color:rgba(244,243,240,.8)}
.mod-extra b{color:#fff}
.mod-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.4rem;margin:1.8rem auto 0;padding:0 16px}
.mod-cta p{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;color:#fff;max-width:34ch}
.card-reserva{text-align:center}

/* ---------- soluções: caixa com título lateral, texto e vídeo ---------- */
.caso.solucao{flex:0 0 clamp(280px,24vw,330px);aspect-ratio:auto;min-height:520px;display:flex;flex-direction:column;
    background:
        radial-gradient(80% 50% at 50% 22%,color-mix(in srgb,var(--cor) 80%,#fff 10%),transparent 72%),
        linear-gradient(180deg,#141a44,#0B0F28);
}
.sol-lateral{
    position:absolute;left:14px;top:18px;writing-mode:vertical-rl;transform:rotate(180deg);
    font:600 .78rem/1 var(--f-texto);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8);
}
.sol-play{
    align-self:center;margin-top:18%;width:84px;height:84px;border:0;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;background:#fff;color:var(--tinta);
    box-shadow:0 0 0 10px rgba(255,255,255,.18),0 18px 34px -12px rgba(0,0,0,.6);
    transition:transform .35s var(--mola),box-shadow .35s var(--rapida);
}
.sol-play svg{width:34px;height:34px;fill:currentColor;margin-left:5px}
@media (hover:hover) and (pointer:fine){ .sol-play:hover{transform:scale(1.08);box-shadow:0 0 0 16px rgba(255,255,255,.14),0 18px 34px -12px rgba(0,0,0,.6)} }
.sol-play:active{transform:scale(.95)}
.sol-play:focus-visible{outline:3px solid #fff;outline-offset:6px}
.sol-txt{margin-top:auto;padding:2.2rem 1.3rem 1.4rem 2.4rem;text-align:left;background:linear-gradient(180deg,transparent,rgba(8,10,30,.9) 30%)}
.solucao .caso-rot{display:none}
.sol-tit{margin:0 0 .6rem;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.75rem;line-height:.95;text-transform:uppercase;color:#fff}
.sol-desc{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.82)}
@media (max-width:700px){ .caso.solucao{flex-basis:84vw;min-height:500px} }

.video-pop{width:min(900px,calc(100% - 32px));padding:0;border:0;border-radius:18px;background:#0B0F28;color:#fff;overflow:hidden}
.video-pop::backdrop{background:rgba(8,10,30,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.video-pop[open]{animation:popEntra .45s var(--mola)}
@keyframes popEntra{from{opacity:0;transform:scale(.94)}}
.video-area{aspect-ratio:16/9;display:grid;place-items:center}
.video-area video{width:100%;height:100%;display:block;background:#000}
.video-vazio{margin:0;padding:2rem;text-align:center;line-height:1.6;color:rgba(255,255,255,.8)}
.video-vazio b{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:2rem;text-transform:uppercase;color:#fff}
.video-fechar{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:400 1.8rem/1 var(--f-texto);cursor:pointer}

/* ---------- planos: Municipal e Estadual/Federal ---------- */
.plano-publico{margin:0;font-size:.92rem;line-height:1.45;color:#4A4C60}
.plano-grande .plano-itens{font-size:.88rem;gap:.45rem 1.2rem}
.plano-preco .so-mensal,.plano-preco .so-anual{white-space:nowrap}
.planos.anual .plano-grande .plano-publico{color:rgba(255,255,255,.85)}
.plano-grande{transition:background-color .6s var(--suave),box-shadow .6s var(--suave)}
.planos.anual .plano-grande{background:var(--cor)}
.planos.anual .plano-grande .plano-nome{color:#fff}
.planos.anual .plano-grande .plano-itens{color:rgba(255,255,255,.94)}
.planos.anual .plano-grande .plano-itens li::before{background:#fff}
.plano-selo[aria-pressed="true"]{background:var(--tinta)}
.plano-selo[aria-pressed="true"] text{fill:#fff}
.planos.anual .plano-selo text.so-anual{display:inline}

/* vamos crescer juntos */
.crescer{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}
.crescer-card{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;text-align:left;padding:30px 30px 28px;border-radius:18px;background:var(--cor);color:#fff}
.crescer-card h4{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1;text-transform:uppercase}
.crescer-card p{margin:0 0 .6rem;font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.92)}
.crescer-card .bt{margin-top:auto}
@media (max-width:820px){ .crescer{grid-template-columns:1fr} }

/* ---------- depoimentos: fotos em escala de cinza ---------- */
.dep-av,.dep-av img{filter:grayscale(1)}

/* ---------- benefícios: 10 bolas em volta das 3 caixas ---------- */
.orbita-ben .bola{width:112px;height:112px;font-size:1.05rem;padding:8px}
.orbita-ben .bola em{display:block}
.bb1{left:4%;top:6%}
.bb2{left:17%;top:30%;background:#F7F3F0 !important;color:var(--tinta) !important;animation-delay:-1s}
.bb3{left:2%;top:46%;animation-delay:-2s}
.bb4{left:17%;top:68%;animation-delay:-3s}
.bb5{left:3%;top:82%;background:#F7F3F0 !important;color:var(--tinta) !important;animation-delay:-4s}
.bb6{right:4%;top:6%;animation-delay:-.5s}
.bb7{right:17%;top:30%;background:#F7F3F0 !important;color:var(--tinta) !important;animation-delay:-1.5s}
.bb8{right:2%;top:46%;animation-delay:-2.5s}
.bb9{right:17%;top:68%;animation-delay:-3.5s}
.bb10{right:3%;top:82%;background:#F7F3F0 !important;color:var(--tinta) !important;animation-delay:-4.5s}
.orbita-ben{height:620px}
.ben-card{justify-content:center;gap:0;height:560px;padding:44px 28px 30px}
.ben-slide{display:none}
.ben-slide.on{display:block;animation:benEntra .6s var(--mola)}
@keyframes benEntra{from{opacity:0;transform:translateY(16px)}}
.ben-slide .oc-tit{font-size:2.6rem;margin-bottom:1rem;color:#fff}
.ben-txt{margin:0;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.85)}
.ben-pontos{display:flex;gap:8px;margin-top:1.6rem}
.ben-ponto{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s var(--mola),background-color .25s}
.ben-ponto.on{width:28px;border-radius:6px;background:#fff}
.ben-ponto:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:1000px){
    .bb2,.bb4,.bb7,.bb9{display:none}
}
@media (max-width:760px){
    .orbita-ben{flex-direction:row;flex-wrap:wrap;height:auto;gap:8px}
    .orbita-ben .bola{display:inline-flex !important;width:auto;height:auto;padding:.6rem 1rem;border-radius:999px !important;font-size:1rem;background:#15162A;color:#fff}
    .orbita-ben .bola em br{display:none}
    .ben-card{height:auto;order:-1;margin-bottom:10px}
    .ben-slide .oc-tit{font-size:2.1rem}
}
.env-form input[type=text],.env-form input[type=tel]{
    width:100%;min-height:44px;padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);color:#fff;font:500 .95rem var(--f-texto);margin-bottom:6px;
}
#contato{scroll-margin-top:90px}

/* ---------- fundadores: três polaroids em leque ---------- */
.polaroides{display:flex;justify-content:center;align-items:flex-start;gap:0;margin:1rem auto 2.2rem;max-width:980px}
.polaroides .polaroid{width:min(300px,31vw);margin:0 -10px}
.polaroides .p1{transform:rotate(-7deg) translateY(28px)}
.polaroides .p2{transform:none;z-index:2}
.polaroides .p3{transform:rotate(7deg) translateY(28px)}
@media (hover:hover) and (pointer:fine){ .polaroides .polaroid:hover{transform:rotate(0) translateY(-6px);z-index:3} }
@media (max-width:700px){
    .polaroides{flex-direction:column;align-items:center;gap:18px}
    .polaroides .polaroid{width:min(300px,82vw);margin:0}
    .polaroides .p1,.polaroides .p3{transform:rotate(-2deg)}
}

/* ---------- rodapé ---------- */
.rodape-esq,.rodape-acoes{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rodape-social{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 .7rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);font:700 .8rem var(--f-texto);color:#fff}
@media (max-width:640px){ .rodape-esq,.rodape-acoes{justify-content:center} }

/* FAQ com 19 perguntas (roteiro): no computador a coluna da direita mostra só a
   resposta escolhida, presa ao lado da lista enquanto ela rola. */
@media (min-width:861px){
    .faq-lista{position:static}
    .faq-respostas{position:sticky;top:6.5rem}
    .faq-respostas .faq-r:not(.on){display:none}
    .faq-respostas .faq-r.on{transform:none;animation:faqEntra .45s var(--mola)}
}
@keyframes faqEntra{from{opacity:0;transform:translateY(10px)}}
.faq-p{min-height:44px}

/* soluções: são só 4, então no computador ficam todas à vista, sem setas */
@media (min-width:1101px){
    .casos-trilho:has(.solucao){overflow:visible;justify-content:center}
    .caso.solucao{flex:1 1 0;max-width:310px}
    .casos-palco:has(.solucao) .casos-seta{display:none}
}
/* planos do roteiro: nome em cima e preço embaixo nos dois cards (alinhados) */
.plano-grande header{flex-direction:column;align-items:flex-start;gap:.6rem}
.plano-grande .plano-preco{text-align:left}
/* cabeçalho sobre seções claras: Entrar e logo ganham o fundo escuro da pílula dos links */
.topo-acoes .bt-entrar{background:rgba(15,18,32,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topo-logo{padding:.45rem .8rem;margin-left:-.8rem;border-radius:999px;transition:background-color .3s var(--suave)}
.topo-nav.rolou .topo-logo{background:rgba(15,18,32,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* auditoria mobile 29/09: bolinhas do carrossel de benefícios com área de toque de 44px
   (o desenho continua pequeno, só a área clicável cresce) */
.ben-pontos{gap:0;margin-left:-17px}
.ben-ponto,.ben-ponto.on{position:relative;width:44px;height:44px;border-radius:0;background:none}
.ben-ponto::after{
    content:"";position:absolute;left:17px;top:17px;width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.3);transition:width .35s var(--mola),background-color .25s;
}
.ben-ponto.on::after{width:28px;border-radius:6px;background:#fff}
.env-aceite{min-height:44px;align-items:center}

/* auditoria mobile 29/09: fundadores lado a lado em leque, menores (antes empilhados, 1.100px) */
@media (max-width:700px){
    .polaroides{flex-direction:row;align-items:flex-start;gap:0;margin:.6rem auto 1.8rem}
    .polaroides .polaroid{width:36vw;max-width:200px;margin:0 -2.2vw;padding:7px 7px 10px}
    .polaroides .p1{transform:rotate(-6deg) translateY(14px)}
    .polaroides .p3{transform:rotate(6deg) translateY(14px)}
    .polaroides .polaroid figcaption{padding-top:8px}
    .polaroides .polaroid b{font-size:1.05rem}
    .polaroides .polaroid figcaption span{font-size:.75rem}
    .polaroides .polaroid-foto span{font-size:.75rem;padding:.25rem .35rem}
}
/* "R$ 80 / mês" não quebra no meio */
.adicional span{white-space:nowrap}
/* auditoria mobile 29/09:
   - no menu do celular o botão branco herdava o texto branco dos links e ficava vazio;
   - a primeira linha da frase do topo começa abaixo do cabeçalho mesmo quebrando em duas. */
.topo-gaveta .bt-claro{color:var(--navy)}
@media (max-width:900px){ .hero-frases .hero-cima{top:96px} }

/* =====================================================
   Benefícios (29/09): bolotas pretas clicáveis, uma por benefício
   - clicar: a bolota dá um pulo e o card "abre" (encolhe girando e volta em mola);
   - a linha pontilhada (desenhada pelo JS) passa pelo centro de todas as
     bolotas, por trás delas e do card, e anda como formiguinhas.
   ===================================================== */
.orbita-ben{height:640px}
.ben-linha{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.ben-linha path{fill:none;stroke:rgba(255,255,255,.65);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 9;animation:tracejado 3s linear infinite}
.orbita-ben .orbita-card{z-index:2}
.ben-bola{
    position:absolute;z-index:3;width:168px;height:168px;padding:0 14px;border:0;border-radius:50%;cursor:pointer;
    display:grid;place-content:center;justify-items:center;
    background:#15162A;color:#fff;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.3rem;line-height:.95;text-transform:uppercase;
    box-shadow:0 18px 30px -18px rgba(0,0,0,.55);
    animation:bolaFlutua 6s ease-in-out infinite alternate;
    transition:background-color .3s var(--suave),color .3s var(--suave),box-shadow .3s var(--suave),scale .35s var(--mola);
}
.ben-bola span{font-size:2.4rem;line-height:.75}
.ben-bola.on{background:#F7F3F0;color:var(--tinta);box-shadow:0 0 0 7px rgba(255,255,255,.3),0 18px 30px -18px rgba(0,0,0,.55)}
@media (hover:hover) and (pointer:fine){ .ben-bola:hover{scale:1.06} }
.ben-bola:focus-visible{outline:3px solid #fff;outline-offset:5px}
.ben-bola.pula{animation:bolaFlutua 6s ease-in-out infinite alternate,bolaPula .7s var(--pula)}
@keyframes bolaPula{0%{scale:1}30%{scale:.8}100%{scale:1}}
.bn1{left:5%;top:5%}
.bn2{right:4%;top:36%;animation-delay:-2s}
.bn3{left:9%;top:64%;animation-delay:-4s}
.ben-card{justify-content:flex-start;height:580px;padding:46px 26px 26px}
.ben-card.abre{animation:cardAbre .8s var(--mola)}
@keyframes cardAbre{0%{scale:1;rotate:0deg}30%{scale:.84;rotate:-5deg}62%{scale:1.03;rotate:1.5deg}100%{scale:1;rotate:0deg}}
.ben-slide .oc-tit{font-size:2.5rem}
.ben-tags{margin:auto 0 0 !important;padding:0;list-style:none;display:flex !important;flex-wrap:wrap;gap:6px !important}
.ben-tags li{padding:.35rem .7rem !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;font-size:.75rem !important;line-height:1.2 !important;color:rgba(255,255,255,.85)}
@media (max-width:760px){
    .orbita-ben{flex-direction:row;flex-wrap:wrap;justify-content:center;height:auto;gap:8px}
    .ben-linha{display:none}
    .ben-bola{position:static;width:auto;height:auto;padding:.75rem 1.1rem;border-radius:999px;display:inline-flex;align-items:center;gap:.25rem;font-size:1.15rem;animation:none}
    .ben-bola span{font-size:1.3rem}
    .ben-bola.pula{animation:bolaPula .7s var(--pula)}
    .ben-card{order:0;height:auto;margin:6px 0 0}
}
@media (prefers-reduced-motion:reduce){ .ben-bola,.ben-bola.pula,.ben-card.abre,.ben-linha path{animation:none} }
/* texto maior dentro das bolotas; "Profissionalismo" é longo e usa um corpo menor para caber */
@media (min-width:761px){
    .ben-bola{font-size:1.6rem}
    .ben-bola.bn3{font-size:1.2rem}
}
.ben-slide .oc-tit{font-size:2.05rem}

/* Benefícios (29/09, versão final): 3 cards em carrossel + 10 bolotas pretas com as palavras */
.ben-bola,.ben-bola.bn3{width:124px;height:124px;padding:0 10px;font-size:1.12rem}
.wb1{left:3%;top:4%}
.wb2{left:18%;top:22%;animation-delay:-1s}
.wb3{left:2%;top:41%;animation-delay:-2s}
.wb4{left:18%;top:60%;animation-delay:-3s}
.wb5{left:4%;top:79%;animation-delay:-4s}
.wb6{right:3%;top:4%;animation-delay:-.5s}
.wb7{right:18%;top:22%;animation-delay:-1.5s}
.wb8{right:2%;top:41%;animation-delay:-2.5s}
.wb9{right:18%;top:60%;animation-delay:-3.5s}
.wb10{right:4%;top:79%;animation-delay:-4.5s}
.ben-card{justify-content:center;height:560px;padding:44px 28px 30px}
.ben-pontos{margin-top:1.6rem}
@media (max-width:1000px) and (min-width:761px){
    .ben-bola{width:104px;height:104px;font-size:.98rem}
    .wb2,.wb7{top:21%}
    .wb2,.wb4{left:13%}
    .wb7,.wb9{right:13%}
}
@media (max-width:760px){
    .ben-bola,.ben-bola.bn3{width:auto;height:auto;padding:.6rem 1rem;font-size:1rem}
    .ben-bola br{display:none}
    .ben-card{order:-1;height:auto;margin:0 0 10px}
}
/* palavras longas numa bolota só: corpo menor para caber no círculo */
@media (min-width:761px){ .wb7,.wb10{font-size:.9rem} }

/* FAQ mais curto (29/09): 8 perguntas à vista, as outras 11 atrás do botão
   "Ver todas", e botões um pouco mais baixos */
.faq-grade:not(.tudo) .faq-extra,
.faq-grade:not(.tudo) .faq-extra + .faq-r{display:none}
.faq-lista{gap:6px}
.faq-p{padding:.7rem 1rem;font-size:.92rem;line-height:1.3}
.faq-todas{
    align-self:flex-start;margin-top:.6rem;min-height:44px;padding:.6rem 1.2rem;border:0;border-radius:999px;cursor:pointer;
    background:transparent;color:var(--tinta);font:700 .92rem/1 var(--f-texto);box-shadow:inset 0 0 0 1.5px var(--tinta);
    transition:background-color .2s var(--rapida),color .2s var(--rapida);
}
@media (hover:hover) and (pointer:fine){ .faq-todas:hover{background:var(--tinta);color:#fff} }
.faq-todas:focus-visible{outline:3px solid var(--c-liderancas);outline-offset:3px}
.faq-grade.tudo .faq-extra{animation:faqEntra .45s var(--mola) backwards}
@media (max-width:860px){ .faq-todas{align-self:stretch} }
/* auditoria mobile 29/09 (2ª): pílulas das palavras com 44px de altura para o toque */
@media (max-width:760px){ .ben-bola,.ben-bola.bn3{min-height:44px;padding:.55rem 1rem} }
/* o "CRM político" grande não fica embaixo da onda creme do fim da seção */
.beneficios .env-marca{margin-bottom:clamp(44px,6vw,90px)}

/* planos no celular: 8 itens à vista + botão "Ver todos os 16 itens" */
.plano-todos{display:none}
@media (max-width:820px){
    .plano-grande:not(.tudo) .item-extra{display:none}
    .plano-grande.tudo .item-extra{animation:faqEntra .45s var(--mola) backwards}
    .plano-todos{
        display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;padding:.55rem 1.1rem;
        border:0;border-radius:999px;cursor:pointer;background:transparent;
        color:var(--cor);font:700 .9rem/1 var(--f-texto);box-shadow:inset 0 0 0 1.5px var(--cor);
    }
    .planos.anual .plano-grande .plano-todos{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
    .plano-todos:focus-visible{outline:3px solid var(--cor);outline-offset:3px}
}

/* =====================================================
   Termos de uso e Política de privacidade no visual do site (29/09)
   Faixa navy com o título (como as seções escuras), sumário das cláusulas
   preso ao lado no computador e o texto em coluna de leitura.
   ===================================================== */
.pagina-legal{background:#F7F3F0}
.legal-topo{
    position:relative;isolation:isolate;overflow:hidden;text-align:center;color:#fff;
    background:var(--navy-fundo);padding:clamp(8rem,12vw,10rem) 16px clamp(3.5rem,6vw,5rem);
}
.legal-titulo{
    margin:0 auto;max-width:16ch;font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;
    font-size:clamp(2.6rem,6vw,5rem);line-height:.92;text-transform:uppercase;
}
.legal-data{display:inline-block;margin:1.3rem 0 0;padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.1);font-size:.9rem;color:rgba(255,255,255,.85)}
.legal-corpo{
    display:grid;grid-template-columns:280px minmax(0,760px);justify-content:center;gap:clamp(2rem,4vw,4rem);
    padding:clamp(3rem,6vw,5rem) clamp(16px,4vw,48px) clamp(9rem,13vw,12rem);
}
.legal-sumario{position:sticky;top:6.5rem;align-self:start;max-height:calc(100vh - 8rem);overflow:auto;padding:18px 14px;border-radius:16px;background:#fff;box-shadow:0 20px 40px -32px rgba(30,38,87,.35)}
.legal-sumario-tit{margin:0 0 .6rem .4rem;font:700 .95rem var(--f-texto);color:var(--tinta)}
.legal-sumario ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.legal-sumario a{display:flex;gap:.55rem;min-height:40px;align-items:center;padding:.4rem .5rem;border-radius:8px;font-size:.78rem;line-height:1.3;color:#55576A;transition:background-color .2s var(--rapida),color .2s var(--rapida)}
.legal-sumario a b{flex:none;width:1.5rem;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;font-size:.95rem;color:var(--c-liderancas)}
.legal-sumario a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:700;font-size:.8rem;letter-spacing:.01em}
@media (hover:hover) and (pointer:fine){ .legal-sumario a:hover{background:#F7F3F0;color:var(--tinta)} }
.legal-doc{min-width:0}
.legal-doc h2{
    scroll-margin-top:6.5rem;margin:2.8rem 0 1rem;font-family:var(--f-display);font-variation-settings:'wdth' 75;font-weight:800;
    font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.2;text-transform:uppercase;color:var(--tinta);
}
.legal-doc h2:first-child{margin-top:0}
.legal-num{color:var(--c-liderancas);margin-right:.35em}
.legal-num::after{content:" ·";color:var(--c-liderancas)}
.legal-doc p{margin:0 0 1rem;font-size:1rem;line-height:1.75;color:#3D3F52}
.legal-fim{margin-top:3rem !important}
@media (max-width:1000px){
    .legal-corpo{grid-template-columns:minmax(0,760px)}
    .legal-sumario{position:static;max-height:260px}
}
@media (max-width:600px){ .legal-doc p{font-size:.95rem;line-height:1.7} }

/* =====================================================
   Aviso de cookies no visual do site (29/09)
   Card escuro como os cards do site, preso no canto de baixo; sobe em mola.
   A lógica é a mesma da v1 (js/cookies.js): a escolha fica no navegador e o
   link "Preferências de cookies" do rodapé reabre o aviso.
   ===================================================== */
.cookie-aviso{
    position:fixed;z-index:70;left:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,28px);width:min(420px,calc(100% - 24px));
    padding:22px 22px 20px;border-radius:18px;background:#15162A;color:#fff;
    box-shadow:0 30px 60px -28px rgba(8,10,30,.75),inset 0 0 0 1px rgba(255,255,255,.1);
    opacity:0;transform:translateY(24px);
}
.cookie-aviso[hidden]{display:none}
.cookie-aviso.on{opacity:1;transform:none;transition:opacity .3s var(--suave),transform .7s var(--mola)}
.cookie-aviso.saindo{opacity:0;transform:translateY(16px);transition:opacity .22s var(--suave),transform .26s var(--suave)}
.cookie-titulo{
    margin:0 0 .5rem;display:flex;align-items:center;gap:.55rem;
    font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.5rem;line-height:1;text-transform:uppercase;
}
.cookie-titulo::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:url(../img/marca-globo-64.webp) center/contain no-repeat}
.cookie-texto{margin:0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.8)}
.cookie-texto a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-acoes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.cookie-btn{
    flex:1 1 auto;min-height:44px;padding:.6rem 1.1rem;border:0;border-radius:999px;cursor:pointer;
    font:700 .9rem/1 var(--f-texto);transition:background-color .2s var(--rapida),transform .16s var(--rapida);
}
.cookie-recusar{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.cookie-aceitar{background:#fff;color:var(--navy)}
@media (hover:hover) and (pointer:fine){
    .cookie-recusar:hover{background:rgba(255,255,255,.1)}
    .cookie-aceitar:hover{background:#EEF1F8}
}
.cookie-btn:active{transform:scale(.97)}
.cookie-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .cookie-aviso,.cookie-aviso.on,.cookie-aviso.saindo{transform:none;transition:opacity .2s linear} }
/* link do rodapé que reabre o aviso */
.rodape-cookies{padding:0;border:0;background:none;cursor:pointer;color:#fff;font:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){ .rodape-cookies{min-height:44px} }

/* =====================================================
   Soluções com a arte do cliente (29/09): o card é a própria imagem
   (título e texto já vêm nela); o botão de vídeo fica sobre a foto.
   ===================================================== */
.caso.solucao.com-arte{display:block;min-height:0;aspect-ratio:auto;background:#0B0F28}
.sol-arte{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top}
.com-arte .sol-play{
    position:absolute;left:50%;top:47%;margin:0;transform:translate(-50%,-50%);
    width:70px;height:70px;background:rgba(255,255,255,.92);
    box-shadow:0 0 0 9px rgba(255,255,255,.22),0 18px 34px -12px rgba(0,0,0,.6);
}
.com-arte .sol-play svg{width:28px;height:28px}
@media (hover:hover) and (pointer:fine){ .com-arte .sol-play:hover{transform:translate(-50%,-50%) scale(1.08)} }
.com-arte .sol-play:active{transform:translate(-50%,-50%) scale(.95)}

/* =====================================================
   Fundadores (29/09): fotos reais; cada polaroid é um botão que abre a
   mensagem de quem está nela. A escolhida endireita e sobe.
   ===================================================== */
.fund-tab{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:4px;font:inherit;color:inherit}
.fund-tab:focus-visible{outline:3px solid var(--c-liderancas);outline-offset:6px}
.polaroid-foto img{display:block;width:100%;height:100%;object-fit:cover}
.fund-tab .polaroid{transition:transform .55s var(--mola),box-shadow .35s var(--suave)}
.polaroides .fund-tab.on .polaroid{transform:rotate(0) translateY(-12px);box-shadow:0 34px 50px -26px rgba(20,24,51,.55)}
.polaroides .fund-tab.on{position:relative;z-index:3}
.polaroides .fund-tab:not(.on) .polaroid-foto{opacity:.78;transition:opacity .3s var(--suave)}
@media (hover:hover) and (pointer:fine){ .polaroides .fund-tab:not(.on):hover .polaroid-foto{opacity:1} }
.fund-msgs{max-width:64ch;margin:0 auto 2.2rem}
.fund-msg{margin:0;padding:26px 28px 22px;border-radius:18px;background:#fff;text-align:left;box-shadow:0 1px 0 rgba(30,38,87,.06),0 20px 40px -32px rgba(30,38,87,.35)}
.fund-msg.on{animation:faqEntra .45s var(--mola)}
.fund-msg p{margin:0 0 1rem;font-size:1.02rem;line-height:1.7;color:#3D3F52}
.fund-msg footer{font-size:.9rem;color:#7A7C8E}
.fund-msg footer b{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.2rem;text-transform:uppercase;color:var(--tinta)}
@media (max-width:700px){ .fund-msg{padding:22px 20px 18px} .fund-msg p{font-size:.97rem} }
/* celular: as três polaroids (agora dentro de botões) cabem na largura sem passar da borda */
@media (max-width:700px){
    .polaroides{padding:0 10px}
    .polaroides .polaroid{width:31vw;margin:0 -1.2vw}
}

/* =====================================================
   Fundadores (29/09, versão 2): a polaroid vira em 3D e a mensagem aparece
   escrita no verso, em papel. Clicar de novo desvira. No celular as fotos
   ficam num carrossel e maiores, para o verso ser legível.
   ===================================================== */
.fundadores .polaroid{padding:0;background:none;box-shadow:none;perspective:1400px}
.pol-giro{position:relative;transform-style:preserve-3d;transition:transform .9s var(--mola)}
.fund-tab.virado .pol-giro{transform:rotateY(180deg)}
.pol-frente,.pol-verso{
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    background:#fff;padding:14px 14px 18px;box-shadow:0 26px 44px -26px rgba(20,24,51,.45);
}
.pol-frente{position:relative}
.pol-verso{
    position:absolute;inset:0;transform:rotateY(180deg);
    display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:22px 20px;text-align:left;overflow:auto;
    background:
        repeating-linear-gradient(180deg,transparent 0 23px,rgba(33,75,160,.07) 23px 24px),
        #FBF8F1;
}
.pol-verso p{margin:0;font-size:.8rem;line-height:1.5;color:#3D3F52}
.pol-assina{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.pol-assina b{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:900;font-size:1.35rem;text-transform:uppercase;color:var(--tinta)}
.pol-assina span{font-size:.75rem !important;color:#7A7C8E}
.polaroides .fund-tab .polaroid-foto{opacity:1}
.polaroides .fund-tab.virado{position:relative;z-index:3}
.polaroides .fund-tab.virado .polaroid{transform:rotate(0) translateY(-12px)}
/* dica de que a foto vira */
.pol-virar{
    position:absolute;right:18px;bottom:18px;width:32px;height:32px;border-radius:50%;
    display:grid;place-items:center;background:var(--tinta);color:#fff;
    transition:transform .5s var(--mola);
}
.pol-virar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .fund-tab:hover .pol-virar{transform:rotate(-120deg)} }
@media (prefers-reduced-motion:reduce){ .pol-giro{transition:none} }
@media (max-width:700px){
    .polaroides{
        flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:16px;
        overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
        margin:0 calc(clamp(16px,4vw,48px) * -1) 1.6rem;padding:22px 20px 30px;
    }
    .polaroides::-webkit-scrollbar{display:none}
    .polaroides .fund-tab{flex:0 0 min(78vw,300px);scroll-snap-align:center}
    .polaroides .polaroid{width:100%;margin:0}
    .polaroides .p1{transform:rotate(-2deg)}
    .polaroides .p2{transform:rotate(1.5deg)}
    .polaroides .p3{transform:rotate(-1.5deg)}
    .polaroides .polaroid b{font-size:1.4rem}
    .polaroides .polaroid figcaption span{font-size:.85rem}
}
@media (max-width:700px){ .polaroides .polaroid{max-width:none;padding:0} }
/* a virada é feita pelo JS (animação com subida e inclinação); o CSS só guarda o estado final */
.pol-giro{transition:none}
.fundadores .polaroid{perspective:1600px}

/* =====================================================
   Topo (29/09): cada frase em quatro pedaços em volta da pessoa
   em cima, na frente: "UM MÓDULO"
   laterais da cabeça, atrás: "PARA" · "CADA"
   embaixo, atrás: "DESAFIO DO SEU MANDATO"
   A leitura segue de cima para baixo, da esquerda para a direita.
   ===================================================== */
.hero-frases .hero-palavra{white-space:nowrap}
.hero-frases .hero-cima{top:15%;font-size:clamp(4rem,13vw,12.5rem)}
.hero-frases .hero-meio{top:40%;width:min(64vw,900px);font-size:clamp(2.8rem,7.4vw,7rem);color:rgba(255,255,255,.55)}
.hero-frases .hero-baixo{top:56%;font-size:clamp(3.4rem,10vw,9.5rem);color:rgba(255,255,255,.5)}
.hero-lado{position:relative;width:48%;height:.86em}
.hero-esq .hero-palavra{text-align:left}
.hero-dir .hero-palavra{text-align:right}
@media (max-width:900px){
    .hero-frases .hero-cima{top:96px;font-size:clamp(2.8rem,14vw,5.6rem);line-height:.86}
    .hero-frases .hero-meio{top:37%;width:94vw;font-size:clamp(2.2rem,11vw,4.6rem)}
    /* o fim da frase pode quebrar em duas linhas no celular, para não ficar miúdo */
    .hero-frases .hero-baixo{top:52%;font-size:clamp(2.2rem,11vw,4.2rem);line-height:.86}
    .hero-frases .hero-baixo .hero-palavra{white-space:normal}
}
/* ajuste: as quatro camadas terminam antes do subtítulo */
.hero-frases .hero-cima{top:12%;font-size:clamp(3.6rem,10.5vw,10rem)}
.hero-frases .hero-meio{top:35%;font-size:clamp(2.6rem,6.2vw,6rem)}
.hero-frases .hero-baixo{top:49%;font-size:clamp(3rem,8vw,7.8rem)}
@media (max-width:900px){
    .hero-frases .hero-cima{top:96px;font-size:clamp(2.6rem,13vw,5.2rem)}
    .hero-frases .hero-meio{top:31%;font-size:clamp(2.2rem,11vw,4.4rem)}
    .hero-frases .hero-baixo{top:43%;font-size:clamp(2rem,10vw,4rem)}
}
/* celular: a pessoa fica mais estreita para as laterais aparecerem, e o fim da
   frase vem para a frente dela (atrás, sobre a roupa escura, sumia) */
@media (max-width:900px){
    .hero-frases .hero-pessoas{width:min(74vw,420px)}
    .hero-frases .hero-baixo{z-index:6;color:#fff;text-shadow:0 2px 18px rgba(15,18,32,.45)}
}
/* celular: um pouco mais de altura no topo para escalonar texto, rosto e subtítulo */
@media (max-width:900px){
    .hero.hero-frases{height:720px}
    .hero-frases .hero-meio{top:25%}
    .hero-frases .hero-baixo{top:35%}
    .hero-frases .hero-pessoas{bottom:9%}
}

/* =====================================================
   Topo (29/09, rodada 2): mais contraste entre as camadas
   - em cima: gigante, estreita, escura, na frente;
   - laterais: branco sólido em letra LARGA (eixo wdth da Archivo no máximo),
     o contraste de largura com a linha de cima é o diferencial;
   - fim da frase: etiqueta escura levemente inclinada NA FRENTE do peito,
     sempre legível (antes sumia atrás da pessoa).
   ===================================================== */
.hero-frases .hero-meio{
    top:36%;width:min(60vw,860px);color:#fff;
    font-variation-settings:'wdth' 125;font-weight:800;font-size:clamp(1.8rem,3.6vw,3.6rem);letter-spacing:.01em;
    text-shadow:0 2px 24px rgba(15,18,32,.25);
}
.hero-frases .hero-baixo{top:57%;z-index:7;color:#fff;font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1;height:auto}
.hero-frases .hero-baixo .hero-palavra{text-shadow:none}
.etiqueta{
    display:inline-block;padding:.12em .38em .1em;background:var(--tinta);color:#fff;
    transform:rotate(-2.2deg);box-shadow:0 18px 34px -16px rgba(8,10,30,.7);
}
.hero-frases[data-variante="1"] .etiqueta,.hero-frases[data-variante="3"] .etiqueta{transform:rotate(1.8deg)}
.hero-frases .hero-sub{bottom:150px}
@media (max-width:900px){
    .hero.hero-frases{height:720px}
    .hero-frases .hero-cima{top:96px;font-size:clamp(2.8rem,14vw,5.6rem)}
    .hero-frases .hero-meio{top:24%;width:92vw;font-size:clamp(1.3rem,6vw,2.4rem)}
    .hero-frases .hero-pessoas{width:min(88vw,460px);bottom:7%}
    .hero-frases .hero-baixo{top:52%;font-size:clamp(1.5rem,7.4vw,2.8rem);text-shadow:none}
    .hero-frases .hero-baixo .hero-palavra{white-space:nowrap}
    .hero-frases .hero-sub{bottom:130px}
}
/* etiqueta sem cobrir o rosto: no peito (computador) e acima da cabeça (celular) */
.hero-frases .hero-baixo{top:61%;font-size:clamp(2.1rem,4.3vw,4.1rem)}
.hero-frases .hero-sub{bottom:156px}
@media (max-width:900px){
    .hero-frases .hero-meio{top:22%}
    .hero-frases .hero-baixo{top:30%;font-size:clamp(1.5rem,7.4vw,2.8rem)}
    .hero-frases .hero-pessoas{bottom:2%}
    .hero-frases .hero-sub{bottom:130px}
}
/* a linha de cima vai para trás da pessoa (camada de fundo, a cabeça passa na frente) */
.hero-frases .hero-cima{z-index:2}
/* celular: a pessoa sobe até a cabeça encostar na linha de cima (que fica atrás dela);
   a etiqueta desce para o peito, abaixo do queixo; a base da foto some atrás do subtítulo */
@media (max-width:900px){
    .hero-frases .hero-pessoas{bottom:212px}
    .hero-frases .hero-baixo{top:46%}
}
/* as laterais encostam no cabelo: ficam na frente da pessoa, com sombra; só a linha de cima fica atrás */
.hero-frases .hero-meio{z-index:6;text-shadow:0 2px 14px rgba(15,18,32,.55)}

/* =====================================================
   Topo (29/09, rodada 3): composição PROPORCIONAL à pessoa.
   Tudo parte de duas medidas: --W (largura da pessoa) e --T (topo dela).
   A foto tem a cabeça em x 31%..69% da largura, cabelo em y 2%, olhos em 37%
   e queixo em 61% (medidas em frações de --W). Os textos são posicionados
   por essas marcas, então a composição é a mesma em qualquer proporção de tela:
   - linha de cima: atrás, a cabeça cobre só o pé das letras;
   - laterais: na frente, alinhadas para a cabeça e sempre FORA dela
     (a largura de cada lado termina antes do cabelo; o que não couber encolhe);
   - etiqueta: no peito, abaixo do queixo;
   - a pessoa é cortada no busto (some em degradê antes do subtítulo).
   ===================================================== */
.hero.hero-frases{
    --Y1:100px;                                   /* topo da linha de cima */
    --W:min(40vw,600px,calc((min(max(90svh,680px),100svh) - 330px) / .96));
    --F1:min(calc(var(--W) * .26),calc((100vw - 32px) / 6.4));
    --T:calc(var(--Y1) + var(--F1) * .44 - var(--W) * .02);
    --F2:calc(var(--W) * .085);
    --F3:min(calc(var(--W) * .1),calc((100vw - 40px) / 15.5));
    --lado:.24;                                   /* meia largura da cabeça + folga, em --W */
    --subH:74px;                                  /* medido pelo v2-hero.js */
}
.hero-frases .hero-cima{top:var(--Y1);font-size:var(--F1);height:.86em;z-index:2}
.hero-frases .hero-luz{z-index:1}   /* o brilho fica atrás da linha de cima, senão desbota as letras */
.hero-frases .hero-pessoas{
    top:var(--T);bottom:auto;width:var(--W);height:calc(var(--W) * .88);overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent);
}
.hero-frases .hero-pessoa img{position:absolute;top:0;left:0;width:100%;height:auto}
.hero-frases .hero-meio{
    top:calc(var(--T) + var(--W) * .31 - var(--F2) * .43);
    width:100%;box-sizing:border-box;padding-inline:16px;font-size:var(--F2);z-index:6;
}
.hero-frases .hero-lado{width:calc(50% - var(--W) * var(--lado));height:.9em}
.hero-frases .hero-esq .hero-palavra{justify-content:flex-end;text-align:right}
.hero-frases .hero-dir .hero-palavra{justify-content:flex-start;text-align:left}
.hero-frases .hero-baixo{top:calc(var(--T) + var(--W) * .65);font-size:var(--F3);width:calc(100% - 32px);height:1.3em;z-index:9}
.hero-frases .hero-baixo .hero-palavra{align-items:flex-start}
.hero-frases .hero-notebook{top:calc(var(--T) + var(--W) * .78);bottom:0;height:auto}
.hero-frases .hero-sub{top:calc(var(--T) + var(--W) * .84);bottom:auto}
.hero-frases .bt-hero{top:calc(var(--T) + var(--W) * .84 + var(--subH) + 14px);bottom:auto}
@media (max-width:900px){
    .hero.hero-frases{
        --Y1:84px;
        --W:min(74vw,420px);
        --F2:calc(var(--W) * .085);
        --lado:.22;
        --subH:90px;
        height:calc(var(--T) + var(--W) * .84 + var(--subH) + 14px + 52px + 48px);
    }
    /* no celular as laterais usam a letra mais estreita para caber ao lado da cabeça */
    .hero-frases .hero-meio{font-variation-settings:'wdth' 80}
}

/* depoimentos: foto real COLORIDA da pessoa no lugar das iniciais (<span class="dep-av"><img ...></span>) */
.dep-av{overflow:hidden}
.dep-av img{width:100%;height:100%;object-fit:cover;display:block}

/* depoimentos: foto colorida (pedido de 30/09), sem o filtro cinza antigo */
.dep-av,.dep-av img{filter:none}

/* rodapé: ícone do Instagram no lugar do texto "IG", no mesmo círculo */
.rodape-social{width:44px;min-width:0;padding:0}
.rodape-social svg{display:block}