/* ==========================================================================
   Grupo Origem — variação do site (arquitetura inspirada no avel.me)
   Overused Grotesk · navy #0A2140 · acento #91BFE8 · pesos leves
   ========================================================================== */

@font-face{
  font-family:'Overused Grotesk';
  src:url('overused-grotesk.woff2') format('woff2-variations'),
      url('overused-grotesk.woff2') format('woff2');
  font-weight:300 900; font-style:oblique 0deg 10deg; font-display:swap;
}

:root{
  --navy-950:#050F1F; --navy-900:#0A2140; --navy-800:#102E55; --navy-700:#173D6E;
  --navy-600:#1F4D88; --navy-500:#297DE0; --navy-400:#5A9AE8; --navy-300:#91BFE8;
  --navy-200:#BFD8F0; --navy-100:#E2EDF8; --navy-50:#F2F7FC;
  --n-0:#FFFFFF; --n-50:#F8F8F8; --n-400:#B6BAC1; --n-500:#8A8A8C; --n-600:#6B6F76; --n-900:#1A1F26;

  --acento:#91BFE8;
  --papel:#FAFAFA;

  --fonte:'Overused Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;

  --max:1280px;
  --gut:clamp(20px,5vw,60px);
  --secao:clamp(76px,10vw,152px);

  --r-painel:22px;
  --r-img:16px;
  --r-pill:999px;

  --fio-claro:rgba(10,33,64,.12);
  --fio-escuro:rgba(255,255,255,.13);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--navy-950); color:var(--navy-900);
  font-family:var(--fonte); font-weight:400; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:300; letter-spacing:-.04em; line-height:1.02}
p{margin:0}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px}

/* ---------- utilitários ---------- */
.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy-600); display:inline-flex; align-items:center; gap:12px; margin:0;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--acento); flex:none}
[data-fundo="escuro"] .eyebrow,.escuro .eyebrow,.hero-int .eyebrow,.fechamento .eyebrow,.hero .eyebrow,.ev-hero .eyebrow{color:var(--navy-300)}
.h-display{font-size:clamp(44px,6.6vw,104px); line-height:.95; letter-spacing:-.045em; font-weight:300}
.h-secao{font-size:clamp(32px,4.3vw,60px); line-height:1.03; letter-spacing:-.04em; font-weight:300}
.h-bloco{font-size:clamp(22px,2.2vw,30px); line-height:1.14; letter-spacing:-.03em; font-weight:400}
b,strong{font-weight:500}
/* a inclinacao aproxima os topos das letras e abre o vao depois da palavra reta:
   por isso o trecho inclinado precisa de tracking proprio, nao o -.045em do texto reto */
.destaque{
  font-weight:400; font-style:oblique 6deg; color:var(--navy-500);
  font-synthesis:none;
  letter-spacing:-.018em;
  margin-left:-.02em; padding-right:.05em;
}
[data-fundo="escuro"] .destaque,.escuro .destaque,.hero .destaque,.hero-int .destaque,.manifesto .destaque,.vidro .destaque,.banda .destaque,.fechamento .destaque,.ev-hero .destaque{color:var(--acento)}
.h-display .destaque{font-weight:300}
.lead{font-size:clamp(16.5px,1.3vw,19px); line-height:1.55; color:var(--n-600); font-weight:400}
.escuro .lead{color:rgba(255,255,255,.7)}
.escuro{background:var(--navy-900); color:#fff}
.papel{background:var(--papel); color:var(--navy-900)}
.branco{background:#fff; color:var(--navy-900)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; letter-spacing:.01em; line-height:1; text-align:center;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
}
.btn svg{transition:transform .35s var(--ease); flex:none}
.btn:hover svg{transform:translateX(4px)}
.btn-primario{background:var(--acento); color:var(--navy-900)}
.btn-primario:hover{background:#fff}
.btn-vazado{border:1px solid var(--fio-escuro); color:#fff; backdrop-filter:blur(8px)}
.btn-vazado:hover{border-color:var(--acento); color:var(--acento)}
.btn-navy{background:var(--navy-900); color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-navy[disabled]{opacity:.45; cursor:default}
.btn-fantasma{border:1px solid var(--fio-claro); color:var(--navy-900)}
.btn-fantasma:hover{border-color:var(--navy-900)}
.btn-linha{
  display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:500;
  padding-bottom:5px; border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.btn-linha:hover{gap:15px}
.escuro .btn-linha:hover{color:var(--acento)}

/* ---------- meridiano (assinatura) ---------- */
.meridiano{
  position:fixed; left:max(16px,calc((100vw - var(--max))/2 + 20px)); top:0; bottom:0;
  width:1px; background:var(--fio-claro); z-index:40; pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
  background-repeat:no-repeat;
}
.meridiano.on{opacity:1}
.meridiano__preenche{
  position:absolute; inset:0 0 auto 0; height:0; background:var(--acento);
  background-repeat:no-repeat; background-position:0 0; will-change:height;
}
.meridiano__marca{
  position:absolute; left:50%; width:15px; height:15px; margin-left:-7.5px; margin-top:-7.5px;
  will-change:top; filter:drop-shadow(0 2px 6px rgba(5,15,31,.45));
}
.meridiano__marca img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .12s linear;
}
.meridiano__marca .mm-clara{opacity:0}
.meridiano.sobre-escuro .meridiano__marca .mm-clara{opacity:1}
.meridiano.sobre-escuro .meridiano__marca .mm-escura{opacity:0}
@media (max-width:1180px){.meridiano{display:none}}

/* ---------- nav cápsula ---------- */
.nav{position:fixed; inset:16px 0 auto 0; z-index:60; pointer-events:none}
.nav__in{
  pointer-events:auto; display:flex; align-items:center; gap:26px;
  padding:12px 14px 12px 26px; border-radius:var(--r-pill);
  border:1px solid var(--fio-escuro); background:rgba(5,15,31,.55);
  backdrop-filter:blur(18px) saturate(140%);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.compacta .nav__in{background:rgba(5,15,31,.88)}
.nav__env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.nav__logo img{height:22px; width:auto}
.nav__menu{display:flex; align-items:center; gap:6px; margin-left:auto}
.nav__link{
  font-size:14px; font-weight:400; color:rgba(255,255,255,.72);
  padding:9px 15px; border-radius:var(--r-pill);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__link:hover,.nav__link.ativo{color:#fff; background:rgba(255,255,255,.09)}
.nav__cta{padding:11px 22px; font-size:13.5px; margin-left:8px}
.nav__burger{display:none; margin-left:auto; width:38px; height:38px; align-items:center; justify-content:center; border-radius:var(--r-pill)}
.nav__burger span{display:block; width:20px; height:1.5px; background:#fff; position:relative; transition:background .2s}
.nav__burger span::before,.nav__burger span::after{content:''; position:absolute; left:0; width:20px; height:1.5px; background:#fff; transition:transform .3s var(--ease)}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}

@media (max-width:980px){
  /* backdrop-filter cria bloco de contencao e prende o menu fixo dentro da capsula */
  .nav__in{padding:11px 12px 11px 20px; backdrop-filter:none; background:rgba(5,15,31,.9)}
  .nav.compacta .nav__in{background:rgba(5,15,31,.96)}
  .nav__menu{
    position:fixed; inset:0; background:var(--navy-950); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:2px; padding:0 var(--gut);
    transform:translateY(-102%); transition:transform .5s var(--ease); margin:0; border-radius:0;
    z-index:2; overflow-y:auto;
  }
  .nav__menu.aberto{transform:translateY(0)}
  .nav__menu .nav__link{font-size:29px; font-weight:300; letter-spacing:-.035em; color:#fff; padding:12px 0; background:none}
  .nav__menu .nav__cta{margin:26px 0 0; font-size:15px; padding:16px 30px}
  .nav__burger{display:flex}
  .nav__burger.x span{background:transparent}
  .nav__burger.x span::before{transform:translateY(6px) rotate(45deg)}
  .nav__burger.x span::after{transform:translateY(-6px) rotate(-45deg)}
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--navy-950); color:#fff; overflow:hidden;
  padding:150px 0 clamp(48px,6vw,86px);
}
.hero__foto{position:absolute; inset:0; z-index:0}
.hero__foto img{width:100%; height:100%; object-fit:cover; object-position:62% 42%; opacity:.78}
.hero__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(5,15,31,.86) 0%,rgba(5,15,31,.34) 34%,rgba(5,15,31,.94) 100%),
    linear-gradient(90deg,rgba(5,15,31,.92) 0%,rgba(5,15,31,.66) 40%,rgba(5,15,31,.10) 82%);
}
.hero__onda{position:absolute; left:0; right:0; bottom:-6vh; z-index:2; height:30vh; width:100%; opacity:.3; pointer-events:none}
.hero__in{position:relative; z-index:3; width:100%}
.hero__selo{
  display:inline-flex; align-items:center; gap:14px; padding:9px 18px 9px 14px;
  border:1px solid var(--fio-escuro); border-radius:var(--r-pill); background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px); font-size:12.5px; color:rgba(255,255,255,.82);
  max-width:100%; line-height:1.4;
}
.hero__selo > span{min-width:0}
.hero__selo b{font-weight:500; color:#fff}
.hero__selo i{font-style:normal; width:10px; height:10px; background:url('simbolo-branco.png') center/contain no-repeat; flex:none; opacity:.85}
.hero h1{margin:26px 0 0; max-width:13ch; text-wrap:balance}
.hero__sub{margin-top:24px; max-width:48ch; color:rgba(255,255,255,.76)}
.hero__acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero__rolar{
  position:absolute; right:var(--gut); bottom:clamp(48px,6vw,86px); z-index:3;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:14px;
}
.hero__rolar::after{content:''; width:1px; height:52px; background:linear-gradient(180deg,var(--acento),transparent)}
@media (max-width:900px){
  .hero__rolar{display:none}
  .hero{padding-top:128px}
  .hero__selo{align-items:flex-start; padding:11px 15px 11px 13px}
  .hero__selo i{margin-top:.42em}
  .hero__acoes .btn{flex:1 1 100%}
}

/* ---------- marquee ---------- */
.marquee{background:var(--navy-900); border-block:1px solid var(--fio-escuro); overflow:hidden; padding:17px 0}
.marquee__fita{display:flex; width:max-content; will-change:transform}
.marquee__fita.rodando{animation:correr var(--dur,42s) linear infinite}
@keyframes correr{to{transform:translateX(-50%)}}
.marquee__grupo{
  display:inline-flex; align-items:center; flex:none; white-space:nowrap;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.marquee__grupo em{font-style:normal; padding:0 24px}
.marquee__grupo i{
  display:inline-block; flex:none; width:11px; height:11px;
  background:url('simbolo-branco.png') center/contain no-repeat; opacity:.5;
}
@media (prefers-reduced-motion:reduce){.marquee__fita{animation:none}}

/* ---------- painel de números (assinatura do avel adaptada) ---------- */
.painel{background:var(--navy-950); padding:0 0 var(--secao)}
.numeros{
  position:relative; border-radius:var(--r-painel); overflow:hidden;
  background:var(--navy-900); padding:clamp(56px,7vw,104px) clamp(24px,4vw,64px);
  border:1px solid var(--fio-escuro);
}
.numeros::before{
  content:''; position:absolute; left:50%; top:50%; width:min(120%,1100px); aspect-ratio:2/1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(145,191,232,.20) 0%, rgba(145,191,232,.06) 42%, transparent 70%);
}
.numeros__in{position:relative}
.numeros__intro{max-width:56ch; margin:0 auto clamp(44px,5vw,72px); text-align:center; color:rgba(255,255,255,.72); font-size:clamp(16px,1.3vw,19px); line-height:1.55}
.numeros__intro b{color:#fff; font-weight:500}
.numeros__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px)}
.numeros__item{text-align:center}
.numeros__valor{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-size:clamp(40px,5.2vw,74px); font-weight:300; letter-spacing:-.05em; line-height:1; color:#fff;
}
/* padrao: o "+" e o "R$" SEMPRE vem antes, na mesma altura e no mesmo tamanho;
   a unidade ("bi") sempre depois, na linha de base */
.numeros__valor .pre{
  font-style:normal; color:var(--acento); font-size:.42em; font-weight:400;
  align-self:flex-start; margin-top:.2em; margin-right:.1em; letter-spacing:-.01em; line-height:1;
}
.numeros__valor .un{
  font-style:normal; color:rgba(255,255,255,.6); font-size:.34em; font-weight:400;
  margin-left:.16em; letter-spacing:.01em;
}
.numeros__rot{
  display:inline-block; margin-top:20px; padding:9px 19px; border-radius:var(--r-pill);
  border:1px solid var(--fio-escuro); background:rgba(255,255,255,.05);
  font-size:12.5px; color:rgba(255,255,255,.8);
}
@media (max-width:820px){.numeros__grid{grid-template-columns:repeat(2,1fr); gap:38px 20px}}

/* ---------- seção ---------- */
.secao{padding:var(--secao) 0}
.secao__cabeca{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:clamp(24px,5vw,76px); align-items:end; margin-bottom:clamp(44px,5vw,76px)}
.secao__cabeca h2{margin-top:20px; max-width:17ch; text-wrap:balance}
@media (max-width:880px){.secao__cabeca{grid-template-columns:1fr}}

/* ---------- faixa de foto ---------- */
.faixa{position:relative; height:clamp(280px,42vw,520px); overflow:hidden}
.faixa img{width:100%; height:100%; object-fit:cover}
.faixa::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,15,31,.42),rgba(5,15,31,.12) 40%,rgba(5,15,31,.55))}

/* ---------- sobre ---------- */
.sobre__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,80px); align-items:start}
.sobre__texto p + p{margin-top:20px}
.pilares{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(48px,5.5vw,84px)}
.pilar{
  background:#fff; border:1px solid var(--fio-claro); border-radius:var(--r-painel);
  padding:clamp(26px,3vw,38px); transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.pilar:hover{border-color:var(--navy-300); transform:translateY(-3px)}
.pilar i{display:block; width:15px; height:15px; background:url('simbolo-navy.png') center/contain no-repeat}
.pilar h3{margin:22px 0 11px; font-size:25px; letter-spacing:-.035em; font-weight:400}
.pilar p{font-size:15px; line-height:1.55; color:var(--n-600)}
@media (max-width:880px){.sobre__grid{grid-template-columns:1fr} .pilares{grid-template-columns:1fr}}

/* ---------- manifesto ---------- */
.manifesto{background:var(--navy-900); color:#fff; padding:clamp(76px,9vw,140px) 0; text-align:center}
.manifesto p{
  max-width:22ch; margin:0 auto; font-size:clamp(26px,3.6vw,50px); font-weight:300;
  line-height:1.16; letter-spacing:-.038em; text-wrap:balance;
}
.manifesto__assina{display:block; margin-top:clamp(30px,3.4vw,48px); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-300)}

/* ---------- soluções ---------- */
.solucoes__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px)}
.solucao{
  position:relative; background:var(--navy-900); border:1px solid var(--fio-escuro);
  border-radius:var(--r-painel); padding:clamp(26px,2.8vw,36px);
  display:flex; flex-direction:column; min-height:290px; overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
/* o brilho nasce onde o ponteiro esta, nao no centro do cartao */
.solucao::before,.rede::before,.canal::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(145,191,232,.20), transparent 68%);
  transition:opacity .45s var(--ease);
}
.solucao:hover::before,.rede:hover::before,.canal:hover::before{opacity:1}
.solucao:hover{border-color:rgba(145,191,232,.4); transform:translateY(-4px)}
.solucao > *{position:relative}
.solucao__n{font-size:11.5px; letter-spacing:.14em; color:var(--navy-300); font-weight:500}
.solucao h3{margin:20px 0 13px; font-size:24px; color:#fff; letter-spacing:-.034em; font-weight:400}
.solucao p{font-size:14.5px; line-height:1.58; color:rgba(255,255,255,.62)}
.solucao ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:9px}
.solucao li{font-size:13.5px; color:rgba(255,255,255,.72); padding-left:20px; position:relative; line-height:1.45}
.solucao li::before{content:''; position:absolute; left:0; top:.34em; width:9px; height:9px; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.8}
.solucao__ir{margin-top:auto; padding-top:26px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--acento); display:inline-flex; align-items:center; gap:9px}
@media (max-width:980px){.solucoes__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.solucoes__grid{grid-template-columns:1fr}.solucao{min-height:0}}

/* ---------- ecossistema ---------- */
.eco__linha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,76px); align-items:center}
.eco__linha + .eco__linha{margin-top:clamp(56px,6.5vw,110px)}
.eco__linha:nth-child(even) .eco__midia{order:-1}
.eco__lockup{display:flex; align-items:center; gap:16px}
.eco__lockup img{height:26px; width:auto}
.eco__lockup span{padding-left:16px; border-left:1px solid var(--fio-claro); font-size:clamp(21px,2vw,28px); font-weight:300; letter-spacing:-.035em; color:var(--navy-900)}
.escuro .eco__lockup span{color:#fff; border-left-color:var(--fio-escuro)}
.eco__linha h3{margin:26px 0 16px; font-size:clamp(24px,2.5vw,34px); font-weight:300; letter-spacing:-.038em; max-width:18ch}
.eco__linha p{max-width:46ch}
.eco__linha .btn{margin-top:28px}
.eco__midia{border-radius:var(--r-painel); overflow:hidden; background:var(--navy-800)}
.eco__midia img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1.1s var(--ease)}
.eco__linha:hover .eco__midia img{transform:scale(1.04)}
@media (max-width:880px){
  .eco__linha{grid-template-columns:1fr; gap:26px}
  .eco__linha:nth-child(even) .eco__midia{order:0}
}

/* ---------- reconhecimentos ---------- */
.premios{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,3vw,44px); align-items:stretch}
.premios__foto{margin:0; border-radius:var(--r-painel); overflow:hidden; background:var(--navy-800)}
.premios__foto img{width:100%; height:100%; min-height:clamp(280px,32vw,420px); object-fit:cover}
.premios__lista{
  display:flex; flex-direction:column; gap:0;
  background:var(--navy-950); border:1px solid var(--fio-escuro); border-radius:var(--r-painel);
  padding:clamp(26px,2.8vw,38px);
}
.premios__lista div{
  display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--fio-escuro);
  font-size:16px; line-height:1.4; color:#fff; font-weight:400;
}
.premios__lista div:first-child{padding-top:0}
.premios__lista i{font-style:normal; width:14px; height:14px; margin-top:.16em; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.9}
.premios__lista small{display:block; margin-top:5px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-300)}
.premios__lista p{margin-top:auto; padding-top:24px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.58)}

/* trilha do tempo, na horizontal */
.trilha{
  list-style:none; margin:clamp(20px,2.4vw,32px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--fio-escuro);
  border:1px solid var(--fio-escuro); border-radius:var(--r-painel); overflow:hidden;
}
.trilha li{
  position:relative; background:var(--navy-900); padding:clamp(22px,2.4vw,30px) clamp(18px,1.8vw,24px);
  display:flex; flex-direction:column; gap:12px;
}
.trilha li::before{
  content:''; width:11px; height:11px; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.75;
}
.trilha__q{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-300)}
.trilha__t{font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.76)}
@media (max-width:1000px){.premios{grid-template-columns:1fr} .trilha{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.trilha{grid-template-columns:1fr}}

/* ---------- conhecimento ---------- */
.conteudo__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px)}
.conteudo__card{
  background:#fff; border:1px solid var(--fio-claro); border-radius:var(--r-painel);
  padding:clamp(26px,2.8vw,36px); display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.conteudo__card:hover{border-color:var(--navy-300); transform:translateY(-3px)}
.conteudo__tipo{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-500); font-weight:500}
.conteudo__card h3{margin:18px 0 12px; font-size:22px; font-weight:400; letter-spacing:-.032em; line-height:1.18}
.conteudo__card p{font-size:14.5px; line-height:1.58; color:var(--n-600)}
.conteudo__card .btn-linha{margin-top:auto; padding-top:26px; align-self:flex-start; border-bottom:0}
.conteudo__card .btn-linha span{border-bottom:1px solid var(--fio-claro); padding-bottom:4px}
@media (max-width:880px){.conteudo__grid{grid-template-columns:1fr}}

/* ---------- redes ---------- */
.redes__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(36px,4vw,56px)}
.rede{
  position:relative; overflow:hidden;
  background:var(--navy-900); border:1px solid var(--fio-escuro); border-radius:var(--r-painel);
  padding:clamp(26px,2.8vw,36px); display:flex; flex-direction:column; gap:10px; min-height:186px;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.rede:hover{border-color:rgba(145,191,232,.4); transform:translateY(-3px)}
.rede > *{position:relative}
.rede b{font-size:19px; font-weight:400; letter-spacing:-.025em; color:#fff}
.rede span{font-size:14px; color:rgba(255,255,255,.58)}
.rede em{font-style:normal; margin-top:auto; padding-top:22px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--acento); display:inline-flex; align-items:center; gap:8px}
@media (max-width:780px){.redes__grid{grid-template-columns:1fr}}

/* ---------- wizard / formulário ---------- */
.form__wrap{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(30px,5vw,80px); align-items:start}
.checklist{margin:34px 0 0; padding:0; list-style:none; display:grid; gap:13px}
.checklist li{display:grid; grid-template-columns:18px 1fr; gap:12px; font-size:15px; color:var(--n-600); line-height:1.45}
.checklist svg{width:16px; height:16px; margin-top:.24em; color:var(--navy-500)}

.wizard{background:#fff; border:1px solid var(--fio-claro); border-radius:var(--r-painel); overflow:hidden}
.wizard__topo{display:flex; align-items:center; justify-content:space-between; padding:20px clamp(22px,2.6vw,34px); border-bottom:1px solid var(--fio-claro)}
.wizard__topo span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--n-500); font-weight:500}
.wizard__barra{height:2px; background:var(--navy-100)}
.wizard__barra i{display:block; height:100%; width:33.33%; background:var(--navy-500); transition:width .5s var(--ease)}
.wizard__corpo{padding:clamp(26px,3vw,40px)}
.etapa{display:none}
.etapa.ativa{display:block; animation:entrar .45s var(--ease)}
@keyframes entrar{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.etapa h3{font-size:clamp(22px,2.1vw,28px); font-weight:400; letter-spacing:-.032em; margin-bottom:10px}
.etapa > p{font-size:14.5px; line-height:1.55; color:var(--n-600); margin-bottom:26px; max-width:52ch}

.escolhas{display:grid; gap:10px}
.escolha{
  display:grid; grid-template-columns:1fr 18px; align-items:center; gap:14px; text-align:left;
  padding:17px 20px; border:1px solid var(--fio-claro); border-radius:14px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.escolha:hover{border-color:var(--navy-300)}
.escolha b{display:block; font-size:15.5px; font-weight:500; letter-spacing:-.01em}
.escolha small{display:block; margin-top:4px; font-size:13px; color:var(--n-600); line-height:1.4}
.escolha i{width:16px; height:16px; border:1px solid var(--n-400); border-radius:50%; transition:all .3s var(--ease)}
.escolha.sel{border-color:var(--navy-900); background:var(--navy-50)}
.escolha.sel i{border-color:var(--navy-900); background:var(--navy-900); box-shadow:inset 0 0 0 3px #fff}
.escolhas--faixa{grid-template-columns:1fr 1fr}
@media (max-width:520px){.escolhas--faixa{grid-template-columns:1fr}}

.campo{margin-bottom:20px}
.campo label{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--n-600); margin-bottom:9px; font-weight:500}
.campo input{
  width:100%; padding:14px 2px; border:0; border-bottom:1px solid var(--fio-claro);
  background:transparent; font:inherit; font-size:16px; color:var(--navy-900); border-radius:0;
  transition:border-color .3s var(--ease);
}
.campo input:focus{outline:0; border-bottom-color:var(--navy-500)}
.campo input::placeholder{color:var(--n-400)}
.campo.erro input{border-bottom-color:#C0392B}
.campo .msg{display:none; margin-top:8px; font-size:12.5px; color:#C0392B}
.campo.erro .msg{display:block}
.consent{display:flex; gap:12px; align-items:flex-start; margin:24px 0 4px; font-size:13px; line-height:1.5; color:var(--n-600)}
/* .consent nasceu para caixa de seleção + texto. Num <p> com link dentro, o flex
   transformava o link em item ao lado e o texto colidia com o botão. */
p.consent{display:block}
.consent input{width:16px; height:16px; margin-top:2px; accent-color:var(--navy-900); flex:none}
.wizard__acoes{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap}
.wizard__acoes .btn{flex:1 1 auto; min-width:140px}

.sucesso h3{margin-bottom:12px}
.resumo{margin:26px 0; border-top:1px solid var(--fio-claro)}
.resumo div{display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--fio-claro); font-size:14.5px}
.resumo dt{color:var(--n-600)} .resumo dd{margin:0; font-weight:500; text-align:right}

/* ---------- contato ---------- */
.canais{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-bottom:clamp(38px,4.4vw,62px)}
.canal{
  position:relative; overflow:hidden;
  background:var(--navy-900); border:1px solid var(--fio-escuro); border-radius:var(--r-painel);
  padding:clamp(24px,2.6vw,32px); transition:border-color .4s var(--ease)
}
.canal:hover{border-color:rgba(145,191,232,.4)}
.canal > *{position:relative}
.canal span{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300); margin-bottom:12px}
.canal b{font-size:clamp(16px,1.5vw,21px); font-weight:300; letter-spacing:-.028em; color:#fff; display:block; overflow-wrap:anywhere; line-height:1.25}
.escritorios{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,32px)}
.escritorio{border-top:1px solid var(--fio-escuro); padding-top:20px}
.escritorio b{display:block; font-size:17px; font-weight:400; letter-spacing:-.02em; color:#fff; margin-bottom:9px}
.escritorio p{font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.58)}
@media (max-width:880px){.canais{grid-template-columns:1fr} .escritorios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.escritorios{grid-template-columns:1fr}}

/* ---------- rodapé ---------- */
.rodape{background:var(--navy-950); color:#fff; padding:clamp(56px,6vw,88px) 0 32px; border-top:1px solid var(--fio-escuro)}
.rodape__topo{display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,44px); padding-bottom:clamp(38px,4.4vw,62px)}
.rodape__marca img{height:26px; margin-bottom:20px}
.rodape__marca p{font-size:14px; line-height:1.6; color:rgba(255,255,255,.55); max-width:34ch}
.rodape__col h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300); font-weight:500; margin:0 0 16px}
.rodape__col a{display:block; font-size:14.5px; color:rgba(255,255,255,.7); padding:6px 0; transition:color .3s var(--ease)}
.rodape__col a:hover{color:var(--acento)}
.rodape__legal{border-top:1px solid var(--fio-escuro); padding-top:26px; display:grid; gap:18px}
.rodape__legal p{font-size:12.5px; line-height:1.62; color:rgba(255,255,255,.4); max-width:100ch}
.rodape__base{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4)}
.rodape__base a:hover{color:var(--acento)}
@media (max-width:880px){.rodape__topo{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rodape__topo{grid-template-columns:1fr}}

/* ---------- whatsapp flutuante ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:70; width:54px; height:54px; border-radius:50%;
  background:var(--navy-900); border:1px solid var(--fio-escuro);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 34px rgba(5,15,31,.4); transition:transform .35s var(--ease), background .35s var(--ease);
}
.wa:hover{transform:translateY(-3px); background:var(--navy-700)}
.wa svg{width:25px; height:25px; fill:#fff}

/* ---------- revelar ao rolar ---------- */
.rev{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rev.vis{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1 !important; transform:none !important}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ==========================================================================
   Assinaturas traduzidas do avel.me
   ========================================================================== */

/* --- 1. revelação palavra a palavra (o momento da página) --- */
.revelar .p{
  display:inline-block; opacity:0;
  transform:translateY(1.1em) skewY(4deg); filter:blur(6px);
  transition:opacity 1200ms cubic-bezier(.2,.75,.2,1),
             transform 1200ms cubic-bezier(.2,.75,.2,1),
             filter 1200ms cubic-bezier(.2,.75,.2,1);
  transition-delay:calc(var(--p) * 80ms);
}
.revelar.vis .p{opacity:1; transform:none; filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .revelar .p{opacity:1 !important; transform:none !important; filter:none !important; transition:none}
}

/* --- 2. dropdown do ecossistema na nav --- */
.nav__drop{position:relative}
.nav__drop > .nav__link{display:inline-flex; align-items:center; gap:7px}
.nav__drop > .nav__link svg{transition:transform .3s var(--ease)}
.nav__drop:hover > .nav__link svg,.nav__drop:focus-within > .nav__link svg{transform:rotate(180deg)}
.nav__painel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px);
  display:flex; gap:8px; padding:12px; border-radius:22px;
  border:1px solid var(--fio-escuro); background:rgba(5,15,31,.92);
  backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  /* fecha com atraso: um deslize do ponteiro nao pode derrubar o painel */
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  transition-delay:.45s;
}
/* ponte invisivel cobrindo o vao entre a capsula e o painel.
   sem ela o ponteiro atravessa zona morta e o hover cai no meio do caminho. */
.nav__painel::before{
  content:''; position:absolute; left:0; right:0; top:-18px; height:18px;
}
.nav__drop:hover .nav__painel,.nav__drop:focus-within .nav__painel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.nav__marca{
  display:flex; align-items:center; gap:11px; padding:14px 18px; border-radius:14px;
  white-space:nowrap; transition:background .3s var(--ease);
}
.nav__marca:hover{background:rgba(255,255,255,.07)}
.nav__marca img{height:17px; width:auto; flex:none}
.nav__marca b{font-size:14px; font-weight:400; color:#fff; letter-spacing:-.015em}
.nav__marca small{display:block; margin-top:3px; font-size:11.5px; color:rgba(255,255,255,.5)}
@media (max-width:980px){
  .nav__painel{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    flex-direction:column; gap:0; padding:0 0 0 2px; background:none; border:0;
    backdrop-filter:none; box-shadow:none;
  }
  .nav__drop{width:100%}
  .nav__drop > .nav__link svg{display:none}
  .nav__marca{padding:9px 0; gap:10px}
  .nav__marca img{height:14px}
  .nav__marca b{font-size:16px; color:rgba(255,255,255,.72)}
  .nav__marca small{display:none}
}

/* --- 3. banda full-bleed com cartão de vidro --- */
.banda{position:relative; min-height:clamp(420px,52vw,560px); display:flex; align-items:center; overflow:hidden}
.banda__foto{position:absolute; inset:0; z-index:0}
.banda__foto img{width:100%; height:100%; object-fit:cover}
.banda::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(5,15,31,.82) 0%,rgba(5,15,31,.7) 45%,rgba(5,15,31,.94) 100%);
}
.banda .env{position:relative; z-index:2; display:flex; justify-content:center}
.vidro{
  max-width:580px; width:100%; padding:clamp(28px,3.2vw,42px); border-radius:26px;
  border:1px solid rgba(255,255,255,.14); background:rgba(10,33,64,.42);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.vidro::before{
  content:''; position:absolute; top:0; left:22%; right:22%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
}
.vidro h2{font-size:clamp(24px,2.6vw,36px); font-weight:300; letter-spacing:-.038em; line-height:1.1; margin-bottom:16px}
.vidro p{font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.76); max-width:44ch; margin-inline:auto}
.vidro .btn{margin-top:28px}

/* --- 4. costura de luz entre painéis --- */
.costura{position:relative}
.costura::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(62%,780px); height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(145,191,232,.42),transparent);
}

/* --- Origem Capital: placa de marca no lugar da foto (sub-marca sem site proprio) --- */
.eco__placa{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/2; border-radius:var(--r-painel); overflow:hidden;
  background:var(--navy-900); border:1px solid rgba(143,214,171,.22);
}
.eco__placa::before{
  content:''; position:absolute; left:50%; top:50%; width:120%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle at center, rgba(143,214,171,.14) 0%, transparent 62%);
}
.eco__marcada{position:relative}
.eco__marcada::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(5,15,31,.86));
}
/* os tres selos entram com a MESMA altura optica, nao a mesma largura:
   o lockup da Invest e bem mais longo que o da Capital */
.eco__selo{
  position:absolute; left:clamp(20px,2.2vw,28px); bottom:clamp(20px,2.2vw,28px); z-index:2;
  display:block; line-height:0;
}
.eco__selo img{
  height:clamp(19px,1.95vw,26px); width:auto; max-width:min(74vw,340px);
  aspect-ratio:auto; object-fit:contain; transform:none !important;
}

/* --- checklist do card de consorcio dentro do cartao de vidro --- */
.vidro__itens{
  list-style:none; margin:24px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.vidro__itens li{
  padding:8px 16px; border-radius:var(--r-pill); font-size:13.5px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
}


/* --- zoom das fotos de fundo conforme o scroll --- */
[data-zoom]{
  will-change:transform;
  transform:scale(var(--z,1));
  transform-origin:center center;
}
@media (prefers-reduced-motion:reduce){
  [data-zoom]{transform:none !important}
  .marquee__fita.rodando{animation:none}
}

/* --- provas curtas dentro de uma linha do ecossistema --- */
.eco__provas{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.eco__provas li{
  position:relative; padding-left:22px; font-size:14.5px; line-height:1.45; color:var(--n-600);
}
.eco__provas li::before{
  content:''; position:absolute; left:0; top:.3em; width:11px; height:11px;
  background:url('simbolo-navy.png') center/contain no-repeat;
}

.eco__provas a{border-bottom:1px solid var(--fio-claro); transition:border-color .3s var(--ease)}
.eco__provas a:hover{border-color:var(--navy-500); color:var(--navy-500)}

/* ==========================================================================
   Páginas internas de solução
   ========================================================================== */

.hero-int{
  position:relative; min-height:clamp(520px,64vh,660px); display:flex; align-items:flex-end;
  background:var(--navy-950); color:#fff; overflow:hidden;
  padding:clamp(128px,15vh,168px) 0 clamp(48px,6vw,80px);
}
.hero-int__foto{position:absolute; inset:0; z-index:0}
.hero-int__foto img{width:100%; height:100%; object-fit:cover; opacity:.62}
.hero-int__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(5,15,31,.88) 0%,rgba(5,15,31,.42) 40%,rgba(5,15,31,.95) 100%),
    linear-gradient(90deg,rgba(5,15,31,.9) 0%,rgba(5,15,31,.5) 52%,rgba(5,15,31,.12) 100%);
}
.hero-int__in{position:relative; z-index:2; width:100%}
.hero-int h1{margin:22px 0 0; max-width:16ch; font-size:clamp(38px,5.4vw,80px); line-height:.98; letter-spacing:-.045em; font-weight:300; text-wrap:balance}
.hero-int__sub{margin-top:22px; max-width:52ch; color:rgba(255,255,255,.76)}
.hero-int__acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* trilha de navegacao */
.migalha{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.5)}
.migalha a{transition:color .3s var(--ease)}
.migalha a:hover{color:var(--acento)}
.migalha i{font-style:normal; width:8px; height:8px; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.5; flex:none}

/* argumento em duas colunas */
.argumento{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(26px,5vw,76px); align-items:start}
.argumento__texto p + p{margin-top:20px}
@media (max-width:880px){.argumento{grid-template-columns:1fr}}

/* o que esta incluido */
.inclui{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,20px)}
.inclui__item{
  background:var(--navy-900); border:1px solid var(--fio-escuro); border-radius:var(--r-painel);
  padding:clamp(24px,2.6vw,34px); position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.inclui__item::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(145,191,232,.18), transparent 68%);
  transition:opacity .45s var(--ease);
}
.inclui__item:hover{border-color:rgba(145,191,232,.4); transform:translateY(-3px)}
.inclui__item:hover::before{opacity:1}
.inclui__item > *{position:relative}
.inclui__item i{display:block; width:13px; height:13px; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.85}
.inclui__item h3{margin:18px 0 10px; font-size:20px; font-weight:400; letter-spacing:-.028em; color:#fff}
.inclui__item p{font-size:14.5px; line-height:1.58; color:rgba(255,255,255,.64)}
@media (max-width:760px){.inclui{grid-template-columns:1fr}}

/* como funciona, em tres passos */
.passos{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--fio-claro); border:1px solid var(--fio-claro); border-radius:var(--r-painel); overflow:hidden}
.passo{background:#fff; padding:clamp(26px,2.8vw,38px)}
.passo__n{font-size:11.5px; letter-spacing:.14em; color:var(--navy-500); font-weight:500}
.passo h3{margin:16px 0 11px; font-size:22px; font-weight:400; letter-spacing:-.03em}
.passo p{font-size:14.5px; line-height:1.58; color:var(--n-600)}
@media (max-width:860px){.passos{grid-template-columns:1fr}}

/* outras solucoes */
.outras{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px)}
.outra{
  border:1px solid var(--fio-claro); border-radius:var(--r-painel); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; background:#fff;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.outra:hover{border-color:var(--navy-300); transform:translateY(-3px)}
.outra i{display:block; width:12px; height:12px; background:url('simbolo-navy.png') center/contain no-repeat}
.outra h3{margin:16px 0 9px; font-size:19px; font-weight:400; letter-spacing:-.028em}
.outra p{font-size:14px; line-height:1.5; color:var(--n-600)}
.outra em{font-style:normal; margin-top:auto; padding-top:20px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-500)}
@media (max-width:860px){.outras{grid-template-columns:1fr}}

/* faixa final de conversa */
.fechamento{background:var(--navy-900); color:#fff; padding:clamp(64px,7vw,110px) 0; text-align:center}
.fechamento h2{font-size:clamp(28px,3.4vw,50px); font-weight:300; letter-spacing:-.04em; line-height:1.08; max-width:20ch; margin:0 auto 18px; text-wrap:balance}
.fechamento p{max-width:52ch; margin:0 auto; color:rgba(255,255,255,.7); font-size:16.5px; line-height:1.55}
.fechamento .hero__acoes{justify-content:center}

/* aviso de risco especifico da pagina */
.aviso-risco{
  margin-top:clamp(34px,4vw,54px); padding:22px 26px; border-left:2px solid var(--navy-300);
  background:var(--navy-50); font-size:13.5px; line-height:1.6; color:var(--n-600);
}
.escuro .aviso-risco{background:rgba(255,255,255,.05); border-left-color:var(--acento); color:rgba(255,255,255,.66)}

/* ==========================================================================
   Sites de marca. O acento vem da sub-marca, o resto do sistema nao muda.
   ========================================================================== */
body[data-marca]{--acento:var(--marca, #91BFE8)}

.marca-lockup{display:block; line-height:0; margin-bottom:clamp(20px,2.4vw,30px)}
.marca-lockup img{height:clamp(24px,2.4vw,34px); width:auto}

.numeros-marca{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--fio-escuro); border-block:1px solid var(--fio-escuro)}
.numeros-marca > div{background:var(--navy-900); padding:clamp(28px,3.2vw,44px) clamp(20px,2.4vw,32px)}
.numeros-marca b{display:block; font-size:clamp(26px,3.2vw,44px); font-weight:300; letter-spacing:-.04em; color:var(--acento); line-height:1}
.numeros-marca span{display:block; margin-top:12px; font-size:13.5px; color:rgba(255,255,255,.62); line-height:1.4}
.numeros-marca__nota{padding:clamp(22px,2.6vw,32px) 0 0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.5); max-width:88ch}
@media (max-width:760px){.numeros-marca{grid-template-columns:1fr}}

/* matriz numerada, o gesto dos sub-sites da avel */
.matriz{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--fio-claro); border:1px solid var(--fio-claro); border-radius:var(--r-painel); overflow:hidden}
.matriz__item{background:#fff; padding:clamp(26px,2.8vw,38px); transition:background .4s var(--ease)}
.matriz__item:hover{background:var(--navy-50)}
.matriz__n{font-size:11.5px; letter-spacing:.14em; color:var(--navy-500); font-weight:500}
.matriz__item h3{margin:16px 0 11px; font-size:21px; font-weight:400; letter-spacing:-.03em}
.matriz__item p{font-size:14.5px; line-height:1.58; color:var(--n-600)}
@media (max-width:960px){.matriz{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.matriz{grid-template-columns:1fr}}

/* prova da marca: lista + foto */
.prova{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:stretch}
.prova__foto{margin:0; border-radius:var(--r-painel); overflow:hidden; background:var(--navy-800)}
.prova__foto img{width:100%; height:100%; min-height:clamp(280px,32vw,420px); object-fit:cover}
.prova__lista{display:flex; flex-direction:column; background:var(--navy-950); border:1px solid var(--fio-escuro); border-radius:var(--r-painel); padding:clamp(26px,2.8vw,38px)}
.prova__lista > div{display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; padding:20px 0; border-bottom:1px solid var(--fio-escuro); font-size:16px; line-height:1.4; color:#fff}
.prova__lista > div:first-of-type{padding-top:0}
.prova__lista i{font-style:normal; width:14px; height:14px; margin-top:.16em; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.9}
.prova__lista small{display:block; margin-top:5px; font-size:12.5px; line-height:1.5; letter-spacing:.02em; color:rgba(255,255,255,.55)}
.prova__lista p{margin-top:auto; padding-top:24px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.58)}
@media (max-width:1000px){.prova{grid-template-columns:1fr}}

/* bloco regulatorio do rodape */
.regulatorio{border-top:1px solid var(--fio-escuro); padding-top:clamp(30px,3.4vw,44px); margin-top:clamp(30px,3.4vw,44px)}
.regulatorio__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,32px)}
.regulatorio h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); font-weight:500; margin:0 0 12px}
.regulatorio p{font-size:13px; line-height:1.6; color:rgba(255,255,255,.58)}
.regulatorio__razao{margin-bottom:clamp(24px,2.6vw,34px); font-size:14.5px; color:rgba(255,255,255,.78); letter-spacing:-.01em}
@media (max-width:900px){.regulatorio__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.regulatorio__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Evento. Mesmo sistema da marca, com uma camada de leitura de tecnologia:
   a ONDA (que é o tema e também o gesto do símbolo) e rótulos monoespaçados.
   ========================================================================== */
:root{--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}

.ev-mono{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase}

.ev-hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--navy-950); color:#fff; overflow:hidden; padding:150px 0 90px;
}
/* malha de pontos: textura de dado, discreta */
.ev-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(145,191,232,.16) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}
.ev-ondas{position:absolute; left:0; right:0; bottom:0; z-index:1; height:62vh; width:100%; pointer-events:none}
.ev-ondas path{fill:none; stroke:var(--acento); stroke-width:1}
.ev-hero__in{position:relative; z-index:2; width:100%}
.ev-hero__grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,72px); align-items:center}
.ev-hero h1{
  margin:24px 0 0; font-size:clamp(40px,6.2vw,96px); line-height:.98; letter-spacing:-.045em;
  font-weight:300; max-width:14ch; text-wrap:balance;
}
.ev-hero__sub{margin-top:24px; max-width:46ch; color:rgba(255,255,255,.74)}
.ev-hero__acoes{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}

/* cartao de contagem */
.ev-card{
  border:1px solid var(--fio-escuro); border-radius:var(--r-painel); padding:clamp(24px,2.6vw,34px);
  background:rgba(10,33,64,.5); backdrop-filter:blur(16px);
}
.ev-card__topo{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--fio-escuro)}
.ev-card__topo b{font-size:16px; font-weight:400; letter-spacing:-.02em}
.ev-card dl{margin:18px 0 0; display:grid; gap:12px}
.ev-card dl div{display:flex; justify-content:space-between; gap:16px; font-size:14px}
.ev-card dt{color:rgba(255,255,255,.55)}
.ev-card dd{margin:0; color:#fff; font-weight:400}
.ev-conta{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--fio-escuro)}
.ev-conta div{text-align:center}
.ev-conta b{display:block; font-family:var(--mono); font-size:clamp(22px,2.4vw,30px); font-weight:400; color:var(--acento); line-height:1; font-variant-numeric:tabular-nums}
.ev-conta span{display:block; margin-top:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45)}
@media (max-width:960px){.ev-hero__grid{grid-template-columns:1fr}}

/* as duas ondas de conteudo */
.ev-onda{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--fio-escuro); border:1px solid var(--fio-escuro); border-radius:var(--r-painel); overflow:hidden}
.ev-onda > div{background:var(--navy-900); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:12px}
.ev-onda__n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--acento)}
.ev-onda h3{font-size:20px; font-weight:400; letter-spacing:-.028em; color:#fff}
.ev-onda p{font-size:14px; line-height:1.55; color:rgba(255,255,255,.62)}

/* cidades */
.ev-cidades{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px)}
.ev-cidade{
  border:1px solid var(--fio-claro); border-radius:var(--r-painel); padding:clamp(24px,2.6vw,32px);
  background:#fff; display:flex; flex-direction:column; gap:10px;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.ev-cidade:hover{border-color:var(--navy-300); transform:translateY(-3px)}
.ev-cidade b{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--navy-500)}
.ev-cidade h3{font-size:23px; font-weight:400; letter-spacing:-.03em; margin:6px 0 0}
.ev-cidade span{font-size:14px; color:var(--n-600)}
.ev-cidade em{font-style:normal; margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-500)}
@media (max-width:900px){.ev-cidades{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.ev-cidades{grid-template-columns:1fr}}

/* formulario do evento */
.ev-form{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,76px); align-items:start}
.ev-form__caixa{background:#fff; color:var(--navy-900); border:1px solid var(--fio-claro); border-radius:var(--r-painel); padding:clamp(26px,3vw,40px)}
/* sem a cor, o h3 herdava o branco da seção escura e sumia dentro da caixa branca */
.ev-form__caixa h3{font-size:clamp(21px,2vw,26px); font-weight:400; letter-spacing:-.03em}
.ev-form__caixa > p{font-size:14.5px; line-height:1.55; color:var(--n-600); margin:10px 0 26px}
.campo select{
  width:100%; padding:14px 2px; border:0; border-bottom:1px solid var(--fio-claro);
  background:transparent; font:inherit; font-size:16px; color:var(--navy-900); border-radius:0;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6F76' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}
.campo select:focus{outline:0; border-bottom-color:var(--navy-500)}
.ev-ok{display:none; padding:26px; background:var(--navy-50); border-left:2px solid var(--navy-500); font-size:15px; line-height:1.55}
.ev-ok.ver{display:block}
@media (max-width:880px){.ev-form{grid-template-columns:1fr}}

/* as ancoras nao podem entrar por baixo da nav */
[id]{scroll-margin-top:104px}

/* ==========================================================================
   Vídeo de fundo. A foto continua sendo a base: o vídeo entra por cima,
   só onde faz sentido carregar, e some sozinho se não puder tocar.
   ========================================================================== */
.fundo-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s linear; pointer-events:none;
  will-change:opacity;
}
.fundo-video.tocando{opacity:1}
/* no hero a foto leva o mesmo tratamento de opacidade, o vídeo herda dela */
.hero__foto .fundo-video{opacity:0}
.hero__foto .fundo-video.tocando{opacity:.78}
.hero-int__foto .fundo-video.tocando{opacity:.62}
@media (prefers-reduced-motion:reduce){.fundo-video{display:none}}

/* ==========================================================================
   Blocos de profundidade das marcas
   ========================================================================== */

/* princípios: o que rege a casa */
.principios{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--fio-escuro); border:1px solid var(--fio-escuro); border-radius:var(--r-painel); overflow:hidden}
.principio{background:var(--navy-900); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:12px}
.principio i{display:block; width:13px; height:13px; background:url('simbolo-branco.png') center/contain no-repeat; opacity:.85}
.principio h3{font-size:19px; font-weight:400; letter-spacing:-.028em; color:#fff; line-height:1.2}
.principio p{font-size:14px; line-height:1.55; color:rgba(255,255,255,.62)}
@media (max-width:1000px){.principios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.principios{grid-template-columns:1fr}}

/* pilares numerados, com régua */
.marcos{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px)}
.marco-p{border-top:1px solid var(--fio-claro); padding-top:22px}
.escuro .marco-p{border-top-color:var(--fio-escuro)}
.marco-p b{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--navy-500)}
.escuro .marco-p b{color:var(--acento)}
.marco-p h3{margin:16px 0 10px; font-size:clamp(21px,2vw,27px); font-weight:300; letter-spacing:-.035em}
.marco-p p{font-size:14.5px; line-height:1.58; color:var(--n-600)}
.escuro .marco-p p{color:rgba(255,255,255,.62)}
@media (max-width:900px){.marcos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.marcos{grid-template-columns:1fr}}

/* para quem é, e para quem não é */
.paraquem{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px)}
.paraquem__lado{border:1px solid var(--fio-claro); border-radius:var(--r-painel); padding:clamp(26px,2.8vw,38px); background:#fff}
.paraquem__lado.nao{background:var(--papel)}
.paraquem__lado h3{font-size:20px; font-weight:400; letter-spacing:-.028em; margin-bottom:20px}
.paraquem__lado ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.paraquem__lado li{position:relative; padding-left:26px; font-size:15px; line-height:1.5; color:var(--n-600)}
.paraquem__lado li::before{
  content:''; position:absolute; left:0; top:.32em; width:12px; height:12px;
  background:url('simbolo-navy.png') center/contain no-repeat;
}
.paraquem__lado.nao li::before{
  background:none; border-top:1.5px solid var(--n-500); top:.66em; height:0; width:11px;
}
@media (max-width:800px){.paraquem{grid-template-columns:1fr}}

/* perguntas frequentes */
.faq{border-top:1px solid var(--fio-claro)}
.escuro .faq{border-top-color:var(--fio-escuro)}
.faq details{border-bottom:1px solid var(--fio-claro)}
.escuro .faq details{border-bottom-color:var(--fio-escuro)}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-size:clamp(17px,1.55vw,20px); font-weight:400; letter-spacing:-.022em; line-height:1.35;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy-500)}
.escuro .faq summary:hover{color:var(--acento)}
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-6px;
  background:url('simbolo-navy.png') center/contain no-repeat;
  transition:transform .35s var(--ease); opacity:.7;
}
.escuro .faq summary::after{background-image:url('simbolo-branco.png')}
.faq details[open] summary::after{transform:rotate(180deg); opacity:1}
.faq details[open] summary{color:var(--navy-500)}
.escuro .faq details[open] summary{color:var(--acento)}
.faq__r{padding:0 44px 26px 0; font-size:15.5px; line-height:1.62; color:var(--n-600); max-width:78ch}
.escuro .faq__r{color:rgba(255,255,255,.66)}

/* documentos e registro */
.docs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--fio-escuro); border:1px solid var(--fio-escuro); border-radius:var(--r-painel); overflow:hidden}
.doc{
  background:var(--navy-900); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:9px;
  transition:background .35s var(--ease);
}
a.doc:hover{background:var(--navy-800)}
.doc b{font-size:15.5px; font-weight:400; color:#fff; letter-spacing:-.015em; line-height:1.3}
.doc span{font-size:13px; line-height:1.5; color:rgba(255,255,255,.55)}
.doc em{font-style:normal; margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--acento)}
@media (max-width:900px){.docs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.docs{grid-template-columns:1fr}}

/* ==========================================================================
   Landings de anúncio: quiz, simulador e resultado
   ========================================================================== */

/* faixa de condições, logo abaixo do hero */
.condicoes{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--fio-escuro); border-block:1px solid var(--fio-escuro)}
.condicoes > div{background:var(--navy-950); padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,30px)}
.condicoes b{display:block; font-size:clamp(24px,3vw,42px); font-weight:300; letter-spacing:-.04em; line-height:1; color:var(--acento)}
.condicoes span{display:block; margin-top:12px; font-size:13px; line-height:1.45; color:rgba(255,255,255,.6)}
.condicoes sup{font-size:.55em; color:rgba(255,255,255,.5)}
@media (max-width:820px){.condicoes{grid-template-columns:repeat(2,1fr)}}

/* quiz: mesma família do wizard, com múltipla escolha */
.quiz__opcoes{display:grid; gap:10px}
.quiz__op{
  display:grid; grid-template-columns:1fr 20px; align-items:center; gap:14px; text-align:left;
  padding:16px 20px; border:1px solid var(--fio-claro); border-radius:14px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.quiz__op:hover{border-color:var(--navy-300)}
.quiz__op b{display:block; font-size:15.5px; font-weight:500; letter-spacing:-.01em}
.quiz__op small{display:block; margin-top:4px; font-size:13px; color:var(--n-600); line-height:1.4}
.quiz__op i{width:18px; height:18px; border:1px solid var(--n-400); border-radius:5px; position:relative; transition:all .25s var(--ease)}
.quiz__op i::after{
  content:''; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg) scale(0); transition:transform .2s var(--ease);
}
.quiz__op.sel{background:var(--navy-50); border-color:var(--navy-900)}
.quiz__op.sel i{background:var(--navy-900); border-color:var(--navy-900)}
.quiz__op.sel i::after{transform:rotate(45deg) scale(1)}
.quiz__op--radio i{border-radius:50%}
.quiz__op--radio.sel i{box-shadow:inset 0 0 0 3px #fff}
.quiz__op--radio i::after{display:none}

/* resultado do raio-x */
.resultado{display:grid; gap:12px; margin:24px 0 4px}
.resultado__linha{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:18px 20px; border-radius:12px; background:var(--navy-50); border:1px solid var(--fio-claro);
}
.resultado__linha i{width:13px; height:13px; margin-top:.28em; background:url('simbolo-navy.png') center/contain no-repeat}
.resultado__linha b{display:block; font-size:15.5px; font-weight:500; letter-spacing:-.012em}
.resultado__linha span{display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--n-600)}

/* simulador */
.sim{border:1px solid var(--fio-escuro); border-radius:var(--r-painel); background:var(--navy-900); padding:clamp(26px,3vw,40px)}
.sim__topo{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--fio-escuro)}
.sim__topo b{font-size:clamp(19px,2vw,24px); font-weight:300; letter-spacing:-.03em; color:#fff}
.sim__campo{margin:24px 0}
.sim__campo label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px}
.sim__faixas{display:flex; flex-wrap:wrap; gap:9px}
.sim__faixa{
  padding:11px 18px; border-radius:var(--r-pill); border:1px solid var(--fio-escuro);
  font-size:14px; color:rgba(255,255,255,.72); transition:all .3s var(--ease);
}
.sim__faixa:hover{border-color:rgba(145,191,232,.5)}
.sim__faixa.sel{background:var(--acento); border-color:var(--acento); color:var(--navy-900); font-weight:500}
.sim__linhas{display:grid; gap:1px; background:var(--fio-escuro); border:1px solid var(--fio-escuro); border-radius:12px; overflow:hidden}
.sim__linha{background:var(--navy-950); padding:18px 20px; display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.sim__linha span{font-size:14.5px; color:rgba(255,255,255,.7)}
.sim__linha b{font-family:var(--mono); font-size:clamp(16px,1.8vw,21px); font-weight:400; color:#fff; font-variant-numeric:tabular-nums}
.sim__linha.destaque{background:rgba(145,191,232,.1)}
.sim__linha.destaque b{color:var(--acento)}
.sim__nota{margin-top:18px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.5)}

/* tabela de rentabilidade do fundo */
.rent{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.rent th,.rent td{padding:15px 14px; text-align:right; border-bottom:1px solid var(--fio-escuro); font-size:14.5px}
.rent th:first-child,.rent td:first-child{text-align:left}
.rent thead th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acento); font-weight:400}
.rent td{color:rgba(255,255,255,.78)}
.rent tbody tr:last-child td{border-bottom:0}
.rent__wrap{overflow-x:auto; border:1px solid var(--fio-escuro); border-radius:var(--r-painel); padding:clamp(18px,2.2vw,28px); background:var(--navy-900)}

/* notas legais, corpo miúdo mas legível */
.notas{margin-top:clamp(30px,3.6vw,48px); padding-top:24px; border-top:1px solid var(--fio-escuro); display:grid; gap:12px}
.notas p{font-size:12.5px; line-height:1.65; color:rgba(255,255,255,.5); max-width:100ch}
.notas sup{color:var(--acento)}