/* ===== base ===== */
/* ============================================================
   LP TI/DEV — Topo (Comparador Dev) — Contabilizei
   _base.css — reset, tokens, grid, botões, modal
   (o style.css final = este arquivo + o CSS de cada dobra)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Navy / tema dark da página */
  --navy-900: #041124;   /* fundo base da página */
  --navy-800: #041329;
  --navy-700: #081838;   /* cards escuros */
  --navy-600: #0A1E47;
  --navy-500: #2B3C60;

  /* Marca */
  --ciano: #04F7F7;
  --ciano-hover: #00D9D9;
  --azul: #0E53C0;
  --azul-hover: #093CA3;
  --azul-office: #002868;

  /* Texto sobre dark */
  --txt-title: #FFFFFF;
  --txt-body: #CCD4E8;
  --txt-caption: #B0B9D1;
  --txt-muted: #8FA3CC;
  --txt-dark: #0E1829;   /* texto sobre o ciano */
  --accent-100: #C9E0FF; /* corpo de texto dentro de cards escuros */

  /* Feedback */
  --sucesso: #128243;
  --erro: #DF1642;
  --alerta: #CF972D;

  /* Glass */
  --glass-fill: rgba(255, 255, 255, .05);
  --glass-stroke: rgba(255, 255, 255, .16);

  /* Grid */
  --container: 1200px;
  --gutter: 24px;   /* o Figma mobile usa 24; barra e footer têm o seu próprio 16 */

  /* Raio padrão da página (regra do stakeholder: 16px em tudo) */
  --radius: 16px;

  /* Camadas */
  --z-header: 1045;
  --z-barra: 1050;
  --z-modal: 1100;
}

@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy-900, #041124);
  color: var(--txt-body, #CCD4E8);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
main { display: block; }

:focus-visible {
  outline: 2px solid var(--ciano, #04F7F7);
  outline-offset: 2px;
}

body.has-modal, body.has-drawer { overflow: hidden; }

/* A barra sticky é fixed no rodapé. Sem esta folga ela cobre para sempre o fim
   do footer (CRC, responsável técnico e o link File for LLMs) quando a página
   chega ao fim. A altura acompanha a da própria barra: 80 no desktop, 72 no mobile. */
body { padding-bottom: 80px; }
@media (max-width: 767px) { body { padding-bottom: 72px; } }

/* Âncoras (#quiz, #hero…) param abaixo do header sticky: 76 no desktop, 64 no mobile. */
section[id], main [id] { scroll-margin-top: 76px; }
@media (max-width: 767px) { section[id], main [id] { scroll-margin-top: 64px; } }

/* O scroll que o browser faz ao mover o foco por Tab encosta o elemento no fundo
   da viewport, onde a barra fixa o cobre. Medido: 11 paradas escondidas no
   mobile, incluindo o "Continuar" da etapa 1. */
html { scroll-padding-top: 76px; scroll-padding-bottom: 80px; }
@media (max-width: 767px) { html { scroll-padding-top: 64px; scroll-padding-bottom: 72px; } }

/* ---------- Grid ---------- */
.container {
  width: 100%;
  max-width: var(--container, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter, 16px);
  padding-right: var(--gutter, 16px);
}

@media (min-width: 1280px) {
  /* no desktop o conteúdo tem exatamente 1200px, como no Figma (x=360 em 1920) */
  .container { padding-left: 0; padding-right: 0; }
}

/* ---------- Palavra-chave em destaque (ciano itálico) ---------- */
.kw {
  color: var(--ciano, #04F7F7);
  font-style: italic;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn--cyan {
  background: var(--ciano, #04F7F7);
  color: var(--azul-office, #002868);
}
.btn--cyan:hover { background: var(--ciano-hover, #00D9D9); }

.btn--ghost {
  background: transparent;
  color: var(--txt-title, #FFFFFF);
  border: 1px solid #FFFFFF;
  font-weight: 700;
}
.btn--ghost:hover { border-color: var(--ciano, #04F7F7); color: var(--ciano, #04F7F7); }

.btn--blue {
  background: var(--azul, #0E53C0);
  color: #FFFFFF;
}
.btn--blue:hover { background: var(--azul-hover, #093CA3); }

.btn--outline-cyan {
  background: rgba(255, 255, 255, .04);
  color: var(--ciano, #04F7F7);
  border: 1px solid var(--ciano, #04F7F7);
  font-weight: 700;
}
.btn--outline-cyan:hover { background: rgba(4, 247, 247, .12); }

.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Campos de formulário (modal e calculadora) ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--txt-caption, #B0B9D1);
}

.field__input {
  height: 56px;
  padding: 0 16px;
  border-radius: var(--radius, 16px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, .16));
  color: var(--txt-title, #FFFFFF);
  font-size: 16px;
  transition: border-color .2s ease, background-color .2s ease;
  width: 100%;
}
.field__input::placeholder { color: rgba(176, 185, 209, .6); }
.field__input:focus { outline: none; border-color: var(--ciano, #04F7F7); }
/* Autofill: a regra genérica `input:-webkit-autofill` (mais abaixo neste
   arquivo) já cobre cor de texto e o inset navy-900 — aqui o input TEM fundo
   e borda próprios, então o inset sólido é o comportamento certo. */

.field__error {
  font-size: 13px;
  color: var(--erro, #DF1642);
  min-height: 0;
}
.field.is-invalid .field__input { border-color: var(--erro, #DF1642); }

/* ---------- Modal "Falar com um contador" ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter, 16px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal.is-open { opacity: 1; }

/* O atributo hidden do HTML vale menos que qualquer regra de display no CSS.
   Sem isto o modal fica invisível (opacity 0) mas continua ocupando a tela
   inteira e engolindo TODO clique da página — a calculadora fica inerte. */
/* O atributo hidden do HTML tem menos peso que QUALQUER regra de display no
   CSS. Nesta página isso já mordeu duas vezes: o modal inteiro ficava invisível
   mas engolindo todo clique, e depois o formulário do modal continuava na tela
   depois do sucesso — dava para reenviar e gerar lead duplicado. A regra geral
   mata a classe do problema em vez de remendar caso a caso.
   Conferido antes de entrar: só três elementos usam hidden nesta página
   (.modal, .modal__success, .calc__tip) e nenhum precisa aparecer com ele. */
[hidden] { display: none !important; }

/* Figma: #041124 a 72%, sem desfoque. */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 36, .72);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px;
  border-radius: var(--radius, 16px);
  background: var(--navy-700, #081838);
  border: 1px solid rgba(255, 255, 255, .10);   /* Figma: branco 10% */
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  transform: translateY(8px);
  transition: transform .2s ease;
}
.modal.is-open .modal__dialog { transform: translateY(0); }

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--txt-caption, #B0B9D1);
  font-size: 20px;
  line-height: 1;
}
.modal__close:hover { color: var(--txt-title, #FFFFFF); background: rgba(255, 255, 255, .06); }

.modal__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--txt-title, #FFFFFF);
  margin-bottom: 8px;
  padding-right: 32px;
}

.modal__sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt-caption, #B0B9D1);
  margin-bottom: 24px;
}

.modal__form { display: flex; flex-direction: column; gap: 16px; }
.modal__form .btn { width: 100%; margin-top: 8px; }

.modal__micro {
  font-size: 12px;
  line-height: 1.4;
  color: var(--txt-muted, #8FA3CC);
  text-align: center;
}

.modal__success { text-align: center; }
.modal__success-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--txt-title, #FFFFFF);
  margin-bottom: 8px;
}
.modal__success-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt-caption, #B0B9D1);
}

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--ciano, #04F7F7);
  color: var(--txt-dark, #0E1829);
  font-weight: 600;
  border-radius: 0 0 var(--radius, 16px) 0;
}
.skip-link:focus { left: 0; }

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

/* O seletor universal tem especificidade 0: sem !important ele perdia para
   qualquer .classe que usasse o atalho `transition`, e .cmp__node, .btn--cyan e
   o diálogo do modal continuavam animando com reduced-motion ligado. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Autofill do navegador ---------- */
/* O Chrome pinta o campo preenchido de azul claro com texto escuro, numa
   camada que background-color não alcança. O box-shadow inset cobre essa
   camada com a cor do tema e a transição longa impede que ela reapareça. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--txt-title, #FFFFFF);
  -webkit-box-shadow: 0 0 0 1000px var(--navy-900, #041124) inset;
  box-shadow: 0 0 0 1000px var(--navy-900, #041124) inset;
  caret-color: var(--ciano, #04F7F7);
  transition: background-color 100000s ease-in-out 0s;
}

/* no comparador o campo é underline sobre o card glass: o inset usaria uma cor
   sólida e criaria um retângulo. Aqui só o texto e o cursor são corrigidos. */
.s-quiz input:-webkit-autofill,
.s-quiz input:-webkit-autofill:hover,
.s-quiz input:-webkit-autofill:focus,
.s-quiz input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--txt-title, #FFFFFF);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* ==========================================================================
   Movimento — primitivas compartilhadas
   ==========================================================================
   Três primitivas, usadas pelas dobras via atributo:

     [data-float]  peça que flutua de leve, sem parar
     [data-zoom]   imagem que se aproxima quando o mouse entra no card
     [data-reveal] elemento que entra quando a dobra chega na tela

   Todas escrevem em `translate`, `scale` e `opacity` — nunca em `transform`.
   Metade dos elementos animados aqui já tem um transform vindo do Figma
   (rotações de -2°, o espelhamento dos pilares, o recorte do hero); escrever
   transform num keyframe apagaria esse valor e desmontaria a composição.
   As propriedades individuais compõem com transform em vez de substituí-lo.

   Todas também têm a posição do Figma como estado de repouso E como quadro
   inicial e final. Congelada em qualquer ponto de borda — que é o que o QA
   pixel a pixel faz antes de cada screenshot — a peça está exatamente onde o
   design a colocou.
   ========================================================================== */

/* ---------- 1. Flutuação ---------- */
/* Vale para as peças sobrepostas aos mockups: o toast de CNPJ criado, a barra
   do DAS, os balões de conversa. Elas são "papéis soltos" acima da foto, e a
   respiração lenta é o que vende isso.

   O giro entra junto com a subida: um cartão que sobe reto lê como elemento
   deslizando num trilho; o mesmo cartão inclinando meio grau no topo do curso
   lê como papel solto no ar. É o giro que faz o movimento ser percebido sem
   precisar de amplitude grande. Ele vai na propriedade `rotate`, que se soma à
   rotação de -2° que essas peças já trazem do Figma em `transform` — não a
   substitui. */
@keyframes flutua {
  0%, 100% { translate: 0 0;                        rotate: 0deg; }
  50%      { translate: 0 var(--float-amp, -10px);  rotate: var(--float-giro, 0deg); }
}

[data-float] {
  animation: flutua var(--float-dur, 7s) ease-in-out infinite;
  /* atraso negativo: entra já no meio do ciclo, então as peças de um mesmo
     card nunca sobem juntas. Sob o congelamento do QA o atraso vira 0 e todas
     voltam para o quadro 0%, que é a posição do Figma. */
  animation-delay: var(--float-fase, 0s);
  will-change: translate;
}

/* ---------- 2. Zoom no hover ---------- */
/* A imagem se aproxima; a moldura fica parada. Quem recorta é o card, que já
   tem overflow: hidden — o excedente some na borda em vez de vazar.
   `transform-origin` é declarado dobra a dobra: as fotos são maiores que o
   card e posicionadas por recorte, então o centro da foto não é o centro do
   que se vê. Sem a origem certa, o hover desloca o enquadramento em vez de
   aproximá-lo. */
[data-zoom] {
  transition: scale .55s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  [data-zoom-host]:hover [data-zoom] { scale: var(--zoom, 1.045); }
}

/* ---------- 3. Entrada ---------- */
/* A regra que manda aqui: NÃO EXISTE estado escondido na folha de estilo.
   O repouso de cada peça continua sendo só o que a dobra declara — o Figma.
   O estado "antes" mora em duas classes que o JS escreve e o próprio JS apaga.

   Três consequências, e as três são o motivo de ser assim:

   1. Sem JS, ou com o JS quebrado, a página é a de hoje, inteira. Um
      `[data-reveal] { opacity: 0 }` na base deixaria a página em branco nesse
      cenário — é a armadilha clássica deste tipo de motor.
   2. Elemento que o observer nunca alcança fica visível. E esta página tem
      sete lugares assim: .pilares__col, .contador__left, .contador__header e
      .faq__card viram `display: contents` no mobile; .cnpj__cta e
      .footer__desktop viram `display: none`; e as variantes --desktop/--mobile
      do contador se revezam. Nenhum deles pode depender do motor para existir.
   3. O congelamento do QA não tem seletor em que pegar. Nenhuma linha nova
      precisa ser combinada entre o motor e o harness.

   A transição mora no estado SOLTO, nunca no ARMADO. Se estivesse no armado,
   o ato de armar seria ele próprio um fade de meio segundo — e quando o motor
   soltasse, meio quadro depois, a opacidade ainda estaria perto de 1 e a
   entrada não andaria nada. */

[data-reveal].entra--armado {
  opacity: 0;
  translate: 0 var(--entra-dy, 18px);
}

[data-reveal].entra--solto {
  opacity: 1;
  translate: none;
  transition:
    opacity  var(--entra-dur, .62s) var(--entra-ease, cubic-bezier(.22, .61, .36, 1)) var(--entra-delay, 0s),
    translate var(--entra-dur, .62s) var(--entra-ease, cubic-bezier(.22, .61, .36, 1)) var(--entra-delay, 0s);
}

/* Três dos alvos de entrada são .btn, e .btn declara
   `transition: background-color .2s, color .2s, border-color .2s, transform .2s`.
   O shorthand de .entra--solto substituiria essa lista pelos 1,6s em que a
   classe fica no elemento — o botão perderia o hover animado justamente no
   instante em que a pessoa chega nele. Aqui a lista é reescrita somando as
   duas coisas. Sem `transform`: a entrada usa `translate`, e o transform do
   .btn continua valendo sozinho. */
.btn[data-reveal].entra--solto {
  transition:
    opacity   var(--entra-dur, .62s) var(--entra-ease, cubic-bezier(.22, .61, .36, 1)) var(--entra-delay, 0s),
    translate var(--entra-dur, .62s) var(--entra-ease, cubic-bezier(.22, .61, .36, 1)) var(--entra-delay, 0s),
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

/* Variante "sobe": só o deslocamento, sem fade. É para quem tem
   backdrop-filter dentro — opacity num ancestral refaz a raiz do desfoque e o
   vidro deixa de amostrar a página durante o voo. */
[data-reveal="sobe"].entra--armado { opacity: 1; }

/* Variante "risca": o fio ciano de 2px se desenha do meio para as pontas.
   Custa quase nada (2px de altura) e é o gesto mais da marca que a página tem. */
[data-reveal="risca"].entra--armado { opacity: 1; translate: none; scale: 0 1; }
[data-reveal="risca"].entra--solto {
  scale: none;
  transition: scale var(--entra-dur, .9s) cubic-bezier(.16, 1, .3, 1) var(--entra-delay, 0s);
}

/* Variante "surge": fade puro, sem deslocar. Para blocos altos e densos, onde
   deslocar 18px de texto pequeno lê como tremida. */
[data-reveal="surge"].entra--armado { translate: none; }

/* ---------- Menos movimento ---------- */
/* Quem pediu menos movimento no sistema recebe a página parada, no lugar
   exato do Figma. Nada aqui carrega informação que só o movimento dá. */
@media (prefers-reduced-motion: reduce) {
  [data-float] { animation: none; }
  [data-zoom]  { transition: none; }
  /* o motor de entrada nem chega a armar nesse caso (ver initEntradas), mas a
     regra fica como segunda linha, caso a preferência mude com a página aberta */
  [data-reveal].entra--armado { opacity: 1; translate: none; scale: none; }
  [data-reveal].entra--solto  { transition: none; }
  @media (hover: hover) and (pointer: fine) {
    [data-zoom-host]:hover [data-zoom] { scale: none; }
  }
}

/* ==========================================================================
   sec-line — o fio que separa as dobras
   ==========================================================================
   Frame "sec-line" do Figma: 1920x2, gradiente horizontal do ciano com as
   duas pontas transparentes e opacidade cheia no meio. Existe em três pontos
   do desktop: no topo da calculadora, na base dela e no topo do rodapé.
   O frame mobile não tem nenhum — some abaixo de 768px.

   É full-bleed: a largura é a da dobra, não a do container de 1200. */
.secline {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 247, 247, 0) 0%,
    #04f7f7 50%,
    rgba(4, 247, 247, 0) 100%
  );
}

.secline--topo { top: 0; }
.secline--base { bottom: 0; }

@media (max-width: 767px) {
  .secline { display: none; }
}

/* ===== header ===== */
/* ===== Header (menu) — modelo novo =====
   Figma: desktop 14296:2644 (frame "Content", 1200x76, dentro do frame 1920)
          mobile  14256:580  (instância "Header", 390x64)
   O menu foi enxugado: só "Planos", "Sobre nós" e o CTA "Abrir CNPJ grátis".
   Não há mais dropdowns (Serviços / Conteúdos / Login). */

.s-header {
  /* o frame "Content" do desktop não tem fill próprio: a faixa é o fundo da
     página (#041124 = --navy-900). No mobile a instância tem fill #041329. */
  background: var(--navy-900, #041124);
  box-sizing: border-box;
  min-height: 76px;
  position: sticky;
  top: 0;
  z-index: var(--z-header, 1045);
}

.s-header *,
.s-header *::before,
.s-header *::after {
  box-sizing: border-box;
}

/* Figma: HORIZONTAL, SPACE_BETWEEN, CENTER, padding 20px nos quatro lados.
   Em >=1280 o .container já tem 1200px e padding 0, então os 20px daqui
   reproduzem exatamente o recuo do frame (logo em x=20). */
.s-header .header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  /* sem padding próprio: o header tem que nascer na mesma coluna do resto da
     página (logo em x=360 num 1920), como está no Figma */
  .s-header .header__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Logo (desktop 180 x 26) ---------- */
.s-header .header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

.s-header .header__logo-img {
  display: block;
  width: 166.2px;
  height: 23.6px;
}

/* ---------- Bloco da direita: links (gap 40) + CTA (gap 40) ---------- */
.s-header .header__right {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 0 0 auto;
}

.s-header .header__nav {
  flex: 0 0 auto;
  min-width: 0;
}

.s-header .header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-header .header__nav-item {
  display: flex;
  align-items: center;
}

.s-header .header__nav-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 21.6px;
  letter-spacing: 0;
  color: #ffffff;
  text-decoration: none;
  transition: color .15s ease;
}

.s-header .header__nav-link:hover {
  color: var(--ciano, #04F7F7);
}

/* ---------- CTA: pill outline (base global .btn/.btn--ghost) ----------
   Figma (16188:8546, frame "cta"): h 48, radius 5000, stroke 1px #FFFFFF
   (INSIDE), padding ~17, texto Inter Bold 16/1.2 #FFFFFF. */
.s-header .header__cta {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 17px;
  gap: 8px;
  border: 1px solid #ffffff;
  border-radius: 5000px;
  background: transparent;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

.s-header .header__cta:hover {
  border-color: var(--ciano, #04F7F7);
  color: var(--ciano, #04F7F7);
}

/* ---------- Botão hambúrguer (icon/menu 28x28) ---------- */
.s-header .header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.s-header .header__toggle-icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* ---------- Mobile (frame 390) — vale até 1023px ---------- */
@media (max-width: 1023px) {
  .s-header {
    background: var(--navy-800, #041329);
    /* Figma: stroke INSIDE, bottom 1px, #FFFFFF @ 10%. Usamos inset box-shadow
       (e não border-bottom) para a linha não consumir altura: no Figma os filhos
       ficam centralizados nos 64px cheios e o stroke é pintado por cima. */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    min-height: 64px;
  }

  .s-header .header__inner {
    min-height: 64px;
    gap: 16px;
  }

  .s-header .header__logo-img {
    height: 25.581px;
  }

  .s-header .header__right {
    display: none;
  }

  .s-header .header__toggle {
    display: flex;
  }
}

/* ============================================================
   CONSOLIDAÇÃO (não vem do Figma): drawer mobile/tablet com os
   itens que restaram. Sem dropdowns — eles saíram do modelo.
   ============================================================ */

.s-header .header__drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--navy-800, #041329);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 24px var(--gutter, 16px) 32px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.s-header.is-menu-open .header__drawer {
  display: block;
}

.s-header .header__drawer-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-header .header__drawer-link {
  display: block;
  padding: 12px 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  color: #ffffff;
  text-decoration: none;
}

.s-header .header__drawer-cta {
  display: flex;
  width: 100%;
  height: 40px;
  margin-top: 24px;
  padding: 0 15px;
  border: 1px solid #ffffff;
  border-radius: 5000px;
  background: transparent;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .s-header .header__drawer {
    display: none;
  }
}

/* ===== hero ===== */
/* ===== 01 Hero =====
   Figma desktop: 1920x600, fundo #041329, conteúdo em x=360 (grid 1200), padding 80/0/80/360.
   Figma mobile:  390x647, foto 390x260 no topo + conteúdo com padding 0/24/40/24.
   Redesign de 22/09: título/lead sem gradiente e sem <código> monoespaçado
   (era um pedido do Copy de 18/09, revertido); a dobra de Referência foi
   removida do Figma e os 3 números de autoridade viraram "hero__stats" aqui
   dentro (16416:1173 desktop / 16431:482 mobile).
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;   /* clip, nao hidden: hidden cria contêiner de rolagem e o scrollIntoView de um campo desloca a dobra inteira (medido: scrollLeft 360 no comparador) */
  background: var(--navy-800, #041329);
}

/* ---------- foto ---------- */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('brand/hero-mobile.webp');
  background-repeat: no-repeat;
  /* Figma mobile (16188:8764, sync 23/09): a mesma foto do desktop, com CROP
     w 171,71% / h 143,76%, deslocada left -71,79% / top -21,88% → região
     visível ancorada à direita (X = 0,7179/0,7171 ≈ 100%) e centrada na
     vertical (Y = 0,2188/0,4376 = 50%). */
  background-size: 171.71% auto;
  background-position: 100% 50%;
}

/* Mobile: a foto ocupa só a faixa de 260px do topo; o resto da dobra é sólido. */
@media (max-width: 767px) {
  .hero { padding-top: 260px; }
  .hero__foto {
    inset: 0 0 auto 0;
    height: 260px;
  }
  /* véu ciano 11% + degradê #002868→#041329 de cima para baixo (Figma) */
  .hero__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 40, 104, 0) 0%, var(--navy-800, #041329) 100%),
      rgba(4, 247, 247, .11);
  }
}

/* Figma desktop (16188:8549, sync 23/09): foto NOVA (dev de óculos), fill
   scaleMode FILL — cobre a dobra inteira (1920x600) sem crop, centrada. O
   enquadramento antigo (70,74% ancorado à direita) era da foto anterior. */
@media (min-width: 768px) {
  .hero__foto {
    background-image: url('brand/hero-desktop.webp');
    background-size: cover;
    background-position: 50% 50%;
  }
}

/* ---------- shade (só desktop) ---------- */
.hero__shade { display: none; }

@media (min-width: 768px) {
  .hero__shade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to right,
      var(--navy-800, #041329) 0%,
      rgba(4, 19, 41, .96) 42%,
      rgba(4, 19, 41, .55) 62%,
      rgba(4, 19, 41, 0) 80%
    );
  }
}

/* ---------- glow ---------- */
.hero__glow {
  display: block;
  position: absolute;
  left: 50%;
  top: -120px;
  width: 360px;
  height: 360px;
  margin-left: -180px;
  z-index: 1;
  border-radius: 50%;
  background: rgba(4, 247, 247, .18);
  filter: blur(55px);
  opacity: .5;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero__glow {
    left: 54.16%;          /* 1040/1920 */
    top: -50px;
    width: 700px;
    height: 700px;
    background: rgba(4, 247, 247, .16);
    filter: blur(180px);
    opacity: 1;
  }
}

/* ---------- conteúdo ---------- */
.hero__container {
  position: relative;
  z-index: 2;
}

/* Mobile: os 4 blocos (título, lead, cta, stats) têm o MESMO gap entre si
   (16416:1172 não existe como agrupador no mobile — headline/lead são filhos
   diretos do conteúdo, com o gap igual ao resto). No desktop o título+lead
   formam um bloco à parte com gap PRÓPRIO de 24, e esse bloco/cta/stats têm
   gap de 40 entre si. */
.hero__conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 40px;
}

.hero__titulo-bloco {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 600px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hero__container { width: 100%; }
  .hero__conteudo {
    gap: 40px;
    max-width: 593px;
    padding: 0;
  }
  .hero__titulo-bloco { gap: 24px; }
}

/* headline — 32/42 mobile · 54/71 desktop, branco sólido (sem gradiente) com
   a palavra-chave em ciano; sem itálico (redesign de 22/09). */
.hero__headline {
  margin: 0;
  color: var(--txt-title, #FFFFFF);
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -.96px;
  font-weight: 700;
}

.hero__headline em {
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

/* Quebra manual só em desktop/tablet (pedido do usuário 23/09): "Seu código
   evoluiu." numa linha, "Seu salário também?" na outra. No mobile o texto
   flui livre, sem quebra forçada. */
.hero__break { display: none; }

@media (min-width: 768px) {
  .hero__headline {
    font-size: 54px;
    line-height: 71px;
    letter-spacing: -1.62px;
  }

  .hero__break { display: inline; }
}

.hero__lead {
  margin: 0;
  color: var(--txt-body, #CCD4E8);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.54px;
}

@media (min-width: 768px) {
  /* 570 é a caixa do Figma (16188:8554); sem ela o lead quebra em
     "...faturam como / PJ." e deixa "PJ." órfão na 3ª linha. */
  .hero__lead { max-width: 570px; font-size: 24px; line-height: 31px; letter-spacing: -.72px; }
}

/* CTA: full-width no mobile (342 de 390), hug no desktop (223 fixos no Figma) */
.hero__cta { width: 100%; font-size: 18px; }

@media (min-width: 768px) {
  .hero__cta { width: 223px; align-self: flex-start; }
}

/* ---------- stats (números de autoridade, herdados da antiga dobra 04) ----------
   16416:1173 (desktop) / 16431:482 (mobile): 3 itens ícone+número+descrição
   separados por uma linha vertical fina. As 3 usam o MESMO ícone (trophy) —
   confirmado no Figma, não é placeholder esquecido. */
/* Uma linha só, sem quebrar para a próxima — no Figma o rótulo de cada item
   é que quebra em 2 linhas dentro da largura do PRÓPRIO item, não o conjunto
   dos 3. Os 3 itens NÃO têm a mesma largura (mobile: 92/92/110, gap 12;
   desktop: 121/168/148, gap 24). Sem ícone: o "lucide/trophy" existe no
   Figma mas está oculto (visible=false) nos dois breakpoints. */
.hero__stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile (16431:482): rótulo centralizado sob o número, tracking -0,42.
   O Figma usa 14/19, mas em 375px "de experiência em contabilidade" não
   cabe em 2 linhas nos 110px do 3º item — 13px resolve (pedido de 23/09). */
.hero__stat-texto {
  margin: 0;
  color: #FFFFFF;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.39px;
  text-align: center;
}

.hero__stat:nth-of-type(1) .hero__stat-texto { width: 92px; }
.hero__stat:nth-of-type(2) .hero__stat-texto { width: 92px; }
.hero__stat:nth-of-type(3) .hero__stat-texto { width: 110px; }

.hero__stat-texto strong {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.hero__stat-linha {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  min-height: 36px;
  background: rgba(255, 255, 255, .6);
}

@media (min-width: 768px) {
  .hero__stat-texto { font-size: 18px; line-height: 22px; letter-spacing: 0; text-align: left; }
  .hero__stat-texto strong { font-size: 28px; line-height: 34px; margin-bottom: 0; }
  .hero__stat-linha { min-height: 44px; }
  .hero__stats { gap: 24px; }

  /* larguras próprias por item no desktop também (121/168/148 no Figma) */
  .hero__stat:nth-of-type(1) .hero__stat-texto { width: 121px; }
  .hero__stat:nth-of-type(2) .hero__stat-texto { width: 168px; }
  .hero__stat:nth-of-type(3) .hero__stat-texto { width: 148px; }
}

/* ===== comparador ===== */
/* ===== 02 Comparador — timeline de 3 etapas =====
   Figma desktop: seção 1920x650, conteúdo 1200 em duas colunas (460 | 60 | 680),
   timeline com calha de 40 à esquerda e pilha de 640.
   Figma mobile: 390, padding 40/24, coluna única, calha de 24.
   ============================================================ */

.cmp {
  position: relative;
  isolation: isolate;
  overflow: clip;   /* clip, nao hidden: hidden cria contêiner de rolagem e o scrollIntoView de um campo desloca a dobra inteira (medido: scrollLeft 360 no comparador) */
  background: linear-gradient(180deg, var(--navy-900, #041124) 0%, var(--navy-800, #041329) 100%);
  padding-top: 40px;
  padding-bottom: 40px;
}

/* linha ciano de 2px no topo e na base da dobra */
.sec-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(to right, rgba(4, 247, 247, 0) 0%, var(--ciano, #04F7F7) 50%, rgba(4, 247, 247, 0) 100%);
}
.sec-line--topo { top: 0; }
.sec-line--base { bottom: 0; }

.cmp__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
/* A vinheta azul é o que a LP de referência tem e esta dobra não tinha: medido,
   os glows daqui somavam alpha efetivo 0,09 contra 0,70 dela, e a dobra saía
   68% mais escura e 40% menos cromática no mobile. */
.cmp__vinheta {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 700px;
  margin: -350px 0 0 -350px;
  border-radius: 50%;
  background: rgba(11, 31, 72, .7);
  filter: blur(80px);
  pointer-events: none;
}

/* blur maior que o próprio elemento dissolve o alpha: 120px num glow de 260px
   de altura entregava 0,053 dos 0,08 declarados */
.cmp__glow--1 {
  left: 25.6%; top: -80px; width: 420px; height: 260px;
  background: rgba(4, 247, 247, .08);
  filter: blur(70px);
}
.cmp__glow--2 {
  left: -120px; bottom: -40px; width: 360px; height: 220px;
  background: rgba(4, 247, 247, .06);
  filter: blur(65px);
}

@media (min-width: 1024px) {
  .cmp { padding-top: 96px; padding-bottom: 70px; min-height: 650px; }
  .cmp__vinheta { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; filter: blur(110px); }
  .cmp__glow--1 { left: 57.3%; top: -200px; width: 900px; height: 520px; filter: blur(160px); }
  .cmp__glow--2 { left: -160px; top: 460px; bottom: auto; width: 720px; height: 420px; filter: blur(140px); }
}

.cmp__container { position: relative; z-index: 2; }

.cmp__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 2 colunas só a partir de 1280: medido, a pilha da etapa 3 pede 635px e a
   coluna de texto come 460+60, então entre 1024 e 1279 o card era CORTADO pelo
   overflow:hidden da seção (o Figma não tem frame de tablet) */
@media (min-width: 1280px) {
  .cmp__content {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
}

/* ---------- coluna de texto ---------- */
.cmp__left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1024px) {
  .cmp__left { gap: 24px; }
}

@media (min-width: 1280px) {
  .cmp__left { width: 460px; flex: 0 0 460px; }
}

/* Redesign de 22/09: o título deixou de escalar por breakpoint — é o MESMO
   32/42 no frame mobile (16443:3961) e no desktop (16443:1713), Bold (era 300
   e crescia para 56 no desktop). */
.cmp__title {
  margin: 0;
  text-wrap: balance;
  color: var(--txt-title, #FFFFFF);
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -.96px;
  font-weight: 700;
}

.cmp__title em {
  /* itálico removido — redesign de 22/09 tirou o itálico de toda palavra em destaque.
     font-style: normal é necessário: <em> é itálico por padrão do navegador, e só
     tirar a regra "italic" explícita não cancela esse padrão. */
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

/* A partir de 1280 a coluna tem 460, mas o título no Figma (16443:1713,
   left/title-e1) tem caixa de 428 e quebra "Rode um diff no seu salário /
   CLT vs. PJ"; abaixo disso, equilibrado em 3 linhas parelhas. */
@media (min-width: 1280px) {
  /* 428 é a caixa do título no Figma (left/title-e1): com os 460 da coluna,
     "CLT" cabia na 1ª linha e sobrava "vs. PJ" órfão na 2ª. */
  .cmp__title { text-wrap: pretty; max-width: 428px; }
}

.cmp__lead {
  margin: 0;
  color: var(--txt-body, #CCD4E8);
  font-size: 18px;
  line-height: 26px;
}

@media (min-width: 1024px) {
  .cmp__lead { font-size: 20px; }
}

.cmp__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
}

.cmp__cta-row .btn { width: 100%; }

@media (min-width: 1024px) {
  .cmp__cta-row { align-items: flex-start; gap: 24px; padding-top: 0; }
  .cmp__cta-row .btn { width: auto; }
}

/* copy do CTA muda por breakpoint no Figma: "Calcular minha remuneração PJ"
   no mobile (16443:2553), "Calcular remuneração PJ" no desktop (16188:9298) */
.cmp__cta-desk { display: none; }
@media (min-width: 768px) {
  .cmp__cta-desk { display: inline; }
  .cmp__cta-mob { display: none; }
}

/* quebra "…abaixo / da média PJ" do título do resultado: só a partir de 768.
   Em 360/320px a quebra forçada somava com a natural e dava 3 linhas. */
.cmp__quebra { display: none; }
@media (min-width: 768px) { .cmp__quebra { display: inline; } }

.cmp__refazer {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 20px;
}
.cmp__refazer:hover { color: #FFFFFF; }

/* ---------- timeline ---------- */
.cmp__timeline {
  position: relative;
  padding-left: 24px;
}

@media (min-width: 768px) {
  /* em coluna única a timeline fica travada na largura do card do Figma (640
     + 40 da calha) e centrada, em vez de esticar até a borda do container */
  .cmp__timeline { max-width: 680px; margin-inline: auto; }
}

@media (min-width: 1024px) {
  .cmp__timeline { padding-left: 40px; }
}

@media (min-width: 1280px) {
  .cmp__timeline { flex: 1 1 auto; max-width: none; margin-inline: 0; }
}

.cmp__gutter { position: absolute; inset: 0; pointer-events: none; }

.cmp__gutter-main,
.cmp__gutter-pj {
  position: absolute;
  left: 11.5px;
  width: 1px;
  background: rgba(255, 255, 255, .08);
}

.cmp__gutter-pj {
  left: 11px;
  width: 2px;
  background: var(--ciano, #04F7F7);
  box-shadow: 0 0 6px rgba(4, 247, 247, .4);
  opacity: 0;
  transition: height .5s ease, opacity .3s ease;
}

.cmp__node {
  position: absolute;
  left: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy-700, #081838);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .3s ease, border-color .3s ease;
}

.cmp__node.is-ativo,
.cmp__node.is-feito {
  background: var(--ciano, #04F7F7);
  border-color: transparent;
}

/* check dentro do nó concluído */
.cmp__node.is-feito::after {
  content: '';
  position: absolute;
  left: 2px; top: 3px;
  width: 5px; height: 3px;
  border-left: 1.2px solid var(--azul-office, #002868);
  border-bottom: 1.2px solid var(--azul-office, #002868);
  transform: rotate(-45deg);
}

.cmp__head-glow {
  position: absolute;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(4, 247, 247, .2);
  filter: blur(5px);
  transition: top .5s ease;
}

@media (min-width: 1024px) {
  .cmp__gutter-main { left: 19.5px; }
  .cmp__gutter-pj { left: 19px; box-shadow: 0 0 8px rgba(4, 247, 247, .4); }
  .cmp__gutter-main { background: rgba(255, 255, 255, .1); }
  .cmp__node { left: 14px; width: 12px; height: 12px; }
  .cmp__node.is-feito::after { left: 3px; top: 4px; width: 6px; height: 4px; border-width: 1.5px; }
  .cmp__head-glow { left: 6px; width: 28px; height: 28px; filter: blur(6px); }
}

/* ---------- pilha de cards ---------- */
.cmp__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.cmp__card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius, 16px);
  overflow: hidden;
}

/* ---------- linha colapsada ---------- */
.cmp__summary {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  text-align: left;
}

@media (min-width: 1024px) {
  .cmp__summary { gap: 12px; padding: 0 24px; }
}

.cmp__card.is-colapsado .cmp__summary { display: flex; }
.cmp__card.is-colapsado .cmp__body { display: none; }

.cmp__summary-icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.cmp__summary-done,
.cmp__summary-pending {
  position: absolute;
  border-radius: 50%;
}

.cmp__summary-done {
  inset: 0;
  background: var(--ciano, #04F7F7);
  opacity: 0;
}

.cmp__summary-done::after {
  content: '';
  position: absolute;
  left: 4px; top: 5px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--azul-office, #002868);
  border-bottom: 1.5px solid var(--azul-office, #002868);
  transform: rotate(-45deg);
}

.cmp__summary-pending {
  left: 4px; top: 4px;
  width: 8px; height: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
}

.cmp__card.is-feito .cmp__summary-done { opacity: 1; }
.cmp__card.is-feito .cmp__summary-pending { opacity: 0; }

.cmp__summary-step {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.cmp__summary-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--txt-title, #FFFFFF);
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmp__summary-edit {
  flex: 0 0 auto;
  color: var(--ciano, #04F7F7);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: underline;
  opacity: 0;
}

.cmp__card.is-feito .cmp__summary-edit { opacity: 1; }
.cmp__summary--estatico { cursor: default; }

@media (min-width: 1024px) {
  .cmp__summary-step { font-size: 13px; }
  .cmp__summary-text { font-size: 15px; line-height: 22px; }
  .cmp__summary-edit { font-size: 14px; }
}

/* ---------- corpo do card ---------- */
.cmp__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

@media (min-width: 1024px) {
  .cmp__body { gap: 20px; padding: 20px 32px 24px; }
}

.cmp__eyebrow {
  margin: 0;
  color: rgba(201, 224, 255, .7);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .cmp__eyebrow { font-size: 12px; }
}

/* eyebrow do resultado: cidade por extenso no desktop, sigla no mobile */
[data-eyebrow-full] { display: none; }
@media (min-width: 1024px) {
  [data-eyebrow-full] { display: inline; }
  [data-eyebrow-short] { display: none; }
}

/* ---------- campos ---------- */
.cmp__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .cmp__fields {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 32px;
  }
  .cmp__fields > .cmp__field { flex: 0 0 calc(50% - 16px); }
}

.cmp__field { position: relative; display: flex; flex-direction: column; }

.cmp__label {
  color: var(--accent-100, #C9E0FF);
  font-size: 13px;
  line-height: 18px;
}

@media (min-width: 1024px) {
  .cmp__label { font-size: 14px; line-height: 20px; }
}

.cmp__value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 9px;
}

.cmp__value {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: var(--txt-title, #FFFFFF);
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  appearance: none;
  -webkit-appearance: none;
}

.cmp__value::placeholder { color: rgba(255, 255, 255, .4); }
.cmp__value:focus { outline: none; }
.cmp__value--num { text-align: right; }

/* A regra genérica `input:-webkit-autofill` do _base.css pinta um retângulo
   sólido navy-900 (via box-shadow inset) por trás do campo autopreenchido —
   pensada para o input com caixa própria do modal. Aqui o campo é um
   underline transparente sobre o card de vidro (era isso a "caixa escura
   atrás" que sobrava atrás de Nome/E-mail preenchidos): cancela o inset,
   igual já se faz para `.s-quiz`. */
.cmp__value:-webkit-autofill,
.cmp__value:-webkit-autofill:hover,
.cmp__value:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--txt-title, #FFFFFF);
  -webkit-box-shadow: none;
  box-shadow: none;
  caret-color: var(--ciano, #04F7F7);
}

.cmp__value--select { cursor: pointer; }
.cmp__value--select:invalid { color: rgba(255, 255, 255, .4); }

/* O menu nativo do <select> não aceita CSS de layout — cada engine desenha a
   lista do jeito dele. padding em <option> é uma das poucas propriedades que
   Chrome/Edge respeitam (Firefox e Safari ignoram e caem no espaçamento
   nativo deles, que já tem folga própria). Sem isto, as opções ficam coladas
   umas nas outras. */
.cmp__value--select option {
  padding: 10px 12px;
  background: var(--navy-700, #081838);
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .cmp__value { font-size: 20px; line-height: 28px; }
}

.cmp__prefix {
  flex: 0 0 auto;
  color: rgba(201, 224, 255, .6);
  font-size: 13px;
  line-height: 18px;
}

@media (min-width: 1024px) {
  .cmp__prefix { font-size: 14px; line-height: 20px; }
}

.cmp__chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  position: relative;
}

.cmp__chevron::after {
  content: '';
  position: absolute;
  left: 4px; top: 5px;
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, .6);
  border-bottom: 1.5px solid rgba(255, 255, 255, .6);
  transform: rotate(45deg);
}

.cmp__hairline {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  transition: background .2s ease, box-shadow .2s ease;
}

/* foco: a hairline acende em ciano (o "focus" do Figma) */
.cmp__field:focus-within .cmp__hairline {
  background: var(--ciano, #04F7F7);
  box-shadow: 0 0 8px rgba(4, 247, 247, .6);
}

.cmp__erro {
  display: none;
  padding-top: 4px;
  color: #FF8DA6;
  font-size: 12px;
  line-height: 16px;
}

.cmp__field.is-invalid .cmp__erro { display: block; }
.cmp__field.is-invalid .cmp__hairline { background: var(--erro, #DF1642); box-shadow: none; }

/* ---------- ações ---------- */
.cmp__foot { display: flex; }
.cmp__foot .btn { width: 100%; }

@media (min-width: 1024px) {
  .cmp__foot .btn { width: auto; }
}

.cmp__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cmp__voltar {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 20px;
}
.cmp__voltar:hover { color: #FFFFFF; }

.cmp__seta { display: none; }
@media (min-width: 1024px) { .cmp__seta { display: inline; } }

.cmp__lgpd {
  margin: 0;
  color: rgba(201, 224, 255, .55);
  font-size: 12px;
  line-height: 16px;
}
.cmp__lgpd a { text-decoration: underline; }

/* ---------- resultado: gráfico de 2 colunas ----------
   Figma mobile 16483:484 (276x180): base em y=147, colunas de 126 com 24 de
   vão, topo máximo em y=8 e pé em y=138 (130 de altura útil), valor 18/31 a
   8px do pé, rótulo 12px em y=161. Desktop 16479:484 (574x188): base 158,
   colunas de 275, máximo 141 (y 8→149), valor 24/31 a 20px do pé, rótulo
   13px em y=172. As alturas vêm de --h-clt/--h-pj (fração 0..1) e a
   tracejada de --h-ref (a menor das duas). */
.cmp__chart {
  --h-clt: 0;
  --h-pj: 0;
  --h-ref: 0;
  --max: 130px;
  --pe: 42px;
  --min: 39px;                  /* valor (31px) + folga do pé (8px) */
  position: relative;
  width: 100%;
  height: 180px;
}

@media (min-width: 1024px) {
  .cmp__chart { --max: 141px; --pe: 39px; --min: 51px; height: 188px; }   /* 31 + 20 */
}

.cmp__chart-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pe) - 9px);
  height: 1px;
  background: rgba(255, 255, 255, .12);
}

.cmp__chart-ref {
  position: absolute;
  left: 0;
  right: 0;
  /* topo da coluna MENOR como ela é renderizada: proporcional, mas nunca
     abaixo da altura mínima — senão, com valores muito distantes (R$ 1.000
     vs R$ 5.400) a linha cruzava o número dentro da coluna */
  bottom: calc(var(--pe) + max(var(--h-ref) * var(--max), var(--min)) - 1px);
  border-top: 2px dashed var(--azul-200, #9FC8FF);
  transition: bottom .6s cubic-bezier(.22, .61, .36, 1);
}

.cmp__col-bar {
  position: absolute;
  bottom: var(--pe);
  width: calc(50% - 12px);
  height: calc(var(--h) * var(--max));
  min-height: var(--min);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  border-radius: 14px;
  background: #1B2740;
  border: 1px solid rgba(255, 255, 255, .16);
  box-sizing: border-box;
  transition: height .6s cubic-bezier(.22, .61, .36, 1);
}

.cmp__col-bar--clt { left: 0; --h: var(--h-clt); }
.cmp__col-bar--pj  { right: 0; --h: var(--h-pj); }

/* a coluna de maior valor (as duas, quando empatam) */
.cmp__col-bar.is-alta {
  background: linear-gradient(180deg, rgba(4, 247, 247, .52) 0%, rgba(4, 247, 247, .16) 100%);
  border: 1.5px solid rgba(4, 247, 247, .75);
}

.cmp__col-valor {
  color: rgba(255, 255, 255, .75);
  font-size: 18px;
  line-height: 31px;
  letter-spacing: -.54px;
  white-space: nowrap;
}

.cmp__col-bar.is-alta .cmp__col-valor { color: #D9FFFF; }

/* 7 dígitos ou mais: em 18px "R$ 9.999.999" (≈118px) encosta nas bordas da
   coluna de 126px; em 15px cabe com folga. No desktop (275px) não precisa. */
@media (max-width: 1023px) {
  .cmp__col-valor.is-longo { font-size: 15px; letter-spacing: -.3px; }
}

.cmp__col-label {
  position: absolute;
  top: 161px;
  width: calc(50% - 12px);
  text-align: center;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.cmp__col-label--clt { left: 0; }
.cmp__col-label--pj  { right: 0; color: rgba(4, 247, 247, .8); font-weight: 600; }

@media (min-width: 1024px) {
  .cmp__col-bar { padding-bottom: 20px; }
  .cmp__col-valor { font-size: 24px; letter-spacing: -.72px; }
  .cmp__col-label { top: 172px; font-size: 13px; line-height: 16px; }
}

/* ---------- dropdowns de referência (16479:493 / 16483:493) ----------
   Fechados por padrão, como no Figma: só a cabeça de 48px com o título e o
   chevron. Abrindo, mostram as linhas k/v (mesmo estilo dos painéis antigos). */
.cmp__dds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* desktop: lado a lado (pedido do usuário, 23/09); cada um abre sozinho */
@media (min-width: 1024px) {
  .cmp__dds { flex-direction: row; align-items: flex-start; }
  .cmp__dd { flex: 1 1 0; min-width: 0; }
}

.cmp__dd {
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}

.cmp__dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;                 /* 48 no Figma, com a borda de 1px em cima e embaixo */
  padding: 0 16px;
  list-style: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.cmp__dd-head::-webkit-details-marker { display: none; }

.cmp__dd-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* chevron de 10x5 do Figma desenhado em CSS */
.cmp__dd-chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid rgba(255, 255, 255, .7);
  border-bottom: 1.5px solid rgba(255, 255, 255, .7);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.cmp__dd[open] .cmp__dd-chevron { transform: rotate(-135deg); margin-top: 4px; }

.cmp__dd-body { padding: 2px 16px 14px; }

.cmp__panel-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 1024px) {
  .cmp__panel-rows { gap: 2px; }
}

.cmp__panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmp__panel-k {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(201, 224, 255, .85);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp__panel-v {
  flex: 0 0 auto;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

/* ---------- estados por etapa ---------- */
.cmp[data-etapa="1"] [data-card="1"] .cmp__summary,
.cmp[data-etapa="2"] [data-card="2"] .cmp__summary,
.cmp[data-etapa="3"] [data-card="3"] .cmp__summary { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cmp__gutter-pj,
  .cmp__head-glow,
  .cmp__col-bar,
  .cmp__chart-ref,
  .cmp__dd-chevron { transition: none; }
}

/* nota de fonte dos dados, no fim do resultado (pedido do Copy, 18/09) */
.cmp__nota {
  margin: 0;
  color: var(--txt-body, #CCD4E8);
  font-size: 11px;
  line-height: 15px;
  opacity: .55;
}

@media (min-width: 1024px) {
  .cmp__nota { font-size: 12px; line-height: 16px; }
}

/* Figma: o card do resultado usa gap 12 e padding inferior 20 — os 20/24 dos
   cards de formulário deixavam a dobra 26px mais alta que o frame. */
@media (min-width: 1024px) {
  [data-body="3"] { gap: 12px; padding-bottom: 20px; }
}

/* `.cmp__value:focus { outline: none }` (0-1-1) vencia o :focus-visible global
   (0-1-0) e o campo ficava sem anel nenhum ao navegar por teclado. */
.cmp__value:focus:not(:focus-visible) { outline: none; }

/* O resumo do card colapsado não cabe nos mobiles: 249px de texto em 150-189px.
   Sem o número da etapa sobra espaço para a linha inteira — mas só quando HÁ
   resumo para mostrar no lugar. O .cmp__summary-step carrega o rótulo inteiro
   ('2 · Contato'), então escondê-lo sempre deixava as etapas 2 e 3 sem texto
   nenhum no mobile; no Figma (16188:8770) elas aparecem rotuladas. */
@media (max-width: 767px) {
  .cmp__summary:has(.cmp__summary-text:not(:empty)) .cmp__summary-step { display: none; }
}

/* "Baixar resultado em PDF" — secundário ao lado do CTA da calculadora, no
   mesmo peso visual do "Refazer" para não competir com o primário. */
.cmp__pdf {
  align-self: flex-start;
  height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(4, 247, 247, .45);
  border-radius: 9999px;
  background: rgba(255, 255, 255, .04);
  color: var(--ciano, #04F7F7);
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.cmp__pdf:hover { background: rgba(4, 247, 247, .12); border-color: var(--ciano, #04F7F7); }
.cmp__pdf[disabled] { opacity: .6; cursor: progress; }

/* O frame mobile do Figma (16443:2552) não tem o botão de PDF, mas a Juliana
   pediu a opção no mobile também (23/09) — full-width, entre o CTA e o Refazer. */
@media (max-width: 767px) {
  .cmp__pdf { width: 100%; align-self: stretch; text-align: center; }
}

/* ---------- modo de captura do PDF ----------
   A classe entra só no CLONE que o html2canvas renderiza (onclone em
   comparador.js). Sem botões, sem "editar", dropdowns abertos e a cabeça do
   dropdown em bloco com line-height — o html2canvas não centraliza direito
   um <summary> flex de altura fixa (o texto saía cortado no topo). */
.cmp.is-pdf .cmp__cta-row,
.cmp.is-pdf .cmp__summary-edit,
.cmp.is-pdf .cmp__dd-chevron { display: none; }

.cmp.is-pdf .cmp__dd-head {
  display: block;
  height: auto;
  padding: 13px 16px;           /* 13 + 20 + 13 = 46, e a 2ª linha (quando quebra) fica colada */
  line-height: 20px;
  cursor: default;
}

.cmp.is-pdf .cmp__content { padding: 24px; }

.cmp__pdf-logo {
  display: block;
  width: 166px;
  height: auto;
  margin-bottom: 8px;           /* + o gap de 24 da coluna = 32 até o título */
}

/* html2canvas desenha texto com overflow:hidden + text-overflow:ellipsis
   deslocado pra baixo (sai cortado pela metade). Na captura os textos podem
   quebrar linha à vontade — não há interação nem largura de tela a poupar. */
.cmp.is-pdf .cmp__summary-text,
.cmp.is-pdf .cmp__dd-title,
.cmp.is-pdf .cmp__panel-k,
.cmp.is-pdf .cmp__summary-step {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.cmp.is-pdf .cmp__summary { height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; }

/* a linha do próprio perfil ganha destaque nos dois painéis de referência */
.cmp__panel-row.is-atual .cmp__panel-k,
.cmp__panel-row.is-atual .cmp__panel-v {
  color: var(--ciano, #04F7F7);
  font-weight: 600;
}

/* ---------- menu do <select> ----------
   `padding` em <option> é ignorado pelo Chrome no Windows: o popup nativo é
   desenhado fora do CSS da página e as opções saem coladas. O seletor
   customizável (`appearance: base-select`) entrega o menu como DOM de
   verdade, aí o padding vale. Fica dentro de @supports: quem não suporta
   continua com o popup nativo de sempre, sem regressão. */
@supports (appearance: base-select) {
  .cmp__value--select,
  .cmp__value--select::picker(select) {
    appearance: base-select;
  }

  /* o botão fechado tem que continuar sendo o underline do Figma */
  .cmp__value--select {
    justify-content: flex-start;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
  }

  /* a seta é a nossa (.cmp__chevron), não a do componente */
  .cmp__value--select::picker-icon { display: none; }

  .cmp__value--select::picker(select) {
    box-sizing: border-box;
    width: anchor-size(width);
    margin-block-start: 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: var(--navy-700, #081838);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .6);
  }

  .cmp__value--select option {
    display: block;
    min-block-size: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: none;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 20px;
  }

  .cmp__value--select option::checkmark { display: none; }

  .cmp__value--select option:hover,
  .cmp__value--select option:focus {
    background: rgba(4, 247, 247, .12);
    outline: none;
  }

  .cmp__value--select option:checked { color: var(--ciano, #04F7F7); }

  .cmp__value--select option[disabled] { color: rgba(255, 255, 255, .4); }
}

/* ===== vale ===== */
/* ===== 03 Vale a pena ser PJ? =====
   Figma desktop: 1920x732, fundo #0A1E47, padding 80/360/0/360, gap 24.
   Figma mobile: carrossel horizontal de 3 cards de 260 + indicador + banner.
   ============================================================ */

.vale {
  position: relative;
  isolation: isolate;
  overflow: clip;   /* clip, nao hidden: hidden cria contêiner de rolagem e o scrollIntoView de um campo desloca a dobra inteira (medido: scrollLeft 360 no comparador) */
  background: var(--navy-600, #0A1E47);
  padding-top: 40px;
}

@media (min-width: 1024px) {
  .vale { padding-top: 80px; }
}

/* Gradiente radial no lugar de elipse+blur: a elipse com blur(160px) ainda
   tem ~20% da intensidade quando encontra a borda da seção, e o overflow
   hidden corta isso num degrau reto — era a 'quebra de cor' visível entre
   esta dobra e a do blog (as duas são #0A1E47). Com raios de 50% x 40% o
   gradiente chega a zero ANTES de cada borda, em qualquer altura de seção. */
.vale__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 40% at 50% 58%,
    rgba(4, 247, 247, .07) 0%,
    rgba(4, 247, 247, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.vale__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* o carrossel sangra até a borda no mobile; o padding volta nos irmãos via
   margin (a "peek" do próximo card vem do padding próprio de .vale__cards,
   que continua de pé) */
@media (max-width: 1023px) {
  .vale__container { padding-left: 0; padding-right: 0; }
  .vale__cabecalho,
  .vale__cta { margin-left: var(--gutter, 16px); margin-right: var(--gutter, 16px); }
}

/* ---------- cabeçalho ---------- */
.vale__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .vale__cabecalho { gap: 16px; }
}

.vale__titulo {
  margin: 0;
  max-width: 820px;
  color: var(--txt-title, #FFFFFF);
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -.84px;
  font-weight: 700;
  text-align: center;
}

.vale__titulo em {
  /* itálico removido — redesign de 22/09 tirou o itálico de toda palavra em destaque.
     font-style: normal é necessário: <em> é itálico por padrão do navegador, e só
     tirar a regra "italic" explícita não cancela esse padrão. */
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

@media (min-width: 1024px) {
  .vale__titulo { font-size: 32px; line-height: 42px; letter-spacing: -.96px; }
}

/* ---------- cards ---------- */
.vale__cards {
  display: flex;
  gap: 12px;
  padding-left: var(--gutter, 16px);
  padding-right: var(--gutter, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vale__cards::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .vale__cards {
    gap: 20px;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
}

/* Card no tratamento da LP de meio: fundo em gradiente navy, foto absoluta
   cobrindo o card inteiro, glow vazando pelo topo, shade na base e o texto POR
   CIMA da imagem. Antes era foto em cima + caixa de texto embaixo. */
.vale__card {
  position: relative;
  isolation: isolate;
  flex: 0 0 290px;
  width: 290px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(140deg, #0E3A7A 0%, var(--navy-800, #041124) 71%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius, 16px);
  overflow: hidden;
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .vale__card { flex: 1 1 0; width: auto; min-height: 459px; }
}

.vale__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
}

/* Card 2 não é foto — é o fundo já exportado do Figma (gradiente radial +
   diagrama "PJ" com os 5 benefícios ao redor, sombra incluída). Sem cover: a
   imagem já nasce nas proporções exatas do card (900x978, mesmo aspecto de
   vale-1/vale-3), então cover/contain dão o mesmo resultado. */
.vale__foto--1 { background-image: url('brand/vale-1.webp'); }   /* dev sorrindo com o celular */
.vale__foto--2 { background-image: url('brand/vale-2.webp'); }   /* diagrama de benefícios */
.vale__foto--3 { background-image: url('brand/vale-3.webp'); }   /* dev no sofá com notebook */

/* ---------- selos flutuantes (16510:2069 e afins) ----------
   Só os cards 1 e 3 têm selo — o card 2 é o diagrama, que já traz os próprios
   rótulos desenhados. Posições em px: Figma não usa a mesma proporção nos dois
   breakpoints, por isso o valor muda no @media em vez de virar %. */
.vale__selo {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid #FFFFFF;
  /* componente "ui-flutuante" do Figma (16510:2069 e afins): sombra
     projetada + inclinação de -2° em TODOS os selos, nos dois breakpoints */
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, .5);
  transform: rotate(-2deg);
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  color: #0A2A5E;
  white-space: nowrap;
  pointer-events: none;
}

.vale__selo--pj  { background: #FFFFFF; border-color: #E4EAF2; }
.vale__selo--clt { background: #F7D2DA; border-color: #FFFFFF; color: #630A1D; }

/* card 1 — ancorado por RIGHT, não LEFT: entre 1024 e ~1248px o card é
   FLUIDO (flex:1 1 0, larguras entre 290 e 386,67 conforme o viewport, não só
   os dois valores fixos dos breakpoints). Um "left" fixo pensado pra 386,67px
   estourava o card sempre que ele ficava mais estreito que isso (ex.: 332px
   em viewport 1100 — "27,5% CLT" cortava 43px pra fora). Com "right" o selo
   fica sempre à mesma distância da borda direita, não importa a largura real
   do card, então nunca mais estoura em nenhum breakpoint/tamanho. */
/* mobile (16490:1890/1884): CLT left 200 top 79, PJ left 222 top 128 — os
   dois terminam em x≈283 no card de 290, ou seja, alinhados à direita com
   7px de folga. */
.vale__selo--1a { right: 7px; top: 79px; }
.vale__selo--1b { right: 7px; top: 128px; }

/* card 3 — mesma coluna à esquerda, empilhados */
.vale__selo--3a,
.vale__selo--3b,
.vale__selo--3c {
  left: 25px;
  background: #FFFFFF;
  border-color: #E4EAF2;
}
.vale__selo--3a { top: 58px; }
.vale__selo--3b { top: 105px; }
.vale__selo--3c { top: 152px; }

@media (min-width: 1024px) {
  /* desktop (16510:2075/2069): CLT left 266 top 80, PJ left 290 top 127 —
     os dois terminam em x≈351 no card de 386,67 → alinhados à direita com
     35px de folga. Card 3 (16510:2177/2183/2189): left 39,67, tops 48/99/151. */
  .vale__selo--1a { right: 35px; top: 80px; }
  .vale__selo--1b { right: 35px; top: 127px; }
  .vale__selo--3a { left: 40px; top: 48px; }
  .vale__selo--3b { left: 40px; top: 99px; }
  .vale__selo--3c { left: 40px; top: 151px; }
}

/* o shade é o que deixa a frase legível por cima da foto/diagrama */
.vale__shade {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background: linear-gradient(180deg,
    rgba(4, 17, 36, 0) 0%,
    rgba(4, 17, 36, .92) 38%,
    rgba(4, 17, 36, .99) 100%);
  pointer-events: none;
}

/* card 3 (16510:2175): shade mais curto e mais leve — começa em y=326 (29%
   da altura), passa por rgba(4,17,36,.75) na metade e fecha em #041124. */
.vale__shade--3 {
  height: 29%;
  background: linear-gradient(180deg,
    rgba(4, 17, 36, 0) 0%,
    rgba(4, 17, 36, .75) 50%,
    var(--navy-900, #041124) 100%);
}

.vale__texto {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Uma frase só (sem título+descrição separados) — redesign de 22/09. Regular,
   não Bold: o peso visual vem do tamanho (20/24px), não da espessura. */
.vale__card-frase {
  margin: 0;
  color: var(--txt-title, #FFFFFF);
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -.6px;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .vale__card-frase { font-size: 24px; line-height: 31px; letter-spacing: -.72px; }
}

/* ---------- indicador (só mobile) ---------- */
.vale__indicador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vale__dot {
  width: 6px;
  height: 6px;
  border-radius: 360px;
  background: rgba(255, 255, 255, .25);
  transition: width .3s ease, background .3s ease;
}

.vale__dot.is-ativo {
  width: 18px;
  background: var(--ciano, #04F7F7);
}

@media (min-width: 1024px) {
  .vale__indicador { display: none; }
}

/* ---------- CTA ----------
   Redesign de 22/09: sem a frase ao lado — agora é só o botão, largura fixa
   de 280 no desktop (16415:1169). No mobile fica full-width por stretch (o
   .container é flex-column) — sem width:100% aqui, senão soma com a margin
   do gutter acima e estoura a caixa. */
.vale__cta {
  font-size: 18px;
}

@media (min-width: 1024px) {
  .vale__cta { align-self: center; width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .vale__dot { transition: none; }
}

/* O snap obrigatório assentava o carrossel em scrollLeft:16 já no load, colando
   o primeiro card na borda enquanto título e banner respeitavam o gutter. */
@media (max-width: 1023px) {
  .vale__cards { scroll-padding-left: var(--gutter, 24px); }
}

/* ===== blog ===== */
/* ===== 05 Blog =====
   Figma desktop: 1920x661, fundo #0A1E47, padding 80/360, gap 40,
   3 cards de 384x419 (foto 384x247 em cima + bloco de texto 384x172 embaixo).
   Figma mobile: cards de 342x392 (foto 342x220 + texto 342x172) empilhados, gap 16.
   Redesign de 22/09: o card deixou de ser foto+overlay-degradê com o título
   ancorado embaixo — agora é foto (topo, sem degradê) + bloco de texto
   SEPARADO (fundo navy translúcido) com título, resumo do post e "Ler artigo".
   ============================================================ */

.blog {
  background: var(--navy-600, #0A1E47);
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .blog { padding-top: 80px; padding-bottom: 80px; }
}

.blog__container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .blog__container { gap: 40px; }
}

.blog__titulo {
  margin: 0;
  color: var(--txt-title, #FFFFFF);
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -.84px;
  font-weight: 700;
  text-align: center;
}

.blog__titulo em {
  /* itálico removido — redesign de 22/09 tirou o itálico de toda palavra em destaque.
     font-style: normal é necessário: <em> é itálico por padrão do navegador, e só
     tirar a regra "italic" explícita não cancela esse padrão. */
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

@media (min-width: 1024px) {
  .blog__titulo { font-size: 32px; line-height: 42px; letter-spacing: -.96px; }
}

/* Grid, não flex-row: o Figma não tem frame de tablet, e ir direto de "1
   coluna" (mobile) para "3 colunas" (desktop) só em 1024px deixava a faixa
   768-1023 com cards em coluna única na largura CHEIA do tablet — cada foto
   virava um bloco gigante, quase uma tela por card. 2 colunas nessa faixa
   resolve sem inventar nada visualmente novo. */
.blog__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .blog__cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* 3º card centralizado na largura de UM card, não esticado nem sozinho
     à esquerda com um buraco ao lado. */
  .blog__card:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 10px); margin-inline: auto; }
}

@media (min-width: 1024px) {
  .blog__cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .blog__card:nth-child(3) { grid-column: auto; max-width: none; margin-inline: 0; }
}

.blog__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius, 16px);
  overflow: hidden;
}

/* ---------- capa (topo, cantos de cima arredondados) ---------- */
.blog__capa {
  display: block;
  aspect-ratio: 342 / 220;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .blog__capa { aspect-ratio: 384 / 247; }
}

.blog__capa--1 { background-image: url('brand/blog-1.webp'); }
.blog__capa--2 { background-image: url('brand/blog-2.webp'); }
.blog__capa--3 { background-image: url('brand/blog-3.webp'); }

/* A capa do exterior tem CROP próprio no Figma (fill "capa", sx0.848 tx0.125,
   igual nos dois breakpoints): mostra só uma faixa horizontal do original,
   mais fechada que o 'cover' simples dos irmãos. */
.blog__capa--2 {
  background-size: 117.9% auto;
  background-position: 82.2% 50%;
}

/* ---------- bloco de texto (embaixo, fundo translúcido) ---------- */
/* Mobile (16489:548/558/568): altura NATURAL — título e resumo aparecem
   inteiros e cada card tem a sua altura (empilhados, isso não incomoda).
   Desktop (16485:662/664/675): os 3 cards são 384x419 EXATOS, bloco de texto
   172 — título e resumo truncam em 2 linhas pra "Ler artigo" ficar na mesma
   linha nos 3 (ver o @media lá embaixo). */
.blog__texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(4, 17, 36, .5);
}

.blog__card-titulo {
  color: var(--txt-title, #FFFFFF);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.6px;
  font-weight: 400;
}

.blog__card-resumo {
  color: var(--txt-title, #FFFFFF);
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -.48px;
}

@media (min-width: 1024px) {
  .blog__texto { height: 172px; }

  .blog__card-titulo,
  .blog__card-resumo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.blog__ler {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--ciano, #04F7F7);
  font-size: 18px;
  line-height: 1.2;
}

.blog__card:hover .blog__ler { text-decoration: underline; }

.blog__ler span { font-size: 18px; font-weight: 600; }

/* ===== cta ===== */
/* ===== 06 CTA final =====
   Figma desktop: 1920x758, fundo #041124, padding 80/360, gap 40,
   título 32/42 centralizado + 3 tiles de foto 384x428.
   Figma mobile: padding 40/24, gap 32, título 28/32, tiles empilhados 342x428
   (mesma ALTURA do desktop — só a largura muda).
   Redesign de 22/09: os 3 cards perdiam seus tratamentos próprios (chat,
   chassi de celular, chassi de monitor) e viraram um único formato: foto
   cheia + legenda com sombra própria (a sombra É o fundo da legenda, não uma
   camada à parte cobrindo o card inteiro como antes).
   ============================================================ */

.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;   /* clip, nao hidden: hidden cria contêiner de rolagem e o scrollIntoView de um campo desloca a dobra inteira (medido: scrollLeft 360 no comparador) */
  background: var(--navy-900, #041124);
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .cta { padding-top: 80px; padding-bottom: 80px; }
}

/* Figma 16188:8623: a elipse fica em y=278 — no MEIO da dobra, atrás dos
   cards. No mobile o Figma não tem glow nenhum aqui. */
.cta__glow {
  display: none;
  position: absolute;
  left: 50%;
  width: 728px;
  height: 404px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(4, 247, 247, .1);
  filter: blur(220px);
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .cta__glow { display: block; top: 278px; }
}

.cta__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1024px) {
  .cta__container { gap: 40px; }
}

.cta__titulo {
  margin: 0 auto;
  color: var(--txt-title, #FFFFFF);
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -.84px;
  font-weight: 700;
  text-align: center;
}

.cta__titulo em {
  /* itálico removido — redesign de 22/09 tirou o itálico de toda palavra em destaque.
     font-style: normal é necessário: <em> é itálico por padrão do navegador, e só
     tirar a regra "italic" explícita não cancela esse padrão. */
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

@media (min-width: 1024px) {
  .cta__titulo { font-size: 32px; line-height: 42px; letter-spacing: -.96px; }
}

/* Grid, não flex-row: sem frame de tablet no Figma, ir direto de 1 coluna
   (mobile) pra 3 (desktop) só em 1024px deixava 768-1023 com cards de 428px
   de altura na largura CHEIA do tablet — gigantes. 2 colunas resolve; como
   cada .cta__tile já tem altura FIXA (428px, independente da largura) e a
   legenda é posicionada só por altura, o grid não desloca nada. */
.cta__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .cta__tiles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* width, não max-width: o .cta__tile não tem conteúdo em fluxo normal (foto
     e legenda são absolute), então sem uma largura explícita o auto-margin
     encolhia a caixa pra 0 em vez de centralizar um card do tamanho certo. */
  .cta__tile:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 8px); margin-inline: auto; }
}

@media (min-width: 1024px) {
  .cta__tiles { grid-template-columns: repeat(3, 1fr); }
  .cta__tile:nth-child(3) { grid-column: auto; width: auto; margin-inline: 0; }
}

/* ---------- CTAs (16188:8622 desktop / 16188:8838 mobile) ---------- */
.cta__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta__ctas .btn { width: 100%; font-size: 18px; }

@media (min-width: 1024px) {
  .cta__ctas { flex-direction: row; justify-content: center; gap: 16px; }
  /* os dois têm largura FIXA e igual no Figma (16286:1557/1559, 309 cada). */
  .cta__ctas .btn { width: 309px; }
}

/* ---------- tile: foto + legenda ----------
   Um único tratamento para os 3 (antes cada um tinha o seu). Altura FIXA de
   428 nos dois breakpoints — só a largura muda (342 mobile / 384 desktop),
   por isso a legenda pode usar px absolutos sem @media. */
.cta__tile {
  position: relative;
  isolation: isolate;
  display: block;
  height: 428px;
  border-radius: var(--radius, 16px);
  overflow: hidden;
}

.cta__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cta__shot--1 { background-image: url('brand/cta-1.webp'); }   /* dev no computador, à noite */
.cta__shot--2 { background-image: url('brand/cta-2.webp'); }   /* celular com valor estimado do imposto */
.cta__shot--3 { background-image: url('brand/cta-3.webp'); }   /* dev olhando notificação de Pix */

/* A sombra É o fundo da legenda (16425:1208): 194px de altura, gradiente que
   vai de transparente no topo a #000713 opaco na base — não é uma camada
   separada cobrindo o card inteiro como no design anterior.
   flex column + justify-content:flex-end (em vez de padding-top fixo): a
   legenda do card 3 ("Planos a partir de R$ 195/mês...") é mais comprida que
   as outras 2 — com padding-top fixo ela crescia pra baixo do quadro e saía
   alinhada diferente das irmãs; assim ela sempre cresce pra CIMA a partir do
   mesmo padding-bottom de 28px, então a base do texto bate com as outras.
   Importante: o texto fica num <span> filho único — <p> flex diretamente
   com texto solto + <em> quebra em vários itens flex (cada trecho vira uma
   "coluna" própria em vez de fazer o texto quebrar linha normalmente). */
.cta__legenda {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 194px;
  margin: 0;
  padding: 0 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg,
    rgba(0, 7, 19, 0) 0%,
    rgba(0, 7, 19, .7) 50%,
    rgba(0, 7, 19, 1) 100%);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -.2px;
}

.cta__legenda em {
  font-style: normal;
  color: var(--ciano, #04F7F7);
}

@media (min-width: 1024px) {
  .cta__legenda { font-size: 24px; line-height: 31px; letter-spacing: -.24px; }
}

/* ===== footer ===== */
/* ==========================================================================
   Dobra: footer  ->  <footer class="s-footer"> + <div class="s-barra">
   Figma desktop 14150:11844 (1920x838)  |  mobile 14150:12434 (390x557)
                                         |  barra mobile 14150:12448 (390x72)
   ========================================================================== */

/* --------------------------------- FOOTER -------------------------------- */

.s-footer {
  position: relative;
  width: 100%;
  min-height: 758px; /* 80 (pt) + 678 (<footer-completo-desktop> interno) */
  padding-top: 80px;
  background: #041124;
  overflow: hidden;
}

/* sec-line: 1920x2, gradiente linear horizontal ciano com pontas transparentes */
.s-footer .footer__secline {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(4, 247, 247, 0) 0%,
    #04f7f7 50%,
    rgba(4, 247, 247, 0) 100%
  );
}

/* bloco desktop = frame 14150:11845 (padding 40px 0, gap 40px) */
.s-footer .footer__desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}

/* ---------------------------- card <footer> ------------------------------ */

.s-footer .footer__card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  padding: 24px;
  border-radius: 16px;
  background: #002868;
  overflow: hidden;
}

/* <content> 462px */
.s-footer .footer__brand {
  display: flex;
  flex: 0 1 462px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 462px;
}

.s-footer .footer__brandTop {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.s-footer .footer__logo {
  flex: 0 0 143px;
  width: 143px;
}

.s-footer .footer__logoImg {
  display: block;
  width: 143px;
  height: 38px;
}

.s-footer .footer__tagline {
  flex: 1 1 295px;
  min-width: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ffffff;
}

/* keyword ciano do Figma: mesma família/peso, SEM itálico */
.s-footer .footer__kw {
  color: #04f7f7;
}

/* [Web] Divider */
.s-footer .footer__divider {
  width: 100%;
  height: 1px;
  background: #e1e6f5;
}

/* <social> */
.s-footer .footer__social {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-footer .footer__socialItem {
  display: block;
}

.s-footer .footer__socialLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: #ffffff;
  text-decoration: none;
}

.s-footer .footer__socialIcon {
  display: block;
  width: 24px;
  height: 24px;
}

/* <links> da coluna da marca */
.s-footer .footer__brandLinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-footer .footer__link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ffffff;
  text-decoration: none;
}

/* --------------------------- colunas de links ---------------------------- */

.s-footer .footer__cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 64px;
}

.s-footer .footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-footer .footer__colTitle {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #04f7f7;
}

.s-footer .footer__colLinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* selo Reclame Aqui (RA1000) centralizado na coluna */
.s-footer .footer__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.s-footer .footer__sealImg {
  display: block;
  width: 64px;
  height: 29px;
}

/* selo cultura ética + crédito */
.s-footer .footer__ouvidor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.s-footer .footer__ouvidorBox {
  width: 93px;
}

.s-footer .footer__ouvidorImg {
  display: block;
  width: 51px;
  height: 64px;
  margin-left: 21px;
  object-fit: cover;
  object-position: center;
}

.s-footer .footer__ouvidorText {
  width: 93px;
  margin: 4px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 6px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: -0.12px;
  color: #ffffff;
  white-space: nowrap;
}

.s-footer .footer__ouvidorStrong {
  font-weight: 700;
}

/* ------------------------------- <extra> --------------------------------- */

.s-footer .footer__extra {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px;
}

.s-footer .footer__about {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ccd4e8;
}

.s-footer .footer__legalTitle {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: -0.72px;
  color: #ccd4e8;
}

.s-footer .footer__address {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-footer .footer__addressLine {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ccd4e8;
}

.s-footer .footer__addressCity {
  font-weight: 700;
}

.s-footer .footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.s-footer .footer__info {
  display: flex;
  flex: 0 1 576px;
  flex-direction: column;
  gap: 8px;
  max-width: 576px;
}

.s-footer .footer__infoLine {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ccd4e8;
}

.s-footer .footer__llms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-footer .footer__llmsText {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.42px;
  color: #ccd4e8;
}

/* -------------------- bloco mobile (oculto no desktop) ------------------- */

.s-footer .footer__mobile {
  display: none;
}

/* ------------------------------ BARRA STICKY ----------------------------- */

.s-barra {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  height: 80px;
  border-top: 1px solid #405ea0;
  background: #141f35;
}

.s-barra .barra__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 48px;
}

.s-barra .barra__group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.s-barra .barra__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.s-barra .barra__icon {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

/* Larguras do Figma (16425:1544, sync de 22/09): 195 no grupo A e 211 no B —
   iguais à barra anterior (16188:8743), só o texto por dentro mudou. Sem elas
   as caixas esticam e os grupos (502/477 agora) saem do lugar. */
.s-barra .barra__text {
  flex: 0 1 auto;
  max-width: 195px;
  min-width: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}

.s-barra .barra__group--b .barra__text { max-width: 211px; }

.s-barra .barra__cta {
  flex: 0 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Figma: texto do CTA ciano usa azul-office (#002868), não o --txt-dark padrão.
   Largura 216px — nó "btn" do grupo A (16425:1550), copy "Falar com contador". */
.s-barra .barra__cta--a {
  width: 216px;
  color: var(--azul-office, #002868);
}

/* Figma: borda do CTA ghost é branco sólido (100% opacidade), não --glass-stroke (16%).
   Largura 283px — nó "btn" do grupo B (16425:1558), copy "Calcular remuneração PJ". */
.s-barra .barra__cta--b {
  width: 283px;
  border-color: #ffffff;
}

/* ============================== MOBILE 390 ================================ */

@media (max-width: 767px) {
  .s-footer {
    min-height: 557px;
    padding-top: 0;
  }

  .s-footer .footer__secline {
    display: none;
  }

  .s-footer .footer__desktop {
    display: none;
  }

  .s-footer .footer__mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 16px 32px;
  }

  .s-footer .footer__mWordmark {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 27px; /* Figma: AUTO -> altura renderizada 27px */
    letter-spacing: 0;
    color: #ffffff;
  }

  .s-footer .footer__mTagline {
    width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: #9fc8ff;
  }

  .s-footer .footer__mGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    overflow: hidden;
  }

  .s-footer .footer__mTitle {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px; /* Figma: AUTO -> altura renderizada 13px */
    letter-spacing: 1px;
    color: #04f7f7;
  }

  .s-footer .footer__mLinks {
    width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: #ffffff;
  }

  .s-footer .footer__mDivider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
  }

  .s-footer .footer__mLegal {
    width: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    color: #9fc8ff;
  }

  /* barra [STICKY bottom] mobile: 390x72, padding 12px 16px, gap 8px.
     padding-top 11px (não 12px) porque box-sizing:border-box já consome
     1px do border-top dentro da altura de 72px (Figma: conteúdo começa em y=12
     a partir do topo do frame, sem a borda empurrar o conteúdo). */
  .s-barra {
    height: 72px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 11px 0 12px;
  }

  .s-barra .barra__inner {
    gap: 8px;
  }

  /* Mobile só mostra o grupo B ("Descubra sua posição no mercado PJ." /
     "Calcular remuneração PJ", 16188:8897) — o grupo A some. */
  .s-barra .barra__group--a {
    display: none;
  }

  .s-barra .barra__group--b {
    flex: 1 1 auto;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .s-barra .barra__group--b .barra__info {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .s-barra .barra__icon {
    display: none;
  }

  .s-barra .barra__text {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  /* no mobile o CTA da barra é ciano (LP / CTA), não ghost.
     width:auto porque aqui não há grupo A/space-between disputando espaço
     (reseta o width:283px travado no desktop, ver .barra__cta--b acima). */
  .s-barra .barra__cta--b {
    width: auto;
    height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 360px;
    background: #04f7f7;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #0e1829;
  }
}

/* Correção de consolidação: o <li> herdava o line-height do body (24px) e a
   linha ficava 5px mais alta que os 19px do link, acumulando ~30px ao longo
   das colunas. Com o link em block, a altura da linha é a do próprio texto. */
.s-footer .footer__colItem,
.s-footer .footer__brandLinksItem { line-height: 0; }

.s-footer .footer__link { display: block; }


/* Faixa 768–1099: a barra do Figma (dois grupos lado a lado) não cabe — o Figma
   só define 1920 e 390. Aqui ela assume o formato de um CTA só, como no mobile. */
@media (min-width: 768px) and (max-width: 1099px) {
  .s-barra .barra__group--a { display: none; }
  .s-barra .barra__inner { justify-content: space-between; }
  .s-barra .barra__group--b { flex: 1 1 auto; justify-content: space-between; gap: 16px; }
  .s-barra .barra__text { min-width: 0; }
  .s-barra .barra__cta--b { flex: 0 0 auto; }
}

/* ---------- Entrada ---------- */
/* O fio ciano se desenha do meio para as pontas e só depois o rodapé aparece.
   Tudo em fade puro: o rodapé tem trinta e poucos links, e deslocar esse
   bloco inteiro é movimento demais para o conteúdo menos importante da página. */
.s-footer .footer__secline { --entra-delay: 0s; --entra-dur: .9s; }
.s-footer .footer__card    { --entra-delay: .10s; }
.s-footer .footer__extra   { --entra-delay: .20s; }
.s-footer .footer__mobile  { --entra-delay: 0s; }


/* A barra e o rodapé mobile mantêm o gutter de 16 do Figma, independente do
   --gutter de 24 que as dobras passaram a usar. */
@media (max-width: 767px) {
  .s-barra .container { padding-left: 16px; padding-right: 16px; }
}

/* O Figma põe o card do rodapé em y=0 dentro do inner e deixa os 80px de folga
   só embaixo; o padding simétrico de 40 empurrava card e extra 40px para baixo. */
@media (min-width: 1024px) {
  .s-footer .footer__desktop { padding: 0 0 80px; }
}

/* ===== modal ===== */
/* ==========================================================================
   Modal "Fale com um especialista"
   ==========================================================================
   Desenho do Figma (seção "Modal — Fale com um especialista", página
   Apresentação 2): frames 960x516 no desktop e 358x616 no mobile.

   O modal deixa de ser uma coluna só e passa a ter foto. Abaixo de 1024px ela
   vira faixa no topo; de 1024 para cima, coluna à esquerda. O corte é em 1024
   e não em 768 por aritmética: o diálogo tem 960 de largura e o overlay 24 de
   folga de cada lado — 1008 no total, que não cabe numa tela de 768.

   As medidas abaixo saíram do Figma, não de estimativa: cada valor confere com
   a árvore do frame.
   ========================================================================== */

/* ---------- diálogo ---------- */
/* Empilhado por padrão: foto em cima, conteúdo embaixo. É o arranjo do mobile,
   e também o de tablet, que o Figma não desenha. */
.modal__dialog {
  max-width: 400px;          /* em 390px de tela vira 358, a largura do frame */
  padding: 0;                /* o padding agora é de cada bloco, não do diálogo */
  overflow: hidden;          /* a foto encosta na borda: o raio precisa recortar */
  display: flex;
  flex-direction: column;
}

/* ---------- foto ---------- */
.modal__foto {
  position: relative;
  flex: 0 0 auto;
  height: 132px;             /* faixa do frame mobile */
  overflow: hidden;
}

.modal__foto-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centrado. O imageTransform do Figma no modo FILL ([[1,0,0],[0,0.22,0.30]])
     NÃO é um retângulo de recorte que se converta direto em object-position: a
     proporção que ele descreve (1856x507) não bate com a da caixa (356x132).
     Em vez de deduzir errado, varri os valores contra o frame exportado —
     50% dá 11,7% de divergência e os vizinhos dão 23% e 26%. É um mínimo
     nítido: a faixa é a do meio da imagem. */
  object-position: 50% 50%;
}

/* As duas camadas que o Figma põe sobre a foto. A "grade" tinge de azul e o
   "véu" apaga a base para o conteúdo nascer do escuro sem emenda visível. */
.modal__foto-grade,
.modal__foto-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.modal__foto-grade {
  background: linear-gradient(135deg, rgba(14, 58, 122, .45), rgba(4, 17, 36, .35));
}

.modal__foto-veu {
  background: linear-gradient(180deg, rgba(8, 24, 56, 0) 0%, rgba(8, 24, 56, .10) 50%, rgba(8, 24, 56, .92) 100%);
}

/* ---------- conteúdo ---------- */
.modal__conteudo {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal__title {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.4px;
  font-weight: 700;
  color: #FFFFFF;
}

.modal__sub {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: #C9E0FF;
}

/* ---------- formulário ---------- */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* No mobile o Figma põe o e-mail antes do telefone; no desktop, depois.
   A ordem do DOM é a do desktop (nome, telefone, e-mail) e aqui ela é
   invertida — o `order` muda só a pintura, e a ordem de tabulação continua
   seguindo o DOM, que é a ordem em que a pessoa preenche. */
.modal__form .field--email { order: 1; }
.modal__form .field--telefone { order: 2; }
.modal__form .modal__btn { order: 3; }
.modal__form .modal__micro { order: 4; }

.modal__form .field__input {
  height: 48px;
  border-radius: 8px;            /* r8 no Figma */
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  font-size: 15px;
}

.modal__form .field__input::placeholder { color: rgba(255, 255, 255, .40); }

.modal__form .field__label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #C9E0FF;
}

/* o rótulo do telefone muda de texto conforme a largura (ver o comentário no
   modal.html): display:none tira o outro também da árvore de acessibilidade */
.field__label-desktop { display: none; }
.field__label-mobile { display: inline; }

.modal__btn {
  width: 100%;
  margin-top: 0;
}

.modal__micro {
  margin: 0;
  text-align: left;
}

/* ---------- fechar ---------- */
/* Sobre a foto, no mobile: precisa de peso próprio para não sumir na imagem. */
.modal__close {
  top: 12px;
  right: 12px;
  color: rgba(255, 255, 255, .70);
  z-index: 2;
}

/* ==========================================================================
   1024px para cima: duas colunas
   ========================================================================== */
@media (min-width: 1024px) {
  .modal__dialog {
    max-width: 960px;
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    padding: 16px 40px 16px 16px;
    overflow: visible;       /* a foto volta a ter raio próprio */
  }

  .modal__foto {
    flex: 0 0 348px;
    height: auto;            /* acompanha a altura da coluna de conteúdo */
    border-radius: 8px;      /* r8 no Figma */
  }

  /* Conferido nó a nó: o modal do Figma (16188:8922 e o componente 16077:40)
     usa scaleMode FILL com transform identidade — ou seja, cover centrado. O
     CROP que estava aqui ampliava ~1,42x e comia o topo da cena (os relógios
     SP/NY/LDN sumiam). */
  .modal__foto-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    max-width: none;
  }

  .modal__conteudo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 0;
    gap: 16px;
    justify-content: center;
  }

  .modal__cabecalho { gap: 12px; }

  .modal__title {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: 0;
  }

  .modal__sub {
    font-size: 15px;
    line-height: 18px;
  }

  .modal__form { gap: 16px; }

  /* no desktop volta a ordem do DOM: nome, celular, e-mail */
  .modal__form .field--email { order: 0; }
  .modal__form .field--telefone { order: 0; }

  .field__label-desktop { display: inline; }
  .field__label-mobile { display: none; }

  .modal__close { top: 20px; right: 20px; }
}

/* ==========================================================================
   Estado de sucesso: sem foto
   ==========================================================================
   A foto acompanha quem ainda está preenchendo — ao lado da confirmação ela
   não tem função. Escondida, a JS soma `.is-sucesso` ao `.modal` (ver
   _core.js) — sem isto, só o formulário sumia e a foto ficava sozinha ao
   lado de duas frases curtas: a coluna encolhia para caber o texto e a foto
   (que tem height:auto, acompanhando essa altura) virava uma fatia horizontal
   cortada no meio do rosto. Aqui o diálogo volta a ser uma coluna só, do
   tamanho de um cartão de confirmação — não há frame do Figma para este
   estado, então a medida é a mesma lógica do resto: legível, centrado, sem
   sobra. */
.modal.is-sucesso .modal__foto { display: none; }

.modal.is-sucesso .modal__dialog {
  max-width: 440px;
  flex-direction: column;
  padding: 40px 32px;
}

@media (min-width: 1024px) {
  .modal.is-sucesso .modal__dialog { padding: 48px 40px; }
}

/* O foco entra em .modal__success só para o leitor de tela anunciar a
   confirmação (ver o success.focus() em _core.js) — tabindex="-1" já tira o
   bloco do Tab, então ninguém chega até aqui pelo teclado. O anel ciano do
   :focus-visible global (_base.css) não tem função num alvo que não se
   navega; aqui ele só desenhava uma caixa em volta do texto. */
.modal__success:focus-visible { outline: none; }

/* ==========================================================================
   Dois acertos de altura que o Figma cobra
   ==========================================================================
   1. O <span> de erro fica no DOM mesmo vazio, para o leitor de tela achar a
      mensagem quando ela aparecer (aria-live implícito pelo id). Só que, vazio,
      ele continua consumindo o gap de 8px da coluna do campo: cada campo saía
      com 84px onde o Figma pede 76.
   2. O margin-top de 8px do botão vem de `.modal__form .btn` no _base.css, que
      tem especificidade maior que `.modal__btn`. Aqui o seletor é igualado.
   -------------------------------------------------------------------------- */
/* 3. O <form> traz margin-bottom: 16px do _base.css — o espaço que existia
      quando o diálogo tinha padding próprio. Agora o padding é do .modal__conteudo
      e essa margem vira 16px sobrando na altura, nos dois breakpoints. */
.modal__form { margin-bottom: 0; }

.modal__form .field__error:empty { display: none; }
.modal__form .modal__btn { margin-top: 0; }