/* ==========================================================================
   M2PAG — Design System
   Fontes: General Sans (display) + Inter (texto), conforme os PSDs.
   Frame de referência: 1440px · container 1250px
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --gold:        #E9C97A;
  --gold-hover:  #DFBA61;
  --gold-soft:   #F6EFDE;
  --gold-deep:   #967207;
  --gold-deep-2: #866718;
  --gold-ink:    #644D12;
  --gold-line:   #645735;
  --gold-dim:    #231E13;

  /* Marinho do manual da marca — a 2ª cor oficial, ao lado do ouro */
  --navy:    #040C33;

  /* Neutros */
  --black:   #000000;
  --ink:     #030712;
  --ink-2:   #0B0F19;
  --white:   #FFFFFF;
  --bg:      #F9F9F9;
  --surface: #FFFFFF;
  --surface-2:#F3F4F6;
  --surface-3:#EFEFEF;
  --line:    #E6E7EA;
  --line-2:  #D8DAE0;

  /* Texto */
  --text:      #111318;
  --text-2:    #3B3F46;
  --muted:     #696969;
  --muted-2:   #626262;
  --muted-dark:#B7B7B7;

  /* Sistema */
  --success: #1F9D55;
  --danger:  #C23A3A;
  --info:    #2563EB;

  /* Layout */
  --container: 1250px;
  --gutter: 24px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,18,24,.05), 0 1px 3px rgba(16,18,24,.06);
  --shadow:    0 6px 16px rgba(16,18,24,.06), 0 2px 6px rgba(16,18,24,.04);
  --shadow-lg: 0 24px 60px rgba(16,18,24,.10), 0 6px 18px rgba(16,18,24,.06);

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

  --topbar-h: 45px;
  --header-h: 68px;
  --header-h-stuck: 58px;

  --font-display: 'General Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Título de seção: um só tamanho para o site inteiro (o H1 do hero é a exceção) */
  --fs-section: clamp(26px, 20.06px + 1.524vw, 42px);

  --font-text: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:#241B00}

/* ---------- Base tipográfica ---------- */
.h-display,.h1,.h2,.h3,.h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.06;
  color:var(--text);
  overflow-wrap:break-word;
}
.h-display{font-size:clamp(30px, 8.46px + 5.524vw, 88px);line-height:1.0;text-transform:uppercase;letter-spacing:-.025em}
.h1{font-size:clamp(28px, 16.11px + 3.048vw, 60px);line-height:1.05;text-wrap:balance}
.h2{font-size:var(--fs-section);line-height:1.08}
.h3{font-size:clamp(22px, 14.94px + 1.81vw, 41px);line-height:1.12}
/* h2 que usa a escala .h3 também é título de seção */
h2.h3{font-size:var(--fs-section)}
.h4{font-size:clamp(18px, 15.03px + 0.762vw, 26px);line-height:1.2;letter-spacing:-.012em}

.lead{font-size:clamp(16px, 13.77px + 0.571vw, 22px);line-height:1.5;color:var(--muted)}
.body{font-size:clamp(16px, 14.51px + 0.381vw, 20px);line-height:1.6;color:var(--muted)}
.body-sm{font-size:clamp(15px, 13.89px + 0.286vw, 18px);line-height:1.6;color:var(--muted)}
.text-center{text-align:center}
.text-gold{color:var(--gold)}
.text-white{color:var(--white)}
.nowrap{white-space:nowrap}
/* quebra de linha só no desktop (segue as quebras do PSD) */
.br-lg{display:none}
@media (min-width:1025px){.br-lg{display:inline}}
/* e o par dela: quebra que só existe abaixo do desktop, para títulos que
   precisam de um desenho de linha diferente na tela estreita */
.br-sm{display:inline}
@media (min-width:1025px){.br-sm{display:none}}
/* trecho de texto que só o desktop mostra. O espaço antes da palavra mora
   DENTRO do span: sumindo o span, some o espaço junto e a frase fecha certo. */
.so-desk{display:none}
@media (min-width:761px){.so-desk{display:inline}}
/* ATENÇÃO ao escrever um <br class="br-lg">: ele some no celular, e um
   elemento com display:none não deixa espaço no lugar. Sem um espaço antes
   ou depois dele no HTML, as duas palavras ficam coladas na tela estreita. */
strong,b{font-weight:700;color:inherit}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
/* Respeita notch e cantos arredondados (viewport-fit=cover) */
@supports (padding:max(0px)){
  .container{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .footer{padding-bottom:max(44px, env(safe-area-inset-bottom))}
  .mobile-nav{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
    padding-bottom:max(40px, env(safe-area-inset-bottom));
  }
}
.section{padding-block:clamp(68px,8.8vw,132px)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--flush-top{padding-top:0}
.section--dark{background:var(--black);color:var(--white)}
.section--dark .h1,.section--dark .h2,.section--dark .h3,.section--dark .h4{color:var(--white)}
.section--dark .body,.section--dark .lead,.section--dark .body-sm{color:#C9CBD1}

/* --------------------------------------------------------------------------
   Ritmo vertical entre seções (vale para todas as páginas)

   1. Duas seções claras seguidas somariam padding-bottom + padding-top e
      abririam um vão do dobro do previsto. Sem troca de cor não existe
      fronteira para justificar isso: o respiro vem só de quem está acima.
   2. Quando a cor muda (claro -> escuro ou escuro -> claro) os dois respiros
      são mantidos de propósito: a virada de fundo pede mais ar.
   3. O hero é mais curto que uma seção comum, então a primeira seção de
      conteúdo recompõe o respiro com um padding próprio.
   -------------------------------------------------------------------------- */
.section:not(.section--dark) + .section:not(.section--dark){padding-top:0}
.hero + .section,.about-hero + .section{padding-top:clamp(40px,5.2vw,72px)}
.grid{display:grid;gap:clamp(24px,3vw,48px)}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Eyebrow (pílula de seção) ---------- */
.eyebrow{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;justify-content:center;gap:.35em;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--muted);
  font-size:12.5px;font-weight:400;letter-spacing:.005em;line-height:1.3;
}
.eyebrow b{font-weight:700;color:var(--muted);letter-spacing:-.005em}
/* a borda de 1px entra na altura: tira 1px do padding para bater com as demais */
.eyebrow--dark{background:var(--gold-dim);border:1px solid var(--gold-line);color:#D8CBA6;padding:5px 13px}
.eyebrow--dark b{color:var(--gold)}
.eyebrow--gold{background:var(--gold-soft);color:var(--gold-ink)}
.eyebrow--gold b{color:var(--gold-ink)}
.eyebrow--solid{background:var(--gold);color:#3A2C05}
.eyebrow--solid b{color:#3A2C05}

/* ---------- Botões ---------- */
.btn{
  --btn-bg:var(--gold);--btn-fg:#241B00;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;min-height:50px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--radius-pill);
  font-family:var(--font-text);font-size:15px;font-weight:700;letter-spacing:-.005em;
  line-height:1;text-align:center;cursor:pointer;white-space:nowrap;
  max-width:100%;-webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(150,114,7,.20)}
}
.btn:active{transform:translateY(0);opacity:.9}
.btn--gold{--btn-bg:var(--gold);--btn-fg:#241B00}
.btn--gold:hover{--btn-bg:var(--gold-hover)}
.btn--deep{--btn-bg:var(--gold-deep);--btn-fg:#FFF}
.btn--deep:hover{--btn-bg:var(--gold-deep-2);box-shadow:0 10px 24px rgba(150,114,7,.28)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--outline:hover{--btn-bg:var(--white);--btn-bd:var(--text);box-shadow:var(--shadow)}
.btn--outline-gold{--btn-bg:transparent;--btn-fg:var(--gold-ink);--btn-bd:var(--gold-deep)}
.btn--outline-gold:hover{--btn-bg:var(--gold-soft)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#FFF}
.btn--dark:hover{--btn-bg:#1A1F2B}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--muted);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bg:var(--white);--btn-fg:var(--text);--btn-bd:var(--text)}
.btn--sm{padding:10px 20px;min-height:36px;font-size:13px}
.btn--lg{padding:18px 34px;min-height:58px;font-size:16px}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:500;color:inherit;
  transition:gap .2s var(--ease)
}
.link-arrow:hover{gap:13px}
.link-arrow svg{width:17px;height:17px;flex:none}
.link-underline{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link-underline:hover{color:var(--gold-ink)}

/* ==========================================================================
   TOPBAR + HEADER
   ========================================================================== */
.topbar{background:var(--black);color:#EDEDED;font-size:14px;position:relative;z-index:60}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--topbar-h)}
.topbar__left{display:flex;align-items:center;gap:16px}
.topbar__support{display:inline-flex;align-items:center;gap:9px;color:#EDEDED;font-weight:500}
.topbar__support:hover{color:var(--gold)}
.topbar__support svg{width:17px;height:17px;flex:none}
.topbar__wpp{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--radius-pill);
  background:#0F1512;border:1px solid #21432C;color:#3FBE60;
  font-size:13px;font-weight:700;
}
.topbar__wpp:hover{background:#132018;border-color:#2F6640}
.topbar__wpp svg{width:15px;height:15px;flex:none}
.topbar__social{display:flex;align-items:center;gap:2px;margin-right:-8px}
.topbar__social li{display:flex}
.topbar__social a{width:34px;height:34px;display:grid;place-items:center;color:#C7C7C7;border-radius:50%;transition:color .18s var(--ease)}
.topbar__social a:hover{color:var(--white)}
.topbar__social svg{width:17px;height:17px}

.header{
  position:sticky;top:0;z-index:50;background:transparent;
  padding-top:0;                      /* vira o respiro do topo quando flutua */
  transition:padding-top .42s var(--ease);
}

/* Barra do header: quadrada e encostada no topo na primeira dobra;
   ao rolar, descola e vira um card flutuante de cantos arredondados. */
.header__bar{
  background:var(--white);
  border-bottom:1px solid transparent;
  border-radius:0;
  margin:0;
  transition:
    margin      .42s var(--ease),
    border-radius .42s var(--ease),
    box-shadow  .42s var(--ease),
    background-color .42s var(--ease),
    border-color .32s var(--ease);
}
.header.is-stuck{padding-top:16px}   /* mesmo respiro do Pipefy */
.header.is-stuck .header__bar{
  margin-inline:clamp(12px,1.2vw,18px);
  border-radius:22px;
  border-bottom-color:transparent;
  /* Vidro: só o retângulo branco fica translúcido — o texto e os botões
     são filhos, então continuam 100% opacos. O blur mais forte compensa
     a transparência extra e mantém a leitura firme sobre qualquer seção. */
  background:rgba(255,255,255,.62);
  /* brightness+contrast levantam o fundo antes do branco entrar: sobre as
     seções escuras a barra continua clara e o texto legível, sem precisar
     fechar a transparência. */
  backdrop-filter:saturate(170%) contrast(.62) brightness(1.5) blur(20px);
  -webkit-backdrop-filter:saturate(170%) contrast(.62) brightness(1.5) blur(20px);
  /* sombra leve, idêntica à do Pipefy */
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
/* Sem backdrop-filter (Firefox antigo) o translúcido viraria borrão ilegível. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-stuck .header__bar{background:rgba(255,255,255,.94)}
}
.header__inner{
  display:flex;align-items:center;gap:20px;
  height:var(--header-h);
  transition:height .42s var(--ease);
}
.header.is-stuck .header__inner{height:var(--header-h-stuck)}
.header.is-stuck .logo img{width:132px;transition:width .42s var(--ease)}
.logo img{transition:width .42s var(--ease)}
.logo img{width:149px}
.nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav a{
  padding:9px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:500;color:var(--text-2);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.is-active{background:var(--gold-soft);color:var(--gold-ink);font-weight:600}
.header__actions{display:flex;align-items:center;gap:10px}
/* flex em coluna, não grid: com `display:grid` cada traço virava uma linha da
   grade e eles se espalhavam pelos 44px do botão — era daí que vinha o vão
   grande. Em coluna, quem manda no espaçamento é a margem de 4,5px. */
.burger{display:none;width:44px;height:44px;margin-left:auto;border-radius:12px;
  flex-direction:column;align-items:center;justify-content:center}
.burger:hover{background:var(--surface-2)}
/* traços mais finos e mais juntos: 1,5px de espessura com 4,5px de vão deixa
   os centros a 6px um do outro — é esse 6 que o X usa para fechar certinho */
.burger span{display:block;width:21px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .18s var(--ease)}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;top:0;
  /* abaixo do header (z-index 50) de propósito: o menu abre por baixo dele e
     o botão continua à vista, virando um X */
  z-index:40;
  background:var(--white);
  padding:calc(var(--header-h) + 14px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;
  /* fechado: o painel só desliza 10px e some — nada de varrer a tela inteira */
  transform:translateY(-10px);opacity:0;visibility:hidden;
  transition:transform .2s ease-in, opacity .16s ease-in, visibility .16s;
  overflow-y:auto;
}
/* a abertura é um pouco mais lenta e com saída suave; o fechamento usa a
   transição de cima, mais curta — por isso as duas são declaradas separadas */
.mobile-nav.is-open{
  transform:none;opacity:1;visibility:visible;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .24s ease-out, visibility 0s;
}
/* o logo e o X repetidos dentro do painel não fazem mais falta: o header
   continua visível por cima dele */
.mobile-nav__top{display:none}
/* os itens entram em sequência, bem de leve */
.mobile-nav a.mnav-link,.mobile-nav__actions{
  opacity:0;transform:translateY(6px);
  transition:opacity .26s ease-out, transform .26s cubic-bezier(.22,1,.36,1);
}
.mobile-nav.is-open a.mnav-link,.mobile-nav.is-open .mobile-nav__actions{opacity:1;transform:none}
.mobile-nav.is-open a.mnav-link:nth-child(1){transition-delay:.05s}
.mobile-nav.is-open a.mnav-link:nth-child(2){transition-delay:.09s}
.mobile-nav.is-open a.mnav-link:nth-child(3){transition-delay:.13s}
.mobile-nav.is-open a.mnav-link:nth-child(4){transition-delay:.17s}
.mobile-nav.is-open a.mnav-link:nth-child(5){transition-delay:.21s}
.mobile-nav.is-open .mobile-nav__actions{transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav.is-open,
  .mobile-nav a.mnav-link,.mobile-nav__actions{transition-duration:.01s;transform:none}
}
.mobile-nav a.mnav-link{
  padding:16px 4px;font-family:var(--font-display);font-size:24px;font-weight:600;
  color:var(--text);border-bottom:1px solid var(--line)
}
.mobile-nav a.mnav-link.is-active{color:var(--gold-ink)}
/* os dois botões descem para o pé do painel; `margin-top:auto` só empurra
   quando sobra espaço — em tela curta ele vira zero e o painel rola, sem
   nunca encostar nos links de cima por causa do padding-top. */
.mobile-nav__actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:32px}

/* ==========================================================================
   HERO
   ========================================================================== */
/* O hero inteiro (pílula, título, texto, CTAs e imagem) precisa caber na
   primeira tela, inclusive em notebook de janela baixa. Por isso o respiro
   é curto e a imagem é limitada pela ALTURA da viewport, não pela largura. */
.hero{padding-block:clamp(24px,2.6vw,44px) clamp(28px,3.2vw,52px);overflow:hidden}
/* Enquanto o hero é de duas colunas, o respiro de cima acompanha a ALTURA da
   janela: desce o bloco quando sobra espaço e se recolhe em janela baixa, de
   modo que pílula, título, texto, CTAs e imagem continuem cabendo na 1ª tela. */
@media (min-width:1025px){
  .hero:not(.hero--split){padding-top:clamp(20px, 3.4vh, 44px)}
  /* o celular 3D é dimensionado pela ALTURA disponível, para caber inteiro na
     primeira tela junto com o texto, sem empurrar o bloco para baixo */
  .hero:not(.hero--split) .giro{width:min(45vw, 640px);max-height:86vh;margin-left:auto;transform:translateY(-5%)}
  /* Mesma ideia para as páginas internas cujo topo é uma seção comum:
     um respiro curto que cresce junto com a altura da janela. */
  .section--hero-top{padding-top:clamp(50px, calc(27.3vh - 103px), 130px)}
}
.hero__grid{
  /* o H1 quebra em quatro linhas curtas, então a coluna de texto pode ser mais
     estreita e o celular 3D da direita ganha espaço. */
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,2.4vw,36px);
}
.hero__content{max-width:790px}
/* só a home: coluna de texto do tamanho do título de duas linhas e o resto do
   espaço para o celular 3D */
.hero:not(.hero--split) .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.hero:not(.hero--split) .hero__content{max-width:640px}
/* Só a coluna de texto sobe. A grade centraliza as duas colunas uma pela
   outra, então encostar o texto no topo o aproxima do header sem mexer um
   pixel no celular 3D, que permanece centralizado. */
/* Respiro acima do bloco de texto, válido em QUALQUER largura: abaixo de
   1025px o hero empilha em uma coluna e o mesmo respiro afasta o texto do
   menu, sem mexer no celular, que ali já fica embaixo do texto. */
.hero:not(.hero--split) .hero__content{margin-top:clamp(24px,8vh,88px)}
@media (min-width:1025px){
  .hero:not(.hero--split) .hero__content{align-self:start;margin-top:clamp(18px,13vh,150px)}
}
/* Notebook de tela baixa: o bloco de texto encosta na faixa de cookies, que
   é fixa no pé da janela. Daqui para baixo o respiro encolhe junto com a altura
   da janela (a conta encontra os 7vh acima em 860px e chega a 6px em 780px, sem
   salto), para o link "sou corretor" não ficar escondido atrás da faixa. */
@media (min-width:1025px) and (max-height:860px){
  .hero:not(.hero--split) .hero__content{margin-top:max(6px, calc(132.25vh - 1026px))}
}
.hero__pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--muted);font-size:12.5px;line-height:1.3;
  transition:background-color .2s var(--ease)
}
.hero__pill:hover{background:#E9EAEE}
.hero__pill b{color:var(--gold-ink);font-weight:700}
.hero__pill svg{width:12px;height:12px;flex:none;color:var(--muted)}
/* A tag da calculadora desce um pouco sozinha: o mesmo valor sai da margem do
   h1 logo abaixo, então o título e tudo que vem depois ficam onde estavam. */
.hero:not(.hero--split) .hero__pill{padding:9px 18px;font-size:14.5px;margin-top:24px}
.hero:not(.hero--split) .hero__pill svg{width:14px;height:14px}
.hero h1{margin-top:26px}
.hero:not(.hero--split) h1{margin-top:calc(clamp(26px,2.6vw,40px) - 8px)}
.hero:not(.hero--split) h1{font-size:clamp(26px, 9px + 2.5vw, 45px);text-wrap:balance}
.hero__sub{margin-top:22px;max-width:640px}
.hero:not(.hero--split) .hero__sub{margin-top:clamp(20px,2.1vw,30px);max-width:none}
.hero__cta{margin-top:32px}
.hero:not(.hero--split) .hero__cta{margin-top:clamp(32px,3.2vw,46px)}
.hero__note{margin-top:26px;font-size:15px;color:var(--muted)}
.hero:not(.hero--split) .hero__note{margin-top:clamp(26px,2.4vw,34px)}
.hero__media{
  margin-right:min(0px, calc((var(--container) + var(--gutter)*2 - 100vw) / 2));
  pointer-events:none;
}
.hero__media img{width:100%;max-width:760px;margin-left:auto;display:block}
/* só o hero da home: a altura é limitada pela viewport para o bloco todo caber
   na primeira tela. O hero--split usa foto que precisa preencher a coluna. */
.hero:not(.hero--split) .hero__media img{width:auto;max-width:100%;max-height:min(72vh,620px)}

/* Variante duas colunas (Para Corretores): imagem ao lado, sem sobreposição */
.hero--split .hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;min-height:0;
}
.hero--split .hero__content{max-width:560px}
.hero--split .hero__media{margin-right:0;pointer-events:auto}
.hero--split .hero__media img{max-width:none;margin-left:0;border-radius:var(--radius-lg)}

/* ---- Hero "Para corretores": foto + dois avisos flutuando ----
   As medidas saem de cqw para os cartões acompanharem a largura da coluna:
   em px eles ficariam gigantes no desktop e estourariam a foto no tablet.
   O container é o .heroapp, nunca o .hero__media — cqw dentro dele mediria
   o elemento de fora. */
/* width:100% não é decoração: container-type:inline-size liga a contenção de
   tamanho no eixo horizontal, então o conteúdo deixa de informar a largura.
   Num contexto que encolhe para o conteúdo — o hero empilhado no mobile — o
   bloco colapsava para 0 e os dois cartões viravam uma tira vertical. */
.heroapp{container-type:inline-size;position:relative;isolation:isolate;
  width:90%;margin-inline:auto;
  /* deslocamento do ponteiro, escrito pelo JS e lido pelos cartões */
  --mx:0;--my:0}
.heroapp__foto{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}

.heroapp__antecipa,
.heroapp__saldo{
  position:absolute;z-index:2;margin:0;
  /* Vidro claro: tinta branca baixa + desfoque forte. Sobre uma foto escura e
     quente, tinta demais vira plástico e desfoque de menos deixa o texto
     brigando com o fundo. O fio de luz no topo é o que faz ler como vidro. */
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(2.6cqw) saturate(150%);
  backdrop-filter:blur(2.6cqw) saturate(150%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 1.4cqw 3.4cqw -.9cqw rgba(20,16,8,.28),
    0 .4cqw 1cqw rgba(20,16,8,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Antecipação: mesmo vidro do cartão de saldo — os dois são avisos sobre a
   foto, não pedaços da interface. O disco vazado repete o do saldo; muda só o
   glifo. Sem botão: um CTA aqui prometeria um clique que o hero não entrega. */
.heroapp__antecipa{
  top:6cqw;right:-8cqw;width:60cqw;
  display:flex;align-items:center;gap:2.7cqw;
  padding:3cqw 3.7cqw;border-radius:3.1cqw;
}
.heroapp__raio{
  flex:none;display:grid;place-items:center;
  width:7.5cqw;height:7.5cqw;border-radius:50%;
  border:1px solid rgba(150,114,7,.3);color:var(--gold-deep-2);
}
.heroapp__raio svg{width:50%;height:50%}
.heroapp__antecipa figcaption{min-width:0}
.heroapp__antecipa-rot{
  display:block;font-size:clamp(9px,2.25cqw,12.5px);line-height:1.2;color:var(--muted);
}
.heroapp__antecipa b{
  display:block;margin-top:1cqw;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(13.5px,4.1cqw,24px);line-height:1;
  letter-spacing:-.03em;color:var(--gold-deep-2);
}
.heroapp__antecipa-sub{
  display:block;margin-top:1.1cqw;
  font-size:clamp(8px,1.92cqw,10.8px);line-height:1.3;color:var(--muted);
}

/* Saldo: rótulo em cima, número grande embaixo — a mesma hierarquia dos
   cartões de comissão da dobra seguinte. */
.heroapp__saldo{
  bottom:9cqw;left:-9cqw;width:60cqw;
  display:flex;align-items:center;gap:3cqw;
  padding:3.4cqw 4.2cqw;border-radius:3.4cqw;
}
/* Disco vazado, ao contrário do check preenchido do outro aviso: um marca um
   evento que aconteceu, o outro é o estado de um saldo. Mesmo diâmetro para os
   dois cartões lerem como um par. */
.heroapp__grafico{
  flex:none;display:grid;place-items:center;
  width:8.4cqw;height:8.4cqw;border-radius:50%;
  border:1px solid rgba(150,114,7,.3);color:var(--gold-deep-2);
}
.heroapp__grafico svg{width:56%;height:56%}

/* ---- Vida nos dois ícones do topo (Para corretores) ----
   Movimento curto e espaçado: o raio dá um pulso de zoom e a linha do gráfico
   se redesenha, com a ponta da seta entrando depois. Os dois ciclos têm
   durações diferentes para não baterem juntos. */
.heroapp__raio svg{animation:raio-pulso 5.2s ease-in-out infinite;transform-origin:50% 50%}
@keyframes raio-pulso{
  0%,62%,100%{transform:scale(1)}
  70%{transform:scale(1.16)}
  78%{transform:scale(.97)}
  86%{transform:scale(1)}
}
/* a linha e a ponta da seta são os dois <path> do ícone, nessa ordem */
.heroapp__grafico svg path:nth-child(1){
  stroke-dasharray:34;animation:grafico-traco 6.4s ease-in-out infinite;
}
.heroapp__grafico svg path:nth-child(2){
  animation:grafico-ponta 6.4s ease-in-out infinite;transform-origin:70% 30%;
}
@keyframes grafico-traco{
  0%{stroke-dashoffset:34}
  34%,100%{stroke-dashoffset:0}
}
@keyframes grafico-ponta{
  0%,26%{opacity:0;transform:translate(-1.4px,1.4px)}
  44%,100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .heroapp__raio svg,.heroapp__grafico svg path{animation:none}
  .heroapp__grafico svg path{stroke-dasharray:none;opacity:1}
}
.heroapp__saldo figcaption{min-width:0}
.heroapp__saldo figcaption>span{
  display:block;font-size:clamp(10px,2.5cqw,14px);line-height:1.2;color:var(--muted);
}
.heroapp__saldo b{
  display:block;margin-top:1cqw;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,6.2cqw,36px);line-height:1;
  letter-spacing:-.03em;color:var(--gold-deep-2);
}

/* Paralaxe do ponteiro. Os dois cartões andam em sentidos opostos e com
   amplitudes diferentes: é a diferença entre eles que sugere profundidade —
   se andassem juntos, a cena inteira pareceria escorregar. A amplitude é
   deliberadamente pequena (9px no máximo); acima disso o hero vira brinquedo.
   A transição longa faz o cartão perseguir o ponteiro em vez de grudar nele. */
.heroapp__antecipa{
  transform:translate3d(calc(var(--mx) * 9px), calc(var(--my) * 7px), 0);
}
.heroapp__saldo{
  transform:translate3d(calc(var(--mx) * -6px), calc(var(--my) * -5px), 0);
}
.heroapp__antecipa,
.heroapp__saldo{transition:transform .55s cubic-bezier(.22,1,.36,1)}

/* Sem ponteiro fino (celular, tablet) não há o que seguir, e quem pediu menos
   movimento não deve receber nenhum. */
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .heroapp__antecipa,.heroapp__saldo{transform:none;transition:none}
}

/* Abaixo do desktop a coluna é centralizada e estreita: o transbordo lateral
   sairia da tela. Os cartões encostam na borda da foto em vez de vazar. */
@media (max-width:900px){
  .heroapp__antecipa{right:-2cqw}
  .heroapp__saldo{left:-2cqw}
}

/* Faixa de clientes */
.clients{padding-block:clamp(22px,2.3vw,34px) clamp(36px,3.9vw,58px)}
.clients__title{text-align:center;font-family:var(--font-display);font-weight:600;font-size:clamp(16px, 14.14px + 0.476vw, 21px);color:var(--muted-2);margin-bottom:30px}
.clients__row{
  display:grid;grid-template-columns:repeat(6,1fr);
  align-items:center;gap:clamp(18px,3vw,44px);
}
.clients__row img{
  width:100%;max-width:150px;margin-inline:auto;
  opacity:.55;filter:grayscale(1);
  transition:opacity .25s var(--ease)
}
.clients__row img:hover{opacity:.85}

/* ---------- Carrossel infinito de logos ---------- */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee-scroll 48s linear infinite;
  will-change:transform;
}
.marquee__group{
  display:flex;align-items:center;flex:none;
  /* o vão acompanha o logo maior, mantendo ~6 marcas visíveis por tela */
  gap:clamp(44px,8.1vw,118px);
  padding-right:clamp(44px,8.1vw,118px);
}
.marquee__group li{display:flex;align-items:center;justify-content:center}
.marquee__group img{
  height:clamp(36px, 24.86px + 2.857vw, 66px);width:auto;max-width:none;
  opacity:.62;filter:grayscale(1);
  transition:opacity .25s var(--ease),filter .25s var(--ease);
}
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee__track{animation-play-state:paused}
  .marquee__group img:hover{opacity:.9;filter:grayscale(0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .marquee__track{animation:none}
}

/* ==========================================================================
   PROBLEMA — abas escuras
   ========================================================================== */
.problem{background:var(--black);color:var(--white);padding-block:clamp(68px,8.2vw,124px)}
.problem__head{text-align:center;margin-inline:auto}
.problem__head h2{margin-top:26px;font-size:var(--fs-section);line-height:1.1;color:var(--white)}
.problem__head p{margin-top:20px;max-width:1000px;margin-inline:auto;font-size:clamp(15px, 13.89px + 0.286vw, 18px);line-height:1.55;color:#C9CBD1}
.problem__head p b{color:var(--white)}
.problem__body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,72px);align-items:start}
.problem__label{font-family:var(--font-display);font-size:18px;font-weight:400;color:#E8E8E8;margin-bottom:22px}
.tablist{display:flex;flex-direction:column;gap:4px}
.tablist button{
  text-align:left;padding:11px 0;
  font-family:var(--font-display);font-size:clamp(16px, 13.77px + 0.571vw, 22px);font-weight:500;
  color:#B9BCC4;border-bottom:1px solid transparent;
  transition:color .2s var(--ease)
}
.tablist button:hover{color:#E9EAEE}
.tablist button[aria-selected="true"]{color:var(--white);font-weight:700}
.tabpanels{position:relative}
.tabpanel{
  display:none;
  background:var(--white);color:var(--text);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3vw,48px);
  min-height:340px;
}
.tabpanel.is-active{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:center;animation:fadeUp .35s var(--ease)}
.tabpanel h3{font-family:var(--font-display);font-weight:600;font-size:clamp(20px, 16.29px + 0.952vw, 30px);line-height:1.18;color:var(--muted);letter-spacing:-.015em}
.tabpanel p{margin-top:18px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.55;color:var(--muted)}
.tabpanel .link-arrow{margin-top:26px;color:var(--text);font-weight:500}
.tabpanel__media img{width:100%;border-radius:var(--radius)}
/* A arte deitada da aba Transparência precisa de mais largura que as demais.
   Só a partir de 1025px: abaixo disso o painel empilha, e esta regra é mais
   específica que a do empilhamento — deixada solta, estourava o mobile. */
@media (min-width:1025px){
  .tabpanel.is-active:has(.tabpanel__media--largo){grid-template-columns:minmax(0,1fr) 470px}
}
.tabpanel__media--largo img{border-radius:0}

/* --------------------------------------------------------------------------
   Cartão "Imposto a pagar" (aba Bitributação)

   Tudo é dimensionado em cqw — 1% da largura do próprio cartão — para ele
   encolher em bloco como a imagem que substituiu, sem quebrar proporção.
   -------------------------------------------------------------------------- */
.imposto{
  container-type:inline-size;
  width:100%;aspect-ratio:520/600;
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(155deg,#FDFDFD 0%,#F6F7F8 42%,#E9EAEE 100%);
  /* centraliza o bloco na altura: antes ele ficava colado no topo e sobrava
     um vazio grande embaixo */
  display:flex;align-items:center;
}
/* O padding fica AQUI, não em .imposto: cqw usado no próprio elemento que
   declara o container resolve contra o container de fora, não contra ele
   mesmo — em .imposto os 9.2cqw viravam 134px em vez de 24px. */
.imposto__conteudo{width:100%;padding:8cqw}
/* ".imposto ." pelo mesmo motivo do .risco: .tabpanel p vencia este seletor */
.imposto .imposto__titulo{
  text-align:center;font-size:6.6cqw;line-height:1.3;font-weight:400;
  color:#7C7C80;margin:0 0 6.8cqw;
}
.imposto__lista{display:flex;flex-direction:column;gap:3.8cqw}
.imposto__item{
  display:flex;align-items:center;justify-content:space-between;
  height:17.4cqw;padding-inline:5.4cqw;
  background:var(--white);border-radius:5.2cqw;
  box-shadow:0 1.2cqw 2.6cqw -1cqw rgba(16,18,24,.10);
  /* estado de partida: um pouco abaixo e apagada, como notificação chegando */
  opacity:0;transform:translateY(60%) scale(.97);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),
             transform .62s cubic-bezier(.22,1,.36,1);
}
.imposto__item.is-in{opacity:1;transform:none}
/* remate do título, no fim da lista: mesma voz do "Imposto a pagar" */
.imposto__fecho{
  justify-content:center;text-align:center;
  font-size:6.6cqw;line-height:1.3;color:#7C7C80;
  margin-top:1.6cqw;
}
.imposto__rotulo{font-size:5.8cqw;color:#8A8A8E}
.imposto__valor{
  font-size:5.8cqw;font-weight:700;color:#C0272D;
  /* dígitos de largura fixa: sem isso o "-9%" pula ao virar "-13%" */
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
  .imposto__item{opacity:1;transform:none;transition:none}
}

/* ---- Variante "Aux. Financeiro - CLT" (aba Processos manuais) ----
   Mesmo cartão e mesma entrada em notificação; as duas últimas linhas não
   são pílulas, são os totais — e só elas contam o valor. */
/* São 5 linhas em vez de 3: tudo um pouco mais justo para o bloco caber
   na altura do cartão sem cortar o "Custo Anual". */
.imposto--clt .imposto__conteudo{padding:7cqw}
.imposto--clt .imposto__titulo{font-size:6cqw;margin-bottom:4.4cqw}
.imposto--clt .imposto__lista{gap:2.8cqw}
.imposto--clt .imposto__item{height:14.2cqw;padding-inline:4.4cqw}
.imposto--clt .imposto__rotulo,
.imposto--clt .imposto__valor{font-size:5cqw}
.imposto--clt .imposto__valor{color:#3F3F44}
/* linha "nua": sem fundo, sem sombra e sem altura fixa */
.imposto__item--nu{
  height:auto;background:none;box-shadow:none;
  border-radius:0;padding-inline:1cqw;
}
/* os dois totais ficam colados um no outro, como na arte de referência */
.imposto__item--nu + .imposto__item--nu{margin-top:-1.8cqw}
.clt__total{font-size:5.2cqw;line-height:1.2;font-weight:500}
.clt__total b{font-weight:700;font-variant-numeric:tabular-nums}
.clt__total--mes{margin-top:2.6cqw;color:#1B4EA0}
.clt__total--ano{color:#C0272D}

/* --------------------------------------------------------------------------
   Dashboard desktop + app (aba Transparência)

   A arte é deitada, então esse painel usa uma coluna mais larga que os
   outros — senão ficaria pequeno demais para o dashboard ser legível.
   -------------------------------------------------------------------------- */
.painel{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:732/543;
  --mx:0;--my:0;   /* posição do mouse, escrita pelo JS (-1 a 1) */
}
.painel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
/* profundidades diferentes e sentidos opostos: o celular está "na frente" */
.painel__desk{transform:translate3d(calc(var(--mx) * -1.1cqw), calc(var(--my) * -.9cqw), 0)}
.painel__mobile{transform:translate3d(calc(var(--mx) * 2.4cqw), calc(var(--my) * 1.9cqw), 0)}
/* resposta curta com o mouse em cima; volta lenta ao sair */
.painel.is-ativo img{transition:transform .28s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .painel img{transition:none;transform:none}
}

/* --------------------------------------------------------------------------
   Tela de bloqueio de iPhone (aba Demora no pagamento)

   As notificações chegam de baixo para cima — a mais nova entra por último,
   no topo da pilha, como no iOS de verdade.
   -------------------------------------------------------------------------- */
.ios{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:520/600;
  border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;
  /* papel de parede aproximado em camadas de degradê */
  background:
    radial-gradient(120% 92% at 96% 76%, rgba(152,130,180,.58) 0%, rgba(120,100,150,.20) 38%, transparent 64%),
    radial-gradient(88% 68% at 64% 20%, rgba(114,94,142,.44) 0%, transparent 58%),
    radial-gradient(70% 50% at 18% 96%, rgba(96,84,130,.34) 0%, transparent 60%),
    linear-gradient(158deg,#2E2F52 0%,#1C1F45 34%,#0E1239 62%,#171C4C 100%);
}
.ios__lista{width:100%;display:flex;flex-direction:column;gap:2.4cqw;padding:5cqw}
.ios__notif{
  display:flex;align-items:center;gap:2.6cqw;
  padding:2.8cqw 3.4cqw;border-radius:5cqw;
  background:rgba(126,120,158,.40);
  border:.2cqw solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  /* entrada: desce de cima com um leve exagero no fim — o "spring" do iOS */
  opacity:0;transform:translateY(-42%) scale(.96);
  transition:transform .62s cubic-bezier(.34,1.32,.48,1), opacity .38s ease-out;
  will-change:transform;
}
.ios__notif.is-in{opacity:1;transform:none}
/* ".ios ." é obrigatório: .tabpanel__media img é mais específico e estava
   esticando o ícone para 100% da largura da notificação. */
.ios .ios__icone{
  width:9cqw;height:9cqw;flex:none;border-radius:2.2cqw;
  object-fit:cover;display:block;
}
.ios__texto{flex:1;min-width:0}
.risco .ios__app,.ios .ios__app{
  margin:0;font-size:2.9cqw;font-weight:700;color:#fff;line-height:1.25;
}
.ios .ios__msg{
  margin:.4cqw 0 0;font-size:2.7cqw;line-height:1.28;color:rgba(255,255,255,.94);
}
.ios__quando{
  align-self:flex-start;flex:none;
  font-size:2.4cqw;color:rgba(255,255,255,.62);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .ios__notif{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------------------
   Cartão "Risco trabalhista" (aba Risco trabalhista)

   Os dois recortes de jornal são camadas independentes para poderem deslizar
   em profundidades diferentes quando o mouse passa. Como no cartão de
   imposto, tudo é medido em cqw para o bloco encolher inteiro.
   -------------------------------------------------------------------------- */
.risco{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:520/600;
  border-radius:var(--radius);overflow:hidden;
  --mx:0;--my:0;   /* posição do mouse, escrita pelo JS (-1 a 1) */
}
/* a placa colorida que fica atrás dos recortes */
.risco__fundo{
  position:absolute;inset:5% 1% 5% 10%;
  border-radius:6cqw;
  background:linear-gradient(158deg,#F7E7EA 0%,#F2E4EC 38%,#E4DAEE 72%,#D9D2EC 100%);
}
.risco__print{
  position:absolute;background:var(--white);
  box-shadow:0 2.4cqw 5cqw -2cqw rgba(24,20,40,.22);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.risco__print--tst{
  left:1%;right:15%;top:9%;
  transform:translate3d(calc(var(--mx) * -2.1cqw), calc(var(--my) * -1.7cqw), 0);
}
.risco__print--gazeta{
  left:22%;right:0;top:44%;
  transform:translate3d(calc(var(--mx) * 3.4cqw), calc(var(--my) * 2.6cqw), 0);
}
/* enquanto o mouse está em cima, a resposta é curta; ao sair, volta devagar */
.risco.is-ativo .risco__print{transition:transform .28s cubic-bezier(.22,1,.36,1)}

/* ---- recorte do TST ---- */
/* ".risco ." e não ".tst__faixa" sozinho: .tabpanel p é mais específico e
   estava impondo 17px e margin-top de 18px neste parágrafo. */
.risco .tst__faixa{
  margin:0;background:#0A4E86;color:#fff;font-weight:700;
  font-size:2.9cqw;line-height:1;padding:2.1cqw 2.6cqw;
}
.tst__corpo{display:flex;align-items:center;gap:1.6cqw;padding:2.8cqw 2.6cqw 3.2cqw}
.tst__corpo h4{
  flex:1;font-family:var(--font-text);font-weight:700;
  font-size:5.6cqw;line-height:1.22;color:#12141A;letter-spacing:-.015em;
}
.tst__seta{width:5.4cqw;height:5.4cqw;flex:none}

/* ---- recorte da Gazeta do Povo ---- */
.gzt__topo{display:flex;align-items:center;justify-content:space-between;padding:2.2cqw 2.6cqw}
.gzt__explore{
  display:flex;flex-direction:column;align-items:center;gap:.5cqw;
  font-size:1.7cqw;letter-spacing:.06em;color:#111;
}
.gzt__explore svg{width:3.8cqw;height:2.2cqw}
.gzt__marca{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:3.8cqw;letter-spacing:.02em;color:#111;white-space:nowrap;
}
.gzt__assine{
  background:#F5A623;color:#111;font-weight:700;
  font-size:2.3cqw;padding:1.2cqw 2.3cqw;border-radius:99px;white-space:nowrap;
}
.gzt__nav{
  display:flex;justify-content:space-between;gap:1.2cqw;
  background:#242424;padding:1.7cqw 2.6cqw;
  font-size:2.6cqw;color:#F2F2F2;white-space:nowrap;
}
.gzt__nav .is-on{border-bottom:.5cqw solid #fff;padding-bottom:.4cqw}
.gzt__corpo{padding:2.4cqw 2.6cqw 3.2cqw}
.risco .gzt__chapeu{
  margin:0;font-size:2.2cqw;color:#5A5A5A;border-left:.7cqw solid #111;
  padding-left:1.2cqw;line-height:1.1;
}
.gzt__corpo h4{
  margin-top:2cqw;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:5.4cqw;line-height:1.2;color:#0E0E0E;
}
@media (prefers-reduced-motion:reduce){
  .risco__print{transition:none;transform:none}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ==========================================================================
   BLOCO DE DESTAQUE (gráfico + bullets)
   ========================================================================== */
.feature-panel{
  background:var(--surface-2);border-radius:var(--radius-xl);
  padding:clamp(24px,3vw,52px);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.feature-panel img{width:100%;border-radius:var(--radius)}
/* Espelho do painel: a arte vai para a direita e o texto para a esquerda.
   As colunas trocam de largura junto, senão o texto herdaria a coluna
   estreita que era da arte. Só no desktop — abaixo de 1025 o painel empilha
   e a ordem é outra (ver o bloco de 760). */
@media (min-width:1025px){
  .feature-panel--inverso{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .feature-panel--inverso > :first-child{order:2}
}

/* ---- Pilha de comissões (Para corretores → "Gerencie as suas comissões") ----
   Uma comissão por cartão. O cartão da frente é o que acabou de cair; os
   anteriores recuam para trás e para CIMA, deixando à mostra só uma fatia do
   topo — a pilha cresce para o alto, ao contrário da .sync, onde ela cresce
   para baixo. Todas as medidas em cqw para acompanhar a coluna; nunca no
   próprio .comissoes, onde cqw ainda mediria o container de fora.
   O aspect-ratio é o da foto que este bloco substituiu: a dobra não muda de
   altura por causa da troca. */
.comissoes{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:900/680;
}
.comissoes__pilha{position:absolute;inset:0;isolation:isolate}
.comissoes__card{
  /* left/right 0 + margem automática centraliza sem tocar no transform, que é
     de quem cuida do empilhamento. Ancorado embaixo: é o ponto que não se mexe
     enquanto a pilha sobe. */
  position:absolute;left:0;right:0;bottom:9cqw;width:68cqw;margin-inline:auto;
  padding:7.5cqw 4.8cqw 7cqw;
  /* Areia da marca. A borda e a sombra saem do mesmo dourado: com a cinza de
     --line o cartão quente ficava com um contorno frio em volta. */
  background:linear-gradient(168deg,#FFFDF9 0%,#FCF8EF 52%,#F7F1E3 100%);
  border:1px solid rgba(150,114,7,.14);
  border-radius:4.4cqw;
  /* Três camadas de sombra + dois fios internos: a curta cola o cartão na
     superfície, a média dá o corpo e a longa é a luz ambiente. Os fios internos
     (claro em cima, quente embaixo) são o que faz a face parecer abaulada em
     vez de um retângulo chapado. */
  box-shadow:
    0 .3cqw .7cqw rgba(90,68,10,.07),
    0 1.2cqw 2.4cqw -.6cqw rgba(90,68,10,.13),
    0 3.4cqw 6cqw -1.6cqw rgba(90,68,10,.16),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(150,114,7,.07);
  opacity:0;transform:translateY(9%) scale(.97);
  transition:transform .72s cubic-bezier(.32,.72,0,1), opacity .42s var(--ease);
  z-index:1;
}
/* Frente = comissão recém-chegada. Atrás = as anteriores, encolhendo.
   O scale encolhe em torno do CENTRO, então ele já desce o topo do cartão e
   come parte do translate: a fatia que aparece de verdade é
   t · altura − (1 − scale) · altura / 2. Os pares abaixo estão calibrados
   para sobrar ~12% de cada cartão recuado. */
.comissoes__card.is-frente {opacity:1;transform:none;z-index:5}
.comissoes__card.is-atras-1{opacity:.94;transform:translateY(-15%) scale(.94); z-index:4}
.comissoes__card.is-atras-2{opacity:.84;transform:translateY(-29%) scale(.875);z-index:3}
/* Só a FATIA do topo de cada cartão recuado aparece — e nela caía o cabeçalho
   do cartão de trás, meio cortado pelo da frente, com cara de defeito. O
   conteúdo dos recuados apaga; a face do cartão continua. De quebra o texto
   do que assume a frente entra em fusão, como no modelo. */
.comissoes__card.is-atras-1>*,
.comissoes__card.is-atras-2>*{opacity:0}
.comissoes__card>*{transition:opacity .38s var(--ease)}
.comissoes__card.sem-transicao,
.comissoes__card.sem-transicao>*{transition:none}

/* center, não flex-start: o texto da unidade fica no eixo do disco. */
.comissoes__cab{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
/* Fina e pequena: é a legenda do valor, não a informação principal. */
.comissoes__unid{
  font-size:clamp(11px, 3.2cqw, 19px);line-height:1.25;font-weight:400;
  color:var(--muted);letter-spacing:-.005em;
}
.comissoes__selo{
  flex:none;display:grid;place-items:center;
  width:9.4cqw;height:9.4cqw;border-radius:50%;
  border:1px solid rgba(150,114,7,.22);color:var(--gold-deep-2);
}
.comissoes__selo svg{width:52%;height:52%}

/* A informação principal do cartão. Os centavos entram menores, como num
   extrato: o olho lê a ordem de grandeza primeiro e o resto depois. */
.comissoes__valor{
  margin-top:6.5cqw;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px, 11cqw, 67px);line-height:1;
  letter-spacing:-.03em;color:#A07E10;
}
.comissoes__valor span{font-size:.52em;letter-spacing:-.02em}

.comissoes__status{
  display:flex;align-items:center;gap:1.9cqw;margin-top:7.5cqw;
  font-size:clamp(10px, 2.9cqw, 17px);line-height:1;
}
.comissoes__status i{width:1.9cqw;height:1.9cqw;border-radius:50%;flex:none}
/* Semáforo pedido pelo cliente: verde para o que já caiu, amarelo para o que
   ainda vai cair. O verde é o único ponto do site fora da paleta da marca —
   entra escuro (#2F6B45) para ter contraste sobre o fundo areia. O amarelo
   usa o dourado profundo no texto: o --gold puro sobre areia não se lê. */
.comissoes__status--pago{color:#2F6B45}
.comissoes__status--pago i{background:#4C9E6B}
.comissoes__status--agendado{color:var(--gold-deep-2)}
.comissoes__status--agendado i{background:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .comissoes__card,.comissoes__card>*{transition:none}
}

/* ---- TESTE: pilha de comissões em glassmorfismo ----
   Liga com a classe .comissoes--vidro no bloco; tirar a classe devolve o
   cartão areia. Vidro só se lê se houver o que desfocar atrás: sobre o fundo
   liso da dobra ele seria um cartão branco apagado. Por isso o teste traz
   manchas douradas desfocadas DENTRO da pilha — no mesmo contexto de
   empilhamento dos cartões, que é de onde o backdrop-filter enxerga. */
.comissoes--vidro .comissoes__pilha::before{
  content:"";position:absolute;inset:8% 3% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(36% 40% at 28% 66%, rgba(233,201,122,.95), transparent 70%),
    radial-gradient(32% 36% at 74% 42%, rgba(220,168,70,.70), transparent 72%),
    radial-gradient(38% 34% at 56% 90%, rgba(150,114,7,.45), transparent 70%);
  filter:blur(3.4cqw);
}
.comissoes--vidro .comissoes__card{
  background:linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.26) 100%);
  -webkit-backdrop-filter:blur(3cqw) saturate(170%);
  backdrop-filter:blur(3cqw) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 2cqw 5cqw -1.8cqw rgba(90,68,10,.24),
    0 .4cqw 1cqw rgba(90,68,10,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.25);
}
.comissoes--vidro .comissoes__selo{
  background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.75);
}

/* ==========================================================================
   PÁGINA CARREIRAS
   --------------------------------------------------------------------------
   Abre com uma dobra preta que encosta no alto da janela: a página é gerada
   sem a faixa de suporte e redes, e o header fica transparente sobre o preto
   até a primeira rolada (regras .p-carreiras logo abaixo). Depois vêm os
   valores e o cartão de números, que é o mesmo das outras páginas.
   ========================================================================== */

/* ---- Header sobre o preto, só nesta página ---- */
/* Enquanto o header está encostado no topo ele vira parte da dobra preta:
   fundo transparente, marca e links em branco. A partir da primeira rolada
   o .is-stuck assume e a barra volta a ser o cartão de vidro claro de
   sempre, que já é legível sobre qualquer fundo. */
.p-carreiras .header:not(.is-stuck) .header__bar{
  background:transparent;border-bottom-color:transparent;box-shadow:none;
}
/* a marca é um PNG preto de uma cor só: invertido, vira branco puro */
.p-carreiras .header:not(.is-stuck) .logo img{filter:invert(1)}
.p-carreiras .header:not(.is-stuck) .nav a{color:#D7D9DE}
.p-carreiras .header:not(.is-stuck) .nav a:hover{color:var(--white)}
.p-carreiras .header:not(.is-stuck) .burger span{background:var(--white)}
.p-carreiras .header:not(.is-stuck) .btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--white);--btn-bd:rgba(255,255,255,.45);
}
.p-carreiras .header:not(.is-stuck) .btn--ghost:hover{
  --btn-bg:var(--white);--btn-fg:var(--text);--btn-bd:var(--white);
}

/* ---- Primeira dobra ---- */
.car-hero{
  position:relative;overflow:hidden;
  background:var(--black);color:var(--white);
  /* o header é sticky e fica por cima: o respiro de cima já conta com ele */
  padding:calc(var(--header-h) + clamp(46px,6vw,104px)) 0 clamp(64px,8vw,128px);
  margin-top:calc(var(--header-h) * -1);
}
.car-hero .container{position:relative;z-index:1}
.car-hero__tit{
  margin-top:clamp(22px,2.6vw,34px);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px, 20.5px + 4.48vw, 85px);
  line-height:1.03;letter-spacing:-.035em;color:var(--white);
  /* Em em, e não em ch: a marca é uma imagem com altura em em, então ela
     escala junto com a fonte e a linha "Vamos construir [marca]" ocupa a
     mesma largura relativa em qualquer tamanho de tela. Em ch a conta valia
     só para texto e a marca caía sozinha para a linha de baixo. */
  max-width:12.7em;
}
.car-hero__sub{
  margin-top:clamp(22px,2.4vw,32px);max-width:60ch;
  font-size:clamp(16px, 14.5px + 0.38vw, 20px);line-height:1.6;color:#C9CBD1;
}
.car-hero__sub::first-line{color:#E8E9EC}
.car-hero__cta{margin-top:clamp(30px,3.4vw,46px)}

/* ---- Valores ---- */
/* sem limite de largura: o título cabe numa linha só no desktop e só quebra
   quando a tela não dá conta */
.car-valores__head h2{margin-top:22px;max-width:none}
.car-valores__head p{margin-top:18px;max-width:64ch}

/* ---- Carrossel dos valores ----
   A janela é um contêiner de rolagem horizontal de verdade; o JS e as setas
   só chamam scrollBy. O scroll-snap faz cada cartão parar alinhado, e o
   arrasto no trackpad e o dedo no celular funcionam sem código nenhum. */
/* As setas vão no alto, à direita, e não nas laterais: encostadas na janela
   elas empurrariam os cartões para dentro e o primeiro deixaria de alinhar
   com o título e o texto da seção. */
.car-carrossel{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:10px;row-gap:clamp(18px,2vw,28px);
  margin-top:clamp(26px,3vw,40px);
}
.car-carrossel__janela{grid-column:1 / -1;grid-row:2}
.car-seta--ant {grid-column:2;grid-row:1}
.car-seta--prox{grid-column:3;grid-row:1}
.car-carrossel__janela{
  overflow-x:auto;overflow-y:hidden;
  /* proximity, e não mandatory: com mandatory o navegador reancorava a
     rolagem suave das setas no meio do caminho e o carrossel voltava para
     onde estava. Aqui o encaixe só age quando o dedo ou o trackpad param
     perto de um cartão, e não disputa com o scrollBy. */
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  border-radius:var(--radius-lg);
}
.car-carrossel__janela::-webkit-scrollbar{display:none}
.car-carrossel__janela:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.car-trilha{display:flex;gap:clamp(14px,1.6vw,22px)}
.car-trilha .car-valor{
  flex:0 0 calc((100% - 2*clamp(14px,1.6vw,22px)) / 3);
  scroll-snap-align:start;
}
.car-valor{
  background:var(--surface);padding:clamp(24px,2.6vw,36px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
/* setas: discos nas laterais, fora da janela, somem quando tudo já cabe */
.car-seta{
  width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:var(--white);color:var(--text);
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease),opacity .2s var(--ease);
}
.car-seta svg{width:20px;height:20px}
.car-seta:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
.car-seta:disabled{opacity:.35;pointer-events:none}
.car-valor i{
  font-style:normal;font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.06em;color:var(--gold-deep);
}
.car-valor h3{
  margin-top:12px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px, 16.8px + 0.57vw, 25px);line-height:1.2;
  letter-spacing:-.02em;color:var(--text);
  /* duas linhas reservadas: só um dos valores tem título que quebra, e sem
     a reserva o texto dele começaria mais abaixo que o dos vizinhos */
  min-height:calc(2 * 1.2em);
}
.car-valor p{margin-top:10px;color:var(--muted);line-height:1.55;max-width:34ch}
@media (hover:hover) and (pointer:fine){
  .car-valor:hover{background:var(--gold-soft)}
}

/* ---- Faixas da vida na M2PAG ----
   Três linhas de tipografia grande passando sem parar, só texto.
   Cada trilha tem dois grupos idênticos e a animação desloca
   -50%: ao voltar ao início o desenho é o mesmo e a emenda não aparece. A
   duração de cada linha vem do --seg no HTML, diferente em cada uma para
   elas não marcharem juntas. */
.faixas{
  background:var(--gold);color:#3A2C05;
  padding:clamp(34px,4.2vw,62px) 0;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(6px,.8vw,14px);
}
.faixa{overflow:hidden}
.faixa__trilha{
  display:flex;width:max-content;will-change:transform;
  animation:faixa-esq var(--seg,46s) linear infinite;
}
.faixa__trilha--dir{animation-name:faixa-dir}
/* o vão faz o papel que as fotos faziam: sem ele uma repetição encosta na
   seguinte e a frase deixa de ter começo e fim na leitura */
.faixa__grupo{
  display:flex;align-items:center;flex:none;
  gap:clamp(30px,3.6vw,68px);padding-right:clamp(30px,3.6vw,68px);
}
.faixa__txt{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px, 20px + 5.2vw, 112px);
  line-height:1.1;letter-spacing:-.035em;white-space:nowrap;
}
/* ---- Consultoria (fecho do blog) ----
   Reaproveita o degradê da faixa "Encontrou uma falha?" da página de
   segurança, numa versão baixa: só a faixa, sem cartão branco nem textura,
   com o texto à esquerda e o botão à direita. */
.consult{
  position:relative;overflow:hidden;
  padding:clamp(34px,4.2vw,62px) 0;
  background:
    radial-gradient(90% 120% at 12% 0%, #F7DFA4 0%, rgba(247,223,164,0) 58%),
    radial-gradient(80% 110% at 88% 100%, #D9741E 0%, rgba(217,116,30,0) 62%),
    linear-gradient(118deg, #E9C97A 0%, #E0A33A 42%, #C8752A 100%);
}
.consult__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(22px,3vw,52px);flex-wrap:wrap;
}
.consult__texto{flex:1 1 440px;min-width:0}
.consult__tit{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px, 17.6px + 1.65vw, 42px);
  line-height:1.1;letter-spacing:-.03em;color:#3A2C05;
}
.consult__txt{
  margin-top:clamp(12px,1.3vw,18px);max-width:62ch;
  font-size:clamp(15px, 14.3px + 0.19vw, 17px);line-height:1.55;color:#4A3A0B;
}
.consult__cta{flex:none}
@media (max-width:760px){
  .consult__cta{width:100%;justify-content:center}
}

/* ---- Vagas ----
   Cabeçalho e busca centralizados, cartões em três colunas. O botão de cada
   cartão é empurrado para o pé por margin-top:auto, então cartões com
   títulos de alturas diferentes terminam todos na mesma linha. */
.vagas__head{text-align:center}
/* um corpo abaixo do .body padrão: é uma linha de apoio da busca, não um
   texto de leitura, e no tamanho cheio competia com o título */
.vagas__head p{
  margin-top:14px;max-width:52ch;margin-inline:auto;
  font-size:clamp(15px, 14.3px + 0.19vw, 17px);
}
.vagas__aviso{max-width:680px;margin-inline:auto;margin-top:clamp(26px,3vw,38px)}

.vagas__busca{
  display:flex;align-items:center;gap:8px;
  max-width:760px;margin:clamp(22px,2.6vw,34px) auto 0;
  padding:8px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);
}
.vagas__campo,.vagas__sel{display:flex;align-items:center;gap:9px;margin:0;min-width:0}
.vagas__campo{flex:1 1 auto;padding-left:12px}
.vagas__sel{flex:0 0 auto;padding-left:14px;border-left:1px solid var(--line)}
.vagas__busca svg{width:18px;height:18px;flex:none;color:var(--muted)}
.vagas__campo input,.vagas__sel select{
  border:0;background:transparent;font:inherit;color:var(--text);
  padding:10px 0;min-width:0;width:100%;
}
.vagas__campo input::placeholder{color:var(--muted)}
.vagas__campo input:focus,.vagas__sel select:focus{outline:none}
/* o foco aparece na pílula inteira, não num retângulo dentro dela */
.vagas__busca:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.vagas__sel select{cursor:pointer}
.vagas__btn{flex:none;gap:8px}
.vagas__btn svg{color:currentColor}

.vagas__contagem{
  margin-top:clamp(20px,2.2vw,28px);text-align:center;
  font-size:14px;font-weight:500;color:var(--muted);
}
.vagas__grade{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);margin-top:clamp(16px,1.8vw,24px);
}
.vaga{
  display:flex;flex-direction:column;
  padding:clamp(20px,2vw,26px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.vaga[hidden]{display:none}
.vaga__tit{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(17px, 15.9px + 0.29vw, 20px);line-height:1.25;
  letter-spacing:-.02em;color:var(--text);
}
.vaga__local{
  display:flex;align-items:center;gap:7px;
  margin-top:10px;font-size:14px;color:var(--muted);
}
.vaga__local svg{width:16px;height:16px;flex:none}
.vaga__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;align-content:flex-start}
.vaga__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text-2);
  font-size:12.5px;font-weight:500;white-space:nowrap;
}
.vaga__tag svg{width:14px;height:14px;flex:none;color:var(--muted)}
/* as tags empurram o resto para baixo; o botão fica colado no pé do cartão
   com um respiro fixo, então cartões de alturas diferentes terminam iguais */
.vaga__tags{margin-bottom:auto}
.vaga__btn{margin-top:clamp(18px,2vw,24px);gap:8px}
.vaga__btn svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .vaga:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
}
.vagas__vazio{
  margin-top:clamp(26px,3vw,40px);text-align:center;
  color:var(--muted);max-width:46ch;margin-inline:auto;
}

@media (max-width:1024px){
  .vagas__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .vagas__grade{grid-template-columns:1fr}
  /* A frase em movimento é para ser LIDA. A 40px cabem umas nove letras na
     tela do celular e as três linhas viram ruído; a 26px dá para acompanhar. */
  .faixa__txt{font-size:clamp(23px, 14px + 3.2vw, 34px)}
  .faixa__grupo{gap:26px;padding-right:26px}
  /* na largura do celular os três campos não cabem lado a lado na pílula */
  .vagas__busca{
    flex-direction:column;align-items:stretch;gap:10px;
    border-radius:var(--radius-lg);padding:12px;
  }
  .vagas__sel{border-left:0;border-top:1px solid var(--line);padding:4px 0 0 2px}
  .vagas__campo{padding-left:2px}
  .vagas__btn{justify-content:center}
}

/* a frase de fecho, pequena e à esquerda, embaixo das três linhas */
/* sem limite de largura: a frase cabe numa linha só do desktop até o tablet,
   e só quebra na largura de celular, onde não cabe de jeito nenhum */
.faixas__nota{
  margin-top:clamp(16px,2vw,28px);
  font-size:clamp(16px, 14.5px + 0.38vw, 20px);
  line-height:1.5;font-weight:500;color:#4A3A0B;
}
@keyframes faixa-esq{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* a do meio corre no sentido contrário: mesmo percurso, começo invertido */
@keyframes faixa-dir{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .faixa__trilha{animation:none}
  .faixa{overflow-x:auto}
}

@media (max-width:1024px){
  .car-trilha .car-valor{flex-basis:calc((100% - clamp(14px,1.6vw,22px)) / 2)}
  .car-valor p{max-width:none}
}
@media (max-width:760px){
  .car-trilha .car-valor{flex-basis:100%}
  .car-hero__tit{max-width:none}
}

/* ---- Ganhos em esteira (Para incorporadoras) ----
   Texto à esquerda; à direita uma coluna de pílulas que sobe sem parar. A
   lista é duplicada no HTML e a animação percorre exatamente metade da
   altura: quando volta ao início, o desenho é o mesmo e a emenda não aparece.
   As máscaras de cima e de baixo dissolvem as pontas. */
.ganhos{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.ganhos__texto .h2{margin-top:22px}
.ganhos__texto .body{margin-top:18px;max-width:52ch}
.ganhos__texto .btn{margin-top:clamp(26px,3vw,38px)}
.ganhos__esteira{
  position:relative;height:clamp(420px,46vw,620px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}
/* a posição vertical vem do JS (bloco h8), a partir da rolagem da página */
.ganhos__fila{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  list-style:none;margin:0;padding:0;will-change:transform;
}
/* todas do mesmo tamanho: largura e altura fixas, com o texto de apoio em
   duas linhas no máximo */
.pilula{
  display:flex;align-items:center;gap:14px;flex:none;
  width:clamp(300px,30vw,392px);height:88px;
  padding:10px 22px 10px 10px;border-radius:var(--radius-pill);
  background:var(--black);color:var(--white);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45);
}
.pilula__ic{
  width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(233,201,122,.14);border:1px solid rgba(233,201,122,.28);color:var(--gold);
}
.pilula__ic svg{width:28px;height:28px}
.pilula__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pilula__txt b{font-size:15px;line-height:1.2;font-weight:600}
.pilula__txt small{
  font-size:12px;line-height:1.35;color:rgba(255,255,255,.66);font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* o recuo de cada pílula é escrito pelo JS (bloco "arco" do main.js): elas
   correm sobre um arco, abrindo para a direita conforme descem. Sem JS, a
   coluna fica reta, que também funciona. */
/* o recuo do arco é reescrito a cada quadro, então NÃO pode ter transição:
   com ela, a volta do ciclo virava um arrasto lateral. O zoom do hover usa a
   propriedade `scale`, que tem transição própria e não atrapalha o arco. */
.pilula{
  transform:translateX(var(--dx,0px));transform-origin:left center;
  transition:scale .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
}
/* o zoom do hover só existe onde há mouse: no toque ele grudava na pílula
   depois do toque, porque o :hover do celular não sai sozinho */
@media (hover:hover){
  .pilula:hover{scale:1.06;background:#17181C;box-shadow:0 18px 36px -16px rgba(0,0,0,.6)}
}
/* a pílula marcada por um toque (só o toque chega aqui — ver main.js h8).
   Sem `scale`, que empurraria a pílula para fora da tela pelo arco: o
   destaque vem do fio dourado por dentro e do fundo um tom acima. */
.pilula.is-sel{
  background:#17181C;
  box-shadow:0 0 0 1px rgba(233,201,122,.55) inset, 0 18px 36px -16px rgba(0,0,0,.6);
}
@media (max-width:1024px){
  .ganhos{grid-template-columns:1fr}
  .ganhos__esteira{height:380px}
}
@media (prefers-reduced-motion:reduce){
  .pilula{transition:none}
}

/* ---- Título com linha que troca sozinha (topo de Para incorporadoras) ----
   A linha de baixo sobe entrando e sai por cima, uma frase de cada vez. A
   altura é travada na maior frase, para o bloco não "pular" na troca. */
.h1--rotativo{text-wrap:balance;text-transform:uppercase;margin-top:clamp(20px,2.2vw,30px);
  font-size:clamp(28px, 10px + 3.4vw, 62px)}
.rotativo{
  display:block;position:relative;overflow:hidden;
  height:1.18em;margin-top:.12em;
}
.rotativo__item{
  position:absolute;left:0;right:0;top:0;
  color:var(--gold-deep-2);white-space:nowrap;
  opacity:0;transform:translateY(105%);
  transition:transform .72s cubic-bezier(.22,1.2,.36,1), opacity .42s var(--ease);
}
.rotativo__item.is-ativa{opacity:1;transform:none}
.rotativo__item.is-saindo{opacity:0;transform:translateY(-105%)}
@media (max-width:860px){
  .rotativo{height:2.4em;white-space:normal}
  .rotativo__item{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .rotativo__item{transition:none}
}

/* ---- Vitrine do topo da Plataforma ----
   16:9 com o vídeo dos prédios ao fundo e as cenas de vidro dos passos por
   cima. O .regras--nu não tem fundo próprio: ele é só a coluna que dá a
   medida (cqw) para as cenas, centralizada sobre o vídeo. */
.vitrine{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl);
  overflow:hidden;isolation:isolate;background:#0D1220;
}
.vitrine__fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.vitrine__palco{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.regras.regras--nu{width:min(58%,740px);height:94%;background:none}
.regras--nu .regras__palco{padding:0}
.regras__cena--centro{text-align:center}
/* cena do repasse: mais larga, para o valor e a etiqueta "enviado" caberem na mesma linha */
.regras__cena--larga{max-width:100cqw;padding-left:3.6cqw;padding-right:3.6cqw}
/* cena do repasse: nome | valor | etiqueta, em três colunas — os valores
   alinhados pela esquerda e as etiquetas centralizadas na coluna delas */
.regras__cena--larga .regras__linhas li{
  display:grid;grid-template-columns:30% minmax(0,1fr) auto;align-items:center;gap:3.4cqw;
  font-size:clamp(12px, 3.05cqw, 18px);
}
.regras__cena--larga .regras__linhas b{justify-self:start;font-size:clamp(15px, 3.8cqw, 23px)}
.regras__cena--larga .regras__env{margin-left:0;justify-self:end;font-size:1.8cqw}
/* selo redondo do "pago": cresce quando a cena entra */
.regras__check{
  width:15cqw;height:15cqw;margin:0 auto 3.4cqw;border-radius:50%;display:grid;place-items:center;
  background:rgba(76,158,107,.28);border:1px solid rgba(255,255,255,.55);color:#DFF7E6;
  box-shadow:0 1.6cqw 4cqw -1.2cqw rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transform:scale(.4);opacity:0;transition:transform .7s var(--ecoa) .12s,opacity .5s var(--ease) .12s;
}
.regras__check svg{width:52%;height:52%}
.regras__cena.is-ativa .regras__check{transform:none;opacity:1}
.regras__recibo{
  display:flex;justify-content:space-between;gap:3cqw;margin-top:3.6cqw;padding-top:3cqw;
  border-top:1px dashed rgba(255,255,255,.4);font-size:2.5cqw;color:rgba(255,255,255,.72);
}
/* "enviado" entra depois do valor, um por linha */
.regras__env{
  display:inline-block;margin-left:1.6cqw;padding:.5cqw 1.6cqw;border-radius:99px;
  background:rgba(76,158,107,.3);border:1px solid rgba(255,255,255,.45);
  font-style:normal;font-size:2cqw;font-weight:600;color:#DFF7E6;letter-spacing:.02em;
  opacity:0;transform:translateX(1.4cqw);transition:opacity .45s var(--ease),transform .55s var(--ecoa);
}
.regras__cena.is-ativa .regras__linhas--envio li:nth-child(1) .regras__env{opacity:1;transform:none;transition-delay:.9s}
.regras__cena.is-ativa .regras__linhas--envio li:nth-child(2) .regras__env{opacity:1;transform:none;transition-delay:1.3s}
.regras__cena.is-ativa .regras__linhas--envio li:nth-child(3) .regras__env{opacity:1;transform:none;transition-delay:1.7s}
.regras__cena.is-ativa .regras__linhas--envio li:nth-child(4) .regras__env{opacity:1;transform:none;transition-delay:2.1s}
.regras__cena--foto{text-align:center}
.regras__foto{display:block;width:100%;height:auto;margin:3cqw 0;border-radius:3cqw;
  box-shadow:0 2cqw 6cqw -2cqw rgba(0,0,0,.5)}

/* ---- Pilha "conectando" (integrações, página Plataforma) ----
   Um cartão por sistema: entra por baixo em "Conectando...", confirma com o
   logo e recua para o fundo da pilha quando o próximo chega.
   As medidas saem todas de cqw para a pilha acompanhar a coluna — mas nunca
   no próprio .sync, onde cqw ainda mediria o container de fora. */
.sync{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:820/299;
}
.sync__pilha{position:absolute;inset:0;isolation:isolate}
.sync__card{
  /* left/right 0 + margem automática centraliza os 80cqw na moldura sem mexer
     no transform, que é de quem cuida do empilhamento. */
  position:absolute;left:0;right:0;bottom:0;width:80cqw;margin-inline:auto;
  display:flex;align-items:center;gap:3.2cqw;
  /* O recuo da esquerda é o MESMO --folga que sobra em cima e embaixo do disco:
     com isso o disco fica concêntrico com a calota da pílula, à mesma distância
     do topo e da lateral. Mexer em um sem mexer no outro quebra o encaixe. */
  --folga:1.6cqw;
  padding:0 4.5cqw 0 var(--folga);
  height:16.6cqw;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  --sombra:0 1.1cqw 2.6cqw -.6cqw rgba(20,22,30,.16), 0 .3cqw .8cqw rgba(20,22,30,.05);
  box-shadow:var(--sombra);
  transform:translateY(14%) scale(.97);opacity:0;
  transition:
    transform  .72s cubic-bezier(.32,.72,0,1),
    opacity    .42s var(--ease),
    box-shadow .6s  var(--ease);
  z-index:1;
}
/* Vale para o cartão E para o que há dentro dele: os cartões que já entram
   conectados são preparados enquanto invisíveis, e sem isto o "Conectando..."
   piscaria por um quadro antes de sair. */
.sync__card.sem-transicao,
.sync__card.sem-transicao .sync__txt>span{transition:none}

/* Frente = recém-conectado. Atrás = já conectados, encolhendo para o fundo. */
/* Pilha justa, como no modelo: cada cartão novo entra por baixo e cobre quase
   todo o anterior, deixando à mostra só uma faixa de ~1/3 da altura — o
   suficiente para aparecer o topo colorido do disco de cada sistema.
   Atenção ao somar os dois: o scale encolhe em torno do CENTRO, então ele
   desce o topo do cartão e come parte do translate. A faixa que aparece de
   verdade é  t · altura − (1 − scale) · altura / 2. */
.sync__card.is-frente {opacity:1;transform:none;z-index:5}
.sync__card.is-atras-1{opacity:1;transform:translateY(-38%)  scale(.9); z-index:4}
.sync__card.is-atras-2{opacity:1;transform:translateY(-75%)  scale(.81);z-index:3}
.sync__card.is-atras-3{opacity:1;transform:translateY(-112%) scale(.73);z-index:2}

/* Fim do ciclo: em vez de a pilha apagar, as quatro cartas descem e crescem
   até o MESMO lugar, recolhendo-se numa só. Quem fica visível é a primeira —
   a mesma que reabre o "Conectando..." — então o laço emenda sem corte.
   Vem depois dos níveis de propósito: precisa vencer o transform de cada um. */
.sync.is-juntando .sync__card{
  transform:none;
  transition:transform .72s cubic-bezier(.32,.72,0,1),
             opacity   .46s var(--ease) .14s;
}
.sync.is-juntando .sync__card:not(:first-child){opacity:0}
.sync.is-juntando .sync__card:first-child{opacity:1;z-index:6}

.sync__badge{
  flex:none;display:grid;place-items:center;
  /* altura do cartão menos a folga de cima e a de baixo */
  width:calc(16.6cqw - 2 * var(--folga));
  height:calc(16.6cqw - 2 * var(--folga));
  border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  overflow:hidden;
}
/* Aqui entram os ÍCONES das marcas, não as assinaturas horizontais — dentro de
   um disco, um letreiro comprido precisa encolher tanto que fica ilegível.
   Os dois limites deixam o ícone dentro do quadrado inscrito no círculo, seja
   ele quadrado (CV CRM, Sienge, HypnoBox) ou deitado (SAP). */
.sync__badge img{width:auto;height:auto;max-width:60%;max-height:57%;
  object-fit:contain;display:block}
/* O SAP não é um ícone recortado: é uma placa CHEIA, de cantos retos. Num disco
   redondo ela chega perto da borda muito antes dos outros, então anda menor. */
.sync__badge--placa img{max-width:68%;max-height:44%}

.sync__txt{
  position:relative;flex:1 1 auto;min-width:0;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(14px, 5.3cqw, 29px);line-height:1.1;
  letter-spacing:-.02em;color:var(--text-2);
}
/* Nada de apagar o texto dos cartões recuados: eles continuam escritos e quem
   esconde é o cartão da frente, por sobreposição. Apagar deixava as fatias do
   meio brancas e vazias, com cara de defeito. */
/* Os dois textos ocupam a MESMA linha: um sai enquanto o outro entra, sem
   empurrar o cartão nem mudar a largura. */
.sync__txt>span{display:block}
.sync__ok{position:absolute;inset:0}
/* A troca é em sequência, não em fusão: o "Conectando..." sobe e sai, e só
   então o "Conectado" entra. Sobrepostos, os dois ficavam ilegíveis no meio. */
.sync__card .sync__ligando{opacity:1;transform:none;
  transition:opacity .2s var(--ease), transform .26s var(--ease)}
.sync__card .sync__ok{opacity:0;transform:translateY(72%);
  transition:opacity .24s var(--ease), transform .34s cubic-bezier(.32,.72,0,1)}
.sync__card.is-ok .sync__ligando{opacity:0;transform:translateY(-72%)}
.sync__card.is-ok .sync__ok{opacity:1;transform:none;transition-delay:.18s}

/* O logo do parceiro fica visível o tempo todo — é ele que diz COM QUEM a
   conexão está sendo feita. Quem sinaliza o "em andamento" é o halo pulsante
   em volta do disco, que some quando conecta. */
/* O halo envolve o CARTÃO inteiro, não o disco: ouro pulsando enquanto conecta,
   verde discreto assim que confirma — e o verde fica em TODOS os já conectados,
   não só no da frente, para a pilha inteira ler como ligada.
   É box-shadow, e não um ::before, porque a sombra externa pinta ATRÁS do
   fundo branco da pílula; um pseudo-elemento com z-index negativo pintaria
   por cima dele. */
.sync__card.is-frente:not(.is-ok){
  animation:sync-pulso 1.5s var(--ease) infinite;
}
.sync__card.is-ok{
  box-shadow:0 0 2.2cqw .45cqw rgba(31,157,85,.22), var(--sombra);
}
@keyframes sync-pulso{
  0%,100%{box-shadow:0 0 0 0 rgba(233,201,122,0),   var(--sombra)}
  50%    {box-shadow:0 0 2.6cqw .8cqw rgba(233,201,122,.6), var(--sombra)}
}

/* As reticências sobem em onda enquanto a conexão está em curso. */
.sync__ligando i{display:inline-block;font-style:normal;
  animation:sync-onda 1.05s ease-in-out infinite}
.sync__ligando i:nth-child(2){animation-delay:.14s}
.sync__ligando i:nth-child(3){animation-delay:.28s}
@keyframes sync-onda{
  0%,60%,100%{transform:translateY(0);   opacity:.35}
  30%        {transform:translateY(-32%);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .sync__card,.sync__txt>span{transition:none}
  .sync__ligando i,.sync__card{animation:none}
}

/* ---- Foto + pilha de frases (3ª seção) ----
   A moldura é a arte inteira; a foto ocupa só um pedaço dela, deixando livre
   o canto onde a pilha de cartões se apoia. */
.lucro{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:1033/1019;
}
/* A foto encolhe conforme a página rola — o JS escreve --zoom (1 a 1.14).
   O recorte fica na moldura, então o zoom corta em vez de transbordar. */
/* A altura para em 89.8% (e não em 94.9%) para sobrar a mesma faixa de cinza
   embaixo que já existia em cima — antes a foto encostava na base do painel. */
.lucro__foto{
  position:absolute;left:4.45%;top:5.10%;width:95.55%;height:89.80%;
  border-radius:1.9cqw;overflow:hidden;
}
.lucro__foto img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
  transform:scale(var(--zoom,1));
  transform-origin:50% 45%;
  will-change:transform;
}

/* A pilha fica um pouco abaixo do topo da moldura: é essa folga que deixa os
   cartões antigos espiarem por cima, já sobre a foto — brancos sobre o cinza
   do painel eles sumiriam. */
/* alto o bastante para não cobrir o logo M2PAG na tela do notebook */
/* A altura vem da proporção das artes (478x222), que são idênticas — por
   isso a pilha não precisa mais igualar altura por JS. */
.lucro__pilha{position:absolute;left:0;top:1.5%;width:42%;aspect-ratio:478/222;isolation:isolate}
/* As artes já trazem fundo e texto — aqui a posição, o estado e um reforço
   de sombra. drop-shadow (e não box-shadow) porque segue o recorte do PNG:
   box-shadow desenharia um retângulo em volta da moldura transparente. */
.lucro .lucro__card{
  margin:0;
  position:absolute;left:0;top:0;width:100%;height:auto;
  display:block;border-radius:0;
  filter:drop-shadow(0 1.6cqw 2.4cqw rgba(20,22,30,.34));
  transition:transform .68s cubic-bezier(.32,.72,0,1), opacity .46s var(--ease);
  will-change:transform;
  /* Estado de entrada. No vídeo de referência o cartão novo praticamente
     materializa no lugar — quem se move é a pilha atrás dele. Por isso o
     deslocamento aqui é mínimo: quase só o fade. */
  transform:translateY(.6cqw) scale(.99);
  opacity:0;z-index:1;
}
.lucro .lucro__card.is-frente{opacity:1;transform:none;z-index:4}
.lucro .lucro__card.is-atras-1{opacity:1;transform:translateY(-2.4cqw) scale(.955);z-index:3}
.lucro .lucro__card.is-atras-2{opacity:1;transform:translateY(-4.8cqw) scale(.91);z-index:2}
/* usada por um quadro só, para o cartão que volta ao fim da fila não
   atravessar a pilha inteira de volta */
.lucro .lucro__card.sem-transicao{transition:none}
@media (prefers-reduced-motion:reduce){
  .lucro__foto img{transform:none}
  .lucro .lucro__card{transition:none}
}
/* Exceção autorizada à escala única de seção: aqui são DOIS títulos empilhados
   numa coluna de ~600px. Em 42px a primeira frase quebrava em 3 linhas e o
   bloco virava um paredão de 4 linhas. Em 36px cada frase fecha em 2 linhas. */
.feature-panel h2{font-size:clamp(22px, 16.8px + 1.333vw, 36px);line-height:1.18}
.feature-panel h2+h2{margin-top:18px}
.checklist{margin-top:30px;display:flex;flex-direction:column;gap:15px}
.checklist li{display:flex;align-items:flex-start;gap:13px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.45;color:var(--text-2)}
.checklist svg{width:21px;height:21px;flex:none;margin-top:1px;color:var(--ink)}
.checklist--gold svg{color:var(--gold-deep)}

/* ==========================================================================
   PASSOS (telefone + timeline)
   ========================================================================== */
.steps__head{text-align:center;max-width:1000px;margin-inline:auto}
.steps__head h2{margin-top:24px}
.steps__head p{margin-top:22px}
.steps__body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);margin-top:clamp(40px,5vw,72px);align-items:center}
.steps__media{position:relative;display:flex;justify-content:center}

/* --------------------------------------------------------------------------
   Órbita de integrações (seção "Como funciona")

   A M2PAG fica no centro e os ERPs/CRMs giram em volta. O JS escreve a
   posição de cada nó a cada quadro; o CSS só cuida da aparência.
   -------------------------------------------------------------------------- */
.orbita{
  position:relative;width:100%;max-width:520px;aspect-ratio:1;
  container-type:inline-size;
  display:grid;place-items:center;
  --raio:37%;
  /* Contexto de empilhamento próprio: os z-index de dentro (logos até 150,
     centro em 60) valem só aqui e nunca passam por cima do header fixo. */
  isolation:isolate;
}
.orbita__anel{
  position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);
}
.orbita__anel--2{width:96%;border-color:var(--line-2);opacity:.5}

.orbita__centro{
  position:relative;z-index:60;
  width:19%;aspect-ratio:1;border-radius:26%;
  box-shadow:0 3cqw 6cqw -2cqw rgba(20,22,30,.34);
}
/* brilho dourado por trás do logo — fora do overflow:hidden, senão ficaria
   recortado no quadrado do ícone */
.orbita__centro::before{
  content:"";position:absolute;inset:-46%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(233,201,122,.62) 0%, rgba(233,201,122,.30) 42%, rgba(233,201,122,0) 72%);
  filter:blur(2.4cqw);
}
.orbita__centro img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;position:relative;
}
/* halo que pulsa, dando a sensação de sinal saindo do centro.
   Só o ::after: o ::before já é o brilho dourado fixo, logo acima. */
.orbita__centro::after{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  border:1px solid var(--gold);opacity:0;
  animation:orbita-halo 3s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes orbita-halo{
  0%   {transform:scale(.9);opacity:.55}
  70%  {transform:scale(1.9);opacity:0}
  100% {transform:scale(1.9);opacity:0}
}

.orbita__no{
  position:absolute;top:50%;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:1.6cqw;
  padding:0;background:none;border:0;cursor:pointer;
  transition:opacity .5s var(--ease);
  /* --x/--y vêm do JS; o -50% recentra o nó no ponto calculado */
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0));
}
.orbita__disco{
  display:grid;place-items:center;
  width:17cqw;height:17cqw;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(20,22,30,.24);
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.orbita__disco img{
  width:76%;max-height:58%;object-fit:contain;display:block;
}
/* Enquanto o disco mostra o NOME (e não a marca), o rótulo de baixo repetiria
   a mesma palavra. Ele fica só para leitor de tela e para a ficha; ao trocar
   o <b> pelo <img> da marca, é só apagar estas duas linhas. */
.orbita__nome{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  font-size:2.4cqw;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:color .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .orbita__no:hover .orbita__disco{transform:scale(1.09);border-color:var(--gold)}
}
.orbita__no[aria-expanded="true"] .orbita__disco{
  transform:scale(1.22);border-color:var(--gold);
  box-shadow:0 2cqw 4.6cqw -1.4cqw rgba(150,114,7,.42);
}
.orbita__no[aria-expanded="true"] .orbita__nome{color:var(--text)}

/* Cabo de energia entre o nó escolhido e o centro. O SVG cobre a órbita
   inteira em coordenadas 0-100, então o JS só precisa da posição em % —
   sem depender do tamanho em pixels, que muda com a tela. */
.orbita__cabo{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:40;pointer-events:none;overflow:visible;
}
.orbita__cabo-fio{
  fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0;
  transition:opacity .3s var(--ease);
}
/* o pulso é um tracinho curto que corre pelo fio, como energia passando */
.orbita__cabo-pulso{
  fill:none;stroke:var(--gold-deep);stroke-width:4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0;
  stroke-dasharray:7 93;
}
.orbita.is-ligada .orbita__cabo-fio:not(.orbita__cabo-fio--baixo){opacity:.55}
.orbita.is-ligada .orbita__cabo-pulso{
  opacity:1;animation:orbita-pulso 1.15s linear infinite;
}
@keyframes orbita-pulso{
  from{stroke-dashoffset:100}
  to  {stroke-dashoffset:0}
}
/* --------------------------------------------------------------------------
   Cena 2 — "Ao lançar uma venda"

   Os outros logos somem, o escolhido sobe até o topo e a M2PAG despacha o
   boleto para o cliente. A órbita inteira congela: quem manda aqui são as
   classes, não mais o laço de rotação.
   -------------------------------------------------------------------------- */
.orbita.is-cena2 .orbita__anel{opacity:0;transition:opacity .6s var(--ease)}
.orbita.is-cena2 .orbita__no{
  transition:opacity .6s var(--ease), transform 1.4s cubic-bezier(.32,.72,0,1);
}
/* os não escolhidos encolhem e saem */
.orbita.is-cena2 .orbita__no:not([aria-expanded="true"]){
  opacity:0 !important;pointer-events:none;
  transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) scale(.55);
}
/* o escolhido sobe devagar até o topo, alinhado com o centro */
.orbita.is-cena2 .orbita__no[aria-expanded="true"]{
  transform:translate(-50%,-50%) translate(0cqw,-31cqw);
}

/* o cabo de cima passa a ser sempre vertical */
.orbita.is-cena2 .orbita__cabo-fio,
.orbita.is-cena2 .orbita__cabo-pulso{transition:none}

.orbita__cabo-fio--baixo{opacity:0}
.orbita.is-cena2 .orbita__cabo-fio--baixo{
  opacity:.55;transition:opacity .4s var(--ease) 1.1s;
}

/* caixa do cliente, embaixo */
.orbita__cliente{
  position:absolute;top:50%;left:50%;z-index:58;
  transform:translate(-50%,-50%) translate(0,31cqw) scale(.8);
  display:flex;flex-direction:column;align-items:center;gap:1.4cqw;
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease) .5s, transform .7s cubic-bezier(.32,.72,0,1) .5s;
}
.orbita.is-cena2 .orbita__cliente{
  opacity:1;transform:translate(-50%,-50%) translate(0,31cqw) scale(1);
}
.orbita__cliente-icone{
  display:grid;place-items:center;
  width:17cqw;height:17cqw;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(20,22,30,.24);
  color:var(--muted);
}
.orbita__cliente-icone svg{width:52%;height:52%}
.orbita__cliente b{
  font-family:var(--font-display);font-weight:700;
  font-size:2.8cqw;color:var(--text);
}

/* a pasta com o boleto desce do centro até o cliente, em looping */
.orbita__envio{
  position:absolute;top:50%;left:50%;z-index:59;
  width:9cqw;opacity:0;pointer-events:none;
}
.orbita__envio svg{width:100%;height:auto;display:block}
.orbita.is-cena2 .orbita__envio{
  animation:orbita-envio 2.4s cubic-bezier(.55,0,.45,1) infinite 1.2s;
}
@keyframes orbita-envio{
  0%   {transform:translate(-50%,-50%) translate(0,2cqw)  scale(.6);opacity:0}
  18%  {opacity:1}
  78%  {opacity:1}
  100% {transform:translate(-50%,-50%) translate(0,24cqw) scale(1);opacity:0}
}

/* --------------------------------------------------------------------------
   Cena 3 — "Após a confirmação do pagamento"

   O parceiro sai de cena, o cliente vira um aviso de pagamento confirmado e,
   quando ele some, entram os quatro envolvidos recebendo a comissão.
   Os tempos são encadeados por atraso de animação, não por relógio no JS.
   -------------------------------------------------------------------------- */
/* A cena 3 começa IGUAL à 2 — parceiro no topo, cliente embaixo. O aviso de
   pagamento entra primeiro, sobre o cliente; só depois dele o resto se move.
   Daí o atraso de 1.2s repetido abaixo: é o tempo do aviso aparecer. */
.orbita.is-cena3 .orbita__no{
  opacity:0 !important;pointer-events:none;
  transition:opacity .5s var(--ease) 1.2s;
}
.orbita.is-cena3 .orbita__cabo-fio:not(.orbita__cabo-fio--pagar),
.orbita.is-cena3 .orbita__cabo-pulso{
  opacity:0;transition:opacity .5s var(--ease) 1.2s;
}

/* Sem o parceiro no topo, o conjunto sobe para ficar no meio do quadro.
   Centro, cabos e equipe sobem JUNTOS — se só um subisse, os fios
   deixariam de encostar nos ícones. */
.orbita.is-cena3 .orbita__centro,
.orbita.is-cena3 .orbita__cabo,
.orbita.is-cena3 .orbita__equipe{
  transition:transform .8s cubic-bezier(.32,.72,0,1) 1.2s;
}
/* A subida é em cqw (1% da largura da órbita) e NÃO em %: em porcentagem
   cada peça mediria contra a própria altura — o logo subiria 6px e os cabos
   32px, desalinhando o conjunto. Em cqw todos andam a mesma distância. */
.orbita.is-cena3 .orbita__centro{transform:translateY(-21cqw) scale(1.16)}
.orbita.is-cena3 .orbita__cabo,
.orbita.is-cena3 .orbita__equipe{transform:translateY(-21cqw)}


/* o aviso ocupa o lugar do cliente e sai depois de dois segundos */
.orbita__confirma{
  position:absolute;top:50%;left:50%;z-index:58;
  transform:translate(-50%,-50%) translate(0,31cqw);
  display:flex;align-items:center;gap:1.4cqw;white-space:nowrap;
  padding:2.2cqw 3.4cqw;border-radius:99px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1.6cqw 3.4cqw -1.4cqw rgba(20,22,30,.24);
  font-family:var(--font-display);font-weight:700;font-size:2.8cqw;
  color:var(--text);opacity:0;pointer-events:none;
}
.orbita__confirma svg{width:3.4cqw;height:3.4cqw;color:#1E9E5A;flex:none}
/* Fica no lugar do cliente do começo ao fim — não sobe junto com o resto,
   porque ele encerra a etapa do boleto em vez de seguir para a próxima. */
.orbita.is-cena3 .orbita__confirma{animation:orbita-confirma 2.2s var(--ease) forwards}
@keyframes orbita-confirma{
  0%   {opacity:0;transform:translate(-50%,-50%) translate(0,31cqw) scale(.86)}
  16%  {opacity:1;transform:translate(-50%,-50%) translate(0,31cqw) scale(1)}
  62%  {opacity:1;transform:translate(-50%,-50%) translate(0,31cqw) scale(1)}
  100% {opacity:0;transform:translate(-50%,-50%) translate(0,31cqw) scale(.94)}
}
/* O cliente sai assim que o aviso entra — o aviso TOMA O LUGAR dele.
   Mantendo os dois na tela juntos, o ícone aparecia atrás da tarja. */
.orbita.is-cena3 .orbita__cliente{opacity:0;transition:opacity .3s var(--ease) .1s}
.orbita.is-cena3 .orbita__envio{animation:none;opacity:0;transition:opacity .3s var(--ease) .3s}

/* os quatro envolvidos entram quando o aviso termina */
.orbita__equipe{position:absolute;inset:0;pointer-events:none}
.orbita__membro{
  position:absolute;top:82%;left:var(--px);transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;gap:1.2cqw;
  width:22cqw;text-align:center;opacity:0;
}
.orbita.is-cena3 .orbita__membro{animation:orbita-membro .6s var(--ease) 2.4s forwards}
.orbita.is-cena3 .orbita__membro:nth-child(2){animation-delay:2.55s}
.orbita.is-cena3 .orbita__membro:nth-child(3){animation-delay:2.7s}
.orbita.is-cena3 .orbita__membro:nth-child(4){animation-delay:2.85s}
@keyframes orbita-membro{
  from{opacity:0;transform:translate(-50%,14%) scale(.9)}
  to  {opacity:1;transform:translate(-50%,0) scale(1)}
}
.orbita__membro-icone{
  display:grid;place-items:center;
  width:13cqw;height:13cqw;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1.4cqw 3cqw -1.4cqw rgba(20,22,30,.24);
  color:var(--muted);
}
.orbita__membro-icone svg{width:52%;height:52%}
.orbita__membro b{
  font-family:var(--font-display);font-weight:600;
  font-size:2.2cqw;line-height:1.2;color:var(--text-2);
}

/* cabos de pagamento e cifrões correndo por eles */
.orbita__cabo-pagar{opacity:0}
.orbita.is-cena3 .orbita__cabo-pagar{
  animation:orbita-aparece .5s var(--ease) 3.45s forwards;
}
.orbita__cabo-fio--pagar{opacity:.5}
.orbita__cifra{
  font-family:var(--font-display);font-weight:700;font-size:5px;
  fill:var(--gold-deep);text-anchor:middle;dominant-baseline:middle;
}
@keyframes orbita-aparece{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .orbita__confirma,.orbita__membro,.orbita__cabo-pagar{animation:none;opacity:1}
  .orbita__envio{animation:none}
  .orbita__centro::after{animation:none}
  .orbita__no,.orbita__disco{transition:none}
}

/* --------------------------------------------------------------------------
   Tela do celular (seção "Como funciona")

   A área útil foi medida no próprio mockup: a moldura preta ocupa as bordas,
   e a tela branca começa em 3.75% / 2.38% e mede 91.09% x 95.01%.
   -------------------------------------------------------------------------- */
.tela{
  position:absolute;left:3.75%;top:2.38%;width:91.09%;height:95.01%;
  container-type:size;
  border-radius:7cqw;overflow:hidden;
  pointer-events:none;
}
.steps__media img + .tela{
  /* a tela acompanha a imagem, que é centrada e medida pela altura */
  left:50%;width:min(91.09% , calc(min(74vh,660px) * (640/1302) * .9109));
  transform:translateX(-50%);
}
.tela__cena{
  position:absolute;inset:0;
  opacity:0;transition:opacity .45s var(--ease);
}
.tela__cena.is-ativa{opacity:1}

/* ---- Cena 1: CRM/ERP -> M2PAG -> corretores ---- */
.fluxo{
  height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;padding:8cqh 6cqw;
}
.fluxo__topo,.fluxo__base{display:flex;justify-content:space-between;width:100%}
.fluxo__base{gap:3cqw}
.fluxo__caixa{
  display:grid;place-items:center;
  width:30cqw;height:13cqh;border-radius:3cqw;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 2cqw 4cqw -2cqw rgba(20,22,30,.18);
  font-family:var(--font-display);font-weight:700;
  font-size:6cqw;letter-spacing:.02em;color:var(--text);
}
.fluxo__hub{
  display:grid;place-items:center;flex:none;
  width:30cqw;height:30cqw;border-radius:7cqw;overflow:hidden;
  box-shadow:0 3cqw 6cqw -2cqw rgba(20,22,30,.34);
}
.fluxo__hub img{width:100%;height:100%;object-fit:cover;display:block}
.fluxo__pessoa{
  display:grid;place-items:center;
  flex:1;height:9cqh;border-radius:2.6cqw;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1.6cqw 3cqw -1.6cqw rgba(20,22,30,.18);
  color:var(--muted);
}
.fluxo__pessoa svg{width:52%;height:52%}

/* Os fios ligam as três fileiras. Proporção fixa (sem esticar o viewBox) para
   os cifrões que correm por eles não saírem deformados. */
.fluxo__fios{width:100%;aspect-ratio:200/90;display:block;overflow:visible}
.fluxo__fio{
  fill:none;stroke:var(--line-2);stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.fluxo__cifra{
  font-family:var(--font-display);font-weight:700;font-size:11px;
  fill:var(--gold-deep);text-anchor:middle;dominant-baseline:middle;
}
@media (prefers-reduced-motion:reduce){
  .tela__cena{transition:none}
}
.steps__list{position:relative;padding-left:52px}
/* A linha some nas duas pontas em vez de terminar cortada */
.steps__list::before{
  content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,
    rgba(233,201,122,0) 0,
    var(--gold) 11%,
    var(--gold) 89%,
    rgba(233,201,122,0) 100%);
}
.step{position:relative;padding-block:clamp(18px,2.2vw,32px)}

/* Um passo em foco por vez: os outros ficam cinzas e levemente reduzidos.
   O apagamento vai no TEXTO, nunca no <li>: opacity no pai deixaria a bolinha
   translúcida e a linha amarela apareceria por trás dela. */
[data-steps] .step{
  transform-origin:left center;
  transition:transform .4s var(--ease);
  transform:scale(.965);
}
[data-steps] .step.is-active{transform:none}
[data-steps] .step h3,[data-steps] .step p{transition:opacity .4s var(--ease), color .4s var(--ease)}
[data-steps] .step:not(.is-active) h3,
[data-steps] .step:not(.is-active) p{opacity:.6}
[data-steps] .step:not(.is-active) h3,
[data-steps] .step:not(.is-active) .step__trigger,
[data-steps] .step:not(.is-active) p,
[data-steps] .step:not(.is-active) p b{color:var(--muted);font-weight:inherit}
[data-steps] .step.is-active .step__num{background:var(--gold);color:#3A2C05}
.step__num{transition:background-color .4s var(--ease), color .4s var(--ease)}
.step__trigger{
  display:block;width:100%;text-align:left;padding:0;
  font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
[data-steps] .step{cursor:pointer}
.step__trigger:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;border-radius:4px}
.step__num{
  position:absolute;left:-52px;top:calc(clamp(18px,2.2vw,32px) + 2px);
  width:33px;height:33px;border-radius:50%;
  /* fundo opaco: a bolinha tapa a linha amarela que passa atrás dela */
  background:var(--surface-3);color:#B4B4B4;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:16px;font-weight:700;
}
.step h3{font-family:var(--font-text);font-weight:600;font-size:clamp(17px, 14.77px + 0.571vw, 23px);line-height:1.25;color:var(--text-2);letter-spacing:-.01em}
.step p{margin-top:10px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:var(--muted)}
.step p b{color:var(--text-2)}
.step em{font-style:italic}

/* ==========================================================================
   AUDIÊNCIA (constrói / vende)
   ========================================================================== */
/* a pílula desce um pouco e cola mais no título */
.audience__eyebrow{margin-top:clamp(14px,2vw,28px)}
.audience{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(16px,1.7vw,24px)}
/* Exceção proposital: o display de "Resultados reais" é maior que --fs-section */
.audience h2{max-width:none;font-size:clamp(32px, 16.77px + 3.905vw, 73px)}
.switch{
  /* grid de colunas iguais: os dois botões ficam do mesmo tamanho */
  display:inline-grid;grid-template-columns:1fr 1fr;gap:16px;
  background:transparent;padding:0;
  margin-top:clamp(28px,3vw,44px);
}
.switch button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 26px;border-radius:var(--radius-pill);
  background:var(--gold);
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-ink);
  transition:box-shadow .24s var(--ease), color .24s var(--ease), opacity .24s var(--ease), transform .24s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .switch button:hover{transform:translateY(-1px)} }
.switch button svg{width:16px;height:16px}
.switch button[aria-selected="true"]{
  color:#3A2C05;
  /* anel por fora, com uma folga fina entre ele e o botão */
  outline:2px solid var(--gold-deep);outline-offset:2px;
}
.switch button[aria-selected="false"]{opacity:.82}
/* Palco dos cards: o segundo fica espiando pela direita, cortado na borda da
   tela. Ao clicar "Vende" ele desliza da direita para a esquerda por cima do
   primeiro; ao clicar "Constrói" volta para a direita. */
.audience__stage{
  /* sangra até a borda da viewport para o card cortado aparecer */
  margin-right:min(0px, calc((var(--container) + var(--gutter)*2 - 100vw) / 2));
  overflow:hidden;
  padding-block:6px;            /* respiro para a sombra dos cards */
}
.audience__cards{display:grid;grid-template-columns:minmax(0,1fr)}
.acard{
  grid-area:1/1;
  width:min(100%, 520px);
  border-radius:28px;padding:clamp(28px,3vw,44px);
  /* os dois trocam de lugar: quem sai vai para a direita, quem entra ocupa a frente */
  transform:translateX(calc(100% + 22px));
  z-index:1;
  transition:transform .7s cubic-bezier(.76,0,.24,1), box-shadow .7s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.acard.is-active{
  transform:translateX(0);
  z-index:3;
}
.acard--light{background:var(--gold)}
.acard--dark{background:var(--gold-deep-2)}
.acard__tag{
  display:inline-block;width:auto;align-self:flex-start;
  padding:7px 15px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;line-height:1.2;
}
.acard--light .acard__tag{background:#F2DDAA;color:#4B3A0C}
.acard--dark .acard__tag{background:#A98717;color:#2C2103}
.acard h3{
  margin-top:22px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(16px, 13.77px + 0.571vw, 22px);line-height:1.22;text-transform:uppercase;letter-spacing:-.005em;
}
.acard--light h3{color:#3A2C05}
.acard--dark h3{color:var(--white)}
.acard ul{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.acard li{display:flex;gap:11px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.35}
.acard li svg{width:16px;height:16px;flex:none;margin-top:4px}
.acard--light li{color:#4B3A0C}
.acard--dark li{color:#FBF3DF}

/* ==========================================================================
   NÚMEROS (card escuro)
   ========================================================================== */
.stats{
  background:var(--ink);color:var(--white);
  border-radius:var(--radius-xl);
  padding:clamp(32px,4.5vw,72px);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(32px,4vw,64px);align-items:center;
}
.stats__lead{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(25px, 15.71px + 2.381vw, 50px);line-height:1.14;letter-spacing:-.02em;
}
.stats__lead b{font-weight:700;color:var(--gold)}
/* números que sobem de 0: largura fixa por dígito para o texto não tremer */
[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stats__text{margin-top:26px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.55;color:var(--muted-dark);max-width:52ch}
.stats__link{margin-top:26px;color:var(--white);font-weight:500}
.stats__items{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,38px)}
.stat{display:flex;align-items:center;gap:20px}
.stat__icon{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:#161B26;display:grid;place-items:center;color:#D6D8DE
}
.stat__icon svg{width:21px;height:21px}
.stat__value{font-family:var(--font-display);font-weight:500;font-size:clamp(22px, 15.69px + 1.619vw, 39px);line-height:1.1;letter-spacing:-.02em}
.stat__value b{font-weight:700}

/* "<60 seg": uma onda que percorre letra a letra, do "<" até o "g", uma vez
   só quando o dado entra na tela. Cada letra cresce e volta ao normal — é a
   passagem da onda que dá o destaque, não um texto que fica maior. */
.stat__pop{display:inline-block}
.stat__pop__ch{
  display:inline-block;white-space:pre;
  transform-origin:50% 100%;   /* cresce a partir da linha de base */
  will-change:transform;
}
.stat__pop.is-in .stat__pop__ch{animation:onda-letra .58s cubic-bezier(.22,1,.36,1) both}
@keyframes onda-letra{
  0%   {transform:translateY(0) scale(1)}
  45%  {transform:translateY(-3px) scale(1.16)}
  100% {transform:translateY(0) scale(1)}
}
/* cópia só para leitor de tela: as letras animadas ficam escondidas dele */
.stat__pop__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.stats__title{font-size:var(--fs-section);line-height:1.16;max-width:none;text-wrap:pretty}
.savings-line{text-align:center;margin-top:clamp(44px,5vw,80px)}
.savings-line__value{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px, 9.2px + 5.333vw, 86px);line-height:1;letter-spacing:-.03em;
  color:var(--gold-deep);
}
.savings-line__label{margin-top:18px;font-size:clamp(16px, 14.51px + 0.381vw, 20px);color:var(--muted)}

/* ==========================================================================
   SEGURANÇA
   ========================================================================== */
.security__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);gap:clamp(24px,4vw,48px);align-items:center}
.security__top p{margin-top:20px;max-width:46ch}
.security__top .btn{margin-top:30px}
/* Quem é o item da grade é o <picture>, não o <img>: ele carrega a caixa que
   antes era do <img> (largura, limite e margem), e o <img> só preenche.
   ATENÇÃO: `display:contents` aqui NÃO funciona — ele promove também o
   <source> a item da grade, o cofre cai para a coluna errada e desce uma
   linha inteira. */
.security__top .cofre{display:block;width:100%;max-width:340px;margin-left:auto}
.security__top img{
  width:100%;max-width:none;margin:0;display:block;
  /* o tilt 3D é escrito pelo JS em --rx/--ry; sem JS a imagem fica parada */
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.security__top img.is-tilting{transition:transform .12s linear}
/* topo da página Segurança: cofre maior e encostado à esquerda da coluna,
   e os cartões logo abaixo sobem um pouco */
.seg-topo{grid-template-columns:minmax(0,1fr) minmax(0,.66fr)}
.seg-topo .cofre{max-width:460px;margin-left:0;margin-right:auto}
/* fio separando o topo da página dos três cartões */
.seg-cards{margin-top:0;row-gap:clamp(44px,5vw,78px);
  border-top:1px solid var(--line);padding-top:clamp(34px,4vw,62px)}
/* foto do atendimento mais alta, preenchendo a coluna */
/* `.benefits__media img` vem depois no arquivo e tem a mesma força; por isso
   o seletor aqui precisa das duas classes para vencer */
.benefits__media.seg-foto img{width:100%;height:clamp(340px,41vw,585px);object-fit:cover;object-position:50% 50%}
/* a foto do celular perde 80px na base, mantendo o topo do enquadramento */
.benefits__media.seg-app img{width:100%;height:clamp(420px,50vw,725px);object-fit:cover;object-position:50% 0}

/* painéis das abas de segurança: só o ativo aparece */
/* abas de segurança: os botões ocupam o lugar do título, e cada painel traz a
   própria tag e descrição. `display` precisa vencer regras que vêm depois no
   arquivo, por isso o seletor repete a classe. */
.segmented.segmented--grande button{padding:16px 32px;font-size:clamp(15px,13px + .35vw,19px)}
.seg-painel.seg-painel{display:none}
.seg-painel.seg-painel.is-active{display:block;animation:fadeUp .35s var(--ease)}
/* item com bolinha de ícone à esquerda (dobra da conta) */
/* a bolinha fica centrada em relação ao par título + descrição */
.benefits__list .seg-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.seg-ic{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(233,201,122,.14);border:1px solid rgba(233,201,122,.3);color:var(--gold);
}
.seg-ic svg{width:22px;height:22px}
/* fio separando a descrição dos itens */
.seg-painel__head{border-bottom:1px solid var(--line);padding-bottom:clamp(22px,2.4vw,32px)}
.seg-linha{border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:clamp(22px,2.4vw,32px)}
/* ---- Faixa "Encontrou uma falha?" ----
   Degradê dourado para laranja e, no centro, um cartão branco com o convite. */
.falha{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(56px,7vw,110px) 0;
  background:
    radial-gradient(90% 120% at 12% 0%, #F7DFA4 0%, rgba(247,223,164,0) 58%),
    radial-gradient(80% 110% at 88% 100%, #D9741E 0%, rgba(217,116,30,0) 62%),
    linear-gradient(118deg, #E9C97A 0%, #E0A33A 42%, #C8752A 100%);
}
.falha__textura{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* é a própria arte da referência: uma peça só, cobrindo a faixa */
  background:url("../img/m2-textura.png") no-repeat center/cover;
  opacity:.13;
}
.falha .container{position:relative;z-index:1}
.falha__card{
  max-width:860px;margin-inline:auto;text-align:center;
  background:var(--white);border-radius:var(--radius-xl);
  padding:clamp(34px,4.4vw,70px) clamp(22px,4vw,64px);
  box-shadow:0 30px 70px -30px rgba(90,60,10,.45);
}
.falha__tit{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(26px, 12px + 2.4vw, 46px);
}
.falha__txt{margin:clamp(18px,2vw,26px) auto 0;max-width:62ch;color:var(--muted);
  font-size:clamp(15px,14px + .3vw,18px);line-height:1.6}
.falha__cta{justify-content:center;margin-top:clamp(26px,3vw,40px)}
.seg-tag.seg-tag{display:none}
.seg-tag.seg-tag.is-active{display:inline-flex}
.seg-painel__head{margin-top:clamp(22px,2.6vw,34px);max-width:70ch}
.seg-painel__head .body{margin-top:14px}
.seg-painel .security__grid{margin-top:clamp(40px,4.6vw,72px)}
/* destaque ao passar o mouse nos itens das duas listas longas */
.seg-painel .sec-item,
.seg-cards-escuros .sec-item{
  padding:clamp(14px,1.4vw,20px);border-radius:var(--radius-lg);margin:calc(clamp(14px,1.4vw,20px) * -1);
  transition:background-color .26s var(--ease), transform .26s var(--ease);
}
.seg-painel .sec-item:hover{background:var(--surface-2);transform:scale(1.025)}
.seg-cards-escuros .sec-item:hover{background:rgba(255,255,255,.07);transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .seg-painel .sec-item,.seg-cards-escuros .sec-item{transition:none}
  .seg-painel .sec-item:hover,.seg-cards-escuros .sec-item:hover{transform:none}
}
/* dobra escura da conta: títulos e textos clareados para ler sobre o preto */
.seg-conta .benefits__list h3{color:var(--white)}
.seg-conta .benefits__list p{color:#C9CCD3}
@media (max-width:1024px){
  .seg-topo img{margin-inline:auto}
}
.security__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px)}
.sec-item__icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--surface-3);display:grid;place-items:center;color:var(--text-2);
  margin-bottom:22px;
  transition:transform .32s cubic-bezier(.22,1,.36,1), background-color .32s var(--ease);
}
.sec-item__icon svg{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){
  .sec-item:hover .sec-item__icon{transform:scale(1.12);background:var(--gold-soft)}
}
.sec-item h3{font-size:clamp(15px, 13.89px + 0.286vw, 18px);font-weight:700;color:var(--muted-2);line-height:1.3}
.sec-item p{margin-top:4px;font-size:clamp(15px, 13.89px + 0.286vw, 18px);line-height:1.4;color:var(--muted)}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog__head h2{margin-top:24px;max-width:22ch}
.blog__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.5vw,56px);margin-top:clamp(34px,4vw,56px)}
.post-thumb{
  background:var(--surface-3);border-radius:var(--radius-lg);
  aspect-ratio:16/10;width:100%;overflow:hidden;
}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post--feature .post-thumb{aspect-ratio:4/3}
.post__meta{margin-top:18px;font-size:14px;font-weight:500;color:#9E823A}
.post__meta span{color:var(--muted)}
.post h3{margin-top:10px;font-size:clamp(16px, 14.51px + 0.381vw, 20px);font-weight:600;line-height:1.32;color:var(--text);letter-spacing:-.01em}
.post p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}
/* o realce de passagem só vale quando o cartão é mesmo um link: enquanto a
   matéria não existe ele é um <article>, e prometer clique seria enganoso */
a.post:hover h3{color:var(--gold-ink)}
.post-list{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,34px)}
.posts-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.post--row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.post--row .post-thumb{aspect-ratio:16/11}
.post--row .post__meta{margin-top:0}

/* --------------------------------------------------------------------------
   PÁGINAS DO BLOG
   A faixa de indicadores, a abertura e os quatro temas. Tudo abaixo é
   escopado em .tape, .page-hero--blog, .tema ou .posts-grid, que só existem
   nas cinco páginas do blog: a seção de blog da home não é afetada.
   -------------------------------------------------------------------------- */

/* ---------- Faixa de indicadores (estilo painel de bolsa) ----------
   Ela ocupa a barra preta do topo das páginas do blog, no lugar do suporte,
   do WhatsApp e das redes sociais. O preto e a altura vêm do .topbar, que é
   o mesmo do resto do site: a faixa só roda dentro dele, de ponta a ponta,
   sem o recuo do container. */
.topbar--tape{padding:0}
.tape{
  position:relative;overflow:hidden;color:var(--white);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.tape__track{
  display:flex;width:max-content;
  animation:tape-scroll 52s linear infinite;
  will-change:transform;
}
.tape__group{
  display:flex;align-items:center;flex:none;
  margin:0;padding:0 0 0 clamp(30px,5vw,68px);list-style:none;
  gap:clamp(30px,5vw,68px);
}
/* center, não baseline: com a altura fixa da barra, alinhar pela linha de
   base encosta os três textos no topo da caixa em vez de centralizá-los. */
.tape__item{
  display:flex;align-items:center;gap:9px;flex:none;
  height:var(--topbar-h);
  font-size:clamp(12.5px,11.9px + .15vw,14px);white-space:nowrap;
}
/* o ponto separa um indicador do outro sem desenhar uma borda */
.tape__item::before{
  content:"";flex:none;
  width:3px;height:3px;border-radius:50%;background:#3A3B42;
  margin-right:clamp(21px,3.5vw,48px);
}
.tape__nome{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
/* o mês de referência do índice: cada um sai numa data, o IPCA costuma ficar
   um mês atrás dos dois da FGV */
.tape__ref-mes{color:#8C8E96;font-size:.86em;margin-left:-3px}
.tape__valor{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-variant-numeric:tabular-nums}
.tape__valor svg{width:8px;height:8px;flex:none}
.tape__valor--alta   {color:#6FD39A;fill:#6FD39A}
.tape__valor--baixa  {color:#F08C7E;fill:#F08C7E}
.tape__valor--estavel{color:#B7B7B7;fill:#B7B7B7}
.tape__leg{color:var(--muted-dark);font-variant-numeric:tabular-nums}
.tape__ref{gap:8px;color:#8C8E96;letter-spacing:.02em}
.tape__ref span{color:#6A6C74}
@keyframes tape-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (hover:hover) and (pointer:fine){
  .tape:hover .tape__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .tape{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .tape__track{animation:none}
}

/* ---------- Abertura das páginas do blog ----------
   A classe vai dobrada porque o bloco das páginas internas, mais abaixo
   neste arquivo, define .page-hero com a mesma especificidade e venceria
   por vir depois. */
.page-hero.page-hero--blog{padding-block:clamp(40px,4.6vw,66px) clamp(28px,3.2vw,44px)}
.page-hero--blog h1.h2{margin-top:22px;max-width:24ch}
.page-hero--blog p.body{max-width:62ch}
/* A capa do blog não tem tarja nem título na tela: abre direto nos atalhos,
   que ficam logo abaixo do header, e o primeiro tema entra em seguida. */
/* A tira de temas gruda logo abaixo do cabeçalho e acompanha a leitura: o
   main.js acende o tema que está na tela. O cabeçalho encolhido mede 58px e
   ganha 16px de respiro ao descolar — daí o `top`. O z-index fica abaixo do
   dele (50) e acima do conteúdo. */
.page-hero.page-hero--atalhos{
  position:sticky;top:calc(var(--header-h-stuck) + 16px);z-index:30;
  padding-block:14px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.page-hero--atalhos + .tema{padding-top:clamp(28px,3vw,44px)}
/* ATENÇÃO: isto SOMA com o `scroll-padding-top:120px` do html, lá em cima.
   O total precisa dar 160px: é a faixa entre o pé da barra (136–145px), para
   o título não parar atrás dela, e a linha de corte do acompanhamento (pé da
   barra + 40px), para o tema clicado já contar como o da vez. */
.tema[id]{scroll-margin-top:40px}
/* O rótulo fica parado; só as pílulas correm. O `min-width:0` é o que deixa a
   tira encolher e rolar em vez de empurrar o rótulo para fora. */
.blog-barra{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);min-width:0}
.blog-barra__rotulo{
  flex:none;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
/* atalhos para os quatro temas, em pílulas */
.blog-atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.6vw,34px)}
.page-hero--atalhos .blog-atalhos{margin-top:0}
.blog-atalhos a{
  display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:var(--white);
  font-size:14px;font-weight:500;color:var(--text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)
}
/* o realce de passagem só existe onde há mouse: no toque ele grudava no item
   clicado, e ficavam dois acesos — o amarelo claro do toque e o escuro do
   tema de fato aberto */
@media (hover:hover){
  .blog-atalhos a:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
}
/* tema que está na tela — quem marca é o main.js, pela rolagem. Vem depois do
   :hover de propósito: com o mesmo peso, quem está aceso tem de vencer. */
.blog-atalhos a[aria-current="true"],
.blog-atalhos a[aria-current="true"]:hover{
  border-color:var(--gold);background:var(--gold);color:#3A2C05;font-weight:600;
}
.blog-volta{margin-top:clamp(22px,2.4vw,30px);color:var(--gold-ink);font-weight:600;font-size:15px}

/* ---------- Um tema ---------- */
.tema{padding-block:clamp(40px,4.6vw,68px)}
.tema + .tema{border-top:1px solid var(--line)}
.tema:last-child{padding-bottom:clamp(60px,7vw,104px)}
.tema__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px clamp(24px,4vw,56px);flex-wrap:wrap;
}
.tema__titulo{flex:1 1 420px;min-width:0}
.tema__titulo h2{margin-top:18px;max-width:26ch}
.tema__mais{
  flex:none;padding-bottom:6px;
  color:var(--gold-ink);font-weight:600;white-space:nowrap;
}
/* a grade do destaque + os três menores reaproveita a da home */
.tema .blog__grid{margin-top:clamp(28px,3.2vw,44px)}
/* 4/3 deixaria a capa do destaque muito mais alta que a pilha de três ao
   lado; 16/10 iguala as duas colunas e os três menores se distribuem na
   altura que sobra, fechando o bloco no mesmo pé. */
.tema .post--feature .post-thumb{aspect-ratio:16/10}
.tema .post-list{justify-content:space-between}

/* Prévia em faixa: matérias lado a lado, todas do mesmo tamanho. O número de
   colunas vem do data-cols do bloco, então um tema com três matérias não
   deixa uma coluna vazia. O resumo trava em três linhas para os cartões não
   ficarem de alturas diferentes por causa do texto. */
.tema__faixa{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.4vw,34px);margin-top:clamp(28px,3.2vw,44px);
}
.tema__faixa[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.tema__faixa .post-thumb{aspect-ratio:16/10}
.tema__faixa .post__meta{margin-top:16px;font-size:13.5px}
/* O título reserva as três linhas mesmo quando ocupa duas: sem isso, o resumo
   de cada cartão começa numa altura e a faixa fica desalinhada embaixo. */
.tema__faixa .post h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:calc(3 * 1.32em);
}
/* :not(.post__meta) porque a tarja de categoria também é um <p> dentro do
   cartão: sem isso, estas regras caem em cima dela. */
.tema__faixa .post p:not(.post__meta){
  margin-top:10px;font-size:14.5px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* ---------- Página de um tema ---------- */
.tema--lista .tema__destaque{padding-bottom:clamp(30px,3.4vw,46px);border-bottom:1px solid var(--line)}
/* O destaque da página de tema deita: capa à esquerda, texto à direita. */
.post--largo{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center;
}
.post--largo .post-thumb{aspect-ratio:16/10}
.post--largo .post__meta{margin-top:0}
.post--largo h3{font-size:clamp(21px,17.1px + 1vw,31px);line-height:1.2;max-width:20ch}
.post--largo p{font-size:16px;margin-top:16px;max-width:46ch}
.tema--lista .posts-grid{
  display:grid;margin-top:clamp(30px,3.4vw,46px);
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.2vw,46px)
}

/* ---------- Rodapé de navegação entre temas ---------- */
.tema--outros{background:var(--surface-2);border-top:1px solid var(--line)}
.tema__rodape-tit{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tema__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.tema-link{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--line-2);
  font-size:15px;font-weight:600;color:var(--text);
  transition:border-color .2s var(--ease),color .2s var(--ease),gap .2s var(--ease)
}
.tema-link svg{width:16px;height:16px;flex:none}
.tema-link:hover{border-color:var(--gold);color:var(--gold-ink);gap:14px}

/* ---------- Capa reservada e resposta ao toque ---------- */
/* Enquanto não há foto de capa, o retângulo é um espaço desenhado de
   propósito (clarão dourado no canto e fio interno) e não um bloco cinza. */
.tema .post-thumb,
.posts-grid .post-thumb{
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(233,201,122,.34) 0%, rgba(233,201,122,0) 58%),
    linear-gradient(158deg,#F5F6F8 0%,#E9EAEE 100%);
  box-shadow:inset 0 0 0 1px rgba(16,18,24,.055);
}
.tema .post-thumb img,
.posts-grid .post-thumb img{transition:transform .5s var(--ease)}
.tema .post,
.posts-grid .post{display:block}
.tema .post--row,
.tema .post--largo{display:grid}
@media (hover:hover) and (pointer:fine){
  .tema .post:hover .post-thumb img{transform:scale(1.04)}
  .tema .post:hover .post-thumb{box-shadow:inset 0 0 0 1px rgba(150,114,7,.28)}
}

@media (max-width:1024px){
  .post--largo{grid-template-columns:1fr}
  .post--largo .post__meta{margin-top:18px}
  .tema--lista .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tema__faixa,
  .tema__faixa[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .tema__head{align-items:flex-start}
  .tema__mais{padding-bottom:0}
  .tema--lista .posts-grid{grid-template-columns:1fr}
  /* Empilhado, cada um dos três menores viraria uma capa de tela cheia e a
     prévia do tema ficaria longa demais. Aqui a capa fica pequena ao lado
     do título, e só o destaque mantém a capa larga. */
  .tema .post--row{grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center}
  .tema .post--row .post-thumb{aspect-ratio:4/3;border-radius:var(--radius)}
  .tema .post-list{gap:22px}
  /* Na faixa, empilhar quatro capas de tela cheia alongaria demais a página:
     a capa encolhe para o lado do título, como nos três menores do tema 01. */
  .tema__faixa,
  .tema__faixa[data-cols="3"]{grid-template-columns:1fr;gap:22px}
  .tema__faixa .post{
    display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;
  }
  .tema__faixa .post-thumb{aspect-ratio:4/3;border-radius:var(--radius)}
  .tema__faixa .post__meta{margin-top:0}
  .tema__faixa .post h3{min-height:0;-webkit-line-clamp:3}
  .tema__faixa .post p:not(.post__meta){display:none}
  .tape__item{gap:7px}
  .tape__leg{display:none}
}

/* ==========================================================================
   CTA (faixa preta com foto)
   ========================================================================== */
.cta-band{position:relative;background:var(--black);color:var(--white);overflow:hidden;isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* Sobra de altura para o paralaxe deslizar sem descobrir as bordas.
   O JS escreve --par (em px, dentro de ±28% da altura). */
.cta-band__bg img{
  position:absolute;left:0;top:-28%;
  /* 22% em vez de center: sobe o enquadramento para a faixa mostrar o TOPO do
     app dentro do celular (saldo e atalhos), como no comp, e não o meio dele. */
  width:100%;height:156%;object-fit:cover;object-position:right 22%;
  transform:translate3d(0,var(--par,0px),0);
  will-change:transform;
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.05) 72%,rgba(0,0,0,0) 100%);
}
.cta-band__inner{padding-block:clamp(56px,7vw,110px);max-width:620px}
.cta-band h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-section);line-height:1.08;letter-spacing:-.02em;color:var(--white)}
.cta-band .btn{margin-top:clamp(26px,3vw,42px)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{background:var(--bg);border-radius:0 0 var(--radius-xl) var(--radius-xl);position:relative;z-index:2}
.faq__head{text-align:center;max-width:900px;margin-inline:auto}
.faq__head h2{margin-top:22px;text-transform:uppercase;font-size:var(--fs-section);letter-spacing:-.02em}
.faq__head p{margin-top:12px;font-size:clamp(16px, 14.51px + 0.381vw, 20px);color:var(--muted-2)}
.faq__list{max-width:865px;margin:clamp(32px,4vw,54px) auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden;transition:box-shadow .2s var(--ease)}
.faq-item.is-open{box-shadow:var(--shadow-sm)}
.faq-item__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;text-align:left;
  font-size:clamp(15px, 13.89px + 0.286vw, 18px);font-weight:600;color:var(--muted);line-height:1.4;
}
.faq-item.is-open .faq-item__q{color:var(--text-2)}
.faq-item__q svg{width:19px;height:19px;flex:none;color:var(--muted);transition:transform .28s var(--ease)}
.faq-item.is-open .faq-item__q svg{transform:rotate(180deg)}
.faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-item.is-open .faq-item__a{grid-template-rows:1fr}
.faq-item__a>div{overflow:hidden}
.faq-item__a p{
  padding:20px 26px 26px;font-size:clamp(14px, 13.26px + 0.19vw, 16px);line-height:1.6;color:var(--muted);
}
.faq-item.is-open{background:var(--surface-2);border-color:transparent}
.faq-item.is-open .faq-item__q{background:var(--white)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--black);color:var(--white);padding-block:clamp(56px,6vw,96px) 44px;margin-top:-32px;padding-top:calc(clamp(56px,6vw,96px) + 32px)}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px)}
.footer h3{font-size:17px;font-weight:600;color:var(--white);margin-bottom:22px}
.footer h3+h3,.footer ul+h3{margin-top:34px}
.footer__cols li+li{margin-top:14px}
.footer__cols li a,.footer address a{font-size:16px;font-weight:300;color:#EDEDED;transition:color .18s var(--ease)}
.footer li a:hover,.footer address a:hover{color:var(--gold)}
.footer address{font-style:normal;display:flex;flex-direction:column;gap:14px}
.footer__mid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(44px,5vw,72px)}
.footer__mid img{width:149px}
.footer__social{display:flex;align-items:center;gap:8px;margin-left:-10px}
.footer__social li{display:flex}
.footer__social a{width:40px;height:40px;display:grid;place-items:center;color:#D4D4D4;border-radius:50%}
.footer__social a:hover{color:var(--white)}
.footer__social svg{width:19px;height:19px}
.footer__legal{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding-top:22px;margin-top:22px;border-top:1px solid #2A2A2A;
}
.footer__legal a,.footer__legal span{font-size:14px;font-weight:300;color:#F2F2F2}
.footer__legal a:hover{color:var(--gold)}
.footer__country{display:inline-flex;align-items:center;gap:9px}
.footer__country svg{width:18px;height:18px;border-radius:50%}
.footer__fine{margin-top:clamp(36px,4vw,56px);font-size:14px;line-height:1.55;color:#E4E4E4;max-width:1100px;font-weight:300}
.footer__fine p+p{margin-top:12px}

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.form-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-lg);
}
.field{margin-bottom:13px}
.field>label{display:block;font-size:14px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.field .hint{margin-top:5px;font-size:13.5px;color:var(--muted)}
.input,.select,.textarea{
  /* 44px é o piso: abaixo disso o campo deixa de ser um alvo de toque
     confortável no celular. A altura vem daqui, não do padding. */
  width:100%;padding:10px 13px;min-height:44px;
  background:var(--white);border:1px solid var(--line-2);border-radius:10px;
  font-size:15px;color:var(--text);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#A2A2A2}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(233,201,122,.35)
}
.input-icon{position:relative}
.input-icon svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#A2A2A2;pointer-events:none}
.input-icon .input{padding-left:36px}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:42px}
.textarea{min-height:120px;resize:vertical}
.radio-card{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border:1px solid var(--line-2);border-radius:10px;
  cursor:pointer;margin-bottom:10px;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.radio-card:hover{border-color:#B9BCC4}
.radio-card input{accent-color:var(--gold-deep);width:17px;height:17px;flex:none;margin:0}
.radio-card span{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
.radio-card svg{width:17px;height:17px;color:#8A8A8A}
.radio-card:has(input:checked){border-color:var(--gold-deep);background:#FDFAF2}
.radio-card:has(input:checked) span{color:var(--text)}
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0}
.consent input{accent-color:var(--gold-deep);width:17px;height:17px;flex:none;margin-top:2px}
.consent label{font-size:14px;line-height:1.45;color:var(--muted)}
.consent a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.form-divider{display:flex;align-items:center;gap:14px;margin:19px 0 14px;color:var(--muted);font-size:13.5px}
.form-divider::before,.form-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.form-msg{margin-top:16px;padding:13px 16px;border-radius:10px;font-size:14px;display:none}
.form-msg.is-visible{display:block}
.form-msg--ok{background:#EAF7EF;color:#186B3B;border:1px solid #BEE5CD}
.form-msg--err{background:#FDECEC;color:#9B2C2C;border:1px solid #F5C6C6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   SIMULADOR
   ========================================================================== */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,4.5vw,72px);align-items:center}
/* Formulário mais estreito que a coluna, encostado à direita. Só o .form-card
   dentro do .sim: a calculadora de Para Incorporadoras usa a coluna inteira.
   Só acima de 1024px — abaixo disso o .sim vira uma coluna só e o card
   precisa ocupar toda a largura, senão fica jogado no canto direito. */
@media (min-width:1025px){
  .sim>.form-card{max-width:478px;margin-left:auto}
}
.sim h2{margin-top:24px;max-width:18ch}
/* Título de "Indique sua incorporadora": maior que o --fs-section das demais
   seções e sem max-width, para as quebras virem só dos <br class="br-lg">.
   Precisa de "h2.": senão o max-width de .sim h2 (mais específico) vence e
   quebra as linhas antes dos <br>. */
h2.indicar__titulo{font-size:clamp(30px, 21.83px + 2.095vw, 52px);max-width:none;line-height:1.06}
.sim__controls{margin-top:clamp(28px,3.5vw,50px)}
.sim__selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sim__field{margin-top:clamp(28px,3vw,44px)}
.sim__field-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:14px}
.sim__field-top label{font-size:clamp(15px, 13.51px + 0.381vw, 19px);color:var(--muted);line-height:1.3}
/* Os quatro rótulos do simulador na mesma métrica: 16px / 500 / --text-2.
   Vinham de dois lugares — os dos selects herdavam .field>label (14px) e os
   das barras tinham corpo maior, peso leve e cinza claro. O escopo é .sim de
   propósito: .field>label serve todos os formulários do site, e mexer nele
   mudaria a página Abra sua conta junto. */
.sim .field>label,
.sim .sim__field-top label{
  font-size:16px;font-weight:500;color:var(--text-2);line-height:1.3;
}
/* Mesma folga invisível do outro lado da barra: os ~19px de caixa vazia ACIMA
   da trilha (o <input> tem 44px de alvo de toque para uma trilha de 6px)
   somavam 35px entre o rótulo e a barra. A margem negativa desconta isso.
   O z-index é obrigatório: sem ele o alvo de toque do range sobe por cima da
   caixa de valor e rouba o clique na borda de baixo do campo numérico. */
.sim .sim__field-top{
  position:relative;z-index:1;
  margin-bottom:-3px;   /* ~18px de vão visível até a trilha */
}
.sim__valuebox{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.sim__valuebox input{
  width:92px;padding:8px 10px;text-align:center;
  border:1px solid var(--line-2);border-radius:8px;background:var(--white);
  font-size:15px;font-weight:600;color:var(--text)
}
.sim__valuebox input.is-wide{width:132px}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;
  height:44px;                 /* alvo de toque; a trilha visual tem 6px */
  background:transparent;border-radius:99px;outline:none;cursor:pointer;
  --fill:0%;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0 var(--fill),var(--surface-3) var(--fill) 100%);
}
@media (pointer:coarse){
  .consent input,.radio-card input{width:22px;height:22px}
  .sim__valuebox input{min-height:44px}
  .segmented button{min-height:48px}
  .faq-item__q{padding:20px}
  .footer__cols li a,.footer address a{display:inline-block;padding-block:4px}
  .footer__legal a{display:inline-block;padding-block:6px}
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--white);border:3px solid var(--gold);margin-top:-6.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab
}
input[type="range"]::-moz-range-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0 var(--fill),var(--surface-3) var(--fill) 100%);
}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:grab}
/* O <input type=range> tem 44px de altura só por causa do alvo de toque — a
   trilha visível tem 6px e fica centrada, sobrando ~19px de caixa vazia embaixo.
   Somados aos 10px de margem, os extremos da escala flutuavam a 36px da trilha.
   A margem negativa desconta essa folga invisível e encosta os rótulos na barra;
   pointer-events:none impede que eles roubem a parte de baixo do alvo de toque. */
.sim__scale{
  display:flex;justify-content:space-between;margin-top:-16px;
  font-size:13px;color:var(--muted);pointer-events:none;
}
.sim__result{
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-lg);
}
/* Mesma métrica do .eyebrow da seção ("Simulador — Descubra quanto...")):
   12.5px, padding 6px 14px, entrelinha 1.3. As duas pílulas abrem a seção e o
   painel de resultado — na mesma escala, leem como o mesmo tipo de legenda. */
.sim__regime{
  display:inline-flex;padding:6px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);font-size:12.5px;line-height:1.3;color:var(--muted);
  margin-left:auto;
}
.sim__result-head{display:flex;justify-content:flex-end;margin-bottom:26px}
.sim__label{font-size:clamp(15px, 14.26px + 0.19vw, 17px);color:var(--muted)}
.sim__big{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(27px, 17.4px + 2.45vw, 52px);line-height:1.1;letter-spacing:-.02em;color:var(--gold-deep);
  margin-top:2px;
}
.sim__big--muted{color:var(--gold-deep-2)}
/* Mesma cor e mesmo corpo do faturamento — os dois números do painel leem
   como um par. O tamanho vive em .sim__big; aqui sobra só a cor. */
.sim__big--destaque{color:var(--gold-deep-2)}
.sim__block+.sim__block{margin-top:26px}
.sim__rows{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:30px;padding-block:20px;display:flex;flex-direction:column;gap:14px}
.sim__row{display:flex;justify-content:space-between;gap:16px;font-size:clamp(14px, 13.26px + 0.19vw, 16px);color:var(--muted)}
.sim__row b{font-weight:500;color:var(--text-2)}
.sim__gains{margin-top:26px}
.sim__gains>p{font-size:15px;color:var(--muted);margin-bottom:18px}
.sim__gain{display:flex;align-items:center;gap:16px}
.sim__gain+.sim__gain{margin-top:16px}
.sim__gain-ic{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--text-2)}
.sim__gain-ic svg{width:20px;height:20px}
.sim__gain-t{font-size:14px;color:var(--muted);line-height:1.3}
.sim__gain-t b{display:block;font-weight:600;color:var(--text-2);font-size:15px;margin-top:2px}
/* balance iguala o comprimento das linhas em vez de encher cada uma até o fim
   e deixar a última órfã — é o que fecha o parágrafo num bloco retangular.
   pretty é o fallback de quem não tem balance: evita pelo menos a viúva. */
.sim__note{
  margin-top:16px;font-size:11.5px;line-height:1.35;color:#A2A2A2;text-align:center;
  text-wrap:pretty;text-wrap:balance;
}
.sim__result .btn{margin-top:26px}

/* ==========================================================================
   TABELA COMPARATIVA
   ========================================================================== */
.compare-wrap{overflow-x:auto;margin-top:clamp(32px,4vw,56px);border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch}
.compare{min-width:900px;font-size:clamp(14px, 13.26px + 0.19vw, 16px);border:1px solid #3A3A3A;border-radius:var(--radius-sm);overflow:hidden}
.compare th,.compare td{padding:14px 20px;text-align:left;vertical-align:middle;line-height:1.4}
.compare thead th{background:#161616;color:#EDEDED;font-weight:400;font-size:clamp(14px, 13.26px + 0.19vw, 16px);letter-spacing:.02em}
.compare thead th:last-child{color:var(--gold)}
.compare tbody tr:nth-child(odd){background:#3B3B3B}
.compare tbody tr:nth-child(even){background:#1A1A1A}
.compare td{color:#EDEDED;border-right:1px solid rgba(255,255,255,.08)}
.compare td:last-child{border-right:0}
.compare td b{color:var(--white);font-weight:700}
.compare .ic{display:block;position:relative;padding-left:24px}
.compare .ic svg{position:absolute;left:0;top:.2em;width:15px;height:15px}
.compare .ic--no svg{color:#E06060}
.compare .ic--yes svg{color:#5FC98A}

/* No celular a tabela vira cartões — sem rolagem horizontal escondendo dados */
@media (max-width:760px){
  .compare-wrap{overflow:visible;border-radius:0}
  .compare{min-width:0;display:block;border:0;border-radius:0;font-size:15px}
  .compare thead{position:absolute;left:-9999px}
  .compare tbody,.compare tr,.compare td{display:block;width:100%}
  /* os sete cartões viram uma tira que corre para o lado: empilhados davam
     1749px de rolagem. Cada um ocupa 84% da tela, então sempre sobra uma
     faixa do próximo à vista — é esse pedaço que avisa que há mais. */
  .compare tbody{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    padding:2px var(--gutter) 6px;margin-inline:calc(var(--gutter) * -1);
  }
  .compare tbody::-webkit-scrollbar{display:none}
  .compare tbody tr{
    flex:0 0 84%;scroll-snap-align:center;
    display:flex;flex-direction:column;
    background:#161616;border:1px solid #3A3A3A;border-radius:var(--radius);
    padding:18px 18px 8px;margin-bottom:0;
  }
  .compare tbody tr td:last-child{margin-top:auto}
  .compare tbody tr:nth-child(odd),
  .compare tbody tr:nth-child(even){background:#161616}
  .compare td{border:0;padding:0 0 14px}
  .compare td.compare__aspecto{
    font-family:var(--font-display);font-weight:700;font-size:17px;
    color:var(--white);padding-bottom:14px;margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .compare td[data-label]::before{
    content:attr(data-label);
    display:block;margin-bottom:5px;
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:#8C8C8C;
  }
  .compare td[data-label="Com a M2PAG"]::before{color:var(--gold)}
}

/* ==========================================================================
   DIAGNÓSTICO (cards sobrepostos)
   ========================================================================== */
.diag{
  position:relative;background:var(--black);color:var(--white);
  padding-block:clamp(68px,8.2vw,124px) 0;
  /* quanto do cartão fica para fora do preto */
  --saliencia:clamp(34px,4.7vw,72px);
}
/* A saliência é feita com margem NEGATIVA, não com transform: o .reveal usa
   transform para a entrada e sobrescreveria qualquer valor colocado aqui.
   Encolhendo a caixa preta por baixo, o fim dela sobe e os cartões passam a
   avançar sobre a seção seguinte — o preto termina pouco abaixo do meio.

   flow-root é obrigatório: sem ele a margem negativa do último filho colapsa
   para fora e, em vez de encurtar o preto, puxa a seção seguinte para cima. */
.diag>.container{display:flow-root}
.diag .diag__cards{margin-bottom:calc(-1 * var(--saliencia));z-index:2}
.diag__head{text-align:center;max-width:1000px;margin-inline:auto}
.diag__head h2{margin-top:26px;text-transform:uppercase;font-size:var(--fs-section);line-height:1.1;color:var(--white)}
.diag__head p{margin-top:24px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:#D3D5DA;font-weight:500}
.diag__cards{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);
  margin-top:clamp(40px,5vw,68px);
  position:relative;
}
.diag-card{
  position:relative;
  background:var(--white);color:var(--text);border-radius:var(--radius);
  padding:clamp(18px,2vw,26px);text-align:center;box-shadow:var(--shadow);
  transition:transform .42s var(--ease), box-shadow .42s var(--ease),
             background-color .42s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .diag-card:hover{
    transform:translateY(-6px) scale(1.035);
    box-shadow:0 20px 38px -14px rgba(0,0,0,.5);
    z-index:2;
  }
}
@media (prefers-reduced-motion:reduce){
  .diag-card{transition:none}
}

/* --------------------------------------------------------------------------
   Cartões em cinza — SÓ com o modificador, hoje apenas em "Para Corretores".
   É o mesmo cinza das pílulas e painéis do site (--surface-2); no hover o
   cartão volta ao branco.
   -------------------------------------------------------------------------- */
.diag__cards--cinza .diag-card{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){
  .diag__cards--cinza .diag-card:hover{background:var(--white)}
}
.diag-card h3{font-family:var(--font-display);font-weight:700;font-size:clamp(15px, 13.51px + 0.381vw, 19px);color:var(--text)}
.diag-card p{margin-top:10px;font-size:clamp(14px, 13.26px + 0.19vw, 16px);line-height:1.35;color:var(--muted)}

/* ==========================================================================
   ABAS DE PRODUTO (segmented)
   ========================================================================== */
/* Grid em vez de flex: com `grid-auto-columns:1fr` as colunas ficam todas do
   tamanho da maior, então os botões saem iguais sem eu precisar chutar uma
   largura fixa nem contar quantos são. Em flex, `flex:1` não resolveria — o
   grupo tem largura de conteúdo, não sobra espaço livre para repartir. */
/* A rolagem lateral do celular mora AQUI, não no grupo. Enquanto ela estava
   no próprio .segmented, o `width:100%` que ela exigia espremia as colunas de
   volta ao tamanho do texto e os botões voltavam a ficar desiguais. */
.segmented-wrap{max-width:100%}
.segmented{
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--surface-3);border-radius:var(--radius-pill);
  padding:0;overflow:hidden;max-width:100%;
}
.segmented button{
  /* corpo e respiro caem juntos, para a pílula manter a proporção */
  padding:10px 18px;border-radius:var(--radius-pill);
  font-size:clamp(12px, 11.6px + 0.15vw, 14px);font-weight:500;color:var(--muted);white-space:nowrap;
  transition:background-color .22s var(--ease), color .22s var(--ease), font-weight .1s;
}
.segmented button:hover{color:var(--text)}
.segmented button[aria-selected="true"]{background:var(--gold);color:#3A2C05;font-weight:700}
.product-panel{
  display:none;background:var(--surface-2);border-radius:var(--radius-lg);
  margin-top:14px;overflow:hidden;
}
.product-panel.is-active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;animation:fadeUp .35s var(--ease)}
.product-panel__media{background:var(--black);border-radius:var(--radius-lg);aspect-ratio:1/1;width:100%;display:grid;place-items:center;color:#3A3A3A}
.product-panel__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
/* ---- Relatório DIMOB (aba "Relatórios") ----
   Mesmo vidro dos outros cartões. Cabeçalho: órgão à esquerda (marca + a sigla
   da obrigação embaixo), M2PAG à direita. */
/* Sem `will-change` nem transform aqui: este cartão é parado, e a promoção a
   camada própria fazia o navegador rasterizar o conteúdo numa resolução fixa —
   o letreiro fino da marca do órgão saía deformado. Isolado ele renderiza
   perfeito no mesmo tamanho; era a camada, não o arquivo. */
.regras .regras__cena--dimob{
  max-width:58cqw;padding:4.4cqw 4cqw 4.8cqw;
  will-change:auto;transform:none;
}
.dimob__cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:3cqw;
  padding-bottom:3cqw;margin-bottom:.5cqw;
  border-bottom:1px solid rgba(255,255,255,.16);
}
/* Só o SÍMBOLO vem como imagem; "Receita Federal" é texto de verdade.
   Motivo: o letreiro do arquivo original chegava aqui a ~110 px de largura e o
   Chrome comia pedaços das letras (o R e o "al" finais) ao reduzi-lo dentro
   deste cartão — reproduzido com SVG, PNG e PNG@2x, e sobrevivendo à remoção
   de backdrop-filter, will-change, transform, container-type e isolation.
   Fora do cartão, o mesmo arquivo no mesmo tamanho sai perfeito. Texto vivo
   não passa por esse caminho de rasterização: nunca corta e escala sozinho. */
.regras .dimob__orgao img{width:18.8cqw;height:auto;display:block;opacity:.94;object-fit:contain}
.dimob__orgao-nome{
  display:block;margin-top:1.9cqw;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(11px,3.15cqw,18px);line-height:1;color:rgba(255,255,255,.94);
}
.dimob__orgao-doc{
  display:block;margin-top:1.5cqw;
  font-family:var(--font-display);font-weight:700;letter-spacing:.1em;
  font-size:clamp(9px,2.2cqw,13px);color:var(--gold);
}
/* Menor que a marca do órgão: aqui ela assina, não anuncia. */
.regras .dimob__marca{width:11cqw;height:auto;display:block;opacity:.85;margin-top:.6cqw;object-fit:contain}

.dimob__tabela{
  width:100%;margin-top:3.4cqw;border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.dimob__tabela th{
  text-align:left;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  font-size:clamp(7px,1.75cqw,10px);color:rgba(255,255,255,.55);
  padding-bottom:2cqw;
}
.dimob__tabela td{
  font-size:clamp(7.5px,1.85cqw,11px);line-height:1.32;color:rgba(255,255,255,.9);
  padding:1.5cqw 0;border-top:1px solid rgba(255,255,255,.1);
  vertical-align:top;
}
/* As três colunas em linha única: com o endereço quebrando em duas, as linhas
   ficavam de alturas diferentes e a tabela perdia o ritmo de relatório. */
.dimob__tabela td{white-space:nowrap}
.dimob__tabela td:nth-child(2){color:var(--gold)}
.dimob__tabela th:nth-child(2),.dimob__tabela td:nth-child(2){padding-inline:1.4cqw}

/* As linhas entram por `animation`, e não por `transition`: o painel da aba sai
   do DOM quando ela está inativa, e só a animação reinicia sozinha toda vez que
   a aba é reaberta. */
/* Só os dois últimos dígitos ficam à mostra. O desfoque é em `em` para
   acompanhar o corpo do texto em qualquer tamanho de tela. */
.dimob__velado{filter:blur(.24em);user-select:none}

.dimob__tabela tbody tr{
  opacity:0;animation:relatorio-linha .55s var(--ease) forwards;
}
.dimob__tabela tbody tr:nth-child(1){animation-delay:.20s}
.dimob__tabela tbody tr:nth-child(2){animation-delay:.31s}
.dimob__tabela tbody tr:nth-child(3){animation-delay:.42s}
.dimob__tabela tbody tr:nth-child(4){animation-delay:.53s}
.regras .regras__cena--dimob .regras__nota{
  margin-top:3cqw;font-size:clamp(7px,1.65cqw,10px);
  opacity:0;animation:relatorio-linha .55s var(--ease) .66s forwards;
}
@keyframes relatorio-linha{
  from{opacity:0;transform:translateY(1.6cqw)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dimob__tabela tbody tr,
  .regras .regras__cena--dimob .regras__nota{animation:none;opacity:1}
}

/* ---- Boleto da aba "Emissão de boletos" ----
   Papel branco sobre o fundo escuro da seção, levemente girado para não ficar
   com cara de captura de tela. Tudo em cqw: acompanha a moldura. */
.boleto-cena{
  position:relative;width:100%;height:100%;
  container-type:inline-size;
  display:grid;place-items:center;
  background:#3A2C05;overflow:hidden;
}
.boleto{
  width:74cqw;background:#fff;border-radius:3cqw;
  padding:6cqw 6cqw 5cqw;
  transform:rotate(-2.2deg);
  box-shadow:0 5cqw 12cqw -4cqw rgba(0,0,0,.55), 0 1cqw 3cqw -1cqw rgba(0,0,0,.3);
}
.boleto__topo{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.boleto__topo img{width:26cqw;height:auto;display:block}
.boleto__pix{
  font-size:clamp(9px,2.4cqw,13px);font-weight:700;letter-spacing:.04em;
  color:var(--gold-deep);background:var(--gold-soft);
  border:1px solid rgba(150,114,7,.28);
  padding:1cqw 2.6cqw;border-radius:var(--radius-pill);
}
.boleto__dados{
  margin-top:6cqw;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;
  padding-bottom:5cqw;border-bottom:1px dashed var(--line-2);
}
.boleto__dados dt{
  font-size:clamp(8px,2.1cqw,12px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);
}
.boleto__dados dd{
  margin:1.2cqw 0 0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(12px,3.4cqw,19px);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.boleto__linha{
  margin-top:5cqw;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(7px,1.95cqw,11px);letter-spacing:-.01em;color:var(--text-2);
  white-space:nowrap;
}
/* Código de barras: as paradas irregulares evitam o padrão repetido, que
   entrega na hora que é um gradiente e não um código. */
.boleto__codigo{
  margin-top:3.4cqw;height:11cqw;border-radius:.6cqw;
  background:repeating-linear-gradient(90deg,
    #111 0 .9cqw, transparent .9cqw 1.7cqw, #111 1.7cqw 2.2cqw,
    transparent 2.2cqw 3.4cqw, #111 3.4cqw 4.6cqw, transparent 4.6cqw 5.2cqw,
    #111 5.2cqw 5.7cqw, transparent 5.7cqw 7.1cqw);
}

/* ---- Arte da aba "Enviar" ----
   Coluna arredondada + disco translúcido com a seta, nos tons do ouro M2PAG.
   Feita em CSS: nítida em qualquer tela, sem arquivo, e a cor sai da paleta. */
.product-panel__media--arte{background:#3A2C05;overflow:hidden;padding:0}
.envio{position:relative;width:100%;height:100%;container-type:inline-size}
/* Sobe do rodapé e some por baixo: o corte na base é o que dá a sensação de
   que a peça continua para fora do quadro. */
.envio__coluna{
  position:absolute;left:50%;transform:translateX(-50%);
  top:19.8%;bottom:0;width:52cqw;
  border-radius:26cqw 26cqw 0 0;
  background:rgba(233,201,122,.10);
  border:1px solid rgba(233,201,122,.13);border-bottom:none;
}
.envio__disco{
  /* Proporções medidas do print de referência: disco com 47% da largura,
     centro a 45,5% da altura — acima do meio, não centralizado. É esse
     desequilíbrio que dá a leitura de movimento para cima. */
  position:absolute;left:50%;top:45.5%;transform:translate(-50%,-50%);
  width:47cqw;height:47cqw;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(233,201,122,.16);
  border:1px solid rgba(233,201,122,.2);
}
.envio__disco svg{width:44%;height:44%;color:rgba(246,239,222,.92)}

.product-panel__body{padding:clamp(24px,3vw,48px) clamp(24px,3vw,48px) clamp(24px,3vw,48px) 0}
.product-panel h3{font-family:var(--font-text);font-weight:600;font-size:clamp(18px, 15.03px + 0.762vw, 26px);line-height:1.25;color:var(--muted);letter-spacing:-.01em}
.product-panel>.product-panel__body>p{margin-top:16px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:var(--muted)}
.product-panel .checklist{margin-top:24px;gap:12px}
.product-panel .checklist li{font-size:clamp(14px, 13.26px + 0.19vw, 16px)}
.product-panel .btn{margin-top:26px}

/* ==========================================================================
   BENEFÍCIOS (lista com título)
   ========================================================================== */
.benefits{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4vw,64px);align-items:center}
.benefits__media{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.benefits__media img{width:100%;height:auto;display:block}

/* ---- Foto da mesa + resumo em vidro no centro ----
   O cartão fica no vão branco entre o caderno e o notebook: é ali que o vidro
   tem textura para desfocar (papel, lápis, teclado) sem esconder a cena. */
.benefits__media--foto{position:relative;container-type:inline-size;box-shadow:none}
.benefits__media--foto img,
.benefits__video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.beneficio-vidro{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64cqw;margin:0;padding:6cqw 6.4cqw 5.4cqw;
  border-radius:4.4cqw;text-align:left;color:#fff;
  /* Vidro transparente, no mesmo material das cenas da Plataforma: tinta branca
     baixa + desfoque forte. Com o fundo aparecendo, o texto passa a ser branco;
     a sombra de texto discreta segura a leitura quando passa céu claro atrás. */
  background:linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(255,255,255,.08) 100%);
  -webkit-backdrop-filter:blur(3cqw) saturate(170%);
  backdrop-filter:blur(3cqw) saturate(170%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:
    0 3cqw 7cqw -2cqw rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.08);
  text-shadow:0 1px 10px rgba(0,0,0,.22);
}
.beneficio-vidro__rot{
  display:block;font-size:clamp(11px,2.9cqw,16px);font-weight:600;
  letter-spacing:.02em;color:rgba(255,255,255,.9);
}
.beneficio-vidro__tit{
  margin-top:.8cqw;font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,7.4cqw,42px);line-height:1;letter-spacing:-.03em;color:#fff;
}
.beneficio-vidro__lista{
  list-style:none;margin:4.6cqw 0 0;padding:0;
  display:flex;flex-direction:column;gap:2cqw;
}
.beneficio-vidro__lista li{
  display:flex;align-items:center;gap:2.2cqw;
  font-size:clamp(11px,3.1cqw,17px);line-height:1.2;color:rgba(255,255,255,.94);
}
.beneficio-vidro__lista li::before{
  content:"";flex:none;width:3.6cqw;height:3.6cqw;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2C05' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/62% no-repeat;
}
.beneficio-vidro__pe{
  margin-top:4.4cqw;padding-top:3.6cqw;border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(10px,2.7cqw,15px);color:rgba(255,255,255,.8);
}
.beneficio-vidro__pe b{color:#fff;font-weight:700}
.benefits h2{margin-top:22px;color:var(--gold);font-size:var(--fs-section);max-width:18ch}
.benefits__list{margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:22px}
.benefits__list h3{font-size:clamp(15px, 14.26px + 0.19vw, 17px);font-weight:700;color:var(--text-2)}
.benefits__list p{margin-top:3px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.45;color:var(--muted)}
.benefits .btn{margin-top:clamp(28px,3vw,44px)}
/* A lista nasceu para fundo claro: o título sai em --text-2 e o texto em
   --muted, que sobre o preto do canal de denúncias ficam ilegíveis. Escopado
   pelo id da seção para não mexer nas outras páginas que usam a mesma lista. */
#denuncias .benefits__list h3{color:var(--white)}
#denuncias .benefits__list p{color:#C9CCD3}

/* ==========================================================================
   FLUXO (plataforma) — passos alternados
   ========================================================================== */
.flow{background:var(--black);color:var(--white);border-radius:var(--radius-xl);padding:clamp(56px,6.4vw,100px) clamp(20px,3vw,56px)}
.flow__head{text-align:center;max-width:1000px;margin-inline:auto}
.flow__head h2{margin-top:26px;color:var(--gold);text-transform:uppercase;font-size:var(--fs-section);line-height:1.1}
.flow__step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,80px)}
.flow__step:nth-child(odd) .flow__media{order:2}
/* Neste passo a mídia vai para a direita e o texto fica encostado na borda da
   moldura preta — sem o vão que os outros passos ganham da imagem ao lado.
   O recuo devolve a mesma respiração, para os três lerem com o mesmo ritmo. */
.flow__step:nth-child(odd)>div:not(.flow__media){padding-left:clamp(0px,5.2vw,69px)}
/* 500×700 — retrato. Vira max-width + aspect-ratio em vez de px fixo para
   encolher junto com a coluna em telas menores sem distorcer. */
.flow__media{background:var(--white);border-radius:var(--radius-lg);aspect-ratio:500/700;width:100%;max-width:500px;margin-inline:auto;overflow:hidden;display:grid;place-items:center;padding:clamp(16px,2vw,28px)}
.flow__media img{width:100%;height:100%;object-fit:contain}
/* Moldura sangrada: o vídeo ocupa tudo, sem a borda branca dos passos com print. */
.flow__media--cheia{background:var(--ink);padding:0}

/* ---- Regras de comissão sobre vídeo (passo 1) ----
   Cartões de vidro que passam pelas três regras que a incorporadora define.
   Toda a tipografia usa cqw para acompanhar a moldura quadrada do passo. */
.regras{
  position:relative;width:100%;height:100%;
  container-type:inline-size;overflow:hidden;isolation:isolate;
}
/* Serve a <video> e a <img>: o passo 2 usa foto, os passos 1 e 3 usam vídeo.
   O seletor precisa dos dois níveis para vencer o `object-fit:contain` de
   `.flow__media img`, que letterboxaria a foto em vez de preenchê-la. */
.regras .regras__fundo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;border-radius:0;
}
/* Escurece o vídeo para o vidro ter contraste sem depender do enquadramento. */
.regras__brilho{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Anda ao contrário da tinta do vidro: com o painel a 14% de branco, ele já
     sustenta boa parte do contraste sozinho, então o véu alivia para a cor e a
     luz do vídeo chegarem ao vidro em vez de morrerem num fundo preto. */
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(0,0,0,.02) 0%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.44) 100%),
    linear-gradient(180deg, rgba(4,12,51,.12) 0%, rgba(4,12,51,.32) 100%);
}
.regras__palco{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;padding:7cqw;
}

/* --ecoa: a curva das transições da Apple (easeOutExpo). Quase toda a distância
   é vencida no primeiro terço do tempo e o resto é desaceleração — é isso que dá
   a sensação de peso e fluidez, não a duração em si. */
.regras{--ecoa:cubic-bezier(.16,1,.3,1)}

.regras__cena{
  grid-area:1/1;width:100%;max-width:62cqw;
  padding:4.8cqw 4.4cqw 5.2cqw;
  border-radius:5cqw;
  /* Superfície de vidro tingida: 14% de branco. A tinta é o que dá corpo ao
     material; o desfoque forte é o que mantém o fundo visível mas difuso.
     Um sem o outro não funciona — pouca tinta vira película, pouco desfoque
     deixa o texto brigando com as janelas do prédio. */
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    /* sombra discreta: só o suficiente para o painel descolar do fundo */
    0 4cqw 10cqw -4cqw rgba(0,0,0,.38),
    /* fio de luz no topo — é este detalhe que faz ler como vidro e não como
       um retângulo translúcido qualquer */
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(7cqw) saturate(180%);
  -webkit-backdrop-filter:blur(7cqw) saturate(180%);
  color:#fff;
  opacity:0;transform:translateY(5cqw) scale(.965);
  transition:opacity .7s var(--ecoa), transform 1.1s var(--ecoa);
  pointer-events:none;
  will-change:transform, opacity;
}
.regras__cena.is-ativa{opacity:1;transform:none}
/* Quem sai recua para cima crescendo de leve, como se se afastasse; quem entra
   vem de baixo. As duas se cruzam no meio do caminho em vez de trocarem seco. */
.regras__cena.is-saindo{
  opacity:0;transform:translateY(-3.5cqw) scale(1.03);
  transition:opacity .55s var(--ease), transform .9s var(--ecoa);
}

.regras .regras__rotulo{
  font-size:clamp(12px, 2.8cqw, 17px);line-height:1.3;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.72);margin-bottom:3.4cqw;
}

/* cena 1 — percentuais */
.regras__linhas{display:flex;flex-direction:column;gap:2.5cqw}
.regras__linhas li{
  display:flex;align-items:baseline;justify-content:space-between;gap:3cqw;
  font-size:clamp(13px, 3.2cqw, 19px);color:rgba(255,255,255,.9);
  opacity:0;transform:translateY(2.4cqw);
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.32,.72,0,1);
}
.regras__cena.is-ativa .regras__linhas li{opacity:1;transform:none}
.regras__cena.is-ativa .regras__linhas li:nth-child(1){transition-delay:.10s}
.regras__cena.is-ativa .regras__linhas li:nth-child(2){transition-delay:.20s}
.regras__cena.is-ativa .regras__linhas li:nth-child(3){transition-delay:.30s}
.regras__cena.is-ativa .regras__linhas li:nth-child(4){transition-delay:.40s}
.regras__linhas b{
  font-family:var(--font-display);font-weight:700;font-size:clamp(16px, 4.1cqw, 25px);
  color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* cena 2 — método de pagamento */
.regras__opcoes{display:flex;flex-direction:column;gap:2.2cqw}
/* Peça de vidro SEPARADA, flutuando sobre o painel — não um bloco recortado
   dentro dele. Dois detalhes fazem essa leitura: backdrop-filter próprio (o
   fundo é desfocado outra vez, então há duas lâminas empilhadas) e uma sombra
   projetada, que é o que descola a peça da superfície de baixo. */
.regras__op{
  position:relative;padding:2.9cqw 3.2cqw 3.2cqw 9cqw;
  border-radius:3cqw;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(3cqw) saturate(140%);
  -webkit-backdrop-filter:blur(3cqw) saturate(140%);
  box-shadow:
    0 1.6cqw 3.2cqw -1.4cqw rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:background .5s var(--ecoa), border-color .5s var(--ecoa),
             box-shadow .5s var(--ecoa);
}
.regras__op b{display:block;font-size:clamp(13px, 3.2cqw, 19px);font-weight:700;line-height:1.2}
.regras__op small{display:block;margin-top:1cqw;font-size:clamp(11px, 2.5cqw, 15px);line-height:1.35;color:rgba(255,255,255,.72)}
.regras__radio{
  position:absolute;left:3.2cqw;top:3.4cqw;
  width:3.3cqw;height:3.3cqw;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:grid;place-items:center;
  transition:border-color .45s var(--ease);
}
.regras__radio::after{
  content:"";width:1.65cqw;height:1.65cqw;border-radius:50%;
  background:var(--gold);transform:scale(0);
  transition:transform .42s cubic-bezier(.32,.72,0,1);
}
/* Selecionado: o mesmo vidro, tingido de ouro — a peça não troca de material,
   só de cor. */
.regras__op.is-marcada{
  background:rgba(233,201,122,.2);
  border-color:rgba(233,201,122,.5);
  box-shadow:
    0 1.6cqw 3.6cqw -1.4cqw rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.regras__op.is-marcada .regras__radio{border-color:var(--gold)}
.regras__op.is-marcada .regras__radio::after{transform:scale(1)}

/* cena 3 — dias de espera */
.regras__dias{display:flex;align-items:center;gap:2.9cqw}
.regras__dias b{
  font-family:var(--font-display);font-weight:700;font-size:14cqw;line-height:.9;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
/* Duas linhas ao lado do número grande: sobe de corpo para equilibrar com o 7
   e ganha entrelinha mais fechada, para o bloco ler como um par e não como
   duas frases soltas. */
.regras__dias-txt{font-size:clamp(14px, 3.7cqw, 22px);line-height:1.18;
  font-weight:500;color:rgba(255,255,255,.92)}
/* Cena "marco": seta num disco, valor grande, título e legenda — a leitura
   desce em quatro degraus de peso, do símbolo ao detalhe. Cada degrau entra
   um pouco depois do anterior, para o olho percorrer na ordem certa. */
.regras__marco{display:flex;flex-direction:column;align-items:center;text-align:center}
/* Rótulo em caixa-alta ANTES do valor: diz o que aconteceu, e só então quanto. */
.regras__marco-rot{
  display:block;margin-bottom:2cqw;
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(10px, 2.6cqw, 15px);color:rgba(255,255,255,.78);
}
.regras__seta{
  display:grid;place-items:center;
  width:15cqw;height:15cqw;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;margin-bottom:4.5cqw;
  overflow:hidden;   /* recorta a seta na borda do disco durante o envio */
}
.regras__seta svg{width:52%;height:52%}

/* "Enviada": a seta sobe até sumir pela borda de cima e volta a entrar por
   baixo, como um item que partiu. O corte no 50/51% é o pulo instantâneo de um
   lado ao outro — sem ele a seta desceria de volta pelo caminho de onde saiu,
   e a leitura de envio se perde. */
/* A seta que RECEBE faz o caminho inverso: desce, sai pela borda de baixo e
   reentra por cima. Só o nome da animação muda — duração, atraso e curva vêm
   da regra de cima. */
@keyframes regras-recebe{
  0%,18%  {transform:translateY(0);      opacity:1}
  50%     {transform:translateY(190%);   opacity:0}
  51%     {transform:translateY(-190%);  opacity:0}
  82%,100%{transform:translateY(0);      opacity:1}
}
@keyframes regras-envia{
  0%,18%  {transform:translateY(0);      opacity:1}
  50%     {transform:translateY(-190%);  opacity:0}
  51%     {transform:translateY(190%);   opacity:0}
  82%,100%{transform:translateY(0);      opacity:1}
}
/* Dispara 3s depois de o painel entrar; reinicia a cada volta do ciclo,
   porque a classe is-ativa sai e volta. */
.regras__cena.is-ativa .regras__seta svg{
  animation:regras-envia 1.5s var(--ecoa) 3s both;
}
/* Precisa vir DEPOIS da regra de cima: as duas têm a mesma especificidade, e
   o atalho `animation` de lá rezera o animation-name se vier por último. */
.regras__cena.is-ativa .regras__seta--desce svg{animation-name:regras-recebe}
/* Mesmo vidro do cartão que o abriga: translúcido, com o fio de luz na borda.
   (Já foi disco cheio dourado, quando vivia sobre uma mesa clara e o traço
   dourado sumia dentro dele. Aqui o fundo é escuro, então o vazado funciona.) */
.regras__seta--desce{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
/* Dimensionado para "R$ 870.000,00" — 13 caracteres — caber numa linha só
   dentro do painel. nowrap para o valor nunca partir ao meio: um número
   quebrado em duas linhas deixa de ser lido como número. */
.regras__valor{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px, 6.4cqw, 38px);line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.regras__marco-tit{
  display:block;margin-top:2.6cqw;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px, 4.2cqw, 25px);line-height:1.15;color:#fff;
}
/* Quando o rótulo vem logo abaixo do disco, os dois se aproximam: somadas, a
   margem do disco e a do rótulo abriam um vão grande demais para um cartão que
   só tem esses dois elementos. */
.regras__seta + .regras__marco-tit{margin-top:0}
.regras__seta:has(+ .regras__marco-tit){margin-bottom:4.2cqw}

/* Cartão da aba "Receber": mais estreito e mais alto que o padrão do rodízio.
   Ele carrega só um disco e uma linha de texto — na proporção larga herdada
   das cenas de várias linhas, o conteúdo boiava no meio de muito vazio.
   O texto encolhe junto: a 4.2cqw "Eficiência Tributária" não caberia mais em
   uma linha na largura nova, e quebrar em duas desmontaria o eixo central. */
.regras .regras__cena--marco{
  max-width:52cqw;
  padding:9.4cqw 4.2cqw;
}
.regras__cena--marco .regras__marco-tit{font-size:clamp(14px, 3.75cqw, 23px)}

.regras__marco-sub{
  display:block;margin-top:1.6cqw;
  font-size:clamp(11px, 2.7cqw, 16px);line-height:1.35;color:rgba(255,255,255,.7);
}
.regras__marco>*{
  opacity:0;transform:translateY(2.2cqw);
  transition:opacity .55s var(--ease), transform .7s var(--ecoa);
}
.regras__cena.is-ativa .regras__marco>*{opacity:1;transform:none}
.regras__cena.is-ativa .regras__seta      {transition-delay:.08s}
.regras__cena.is-ativa .regras__marco-rot {transition-delay:.20s}
.regras__cena.is-ativa .regras__valor     {transition-delay:.32s}
.regras__cena.is-ativa .regras__marco-sub {transition-delay:.44s}

/* ---- Cena em pilha: dois painéis, um sob o outro ----
   A cena deixa de ser o vidro e vira só o arranjo; o vidro passa para os
   painéis de dentro. Assim a faixa de baixo é uma peça separada de verdade,
   com seu próprio material, e pode entrar depois da principal. */
.regras__cena--pilha{
  background:none;border:none;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;flex-direction:column;gap:2.6cqw;
}
.regras__painel,
.regras__faixa{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    0 4cqw 10cqw -4cqw rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(7cqw) saturate(180%);
  -webkit-backdrop-filter:blur(7cqw) saturate(180%);
}
.regras__painel{border-radius:5cqw;padding:5.6cqw 4.4cqw 6cqw}
/* A faixa é baixa de propósito: uma linha de confirmação, não um segundo cartão
   de conteúdo. O raio acompanha a altura para ela ler como pílula achatada. */
.regras .regras__faixa{
  border-radius:3.4cqw;padding:3cqw 3.4cqw;
  display:flex;align-items:center;justify-content:center;gap:2.2cqw;
  /* dimensionada para 'Boleto gerado e enviado ao cliente' caber numa linha */
  font-weight:600;font-size:clamp(10px, 2.5cqw, 15px);line-height:1.25;
  white-space:nowrap;
  color:rgba(255,255,255,.94);
}
.regras__tique{
  flex:none;display:grid;place-items:center;
  width:5.2cqw;height:5.2cqw;border-radius:50%;
  background:var(--gold);color:#3A2C05;
}
.regras__tique svg{width:62%;height:62%}

.regras__cena--pilha>*{
  opacity:0;transform:translateY(2.6cqw);
  transition:opacity .6s var(--ease), transform .8s var(--ecoa);
}
.regras__cena--pilha.is-ativa>*{opacity:1;transform:none}
/* A faixa só entra DEPOIS que a seta terminou de ser enviada (3s de espera +
   1,5s de voo): é a confirmação do que acabou de partir, não um segundo
   elemento aparecendo junto. Curva com leve avanço para ler como notificação. */
.regras__cena--pilha.is-ativa .regras__faixa{
  transition:opacity .45s var(--ease) 4.1s,
             transform .6s cubic-bezier(.2,1.25,.4,1) 4.1s;
}

/* cena de confirmação (passo 2) — selo redondo + frase em duas linhas */
.regras__feito{display:flex;align-items:center;gap:3.4cqw}
.regras__selo{
  flex:none;display:grid;place-items:center;
  width:11cqw;height:11cqw;border-radius:50%;
  background:rgba(233,201,122,.22);
  border:1px solid rgba(233,201,122,.5);
  color:var(--gold);
}
.regras__selo svg{width:55%;height:55%}
/* Entra depois do painel: o traço do certo só rabisca quando a cena já assentou. */
.regras__selo svg path{
  stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset .6s var(--ecoa) .35s;
}
.regras__cena.is-ativa .regras__selo svg path{stroke-dashoffset:0}
.regras__feito b{
  font-family:var(--font-display);font-weight:700;line-height:1.18;
  font-size:clamp(15px, 4cqw, 24px);color:#fff;
}

.regras .regras__nota{margin-top:3.4cqw;font-size:clamp(11px, 2.5cqw, 15px);line-height:1.4;color:rgba(255,255,255,.66)}

/* Sem backdrop-filter o vidro sumiria: fecha o fundo para manter a leitura. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .regras__cena{background:rgba(12,18,40,.72)}
}
@media (prefers-reduced-motion:reduce){
  .regras__cena,.regras__linhas li,.regras__radio::after{transition:none}
  .regras__seta svg{animation:none}
}
.flow__num{
  width:38px;height:38px;border-radius:50%;background:var(--gold);color:#3A2C05;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:20px;
}
.flow__step h3{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:clamp(20px, 16.66px + 0.857vw, 29px);line-height:1.2;letter-spacing:-.015em}
/* ATENÇÃO ao escopo: tudo daqui vale só para a COLUNA DE TEXTO do passo.
   Escrito como `.flow__step li`, alcançava também os <li> de dentro da
   animação — que são irmãos na mesma seção — e ali plantava um marcador que
   não era para existir, além de sobrescrever a tipografia própria deles.
   O `:not(.flow__media)` é o que separa as duas metades do passo. */
.flow__step>div:not(.flow__media) ul{
  margin-top:24px;display:flex;flex-direction:column;gap:16px;
  list-style:none;padding-left:0;
}
/* O <p> não tinha margem nenhuma e encostava no título — só o <ul> respirava.
   Os dois agora saem do h3 com o mesmo intervalo. */
.flow__step>div:not(.flow__media)>p{margin-top:24px}
.flow__step>div:not(.flow__media) li,
.flow__step>div:not(.flow__media)>p{
  font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.55;color:#E4E4E4;
  /* Medida de leitura: a coluna tem 553px e a linha chegava a 512, perto de 60
     caracteres. 42ch traz para a faixa confortável sem abrir linha demais. */
  max-width:42ch;
}
/* Itens da lista são curtos: `balance` reparte as palavras entre as linhas em
   vez de encher a primeira e largar uma palavra órfã na segunda. Nos parágrafos,
   mais longos, `pretty` só cuida do fim — `balance` ali custaria caro e é
   ignorado acima de poucas linhas. */
.flow__step>div:not(.flow__media) li{text-wrap:balance}
.flow__step>div:not(.flow__media)>p{text-wrap:pretty}

/* Marcador: o mesmo disco com check da .checklist do site, em ouro para ler
   sobre o fundo preto desta seção. */
.flow__step>div:not(.flow__media) li{display:flex;align-items:flex-start;gap:13px}
.flow__step>div:not(.flow__media) li>svg{
  width:20px;height:20px;flex:none;margin-top:2px;color:var(--gold);
}
.flow__outro{text-align:center;margin-top:clamp(44px,5vw,80px)}
.flow__outro p{font-family:var(--font-display);font-weight:500;font-size:clamp(20px, 16.29px + 0.952vw, 30px);line-height:1.25;color:var(--gold)}
.flow__outro .row{justify-content:center;margin-top:28px}

/* ==========================================================================
   SOBRE NÓS
   ========================================================================== */
.about-hero{text-align:center;padding-block:clamp(56px,7vw,110px) clamp(40px,5vw,72px)}
/* +4px no teto e no piso, e o clamp inteiro sobe junto para a proporção se
   manter no tablet. O max-width sai de 19ch: com as quebras agora explícitas,
   uma medida estreita ia cortar as linhas de novo, antes dos <br>. No mobile,
   onde os <br class="br-lg"> somem, ele volta a ser o que decide a quebra. */
.about-hero h1{
  color:var(--gold-deep);text-transform:uppercase;
  font-size:clamp(32px, 20.11px + 3.048vw, 64px);
  max-width:30ch;margin-inline:auto;line-height:1.1;
}
@media (max-width:1024px){ .about-hero h1{max-width:19ch} }
.about-hero p{margin-top:26px;max-width:70ch;margin-inline:auto;font-size:clamp(16px, 14.51px + 0.381vw, 20px);color:var(--muted)}
.about-hero p b{color:var(--text-2)}
.about-hero .link-underline{display:inline-block;margin-top:18px;font-size:clamp(16px, 14.51px + 0.381vw, 20px);color:var(--text-2)}
/* História + números num bloco só, com o topo em ARCO como no PSD.
   Raio de 2000px nas duas quinas de cima: quando a soma dos raios passa da
   largura, o navegador reduz todos na mesma proporção, e o resultado é um
   semicírculo exato com raio = metade da largura, em qualquer tela. Com % o
   raio vertical dependeria da ALTURA do bloco, que muda com o texto. */
.history{
  position:relative;
  background:var(--black);color:var(--white);
  border-radius:2000px 2000px 0 0;
  padding:clamp(96px,14vw,210px) clamp(20px,5.4vw,96px) clamp(72px,7vw,110px);
  margin-bottom:28px;                    /* metade do botão que desce da borda */
  text-align:center;
}
/* Respiro entre o fim da história e o selo dos números (item 2). */
.history__numeros{margin-top:clamp(72px,10vw,160px);text-align:left}
/* O botão monta sobre a divisa: meio no preto, meio no fundo claro (item 3). */
.history__cta{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  z-index:2;
}
/* o :hover e o :active do .btn trocam o transform inteiro — aqui isso jogava o
   botão para fora da divisa. Mantém a centralização e tira o "pulo". */
.history__cta:hover,.history__cta:active{transform:translate(-50%,50%)}
.history h2{color:var(--white);text-transform:uppercase;font-size:var(--fs-section)}
.history__text{max-width:720px;margin:clamp(28px,3vw,44px) auto 0;display:flex;flex-direction:column;gap:20px}
.history__text p{font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:#DADCE1}
.founders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
/* No desktop a quebra vem do <br class="br-lg">; o max-width sai do caminho
   para não cortar a primeira linha antes dele. No mobile volta aos 17ch. */
/* O cabeçalho ocupa as DUAS colunas. Em caixa alta, "CRIADA POR QUEM CONHECE
   A DOR" pede 758px a 42px, e a coluna de texto tem 582 — dentro dela as duas
   linhas pedidas só caberiam encolhendo o título para ~32px, menor que todos
   os outros títulos de seção. Atravessando a grade, cabe no corpo normal. */
.founders__head{grid-column:1 / -1}
.founders{row-gap:clamp(24px,2.8vw,40px)}   /* o gap de colunas (64px) afastava demais o título do texto */
.founders h2{text-transform:uppercase;max-width:none}
.founders>div>p:first-child{margin-top:0}
@media (max-width:1024px){ .founders h2{max-width:17ch} }
.founders>div>p{margin-top:26px;font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:var(--muted)}
.founders>div>p+p{margin-top:14px}
.founders__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.founder{background:var(--surface-2);border-radius:var(--radius);overflow:hidden;text-align:center}
.founder img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top}
.founder__name{font-family:var(--font-display);font-weight:700;font-size:clamp(16px, 14.51px + 0.381vw, 20px);margin-top:22px;padding-inline:14px}
/* display:block é o que faltava: a faixa é um <span>, e em elemento inline
   width e height não valem — ela existia no HTML mas tinha tamanho zero. */
.founder__rule{display:block;width:64%;height:4px;background:var(--gold-deep-2);border-radius:99px;margin:16px auto}
.founder__role{font-size:clamp(15px, 14.26px + 0.19vw, 17px);color:var(--muted);padding-bottom:24px}
.vision{text-align:center}
.vision h2{
  margin-top:24px;text-transform:uppercase;margin-inline:auto;
  font-size:clamp(28px, 13.4px + 2.8vw, 54px);line-height:1.06;
  max-width:none;
}
@media (max-width:1024px){ .vision h2{max-width:22ch} }
/* Largura para a primeira linha terminar em "loteadoras," como no PSD; abaixo
   do desktop o <br class="br-lg"> some e o texto volta a fluir. */
.vision__text{max-width:1060px;margin:30px auto 0;display:flex;flex-direction:column;gap:16px}
.vision__text p{font-size:clamp(15px, 14.26px + 0.19vw, 17px);line-height:1.5;color:var(--muted)}
.vision__text p b{color:var(--text-2)}

/* ==========================================================================
   PÁGINAS SIMPLES / LEGAIS
   ========================================================================== */
/* ---- Caminho da página (migalhas) ----
   Só nas páginas de terceiro nível, logo abaixo do header. Como ela entra
   antes da primeira seção, o respiro de cima passa a ser dela e a seção
   seguinte perde o próprio, senão sobraria um vão enorme entre as duas. */
.migalhas{padding-top:clamp(20px,2.4vw,32px)}
.migalhas ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;
  list-style:none;margin:0;padding:0;font-size:14px;
}
.migalhas li{display:inline-flex;align-items:center;gap:2px;min-width:0}
.migalhas svg{width:15px;height:15px;flex:none;color:var(--line-2);margin:0 2px}
.migalhas a{
  color:var(--muted);padding:3px 5px;border-radius:6px;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.migalhas a:hover{color:var(--gold-ink);background:var(--gold-soft)}
.migalhas [aria-current="page"]{color:var(--text);font-weight:600;padding:3px 5px}
.migalhas + .page-hero,
.migalhas + .section{padding-top:clamp(16px,1.8vw,26px)}

.page-hero{padding-block:clamp(48px,6vw,88px) clamp(24px,3vw,40px)}
.page-hero h1{max-width:20ch}
.page-hero p{margin-top:20px;max-width:70ch}
/* ---- Documento legal com sumário ----
   Duas colunas: o índice da página à esquerda, grudado enquanto se rola, e o
   texto à direita. O índice é gerado no build a partir dos <h2 id> do próprio
   corpo, então ele nunca fica fora de sincronia com o texto. */
.doc{
  display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(30px,4vw,68px);align-items:start;
}
.sumario{
  position:sticky;
  /* o header é fixo no topo: o sumário para logo abaixo dele */
  top:calc(var(--header-h-stuck) + 26px);
  max-height:calc(100vh - var(--header-h-stuck) - 52px);
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;
}
.sumario__tit{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.sumario__tit--2{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
}
.sumario__lista,.sumario__links{list-style:none;margin:0;padding:0;font-size:14px}
.sumario__lista li,.sumario__links li{margin-bottom:2px}
.sumario a{
  display:block;padding:6px 10px;border-radius:8px;
  color:var(--muted);line-height:1.35;
  border-left:2px solid transparent;
  transition:color .18s var(--ease),background-color .18s var(--ease),
             border-color .18s var(--ease);
}
.sumario a:hover{color:var(--text);background:var(--surface-2)}
/* seção em que a leitura está agora, marcada pelo main.js */
.sumario__lista a.is-current{
  color:var(--gold-ink);background:var(--gold-soft);
  border-left-color:var(--gold-deep);font-weight:600;
}
.sumario__links a{color:var(--text-2)}
.sumario__links a:hover{color:var(--gold-ink);background:var(--gold-soft)}

@media (max-width:1024px){
  /* empilhado, o índice vira um bloco no topo do documento e para de grudar */
  /* minmax(0,1fr) e não 1fr: a tabela da política tem min-width:460px e, com
     `1fr` (= minmax(auto,1fr)), a coluna não podia encolher abaixo disso e
     empurrava a página inteira para 480px de largura no celular. */
  .doc{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,36px)}
  .sumario{
    position:static;max-height:none;padding:clamp(18px,2.2vw,24px);
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);
  }
  .sumario__lista,.sumario__links{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;
  }
}
@media (max-width:620px){
  .sumario__lista,.sumario__links{grid-template-columns:1fr}
}

.prose{max-width:78ch;font-size:16px;line-height:1.7;color:var(--text-2)}
.prose h2{font-family:var(--font-display);font-size:clamp(19px, 15.66px + 0.857vw, 28px);font-weight:700;margin-top:44px;margin-bottom:14px;color:var(--text)}
.prose h3{font-size:19px;font-weight:600;margin-top:30px;margin-bottom:10px;color:var(--text)}
.prose p{margin-bottom:16px}
.prose ul{list-style:disc;padding-left:22px;margin-bottom:18px}
.prose ol{list-style:decimal;padding-left:22px;margin-bottom:18px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
/* Tabela de finalidades e bases legais. O invólucro rola na horizontal porque
   na largura de celular duas colunas de texto não cabem sem espremer. */
.prose__tabela{overflow-x:auto;margin-bottom:22px;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
.prose th,.prose td{
  text-align:left;vertical-align:top;padding:12px 16px;
  border:1px solid var(--line);line-height:1.5;
}
.prose th{background:var(--surface-2);color:var(--text);font-weight:600}
.prose tbody tr:nth-child(even) td{background:#FBFBFC}
/* campo que ainda falta preencher numa minuta jurídica */
.falta{background:#FFF3A8;color:#5A4600;padding:1px 7px;border-radius:5px;font-weight:600}
.notice{
  border-left:3px solid var(--gold);background:var(--gold-soft);
  padding:16px 20px;border-radius:0 10px 10px 0;font-size:15px;color:var(--gold-ink);margin-bottom:24px
}
.center-card{max-width:560px;margin-inline:auto}
.minimal-header{border-bottom:1px solid var(--line);background:var(--white)}
.minimal-header .container{display:flex;justify-content:center;align-items:center;height:76px}
/* Faixa do topo da abertura de conta. O fundo são as duas logos gigantes em
   dourado escuro do PSD, cortadas pela faixa — exportadas sem o texto, que
   continua sendo HTML. cover escala em telas largas sem deixar emenda onde a
   logo da esquerda é cortada pela borda da imagem. */
.announce{
  background:#000 url("../img/announce-bg.jpg") center / cover no-repeat;
  color:var(--gold);text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:12px var(--gutter);
}
.perfil-campos{border:0;padding:0;margin:0;min-width:0}
/* select ainda na opção de instrução lê como placeholder, não como resposta */
.select:invalid{color:var(--muted)}

/* ==========================================================================
   CELULAR QUE GIRA (hero da home)
   --------------------------------------------------------------------------
   Um iPhone dourado em 3D real: frente, verso e duas laterais montadas com
   transform-style:preserve-3d. Parado ele flutua inclinado; a cada etapa dá um
   giro de 360° em Y e pousa com outra tela. A troca da tela acontece com o
   aparelho de COSTAS (meio do giro), por isso ninguém vê o conteúdo "piscar".
   Medidas em cqw do .giro. Sem filter no aparelho: filter achata o 3D.
   ========================================================================== */
.giro{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:1000/1088;
  perspective:1100px;perspective-origin:50% 40%;
  --w:40cqw;--h:83cqw;--t:4.4cqw;              /* largura, altura, espessura */
  --ouro:linear-gradient(135deg,#F9E7B4 0%,#E9C97A 20%,#C8993A 46%,#F4DA96 60%,#B7862B 82%,#E8C676 100%);
}
.giro__brilho{
  position:absolute;left:50%;top:46%;width:86cqw;height:86cqw;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(233,201,122,.42), rgba(233,201,122,0) 66%);
}
.giro__sombra{
  position:absolute;left:50%;bottom:4cqw;width:44cqw;height:6cqw;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(60,45,10,.28), rgba(60,45,10,0));
  animation:giro-sombra 5.2s ease-in-out infinite;
}
@keyframes giro-sombra{50%{transform:translateX(-50%) scaleX(.86);opacity:.75}}

/* cena com perspectiva própria: o desfoque de movimento do giro é aplicado
   nela (filter no elemento 3D achataria o aparelho) */
.giro__cena{position:absolute;inset:0;z-index:2;perspective:1100px;perspective-origin:50% 40%}
/* modo 3D (giro3d.js): o canvas assume o aparelho e os satélites */
.giro__3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
/* o celular em CSS fica escondido até o giro3d.js dizer que não vai rodar,
   para não piscar a animação antiga no carregamento */
.giro__cena,.giro .sat{display:none}
.giro--css .giro__cena{display:block}
.giro--css .sat{display:flex}
.giro--css .sat--predio,.giro--css .sat--selo,.giro--css .sat--seta,.giro--css .sat--recibo{display:grid}
.giro--3d .giro__sombra{animation:none;transition:none}
/* o halo dourado e a sombra são do celular em CSS: ficam escondidos até
   saber qual dos dois vai rodar, senão piscam no carregamento */
.giro__brilho,.giro__sombra{display:none}
.giro--css .giro__brilho,.giro--css .giro__sombra,.giro--3d .giro__sombra{display:block}
/* pose controlada pelo main.js (h6); este é o repouso sem JS */
.giro__flutua{
  position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style:preserve-3d;
  transform:rotateX(10deg) rotateY(-28deg) rotateZ(8deg);
}

.cel{position:absolute;inset:0;transform-style:preserve-3d}

.cel__frente,.cel__verso{
  position:absolute;inset:0;border-radius:6.4cqw;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* aparelho de vidro transparente: aro claro, arestas brilhantes */
.cel__frente{
  transform:translateZ(calc(var(--t) / 2));
  background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(206,213,226,.45) 45%,rgba(255,255,255,.7));
  padding:1.4cqw;
  box-shadow:
    inset 0 0 0 .25cqw rgba(255,255,255,.95),
    inset 0 0 0 .7cqw rgba(160,170,188,.35),
    inset 0 0 1.6cqw rgba(255,255,255,.8),
    0 3cqw 6cqw -2cqw rgba(30,35,50,.3);
}
.cel__verso{
  transform:rotateY(180deg) translateZ(calc(var(--t) / 2));
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 58%),
    radial-gradient(90% 55% at 70% 75%,rgba(255,255,255,.35),transparent 60%),
    linear-gradient(160deg,rgba(236,240,247,.7),rgba(186,195,210,.42) 50%,rgba(225,230,240,.6));
  box-shadow:
    inset 0 0 0 .25cqw rgba(255,255,255,.95),
    inset 0 0 0 .7cqw rgba(160,170,188,.35),
    inset 0 0 2cqw rgba(255,255,255,.75),
    0 3cqw 6cqw -2cqw rgba(30,35,50,.3);
}
.cel__cameras{
  position:absolute;left:2.8cqw;top:2.8cqw;width:17cqw;height:17cqw;border-radius:4.4cqw;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(190,198,212,.45));
  box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.95),inset 0 0 0 .6cqw rgba(150,160,178,.3),
    0 .8cqw 1.6cqw rgba(30,35,50,.18);
}
.cel__cameras i{position:absolute;width:6.6cqw;height:6.6cqw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2b3a66 0 9%,#07080c 14%,#15171d 46%,#050608 70%);
  box-shadow:0 0 0 .55cqw #d9dde5,0 0 0 .75cqw #8a92a0,0 .5cqw 1cqw rgba(0,0,0,.35)}
.cel__cameras i:nth-child(1){left:1.3cqw;top:1.3cqw}
.cel__cameras i:nth-child(2){left:1.3cqw;bottom:1.3cqw}
.cel__cameras i:nth-child(3){right:1.3cqw;top:5.2cqw}
/* flash e sensor */
.cel__cameras::before,.cel__cameras::after{content:"";position:absolute;border-radius:50%}
.cel__cameras::before{right:3.2cqw;top:1.6cqw;width:2.6cqw;height:2.6cqw;
  background:radial-gradient(circle,#fff6d8,#e8d9a6 60%,#b9ad86)}
.cel__cameras::after{right:3.6cqw;bottom:2cqw;width:1.9cqw;height:1.9cqw;background:#1a1c22}

/* corpo: fatias empilhadas em Z formam a aresta arredondada e sólida do aparelho */
.cel__corpo{position:absolute;inset:0;transform-style:preserve-3d}
.cel__corpo i{
  position:absolute;inset:.15cqw;border-radius:6.4cqw;
  transform:translateZ(calc(var(--t) * (var(--k) - .5)));
  background:hsl(220 14% var(--l));
}

/* tela */
.cel__tela{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:5.3cqw;background:linear-gradient(180deg,#FFFFFF,#F7F4ED);
  border:.7cqw solid #0b0c0f;
}
.cel__ilha{position:absolute;left:50%;top:1.6cqw;width:11cqw;height:3.2cqw;
  transform:translateX(-50%);border-radius:99px;background:#0c0c0e;z-index:3}
/* reflexo do vidro */
.cel__tela::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 56%)}

.gtela{position:absolute;inset:0;padding:8.4cqw 3.6cqw 4cqw;display:flex;flex-direction:column;
  opacity:0;visibility:hidden}
.giro[data-tela="1"] [data-tela-n="1"],
.giro[data-tela="2"] [data-tela-n="2"],
.giro[data-tela="3"] [data-tela-n="3"],
.giro[data-tela="4"] [data-tela-n="4"],
.giro[data-tela="5"] [data-tela-n="5"]{opacity:1;visibility:visible}

.gtela__app{font-family:var(--font-display);font-weight:700;font-size:2.2cqw;letter-spacing:.06em;color:var(--gold-deep-2)}
.gtela__rot{margin-top:3cqw;font-size:2cqw;color:var(--muted)}
.gtela__tit{margin-top:.6cqw;font-family:var(--font-display);font-weight:700;font-size:3.4cqw;line-height:1.1;color:var(--text)}
.gtela__sub{margin-top:.8cqw;font-size:1.8cqw;color:var(--muted)}
.gtela__valor{margin-top:2.4cqw;font-family:var(--font-display);font-weight:700;font-size:3.5cqw;letter-spacing:-.02em;color:var(--gold-deep-2)}
.gtela__valor--grande{font-size:6.6cqw;margin-top:2.6cqw}
.gtela__predio{margin-top:4cqw;width:8cqw;height:8cqw;border-radius:50%;display:grid;place-items:center;
  background:rgba(233,201,122,.35);color:var(--gold-deep-2)}
.gtela__predio svg{width:55%;height:55%}
.gtela__btn{margin-top:1.4cqw;display:block;text-align:center;padding:1.9cqw;border-radius:99px;
  background:var(--gold);color:#3A2C05;font-weight:700;font-size:2cqw}
/* o botão vazado vem sempre primeiro: é ele que empurra os botões para o pé da tela */
.gtela__btn--linha{margin-top:auto;background:transparent;border:1px solid rgba(150,114,7,.45);color:var(--gold-deep-2)}
.gtela__barras{margin-top:3.4cqw;height:7cqw;border-radius:1cqw;
  background:repeating-linear-gradient(90deg,#111 0 .35cqw,transparent .35cqw .6cqw,#111 .6cqw .75cqw,transparent .75cqw 1.25cqw)}
.gtela__cod{margin-top:1.2cqw;font-size:1.4cqw;color:var(--muted);word-break:break-all;line-height:1.3}
.gtela__ok{margin:12cqw auto 0;width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#3A2C05}
.gtela__ok svg{width:52%;height:52%}
.gtela__tit--centro,.gtela__valor--centro,.gtela__sub--centro{text-align:center}
.gtela__tit--centro{margin-top:3cqw}
.gtela__split{list-style:none;margin:3cqw 0 0;padding:0;display:flex;flex-direction:column;gap:1.4cqw}
.gtela__split li{display:flex;justify-content:space-between;padding:1.7cqw 2cqw;border-radius:1.6cqw;
  background:rgba(233,201,122,.18);font-size:1.95cqw}
.gtela__split span{color:var(--text-2)}
.gtela__split b{color:var(--gold-deep-2);font-weight:700}
.gtela__chip{margin-top:auto;align-self:center;padding:1.3cqw 2.6cqw;border-radius:99px;
  background:rgba(150,114,7,.12);color:var(--gold-ink);font-size:1.8cqw;font-weight:600}
.gtela__graf{margin-top:4.4cqw;display:flex;align-items:flex-end;gap:1.3cqw;height:17cqw}
.gtela__graf i{flex:1;border-radius:.8cqw .8cqw 0 0;background:var(--gold);opacity:.55}
.gtela__graf i:nth-child(1){height:30%}.gtela__graf i:nth-child(2){height:46%}
.gtela__graf i:nth-child(3){height:60%}.gtela__graf i:nth-child(4){height:78%}
.gtela__graf i:nth-child(5){height:100%;opacity:1}

/* ---- satélites ---- */
.sat{position:absolute;z-index:3;opacity:0;pointer-events:none;
  transform:translate(var(--vx,0),var(--vy,0)) scale(.2);
  transition:opacity .22s ease-in,transform .3s cubic-bezier(.5,0,.75,0)}
.giro[data-sat="1"] [data-sat-de="1"],
.giro[data-sat="2"] [data-sat-de="2"],
.giro[data-sat="3"] [data-sat-de="3"],
.giro[data-sat="4"] [data-sat-de="4"],
.giro[data-sat="5"] [data-sat-de="5"]{opacity:1;transform:none;
  transition:opacity .3s ease-out var(--d,0s),transform .7s cubic-bezier(.34,1.45,.64,1) var(--d,0s)}

.sat--predio{--vx:14cqw;--vy:6cqw;--d:.1s;left:10cqw;top:22cqw;width:17cqw;height:17cqw;border-radius:4cqw;display:grid;place-items:center;
  background:var(--ouro);color:#4A3608;box-shadow:0 2cqw 4cqw -1cqw rgba(60,45,10,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.sat--predio svg{width:60%;height:60%}

.sat--selo{--vx:-8cqw;--vy:-8cqw;--d:.35s;right:22cqw;bottom:20cqw;width:14cqw;height:14cqw;filter:drop-shadow(0 1.4cqw 2cqw rgba(20,60,140,.35));
}
.sat--selo svg{width:100%;height:100%}
.sat--powered{left:14cqw;bottom:26cqw;display:flex;align-items:baseline;gap:1.2cqw;padding:1.8cqw 3cqw;border-radius:99px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(1.6cqw);backdrop-filter:blur(1.6cqw);box-shadow:0 1.4cqw 3cqw -1cqw rgba(60,45,10,.25);
  font-size:2.2cqw;--vx:16cqw;--vy:-2cqw;--d:.6s}
.sat--powered span{color:var(--muted)}
.sat--powered b{font-family:var(--font-display);letter-spacing:.04em;color:var(--gold-deep-2)}

/* o comprovante sobe por trás do topo do aparelho, como papel saindo da maquininha */
.sat--recibo{left:32cqw;top:6cqw;width:37cqw;z-index:1;padding:2.4cqw 3cqw 3.2cqw;border-radius:1.4cqw 1.4cqw 0 0;
  background:#FFFDF8;box-shadow:0 1cqw 3cqw -1cqw rgba(60,45,10,.3);
  display:flex;flex-direction:column;gap:1.1cqw;font-size:1.9cqw;white-space:nowrap;
  transform:translateY(22cqw);opacity:1;clip-path:inset(0 0 0 0);
  transition:transform .3s ease-in,visibility 0s .3s;visibility:hidden}
.giro[data-sat="3"] .sat--recibo{visibility:visible;transform:translateY(-6cqw);transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .25s}
.sat--recibo b{font-family:var(--font-display);font-size:2.3cqw}
.recibo__linha{display:flex;justify-content:space-between;color:var(--text-2)}
.recibo__linha i{font-style:normal}
.recibo__cod{height:3.4cqw;margin-top:.6cqw;
  background:repeating-linear-gradient(90deg,#222 0 .3cqw,transparent .3cqw .55cqw,#222 .55cqw .7cqw,transparent .7cqw 1.1cqw)}

.sat--pessoa{display:flex;flex-direction:column;gap:.4cqw;padding:1.8cqw 2.8cqw;border-radius:2cqw;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(1.6cqw);backdrop-filter:blur(1.6cqw);box-shadow:0 1.4cqw 3cqw -1cqw rgba(60,45,10,.25)}
.sat--pessoa i{font-style:normal;font-size:1.8cqw;color:var(--muted)}
.sat--pessoa b{font-size:2.4cqw;color:var(--gold-deep-2)}
.sat--p1{--vx:16cqw;--vy:8cqw;--d:.1s;left:4cqw;top:26cqw}
.sat--p2{--vx:-16cqw;--vy:4cqw;--d:.25s;right:5cqw;top:34cqw}
.sat--p3{--vx:16cqw;--vy:-10cqw;--d:.4s;left:6cqw;top:58cqw}
.sat--p4{--vx:-16cqw;--vy:-14cqw;--d:.55s;right:3cqw;top:66cqw}

.sat--seta{--vx:-10cqw;--vy:8cqw;--d:.2s;right:14cqw;top:24cqw;width:15cqw;height:15cqw;border-radius:50%;display:grid;place-items:center;
  background:var(--ouro);color:#4A3608;box-shadow:0 2cqw 4cqw -1cqw rgba(60,45,10,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.sat--seta svg{width:52%;height:52%}

@media (prefers-reduced-motion:reduce){
  .giro__sombra{animation:none}
  .sat,.giro[data-sat] .sat{transition:none!important}
}

/* ==========================================================================
   UTILITÁRIOS / ANIMAÇÃO
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
/* só para leitor de tela: sai do fluxo mas continua no acessível */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#241B00;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1180px){
  .nav a{padding:9px 12px;font-size:13.5px}
  .logo img{width:132px}
  .problem__body{grid-template-columns:230px minmax(0,1fr)}
}
@media (max-width:1024px){
  :root{--header-h:64px}
  .nav,.header__actions{display:none}
  .burger{display:flex}
  /* .hero--split .hero__grid (0,2,0) vence .hero__grid (0,1,0) mesmo dentro do
     media query — media query não soma especificidade. Sem esta linha o hero
     dividido nunca empilhava: a 500px ele virava duas colunas de ~210px, e com
     o .heroapp (container-type) dentro de uma coluna dimensionada pelo
     conteúdo a coluna colapsava para zero. */
  .hero__grid,
  .hero--split .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__content{max-width:none}
  /* a tag do hero--split nascia a 24px do pé do cabeçalho, perto demais;
     com estes 14px o vão vai para 38px */
  .hero--split .hero__pill{margin-top:14px}
  /* width:100% junto com margin-inline:auto não é redundância: num item de
     grid, margem automática desliga o stretch e o bloco passa a ser
     dimensionado pelo conteúdo. Com o .heroapp (container-type) dentro, esse
     conteúdo não informa largura e a coluna inteira colapsava para zero. */
  .hero__media{margin-right:0;width:100%;max-width:620px;margin-inline:auto;pointer-events:auto}
  .hero__media img{margin-inline:auto}
  /* O respiro grande acima do bloco de texto é só para o hero de duas colunas
     do desktop. Empilhado, ele virava um vazio de ~115px abaixo do menu. */
  .hero:not(.hero--split) .hero__content{margin-top:clamp(6px,1.4vh,14px)}
  /* A tag da calculadora ocupa a largura toda e quebra em duas linhas, com a
     seta encostada na direita, em vez de virar um bloco de três linhas. */
  .hero:not(.hero--split) .hero__pill{
    margin-top:0;display:block;position:relative;width:100%;
    padding:11px 30px 11px 16px;font-size:12.5px;line-height:1.4;
  }
  .hero:not(.hero--split) .hero__pill svg{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
  }
  /* O celular 3D sumia no celular: `.hero:not(.hero--split) .hero__grid` (0,3,0)
     vencia a regra de empilhar logo acima (0,1,0), o hero continuava em duas
     colunas e a segunda — que é dimensionada pelo conteúdo e tem
     container-type — colapsava para 0px. O giro3d.js carregava e desenhava
     num canvas de 0×0. Aqui o hero empilha de verdade e a animação vai para
     baixo do texto, como na Pine Labs. */
  .hero:not(.hero--split) .hero__grid{grid-template-columns:minmax(0,1fr)}
  /* a moldura do 3D reserva um vão em cima para o recibo que entra na última
     etapa; parte dele é recuperada aqui para o aparelho não ficar solto */
  .hero:not(.hero--split) .hero__media{width:100%;max-width:none;margin-right:0;margin-top:-64px}
  /* O tamanho do aparelho em 3D é fixo dentro da cena (vem do giro3d.js), então
     quem o aumenta é a largura da moldura. Ela passa da tela de propósito e o
     excesso, que é só o espaço vazio em volta, é cortado pelo overflow do hero. */
  /* A cena anda 10px para a direita e encolhe 6% ao mesmo tempo: só o
     deslocamento aproximaria o gráfico do último passo da borda direita, e os
     6% menores devolvem com folga o que os 10px tiram. */
  .hero:not(.hero--split) .giro{
    width:min(114.7vw,583px);max-width:none;max-height:none;
    position:relative;left:50%;transform:translateX(calc(-50% + 10px));
  }

  /* ----- ITEM 4: ordem do hero no celular e no tablet -----------------------
     tag → título → CTA principal → animação → texto de apoio → CTA secundário
     → "sou corretor" (referência: pinelabs.com no celular).
     `display:contents` dissolve .hero__content e .hero__cta: os filhos viram
     itens diretos da coluna flex e podem ser reordenados um a um. As margens
     dos dois invólucros deixam de valer, por isso cada peça ganha a sua. */
  .hero:not(.hero--split) .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero:not(.hero--split) .hero__content,
  .hero:not(.hero--split) .hero__cta{display:contents}

  .hero:not(.hero--split) .hero__pill{order:1;margin-top:clamp(6px,1.4vh,14px)}
  /* ITEM 2: título 3px maior. Só aqui: no desktop os mesmos 3px empurravam
     a linha 'sou corretor' 54px para baixo da faixa de cookies. */
  .hero:not(.hero--split) .h1{order:2;font-size:clamp(29px, 12px + 2.5vw, 48px)}
  /* o CTA principal tem a largura do próprio texto e fica encostado à
     esquerda; `flex:0 0 auto` é necessário porque o `.row .btn` o esticava */
  .hero:not(.hero--split) .hero__cta .btn--gold{
    order:3;margin-top:30px;width:auto;flex:0 0 auto;align-self:flex-start;
  }
  .hero:not(.hero--split) .hero__media{order:4;margin-top:-34px}
  /* respiro para a sombra do aparelho não encostar no texto de apoio */
  .hero:not(.hero--split) .hero__sub{
    order:5;margin-top:18px;
    /* centralizado e 1px maior; o calc preserva a curva do .body */
    text-align:center;font-size:calc(clamp(16px, 14.51px + 0.381vw, 20px) + 1px);
  }
  /* a tag abraça o texto em vez de esticar com a coluna: precisava de 312px
     numa caixa de 350 e sobrava um vazio à direita. O max-width evita que
     ela estoure num aparelho estreito, onde 312 não cabem. */
  .hero:not(.hero--split) .hero__pill{
    align-self:flex-start;width:max-content;max-width:100%;
  }
  .hero:not(.hero--split) .hero__cta .btn--outline{order:6;margin-top:26px}
  .hero:not(.hero--split) .hero__note{order:7}
  /* só o secundário ocupa a largura toda: o principal tem a sua própria
     regra acima, e com o mesmo peso esta linha, por vir depois, a anulava */
  .hero:not(.hero--split) .hero__cta .btn--outline{width:100%}
  .feature-panel,.steps__body,.audience,.stats,.security__top,.sim,.benefits,
  .product-panel.is-active,.founders,.blog__grid{grid-template-columns:minmax(0,1fr)}
  .product-panel__body{padding:0 clamp(20px,4vw,32px) clamp(24px,4vw,32px)}
  /* 16/10 achatava a arte: no desktop a moldura é QUADRADA e o relatório
     DIMOB precisa dessa altura — em 16/10 o cartão era cortado no pé.
     Voltando ao quadrado, a cena fica igual à do desktop, só menor. */
  .product-panel__media{aspect-ratio:1/1;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  /* a tabela do DIMOB tem 208px e o cartão de vidro só 194: ela escapava
     28px pela direita. O cartão passa a usar quase toda a moldura. */
  .regras__cena.regras__cena--dimob{max-width:94%;padding-left:4cqw;padding-right:4cqw}
  .product-panel__media img{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .security__top .cofre{margin-inline:auto;max-width:280px}
  .stats__items{gap:26px}
  .diag__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow__step{grid-template-columns:1fr}
  .flow__step:nth-child(odd) .flow__media{order:0}
  /* Empilhado não há vão lateral a compensar: o recuo vira desalinho. */
  .flow__step:nth-child(odd)>div:not(.flow__media){padding-left:0}
  /* Mantém o retrato no empilhado, só um pouco menos alto para não empurrar
     o texto do passo para fora da tela. */
  .flow__media{aspect-ratio:500/610;max-width:400px}
  /* A moldura encolhe e o corpo do texto trava no piso do clamp, então a frase
     da faixa deixa de caber na largura de desktop. Alarga a pilha e libera a
     quebra: assim ela cabe numa linha aqui também, e se a frase crescer um dia
     ela quebra em vez de vazar para fora da pílula. */
  .regras__cena--pilha{max-width:80cqw}
  .regras .regras__faixa{white-space:normal}
  .cta-band::after{background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.55) 100%)}
  .cta-band__inner{max-width:none}
  .clients__row{grid-template-columns:repeat(3,1fr);gap:28px}
  .problem__body{grid-template-columns:1fr;gap:28px}
  .tablist{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tablist button{padding:9px 16px;border-radius:var(--radius-pill);background:#141414;font-size:15px}
  .tablist button[aria-selected="true"]{background:var(--gold);color:#3A2C05}
  /* o rótulo encosta na borda do container, mas o texto das pílulas começa
     16px adiante, por causa do recuo delas: o mesmo recuo aqui alinha os dois */
  .problem__label{margin-bottom:14px;padding-left:16px}
  .post--row{grid-template-columns:150px minmax(0,1fr)}
  /* o recuo interno de 20px soma com o do container e sobram só 280px para a
     tag em telas de 360px; aqui ele encolhe para a tag caber em uma linha */
  .history{border-radius:2000px 2000px 0 0;margin-top:24px;padding-inline:8px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .topbar__social{display:none}
  /* sem as redes sociais sobra espaço: o grupo da esquerda passa a ocupar
     a faixa inteira e empurra o WhatsApp para a borda direita */
  .topbar__left{flex:1;width:100%;justify-content:space-between}
  .topbar{font-size:13.5px}
  /* ----- ITEM 5: bloco "Soluções" no celular -------------------------------
     a) as pílulas viravam 3 linhas desiguais E se reorganizavam a cada toque,
        porque a selecionada ficava em negrito e mudava de largura. Agora é uma
        tira única que rola na horizontal, com o peso da fonte fixo.
     b) a arte estava limitada a 230px dentro de um cartão de 335px.
     c) o cartão tinha 340px de altura mínima com o conteúdo centrado na
        vertical, o que sobrava espaço nas abas de texto curto. */
  /* min-width:0 e a coluna em minmax(0,1fr): sem os dois, a tira em
     `nowrap` passa a ter min-content de 787px, a coluna não encolhe abaixo
     disso e a página inteira vaza 249px para o lado. */
  .problem__body{grid-template-columns:minmax(0,1fr)}
  .tablist{
    min-width:0;
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;
  }
  .tablist::-webkit-scrollbar{display:none}
  /* sem scroll-snap: quem posiciona a tira é o main.js ao trocar de aba, e o
     encaixe do snap puxava a rolagem suave de volta para o ponto anterior */
  .tablist button{flex:none}
  /* o fundo dourado já marca a seleção; o negrito só mudava a largura */
  .tablist button[aria-selected="true"]{font-weight:500}

  .tabpanel.is-active{grid-template-columns:1fr;align-items:start;gap:14px}
  .tabpanel{min-height:0}
  /* o alvo de toque de 44px coloca ~11px de folga acima e abaixo do texto do
     link; as margens aqui descontam isso, senão ele fica solto no meio do nada */
  .tabpanel .link-arrow{margin-top:10px}
  .tabpanel__media{max-width:none}
  .tabpanel__media--largo img{border-radius:var(--radius)}
  /* ---- COFRE no celular ------------------------------------------------
     menor e encostado à esquerda; o recorte em webp deixa a sombra seguir o
     contorno. A flutuação usa a propriedade `translate`, separada de
     `transform` — assim ela convive com o deslocamento de rolagem que o
     main.js escreve em --ty. */
  /* a caixa do <picture> encolhe e encosta à esquerda; é nela que mora a
     sombra do ::after, porque um <img> não aceita pseudo-elemento */
  .security__top .cofre{position:relative;max-width:155px;margin-left:0;margin-right:auto}
  .seg-topo .cofre{max-width:178px}
  /* +2px no título da capa de Segurança, mantendo a curva do .h1 */
  .seg-topo h1{font-size:calc(clamp(28px, 16.11px + 3.048vw, 60px) + 2px)}
  /* o "Canal de denúncias" é levado pelo main.js para depois dos três
     cartões, fechando a primeira dobra */
  .seg-denuncia{margin-top:clamp(30px,8vw,42px)}
  .seg-denuncia .btn{width:100%}
  .security__top img{animation:cofre-flutua 4.4s ease-in-out infinite}
  /* sombra redonda no chão, igual à que fica sob o celular do hero: encolhe e
     clareia quando o cofre sobe, e acompanha o deslocamento da rolagem (--ty,
     que o main.js escreve aqui no <picture> e o <img> herda). */
  .cofre::after{
    content:"";position:absolute;left:50%;bottom:-24px;
    width:58%;height:14px;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side, rgba(18,20,26,.30), rgba(18,20,26,0));
    transform:translate(-50%, var(--ty,0px));
    animation:cofre-sombra 4.4s ease-in-out infinite;
  }
  /* a seção inteira recua dos dois lados: o recuo do container sozinho (20px)
     deixava o cofre, os ícones e o texto encostados na borda da tela.
     Com estes 16px a margem efetiva vira 36px de cada lado. */
  .security__top,.security__grid{padding-inline:16px}
  /* com o recuo acima sobram 303px e o rótulo inteiro precisa de 330px:
     1px de fonte e 8px de recuo a menos mantêm o botão em uma linha,
     sem mexer no texto, que é o mesmo do desktop. */
  /* o botão é movido pelo main.js para depois dos cartões; as duas regras
     cobrem os dois momentos, antes e depois da troca de lugar */
  .security__top .btn,.security__cta .btn{font-size:14px;padding-inline:20px;width:100%}
  .security__cta{margin-top:clamp(30px,8vw,42px);padding-inline:16px}
  /* ---- VITRINE da Plataforma no celular -------------------------------
     Em 16/9 a moldura ficava com 188px de altura e o palco da animação com
     194px de largura — daí os textos minúsculos. Em formato quadrado a
     moldura passa a 335px e o palco a 288px.
     As proporções do palco são as mesmas do desktop: lá ele ocupa 58% da
     largura e 94% da altura de um 16/9, o que dá um retângulo de 1,097 de
     proporção. 86% × 78% de um quadrado dá exatamente a mesma proporção, só
     que menor — a animação encolhe inteira, sem deformar. */
  .vitrine{aspect-ratio:1/1}
  .regras.regras--nu{width:86%;height:78%}
  /* Cena do repasse: o valor montava em cima da etiqueta "enviado".
     Duas causas. A caixa parava em 62% do palco (179px de 288) — a classe
     --larga pede 100%, mas perdia para a regra base, que vem depois no
     arquivo; por isso o seletor dobrado aqui. E as fontes têm piso em px
     (12 e 15), que nessa escala ficam 2x maiores do que o proporcional e
     estouravam a coluna. Caixa inteira + pisos menores resolvem os dois. */
  .regras__cena.regras__cena--larga{max-width:100%;padding-left:2.6cqw;padding-right:2.6cqw}
  /* a terceira coluna era 1fr e empurrava a etiqueta para a borda, deixando
     um vazio enorme depois do valor. Agora ela tem o tamanho da etiqueta e o
     espaço que sobra se divide nas pontas: o conjunto fica centrado e o
     "enviado" encosta no valor à distância de um tab. */
  .regras__cena--larga .regras__linhas li{
    font-size:clamp(10px,3.05cqw,18px);gap:2.6cqw;
    grid-template-columns:30% 29% auto;justify-content:center;
  }
  .regras__cena--larga .regras__env{justify-self:start}
  .regras__cena--larga .regras__linhas b{font-size:clamp(12px,3.8cqw,23px)}
  .regras__cena--larga .regras__env{font-size:clamp(7px,2.4cqw,13px)}
  /* ---- ORDEM TAG → TÍTULO → DESCRIÇÃO → CTA ---------------------------
     Em blocos de duas colunas a arte às vezes vem primeiro no HTML, o que no
     desktop a coloca à esquerda. Empilhado, isso jogava a tag para depois da
     animação. O `:has()` só reordena quando o texto está mesmo no segundo
     filho — nos blocos já corretos nada muda. */
  /* A tag abre o bloco, a arte vem logo atrás e o resto do texto fecha.
     `display:contents` no bloco de texto solta a tag, o título, a descrição
     e a lista como itens da mesma coluna — só assim a arte pode entrar no
     meio deles. */
  /* `align-items:stretch` desfaz o `center` que o painel herda do desktop.
     Com `center`, cada peça empilhada ficava do tamanho do próprio conteúdo e
     centrada na página: o título "Gerencie as suas comissões" vinha numa
     caixa de 217px no meio da tela, e a quebra saía de onde essa caixa
     terminava, não dos <br> do HTML. Esticando, todas encostam à esquerda e
     usam a largura inteira. */
  .feature-panel:has(> :last-child .eyebrow){display:flex;flex-direction:column;align-items:stretch}
  .feature-panel:has(> :last-child .eyebrow) > :last-child{display:contents}
  /* a TAG é a única peça que não estica: ela tem fundo próprio e precisa
     abraçar o texto, senão vira uma barra de ponta a ponta */
  .feature-panel:has(> :last-child .eyebrow) .eyebrow{order:1;align-self:start}
  /* o `gap` da grade virava espaço entre TODAS as peças quando o bloco
     empilha, somando aos margins que elas já têm: 48px entre título e
     descrição, 58px entre descrição e lista. Zerado, quem manda são as
     margens de cada peça. */
  .feature-panel:has(> :last-child .eyebrow){gap:0}
  .feature-panel:has(> :last-child .eyebrow) > :first-child{order:2;margin-block:22px 6px}
  .feature-panel:has(> :last-child .eyebrow) h2{margin-top:18px}
  .feature-panel:has(> :last-child .eyebrow) .body-sm{margin-top:14px}
  .feature-panel:has(> :last-child .eyebrow) .checklist{margin-top:20px}
  /* Para corretores, dobra "Você vendeu": aqui a arte fecha o bloco em vez de
     entrar no meio — TAG, título, descrição, lista, CTA e só então a
     animação. O seletor carrega `--inverso` para pesar mais que a regra
     acima, que coloca a arte em segundo lugar. */
  .feature-panel--inverso:has(> :last-child .eyebrow) > :first-child{
    order:4;margin-block:32px 0;
  }
  /* O título cresce até a sua linha mais larga ("COMISSÕES AONDE") encostar
     na mesma largura da descrição. Medindo, essa linha vale 9,758 vezes o
     corpo da fonte, e a caixa mede 100vw menos os 40px de margem — daí
     100vw/9,758, ou 10,25vw, com 1% de folga para o arredondamento não
     empurrar uma palavra para a linha de baixo. O teto de 40px é para o
     tablet, onde a caixa é larga e encher daria um título absurdo.
     Só este painel: os demais seguem na escala normal. */
  .feature-panel--inverso h2{font-size:min(40px, 10.14vw - 4.05px)}
  /* A pilha cresce para cima e o cartão da frente mora no pé da moldura: com
     uma carta só sobrava um vazio em cima. Aqui ela desce o suficiente para
     ficar centrada e vai subindo conforme as outras chegam — ou seja, o
     cartão da frente começa no meio e desce até o pé, sem mudar o movimento
     de cada carta, que continua surgindo de baixo e na frente. O valor é
     NEGATIVO: o espaço que sobra está em cima, então centrar é subir a pilha.
     Os valores são metade do espaço que sobra: a moldura tem 36,5cqw de
     altura e cada carta 16,6cqw, com 38% de recuo entre uma e outra. */
  .sync__pilha{
    transform:translateY(var(--descida,0));
    transition:transform .72s cubic-bezier(.32,.72,0,1);
  }
  .sync[data-ativos="1"]{--descida:-9.9cqw}
  .sync[data-ativos="2"]{--descida:-6.8cqw}
  .sync[data-ativos="3"]{--descida:-3.6cqw}
  .sync[data-ativos="4"]{--descida:-.5cqw}
  .sync.is-juntando{--descida:-9.9cqw}
  .feature-panel:has(> :last-child .eyebrow) > :last-child > :not(.eyebrow){order:3}
  /* no bloco da Segurança a arte é uma foto de apoio e segue no fim */
  .benefits:has(> :last-child .eyebrow) > :first-child{order:2}
  .benefits:has(> :last-child .eyebrow) > :last-child{order:1}
  /* ---- 1) DIAGNÓSTICO: cartões em tira que corre para o lado -----------
     mesmo padrão da tabela da Plataforma; a saliência (quanto do cartão passa
     para fora do preto) é recalculada embaixo, depois de medir a altura. */
  .diag__cards{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    padding:2px var(--gutter) 6px;margin-inline:calc(var(--gutter) * -1);
  }
  .diag__cards::-webkit-scrollbar{display:none}
  .diag-card{flex:0 0 78%;scroll-snap-align:center}

  /* ---- 2) BENEFÍCIOS: CTA depois da esteira, pílulas mais largas e baixas */
  /* ---- 1) título da dobra de benefícios ---- */
  .ganhos__texto h2{font-size:30px}
  .ganhos{display:flex;flex-direction:column}
  .ganhos__texto{display:contents}
  .ganhos__texto > :not(.btn){order:1}
  .ganhos__esteira{order:2;margin-top:26px}
  .ganhos__texto > .btn{order:3;margin-top:28px}
  /* A esteira ocupa a largura inteira e sangra até a borda direita da tela.
     Antes ela media 300px (o `align-items:center` da base deixa o filho do
     tamanho do conteúdo), e o arco do main.js cortava a pílula num limite
     invisível no meio da página; agora o corte acontece na borda do
     aparelho, que é o que o arco quer dizer. */
  .ganhos__esteira{align-self:stretch;margin-right:calc(var(--gutter) * -1)}
  .ganhos__fila{gap:12px}
  /* A pílula fica mais comprida e mais baixa. O disco acompanha a altura na
     mesma proporção do desktop (64/88 ≈ .73) e os 10px de recuo igualam a
     folga que a centralização deixa em cima e embaixo (74 - 54 = 20), então
     ele continua concêntrico com a calota. Sobram 243px de texto: o título
     mais longo ("Zero ruído com o time de vendas") cabe numa linha e a
     descrição, em duas — três linhas no total. */
  .pilula{width:calc(100% - var(--gutter));height:74px;padding:10px 16px 10px 10px;gap:12px}
  .pilula__ic{width:54px;height:54px}
  .pilula__ic svg{width:24px;height:24px}
  /* 13px/10,5px num aparelho de 375. Abaixo disso a pílula encolhe junto com
     a tela e o texto acompanha, senão o título mais longo voltaria a quebrar:
     num 320 sobram 188px de texto e ele precisa de 11,5px. */
  .pilula__txt b{font-size:clamp(11.5px, 2.727vw + 2.77px, 13px)}
  .pilula__txt small{font-size:clamp(9.5px, 1.818vw + 3.68px, 10.5px);line-height:1.3}

  /* a CTA desta seção abria 56px depois do texto: somavam-se o vão da grade,
     a margem da própria caixa e os 30px que o botão já traz. Zerando os dois
     últimos, sobra o vão da grade mais estes 10px — 34px no total. Vale só
     para a seção sem os três cartões; onde eles existem a CTA vem depois
     deles e a distância de lá não muda. */
  .container:not(:has(.security__grid)) .security__cta{margin-top:10px}
  .container:not(:has(.security__grid)) .security__cta .btn{margin-top:0}

  /* ---- 6) SEGURANÇA sem os três cartões ----------------------------------
     O cofre abre a dobra, antes do título, e a CTA fecha. A margem de baixo
     dá lugar à sombra do ::after, que fica 24px abaixo da imagem. Só vale
     para a seção sem os três cartões de ícone — a da home não muda. */
  .container:not(:has(.security__grid)) .security__top:not(.seg-topo) .cofre{
    order:-1;margin-inline:auto;margin-top:0;margin-bottom:46px;
  }

  /* ---- 5) resultados da calculadora 1px maiores (só o piso muda) ---- */
  /* +8px só nos dois números em mostarda do resultado. A classe .sim__big
     existe apenas ali — os campos que o visitante preenche são outros. */
  .sim__big{font-size:calc(clamp(28px, 17.4px + 2.45vw, 52px) + 8px)}

  /* ---- ABERTURA DE CONTA no celular ------------------------------------
     A faixa do topo tem de caber numa linha. Sem "imobiliário" (que o
     .so-desk esconde) a frase ainda pede 353px para cada 13px de fonte, e
     num aparelho de 390 sobram 362: fica no fio. O recuo menor, o
     entreletras mais curto e a fonte fluida resolvem de 320 a 430. */
  .announce{padding-inline:14px;letter-spacing:.04em;
    font-size:clamp(10px, 3.6vw - 1px, 13px)}
  /* o rodapé sobe 32px por cima da seção; sem isto o cartão ficava a 12px
     dele */
  .center-card{margin-bottom:24px}

  /* ---- VÉU das tiras horizontais --------------------------------------
     O degradê existe para avisar que há mais conteúdo para aquele lado.
     Quando a tira está no começo não há nada escondido à esquerda, e no fim
     não há nada à direita: ali a ponta do primeiro e do último botão tem de
     aparecer limpa. Quem escreve o data-veu é o main.js, a cada rolagem. */
  .tablist[data-veu="ambos"],
  .segmented-wrap[data-veu="ambos"],
  .blog-atalhos[data-veu="ambos"]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent);
  }
  .tablist[data-veu="fim"],
  .segmented-wrap[data-veu="fim"],
  .blog-atalhos[data-veu="fim"]{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  }
  .tablist[data-veu="inicio"],
  .segmented-wrap[data-veu="inicio"],
  .blog-atalhos[data-veu="inicio"]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);
    mask-image:linear-gradient(90deg,transparent 0,#000 30px);
  }
  .tablist[data-veu="nenhum"],
  .segmented-wrap[data-veu="nenhum"],
  .blog-atalhos[data-veu="nenhum"]{
    -webkit-mask-image:none;mask-image:none;
  }
  .sim__selects{grid-template-columns:1fr}
  .audience__cards{grid-template-columns:1fr}
  /* título da dobra um pouco maior no celular (só aqui: no desktop ele já
     ocupa a coluna inteira) */
  .audience h2{font-size:clamp(37px, 21px + 4.2vw, 46px)}
  /* O palco sangra até a borda da tela e o card inativo fica em
     translateX(100% + 22px). Estreitando o card, sobra justamente a faixa
     dele aparecendo na direita: largura = 100vw - 72px deixa 30px à mostra,
     em qualquer tamanho de celular. */
  /* a sangria da regra base só vale quando a tela é mais larga que o container,
     ou seja, nunca no celular: aqui o palco avança sobre o recuo lateral e
     chega na borda da tela, que é onde a faixa do card inativo aparece */
  .audience__stage{margin-right:calc(var(--gutter) * -1)}
  /* a conta é feita sobre a largura do container, não em 100vw: vw inclui a
     barra de rolagem e a faixa visível mudaria de tamanho conforme o navegador.
     o palco já inclui a sangria lateral, então 52px a menos (30 da faixa que
     fica à mostra + 22 do vão entre os dois) deixam a faixa certa. */
  .acard{width:calc(100% - 52px);max-width:none;padding:24px}
  /* o card estreitou para a faixa aparecer, então a etiqueta precisa caber na
     nova largura: em 14px ela ocupava 262px num espaço de 217px */
  .acard__tag{font-size:11px;padding:6px 11px}

  /* "em números" e as outras seções coladas na anterior: no desktop o
     padding-top zerado amarra uma seção na outra, mas no celular, com tudo
     empilhado, um bloco encostava no outro sem nenhum respiro.
     O seletor longo precisa aparecer aqui porque é ele, com peso (0,4,0),
     que zera o respiro — `.section--flush-top` sozinho perdia a disputa. */
  .section:not(.section--dark) + .section:not(.section--dark),
  .section--flush-top{padding-top:clamp(40px,10vw,58px)}
  /* o pé de cada seção encurta: somado ao topo da seguinte, o vão entre
     blocos caía de 124 a 138px, espaço demais no celular */
  .section{padding-bottom:44px}
  /* a faixa escura precisa de mais fôlego embaixo que as seções claras */
  .section--dark{padding-bottom:72px}
  /* a faixa de CTA não tem recuo próprio e colava na seção anterior */
  .cta-band{margin-top:26px}
  /* este título ficava com linhas de 203, 299, 280 e 105px — a segunda
     quase encostando na borda e a última com duas palavras soltas.
     `balance` reparte: 183, 190, 275 e 240. */
  /* as quebras deste título vêm dos <br class="br-sm"> no HTML:
     "Nosso objetivo é transformar / o financeiro do mercado / imobiliário no
     Brasil". A maior delas é a primeira, que mede 14,31px de largura para
     cada 1px de fonte; a caixa tem a largura da tela menos 55px (recuo do
     container mais os 16px da seção, dos dois lados). Daí a conta abaixo, com
     8px de folga: ela mantém as três linhas inteiras de 320px até 430px, em
     vez de deixar o título quebrar sozinho em quatro. */
  h2.stats__title{text-wrap:wrap;font-size:min(24px, 6.988vw - 4.4px)}
  /* mais ar dentro do cartão escuro, em cima e embaixo */
  /* o "Saiba mais" sobe 16px para encostar no texto; como os ícones vêm na
     linha de baixo, eles subiriam os mesmos 16px — o vão entre as duas
     partes cresce 8px para eles subirem só 8px, metade do link. */
  /* ---- BLOG: a tira de temas vira trilho horizontal ---------------------
     Mesmo desenho das abas de "Soluções" da home: os cinco cabem numa linha
     só que rola, sangrando até as bordas da tela, com o véu da direita
     avisando que há mais. Quem move a tira é o main.js, que traz o tema da
     vez para o meio. */
  .blog-atalhos{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;gap:8px;
    /* a sangria é só para a direita: puxando também a esquerda, as pílulas
       passavam por baixo do rótulo "Notícias e blog", que fica parado ali */
    padding-inline:12px var(--gutter);margin-inline:0 calc(var(--gutter) * -1);
    /* o véu vem do bloco "VÉU" abaixo, que acende cada ponta conforme a
       rolagem da tira */
  }
  .blog-atalhos::-webkit-scrollbar{display:none}
  .blog-atalhos a{flex:none;font-size:13.5px;padding:8px 15px}
  .page-hero.page-hero--atalhos{padding-block:11px}
  /* -1px no rótulo e vão menor: os 12px de recuo da tira já fazem o papel
     de separar os dois, e somados ao vão antigo abriam demais */
  .blog-barra__rotulo{font-size:12px}
  .blog-barra{gap:6px}

  /* +6px no pé do box preto dos números, em todas as páginas que o têm */
  .stats{padding:44px 32px 50px;gap:40px}

  /* ---- SOBRE NÓS no celular -------------------------------------------
     1) O título da capa vinha em cinco linhas de fluxo livre, a última com
     134px — um toco. As quebras passam a ser escritas (ver o HTML) e a fonte
     cresce até a linha mais larga encostar na caixa: ela vale 9,74 vezes o
     corpo da fonte e a caixa é 100vw menos os 40px de margem. O teto de 36px
     é para o tablet. */
  .about-hero h1{font-size:min(36px, 9.6vw - 3.3px)}

  /* 2) o blob preto tinha só 8px de recuo interno, e com os 20px do container
     o texto ficava a 28px da borda da tela; com 20px vai para 40px */
  .history{padding-inline:20px}
  /* a tag "M2PAG em números" precisa de 297px e é a única peça que não cabe
     com o recuo novo: a 360px sobravam 280. Estes -12px de cada lado devolvem
     a ela a largura do blob inteiro, sem mexer no recuo do resto. */
  .history .text-center{margin-inline:-12px}

  /* 3) sem largura declarada, um elemento absoluto com left:50% encolhe até
     o que sobra à direita — 175px — e "Conheça nossa solução" quebrava em
     quatro linhas. Com max-content ele pede os 231px que precisa, e o teto
     impede que encoste nas bordas do blob. */
  .history__cta{width:max-content;max-width:calc(100% - 24px)}

  /* 4) o título dos fundadores estava preso num max-width de 17ch (278px de
     350) — daí o vazio à direita. Solto, ele usa a caixa inteira e cresce. */
  .founders h2{max-width:none;font-size:clamp(28px, 8vw, 36px)}

  /* 5) o vão entre a história dos fundadores e "Nossa visão" somava os 44px
     de pé de uma seção com os 40px de topo da outra: 85px. */
  #visao{padding-top:18px}

  /* 6) quando a dobra de segurança é a última da página, a margem negativa de
     32px do rodapé come o recuo da seção e a CTA ficava a 12px dele. */
  section:last-of-type .security__cta{margin-bottom:48px}
  .stats__link{margin-top:10px}

  /* QUEBRA DE LINHA ---------------------------------------------------
     `pretty` impede que a última linha fique com uma palavra solta. Testei
     `balance` nos títulos e ficou pior: ele força linhas de tamanho parecido
     e quebrava "Nosso objetivo / é transformar o", largando o "é" sozinho.
     Navegador que não entende simplesmente ignora, sem efeito colateral. */
  h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h-display,
  p,li,dd,figcaption,.eyebrow,.acard__tag,.hero__pill{text-wrap:pretty}
  .security__grid{grid-template-columns:1fr;gap:32px}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__mid{flex-direction:column;align-items:flex-start;gap:26px}
  .footer__social{gap:22px}
  .diag__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* em várias linhas a saliência precisa ser menor para não invadir demais */
  /* o cartão tem 126px de altura na tira; com 56px para fora, o preto
     termina pouco abaixo da metade dele, como no desktop */
  .diag{--saliencia:56px}
  .founders__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post--row{grid-template-columns:1fr}
  .post--row .post-thumb{aspect-ratio:16/9}
  .steps__list{padding-left:44px}
  .step__num{left:-44px;width:29px;height:29px;font-size:14px}
  .steps__list::before{left:14px}
  .switch{width:100%}
  .switch button{flex:1;justify-content:center;padding:14px 12px;font-size:14px}
  .segmented-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* o max-width:100% da regra base capava o max-content e espremia as
     colunas de volta; aqui quem limita é o wrapper, que rola */
  .segmented{width:max-content;min-width:100%;max-width:none}
  /* Só dois botões: em vez de rolar na horizontal, dividem a largura ao meio.
     Dobrado (0,2,0) para vencer a regra de .segmented logo acima. */
  .segmented.segmented--grande{width:100%;max-width:100%;min-width:0}
  .segmented.segmented--grande button{
    flex:1 1 0;min-width:0;padding:13px 10px;font-size:13.5px;
    white-space:normal;line-height:1.25;text-align:center;
  }
  /* Alvos de toque: links de rodapé e gatilhos de acordeão passavam longe do
     mínimo confortável de ~44px de altura. */
  /* `.footer__cols li a` (0,2,1) na regra base vencia `.footer__cols a`:
     o seletor aqui precisa ter o mesmo peso. A margem entre itens encolhe
     na mesma medida, para o rodapé não ficar mais alto do que era. */
  .footer__cols li a,.footer address a{padding-block:10px}
  .footer__cols li+li{margin-top:4px}
  .step__trigger{min-height:44px}
  .link-arrow{min-height:44px;align-items:center}
  /* ITEM 3: a linha do corretor fica menor e centrada com os botões,
     que no celular ocupam a largura toda. */
  .hero:not(.hero--split) .hero__note{font-size:13.5px;text-align:center}
  /* O Safari do iPhone dá zoom na página sozinho quando o campo focado tem
     fonte menor que 16px, e o usuário fica preso com a tela ampliada. Aqui o
     formulário de abertura de conta sobe de 15px para 16px. */
  .input,.select,.textarea{font-size:16px}
  /* Caixas de marcar e botões de opção maiores, para o dedo acertar. */
  .radio-card input,.consent input{width:20px;height:20px}
  .consent input{margin-top:1px}
  /* As abas que rolam na horizontal ganham um sinal de que há mais à direita
     e param alinhadas quando soltas. */
  /* sem scroll-snap: quem posiciona a tira ao trocar de aba é o main.js, e o
     encaixe do snap puxava a rolagem suave de volta — mesmo problema que já
     tinha aparecido nas abas da home */
  /* o véu desta tira é o mesmo das outras, escrito lá no bloco "VÉU" */
  .segmented-wrap::-webkit-scrollbar{display:none}
  .segmented.segmented--grande{scroll-snap-type:none}

  /* Rótulos longos quebram em vez de esticar o layout */
  .btn{white-space:normal;line-height:1.25;padding-block:14px}
  .row .btn{flex:1 1 240px}
  .security__top .btn,.benefits .btn,.feature-panel .btn,
  .product-panel .btn,.vision .btn,.cta-band .btn{width:100%}

}
@media (max-width:480px){
  .clients__row{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:1fr}
  .footer h3+h3{margin-top:28px}
  .diag__cards{grid-template-columns:1fr}
  .sim__valuebox input{width:84px}
  .sim__valuebox input.is-wide{width:150px}
  .row .btn,.hero__cta .btn{flex:1 1 100%;width:100%}
  /* ITEM 1: 1px menor no celular. Com 11,5px cabem ~52 caracteres na pílula,
     que é o que as frases reescritas precisam para ficar em uma linha só. */
  .eyebrow{padding:6px 12px;font-size:11.5px}
  /* uma frase longa demais para os 11,5px das demais: meio pixel a menos de
     fonte e um pouco menos de recuo fazem ela caber em telas de 360px */
  .eyebrow--compacta{font-size:11px;padding-inline:10px}
  .form-card,.sim__result{padding:20px 18px}
  /* o recuo interno do cartão: 18px nas laterais deixava texto e arte
     encostados na borda branca */
  .tabpanel{padding:34px 24px 30px}
}

/* ==========================================================================
   CONSENTIMENTO DE COOKIES (LGPD)
   --------------------------------------------------------------------------
   Faixa no rodapé da janela, não um bloqueio de tela inteira: a lei não exige
   travar a navegação e travar derruba conversão. Os três botões têm o mesmo
   tamanho e ficam lado a lado, então recusar é tão fácil quanto aceitar.
   ========================================================================== */
.aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:clamp(10px,1.1vw,14px);
  animation:aviso-cookies-sobe .32s var(--ease) both;
}
.aviso-cookies[hidden]{display:none}
@keyframes aviso-cookies-sobe{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .aviso-cookies{animation:none} }

.aviso-cookies__caixa{
  max-width:var(--container);margin-inline:auto;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:clamp(13px,1.5vw,18px);
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:minmax(0,1fr) auto;align-items:center;
}
.aviso-cookies__texto{min-width:0}
.aviso-cookies__tit{font-weight:700;color:var(--text);font-size:15px;margin-bottom:4px}
.aviso-cookies__texto p{font-size:14px;line-height:1.5;color:var(--muted);max-width:78ch}
.aviso-cookies__texto a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}

.aviso-cookies__botoes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.aviso-cookies__botoes .btn{white-space:nowrap}

/* o painel de categorias ocupa a largura toda, abaixo do texto e dos botões */
.aviso-cookies__opcoes{
  grid-column:1 / -1;order:3;
  display:grid;gap:10px;
  padding-top:clamp(12px,1.4vw,18px);border-top:1px solid var(--line);
}
.aviso-cookies__linha{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.aviso-cookies__linha input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--gold-deep)}
.aviso-cookies__linha b{color:var(--text)}
.aviso-cookies__salvar{justify-self:start;margin-top:2px}

@media (max-width:860px){
  .aviso-cookies__caixa{grid-template-columns:1fr}
  .aviso-cookies__botoes{justify-content:stretch}
  .aviso-cookies__botoes .btn{flex:1 1 auto;justify-content:center}
}
/* No celular o aviso ficava com 13px de recuo interno e 10px até a borda da
   tela — o texto quase encostando nas duas. Aqui ele ganha ar dos dois lados. */
@media (max-width:760px){
  .aviso-cookies{padding:14px}
  .aviso-cookies__caixa{padding:18px}
}
/* ações dentro do painel de categorias: salvar e recusar lado a lado, para
   a recusa continuar a um clique de distância de quem abriu as preferências */
.aviso-cookies__acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}

/* Notebook de tela baixa: a faixa fica mais enxuta para não cobrir o fim do
   bloco de texto do hero. Precisa vir DEPOIS das regras base acima, senão
   elas vencem por ordem, já que a especificidade é a mesma. */
@media (min-width:1025px) and (max-height:780px){
  .aviso-cookies{padding:8px}
  .aviso-cookies__caixa{padding:11px 14px;gap:8px}
  .aviso-cookies__texto p{font-size:13.5px}
}


/* --------------------------------------------------------------------------
   COFRE — flutuação no celular
   A `translate` é uma propriedade própria, independente de `transform`: o
   main.js escreve o deslocamento da rolagem em --ty (dentro de transform) e
   os dois se somam sem brigar.
   -------------------------------------------------------------------------- */
@keyframes cofre-flutua{
  0%,100%{translate:0 0}
  50%    {translate:0 -7px}
}
/* em contraponto: cofre no alto = sombra menor e mais clara */
@keyframes cofre-sombra{
  0%,100%{transform:translate(-50%, var(--ty,0px)) scaleX(1);opacity:1}
  50%    {transform:translate(-50%, var(--ty,0px)) scaleX(.86);opacity:.7}
}
@media (prefers-reduced-motion:reduce){
  .security__top img,.cofre::after{animation:none}
}