/* ============================================================
   STAZON CONTABILIDADE — Design System
   Base: documento "Design System" adaptado à identidade real
   da STAZON (navy #000026 amostrado do logotipo oficial).
   Primário = navy institucional · Acento = verde (crescimento)

   ------------------------------------------------------------
   O BANNER É A RÉGUA
   A primeira dobra (título + cartões de entrada) define a
   tipografia de todo o resto da página. Padrão fixado ali:

     · Família     Figtree em toda a página, sem exceção
     · Pesos       só 400 / 600 / 700 / 800 — o 500 não existe
                   no banner e por isso não é usado em lugar nenhum
     · Título      400 no trecho leve + 800 na ênfase, tracking
                   negativo — ênfase se faz por PESO, nunca por cor.
                   Os dois degraus precisam ser distantes: em 700+800
                   o título inteiro lê como negrito e o efeito some
     · Cartão      título 19px/700/-.2px em navy --color-primary
     · Corpo       15px/400/1.6 em --color-text-body
     · Apoio       17px (--fs-lg) para leads
     · CTA         15px/600 em caixa mista, sem letter-spacing
     · Sobre navy  #fff na ênfase, .80 no corpo, .74 no apoio

   Caixa alta e letter-spacing positivo não existem no banner e
   por isso não existem no resto do site. O verde continua sendo
   a cor de acento da marca, mas só em elementos funcionais
   (checks, ícones, status, WhatsApp) — nunca em texto corrido
   nem em título.
   ============================================================ */

/* ============================================================
   FONTE — Figtree (SIL OFL 1.1), hospedada localmente
   Arquivo variável 400–800: um único download cobre os quatro
   pesos do design system. Servir daqui, e não do Google Fonts,
   remove duas conexões externas e o CSS bloqueante de terceiro
   do caminho crítico de renderização.
   ============================================================ */
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ---- Cores — principais (navy da marca) ---- */
  --color-primary:       #101B5E;   /* botões, títulos de seção */
  --color-primary-dark:  #000026;   /* logo oficial · hover · fundos escuros */
  --color-primary-mid:   #1C2A86;
  --color-primary-soft:  #E9ECF8;
  --color-white:         #FFFFFF;

  /* ---- Cores — acento ---- */
  --color-accent:        #12A150;   /* gráficos, checks, badges */
  --color-accent-text:   #0C7A3D;   /* verde legível sobre branco (AA) */
  --color-accent-soft:   #E7F5EC;
  --color-gold:          #F0B429;   /* exclusivo: estrelas de avaliação */

  /* ---- Texto e bordas ---- */
  --color-text:          #14162B;
  --color-text-body:     #4A4E63;
  --color-text-muted:    #787D93;
  /* Texto sobre navy — os três níveis medidos no banner: a ênfase do título
     é branco puro, o lead é .80 e o trecho leve do título é .74. Toda faixa
     escura da página (faixa de CTA, rodapé) usa esta escala. */
  --color-on-dark:       #FFFFFF;
  --color-on-dark-soft:  rgba(255,255,255,.80);
  --color-on-dark-muted: rgba(255,255,255,.74);
  --color-border:        #E3E6EF;
  /* Borda de peças que já ganham contorno pela sombra em camadas */
  --color-border-soft:   #E9ECF6;

  /* ---- Fundos ---- */
  --bg-white:            #FFFFFF;
  --bg-offwhite:         #F7F8FA;
  --bg-mist:             #EEF1F9;
  --bg-soft:             #F4F6FD;

  /* ---- Sistema ---- */
  --color-success:       #12A150;
  --color-error:         #C62828;
  --color-error-bg:      #FDECEC;
  --color-whatsapp:      #25D366;

  /* ---- Gradientes ---- */
  --gradient-brand: linear-gradient(135deg,#000026 0%,#101B5E 55%,#1C2A86 100%);
  --gradient-brand-soft: linear-gradient(140deg,#0A1244 0%,#182463 60%,#24318F 100%);

  /* ---- Tipografia ---- */
  --font-primary: 'Figtree','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-h1:   3rem;      /* 48 */
  --fs-h2:   2.5rem;    /* 40 */
  /* Degrau que faltava entre o título de seção e o de cartão: seção de apoio,
     que não deve competir com a que vem antes (ver .h2--sm) */
  --fs-h2-sm:2rem;      /* 32 */
  --fs-h3:   1.5rem;    /* 24 */
  --fs-h4:   1.1875rem; /* 19 — título de cartão, medido no banner */
  --fs-lg:   1.0625rem; /* 17 — lead do banner */
  --fs-base: .9375rem;  /* 15 — corpo dos cartões do banner */
  --fs-sm:   .8125rem;  /* 13 */
  --fs-xs:   .75rem;    /* 12 — letra miúda: erro de campo, fonte da avaliação */
  /* Os CTAs do banner são do tamanho do corpo (15px): o antigo 14px de botão
     saía da escala e só se sustentava com a caixa alta, que agora não existe */
  --fs-btn:  var(--fs-base);

  /* ---- Raios ---- */
  --radius-xs:4px; --radius-sm:6px;  --radius-md:8px;
  --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px;
  --radius-full:9999px;

  /* ---- Sombras ---- */
  --shadow-sm:    0 2px 8px rgba(0,0,38,.06);
  --shadow-md:    0 4px 16px rgba(0,0,38,.08);
  --shadow-lg:    0 10px 28px rgba(16,27,94,.14);
  --shadow-xl:    0 12px 32px rgba(0,0,38,.10);
  --shadow-float: 0 6px 20px rgba(0,0,0,.22);
  --shadow-header:0 1px 0 rgba(0,0,38,.07);
  /* Sombra em camadas: o contato de 1px define a borda do cartão, a média dá
     o volume e a longa (bem diluída) apoia o cartão no fundo branco — uma
     camada só vira mancha cinza quando o cartão é grande */
  --shadow-card:  0 1px 2px rgba(0,0,38,.05),
                  0 8px 20px -8px rgba(0,0,38,.10),
                  0 22px 44px -24px rgba(16,27,94,.22);

  /* ---- Espaçamento ---- */
  --space-1:4px;  --space-2:8px;  --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:40px; --space-7:48px; --space-8:64px;
  --space-9:80px; --space-10:120px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-h: 92px;
  --transition: 180ms ease-out;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
/* overflow-x:clip (e não hidden) impede a rolagem lateral criada pelo
   drawer fechado — translateX(100%) — sem transformar o html em
   container de rolagem, o que quebraria o position:sticky do header. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--font-primary);
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--color-text-body);
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ line-height:1.2; color:var(--color-text); font-weight:700; }

[hidden]{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--color-primary); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0; font-weight:700;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid rgba(28,42,134,.45);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

/* Ícones de traço — padrão Lucide */
svg[viewBox]{ stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.ico{ width:18px; height:18px; flex:none; }
.ico--check{ color:var(--color-accent); stroke-width:2.4; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:24px; }

.section{ padding-block:var(--space-10); }
.section--tight{ padding-block:var(--space-9); }
.section--mist{ background:var(--bg-mist); }
.section--soft{ background:var(--bg-soft); }
.section--dark{ background:var(--color-primary-dark); position:relative; overflow:hidden; }
.section--dark::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 85% 15%,rgba(28,42,134,.55),transparent 65%);
  pointer-events:none;
}
.section--dark > *{ position:relative; }
/* Azul institucional chapado — mesma família da faixa de CTA final, porém sem
   gradiente: aqui o degradê competiria com o painel translúcido por cima */
.section--blue{ background:var(--color-primary); }
/* Faixa navy médio (#101B5E) que termina no meio dos cards: a base da seção
   volta ao claro e os cards "saem" da cor — mesmo recurso dos cartões de
   entrada sob o banner (ver .entry__grid). O navy médio também evita colar
   no #000026 da seção seguinte.
   --cut é medido a partir da BASE (recuo inferior + linha de CTAs + o quanto
   o card avança sobre o claro), não do topo: assim o corte não se desloca
   quando o título quebra em mais linhas. */
.section--navy{
  --cut:250px;  /* 120 de recuo inferior + 130 de card para fora da faixa */
  position:relative; overflow:hidden;
  background:linear-gradient(to bottom,
    var(--color-primary) 0%, var(--color-primary) calc(100% - var(--cut)),
    var(--bg-white) calc(100% - var(--cut)), var(--bg-white) 100%);
}
/* O brilho fica preso à faixa navy — não invade a base clara */
.section--navy::before{
  content:''; position:absolute; inset:0 0 var(--cut) 0;
  background:radial-gradient(900px 520px at 15% 0%,rgba(36,49,143,.65),transparent 62%);
  pointer-events:none;
}
.section--navy > *{ position:relative; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9); align-items:center; }
.split--reverse .split__media{ order:-1; }
.split__text > * + *{ margin-top:var(--space-4); }
.split__text > .btn{ margin-top:var(--space-5); }

.section-head{ max-width:720px; }
.section-head--center{ margin-inline:auto; text-align:center; margin-bottom:var(--space-8); }
/* Medida maior que a padrão: segura o título em uma linha só. O vão menor
   acompanha — em seção compacta, 64px abaixo do cabeçalho abriria um buraco. */
.section-head--wide{ max-width:1040px; margin-bottom:var(--space-6); }
.section-head > * + *{ margin-top:var(--space-3); }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
/* Peso 400, não 700: é o mesmo par do título do banner, onde o trecho de
   entrada é leve e só a ênfase é pesada. Com a base em 700 os dois lados
   ficavam a um degrau de distância (700/800) e o título inteiro lia como
   negrito — o contraste do banner desaparecia.
   O tracking e a entrelinha também vêm de lá (-.019em e 1.15). */
.h2{
  font-size:var(--fs-h2); font-weight:400; letter-spacing:-.8px;
  line-height:1.15; color:var(--color-primary);
  /* Distribui as linhas em vez de deixar uma palavra órfã na última */
  text-wrap:balance;
}
/* Ênfase por peso, não por cor — é assim que o banner separa "Contabilidade
   que cuida da sua empresa" de "para você cuidar do seu negócio": mesma cor,
   400 contra 800. Um verde no meio do título abriria uma terceira cor de
   texto que o banner não tem. */
.h2 em{ font-style:normal; font-weight:800; color:var(--color-primary-dark); }
/* Sobre o navy o par se inverte: o título fica no branco de apoio e a ênfase
   sobe para o branco puro — os mesmos dois níveis do título do banner. */
.h2--light{ color:var(--color-on-dark-muted); }
.h2--light em{ font-weight:800; color:var(--color-on-dark); }
/* Seção de apoio: mantém o par 400/800 e a cor do título de seção, só cede
   corpo. O tracking acompanha o tamanho — em 32px o -.8px do título grande
   apertaria demais as letras. */
.h2--sm{ font-size:var(--fs-h2-sm); letter-spacing:-.6px; }

.h3{
  font-size:var(--fs-h3); font-weight:700; letter-spacing:-.3px;
  line-height:1.25; color:var(--color-primary);
}

.lead{
  font-size:var(--fs-lg); line-height:1.6; color:var(--color-text-body);
  max-width:60ch;
}
.lead--center{ margin-inline:auto; }
/* Medida maior que a padrão para o texto fechar em duas linhas; balance
   distribui as duas em comprimentos parecidos em vez de deixar a segunda curta */
.lead--wide{ max-width:66ch; text-wrap:balance; }
/* Subtítulo de uma linha só. Tira o teto de medida do .lead (60ch), que é
   régua de bloco de leitura e não se aplica a uma frase solta sob o título.
   Sem white-space:nowrap de propósito: no celular a frase não caberia e a
   página ganharia rolagem lateral — ali ela volta a quebrar sozinha. */
.lead--oneline{ max-width:none; }
.lead--light{ color:var(--color-on-dark-soft); }
/* Negrito dentro do corpo do texto: mesmo recurso do lead do banner, onde
   "Comércio Varejista" e "300 empresas" só ganham peso e a cor cheia */
.lead b, p b{ font-weight:700; color:var(--color-text); }
.lead--light b{ color:var(--color-on-dark); }

/* Rótulo de abertura de seção. Segue a régua do banner: caixa mista, sem
   letter-spacing e em navy — o verde ficava para o acento funcional. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--fs-base); font-weight:600; letter-spacing:0;
  color:var(--color-primary);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--color-on-dark-soft); }
.eyebrow__dot{
  width:22px; height:2px; background:currentColor; border-radius:2px; flex:none;
}

/* ============================================================
   BOTÕES
   ============================================================ */
/* Mesma tipografia do .card-cta do banner: 15px/600 em caixa mista. A caixa
   alta com tracking que havia aqui era a maior divergência da página — o
   banner não tem uma única palavra em versal. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:15px 34px;
  font-size:var(--fs-btn); font-weight:600; letter-spacing:0; line-height:1.2;
  border-radius:var(--radius-sm); border:1.5px solid transparent;
  transition:background var(--transition),color var(--transition),
             border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  text-align:center;
}
/* Um degrau abaixo do corpo (13px), não mais 12px em versal: o botão pequeno
   vive no header, ao lado do menu, e precisa ficar na mesma linha de leitura */
.btn--sm{ min-height:42px; padding:10px 20px; font-size:var(--fs-sm); letter-spacing:0; }
.btn--lg{ padding:19px 40px; font-size:var(--fs-lg); }
.btn--block{ width:100%; }

.btn--primary{
  background:var(--color-primary); color:#fff;
  box-shadow:0 2px 8px rgba(16,27,94,.22);
}
.btn--primary:hover{
  background:var(--color-primary-dark);
  box-shadow:0 6px 18px rgba(16,27,94,.32); transform:translateY(-1px);
}
.btn--primary:active{ transform:none; box-shadow:none; }

.btn--ghost{
  background:transparent; border-color:var(--color-primary); color:var(--color-primary);
}
.btn--ghost:hover{ background:var(--color-primary); color:#fff; }

/* Portal do cliente: borda mais grossa + navy do logotipo oficial */
.btn--portal{
  border-width:2.5px; border-color:var(--color-primary-dark);
  color:var(--color-primary-dark);
}
.btn--portal:hover{ background:var(--color-primary-dark); border-color:var(--color-primary-dark); color:#fff; }

/* Pílula: CTA único dentro de um card, onde o retângulo pesa demais */
.btn--pill{ border-radius:var(--radius-full); }

.btn--invert{ background:#fff; color:var(--color-primary); box-shadow:var(--shadow-md); }
.btn--invert:hover{ background:var(--color-primary-soft); color:var(--color-primary-dark); transform:translateY(-1px); }

.btn--outline-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* Fundo no navy do logotipo (#000026) — o verde fica reservado
   para o botão flutuante, referenciado no texto como "botão verde". */
.btn--whatsapp{
  background:var(--color-primary-dark); color:#fff;
  box-shadow:0 2px 8px rgba(0,0,38,.28);
}
.btn--whatsapp:hover{
  background:var(--color-primary);
  box-shadow:0 6px 18px rgba(0,0,38,.38); transform:translateY(-1px);
}
.btn--whatsapp:active{ transform:none; box-shadow:none; }

/* Única exceção ao verde funcional: dentro do drawer os dois CTAs ficam
   empilhados e, os dois em navy, viravam um bloco só. O verde aqui repete
   o do botão flutuante e diz de imediato qual leva ao WhatsApp. */
.btn--wpp-green{
  background:var(--color-whatsapp); color:#fff;
  box-shadow:0 2px 8px rgba(37,211,102,.3);
}
.btn--wpp-green:hover{ background:#1EBB58; box-shadow:0 6px 18px rgba(37,211,102,.38); }
.btn--wpp-green:active{ transform:none; box-shadow:none; }

.btn__icon{ width:18px; height:18px; flex:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
/* Par de CTAs que fecha uma seção — sempre centralizado e afastado do bloco
   de conteúdo acima */
.btn-row--center{ justify-content:center; margin-top:var(--space-7); }

/* Irmão do .card-cta sem a pílula em volta — mesma cor, mesmo peso, mesma
   seta. O hover escurece dentro da própria família navy em vez de trocar
   para o verde, que sairia da paleta de texto do banner. */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-base); font-weight:600; letter-spacing:0;
  color:var(--color-primary);
}
.link-arrow span{ transition:transform var(--transition); }
.link-arrow:hover{ color:var(--color-primary-dark); }
.link-arrow:hover span{ transform:translateX(4px); }
.link-arrow--inline{ font-size:inherit; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  background:var(--color-primary-dark); color:var(--color-on-dark-muted);
  font-size:.875rem; /* 14 — um degrau acima do --fs-sm: telefone e horário
                        ficavam miúdos demais sobre o navy */
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:40px; }
.topbar__item{ display:flex; align-items:center; gap:8px; }
.topbar__left,.topbar__right{ display:flex; align-items:center; gap:24px; }
.topbar .ico{ width:16px; height:16px; color:var(--color-accent); }

.social{ display:flex; align-items:center; gap:6px; }
.social a{
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:var(--radius-sm); transition:background var(--transition),color var(--transition);
}
.social svg{ width:17px; height:17px; }
.social--sm a:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
/* Sem backdrop-filter aqui de propósito: ele criaria um bloco contentor
   e o drawer (.nav, position:fixed) ficaria preso à altura do header. */
.header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  box-shadow:var(--shadow-header);
  transition:box-shadow var(--transition);
}
.header.is-stuck{ box-shadow:0 4px 20px rgba(0,0,38,.10); }
.header__inner{ display:flex; align-items:center; gap:24px; height:var(--header-h); transition:height var(--transition); }
.header.is-stuck .header__inner{ height:68px; }

/* O logotipo vem em JPEG com fundo #F7F7F7. O recorte abaixo isola o
   glifo (x 254–826 / y 452–628 do arquivo 1080×1080) e o brightness
   leva o fundo a branco puro sem alterar o navy #000026. */
.brand{ flex:none; }
.brand__logo{
  display:block; position:relative; width:172px; height:53px; overflow:hidden;
  transition:width var(--transition),height var(--transition);
}
.brand__logo img{
  position:absolute; width:325px; height:325px; max-width:none;
  left:-76px; top:-136px; filter:brightness(1.06);
  transition:width var(--transition),height var(--transition),
             left var(--transition),top var(--transition);
}
.header.is-stuck .brand__logo{ width:150px; height:46px; }
.header.is-stuck .brand__logo img{ width:283px; height:283px; left:-67px; top:-119px; }

.nav{ display:flex; align-items:center; gap:24px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:4px; }
.nav__close{ display:none; }

/* Caixa mista no corpo do banner (15px/600): em versal o menu era o único
   bloco da página lido em maiúsculas e destoava do logotipo ao lado. */
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  padding:10px 14px; border-radius:var(--radius-sm);
  font-size:1.125rem; font-weight:600; letter-spacing:-.1px;
  color:var(--color-text); white-space:nowrap;
  transition:color var(--transition),background var(--transition);
}
.nav__link:hover{ color:var(--color-primary); background:var(--color-primary-soft); }
.nav__caret{ width:18px; height:18px; transition:transform var(--transition); }
.nav__toggle[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }

.nav__item{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:262px;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
}
.nav__item:hover .dropdown,
.nav__toggle[aria-expanded="true"] + .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:11px 14px; border-radius:var(--radius-sm);
  font-size:1.0625rem; font-weight:400; color:var(--color-text-body);
  transition:background var(--transition),color var(--transition);
}
.dropdown a:hover{ background:var(--color-primary-soft); color:var(--color-primary); }

/* Tudo o que existe só dentro do drawer do celular. No desktop o cabeçalho
   continua com os mesmos quatro itens de menu e nada mais. */
.nav__head,.nav__foot,.nav__go,.nav__item--drawer{ display:none; }

.header__actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
/* Os dois CTAs do topo usam .btn--sm (13px) por causa da altura, mas ao lado
   do menu em 16px ficavam pequenos: sobem para o corpo (15px) mantendo a
   caixa baixa do botão pequeno. */
.header__portal,.header__wpp{ font-size:var(--fs-base); }
.header__portal{ white-space:nowrap; }
/* Abaixo de 1200px não há largura para os dois CTAs + menu completo:
   o "Portal do cliente" sai do header e permanece no drawer e no rodapé. */
@media (max-width:1199px){ .header__portal{ display:none; } }

.header__wpp{ white-space:nowrap; }

/* No celular o header fica só com a marca e este botão: três traços soltos
   ficariam frouxos ao lado do logotipo, então o menu ganha corpo de botão
   navy. Os três traços têm a mesma largura — o ícone clássico. */
/* Flex e não grid: com grid as três linhas esticam para preencher os 46px
   de altura e os traços nunca se encontram no centro ao virar "X". */
.burger{
  display:none; width:46px; height:46px; flex:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:14px; background:var(--color-primary-dark); color:#fff;
  box-shadow:0 4px 12px rgba(0,0,38,.16);
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
}
.burger:hover{ background:var(--color-primary); }
.burger:active{ transform:scale(.96); box-shadow:0 3px 10px rgba(0,0,38,.16); }
.burger span{
  display:block; width:22px; height:2px; flex:none;
  background:currentColor; border-radius:2px;
  transition:transform var(--transition),opacity var(--transition);
}
/* 2px de traço + 5px de gap = 7px entre centros: é essa a distância que as
   pontas percorrem para se cruzarem no meio ao virar "X". */
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:99; background:rgba(0,0,38,.5);
  opacity:0; transition:opacity var(--transition);
}
.nav-overlay.is-open{ opacity:1; }
/* Abertura do submenu dentro do drawer */
@keyframes navDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ============================================================
   HERO — banner full-bleed navy
   A primeira dobra é uma faixa escura de ponta a ponta: texto branco
   à esquerda, recorte da contadora à direita (sem moldura) e a faixa
   de credibilidade em vidro fechando o bloco.
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  /* A folga embaixo é o "colchão" que os cartões de entrada
     sobrepõem — ver .entry__grid. */
  /* Recuo inferior quase zero de propósito: encosta a base da foto no fim
     do navy, para que a modelo desça por trás dos cartões até a troca de
     seção em vez de acabar no meio da faixa. */
  padding-block:var(--space-4) var(--space-2);
  background:var(--color-primary-dark);
}
/* O halo claro em 74%/40% não é decoração: o blazer da modelo é navy,
   quase a cor do fundo. Sem ele a silhueta desaparece no banner. */
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(780px 640px at 74% 42%,rgba(60,84,208,.50),transparent 66%),
    radial-gradient(560px 420px at 4% 78%,rgba(18,161,80,.14),transparent 64%),
    var(--gradient-brand);
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(840px 560px at 66% 34%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(840px 560px at 66% 34%,#000,transparent 74%);
}
.hero__grid{
  position:relative; display:grid; grid-template-columns:1.06fr .94fr;
  gap:var(--space-8); align-items:center;
}
/* Alinhado ao topo (e não centralizado) para o título subir sem precisar
   encurtar mais a foto — o recuo controla a altura exata. */
.hero__content{ align-self:start; padding-top:var(--space-8); }
.hero__content > * + *{ margin-top:var(--space-4); }

/* Fração do --fs-h1 em vez de valor fixo: assim o título encolhe junto
   com a escala em cada breakpoint, sem duplicar a régua tipográfica. */
.hero__title{
  font-size:calc(var(--fs-h1) * .875); letter-spacing:-.8px; line-height:1.14;
  color:var(--color-on-dark);
  max-width:18ch;
}
/* Os dois níveis que o resto da página copia: o trecho leve em 400/.74 e a
   ênfase em 800/branco puro. Nenhuma cor entra nessa distinção. */
.hero__title .thin{ display:block; font-weight:400; color:var(--color-on-dark-muted); }
.hero__title strong{ display:block; font-weight:800; color:var(--color-on-dark); }
/* A versão curta só entra no celular (ver breakpoint 767px) */
.hero__title-sm,
.hero__lead--sm{ display:none; }

.hero__lead{ font-size:var(--fs-lg); max-width:48ch; color:var(--color-on-dark-soft); }
.hero__lead b{ color:var(--color-on-dark); }

/* Visual — recorte direto sobre o banner, sem moldura */
/* A largura é o que controla a altura do banner: a proporção do quadro
   está travada em 1/1.27 para manter a modelo inteira, então encolher
   aqui encolhe a faixa toda sem mudar o enquadramento. */
.hero__visual{ position:relative; justify-self:center; width:100%; max-width:360px; }

/* Spot de luz atrás da modelo (segundo nível de separação) */
.hero__spot{
  position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
  width:106%; aspect-ratio:1/1.04; border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(132,158,255,.40) 0%,
    rgba(120,146,250,.18) 56%,
    transparent 78%);
}
/* A foto é o elemento mais alto do banner, então é ela que define a
   altura da faixa. O título não acompanha: fica preso ao topo pelo
   align-self/padding do .hero__content. */
/* O arquivo é 1:1.5 e os 15,75% de cima são fundo transparente (medido:
   o primeiro pixel do cabelo está na linha 378 de 2400). 1/1.36 corta
   dentro dessa faixa vazia com folga — encostar no limite raspava o topo
   do cabelo e deixava um corte reto visível. */
.hero__figure{ position:relative; aspect-ratio:1/1.36; }
/* object-position 100% joga todo o corte para o topo (a faixa vazia),
   nada é tirado da modelo. */
.hero__figure img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 100%;
  /* Rim light azulado recorta a silhueta contra o navy */
  filter:drop-shadow(0 0 20px rgba(168,190,255,.42));
  /* O PNG tem corte reto na base (o arquivo acaba na cintura). O degradê
     curto dissolve essa borda bem no fim do navy — mais longo que isso e
     ela desaparece cedo demais, visível pelo vão entre os cartões. */
  mask-image:linear-gradient(to top,transparent 0,#000 6%);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 6%);
}

/* ============================================================
   CARDS DE ENTRADA — faixa sobreposta à base do banner
   ============================================================ */
/* O .entry começa exatamente no fim do banner e a grade sobe por cima
   dele com margem negativa: os cartões ficam metade no navy, metade no
   claro, e a modelo passa a "atrás" deles. */
.entry{ padding-block:0 var(--space-9); background:var(--bg-offwhite); }
.entry__grid{
  position:relative; z-index:3; margin-top:-104px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);
}

/* Pontos do carrossel — só aparecem no celular (ver breakpoint 767px), onde
   a grade vira trilho arrastável. Mesmo desenho dos pontos das avaliações. */
.entry__dots{
  display:none; justify-content:center; gap:8px; margin-top:var(--space-4);
}
.entry__dots button{
  position:relative;
  width:8px; height:8px; border-radius:var(--radius-full);
  background:#C3C9DE; transition:all var(--transition);
}
/* Alvo de toque de 24px sem mudar o desenho do ponto */
.entry__dots button::after{ content:''; position:absolute; inset:-8px -4px; }
.entry__dots button[aria-selected="true"]{ width:26px; background:var(--color-primary); }

.entry-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl);
  padding:28px 26px; box-shadow:0 14px 36px rgba(0,0,38,.12);
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.entry-card:hover{ box-shadow:var(--shadow-lg); border-color:#C7CFEA; transform:translateY(-4px); }
/* Este é o título de cartão de referência da página — os 19px viraram o
   --fs-h4, e todos os outros cartões (especialidades, diferenciais,
   segmentos, etapas) leem o mesmo token */
.entry-card h2{ font-size:var(--fs-h4); letter-spacing:-.2px; color:var(--color-primary); }
.entry-card p{ flex:1; }

/* Botão-pílula contornado — um CTA por cartão. É esta a peça que define a
   tipografia de todo botão da página: 15px, peso 600, caixa mista. */
.card-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:48px; padding:12px 18px; margin-top:6px;
  border:1.5px solid var(--color-primary); border-radius:var(--radius-full);
  color:var(--color-primary); font-size:var(--fs-base); font-weight:600;
  letter-spacing:0; line-height:1.2; text-align:center;
  transition:background var(--transition),color var(--transition);
}
.card-cta span{ transition:transform var(--transition); }
.card-cta:hover{ background:var(--color-primary); color:#fff; }
.card-cta:hover span{ transform:translateX(4px); }

/* ============================================================
   NOSSAS ESPECIALIDADES — cabeçalho fixo + lista de frentes
   ============================================================ */
/* Fundo branco herdado do body. Como a seção seguinte (diferenciais) também é
   branca, o que separa as duas é a forma: aqui o cabeçalho fica à esquerda e a
   leitura desce por uma lista; lá o cabeçalho é largo e o conteúdo vira grade. */
.spec{ background:var(--bg-white); }
/* Cabeçalho mais estreito que a lista: é texto de apoio, quem tem de puxar o
   olho são as seis frentes de trabalho. */
.spec__inner{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--space-8); align-items:start;
}
/* Sem sticky: com a ilustração fechando a coluna, as duas alturas ficam
   parecidas — não haveria curso para grudar, só risco de cortar a arte em
   telas baixas. */
.spec__head > * + *{ margin-top:var(--space-3); }
.spec__head .lead{ max-width:42ch; }
.spec__head .link-arrow{ margin-top:var(--space-4); }

/* Ilustração fechando a coluna de texto. Sem painel tingido, ao contrário da
   arte dos diferenciais: aqui ela não divide a linha com cartões sólidos, então
   o traço se sustenta sobre o branco. Recolorida para a paleta da marca —
   barras no verde de crescimento, cromo da tela em navy. */
.spec__art{ margin-top:var(--space-8); max-width:420px; }
.spec__art img{ width:100%; height:auto; }

/* Lista, não cartões: os blocos vizinhos (entrada, diferenciais, segmentos) já
   são todos caixas com sombra — repetir aqui empilharia três faixas iguais.
   A fileira se define pela régua fina entre um item e o outro. */
.spec__list{ display:grid; gap:0; }
.spec-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-4);
  align-items:start; padding-block:var(--space-4);
  border-top:1px solid var(--color-border);
}
/* A primeira régua alinharia com o topo do título e viraria um traço solto */
.spec-item:first-child{ border-top:0; padding-top:0; }
.spec-item:last-child{ padding-bottom:0; }

/* Ícone tingido de leve, não no gradiente do .perk__ico: em fila de seis, seis
   pastilhas escuras virariam uma coluna de pontos pesados na lateral. */
.spec-item__ico{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:var(--radius-lg);
  background:var(--color-primary-soft); color:var(--color-primary);
  transition:background var(--transition),color var(--transition);
}
.spec-item__ico svg{ width:24px; height:24px; }
/* Passar o mouse na fileira acende só o ícone — sem levantar a linha, que não
   é um cartão clicável. */
.spec-item:hover .spec-item__ico{ background:var(--color-primary); color:#fff; }

.spec-item__body > * + *{ margin-top:6px; }
.spec-item h3{ font-size:var(--fs-h4); letter-spacing:-.2px; color:var(--color-primary); }
.spec-item p{ font-size:var(--fs-base); }

/* ============================================================
   DIFERENCIAIS — foto + cartões de benefício
   ============================================================ */
/* Foto à esquerda, benefícios em 2×2 à direita: o olho pousa na pessoa e
   depois varre os cartões. A coluna da foto é a menor das duas — quem tem de
   ganhar a leitura é o texto. */
.perks{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--space-5); align-items:stretch;
}

/* A foto acompanha a altura da grade de cartões — centralizada ela deixaria
   duas faixas vazias e o bloco perderia a forma de retângulo. */
.perks__media{ position:relative; min-height:360px; }
/* Raio generoso nos quatro cantos: tira o ar de banco de imagens da foto e
   conversa com as pílulas usadas no resto da página. */
.perks__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  border-radius:clamp(64px,10vw,120px); box-shadow:var(--shadow-xl);
}
/* Ilustração no lugar da foto: o traço vetorial não tem superfície própria e
   sobre o branco da seção flutuaria solto ao lado de cartões sólidos. O painel
   tingido dá corpo ao bloco e ainda joga a "tela" branca do desenho para frente.
   Duas linhas: a arte ocupa o vão que sobra, o selo fecha a base. */
.perks__media--art{
  display:grid; grid-template-rows:1fr auto; gap:var(--space-3);
  background:var(--color-primary-soft); border-radius:var(--radius-2xl);
  padding:var(--space-4);
}
/* contain no lugar de cover: recortar ilustração corta pessoa e gráfico ao meio */
.perks__media--art img{
  object-fit:contain; border-radius:0; box-shadow:none;
}
/* Fora do absoluto e esticado na base do painel: aqui ele fecha a coluna como
   rodapé do bloco. Encolhido ao conteúdo sobraria um vão morto de tinta ao lado. */
.perks__media--art .perks__badge{
  position:static; box-shadow:var(--shadow-md);
}

/* Selo de credencial sobre a base da foto — mesmo papel do cartão flutuante da
   referência, aqui com o dado que o cliente realmente vai checar. */
.perks__badge{
  position:absolute; left:6px; right:26px; bottom:20px;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:12px 16px;
}
.perks__badge svg{ width:26px; height:26px; flex:none; color:var(--color-accent-text); }
.perks__badge-text{ font-size:var(--fs-sm); color:var(--color-text-muted); line-height:1.45; }
.perks__badge strong{
  display:block; font-size:var(--fs-base); color:var(--color-primary); line-height:1.3;
}

.perks__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
/* Sobre o fundo branco a borda sozinha viraria uma caixa vazia: quem separa o
   card da página é a sombra — a borda só fecha o contorno. */
.perk{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl);
  padding:22px 24px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
}
.perk:hover{ box-shadow:var(--shadow-lg); border-color:#C7CFEA; transform:translateY(-4px); }
.perk__ico{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:var(--radius-full); background:var(--gradient-brand); color:#fff;
}
.perk__ico svg{ width:22px; height:22px; }
.perk h3{ font-size:var(--fs-h4); letter-spacing:-.2px; color:var(--color-primary); }
.perk p{ font-size:var(--fs-base); }

/* Faixa alinhada com as bordas da grade acima: com o cabeçalho à esquerda, uma
   ilha centralizada mais estreita não se apoiaria em nada. Tingida — em branco
   sobre branco ela sumiria ao lado dos cards, que já são a superfície da seção. */
.perks__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);
  margin-top:var(--space-4);
  background:var(--bg-offwhite); border:1px solid var(--color-border);
  border-radius:var(--radius-2xl); padding:26px var(--space-5);
}
.perks__stats li{ text-align:center; }
.perks__stats strong{
  display:block; font-size:2.5rem; font-weight:800; letter-spacing:-1px;
  line-height:1.1; color:var(--color-primary);
}
.perks__stats span{ font-size:var(--fs-base); color:var(--color-text-muted); }

/* ============================================================
   MÍDIA DAS SEÇÕES DIVIDIDAS
   ============================================================ */
/* Mídia com offset da marca */
.split__media{ position:relative; }
.media-offset{ position:relative; border-radius:var(--radius-2xl); }
.media-offset::before{
  content:''; position:absolute; inset:24px -24px -24px 24px;
  border-radius:var(--radius-2xl); background:var(--gradient-brand); z-index:0;
}
.media-offset--right::before{ inset:24px 24px -24px -24px; }
.media-offset img{
  position:relative; z-index:1; width:100%; aspect-ratio:16/13; object-fit:cover;
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl);
}

.media-badge{
  position:absolute; z-index:2; left:-20px; bottom:34px;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); padding:14px 18px;
}
.media-badge__ico{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:var(--radius-md); background:var(--color-accent-soft); color:var(--color-accent-text);
}
.media-badge__ico svg{ width:22px; height:22px; }
.media-badge strong{ display:block; font-size:var(--fs-base); color:var(--color-primary); }
.media-badge span{ font-size:var(--fs-sm); color:var(--color-text-muted); }

/* ============================================================
   SOBRE NÓS
   ============================================================ */
/* Sobraram duas frases ao lado do retrato: em colunas iguais a linha
   passava de 70 caracteres e o texto ficava solto na largura. O texto fica
   com a coluna maior (medida em ~54ch) e a foto com a menor. */
.split--about{ grid-template-columns:1.15fr .85fr; gap:var(--space-8); }
/* Um degrau acima na mesma escala do site: o lead sobe de 17px para os 19px
   do --fs-h4 e o corpo, de 15px para os 17px do --fs-lg. Continua sem inventar
   tamanho novo — só usa dois tokens que já existem — e a entrelinha 1.6 do
   banner se mantém. A medida de 54ch é que equilibra o peso do círculo ao
   lado, e como ela é em ch acompanha o texto maior sem alongar a linha. */
.about__text .lead{ font-size:var(--fs-h4); line-height:1.6; max-width:54ch; }
.about__text p:not(.lead){ font-size:var(--fs-lg); line-height:1.6; max-width:54ch; }

/* ---- Retrato circular ----
   Só a imagem, recortada em círculo: sem moldura branca, anel decorativo,
   sombra ou vinheta ao redor. O overflow fica no __photo (e não no wrapper)
   para que as pílulas de identificação possam vazar para fora do círculo. */
.about-media{
  position:relative;
  width:100%; max-width:360px; margin-inline:auto;
}
.about-media__photo{
  aspect-ratio:1/1; border-radius:var(--radius-full); overflow:hidden;
}
/* object-position acima do centro porque no retrato original (382×510) o
   rosto fica no terço superior e um corte centralizado o decapitaria. O eixo Y
   subiu de 20% para 35%: como o corte só tem ~33% de folga vertical, cada
   ponto percentual vale pouco — o resultado é a figura subindo ~18px dentro
   do círculo, ainda com folga sobre a cabeça. O círculo em si não muda. */
.about-media__photo img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:52% 35%;
  filter:saturate(1.06) contrast(1.04);
  transform:scale(1.06); transform-origin:52% 35%;
}

/* Pílulas de identificação do contador responsável. Ancoradas no canto
   inferior esquerdo do quadrado — região onde o círculo já se afastou, então
   elas passam pelo ombro e pelo fundo, nunca pelo rosto. */
.about-cards{
  position:absolute; left:-5%; bottom:-3%;
  display:grid; gap:var(--space-2); justify-items:start;
  max-width:112%;
}
.about-card{
  margin:0; border-radius:var(--radius-full);
  box-shadow:var(--shadow-lg);
}
/* Navy sólido: é o nome que precisa puxar o olhar primeiro */
.about-card--name{
  padding:10px 22px;
  background:var(--color-primary-dark); color:var(--color-white);
  font-size:var(--fs-h4); font-weight:800; letter-spacing:-.01em;
}
/* Branco com fio navy: segundo nível de leitura, e o contraste alto deixa o
   número do CRC legível — em navy sobre navy ele sumia */
.about-card--role{
  padding:8px 22px; text-align:left;
  background:var(--bg-white); color:var(--color-text-body);
  box-shadow:0 0 0 1px var(--color-border-soft), var(--shadow-md);
  font-size:var(--fs-sm); line-height:1.35;
}
.about-card--role span{ display:block; font-weight:400; }
.about-card--role b{ display:block; font-weight:800; color:var(--color-primary); }

/* ============================================================
   NOSSA ESPECIALIDADE (segmentos atendidos)
   ============================================================ */
/* Anatomia do card: tudo centralizado numa coluna só — ícone de traço,
   título, público atendido, texto e o CTA em pílula ancorado na base. */
/* A grade é mais estreita que o container: com só dois cards, a largura cheia
   deixava a linha de texto longa demais e o bloco pesado sobre o navy. */
.seg-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
  align-items:stretch; max-width:920px; margin-inline:auto;
}
.seg-card{
  background:var(--bg-offwhite); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:32px 28px 30px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
}
.seg-card:hover{ box-shadow:var(--shadow-lg); border-color:#C7CFEA; transform:translateY(-4px); }
/* Sobre o navy a sombra clara some e a borda vira uma linha suja: atravessando
   a divisa, o card se define por sombra profunda — que funciona nos dois fundos. */
.section--navy .seg-card{ border-color:transparent; box-shadow:0 14px 34px rgba(0,0,38,.18); }
.section--navy .seg-card:hover{ border-color:transparent; box-shadow:0 20px 44px rgba(0,0,38,.26); }

.seg-card__ico{ color:var(--color-primary); margin-bottom:2px; }
.seg-card__ico svg{ width:40px; height:40px; stroke-width:1.3; }
.seg-card h3{ font-size:var(--fs-h3); letter-spacing:-.3px; color:var(--color-primary); }
/* A segunda linha do título é o segmento — quebra sempre no mesmo ponto
   para os dois cards ficarem com o título na mesma altura. */
.seg-card h3 em{ font-style:normal; color:inherit; display:block; }
/* Público atendido: subtítulo discreto, não concorre com o título */
.seg-card__tag{
  margin-top:-6px; font-size:var(--fs-sm); font-weight:600;
  color:var(--color-text-muted); line-height:1.4;
}
/* O texto estica para que a pílula fique na mesma linha nos dois cards.
   Corpo de cartão do banner (15/1.6): o degrau acima que havia aqui deixava
   dois tamanhos de texto de cartão convivendo na mesma página. */
.seg-card__desc{ flex:1; font-size:var(--fs-base); line-height:1.6; }
.seg-card .btn{ margin-top:var(--space-3); }


/* ============================================================
   TROCA DE CONTADOR — abas sublinhadas + linha do tempo vertical
   ============================================================ */
/* Sem moldura em volta: o conteúdo respira direto sobre o navy da seção e só
   o cartão-resumo da esquerda ganha superfície própria. */
.journey{ max-width:1040px; margin-inline:auto; }

/* Barra de abas em texto: a régua fina corre por toda a largura e o traço da
   aba ativa se apoia nela — por isso o -1px, que faz os dois se sobreporem em
   vez de empilhar duas linhas. */
.journey__tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 40px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
/* Inativa no branco de apoio, ativa no branco puro com peso 800: os mesmos
   dois níveis do título do banner. A régua verde embaixo permanece — é
   indicador de estado, não texto. */
.journey__tab{
  padding:12px 4px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-size:var(--fs-lg); font-weight:600; letter-spacing:-.1px;
  color:var(--color-on-dark-muted);
  transition:color var(--transition),border-color var(--transition);
}
.journey__tab:hover{ color:var(--color-on-dark); }
.journey__tab[aria-selected="true"]{
  color:var(--color-on-dark); font-weight:800; border-bottom-color:var(--color-accent);
}

/* Duas colunas — resumo e etapas — com os CTAs atravessando as duas embaixo */
.journey__panel{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--space-8);
  /* Centralizado: o cartão e a linha do tempo raramente têm a mesma altura —
     com 3 etapas sobra folga de um lado, e o alinhamento pelo topo deixaria a
     coluna curta pendurada */
  align-items:center;
  padding-top:var(--space-7);
  animation:panelIn 260ms ease-out;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Ilustração: ocupa o lugar da foto do layout de referência. Solta sobre o
   navy, sem moldura — as ilustrações já vêm no navy da marca (#101B5E) com
   apoio em cinza claro, então o fundo da seção faz as vezes de superfície.
   O teto de 420px impede que a arte cresça mais que a coluna de etapas. */
.journey__art{
  display:grid; place-items:center;
  padding-inline:var(--space-3);
}
.journey__art img{ width:100%; max-width:420px; }

/* Linha do tempo vertical: o mesmo bloco serve para 3 ou 4 etapas */
.flow{ display:grid; }
.flow__step{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; column-gap:20px;
  padding-bottom:var(--space-5);
}
.flow__step:last-child{ padding-bottom:0; }
/* Conector: sai da base do círculo e morre no topo do próximo — fica preso ao
   passo, então some junto com ele se uma etapa for removida */
.flow__step:not(:last-child)::before{
  content:''; position:absolute; left:20px; top:50px; bottom:6px;
  width:2px; background:rgba(255,255,255,.22);
}
.flow__n{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:var(--radius-full);
  background:#fff; color:var(--color-primary-dark);
  font-size:var(--fs-lg); font-weight:800; line-height:1; letter-spacing:-.3px;
}
.flow__body{ padding-top:9px; }  /* alinha o título ao centro do círculo */
/* Mesma anatomia do cartão do banner, invertida para o navy: título 19px e
   corpo 15px, um no branco puro e o outro no branco de corpo */
.flow__step h3{
  font-size:var(--fs-h4); letter-spacing:-.2px; color:var(--color-on-dark);
}
.flow__step p{ font-size:var(--fs-base); margin-top:6px; color:var(--color-on-dark-soft); }

/* O vão da grade já separa os CTAs do conteúdo — a margem padrão do
   .btn-row--center somaria a ele e abriria um buraco na base do painel */
.journey__cta{ grid-column:1 / -1; margin-top:0; }

/* ============================================================
   CHECK LIST
   ============================================================ */
.check-list{ display:grid; gap:12px; }
.check-list li{ display:flex; align-items:flex-start; gap:11px; font-size:var(--fs-lg); }
.check-list .ico{ margin-top:4px; }

/* ============================================================
   AVALIAÇÕES
   ============================================================ */
/* Sprite dos ícones reaproveitados via <use>: fora do fluxo, sem ocupar espaço */
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* A faixa de números fecha a seção anterior com respiro próprio: o topo daqui
   é menor que o rodapé para o título não nascer solto no meio do vão */
#avaliacoes{ padding-block:var(--space-7) var(--space-9); }

/* Medida menor que a do --wide e vão menor que o do --center: o cabeçalho
   tem duas linhas curtas e os 64px padrão o soltariam do carrossel. Vem
   depois do --center na folha, então é este margin-bottom que vale. */
.reviews-head{ max-width:760px; margin-bottom:var(--space-6); }
.stars{ color:var(--color-gold); letter-spacing:2px; font-size:var(--fs-base); }

/* Setas nas laterais dos cartões; os pontos ocupam sozinhos a linha de baixo */
.carousel{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; column-gap:var(--space-4);
}
.carousel__viewport{ grid-column:2; grid-row:1; min-width:0; }
.carousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--space-5)) / 3);
  gap:var(--space-5);
  /* overflow-x:auto sozinho faria o eixo Y computar como auto e a track
     viraria um container rolável na vertical — com a barra escondida, os
     cards subiam e desciam sem nada visível explicando */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* O padding é o que deixa a sombra dos cartões aparecer apesar do recorte;
     a margem negativa de mesmo valor devolve o cartão ao alinhamento do
     título. O rodapé é maior porque a sombra cai mais para baixo */
  --bleed:12px;
  scroll-behavior:smooth;
  padding:10px var(--bleed) 28px;
  margin:-10px calc(var(--bleed) * -1) -28px;
  /* O snapport é a caixa de padding: sem isto o scroll-snap encosta o cartão
     na borda de recorte e come a folga lateral — a borda esquerda e a sombra
     do primeiro cartão visível sumiam a cada parada do carrossel. O valor
     acompanha o --bleed e coincide com o passo usado no JS (index * step) */
  scroll-padding-inline:var(--bleed);
  /* Arrastar até o fim do trilho não deve puxar a página nem disparar o
     "voltar" por gesto lateral no celular */
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* Sem stretch os cartões curtos encolheriam e a linha inteira mudaria de
     altura a cada avaliação que entra em cena */
  align-items:stretch;
}
.carousel__track::-webkit-scrollbar{ display:none; }

.review{
  scroll-snap-align:start;
  background:#fff; border:1px solid var(--color-border-soft); border-radius:var(--radius-xl);
  /* Respiro interno acompanha a largura do cartão, que muda de 490px a 280px
     entre o desktop e o celular — evita um degrau em cada quebra de layout */
  padding:clamp(18px,2.2vw,22px) clamp(18px,2.4vw,24px);
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:12px;
}
/* Depoimento não é card clicável: sem realce no hover para não sugerir clique
   (as setas e os pontos é que navegam). Declarado de propósito para que
   nenhuma regra genérica de cartão passe a valer aqui */
.review:hover{ box-shadow:var(--shadow-card); border-color:var(--color-border-soft); transform:none; }
.review__head{ display:flex; align-items:center; gap:12px; }
.review__id strong{ display:block; font-size:var(--fs-base); color:var(--color-text); line-height:1.3; }
.review__src{
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:var(--fs-xs); color:var(--color-text-muted);
}
.review__src svg{ width:14px; height:14px; flex:none; stroke:none; }
/* O bloco de texto tem sempre --review-lines linhas: as avaliações têm
   tamanhos bem diferentes e, sem travar aqui, a altura do carrossel mudava
   conforme o cartão mais alto de cada trecho visível */
.review__text{
  --review-lines:6;
  flex:none; font-size:var(--fs-base); color:var(--color-text-body);
  line-height:1.6; height:calc(var(--review-lines) * 1.6em);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--review-lines); line-clamp:var(--review-lines);
  overflow:hidden;
}
.avatar{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:var(--radius-full); background:var(--color-primary-soft);
  color:var(--color-primary); font-weight:800; font-size:var(--fs-sm);
}

.cbtn{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:var(--radius-full); border:1.5px solid var(--color-border-soft); background:#fff;
  color:var(--color-primary);
  box-shadow:0 1px 2px rgba(0,0,38,.05), 0 6px 14px -6px rgba(0,0,38,.16);
  transition:all var(--transition);
}
.cbtn--prev{ grid-column:1; grid-row:1; }
.cbtn--next{ grid-column:3; grid-row:1; }
.cbtn:hover:not(:disabled){
  background:var(--color-primary); color:#fff; border-color:var(--color-primary);
  box-shadow:0 2px 4px rgba(0,0,38,.08), 0 10px 20px -8px rgba(16,27,94,.38);
}
.cbtn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.cbtn svg{ width:20px; height:20px; }

/* margin-top em --space-5 (32px) e não --space-4: a fileira de pontos ficava
   colada na base dos cartões. Um degrau na escala de espaços basta para ela
   ler como controle da seção, e não como rodapé do card. */
.carousel__dots{
  grid-column:1 / -1; grid-row:2; justify-self:center;
  display:flex; gap:8px; margin-top:var(--space-5);
}
.carousel__dots button{
  position:relative;
  width:8px; height:8px; border-radius:var(--radius-full);
  background:#C3C9DE; transition:all var(--transition);
}
/* Área de toque de 24px sem alterar o desenho do ponto nem o espaçamento
   da fileira — 8px de alvo é pequeno demais para o dedo */
.carousel__dots button::after{ content:''; position:absolute; inset:-8px -4px; }
.carousel__dots button[aria-selected="true"]{ width:26px; background:var(--color-primary); }

/* ============================================================
   LOGOS — clientes e parceiros
   ============================================================ */
.marquee{
  position:relative; overflow:hidden; margin-top:var(--space-7);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* O espaçamento vive no li (margin), não em gap: assim a lista duplicada
   fecha o loop exatamente em -50%, sem salto. */
.marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:marquee 46s linear infinite;
}
/* Logos soltas sobre o fundo da seção — sem cartão em volta */
.marquee__track li{
  flex:none; margin-right:24px;
  display:grid; place-items:center; width:168px; height:110px; padding:16px;
}
.marquee__track img{ max-height:74px; width:auto; object-fit:contain; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* A faixa de clientes é só título + logos em movimento: com o respiro
   padrão da seção ela ocupava mais altura do que conteúdo. Aqui o recuo
   vertical, o vão do cabeçalho e a linha de logos ficam mais baixos —
   escopado no #clientes para a grade .partners não mudar. */
#clientes{ padding-block:var(--space-7); }
#clientes .section-head{ margin-bottom:var(--space-5); }
#clientes .marquee{ margin-top:0; }
#clientes .marquee__track li{ height:84px; padding:8px 16px; }
#clientes .marquee__track img{ max-height:60px; }

.partners{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);
  margin-top:var(--space-7);
}
.partners li{
  display:grid; place-items:center; min-height:130px; padding:24px;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); transition:box-shadow var(--transition),transform var(--transition);
}
.partners li:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.partners img{ max-height:64px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.partners__note{ text-align:center; margin-top:var(--space-6); color:var(--color-text-muted); }

/* ============================================================
   FAQ
   ============================================================ */
/* Faixa mais baixa que as demais: seis perguntas empilhadas em coluna única
   deixavam a seção quase tão alta quanto o hero, com o recuo padrão de 120px
   por cima. Em duas colunas a lista fecha em três linhas e o recuo cai para 80 */
#faq{ padding-block:var(--space-9); }

/* Duas colunas pedem mais largura que o eixo de leitura de 860px */
.faq-wrap{ max-width:1040px; margin-inline:auto; }
/* Cabeçalho de uma linha só: 64px abaixo dele abriria vão numa seção compacta */
.faq-wrap .section-head{ margin-bottom:var(--space-6); }

/* align-items:start impede que o item ao lado estique junto com o aberto */
.faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
.faq__item{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; transition:border-color var(--transition),box-shadow var(--transition);
}
.faq__item:hover{ border-color:#C7CFEA; }
.faq__item.is-open{ border-color:#C7CFEA; box-shadow:var(--shadow-md); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; min-height:56px; padding:14px 18px; text-align:left;
  /* Navy de título como em qualquer outro cartão da página; o estado aberto
     escurece para o navy do logotipo em vez de trocar de família de cor */
  font-size:var(--fs-lg); font-weight:700; line-height:1.35; color:var(--color-primary);
  transition:color var(--transition);
}
/* A pergunta "Trocar de contador..." quebra em duas linhas; min-height
   em todos os cards nivela a grade inteira no tamanho do card mais alto */
@media (min-width:1024px){
  .faq__q{ min-height:84px; }
}
.faq__q:hover{ color:var(--color-primary-dark); }
.faq__item.is-open .faq__q{ color:var(--color-primary-dark); }
.faq__ico{
  position:relative; width:26px; height:26px; flex:none;
  border-radius:var(--radius-full); background:var(--color-primary-soft);
  transition:background var(--transition);
}
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--color-primary);
  border-radius:2px; transform:translate(-50%,-50%); transition:transform var(--transition);
}
.faq__ico::before{ width:11px; height:2px; }
.faq__ico::after{ width:2px; height:11px; }
.faq__item.is-open .faq__ico{ background:var(--color-primary); }
.faq__item.is-open .faq__ico::before{ background:#fff; }
.faq__item.is-open .faq__ico::after{ background:#fff; transform:translate(-50%,-50%) scaleY(0); }

.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 260ms ease; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
/* A divisória vive no <p> — no wrapper ela seria pintada mesmo com o item
   fechado, já que overflow:hidden recorta o conteúdo, não a própria borda */
.faq__a p{
  margin:0 18px 18px; padding-top:14px; border-top:1px solid var(--color-border-soft);
  font-size:var(--fs-base); max-width:62ch;
}

/* ============================================================
   CONTATO
   ============================================================ */
/* Faixa mais baixa que as demais: a coluna de texto agora é curta (título,
   lead e a arte), então os 120px padrão sobrariam como vazio em volta do card */
/* Folga extra embaixo: o card "Siga a STAZON" do rodapé sobe metade da própria
   altura sobre esta seção e não pode encostar no cartão do formulário. */
#contato{ padding-top:var(--space-8); padding-bottom:calc(var(--space-8) + 48px); }

.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9);
  /* stretch (e não start): a coluna de texto passa a ter a altura do cartão do
     formulário, e a arte usa essa sobra para fechar as duas colunas no mesmo pé */
  align-items:stretch;
}
.contact__info{ display:flex; flex-direction:column; gap:var(--space-4); }
/* Medida menor que a padrão: ao lado do formulário a linha cheia de 60ch
   encostaria no card */
.contact__info .lead{ max-width:46ch; }

/* ---- ARTE ---- */
/* A ilustração já vem no navy da marca e com fundo transparente, então não leva
   moldura nem cartão: ocupa o que sobra da coluna e
   ancora no topo, logo abaixo do texto, em vez de descer até a base do form. */
.contact__art{
  flex:1; min-height:280px; margin-top:var(--space-2);
  display:grid; place-items:start center;
}
.contact__art img{
  width:100%; max-width:520px; height:100%;
  object-fit:contain; object-position:top center;
}

/* ---- FORM ---- */
.form{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); padding:40px;
}
.form__title{ font-size:var(--fs-h3); margin-bottom:var(--space-5); color:var(--color-primary); }
.field + .field,.field-row + .field,.field + .field-row{ margin-top:var(--space-4); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
/* dentro da linha os campos são irmãos: o margin-top acima desalinharia o 2º */
.field-row > .field + .field{ margin-top:0; }

.field label{
  display:block; font-size:var(--fs-sm); font-weight:600;
  color:var(--color-text-body); margin-bottom:8px;
}
.field label small{ font-weight:400; color:var(--color-text-muted); }
.req{ color:var(--color-error); }

.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 16px;
  background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius-sm);
  font-size:var(--fs-base); color:var(--color-text);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#9B9FB2; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#B6BDD4; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(28,42,134,.14);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--color-error); }
.field__err{
  display:flex; align-items:center; gap:6px; margin-top:7px;
  font-size:var(--fs-xs); color:var(--color-error);
}
.field__err::before{ content:'!'; display:grid; place-items:center; width:15px; height:15px; flex:none;
  border-radius:var(--radius-full); background:var(--color-error); color:#fff; font-size:.625rem; font-weight:800; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; padding-right:46px; cursor:pointer; }
.select-wrap::after{
  content:''; position:absolute; right:18px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--color-primary); border-bottom:2px solid var(--color-primary);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

.checkbox{
  display:flex; align-items:flex-start; gap:11px; margin-top:var(--space-4);
  cursor:pointer; font-size:var(--fs-sm); color:var(--color-text-body);
}
.checkbox input{ position:absolute; opacity:0; width:20px; height:20px; }
.checkbox__box{
  width:20px; height:20px; flex:none; margin-top:2px;
  border:1.5px solid #C1C8DC; border-radius:var(--radius-xs); background:#fff;
  transition:all var(--transition); position:relative;
}
.checkbox input:checked + .checkbox__box{ background:var(--color-primary); border-color:var(--color-primary); }
.checkbox input:checked + .checkbox__box::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
}
.checkbox input:focus-visible + .checkbox__box{ outline:3px solid rgba(28,42,134,.45); outline-offset:2px; }
.checkbox a{ color:var(--color-primary); text-decoration:underline; }
.form .btn--block{ margin-top:var(--space-5); }
.form__note{ font-size:var(--fs-sm); color:var(--color-text-muted); text-align:center; margin-top:12px; }
.form__success{
  display:block; margin-top:var(--space-4); padding:16px 18px;
  background:var(--color-accent-soft); border-left:4px solid var(--color-accent);
  border-radius:var(--radius-sm); font-size:var(--fs-base);
}
.form__success strong{ display:block; color:var(--color-accent-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--color-primary-dark); color:var(--color-on-dark-muted); padding-top:0; }
/* O card cavalga a borda do rodapé: --card-lift o sobe metade da própria altura,
   deixando 50% sobre a seção clara e 50% sobre o navy. Como o transform não ocupa
   espaço, a margem inferior é o respiro *extra* até a coluna "Contato". */
.social-card{
  --card-lift:-50%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  flex-wrap:wrap;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);
  padding:36px 48px; transform:translateY(var(--card-lift));
  margin-bottom:var(--space-4);
  position:relative; z-index:2;
}
/* O reveal global zera o transform (transform:none) e derrubaria o card para
   dentro do rodapé — aqui ele compõe com o deslocamento em vez de substituí-lo. */
.social-card[data-reveal]{ transform:translateY(calc(var(--card-lift) + 22px)); }
.social-card[data-reveal].is-visible{ transform:translateY(var(--card-lift)); }
.social-card h2{ font-size:var(--fs-h3); color:var(--color-primary); letter-spacing:-.3px; }
.social-card p{ color:var(--color-text-body); margin-top:6px; }
.social--lg{ gap:12px; }
.social--lg a{ width:52px; height:52px; border-radius:var(--radius-md); color:#fff; }
.social--lg svg{ width:24px; height:24px; }
.social__ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.social__fb{ background:#1877F2; }
.social__li{ background:#0A66C2; }
.social__wa{ background:var(--color-whatsapp); }
.social--lg a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

.footer__grid{
  display:grid; grid-template-columns:1.5fr 1.1fr .9fr 1.2fr; gap:var(--space-7);
  padding-bottom:var(--space-8);
}
.footer__col p{ font-size:var(--fs-base); }
/* Versão navy do logo: o fundo #000026 do arquivo é idêntico ao do rodapé. */
.footer__logo{ display:block; position:relative; width:190px; height:58px; overflow:hidden; margin-bottom:20px; }
.footer__logo img{ position:absolute; width:359px; height:359px; max-width:none; left:-84px; top:-150px; }
.footer__badge{
  display:flex; align-items:center; gap:8px; margin-top:16px;
  font-size:var(--fs-sm); color:rgba(255,255,255,.62);
}
.footer__badge .ico{ color:var(--color-accent); }

/* Título de coluna: 19px/700 como o título de cartão do banner, em branco
   puro para se destacar dos links em .74 logo abaixo */
.footer__title{
  font-size:var(--fs-h4); font-weight:700; letter-spacing:-.2px;
  color:var(--color-on-dark); margin-bottom:18px;
}
.footer__title--nl{ margin-top:var(--space-6); }
.footer__list{ display:grid; gap:11px; }
.footer__list a,.footer__list span{ font-size:var(--fs-base); color:var(--color-on-dark-muted); transition:color var(--transition); }
.footer__list a:hover{ color:var(--color-on-dark); }
.footer__nltext{ font-size:var(--fs-sm); color:rgba(255,255,255,.62); margin-bottom:14px; }

.newsletter{ display:flex; gap:8px; }
.newsletter input{
  flex:1; min-width:0; min-height:48px; padding:12px 16px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm); color:#fff; font-size:var(--fs-base);
}
.newsletter input::placeholder{ color:rgba(255,255,255,.42); }
.newsletter input:focus{ outline:none; border-color:var(--color-accent); background:rgba(255,255,255,.11); }
.newsletter button{
  display:grid; place-items:center; width:48px; height:48px; flex:none;
  background:var(--color-accent); color:#fff; border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.newsletter button:hover{ background:#0C7A3D; }
.newsletter button svg{ width:20px; height:20px; stroke-width:2.2; }
.newsletter__msg{ font-size:var(--fs-sm); color:#7DE8AC; margin-top:10px; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:24px; border-top:1px solid rgba(255,255,255,.12);
  /* Letra miúda do rodapé — mesmo nível do texto da newsletter e do selo */
  font-size:var(--fs-sm); color:rgba(255,255,255,.62);
}
.footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__legal a:hover{ color:var(--color-on-dark); text-decoration:underline; }

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wpp-float{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:grid; place-items:center; width:58px; height:58px;
  border-radius:var(--radius-full); background:var(--color-whatsapp); color:#fff;
  box-shadow:var(--shadow-float);
  transition:transform var(--transition),box-shadow var(--transition);
}
.wpp-float svg{ width:30px; height:30px; stroke:none; fill:currentColor; }
.wpp-float:hover{ transform:scale(1.07); box-shadow:0 8px 26px rgba(37,211,102,.45); }
.wpp-float::after{
  content:''; position:absolute; inset:0; border-radius:var(--radius-full);
  border:2px solid var(--color-whatsapp); animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}

/* ============================================================
   ANIMAÇÃO DE ENTRADA
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s ease-out,transform .6s ease-out; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1200px){
  :root{ --fs-h1:2.75rem; --fs-h2:2.25rem; --space-10:96px; }
  .hero__visual{ max-width:340px; }
  .entry__grid{ gap:var(--space-3); }
  .entry-card{ padding:24px 22px; }

  /* Abaixo de 1200 o cartão em três colunas cai para ~275px e a avaliação
     mais longa passaria de 7 linhas. Em duas colunas ela cabe em 5 — o
     cartão varia de 350px (em 768) a 490px (em 1200) e é o mais estreito
     que dita o número de linhas */
  .carousel__track{ grid-auto-columns:calc((100% - var(--space-5)) / 2); }
  .review__text{ --review-lines:5; }
}

@media (max-width:1023px){
  :root{ --fs-h1:2.5rem; --fs-h2:2rem; --fs-h2-sm:1.75rem; --space-10:80px; --space-9:64px; }

  /* Header mobile */
  .header__inner{ height:76px; }
  .header.is-stuck .header__inner{ height:66px; }
  .burger{ display:flex; }

  /* ── DRAWER ─────────────────────────────────────────────────
     No celular o menu vira uma página inteira: marca fixa no topo,
     seções em lista separadas por fios e, na base, um painel claro
     com os CTAs e o contato direto. */
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:min(92vw,400px); z-index:100;
    background:#fff; flex-direction:column; align-items:stretch; gap:0;
    padding:0; overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); transition:transform 240ms ease-out;
    box-shadow:-14px 0 44px rgba(0,0,38,.22);
  }
  .nav.is-open{ transform:none; }

  /* Com o menu aberto, o cabeçalho do site sai de cena: a faixa branca
     fica transparente e marca e botões somem, restando só o cabeçalho do
     drawer. O .header em si continua de pé porque o drawer é filho dele. */
  body.is-menu-open .header,
  body.is-menu-open .header.is-stuck{ background:transparent; box-shadow:none; }
  body.is-menu-open .brand,
  body.is-menu-open .header__actions{
    opacity:0; visibility:hidden;
    transition:opacity 160ms ease-out,visibility 160ms;
  }

  /* Marca + fechar, fixos no topo da rolagem */
  .nav__head{
    position:sticky; top:0; z-index:3;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:84px; padding:14px 20px; background:#fff;
    border-bottom:1px solid var(--color-border);
  }
  /* Mesmo recorte do logotipo do cabeçalho, na escala do drawer */
  .nav__head-logo{ display:block; position:relative; width:132px; height:41px; overflow:hidden; }
  .nav__head-logo img{
    position:absolute; width:249px; height:249px; max-width:none;
    left:-58px; top:-104px; filter:brightness(1.06);
  }
  .nav__close{
    display:grid; place-items:center; width:42px; height:42px; flex:none;
    border-radius:12px; background:var(--bg-offwhite); color:var(--color-primary-dark);
    transition:background var(--transition),color var(--transition);
  }
  .nav__close:hover{ background:var(--color-primary-dark); color:#fff; }
  .nav__close:active{ transform:scale(.95); }
  .nav__close svg{ width:20px; height:20px; stroke-width:2; }

  /* Lista de seções: uma por linha, separadas por fio, com a seta em
     pastilha à direita marcando o alvo de toque. */
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; padding:6px 20px 18px; }
  .nav__item--drawer{ display:block; }
  .nav__list > li + li{ border-top:1px solid var(--color-border); }
  .nav__link{
    width:100%; min-height:60px; padding:15px 0; gap:12px;
    justify-content:space-between; border-radius:0;
    font-size:1.125rem; font-weight:700; letter-spacing:-.2px;
    color:var(--color-primary-dark);
  }
  .nav__link:hover{ background:transparent; color:var(--color-primary); }
  .nav__link:active{ opacity:.65; }
  /* A seta dos links e o chevron de "Serviços" usam a mesma pastilha. No
     chevron é o padding que cria a moldura (box-sizing:border-box, então
     o traço de 16px fica centrado nos 32px da pastilha). */
  .nav__go,
  .nav__toggle .nav__caret{
    display:grid; place-items:center; width:32px; height:32px; flex:none;
    border-radius:var(--radius-full); background:var(--bg-offwhite);
    color:var(--color-primary);
    transition:background var(--transition),color var(--transition),transform var(--transition);
  }
  .nav__go svg,
  .nav__toggle .nav__caret{ stroke-width:2.2; }
  .nav__go svg{ width:15px; height:15px; }
  .nav__toggle .nav__caret{ padding:8px; }
  .nav__link:hover .nav__go,
  .nav__link:hover .nav__caret,
  .nav__toggle[aria-expanded="true"] .nav__caret{ background:var(--color-primary); color:#fff; }

  /* Submenu de Serviços, recuado sob o item */
  .nav__item{ position:static; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0;
    margin:0 0 14px; padding:4px 0 0 14px;
    border-left:2px solid var(--color-primary-soft);
    display:none;
  }
  .nav__item:hover .dropdown{ display:none; }
  .nav__toggle[aria-expanded="true"] + .dropdown{ display:block; animation:navDrop 200ms ease-out; }
  .dropdown a{
    display:flex; align-items:center; min-height:46px;
    padding:8px 10px; font-size:var(--fs-lg); color:var(--color-text-body);
  }

  /* Painel da base: ações, telefone, e-mail e redes. O margin-top:auto
     segura o painel no fim do drawer quando a lista não enche a tela. */
  .nav__foot{
    display:block; margin-top:auto; text-align:center;
    padding:22px 20px calc(24px + env(safe-area-inset-bottom));
    background:var(--bg-offwhite); border-top:1px solid var(--color-border);
  }
  .nav__cta{ display:grid; gap:10px; }
  .nav__cta .btn{ width:100%; min-height:52px; font-size:var(--fs-base); }
  /* Sobre a faixa cinza o contorno sozinho se perde: o fundo branco
     devolve o botão como peça */
  .nav__cta .btn--portal{ background:#fff; }
  .nav__cta .btn--portal:hover{ background:var(--color-primary-dark); }

  .nav__phone{
    display:block; margin-top:20px;
    font-size:1.375rem; font-weight:800; letter-spacing:-.5px;
    color:var(--color-primary-dark);
  }
  .nav__phone:hover{ color:var(--color-primary); }
  .nav__mail{
    display:block; margin-top:4px; font-size:var(--fs-base);
    color:var(--color-text-body); word-break:break-word;
  }
  .nav__mail:hover{ color:var(--color-primary); }

  .nav__social{ display:flex; justify-content:center; margin-top:16px; gap:10px; }
  .nav__social a{
    width:44px; height:44px; border-radius:var(--radius-full);
    background:var(--color-primary-dark); color:#fff;
    transition:background var(--transition),transform var(--transition);
  }
  .nav__social a:hover{ background:var(--color-primary); transform:translateY(-2px); }
  .nav__social svg{ width:19px; height:19px; }

  .header__wpp{ padding-left:14px; padding-right:14px; }

  /* Hero */
  .hero__grid{ grid-template-columns:1fr; gap:var(--space-7); }
  /* Empilhado, o recuo do topo viraria só espaço morto acima do título */
  .hero__content{ max-width:640px; padding-top:0; }
  .hero__title{ max-width:20ch; }
  .hero__visual{ max-width:340px; }

  /* Split */
  .split{ grid-template-columns:1fr; gap:var(--space-7); }
  .split--reverse .split__media{ order:0; }
  .split__media{ max-width:560px; width:100%; margin-inline:auto; }
  .media-offset::before{ inset:18px -18px -18px 18px; }
  .media-offset--right::before{ inset:18px 18px -18px -18px; }
  /* Centralizado e um pouco menor: em coluna única o quadrado cheio de 560px
     empurraria as estatísticas para muito abaixo da dobra */
  .about-media{ max-width:320px; }

  /* Grids */
  .entry__grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin-top:-72px; }
  /* Em coluna única o card manteria a largura do container e ficaria com a
     linha de texto longa demais — segura na mesma medida do card do desktop */
  .seg-grid{ grid-template-columns:1fr; max-width:520px; }
  /* Recuo inferior cai para 80px — o corte da faixa navy acompanha */
  .section--navy{ --cut:210px; }
  .contact{ grid-template-columns:1fr; gap:var(--space-6); }
  /* Empilhado não há formulário ao lado para acompanhar: a arte deixa de
     esticar, volta ao tamanho natural e centraliza na coluna */
  .contact__art{ flex:none; min-height:0; margin-inline:auto; max-width:400px; width:100%; }
  .contact__art img{ height:auto; }
  .partners{ grid-template-columns:repeat(2,1fr); }
  /* Em ~480px por coluna as perguntas quebrariam em três linhas: volta à
     coluna única, na medida de leitura */
  .faq{ grid-template-columns:1fr; }
  .faq-wrap{ max-width:760px; }
  /* Empilhado o cabeçalho vira abertura da seção; a arte sai da coluna e passa
     a centralizada, senão ficaria encostada na margem esquerda sob o texto */
  .spec__inner{ grid-template-columns:1fr; gap:var(--space-6); }
  .spec__head{ max-width:720px; }
  .spec__art{ margin-inline:auto; max-width:460px; }

  /* Empilhado: a foto vira abertura da seção e os quatro cartões seguem
     lado a lado, que ainda cabem na largura do tablet */
  .perks{ grid-template-columns:1fr; gap:var(--space-6); }
  /* Empilhada, a foto volta a ter proporção própria — sem coluna ao lado não
     há altura para acompanhar */
  .perks__media{ max-width:520px; width:100%; margin-inline:auto; min-height:0; }
  .perks__media img{ height:auto; aspect-ratio:4/3.2; }
  /* A ilustração já traz a própria proporção — forçar 4/3.2 só sobraria vão */
  .perks__media--art img{ aspect-ratio:auto; }
  .perks__stats{ padding:24px var(--space-4); }
  .perks__stats strong{ font-size:2.125rem; }

  /* Sem folga lateral para as setas: elas descem para a linha dos pontos */
  .carousel{ grid-template-columns:auto 1fr auto; column-gap:14px; row-gap:var(--space-5); }
  .carousel__viewport{ grid-column:1 / -1; }
  .cbtn--prev{ grid-column:1; grid-row:2; justify-self:end; }
  .cbtn--next{ grid-column:3; grid-row:2; justify-self:start; }
  .carousel__dots{ grid-column:2; grid-row:2; margin-top:0; align-self:center; }
  .carousel__track{ grid-auto-columns:calc((100% - var(--space-4)) / 2); gap:var(--space-4); }

  /* No tablet as duas colunas ficam estreitas demais para a ilustração e a
     linha do tempo conviverem: viram um bloco só, com a arte em cima */
  .journey__tabs{ gap:8px 28px; }
  .journey__panel{ grid-template-columns:1fr; gap:var(--space-6); padding-top:var(--space-6); }
  .journey__art img{ max-width:360px; }

  .topbar__item--hours{ display:none; }
  .social-card{ padding:28px 32px; }
}

@media (max-width:767px){
  :root{
    --fs-h1:2rem; --fs-h2:1.75rem; --fs-h2-sm:1.5rem; --fs-h3:1.25rem; --fs-h4:1.0625rem;
    --fs-lg:1rem; --space-10:64px; --space-9:56px; --space-8:48px;
  }
  .container{ padding-inline:20px; }

  /* No celular a topbar só empurrava o banner para baixo: telefone e redes
     passam a viver no drawer, no rodapé e no botão flutuante do WhatsApp.
     O "FALE CONOSCO" sai junto — o botão flutuante já cobre a mesma ação. */
  .topbar{ display:none; }
  .header__wpp{ display:none; }

  /* O cabeçalho não encolhe ao rolar no celular: a altura aqui já é a
     mínima e a animação só fazia logotipo e menu tremerem durante a
     rolagem por toque. O is-stuck continua vindo do JS, mas no celular
     ele só reforça a sombra — as medidas repetem as do topo da página. */
  .header__inner,
  .header.is-stuck .header__inner{ height:68px; gap:12px; }
  .brand__logo,
  .header.is-stuck .brand__logo{ width:140px; height:43px; }
  .brand__logo img,
  .header.is-stuck .brand__logo img{ width:264px; height:264px; left:-62px; top:-111px; }

  /* No celular a ordem se inverte: a foto abre o banner e o texto fecha
     embaixo dela, centralizado. Empilhado com o título em cima, a modelo
     começava só no fim da primeira dobra — quem abre o site via o topo do
     banner vazio. O recuo inferior de 60px é o que sobra de navy embaixo do
     texto para os cartões de entrada subirem (margin-top:-48px logo abaixo). */
  /* Sem recuo no topo: os ~18px de fundo transparente acima do cabelo já
     fazem o papel da folga contra o cabeçalho branco. O que sobra de navy
     vai todo para baixo do texto, que é onde os cartões sobem. */
  .hero{ padding-block:0 68px; }
  .hero__grid{ gap:var(--space-3); }
  /* 185px deixava a modelo ocupando pouco mais da metade da largura útil,
     com duas faixas de navy vazio nas laterais — o que dava ao banner o ar
     de peça solta. 214px é o ponto em que a foto vira o assunto da dobra
     sem empurrar o título para fora da primeira tela em telas de 640px. */
  .hero__visual{ order:-1; max-width:214px; }
  /* O texto sobe por dentro da base da foto: aqueles ~90px finais são só o
     esmaecimento do PNG (navy quase puro), então valiam altura sem mostrar
     nada. O recuo negativo é menor que a faixa esmaecida de propósito — o
     título nunca encosta na parte nítida da modelo. */
  .hero__content{ margin-top:-44px; position:relative; z-index:2; }
  /* 1/1.28 cortava 14,7% do topo do arquivo — dentro dos 15,75% de fundo
     transparente na teoria, mas sobrava só ~3px acima do cabelo e a foto
     lia como cortada. Voltando a 1/1.36 sobram ~18px de folga; a altura que
     isso custa sai da largura da foto e do recuo do texto. */
  .hero__figure{ aspect-ratio:1/1.36; }
  .hero__content{ text-align:center; }
  /* Título curto: cabe uma escala maior que a do desktop, medida para
     "Contabilidade que cuida" fechar em uma linha só a partir de 390px.
     O balance segura o resto em telas menores, sem deixar palavra órfã. */
  .hero__title{
    max-width:none; font-size:calc(var(--fs-h1) * .9375); line-height:1.14;
    text-wrap:balance;
  }
  .hero__title-full,
  .hero__lead--full{ display:none; }
  .hero__title-sm{ display:block; }
  .hero__lead--sm{ display:block; margin-inline:auto; }
  /* O degradê e o quadriculado do desktop estão calculados para uma faixa
     larga e deitada: no retrato do celular viravam uma mancha torta e o
     banner ficou chapado por um tempo — só que navy sólido atrás de uma
     foto pequena lê como fundo esquecido, sem a profundidade que a mesma
     dobra tem no desktop. A composição abaixo é a mesma ideia refeita no
     eixo vertical: navy clareando de baixo para cima (a foto ganha ar sob
     o cabeçalho branco e o navy fecha fundo onde os cartões sobem), o halo
     azul da marca centrado atrás da modelo e o verde de acento só como
     sopro no canto inferior. */
  .hero__bg{
    background:
      radial-gradient(440px 400px at 50% 28%,rgba(60,84,208,.34),transparent 72%),
      radial-gradient(320px 260px at 2% 96%,rgba(18,161,80,.13),transparent 68%),
      linear-gradient(180deg,#0A1244 0%,#050A33 44%,var(--color-primary-dark) 100%);
  }
  /* Quadriculado de volta, mas em 32px (contra 56px) e recortado num oval
     estreito atrás da foto: na largura do celular a malha larga aparecia
     grossa e cortada pela borda; nesta escala ela só dá textura ao fundo
     imediato da modelo e some antes de chegar ao texto. */
  .hero__bg::after{
    background-size:32px 32px;
    mask-image:radial-gradient(300px 380px at 50% 26%,#000,transparent 76%);
    -webkit-mask-image:radial-gradient(300px 380px at 50% 26%,#000,transparent 76%);
  }
  /* O halo continua sendo o que separa o blazer navy do fundo — sobre o
     degradê ele volta ao papel de segundo nível, mais concentrado na
     silhueta e menos como iluminação geral do banner. */
  .hero__spot{
    width:152%; aspect-ratio:1/1.04; bottom:-2%;
    background:radial-gradient(closest-side,
      rgba(132,158,255,.34) 0%,
      rgba(120,146,250,.15) 52%,
      transparent 88%);
  }
  /* Sem os cartões logo abaixo para esconder a base do PNG (agora é o título
     que vem depois), o corte na cintura precisa dissolver bem antes do fim
     da foto — daí a faixa de esmaecimento bem mais longa que os 6% do desktop. */
  .hero__figure img{
    mask-image:linear-gradient(to top,transparent 0,#000 38%);
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 38%);
  }

  /* Os quatro cartões viram carrossel: um por vez, arrastando, com os pontos
     abaixo como única navegação (sem setas). Empilhados eles ocupavam quase
     três telas antes da primeira seção de conteúdo. */
  .entry__grid{
    grid-template-columns:none; grid-auto-flow:column;
    --bleed:20px;
    /* Um cartão por tela, sem o seguinte espiando: a coluna mede a tela
       menos os dois recuos de 20px, então o cartão fica exatamente sobre a
       caixa de conteúdo da página — centralizado por consequência, com a
       mesma margem à esquerda e à direita. O trecho do próximo cartão que
       aparecia antes servia de dica de arrasto, papel que os pontos abaixo
       já cumprem sozinhos. */
    grid-auto-columns:calc(100vw - var(--bleed) * 2);
    /* O vão precisa ser maior que a sangria: o trilho é recortado na largura
       da tela inteira, então com os 16px de antes sobrava uma tira de 4px do
       cartão seguinte encostada na borda direita. Em 32px o vizinho para
       12px fora da tela — com folga para a sombra, que se espalha ~2px na
       horizontal (as camadas longas têm spread negativo). */
    gap:var(--space-5);
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-x:contain; scrollbar-width:none;
    /* O recuo lateral vale o padding do container: o trilho sangra até as
       bordas da tela (margem negativa) para a sombra de cada cartão caber
       fora da caixa de conteúdo sem ser recortada, mas o cartão continua
       alinhado com o resto da página. Iguais dos dois lados, os recuos são
       também o que dá curso ao último cartão para encostar no início do
       snapport — antes o do fim precisava ser maior porque o do início não
       cobria a largura que sobrava do cartão espiando. */
    scroll-padding-inline:var(--bleed);
    /* O rodapé de 28px é o que a sombra em camadas precisa para terminar
       dentro do trilho: com 26px ela batia na borda de recorte e o card
       ficava com um corte reto de cinza embaixo. Mesmo valor do trilho de
       avaliações, que usa a mesma sombra. */
    padding:10px var(--bleed) 28px;
    /* -58px = os -48px de sobreposição no banner + os 10px de padding que
       deixam a sombra do topo dos cartões aparecer apesar do recorte */
    margin:-58px calc(var(--bleed) * -1) -28px;
  }
  .entry__grid::-webkit-scrollbar{ display:none; }
  /* snap-stop:always trava o arrasto no cartão seguinte: sem ele um gesto
     rápido passa por cima de vários pontos de encaixe e pula do primeiro
     cartão para o último. */
  /* Sombra em camadas no lugar do borrão único de 36px do desktop: num card
     de ~300px aquela camada só espalhava um véu cinza pelas laterais em vez
     de apoiar o cartão. É a mesma sombra dos cartões de avaliação. */
  .entry-card{
    padding:26px 22px; scroll-snap-align:start; scroll-snap-stop:always;
    box-shadow:var(--shadow-card);
  }
  /* A animação de entrada é vertical e observa o viewport: no trilho os três
     cartões seguintes ficam fora da tela na horizontal, então só apareceriam
     no meio do arrasto, um a um. No celular eles entram já visíveis. */
  .entry-card[data-reveal]{ opacity:1; transform:none; }
  .entry__dots{ display:flex; }
  .seg-card{ padding:28px 22px 26px; }
  /* Recuo de 64px + 110 de card para fora da faixa */
  .section--navy{ --cut:174px; }
  /* Empilhada, a ilustração só empurra a lista para baixo: ela repete o que o
     título já diz e, na largura do celular, custa quase uma dobra inteira
     entre o cabeçalho e o primeiro item. Sai do fluxo no celular. */
  .spec__art{ display:none; }
  /* Sem a arte fechando a coluna, o vão de 40px entre cabeçalho e lista virava
     um buraco branco: 32px bastam para separar o link do primeiro item. */
  .spec__inner{ gap:var(--space-5); }
  /* O teto de 42ch foi medido para a coluna estreita do desktop; no celular a
     linha já é mais curta que isso e o limite só criava quebra torta. */
  .spec__head .lead{ max-width:none; }
  .spec__head .h2{ text-wrap:balance; }
  /* Ícone de volta ao lado do texto, na medida do .flow__step: empilhado ele
     custava ~54px por item e, em seis frentes, quase uma dobra de rolagem só
     de espaço vazio. Com 40px + 14px de gap ainda sobram ~40 caracteres por
     linha num aparelho de 360px, que é a medida de leitura do resto do site. */
  .spec-item{ grid-template-columns:auto minmax(0,1fr); gap:14px; padding-block:var(--space-4); }
  .spec-item__ico{ width:40px; height:40px; border-radius:var(--radius-md); }
  .spec-item__ico svg{ width:20px; height:20px; }
  /* O ícone alinha pela primeira linha do título, não pelo topo da caixa */
  .spec-item__body{ padding-top:2px; }
  /* Alvo de toque: o link tinha só a altura da linha de texto */
  .spec__head .link-arrow{ padding-block:6px; }

  .perks__grid{ grid-template-columns:1fr; }
  .perk{ padding:24px 22px; }
  /* O selo acompanha a largura da foto — em telas estreitas, sair da caixa
     jogaria o cartão para fora do painel */
  .perks__badge{ left:10px; right:10px; bottom:14px; padding:10px 14px; }
  .perks__stats{ grid-template-columns:1fr; gap:var(--space-3); padding:24px 20px; }
  .perks__stats strong{ font-size:2rem; }
  /* Empilhados, os CTAs ocupam a largura toda em vez de flutuar soltos ao centro */
  .btn-row--center{ flex-direction:column; }
  .btn-row--center .btn{ width:100%; }
  /* No celular a ilustração só empurrava o formulário para baixo de mais uma
     rolagem inteira — quem chega aqui já decidiu falar com a gente */
  .contact__art{ display:none; }
  /* Sem o cartão: em coluna única a moldura branca sobre o fundo mist só
     estreitava os campos com 22px de cada lado. Os campos vão direto na tela. */
  .form{
    background:none; border:0; border-radius:0; box-shadow:none; padding:0;
  }
  .contact{ gap:var(--space-5); }
  .field-row{ grid-template-columns:1fr; gap:var(--space-4); }

  /* Ainda duas colunas, mas estreitas: a fonte menor rende mais palavras
     por linha e segura a avaliação mais longa em 6 */
  .carousel{ row-gap:var(--space-4); }
  .review__text{ --review-lines:6; }
  .cbtn{ width:44px; height:44px; }

  .marquee__track{ animation-duration:34s; }
  .marquee__track li{ margin-right:16px; width:132px; height:88px; padding:12px; }
  .marquee__track img{ max-height:56px; }
  #clientes{ padding-block:var(--space-6); }
  #clientes .section-head{ margin-bottom:var(--space-4); }
  #clientes .marquee__track li{ height:68px; padding:6px 12px; }
  #clientes .marquee__track img{ max-height:48px; }
  .partners li{ min-height:104px; padding:18px; }
  .partners img{ max-height:48px; }

  .media-badge{ left:10px; bottom:12px; padding:10px 14px; }
  .media-badge__ico{ width:34px; height:34px; }

  /* No celular as três abas não cabem lado a lado: viram uma pilha alinhada à
     esquerda, com o traço da ativa virando barra vertical */
  .journey__tabs{
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:0; border-left:1px solid rgba(255,255,255,.18);
  }
  .journey__tab{
    width:100%; text-align:left; padding:11px 0 11px 16px; margin:0 0 0 -1px;
    border-bottom:0; border-left:2px solid transparent;
  }
  .journey__tab[aria-selected="true"]{ border-bottom-color:transparent; border-left-color:var(--color-accent); }
  .journey__panel{ gap:var(--space-5); padding-top:var(--space-5); }
  /* No celular a ilustração só empurra a linha do tempo para baixo sem
     acrescentar informação: sai da página */
  .journey__art{ display:none; }

  .flow__step{ column-gap:16px; padding-bottom:var(--space-4); }
  .flow__step:not(:last-child)::before{ left:18px; top:44px; }
  .flow__n{ width:38px; height:38px; font-size:var(--fs-base); }
  .flow__body{ padding-top:7px; }

  /* Empilhados, os CTAs ocupam a largura toda em vez de flutuar centralizados */
  .journey__cta{ flex-direction:column; align-items:stretch; }

  /* Empilhado em tela estreita o cartão vira um bloco simétrico: título, texto
     e ícones centrados no mesmo eixo. Alinhado à esquerda, a fileira curta de
     ícones deixava um vazio grande à direita e o cartão lia torto */
  .social-card{
    --card-lift:-40px; margin-bottom:var(--space-2); padding:28px 22px;
    flex-direction:column; align-items:center; gap:20px; text-align:center;
  }
  /* Duas linhas equilibradas em vez de uma palavra órfã na segunda */
  .social-card h2{ text-wrap:balance; }
  .social-card p{ max-width:34ch; margin-inline:auto; }
  /* Grupo compacto e centrado; os quadrados encolhem junto com a tela para não
     espremer o padding do cartão nos aparelhos de 320px */
  .social-card .social--lg{ justify-content:center; gap:clamp(10px,3.2vw,14px); }
  .social--lg a{ width:clamp(46px,13.5vw,52px); height:clamp(46px,13.5vw,52px); }
  .social--lg svg{ width:clamp(22px,6.4vw,24px); height:clamp(22px,6.4vw,24px); }
  .footer__grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; text-align:left; }

  .wpp-float{ width:54px; height:54px; right:16px; bottom:16px; }
  .wpp-float svg{ width:27px; height:27px; }
}

/* Um cartão por vez. A coluna é limitada porque, solta, ela viraria uma
   faixa de ~550px de largura com três linhas de texto e duas vazias — o
   teto mantém o cartão na mesma proporção de 480px até 639px */
@media (max-width:639px){
  /* Círculo menor deixaria as pílulas sangrando além da margem do container:
     alinha na borda esquerda e encolhe o texto */
  .about-cards{ left:0; bottom:-2%; max-width:100%; }
  .about-card--name{ padding:8px 18px; font-size:var(--fs-lg); }
  .about-card--role{ padding:7px 18px; font-size:var(--fs-xs); }

  /* Sem margem automática: o cartão acompanha a margem esquerda do título,
     que é alinhado à esquerda nesta seção. Uma coluna só porque as setas
     saem de cena aqui e sobra apenas a fileira de pontos na linha 2 */
  .carousel{ max-width:460px; grid-template-columns:minmax(0,1fr); column-gap:0; }
  /* No celular a navegação fica só nos pontos: arrastar já é o gesto natural
     e as setas roubavam largura de um cartão que precisa dela inteira */
  .cbtn{ display:none; }
  /* Sem isto os pontos herdariam a coluna 2 da regra de tablet e criariam
     uma coluna implícita à direita, saindo do centro */
  .carousel__dots{ grid-column:1; grid-row:2; }

  /* Um cartão por vez ocupando a viewport inteira: em tela estreita a borda
     do cartão seguinte lê como cartão cortado, não como "tem mais ao lado" */
  .carousel__track{ grid-auto-columns:100%; }
  /* Cada arrasto para no cartão seguinte — sem o always, um gesto mais forte
     passa direto por dois ou três de uma vez */
  .review{ scroll-snap-stop:always; }
  .review__text{ --review-lines:5; }
}

/* Celular estreito: sobram ~37 caracteres por linha e a avaliação mais
   longa precisa de uma linha a mais para não ser cortada */
@media (max-width:430px){
  .review__text{ --review-lines:6; }

  /* Cada pixel devolvido à coluna de texto vale uma palavra por linha nas
     descrições das especialidades, que são as mais longas da página */
  .spec-item{ gap:12px; }
  .spec-item__ico{ width:36px; height:36px; }
  .spec-item__ico svg{ width:19px; height:19px; }

  /* Cartão de redes: o padding lateral é o que sobra entre o primeiro e o
     último ícone e a borda — devolvê-lo à fileira mantém os quatro no mesmo
     tamanho até 320px */
  .social-card{ padding:22px 18px; }
}

/* ============================================================
   ACESSIBILIDADE — MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .marquee__track{ animation:none; transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .carousel__track{ scroll-behavior:auto; }
}

/* ============================================================
   IMPRESSÃO
   ============================================================ */
@media print{
  .header,.topbar,.wpp-float,.nav,.marquee{ display:none !important; }
  .section{ padding-block:24px; }
  body{ color:#000; }
}