/* ===== base ===== */
/* ============================================================
   LP TI/DEV — Meio (Calculadora CLT x PJ) — 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 */

  /* 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: 16px;

  /* 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; } }

/* ---------- 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 24px;
  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(--txt-dark, #0E1829);
}
.btn--cyan:hover { background: var(--ciano-hover, #00D9D9); }

.btn--ghost {
  background: transparent;
  color: var(--txt-title, #FFFFFF);
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, .16));
}
.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[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); }

.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; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 36, .78);
  backdrop-filter: blur(6px);
}

.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 var(--glass-stroke, rgba(255, 255, 255, .16));
  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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
    scroll-behavior: auto;
  }
}

/* ---------- 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;
}

/* na calculadora o campo é transparente sobre a cena: o inset usaria uma cor
   sólida e criaria um retângulo. Aqui só o texto e o cursor são corrigidos. */
.s-calc input:-webkit-autofill,
.s-calc input:-webkit-autofill:hover,
.s-calc input:-webkit-autofill:focus,
.s-calc 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) {
  .s-header .header__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- 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: 180px;
  height: 26px;
}

/* ---------- Bloco da direita: links (gap 40) + CTA (gap 40) ---------- */
.s-header .header__right {
  display: flex;
  align-items: center;
  gap: 40px;
  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: 40px;
  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: h 36, radius 5000, stroke 1px #FFFFFF (INSIDE), padding 16,
   texto Inter Bold 16/1.2 #FFFFFF. Os 15px + 1px de borda somam os 16px
   do Figma (lá o stroke INSIDE é pintado por cima do padding). */
.s-header .header__cta {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 15px;
  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  (key: hero)
   Desktop: node 14150:11355 — 1920x600 (fundo #041329, clipsContent)
   Mobile : node 14150:11940 / "Hero navy" 14150:11941 — 390x612

   Empilhamento no Figma (de baixo para cima)
   Desktop: Hero photo -> Shade left -> Container (H1+sub+CTA)
            -> Group 1171275239 (codigo) -> Hero photo RECORTE
   Mobile : Hero photo -> Group (codigo) -> RECORTE -> Shade -> Ellipse
            -> H1 -> Sub -> CTA -> Arc glow -> Arc halo
   A ordem do HTML segue o mobile; no desktop o z-index reordena shade/codigo.
   ========================================================================== */

.s-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  background: #041329;
}

/* --- Hero photo (14150:11356) --------------------------------------------
   1920x600, fill IMAGE scaleMode FILL, imageTransform identidade
   => object-fit: cover / object-position: center.                          */

.s-hero .hero__photo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Shade left (14150:11357) --------------------------------------------
   1920x606 em x=0 y=0, GRADIENT_LINEAR com gradientTransform identidade
   (= 90deg, da esquerda para a direita).                                   */

.s-hero .hero__shade {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 606px;
  background-image: linear-gradient(
    90deg,
    rgba(4, 2, 12, 1) 0%,
    rgba(4, 2, 12, .72) 33%,
    rgba(4, 2, 12, .25) 67%,
    rgba(4, 2, 12, .05) 100%
  );
}

/* --- Container / Copy (14150:11358) ---------------------------------------
   Container 1200 em x=360 y=164. Copy 660x272:
   H1 y=0 h=124 | Sub y=144 h=56 (gap 20) | CTA y=224 h=48 (gap 24).        */

.s-hero .hero__container {
  position: absolute;
  left: 0;
  right: 0;
  top: 164px;
  z-index: 3;
}

.s-hero .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 660px;
}

.s-hero .hero__headline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* H1 (14150:11362) — Inter Extra Bold 56/62, letter-spacing -3% = -1.68px.
   Fill dos trechos nao-keyword: GRADIENT_LINEAR #FFFFFF -> #8AB4FF com
   gradientTransform [[0.4,0.75,0],[-0.55,0.3,0.6]]. Em coordenadas
   normalizadas t = 0.4u + 0.75v: sobre a caixa 660x124 isso da 174.28deg e
   t vai de 0 (canto sup. esq.) a 1.15 (canto inf. dir.), logo a 2a parada
   fica em 1/1.15 = 86.96%.                                                 */

.s-hero .hero__title {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 56px;
  line-height: 62px;
  letter-spacing: -1.68px;
  background-image: linear-gradient(174.28deg, #FFFFFF 0%, #8AB4FF 86.96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* "backlog" — Inter Extra Bold Italic 56/62, SOLID #04F7F7.
   Precisa reverter o text-fill herdado do gradiente do H1.                 */
.s-hero .hero__title .kw {
  font-weight: 800;
  font-style: italic;
  color: #04F7F7;
  -webkit-text-fill-color: #04F7F7;
}

/* Sub (14150:11363) — Inter Regular 18/28, letter-spacing -1% = -0.18px,
   #CCD4E8, caixa de 395px de largura (2 linhas).                           */

/* O deslocamento de 1px compensa a diferenca entre a caixa de linha do
   Figma e a do navegador (mede-se 1px acima da referencia sem ele). */
.s-hero .hero__sub {
  position: relative;
  top: 1px;
  width: 100%;
  max-width: 395px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #CCD4E8;
}

/* CTA (instancia LP / CTA 14150:11364) — h 48, radius 360 (pill), fundo
   #04F7F7, padding lateral 32, label Inter Semi Bold 16/24 #002868.
   Altura/raio/fundo vem do .btn/.btn--cyan globais.                        */

.s-hero .hero__cta {
  padding-left: 32px;
  padding-right: 32px;
  color: #002868;
}

/* --- Group 1171275239 — overlay de codigo --------------------------------
   3 "Code viewport [mask]" de 270x330, rotacao Figma -10deg (= +10deg CSS),
   transform-origin no canto superior esquerdo.
   Dentro, "Code scroller" 270x826 em x=-73.379 y=-13.266, rotacao Figma
   +15.506deg (= -15.506deg CSS) -> rotacao absoluta resultante de -5.5deg.
   Opacidade dos viewports: A = 1, B = 0.18, C = 0.18.
   x do viewport no frame 1920 -> left: calc(50% + (x - 960)px).            */

.s-hero .hero__code {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.s-hero .hero__code-viewport {
  position: absolute;
  width: 270px;
  height: 330px;
  transform-origin: 0 0;
  transform: rotate(10deg);
}

/* 14150:11366 — x=1139.96 y=54.72, opacidade 1 */
.s-hero .hero__code-viewport--a {
  left: calc(50% + 179.96px);
  top: 54.72px;
  opacity: 1;
}

/* 14150:11413 — x=1499.96 y=84.72, opacidade 0.18 */
.s-hero .hero__code-viewport--b {
  left: calc(50% + 539.96px);
  top: 84.72px;
  opacity: .18;
}

/* 14150:11460 — x=939.96 y=4.72, opacidade 0.18 */
.s-hero .hero__code-viewport--c {
  left: calc(50% - 20.04px);
  top: 4.72px;
  opacity: .18;
}

/* Scroller: loop de 8s transladando -430px no eixo Y LOCAL (por isso o
   translateY vem depois do rotate na lista de transforms).                 */

.s-hero .hero__code-scroller {
  position: absolute;
  left: -73.379px;
  top: -13.266px;
  width: 270px;
  height: 826px;
  transform-origin: 0 0;
  transform: rotate(-15.506deg);
  will-change: transform;
  animation: hero-code-scroll 8s linear infinite;
}

/* Copias do bloco de codigo empilhadas de 430 em 430px (14150:11371 em y=0
   e 14150:11372 em y=430). A 3a copia existe so para o loop.               */

.s-hero .hero__code-copy {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 430px);
  width: 258px;
  height: 396px;
}

/* Code overlay (14150:11371) — TEXT 258x396, Inter Regular 14/22,
   letter-spacing 0, opacidade da camada 0.92. NAO e fonte monoespacada.    */

.s-hero .hero__code-block {
  width: 258px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  white-space: pre;
  opacity: .92;
  color: #CCD4E8;
}

.s-hero .hero__tk-cy { color: #04F7F7; }
.s-hero .hero__tk-df { color: #CCD4E8; }
.s-hero .hero__tk-wh { color: #FFFFFF; }
.s-hero .hero__tk-cm { color: #AADFC1; }

/* Cursor (14150:11392) — 7x15 em x=168 y=379 dentro do scroller (mesma
   origem da copia), SOLID #04F7F7, sem raio, opacidade 1.                  */

.s-hero .hero__cursor {
  position: absolute;
  left: 168px;
  top: 379px;
  width: 7px;
  height: 15px;
  background: #04F7F7;
  animation: hero-blink .9s step-end infinite;
}

/* --- Hero photo RECORTE (14150:11507) -------------------------------------
   Retangulo 919x600 em x=1001, 2o fill IMAGE scaleMode CROP com
   imageTransform [[0.47865,0,0.52135],[0,0.5599,0.22005]] — a regiao
   recortada coincide exatamente com o enquadramento da foto de base
   (escala 0.8 nos dois eixos), entao basta repetir cover/center e cortar a
   esquerda em 52.135% da largura (= 1001px em 1920).                       */

.s-hero .hero__cutout {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* O stakeholder aplicou o "Remover fundo" no 2º fill em 15/09: o recorte deixou
   de ser a própria foto cortada em x=1001 e virou uma imagem com transparência
   (hash 688d75dd85), com CROP [[1,0,0],[0,0.5599,0.2201]]. Esse crop resulta em
   cobertura centralizada — a mesma da foto base — então o corte lateral saiu. */

/* Elipse de luz e arcos so existem no frame mobile do Figma. */
.s-hero .hero__ellipse,
.s-hero .hero__arc {
  display: none;
}

/* --- Animacoes ----------------------------------------------------------- */

/* O loop percorre 430px (a distancia entre duas copias), entao a FASE
   inicial e arbitraria: 142 -> -288 e a mesma volta de 430px, so comecando
   noutro ponto. A fase foi escolhida para que a pose exibida coincida com o
   frame estatico do Figma. Se mexer no valor, mantenha to = from - 430. */
@keyframes hero-code-scroll {
  from { transform: rotate(-15.506deg) translateY(142px); }
  to   { transform: rotate(-15.506deg) translateY(-288px); }
}

@keyframes hero-blink {
  50% { opacity: 0; }
}

/* ==========================================================================
   Mobile — frame 390 (node 14150:11940 / 14150:11941)
   ========================================================================== */

@media (max-width: 767px) {

  .s-hero {
    min-height: 612px;
  }

  /* Hero photo (14150:11942) — retangulo 390x927 em x=0 y=0, fill IMAGE
     scaleMode CROP, imageTransform [[0.49864,0,0.50079],[0,2.07087,0.14757]].
     Recorte = x 1201.9..2398.6 / y 197.7..2972.7 da imagem 2400x1340, logo a
     imagem inteira fica em 782.12 x 447.64 deslocada -391.68 / -66.05.
     (equivale a object-position ~ 100% 0 com escala nao uniforme)
     max-width: none e obrigatorio por causa do reset global img{max-width:100%}. */
  .s-hero .hero__photo {
    left: -366.67px;
    top: -66.05px;
    width: 782.12px;
    max-width: none;
    height: 447.64px;
    object-fit: fill;
  }

  .s-hero .hero__code {
    z-index: 2;
  }

  /* 14150:11944 — x=154.30 y=40, opacidade 1 */
  .s-hero .hero__code-viewport--a {
    left: 154.3px;
    top: 40px;
    opacity: 1;
  }

  /* 14150:11991 — x=514.30 y=70, opacidade 0.18 (fora da viewport de 390) */
  .s-hero .hero__code-viewport--b {
    left: 514.3px;
    top: 70px;
    opacity: .18;
  }

  /* 14150:12038 — x=-45.70 y=-10, opacidade 0.18 */
  .s-hero .hero__code-viewport--c {
    left: -45.7px;
    top: -10px;
    opacity: .18;
  }

  /* RECORTE (14150:12085) — mesmo retangulo e mesmo imageTransform da foto,
     sem corte lateral.                                                      */
  .s-hero .hero__cutout {
    left: -366.67px;
    top: -66.05px;
    z-index: 3;
    width: 782.12px;
    max-width: none;
    height: 447.64px;
    object-fit: fill;
    -webkit-clip-path: none;
    clip-path: none;
  }

  /* Shade (14150:12086) — 390x670 em x=0 y=0, GRADIENT_LINEAR vertical:
     t=0 em y=217.5px e t=1 em y=325px (parada do meio em y=260.8px).        */
  .s-hero .hero__shade {
    z-index: 4;
    height: 670px;
    background-image: linear-gradient(
      180deg,
      rgba(4, 2, 12, 0) 217.5px,
      rgba(4, 17, 36, .75) 260.8px,
      rgba(4, 19, 41, 1) 325px
    );
  }

  /* Ellipse (14150:12087) — 360x360 em x=260 y=-140, fill #04F7F7 a 18%,
     opacidade da camada 0.5, LAYER_BLUR 110 -> blur(55px).                  */
  .s-hero .hero__ellipse {
    display: block;
    position: absolute;
    left: 260px;
    top: -140px;
    z-index: 5;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(4, 247, 247, .18);
    filter: blur(55px);
    opacity: .5;
  }

  /* H1 y=296 (338x132) | Sub y=448 (358x56, gap 20) | CTA y=524 (358x48,
     gap 20). Todos com x=16 = padding do .container no mobile.              */
  .s-hero .hero__container {
    top: 296px;
    z-index: 6;
  }

  .s-hero .hero__copy {
    width: 100%;
    align-items: stretch;
    gap: 20px;
  }

  /* H1 (14150:12088) — Inter Bold 36/44, letter-spacing -3% = -1.08px.
     Mesmo gradiente; na caixa 338x132 o angulo equivalente e 168.23deg.     */
  .s-hero .hero__title {
    max-width: 338px;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1.08px;
    background-image: linear-gradient(168.23deg, #FFFFFF 0%, #8AB4FF 86.96%);
  }

  .s-hero .hero__title .kw {
    font-weight: 700;
  }

  /* Sub (14150:12089) — mesma tipografia do desktop, caixa de 358.          */
  .s-hero .hero__sub {
    max-width: 358px;
  }

  /* CTA (14150:12090) — 358x48, padding lateral 28, largura total. No
     mobile o label usa outro token de cor: #0E1829 (no desktop e #002868). */
  .s-hero .hero__cta {
    padding-left: 28px;
    padding-right: 28px;
    color: #0E1829;
  }

  /* Arc glow (14150:12091) e Arc halo (14150:12092) — elipses 700x700 em
     x=130 y=320 (centro 480/670, raio 350), sem fill, stroke INSIDE com
     GRADIENT_LINEAR horizontal (gradientTransform identidade) e LAYER_BLUR.
     Em CSS o filter e aplicado ANTES da mascara, entao o desfoque do traco
     e reproduzido por uma mascara radial "penteada" (ring suave) e a caixa
     e ampliada para o desfoque poder extravasar o raio de 350px.
     O background-size de 700px mantem o gradiente sobre a bbox original.    */
  .s-hero .hero__arc {
    display: block;
    position: absolute;
    border-radius: 50%;
    opacity: .35;
    background-image: linear-gradient(
      90deg,
      rgba(4, 247, 247, 0) 0%,
      rgba(17, 105, 245, .9) 50%,
      rgba(4, 247, 247, .8) 66%,
      rgba(4, 247, 247, 0) 100%
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: 700px 100%;
    pointer-events: none;
  }

  /* stroke 2.5px + LAYER_BLUR 5 (= blur 2.5px): caixa 700+2*12 */
  .s-hero .hero__arc--glow {
    left: 118px;
    top: 308px;
    z-index: 7;
    width: 724px;
    height: 724px;
    -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
      rgba(0, 0, 0, 0) 341px,
      rgba(0, 0, 0, .45) 348.75px,
      rgba(0, 0, 0, 0) 357px);
    mask-image: radial-gradient(circle closest-side at 50% 50%,
      rgba(0, 0, 0, 0) 341px,
      rgba(0, 0, 0, .45) 348.75px,
      rgba(0, 0, 0, 0) 357px);
  }

  /* stroke 18px + LAYER_BLUR 60 (= blur 30px): caixa 700+2*60 */
  .s-hero .hero__arc--halo {
    left: 70px;
    top: 260px;
    z-index: 8;
    width: 820px;
    height: 820px;
    -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
      rgba(0, 0, 0, 0) 290px,
      rgba(0, 0, 0, .28) 315px,
      rgba(0, 0, 0, .5) 341px,
      rgba(0, 0, 0, .28) 367px,
      rgba(0, 0, 0, 0) 392px);
    mask-image: radial-gradient(circle closest-side at 50% 50%,
      rgba(0, 0, 0, 0) 290px,
      rgba(0, 0, 0, .28) 315px,
      rgba(0, 0, 0, .5) 341px,
      rgba(0, 0, 0, .28) 367px,
      rgba(0, 0, 0, 0) 392px);
  }
}

/* ==========================================================================
   Acessibilidade — respeita a preferencia por menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .s-hero .hero__code-scroller,
  .s-hero .hero__cursor {
    animation: none;
  }
}

/* texto sem quebra fixa: quebra no limite da caixa */

/* ------------------------------------------------------------------
   Faixa 391–767px: o Figma só tem 390. As camadas da cena estão em px
   absolutos, então esticar a janela traria para dentro da tela os blocos
   de código que no design ficam fora dela. Aqui a cena é ancorada no
   centro, mantendo a mesma composição de 390 em qualquer largura, e a
   foto passa a cobrir a seção inteira.
   ------------------------------------------------------------------ */
@media (min-width: 391px) and (max-width: 767px) {
  /* A cena de código vira uma janela de 390px centralizada, com as camadas nos
     mesmos x do Figma. O que no design fica fora da tela continua fora, em vez
     de aparecer quando a janela cresce. */
  .s-hero .hero__code {
    left: 50%;
    width: 390px;
    margin-left: -195px;
    overflow: hidden;
  }

  /* A foto mantém o MESMO enquadramento do frame de 390, só que proporcional:
     as medidas viram porcentagem da largura (782/390 = 200,51%, deslocamento
     -366,67/390 = -94,02%) e o recuo vertical vira translate sobre a própria
     altura (-66,05/447,64 = -14,75%). Assim a pessoa fica no mesmo lugar do
     design em qualquer largura desta faixa. */
  .s-hero .hero__photo,
  .s-hero .hero__cutout {
    left: -94.02%;
    top: 0;
    width: 200.51%;
    height: auto;
    aspect-ratio: 782 / 447.64;
    transform: translateY(-14.75%);
    object-fit: fill;
  }

  /* o texto acompanha o container, sem esticar além da caixa do design */
  .s-hero .hero__copy { max-width: 358px; }
}

/* ==========================================================================
   As camadas de imagem do hero não capturam clique
   ==========================================================================
   O recorte da pessoa (.hero__cutout) é z-index 5 e cobre os 1440x600 do hero
   inteiro; o bloco de texto com o CTA é z-index 3, por baixo. Resultado medido:
   no desktop e no tablet, clicar em "Calcular remuneração PJ" não fazia NADA —
   sem rolagem, sem evento no dataLayer. O pixel do recorte é transparente ali,
   mas pixel transparente continua recebendo clique. No mobile funcionava, e foi
   por isso que passou despercebido.

   O .hero__code já tinha essa regra; faltava nas outras camadas. São todas
   decorativas — nenhuma tem estado, link ou foco. Não muda um pixel. */
.s-hero .hero__photo,
.s-hero .hero__cutout,
.s-hero .hero__shade,
.s-hero .hero__ellipse,
.s-hero .hero__arc {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   768–1023px: o texto passa à frente do recorte
   --------------------------------------------------------------------------
   O recorte da pessoa é z-index 5 e o bloco de copy é 3. No mobile o bloco
   `max-width: 767px` já inverte isso; no desktop a coluna de texto fica na
   metade esquerda, onde o recorte é transparente. A faixa de tablet ficou sem
   tratamento — e é justamente onde o container é largo e a parte opaca do
   recorte (rosto e tampa do notebook) cai em cima do fim das linhas.

   Medido, % de pixels pintados da palavra "mais." (o fim do subtítulo):
     740 e 767px .... 32,6%   (correto, é o bloco mobile)
     768px ..........  0,3%   a palavra não é desenhada
     800px ..........  0,1%
     834px ..........  3,2%
     860px .......... 13,3%
     880px .......... 22,0%
     900px em diante  32,0%   (correto)

   Ou seja: em iPad em retrato a manchete perdia o "no" e o "?", e o subtítulo
   parava em "para gan". É o texto de maior peso de conversão da página.

   É a MESMA camada que tinha matado o clique do CTA. Lá o conserto foi
   pointer-events; aqui é a ordem de pintura.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-hero .hero__container { z-index: 6; }
}

/* ===== calc ===== */
/* ==========================================================================
   s-calc — Calculadora "Lâmina CLT|PJ" (3 etapas num único DOM)
   Figma desktop: set 14296:2786 (E1 14296:2787 · E2 14296:2855 · E3 14296:2911) — 1920x795
   Figma mobile:  set 14296:3168 (E1 14296:3169 · E2 14296:3232 — 390x665 · E3 14296:3288 — 390x787)
   Estado: atributo data-etapa="1|2|3" na raiz. O CSS mostra/esconde e MOVE as camadas.
   Smart Animate do Figma: 0.6s ease-out → transition .6s cubic-bezier(0,0,.58,1).
   Elementos de cena posicionados relativo ao centro: left: calc(50% + (X_figma - 960)px)
   As camadas da cena continuam com 980px de altura (o frame de 795 as corta).
   ========================================================================== */

.s-calc {
  --calc-dur: .6s;
  --calc-ease: cubic-bezier(0, 0, .58, 1);
  position: relative;
  width: 100%;
  min-height: 795px;
  overflow: hidden;
  background: #041124;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   Transições compartilhadas (equivalente CSS do Smart Animate)
   -------------------------------------------------------------------------- */

.s-calc .calc__cena > *,
.s-calc .calc__handle,
.s-calc .calc__etapa,
.s-calc .calc__skeleton,
.s-calc .calc__sk,
.s-calc .calc__e1,
.s-calc .calc__e2,
.s-calc .calc__e3 {
  transition:
    left var(--calc-dur) var(--calc-ease),
    right var(--calc-dur) var(--calc-ease),
    top var(--calc-dur) var(--calc-ease),
    width var(--calc-dur) var(--calc-ease),
    height var(--calc-dur) var(--calc-ease),
    transform var(--calc-dur) var(--calc-ease),
    background-color var(--calc-dur) var(--calc-ease),
    opacity var(--calc-dur) var(--calc-ease);
}

/* --------------------------------------------------------------------------
   CENA
   -------------------------------------------------------------------------- */

.s-calc .calc__cena {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* clt-half · #081838 */
.s-calc .calc__clt-half {
  position: absolute;
  top: 0;
  left: calc(50% - 960px);
  width: 1160px;
  height: 980px;
  background: #081838;
}

.s-calc[data-etapa="2"] .calc__clt-half { width: 800px; }
.s-calc[data-etapa="3"] .calc__clt-half { width: 0; opacity: 0; }

/* vinheta · elipse 1400x1400 em (-400,-500) · #0b1f48 70% · LAYER_BLUR 220 */
.s-calc .calc__vinheta {
  position: absolute;
  top: -500px;
  left: calc(50% - 1360px);
  width: 1400px;
  height: 1400px;
  border-radius: 50%;
  background: rgba(11, 31, 72, 0.7);
  filter: blur(110px);
}

.s-calc[data-etapa="3"] .calc__vinheta { opacity: 0; }

/* pj-half · #041124 */
.s-calc .calc__pj-half {
  position: absolute;
  top: 0;
  left: calc(50% + 200px);
  width: 760px;
  height: 980px;
  background: #041124;
}

.s-calc[data-etapa="2"] .calc__pj-half { left: calc(50% - 247px); width: 1120px; }
.s-calc[data-etapa="3"] .calc__pj-half { left: calc(50% - 960px); width: 1920px; }

/* luz · elipse 900x900 · #04f7f7 12% · LAYER_BLUR 200 */
.s-calc .calc__luz {
  position: absolute;
  top: 40px;
  left: calc(50% - 250px);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: rgba(4, 247, 247, 0.12);
  filter: blur(100px);
}

.s-calc[data-etapa="2"] .calc__luz { left: calc(50% - 697px); }
.s-calc[data-etapa="3"] .calc__luz { left: calc(50% - 1410px); }

/* feixe · retângulo 1400x140 girado · LAYER_BLUR 60 */
.s-calc .calc__feixe {
  position: absolute;
  top: 550.44px;
  left: calc(50% - 274.8px);
  width: 1400px;
  height: 140px;
  transform-origin: 50% 50%;
  transform: rotate(28deg);
  background: linear-gradient(
    90deg,
    rgba(4, 247, 247, 0) 0%,
    rgba(4, 247, 247, 0.06) 50%,
    rgba(4, 247, 247, 0) 100%
  );
  filter: blur(30px);
}

.s-calc[data-etapa="2"] .calc__feixe { left: calc(50% - 361.8px); }

.s-calc[data-etapa="3"] .calc__feixe {
  top: 610.554px;
  left: calc(50% - 602.51px);
  transform: rotate(-5.814deg);
}

/* light-leak · 120x980 · gradiente 0 → #04f7f7 10% */
.s-calc .calc__light-leak {
  position: absolute;
  top: 0;
  left: calc(50% + 80px);
  width: 120px;
  height: 980px;
  background: linear-gradient(90deg, rgba(4, 247, 247, 0) 0%, rgba(4, 247, 247, 0.1) 100%);
}

.s-calc[data-etapa="2"] .calc__light-leak { left: calc(50% - 367px); }
.s-calc[data-etapa="3"] .calc__light-leak { opacity: 0; }

/* lamina-glow · 28x980 · #04f7f7 30% · LAYER_BLUR 28 */
.s-calc .calc__lamina-glow {
  position: absolute;
  top: 0;
  left: calc(50% + 186px);
  width: 28px;
  height: 980px;
  background: rgba(4, 247, 247, 0.3);
  filter: blur(14px);
}

.s-calc[data-etapa="2"] .calc__lamina-glow { left: calc(50% - 261px); }
.s-calc[data-etapa="3"] .calc__lamina-glow { left: calc(50% - 973px); }

/* lamina · 2x980 · gradiente vertical 0 → #04f7f7 → 0 */
.s-calc .calc__lamina {
  position: absolute;
  top: 0;
  left: calc(50% + 199px);
  width: 2px;
  height: 980px;
  background: linear-gradient(
    180deg,
    rgba(4, 247, 247, 0) 0%,
    #04f7f7 50%,
    rgba(4, 247, 247, 0) 100%
  );
}

.s-calc[data-etapa="2"] .calc__lamina { left: calc(50% - 248px); }
.s-calc[data-etapa="3"] .calc__lamina { left: calc(50% - 960px); }

/* ticks · 24x2 em y940 (ficam abaixo do corte de 795 no frame novo) */
.s-calc .calc__tick {
  position: absolute;
  top: 940px;
  width: 24px;
  height: 2px;
}

.s-calc .calc__tick--1 { left: calc(50% + 171px); background: #04f7f7; }
.s-calc .calc__tick--2 { left: calc(50% + 203px); background: rgba(255, 255, 255, 0.2); }

.s-calc[data-etapa="2"] .calc__tick--1 { left: calc(50% - 276px); }
.s-calc[data-etapa="2"] .calc__tick--2 { left: calc(50% - 244px); background: #04f7f7; }

.s-calc[data-etapa="3"] .calc__tick--1 { opacity: 0; }
.s-calc[data-etapa="3"] .calc__tick--2 { left: calc(50% - 958px); background: #04f7f7; }

/* --------------------------------------------------------------------------
   HANDLE · 56x56 em y162 (x1132 · E2 x686 · E3 x-28)
   -------------------------------------------------------------------------- */

.s-calc .calc__handle {
  position: absolute;
  top: 162px;
  left: calc(50% + 172px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgba(4, 247, 247, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 32px 0 rgba(4, 247, 247, 0.45);
  cursor: grab;
  touch-action: none;
  font-family: inherit;
}

.s-calc .calc__handle:active { cursor: grabbing; }

.s-calc[data-etapa="2"] .calc__handle { left: calc(50% - 274px); }

.s-calc[data-etapa="3"] .calc__handle {
  left: calc(50% - 988px);
  cursor: default;
  pointer-events: none;
}

.s-calc .calc__handle-glifo {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
}

.s-calc .calc__handle-glifo--cima,
.s-calc .calc__handle-glifo--baixo { display: none; }

/* --------------------------------------------------------------------------
   INDICADOR DE ETAPA · y38 · x1041 (E2 x593)
   -------------------------------------------------------------------------- */

.s-calc .calc__etapa {
  position: absolute;
  top: 38px;
  left: calc(50% + 81px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 17px;
  margin: 0;
  overflow: hidden;
}

.s-calc[data-etapa="2"] .calc__etapa { left: calc(50% - 367px); }
.s-calc[data-etapa="3"] .calc__etapa { opacity: 0; visibility: hidden; }

.s-calc .calc__etapa-texto {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #8fa3cc;
  white-space: nowrap;
}

.s-calc .calc__etapa-texto--2,
.s-calc[data-etapa="2"] .calc__etapa-texto--1 { display: none; }
.s-calc[data-etapa="2"] .calc__etapa-texto--2 { display: inline; }

.s-calc .calc__etapa-dash {
  flex: none;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color var(--calc-dur) var(--calc-ease);
}

.s-calc .calc__etapa-dash--1 { background: #04f7f7; }
.s-calc[data-etapa="2"] .calc__etapa-dash--2 { background: #04f7f7; }

/* --------------------------------------------------------------------------
   SKELETON PJ · 420x760 em (1220,176) · E2 560x760 em (1140,176)
   -------------------------------------------------------------------------- */

.s-calc .calc__skeleton {
  position: absolute;
  top: 176px;
  left: calc(50% + 260px);
  z-index: 1;
  width: 420px;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
}

.s-calc[data-etapa="2"] .calc__skeleton { left: calc(50% + 180px); width: 560px; }
.s-calc[data-etapa="3"] .calc__skeleton { opacity: 0; }

.s-calc .calc__sk {
  position: absolute;
  left: 0;
  display: block;
  height: 16px;
  border-radius: 8px;
  background: rgba(4, 247, 247, 0.14);
}

.s-calc .calc__sk--chip-a,
.s-calc .calc__sk--chip-b {
  top: 0;
  height: 44px;
  border-radius: 16px;
  background: rgba(4, 247, 247, 0.12);
}

.s-calc .calc__sk--chip-a { width: 280px; }
.s-calc .calc__sk--chip-b { left: 292px; width: 128px; }

.s-calc .calc__sk--bar-1 { top: 196px; width: 220px; }
.s-calc .calc__sk--bar-2 { top: 332px; width: 140px; }
.s-calc .calc__sk--bar-3 { top: 396px; width: 120px; }
.s-calc .calc__sk--bar-4 { top: 460px; width: 90px; }
.s-calc .calc__sk--bar-5 { top: 524px; width: 110px; }
.s-calc .calc__sk--bar-6 { top: 588px; width: 130px; }
.s-calc .calc__sk--bar-7 { top: 652px; width: 200px; }

.s-calc[data-etapa="2"] .calc__sk--chip-a { width: 360px; height: 64px; }
.s-calc[data-etapa="2"] .calc__sk--chip-b { left: 376px; width: 200px; height: 64px; }
.s-calc[data-etapa="2"] .calc__sk--bar-1 { width: 286px; }
.s-calc[data-etapa="2"] .calc__sk--bar-2 { width: 182px; }
.s-calc[data-etapa="2"] .calc__sk--bar-3 { width: 156px; }
.s-calc[data-etapa="2"] .calc__sk--bar-4 { width: 117px; }
.s-calc[data-etapa="2"] .calc__sk--bar-5 { width: 143px; }
.s-calc[data-etapa="2"] .calc__sk--bar-6 { width: 169px; }
.s-calc[data-etapa="2"] .calc__sk--bar-7 { width: 260px; }

/* shimmer — só existe no mobile do Figma */
.s-calc .calc__sk-shimmer { display: none; }

/* --------------------------------------------------------------------------
   CAMADAS DE CONTEÚDO — visibilidade por etapa
   -------------------------------------------------------------------------- */

.s-calc .calc__e1,
.s-calc .calc__e2,
.s-calc .calc__e3 {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--calc-dur) var(--calc-ease),
    visibility 0s linear var(--calc-dur);
}

.s-calc[data-etapa="1"] .calc__e1,
.s-calc[data-etapa="2"] .calc__e2,
.s-calc[data-etapa="3"] .calc__e3 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--calc-dur) var(--calc-ease),
    visibility 0s linear 0s;
}

/* ==========================================================================
   ETAPA 1 — coluna CLT (Figma 14296:2805 · x360 y43 640x710)
   ========================================================================== */

.s-calc .calc__coluna-clt {
  position: absolute;
  top: 43px;
  left: max(24px, calc(50% - 600px));
  /* 60.42% = 1160/1920 (largura do lado CLT): a coluna nunca invade a lâmina */
  width: min(640px, calc(60.42% - 48px));
  /* spacer 36 + gap 26 = 62 no topo · gap 26 + spacer 16 = 42 embaixo */
  padding: 62px 0 42px;
  margin: 0;
  border: 0;
}

.s-calc .calc__title {
  margin: 0;
  font-weight: 300;
  /* 56/60 em 1280+ · interpola até 34/38 (valor do frame mobile) em 768 */
  font-size: clamp(34px, 4.375vw, 56px);
  line-height: clamp(38px, 4.6875vw, 60px);
  letter-spacing: 0;
  color: #ffffff;
}

.s-calc .calc__sub {
  margin: 9px 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.40625vw, 18px);
  line-height: clamp(22px, 2.1875vw, 28px);
  color: #c9e0ff;
}

.s-calc .calc__linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  /* Figma: altura 60 com stroke INSIDE 1px */
  padding: 14px 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.s-calc .calc__linha--principal { padding: 20px 0 11px; }

.s-calc .calc__label {
  flex: none;
  margin: 0;
  font-weight: 400;
  font-size: clamp(14px, 1.171875vw, 15px);
  line-height: 18px;
  color: #ffffff;
  white-space: nowrap;
}

/* tag "(opcional)" ao lado do rótulo (Figma 14296:2819) */
.s-calc .calc__opcional {
  flex: none;
  font-weight: 400;
  font-size: clamp(11px, 0.9375vw, 12px);
  line-height: 15px;
  letter-spacing: 0.96px;
  color: #667799;
  white-space: nowrap;
}

.s-calc .calc__valor {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* no campo principal o caret ciano do Figma encosta no número (x=158 numa caixa de 160) */
.s-calc .calc__valor--principal { gap: 0; }
.s-calc .calc__valor--principal .calc__prefixo { margin-right: 8px; }

.s-calc .calc__prefixo {
  flex: none;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #667799;
}

.s-calc .calc__input {
  flex: none;
  width: var(--vw, 52px);
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 2.1875vw, 28px);
  line-height: 34px;
  text-align: right;
  color: #ffffff;
  appearance: none;
}

.s-calc .calc__input--principal {
  height: 48px;
  font-size: clamp(30px, 3.125vw, 40px);
  line-height: 48px;
  caret-color: #04f7f7;
}

.s-calc .calc__valor--zero .calc__input { color: #667799; }

/* caret desenhado no Figma · 2x36 #04f7f7 · afastado do número em 8px */
.s-calc .calc__caret--principal {
  pointer-events: none;
  animation: calc-blink .9s step-end infinite;
  flex: none;
  width: 2px;
  height: 36px;
  margin-left: 8px;
  background: #04f7f7;
}

/* As barras acima são o desenho do estado PARADO, igual à do campo Nome.
   Enquanto alguém digita, quem marca a posição é o cursor nativo — que agora
   é ciano. Sem isto a barra fica encalhada no fim do número: quem clica no
   meio de "12.345" e digita não tem cursor nenhum na tela, porque o nativo
   estava transparente e o desenhado não acompanha o ponto de inserção.

   O escopo do salário é a coluna inteira, não o campo: com :focus-within só
   no próprio campo, digitar no VR/VA deixava a barra do salário piscando ao
   lado do cursor do VR/VA — duas barras na tela.

   visibility e não display: são itens de flex em fluxo, e display:none
   encolheria a linha, empurrando o número para a direita. */
.s-calc .calc__coluna-clt:focus-within .calc__caret--principal,
.s-calc .calc__pj-valor:focus-within .calc__caret--proposta {
  visibility: hidden;
}

.s-calc .calc__cta-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;
}

/* CTA — pill 48px (o montador define .btn/.btn--cyan; aqui só as medidas do Figma) */
.s-calc .calc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #04f7f7;
  color: #041124;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.s-calc .calc__cta--e1,
.s-calc .calc__cta--e2 { width: 229px; }

.s-calc .calc__cta-texto {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #041124;
  white-space: nowrap;
}

.s-calc .calc__cta-seta {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #041124;
}

/* ==========================================================================
   ETAPA 2 — resumo + card-fronteira (Figma 14296:2855)
   ========================================================================== */

.s-calc .calc__resumo {
  position: absolute;
  top: 88px;
  left: max(24px, calc(50% - 600px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: min(712px, calc(100% - 48px));
  overflow: hidden;
}

.s-calc .calc__resumo-valor {
  margin: 0;
  font-weight: 300;
  font-size: 28px;
  line-height: 34px;
  color: #ffffff;
}

.s-calc .calc__resumo-editar {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #04f7f7;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  white-space: nowrap;
}

/* card-fronteira · 560x530 em (360,190) · radius 16 · vidro */
.s-calc .calc__card {
  position: absolute;
  top: 190px;
  left: max(24px, calc(50% - 600px));
  width: min(560px, calc(100% - 48px));
  height: 530px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 48px 0 rgba(4, 247, 247, 0.18), 0 24px 64px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* stroke INSIDE 1px em gradiente vertical rgba(255,255,255,.28) → rgba(255,255,255,.06) */
.s-calc .calc__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.s-calc .calc__card-veu {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(8, 24, 56, 0.22);
  pointer-events: none;
}

.s-calc .calc__card-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  padding: 32px 40px;
}

.s-calc .calc__voltar--mobile { display: none; }

.s-calc .calc__form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  width: 100%;
  margin: 0;
}

.s-calc .calc__form-campos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
}

.s-calc .calc__card-titulo {
  /* o Figma quebra depois de "coloque" (14296:2888, caixa de 368) */
  max-width: 400px;
  margin: 0;
  font-weight: 300;
  font-size: 30px;
  line-height: 36px;
  color: #ffffff;
}

.s-calc .calc__campo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding-bottom: 8px;
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.14);
}

/* O Figma desenha o formulário parado com o Nome já marcado — traço ciano de
   2px e placeholder branco cheio. Essa marca é do REPOUSO: a partir do momento
   em que alguém foca um campo ela acompanha o foco. Deixá-la cravada no Nome
   fazia o traço ciano marcar o Nome enquanto se digitava no WhatsApp, e o
   campo focado ficava sem sinal nenhum metade do tempo — o cursor de 1px que
   pisca era tudo o que ele tinha. */
.s-calc .calc__form-campos:not(:focus-within) .calc__campo--ativo,
.s-calc .calc__campo:focus-within { box-shadow: inset 0 -2px 0 0 #04f7f7; }

/* o erro vence os dois, focado ou não: cada seletor aqui empata em
   especificidade com o seu par acima e vem depois */
.s-calc .calc__form-campos:not(:focus-within) .calc__campo--erro,
.s-calc .calc__campo--erro:focus-within,
.s-calc .calc__campo--erro { box-shadow: inset 0 -2px 0 0 #ff6b6b; }

.s-calc .calc__campo-label {
  display: block;
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #8fa3cc;
}

.s-calc .calc__campo-valor {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 27px;
}

.s-calc .calc__campo-input {
  width: 100%;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: none;
  appearance: none;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 27px;
  color: #ffffff;
}

.s-calc .calc__campo-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

/* no Figma o campo Nome mostra "Seu nome" em branco cheio; é o mesmo estado
   de repouso do traço ciano acima, então segue a mesma condição */
.s-calc .calc__form-campos:not(:focus-within) .calc__campo--ativo .calc__campo-input::placeholder {
  color: #ffffff;
  opacity: 1;
}

/* O cursor de quem está digitando é o cursor NATIVO, pintado de ciano. É o
   único que fica sempre onde se escreve: acompanha a digitação, a edição no
   meio do nome, as setas, a seleção e o colar. */
.s-calc .calc__campo-input { caret-color: #04f7f7; }

/* Já o <span> abaixo é a barra que o Figma desenha no campo PARADO
   (14296:2893 · 2x22, 6px depois do placeholder, numa caixa que huga:
   111 = 103 + 6 + 2). Ele é o desenho do estado de repouso, nada mais — por
   isso sai de cena assim que o formulário ganha o foco, quando quem marca a
   posição passa a ser o cursor de verdade, e some também se o campo já tem
   texto.

   O left é a largura do placeholder medida no Figma. Vale exatamente porque
   agora só se aplica ao único estado em que o texto É o placeholder. Antes
   valia sempre, e aí a barra ciano ficava encalhada: com "Jose Moreira" ela
   caía dentro da palavra e com um nome longo atravessava "Apa|recida" —
   duas barras na tela, a desenhada no lugar errado e a nativa no certo. */
.s-calc .calc__caret--nome {
  animation: calc-blink .9s step-end infinite;
  position: absolute;
  top: 2.5px;
  left: 0;
  width: 2px;
  height: 22px;
  background: #04f7f7;
  pointer-events: none;
}

.s-calc .calc__form-campos:focus-within .calc__caret--nome,
.s-calc .calc__campo-input:not(:placeholder-shown) ~ .calc__caret--nome {
  visibility: hidden;
}

.s-calc .calc__form-acoes {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: 48px;
}

.s-calc .calc__voltar {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #8fa3cc;
}

.s-calc .calc__cta--e2 { flex: 0 0 auto; }

.s-calc .calc__nota {
  align-self: flex-start;
  /* 3 linhas do Figma (14296:2907, caixa de 484) */
  max-width: 490px;
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #667799;
}

/* ==========================================================================
   ETAPA 3 — lado PJ revelado (Figma 14296:2911)
   Banda de conteúdo x360 → x1700 (1340) no frame de 1920.
   ========================================================================== */

.s-calc .calc__e3 {
  top: 0;
  left: max(24px, calc(50% - 600px));
  right: auto;
  bottom: auto;
  width: min(1340px, calc(100% - 48px));
  height: 795px;
}

/* ------------------------------------------- coluna-resultado (x360 y77) - */

.s-calc .calc__resultado {
  position: absolute;
  top: 77px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 640/1340 = 47.7612% da banda de conteúdo do Figma */
  width: min(640px, 47.7612%);
}

.s-calc .calc__res-titulo {
  margin: 18px 0 0;
  font-weight: 300;
  font-size: clamp(34px, 4.375vw, 56px);
  line-height: clamp(38px, 4.6875vw, 60px);
  color: #ffffff;
  white-space: nowrap;
}

.s-calc .calc__res-linhas {
  /* spacers 10 + 22 */
  margin: 32px 0 0;
  padding: 0;
  width: 100%;
  list-style: none;
}

.s-calc .calc__res-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.s-calc .calc__res-linha--clt { padding: 18px 0 8px; }
.s-calc .calc__res-linha--pj { padding: 18px 0 14px; }

.s-calc .calc__res-lbl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.s-calc .calc__res-nome {
  font-weight: 400;
  font-size: clamp(13px, 1.171875vw, 15px);
  line-height: normal;
  color: #ffffff;
}

.s-calc .calc__res-hint {
  font-weight: 400;
  font-size: clamp(11px, 0.9375vw, 12px);
  line-height: 15px;
  color: #667799;
}

.s-calc .calc__res-hint--mobile { display: none; }

.s-calc .calc__res-valor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.s-calc .calc__res-pre,
.s-calc .calc__res-suf {
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: #667799;
}

.s-calc .calc__res-num {
  font-weight: 300;
  font-size: clamp(30px, 3.125vw, 40px);
  line-height: normal;
  color: #ffffff;
}

.s-calc .calc__res-linha--pj .calc__res-num { color: #04f7f7; }

.s-calc .calc__ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 48px;
  /* spacers 22 + 1 */
  margin: 23px 0 0;
}

.s-calc .calc__recalcular {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: #8fa3cc;
}

.s-calc .calc__cta--e3 {
  flex: none;
  justify-content: flex-start;
  gap: 16px;
}

.s-calc .calc__cta--e3 .calc__cta-texto { font-size: 16px; }

/* ------------------------ skeleton hidratado / proposta PJ (x1140 y77) --- */

.s-calc .calc__proposta {
  position: absolute;
  top: 77px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 560/1340 = 41.7910% da banda de conteúdo do Figma */
  width: min(560px, 41.7910%);
  height: 355px;
}

.s-calc .calc__proposta-intro {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: clamp(14px, 1.40625vw, 18px);
  line-height: clamp(20px, 2.1875vw, 28px);
  color: #c9e0ff;
}

.s-calc .calc__proposta-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  white-space: nowrap;
}

.s-calc .calc__proposta-big-num {
  font-weight: 300;
  font-size: clamp(44px, 4.375vw, 56px);
  line-height: clamp(48px, 4.6875vw, 60px);
  color: #04f7f7;
}

.s-calc .calc__proposta-big-suf {
  font-weight: 400;
  font-size: clamp(14px, 1.5625vw, 20px);
  line-height: normal;
  color: #8fa3cc;
}

.s-calc .calc__pj-detalhe {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-calc .calc__pj-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0 4px;
}

.s-calc .calc__pj-linha--edit {
  margin-top: 8px;
  padding: 16px 0 12px;
  box-shadow: inset 0 -2px 0 0 rgba(4, 247, 247, 0.6);
}

.s-calc .calc__pj-linha--descontos,
.s-calc .calc__pj-linha--total {
  flex: 1 0 0;
  min-height: 0;
}

.s-calc .calc__pj-linha--total { align-items: flex-start; }

/* no desktop o Figma mostra só "Descontos" (soma DAS + INSS) */
.s-calc .calc__pj-linha--simples,
.s-calc .calc__pj-linha--inss { display: none; }

.s-calc .calc__pj-lbl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.s-calc .calc__pj-nome {
  margin: 0;
  font-weight: 400;
  font-size: clamp(14px, 1.171875vw, 15px);
  line-height: normal;
  color: #ffffff;
}

.s-calc .calc__pj-nome--solo { color: #8fa3cc; }

.s-calc .calc__pj-valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.s-calc .calc__pj-pre {
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: #667799;
}

.s-calc .calc__pj-input {
  width: var(--vw, 88px);
  max-width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  appearance: none;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 2.1875vw, 28px);
  line-height: 34px;
  text-align: right;
  color: #ffffff;
  caret-color: #04f7f7;
}

.s-calc .calc__caret--proposta {
  pointer-events: none;
  animation: calc-blink .9s step-end infinite;
  width: 2px;
  height: 24px;
  background: #04f7f7;
}

.s-calc .calc__pj-editar {
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: #8fa3cc;
}

.s-calc .calc__pj-desconto {
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 19px;
  color: #c9e0ff;
}

.s-calc .calc__pj-liquido {
  font-weight: 600;
  font-size: clamp(15px, 1.5625vw, 20px);
  line-height: normal;
  color: #04f7f7;
}

.s-calc .calc__disclaimer {
  /* o Figma quebra depois de "benefícios" (14296:2972) */
  max-width: 372px;
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #667799;
}

/* --------------------------------- gráfico-proposta (x360 y434 1340x240) - */

.s-calc .calc__grafico {
  position: absolute;
  top: 434px;
  left: 0;
  width: 100%;
  height: 240px;
}

/* --calc-pos = posição do cursor (proposta) · --calc-eq = ponto de equilíbrio
   35.1627% = R$ 16.220 na escala 12k–24k · --calc-*-y = R$ 15.068 na escala 10k–24k */
.s-calc .calc__plot {
  --calc-pos: 35.1627%;
  --calc-eq: 35.1627%;
  --calc-clt-y: 95.7px;
  --calc-eq-y: 95.7px;
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 150px;
  touch-action: pan-y;
}

.s-calc .calc__grid {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

.s-calc .calc__grid--1 { top: 0; }
.s-calc .calc__grid--2 { top: 50%; }
.s-calc .calc__grid--3 { top: 100%; }

.s-calc .calc__plot-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* o rótulo do CLT dentro do plot só existe no frame mobile */
.s-calc .calc__clt-label {
  position: absolute;
  top: calc(var(--calc-clt-y) - 16px);
  left: 4px;
  display: none;
  font-weight: 400;
  font-size: 11px;
  line-height: normal;
  color: #8fa3cc;
  white-space: nowrap;
}

.s-calc .calc__ponto {
  position: absolute;
  top: calc(var(--calc-eq-y) - 5px);
  left: calc(var(--calc-eq) - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #04f7f7;
  box-shadow: 0 0 12px 0 rgba(4, 247, 247, 0.6);
}

.s-calc .calc__ponto-label {
  position: absolute;
  top: calc(var(--calc-eq-y) - 22px);
  right: calc(100% - var(--calc-eq) + 14px);
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
  color: #04f7f7;
  white-space: nowrap;
}

.s-calc .calc__ponto-label--mobile { display: none; }

.s-calc .calc__cursor {
  position: absolute;
  top: 0;
  left: var(--calc-pos);
  width: 1px;
  height: 100%;
  background: rgba(4, 247, 247, 0.5);
}

/* tooltip glass · radius 16 · +14px à direita do cursor */
.s-calc .calc__tooltip {
  position: absolute;
  top: 63px;
  left: calc(var(--calc-pos) + 14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.s-calc .calc__tooltip-linha {
  margin: 0;
  line-height: normal;
}

.s-calc .calc__tooltip-linha--1 { font-weight: 400; font-size: 12px; color: #8fa3cc; }
.s-calc .calc__tooltip-linha--2 { font-weight: 600; font-size: 14px; color: #ffffff; }
.s-calc .calc__tooltip-linha--delta { font-weight: 500; font-size: 12px; color: #04f7f7; }

/* fora do ponto de equilíbrio o sufixo "(referência)" sai de cena
   e entra a linha de delta */
.s-calc .calc__tooltip-linha--delta { display: none; }

.s-calc[data-equilibrio="nao"] .calc__tooltip-ref { display: none; }

.s-calc[data-equilibrio="nao"] .calc__tooltip-linha--delta { display: block; }

/* knob do slider · 32x32 · borda 3px #041124 */
.s-calc .calc__knob {
  position: absolute;
  top: 138px;
  left: calc(var(--calc-pos) - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 3px solid #041124;
  border-radius: 999px;
  background: #04f7f7;
  box-shadow: 0 0 20px 0 rgba(4, 247, 247, 0.55);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
}

.s-calc .calc__knob-glifo {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #041124;
  /* a métrica do Inter joga o desenho do ‹ › 1,7px abaixo do centro da caixa;
     o translate devolve o par ao centro óptico do círculo */
  transform: translateY(-0.7px);
}

.s-calc .calc__eixo {
  position: absolute;
  top: 212px;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #667799;
  white-space: nowrap;
}

.s-calc .calc__eixo--1 { left: 0; }
.s-calc .calc__eixo--2 { left: 23.0597%; }
.s-calc .calc__eixo--3 { left: 48.0597%; }
.s-calc .calc__eixo--4 { left: 73.0597%; }
.s-calc .calc__eixo--5 { right: 0; }

.s-calc .calc__eixo-nome {
  position: absolute;
  top: 234px;
  right: 0;
  font-weight: 400;
  font-size: 11px;
  line-height: normal;
  letter-spacing: 0.66px;
  color: #667799;
  white-space: nowrap;
}

/* ------------------------------------------------------- legenda (y698) - */

.s-calc .calc__legenda-bar {
  position: absolute;
  top: 698px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
}

.s-calc .calc__legenda {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-calc .calc__legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-calc .calc__legenda-swatch {
  flex: none;
  width: 16px;
  height: 2px;
}

.s-calc .calc__legenda-swatch--clt { background: rgba(143, 163, 204, 0.7); }
.s-calc .calc__legenda-swatch--pj { background: #04f7f7; }

.s-calc .calc__legenda-texto {
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #8fa3cc;
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE — frame 390 do Figma (E1 14296:3169 · E2 14296:3232 · E3 14296:3288)
   O layout mobile vale até 1023px (a página inteira troca nesse ponto).
   ========================================================================== */

@media (max-width: 1023px) {

  .s-calc { min-height: 665px; }
  .s-calc[data-etapa="3"] { min-height: 787px; }

  /* ------------------------------------------------------------- cena --- */

  .s-calc .calc__clt-half {
    top: 0;
    left: 0;
    width: 100%;
    height: 620px;
  }

  .s-calc[data-etapa="2"] .calc__clt-half { width: 100%; height: 300px; }
  .s-calc[data-etapa="3"] .calc__clt-half { width: 100%; height: 0; }

  .s-calc .calc__vinheta {
    top: -300px;
    left: calc(50% - 445px);
    width: 700px;
    height: 700px;
    background: rgba(11, 31, 72, 0.7);
    filter: blur(80px);
  }

  .s-calc .calc__pj-half {
    top: 606px;
    left: 0;
    width: 100%;
    height: 320px;
  }

  .s-calc[data-etapa="2"] .calc__pj-half { left: 0; top: 300px; width: 100%; height: 640px; }
  .s-calc[data-etapa="3"] .calc__pj-half { left: 0; top: 0; width: 100%; height: 787px; }

  .s-calc .calc__luz {
    top: 306px;
    left: calc(50% - 300px);
    width: 600px;
    height: 600px;
    filter: blur(80px);
  }

  .s-calc[data-etapa="2"] .calc__luz { top: 0; left: calc(50% - 300px); }
  .s-calc[data-etapa="3"] .calc__luz { top: -300px; left: calc(50% - 300px); }

  /* o feixe não existe no mobile do Figma */
  .s-calc .calc__feixe { display: none; }

  .s-calc .calc__light-leak {
    top: 516px;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(4, 247, 247, 0) 0%, rgba(4, 247, 247, 0.1) 100%);
  }

  .s-calc[data-etapa="2"] .calc__light-leak { top: 210px; left: 0; }

  .s-calc .calc__lamina-glow {
    top: 594px;
    left: 0;
    width: 100%;
    height: 24px;
    filter: blur(12px);
  }

  .s-calc[data-etapa="2"] .calc__lamina-glow { top: 288px; left: 0; }
  .s-calc[data-etapa="3"] .calc__lamina-glow { top: -12px; left: 0; }

  .s-calc .calc__lamina {
    top: 605px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(4, 247, 247, 0) 0%, #04f7f7 50%, rgba(4, 247, 247, 0) 100%);
  }

  .s-calc[data-etapa="2"] .calc__lamina { top: 299px; left: 0; }
  .s-calc[data-etapa="3"] .calc__lamina { top: 0; left: 0; }

  /* os ticks não existem no mobile do Figma */
  .s-calc .calc__tick { display: none; }

  /* ----------------------------------------------------------- handle --- */

  .s-calc .calc__handle {
    top: 582px;
    left: auto;
    right: 0;
    flex-direction: column;
    gap: 0;
    width: 48px;
    height: 48px;
    border: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
      inset 0 0 0 1.5px rgba(4, 247, 247, 0.7),
      0 0 28px 0 rgba(4, 247, 247, 0.45);
  }

  .s-calc[data-etapa="2"] .calc__handle { top: 276px; left: auto; right: 0; }
  .s-calc[data-etapa="3"] .calc__handle { top: -24px; left: auto; right: 0; }

  .s-calc .calc__handle-glifo--esq,
  .s-calc .calc__handle-glifo--dir { display: none; }

  .s-calc .calc__handle-glifo--cima,
  .s-calc .calc__handle-glifo--baixo {
    display: block;
    font-size: 14px;
    line-height: 17px;
  }

  /* ------------------------------------------------------------ etapa --- */

  .s-calc .calc__etapa {
    top: 28px;
    left: auto;
    right: 24px;
    gap: 6px;
    height: 15px;
  }

  .s-calc[data-etapa="2"] .calc__etapa { left: auto; right: 24px; }

  .s-calc .calc__etapa-texto { font-size: 12px; line-height: 15px; }

  .s-calc .calc__etapa-dash { width: 20px; }

  /* --------------------------------------------------------- skeleton --- */

  .s-calc .calc__skeleton {
    top: 610px;
    left: 24px;
    width: calc(100% - 48px);
    height: 250px;
  }

  .s-calc[data-etapa="2"] .calc__skeleton { left: 24px; width: calc(100% - 48px); }

  .s-calc .calc__sk,
  .s-calc[data-etapa="2"] .calc__sk { height: 14px; border-radius: 7px; }

  .s-calc .calc__sk--chip-a,
  .s-calc .calc__sk--chip-b,
  .s-calc[data-etapa="2"] .calc__sk--chip-a,
  .s-calc[data-etapa="2"] .calc__sk--chip-b {
    height: 32px;
    border-radius: 16px;
  }

  .s-calc .calc__sk--chip-a,
  .s-calc[data-etapa="2"] .calc__sk--chip-a { width: 200px; }

  .s-calc .calc__sk--chip-b,
  .s-calc[data-etapa="2"] .calc__sk--chip-b { left: 212px; width: 110px; }

  .s-calc .calc__sk--bar-1,
  .s-calc[data-etapa="2"] .calc__sk--bar-1 { top: 60px; width: 180px; }

  .s-calc .calc__sk--bar-2,
  .s-calc[data-etapa="2"] .calc__sk--bar-2 { top: 108px; width: 120px; }

  .s-calc .calc__sk--bar-3,
  .s-calc[data-etapa="2"] .calc__sk--bar-3 { top: 156px; width: 150px; }

  .s-calc .calc__sk--bar-4,
  .s-calc[data-etapa="2"] .calc__sk--bar-4 { top: 204px; width: 200px; }

  .s-calc .calc__sk--bar-5,
  .s-calc .calc__sk--bar-6,
  .s-calc .calc__sk--bar-7 { display: none; }

  /* shimmer — 60x420 em (120,-40) girado 18° · LAYER_BLUR 10 */
  .s-calc .calc__sk-shimmer {
    display: block;
    position: absolute;
    top: -40px;
    left: 120px;
    width: 60px;
    height: 420px;
    transform-origin: 0 0;
    transform: rotate(-18deg);
    background: linear-gradient(90deg, rgba(4, 247, 247, 0) 0%, rgba(4, 247, 247, 0.16) 50%, rgba(4, 247, 247, 0) 100%);
    filter: blur(5px);
    pointer-events: none;
  }

  /* =================================================== ETAPA 1 (mobile) == */

  .s-calc .calc__coluna-clt {
    top: 72px;
    left: 24px;
    width: calc(100% - 48px);
    padding: 0;
  }

  .s-calc .calc__title {
    /* o Figma quebra depois de "pedir" (14296:3185): a largura reproduz a quebra */
    max-width: 300px;
    font-size: 34px;
    line-height: 38px;
  }

  .s-calc .calc__sub {
    /* o Figma quebra depois de "benefícios" (14296:3187, caixa de 225):
       a largura máxima reproduz a quebra sem <br> */
    max-width: 240px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 22px;
  }

  .s-calc .calc__linha {
    gap: 4px;
    height: 47px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.12);
  }

  .s-calc .calc__linha--principal {
    height: 58px;
    margin-top: 18px;
    padding: 12px 0 10px;
  }

  .s-calc .calc__linha--opcional.calc__linha--primeira { margin-top: 6px; }

  .s-calc .calc__label { font-size: 14px; line-height: 17px; }

  .s-calc .calc__opcional {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.88px;
  }

  .s-calc .calc__valor { gap: 6px; }
  /* reafirma gap:0 no campo principal — sem isso, a regra genérica acima (mesma
     especificidade, mais tardia no cascade) vazava e duplicava o espaçamento do
     prefixo/caret, que já é dado pelas margins abaixo */
  .s-calc .calc__valor--principal { gap: 0; }
  .s-calc .calc__valor--principal .calc__prefixo { margin-right: 6px; }

  .s-calc .calc__prefixo { font-size: 12px; line-height: 15px; }

  .s-calc .calc__input {
    height: 27px;
    font-size: 22px;
    line-height: 27px;
  }

  .s-calc .calc__input--principal {
    height: 36px;
    font-size: 30px;
    line-height: 36px;
  }

  .s-calc .calc__caret--principal { height: 26px; margin-left: 6px; }

  .s-calc .calc__cta-wrap { margin-top: 22px; }

  .s-calc .calc__cta--e1 {
    width: 100%;
    padding: 0 20px;
  }

  .s-calc .calc__cta-texto { font-size: 15px; line-height: 18px; }
  .s-calc .calc__cta-seta { font-size: 16px; line-height: 19px; }

  /* =================================================== ETAPA 2 (mobile) == */

  .s-calc .calc__resumo {
    top: 72px;
    left: 24px;
    gap: 6px;
    width: calc(100% - 48px);
  }

  .s-calc .calc__resumo-valor { font-size: 20px; line-height: 24px; }
  .s-calc .calc__resumo-editar { font-size: 12px; line-height: 15px; }

  .s-calc .calc__card {
    top: 140px;
    left: 24px;
    width: calc(100% - 48px);
    /* 453 = card-fronteira do Figma (14296:3255) já com o aviso legal */
    height: 453px;
    box-shadow:
      0 20px 50px 0 rgba(0, 0, 0, 0.45),
      0 0 40px 0 rgba(4, 247, 247, 0.18);
  }

  .s-calc .calc__card-conteudo {
    gap: 16px;
    padding: 22px 24px 24px;
  }

  .s-calc .calc__voltar--mobile { display: block; flex: none; }
  .s-calc .calc__voltar--desktop { display: none; }

  .s-calc .calc__form { align-items: stretch; gap: 16px; }
  .s-calc .calc__form-campos { gap: 16px; }

  .s-calc .calc__card-titulo {
    /* 300 > 294 em 6px: a sobra cai no padding do card e garante a quebra do Figma */
    width: 300px;
    max-width: 300px;
    font-size: 24px;
    line-height: 30px;
  }

  .s-calc .calc__campo {
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.14);
  }

  /* o mobile redeclara o traço, então repete a mesma condição do desktop: sem
     isto a regra sem condição daqui vence a de lá por vir depois no arquivo, e
     o Nome continuava marcado enquanto se digitava no WhatsApp */
  .s-calc .calc__campo--ativo { border-bottom: 0; }

  .s-calc .calc__form-campos:not(:focus-within) .calc__campo--ativo,
  .s-calc .calc__campo:focus-within { box-shadow: inset 0 -2px 0 0 #04f7f7; }

  .s-calc .calc__form-campos:not(:focus-within) .calc__campo--erro,
  .s-calc .calc__campo--erro:focus-within,
  .s-calc .calc__campo--erro { box-shadow: inset 0 -2px 0 0 #ff6b6b; }

  .s-calc .calc__campo-label { font-size: 12px; line-height: 15px; }

  .s-calc .calc__campo-valor { height: 22px; }

  .s-calc .calc__campo-input {
    height: 22px;
    font-size: 18px;
    line-height: 22px;
  }

  .s-calc .calc__caret--nome {
    top: 2px;
    left: 0;
    height: 18px;
  }

  .s-calc .calc__form-acoes {
    display: contents;
  }

  .s-calc .calc__cta--e2 {
    width: 100%;
    padding: 0 20px;
  }

  .s-calc .calc__voltar { font-size: 12px; line-height: 15px; }

  .s-calc .calc__nota {
    max-width: none;
    font-size: 11px;
    line-height: 13px;
    white-space: normal;
  }

  /* =================================================== ETAPA 3 (mobile) == */

  .s-calc .calc__e3 {
    top: 41px;   /* coluna-resultado 14296:3295 */
    left: 24px;
    right: 24px;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    height: auto;
    padding-bottom: 28px;
  }

  /* achata as duas colunas do desktop para reordenar tudo numa coluna só */
  .s-calc .calc__resultado,
  .s-calc .calc__proposta { display: contents; }

  .s-calc .calc__res-titulo {
    order: 1;
    margin: 0;
    font-size: 34px;
    line-height: 38px;
    white-space: normal;
  }

  .s-calc .calc__res-linhas { order: 2; margin: 26px 0 0; }

  .s-calc .calc__res-linha {
    gap: 10px;
    padding: 12px 0 10px;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.12);
  }

  .s-calc .calc__res-linha--clt,
  .s-calc .calc__res-linha--pj { padding: 12px 0 10px; }

  .s-calc .calc__res-lbl { flex: 0 1 176px; min-width: 0; }

  .s-calc .calc__res-nome { font-size: 13px; white-space: normal; }

  .s-calc .calc__res-hint {
    /* o Figma quebra depois de "13º" (14296:3302) */
    max-width: 168px;
    font-size: 11px;
    line-height: 13px;
    white-space: normal;
  }
  .s-calc .calc__res-hint--desktop { display: none; }
  .s-calc .calc__res-hint--mobile { display: block; }

  .s-calc .calc__res-valor { gap: 5px; flex: 0 0 auto; }
  .s-calc .calc__res-pre,
  .s-calc .calc__res-suf { font-size: 11px; }
  .s-calc .calc__res-num { font-size: 30px; }

  .s-calc .calc__proposta-intro {
    order: 3;
    margin: 26px 0 0;
    font-size: 14px;
    line-height: 20px;
  }

  .s-calc .calc__proposta-big { order: 4; margin: 6px 0 0; gap: 8px; }
  .s-calc .calc__proposta-big-num { font-size: 44px; line-height: 48px; }
  .s-calc .calc__proposta-big-suf { font-size: 14px; }

  .s-calc .calc__pj-linha--edit {
    order: 5;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 0 10px;
    box-shadow: inset 0 -1px 0 0 rgba(4, 247, 247, 0.6);
  }

  .s-calc .calc__pj-nome { font-size: 14px; }
  .s-calc .calc__pj-valor { gap: 5px; }
  .s-calc .calc__pj-pre { font-size: 11px; }

  .s-calc .calc__pj-input {
    height: 29px;
    font-size: 24px;
    line-height: 29px;
  }

  .s-calc .calc__caret--proposta { height: 20px; }
  .s-calc .calc__pj-editar { font-size: 12px; }

  .s-calc .calc__grafico {
    order: 6;
    position: relative;
    top: auto;
    left: auto;
    margin-top: 22px;
    width: 100%;
    height: 118px;
  }

  .s-calc .calc__plot {
    --calc-clt-y: 51.04px;
    --calc-eq-y: 51.04px;
    top: 0;
    height: 80px;
  }

  .s-calc .calc__grid--2 { top: 40px; }
  .s-calc .calc__grid--3 { top: 80px; }

  .s-calc .calc__clt-label { display: block; }

  .s-calc .calc__ponto { border: 2px solid #041124; box-shadow: 0 0 10px 0 rgba(4, 247, 247, 0.6); }

  .s-calc .calc__ponto-label--desktop { display: none; }

  /* no mobile o rótulo do equilíbrio é fixo à esquerda do plot (Figma 14296:3342),
     logo acima do rótulo do CLT — não acompanha o cursor */
  .s-calc .calc__ponto-label--mobile {
    display: block;
    top: 1px;
    right: auto;
    left: 4px;
    font-size: 11px;
  }

  .s-calc .calc__tooltip { display: none; }

  .s-calc .calc__knob {
    top: 69px;
    left: calc(var(--calc-pos) - 11px);
    gap: 4px;
    width: 22px;
    height: 22px;
    box-shadow: 0 0 16px 0 rgba(4, 247, 247, 0.55);
  }

  .s-calc .calc__knob-glifo { font-size: 9px; transform: translateY(-1.15px); }

  .s-calc .calc__eixo { top: 94px; font-size: 11px; }
  .s-calc .calc__eixo--1 { left: 0; }
  .s-calc .calc__eixo--2 { display: none; }
  .s-calc .calc__eixo--3 { left: 43.128%; }
  .s-calc .calc__eixo--4 { display: none; }
  .s-calc .calc__eixo--5 { right: 0; }
  .s-calc .calc__eixo-nome { display: none; }

  .s-calc .calc__pj-detalhe { order: 7; flex: none; margin: 20px 0 0; }

  .s-calc .calc__pj-detalhe .calc__pj-linha {
    flex: none;
    gap: 10px;
    padding: 9px 0;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.12);
  }

  .s-calc .calc__pj-detalhe .calc__pj-linha--total { align-items: center; }

  /* no mobile o Figma abre os descontos em Simples + INSS */
  .s-calc .calc__pj-linha--descontos { display: none; }
  .s-calc .calc__pj-linha--simples,
  .s-calc .calc__pj-linha--inss { display: flex; }

  .s-calc .calc__pj-nome--solo,
  .s-calc .calc__pj-nome--total { font-size: 13px; }

  .s-calc .calc__pj-desconto { font-size: 13px; line-height: 16px; }
  .s-calc .calc__pj-liquido { font-size: 15px; }

  /* o disclaimer e a legenda não existem na etapa 3 do mobile */
  .s-calc .calc__disclaimer,
  .s-calc .calc__legenda-bar { display: none; }

  .s-calc .calc__ctarow {
    order: 8;
    gap: 12px;
    margin-top: 36px;
  }

  .s-calc .calc__recalcular { font-size: 12px; }

  .s-calc .calc__cta--e3 { gap: 0; padding: 0 20px; }
  .s-calc .calc__cta--e3 .calc__cta-texto { font-size: 15px; }
}

/* ==========================================================================
   Animações e acessibilidade
   ========================================================================== */

/* cursor de texto: mesma cadência do cursor do hero (Figma Motion) */
@keyframes calc-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

@keyframes calc-shimmer {
  0% { opacity: .45; }
  50% { opacity: 1; }
  100% { opacity: .45; }
}

@media (max-width: 1023px) {
  .s-calc .calc__sk-shimmer { animation: calc-shimmer 2.4s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .s-calc .calc__cena > *,
  .s-calc .calc__handle,
  .s-calc .calc__etapa,
  .s-calc .calc__etapa-dash,
  .s-calc .calc__skeleton,
  .s-calc .calc__sk,
  .s-calc .calc__e1,
  .s-calc .calc__e2,
  .s-calc .calc__e3 {
    transition-duration: 0.01ms;
  }

  .s-calc .calc__sk-shimmer { animation: none; }

  /* sem piscar, mas o caret continua à mostra indicando o campo */
  .s-calc .calc__caret { animation: none; opacity: 1; }
}

/* ---------- Entrada ---------- */
/* A coluna do formulário chega depois dos fios: primeiro a dobra se delimita,
   depois o conteúdo assenta dentro dela. A cena (lâmina, luzes, vinheta) fica
   de fora — são dois blurs de 110px e 100px em caixas de 1400 e 900px, e um
   fade no wrapper obriga o Chrome a rasterizar esse conjunto inteiro numa
   camada só pela duração da transição. Caro, e o ganho é nenhum: a cena já
   tem movimento próprio. */
.s-calc .calc__coluna-clt { --entra-delay: .12s; --entra-dy: 16px; }

/* ==========================================================================
   Tooltip dos descontos
   ==========================================================================
   No desktop a linha "Descontos" é um número só — a soma do DAS com o INSS do
   pró-labore. Quem está comparando uma proposta precisa saber o que foi
   somado ali; sem isso o número parece arbitrário e a conta perde confiança.
   ========================================================================== */

/* O atributo hidden do HTML perde para qualquer display no CSS. Esta regra
   não é decoração: sem ela o tooltip fica aberto o tempo todo. Foi exatamente
   assim que o modal desta página um dia engoliu todos os cliques. */
.s-calc .calc__tip[hidden] { display: none; }

.s-calc .calc__pj-linha--descontos { position: relative; }

/* O rótulo desta linha vira uma caixa flex só para o ⓘ ficar centralizado com
   o texto sem número mágico: nenhum vertical-align acerta (text-top erra 2px
   para cima, middle 1,4px para baixo), e o alinhamento é visível porque o
   ícone agora vem antes da palavra. O gap substitui a margem. */
.s-calc .calc__pj-linha--descontos .calc__pj-nome--solo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.s-calc .calc__info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(4, 247, 247, .45);
  border-radius: 50%;
  background: transparent;
  color: #04F7F7;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.s-calc .calc__info-glifo {
  /* o "i" do Inter tem o pingo alto e o corpo curto: sem este empurrão ele
     assenta abaixo do centro do círculo */
  transform: translateY(.5px);
}

.s-calc .calc__info:hover,
.s-calc .calc__info:focus-visible {
  background: rgba(4, 247, 247, .14);
  border-color: #04F7F7;
}

.s-calc .calc__info:focus-visible {
  outline: 2px solid #04F7F7;
  outline-offset: 2px;
}

.s-calc .calc__tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 8;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  border: 1px solid rgba(4, 247, 247, .28);
  border-radius: 12px;
  background: #06183A;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65);
  text-align: left;
}

.s-calc .calc__tip-titulo {
  margin: 0 0 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: #FFFFFF;
}

.s-calc .calc__tip-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-calc .calc__tip-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.s-calc .calc__tip-item + .calc__tip-item { margin-top: 7px; }

.s-calc .calc__tip-nome {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #C9E0FF;
}

.s-calc .calc__tip-base {
  display: block;
  font-size: 11px;
  line-height: 15px;
  color: #8AA6D6;
}

.s-calc .calc__tip-valor {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
}

.s-calc .calc__tip-nota {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(201, 224, 255, .16);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  color: #8AA6D6;
}

/* --------------------------------------------------------------------------
   Abaixo de 390px: "Recalcular" ganha a própria linha
   --------------------------------------------------------------------------
   O botão é `flex: 1 0 0` com `min-width: 0` numa linha que divide espaço com
   um CTA de 256px. Abaixo da largura de referência sobra cada vez menos: em
   375 e 360 o rótulo quebra com o ↺ sozinho embaixo, e em 320 ele colapsa para
   4px — a pessoa lê "Rec" com o CTA ciano por cima.

   A linha já é `flex-wrap: wrap`; faltava o botão parar de encolher. Com
   largura natural e sem quebra, ele ocupa a primeira linha e o CTA desce para a
   segunda. Escopado abaixo de 390 de propósito: 390 é a largura do frame do
   Figma e o arranjo de lá está medido e correto.
   -------------------------------------------------------------------------- */
@media (max-width: 389px) {
  .s-calc .calc__recalcular {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Foco visível nos campos da calculadora
   --------------------------------------------------------------------------
   Os campos zeram o outline para o valor flutuar sobre a cena sem moldura. O
   efeito colateral é que quem navega por teclado não enxerga onde está — e
   estes são os cinco campos da interação principal da página.

   `:focus-visible` só acende no foco por teclado: quem usa mouse continua
   vendo exatamente o desenho do Figma, e a medição pixel a pixel não muda.
   -------------------------------------------------------------------------- */
.s-calc .calc__input:focus-visible,
.s-calc .calc__pj-input:focus-visible {
  outline: 2px solid #04F7F7;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Etapa 3: a seta do CTA sai no mobile
   --------------------------------------------------------------------------
   O Figma trata os dois breakpoints de forma diferente neste botão: a variante
   desktop (LP / Calculadora Lâmina — Desktop, Etapa=3) mantém o "→", e a
   variante mobile não tem. No mobile o botão já ocupa quase toda a largura da
   linha e a seta só rouba espaço do rótulo.

   O <span> continua no HTML, com aria-hidden — é decorativo nos dois casos.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .s-calc .calc__cta--e3 .calc__cta-seta { display: none; }
}

/* ===== pilares ===== */
/* ==========================================================================
   03 Pilar 3 — O que muda  (key: pilares)   — MODELO NOVO
   Desktop: nó 14256:219 — 1920x698   (Container 1200 @ x=360, y=96)
   Mobile : nó 14256:791 —  390x875   (padding 40/16, gap 20)

   Layout novo: foto à esquerda (572x506) e coluna de texto à direita (556),
   com H2, três pilares separados por régua e o CTA ciano.

   A caixa da foto (<image-mask> 14260:455) tem TRÊS camadas sobrepostas,
   todas com a mesma geometria relativa nos dois breakpoints (o mobile é a
   mesma composição a 62,5874% — por isso tudo aqui está em %):
     1. foto de fundo (object-fit: cover) + véu azul em gradiente linear;
     2. o arco "C" da marca, branco a 25%;
     3. o recorte da pessoa (PNG com alpha) por cima do arco.
   As camadas 1 e 3 são espelhadas na horizontal (rotation -180 + flip Y no
   Figma = scaleX(-1) aqui).
   ========================================================================== */

.s-pilares {
  background: #0A1E47;
  padding: 96px 0;
  min-height: 698px;
}

.s-pilares .pilares__inner {
  display: flex;
  align-items: center;
  gap: 72px;
}

/* --- Caixa da imagem ------------------------------------------------------ */

.s-pilares .pilares__media {
  position: relative;
  flex: 0 1 572px;
  width: 572px;
  /* 572 x 506 no desktop, 358 x 316,692 no mobile — mesma proporção */
  aspect-ratio: 572 / 506;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}

/* camada 1 (fundo) e camada 3 (recorte): mesmo enquadramento
   940 x 838 em (-184, -328) dentro da caixa de 572 x 506 */
.s-pilares .pilares__camada,
.s-pilares .pilares__recorte {
  position: absolute;
  left: -32.167832%;
  top: -64.822134%;
  width: 164.335664%;
  height: 165.612648%;
  max-width: none;
  transform: scaleX(-1);
  pointer-events: none;
}

.s-pilares .pilares__camada {
  display: block;
}

.s-pilares .pilares__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* véu azul: GRADIENT_LINEAR com opacidade de paint 0.5 sobre a foto de fundo */
.s-pilares .pilares__tint {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(129.9545deg, rgba(14, 83, 192, 0.5) 27.87%, rgba(0, 40, 104, 0) 90.469%);
}

/* camada 2: arco "C" branco 25% — 567 x 778 em (218, 0), recortado pela caixa */
.s-pilares .pilares__arco {
  position: absolute;
  left: 38.111888%;
  top: 0;
  display: block;
  width: 99.125874%;
  height: 153.754941%;
  max-width: none;
  pointer-events: none;
}

.s-pilares .pilares__recorte {
  display: block;
  object-fit: cover;
  object-position: center;
}

/* --- Coluna de texto ------------------------------------------------------ */

.s-pilares .pilares__col {
  flex: 1 1 556px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.s-pilares .pilares__title {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -1.08px;
  color: #FFFFFF;
}

/* --- Pilares -------------------------------------------------------------- */

.s-pilares .pilares__lista {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-pilares .pilares__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.s-pilares .pilares__item:last-child {
  border-bottom: 0;
}

.s-pilares .pilares__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.s-pilares .pilares__item-titulo {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: 0;
  color: #FFFFFF;
}

.s-pilares .pilares__item-desc {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  color: #C9E0FF;
}

/* --- CTA ------------------------------------------------------------------ */

.s-pilares .pilares__cta {
  padding-left: 64px;
  padding-right: 64px;
}

/* ==========================================================================
   Mobile — frame 390 (nó 14256:791). Vale até 1023px, como no resto da LP.
   Ordem no mobile: H2 · foto · pilares · CTA — por isso a coluna vira
   display: contents e os filhos recebem order.
   ========================================================================== */

@media (max-width: 1023px) {
  .s-pilares {
    padding: 40px 0;
    min-height: 874.692px;
  }

  .s-pilares .pilares__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .s-pilares .pilares__col {
    display: contents;
  }

  .s-pilares .pilares__title {
    order: 1;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.84px;
  }

  /* em coluna, um flex-basis em px passaria a governar a ALTURA */
  .s-pilares .pilares__media {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    /* acima de 572 a foto pararia de crescer: no 390 do Figma não tem efeito */
    max-width: 572px;
    align-self: center;
    border-radius: 10.014px;
  }

  .s-pilares .pilares__lista {
    order: 3;
  }

  .s-pilares .pilares__item {
    padding: 16px 0;
  }

  .s-pilares .pilares__txt {
    gap: 5px;
  }

  /* Nada de estreitar aqui. O --estreito nasceu para reproduzir a quebra deste
     item quando ele era o TERCEIRO da lista; com ele em primeiro, a caixa do
     Figma no mobile é a mesma dos outros dois (358px) e qualquer corte extra
     joga uma palavra para a linha de baixo. No desktop a regra continua
     valendo — lá a coluna é outra. */
  .s-pilares .pilares__txt--estreito {
    max-width: none;
  }

  .s-pilares .pilares__item-titulo {
    font-size: 17px;
    line-height: 23px;
  }

  .s-pilares .pilares__item-desc {
    font-size: 14px;
    line-height: 20px;
  }

  .s-pilares .pilares__cta {
    order: 4;
    display: flex;
    width: 100%;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* --------------------------------------------------------------------------
   Faixa 768–1023: mesma pilha do mobile, mas com a caixa da foto limitada à
   largura de projeto (572) e centralizada, para não virar um bloco gigante.
   Sem referência no Figma — ajuste de sobrevivência.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .s-pilares {
    padding: 56px 0;
    min-height: 0;
  }

  .s-pilares .pilares__inner {
    gap: 24px;
  }

  .s-pilares .pilares__title,
  .s-pilares .pilares__lista,
  .s-pilares .pilares__media,
  .s-pilares .pilares__cta {
    width: 100%;
    max-width: 572px;
    align-self: center;
  }

  .s-pilares .pilares__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}

/* ==========================================================================
   Movimento — a cena se aproxima no hover
   ==========================================================================
   A foto e o recorte da pessoa têm o MESMO enquadramento (940x838 em -184,-328
   dentro da caixa de 572x506) e precisam escalar juntos e com a mesma origem,
   senão o recorte descola do fundo e a pessoa aparece duplicada na borda.
   A origem é o ponto do enquadramento que cai no centro da caixa.

   O arco de fora fica parado de propósito: ele é moldura, não cena. É a
   diferença entre os dois que dá a sensação de profundidade.

   `scale` e não `transform`: as duas camadas já carregam `transform: scaleX(-1)`
   (a foto é espelhada no Figma), e escrever transform aqui apagaria isso. */
.s-pilares .pilares__media { --zoom: 1.05; }

.s-pilares .pilares__camada,
.s-pilares .pilares__recorte {
  transform-origin: 50% 69.33%;
}

/* ---------- Entrada ---------- */
/* Título e foto chegam juntos — são a abertura da dobra e lêem como uma coisa
   só. Os três pilares vêm em cascata curta depois, e o CTA fecha. */
.s-pilares .pilares__title { --entra-delay: 0s; }
.s-pilares .pilares__media { --entra-delay: 0s; --entra-dy: 22px; }
.s-pilares .pilares__item:nth-child(1) { --entra-delay: .12s; }
.s-pilares .pilares__item:nth-child(2) { --entra-delay: .20s; }
.s-pilares .pilares__item:nth-child(3) { --entra-delay: .28s; }
.s-pilares .pilares__cta { --entra-delay: .36s; --entra-dy: 12px; }

/* Mesmo motivo do CNPJ: no mobile os pilares empilham e cada um cruza a borda
   da tela por conta própria. */
@media (max-width: 1023px) {
  .s-pilares .pilares__item:nth-child(1),
  .s-pilares .pilares__item:nth-child(2),
  .s-pilares .pilares__item:nth-child(3) { --entra-delay: 0s; }
}

/* ===== cnpj ===== */
/* ==========================================================================
   04 Abertura de CNPJ — desktop: nó 14256:239 (frame 1200x784, x=360 em 1920)
                          mobile : nó 14256:806 (frame 390x1400)
   Três cards lado a lado, cada um com um mockup de tela, um "chip" de UI
   flutuante por cima e a legenda embaixo. CTA só no desktop.
   ========================================================================== */

.s-cnpj {
  position: relative;
  padding: 80px 0;
  min-height: 784px;
  box-sizing: border-box;
}

.s-cnpj .cnpj__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Título --------------------------------------------------------------- */

.s-cnpj .cnpj__title {
  margin: 0 0 40px;
  /* 460px é a largura que faz a frase quebrar depois de "código." sem <br> */
  max-width: 460px;
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0;
  color: #FFFFFF;
  text-align: center;
}

.s-cnpj .cnpj__title .kw {
  font-weight: 700;
  font-style: italic;
  color: #04F7F7;
}

/* --- Trilha de cards ------------------------------------------------------ */

.s-cnpj .cnpj__cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

.s-cnpj .cnpj__card {
  position: relative;
  flex: 0 1 389px;
  min-width: 0;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #081838;
  /* rect "fundo": GRADIENT_LINEAR #0E3A7A -> #041124 (gt 0.6/0.8) */
  background-image: linear-gradient(142.37deg, #0E3A7A 0%, #041124 71.429%);
}

/* elipse "glow" ciano com LAYER_BLUR 90 */
.s-cnpj .cnpj__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: #04F7F7;
  filter: blur(45px);
  pointer-events: none;
}

.s-cnpj .cnpj__card--abertura .cnpj__glow { left: 60px;  top: -110px; opacity: .15; }
.s-cnpj .cnpj__card--precos   .cnpj__glow { left: 100px; top: -110px; opacity: .16; }
.s-cnpj .cnpj__card--nota     .cnpj__glow { left: 40px;  top: -130px; width: 360px; height: 360px; opacity: .16; }

/* mockups exportados do Figma (já incluem sombra e recorte do card) */
.s-cnpj .cnpj__shot {
  position: absolute;
  display: block;
  /* o mockup é maior que o card no mobile: não pode ser espremido pelo reset */
  max-width: none;
  pointer-events: none;
}

.s-cnpj .cnpj__shot--notebook { left: 0;  top: 0;      width: 389px;     height: 308.007px; }
.s-cnpj .cnpj__shot--celular  { left: 0;  top: 2.234px; width: 283.927px; height: 397.766px; }

/* frame "foto-painel": foto com scaleMode CROP (imageTransform 0.74/0.5 @ 0.14/0.22),
   girado -2° no Figma e com DROP_SHADOW 0/24/50/-10 preto 55% */
.s-cnpj .cnpj__painel {
  position: absolute;
  left: -17.468px;
  top: -41px;
  width: 409.723px;
  height: 330.422px;
  border-radius: 16px;
  overflow: hidden;
  transform: rotate(2deg);
  transform-origin: 0 0;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.s-cnpj .cnpj__painel img {
  position: absolute;
  left: -78.2px;
  top: -145.385px;
  display: block;
  width: 553.68px;
  height: 660.844px;
  max-width: none;
}

/* rect "shade": degradê que escurece a base do card */
.s-cnpj .cnpj__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.s-cnpj .cnpj__card--abertura .cnpj__shade {
  top: 162px;
  background: linear-gradient(180deg, rgba(4, 17, 36, 0) 0%, rgba(4, 17, 36, .88) 50%, rgba(4, 17, 36, .99) 100%);
}

.s-cnpj .cnpj__card--precos .cnpj__shade,
.s-cnpj .cnpj__card--nota .cnpj__shade {
  top: 220px;
  background: linear-gradient(180deg, rgba(4, 17, 36, 0) 0%, rgba(4, 17, 36, .75) 45%, rgba(4, 17, 36, .98) 100%);
}

/* --- Card 1 · toast "CNPJ criado com sucesso" ----------------------------- */

.s-cnpj .cnpj__toast {
  position: absolute;
  left: 32px;
  top: 240.725px;
  width: 250px;
  height: 63px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #E4EAF2;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, .5);
  transform: rotate(-2deg);
  transform-origin: 0 0;
  overflow: hidden;
}

.s-cnpj .cnpj__toast-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid #E4EAF2;
  border-radius: 8px;
  background: #FFFFFF;
}

.s-cnpj .cnpj__toast-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.s-cnpj .cnpj__toast-txt {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  width: 182px;
  height: 37px;
}

.s-cnpj .cnpj__toast-lines {
  display: block;
  width: 158px;
}

.s-cnpj .cnpj__toast-title {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 13px;
  color: #0A2A5E;
}

.s-cnpj .cnpj__toast-desc {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 400;
  line-height: 10px;
  color: #5A6B87;
}

.s-cnpj .cnpj__toast-time {
  flex: 0 0 auto;
  white-space: nowrap;
  width: 21px;
  font-size: 7.5px;
  font-weight: 400;
  line-height: 9px;
  color: #5A6B87;
}

/* --- Card 2 · barra "DAS · venc. 28/10" ----------------------------------- */

.s-cnpj .cnpj__bar {
  position: absolute;
  left: 33px;
  top: 232.436px;
  width: 299.032px;
  height: 55.726px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9.677px;
  padding: 15px 17.5px;
  border: 1.25px solid #E4EAF2;
  border-radius: 15px;
  background: #FFFFFF;
  box-shadow: 0 20px 45px -7.5px rgba(0, 0, 0, .5);
  transform: rotate(-2deg);
  transform-origin: 0 0;
  overflow: hidden;
  /* rótulos do mockup têm largura fixa vinda do Figma e ficam sempre em 1 linha */
  white-space: nowrap;
}

.s-cnpj .cnpj__bar-imposto {
  flex: 0 0 auto;
  width: 42.581px;
  font-size: 10.645px;
  font-weight: 600;
  line-height: 13px;
  color: #0A2A5E;
}

.s-cnpj .cnpj__bar-venc {
  flex: 0 0 auto;
  width: 73.726px;
  font-size: 9.677px;
  font-weight: 400;
  line-height: 12px;
  color: #5A6B87;
}

.s-cnpj .cnpj__bar-valor {
  flex: 0 0 auto;
  width: 62px;
  font-size: 10.645px;
  font-weight: 600;
  line-height: 13px;
  color: #0A2A5E;
}

.s-cnpj .cnpj__bar-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54.194px;
  height: 23.226px;
  border-radius: 6.774px;
  background: #0E53C0;
  font-size: 9.194px;
  font-weight: 600;
  line-height: 11px;
  color: #FFFFFF;
}

/* --- Card 3 · conversa de WhatsApp ---------------------------------------- */

.s-cnpj .cnpj__chat {
  position: absolute;
  left: 115px;
  top: 182.144px;
  width: 262px;
  height: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotate(-2deg);
  transform-origin: 0 0;
}

.s-cnpj .cnpj__chat-row { display: flex; }
.s-cnpj .cnpj__chat-row--out { justify-content: flex-end; }
.s-cnpj .cnpj__chat-row--in { align-items: flex-end; gap: 8px; }

.s-cnpj .cnpj__bubble {
  box-sizing: border-box;
  padding: 9px 12px 7px;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, .45);
}

.s-cnpj .cnpj__bubble--out {
  width: 206px;
  border-radius: 14px 14px 4px 14px;
  background: #25A65B;
}

.s-cnpj .cnpj__bubble--in {
  width: 228px;
  border-radius: 14px 14px 14px 4px;
  background: #FFFFFF;
}

.s-cnpj .cnpj__bubble-txt {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
}

.s-cnpj .cnpj__bubble--out .cnpj__bubble-txt { color: #FFFFFF; }
.s-cnpj .cnpj__bubble--in .cnpj__bubble-txt { color: #0A2A5E; }

.s-cnpj .cnpj__bubble-meta {
  display: block;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 7.5px;
  font-weight: 400;
  line-height: 9px;
  text-align: right;
}

.s-cnpj .cnpj__bubble--out .cnpj__bubble-meta { color: rgba(255, 255, 255, .8); }
.s-cnpj .cnpj__bubble--in .cnpj__bubble-meta { color: #5A6B87; }

.s-cnpj .cnpj__avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid #E4EAF2;
  border-radius: 999px;
  background: #FFFFFF;
}

.s-cnpj .cnpj__avatar img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* --- Legendas ------------------------------------------------------------- */

.s-cnpj .cnpj__caption {
  position: absolute;
  left: 24px;
  width: 325px;
}

/* ancorada pela base: se o texto reflui numa janela estreita ela cresce para
   cima em vez de ser cortada pelo overflow do card */
.s-cnpj .cnpj__card--abertura .cnpj__caption { bottom: 24px; }
.s-cnpj .cnpj__card--precos   .cnpj__caption { bottom: 24px; }
.s-cnpj .cnpj__card--nota     .cnpj__caption { bottom: 37.051px; }

.s-cnpj .cnpj__card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #FFFFFF;
}

.s-cnpj .cnpj__card-desc {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #C9E0FF;
}

/* --- CTA ------------------------------------------------------------------ */

.s-cnpj .cnpj__cta {
  margin-top: 40px;
  padding-left: 64px;
  padding-right: 64px;
  color: #002868;
}

/* Entre 1024 e 1279 o container ainda não tem 1200px: os cards encolhem.
   A legenda passa a acompanhar a largura do card para o texto refluir em vez
   de ser cortado. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-cnpj .cnpj__card {
    height: 440px;
  }

  /* o mockup do celular é cortado rente à base do card: acompanha a altura nova
     para o corte não virar uma aresta visível no meio do card */
  .s-cnpj .cnpj__shot--celular {
    height: auto;
    bottom: 0;
  }

  .s-cnpj .cnpj__caption {
    width: auto;
    right: 24px;
  }
}

/* ==========================================================================
   Mobile — frame 390 (nó 14256:806). Vale até 1023px, como no resto da LP.
   ========================================================================== */

@media (max-width: 1023px) {

  .s-cnpj {
    padding: 40px 0;
    min-height: 1400px;
  }

  .s-cnpj .cnpj__inner {
    align-items: stretch;
  }

  .s-cnpj .cnpj__title {
    margin: 0 0 20px;
    /* 300px é a largura que faz a frase quebrar depois de "código." sem <br> */
    max-width: 300px;
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.84px;
    text-align: left;
  }

  .s-cnpj .cnpj__cards {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .s-cnpj .cnpj__card {
    flex: 0 0 auto;
    width: 358px;
    max-width: 100%;
    height: 400px;
    background-image: linear-gradient(140.04deg, #0E3A7A 0%, #041124 71.429%);
  }

  .s-cnpj .cnpj__card--abertura .cnpj__glow { left: 29px; }
  .s-cnpj .cnpj__card--precos   .cnpj__glow { left: 69px; }
  .s-cnpj .cnpj__card--nota     .cnpj__glow { left: 9px; }

  .s-cnpj .cnpj__painel { left: -25.2px; }
  .s-cnpj .cnpj__shot--notebook { left: -16px; }
  .s-cnpj .cnpj__shot--celular  { left: -6px; top: -4.458px; }

  .s-cnpj .cnpj__bar { left: 29px; }
  .s-cnpj .cnpj__chat { left: 84px; }

  .s-cnpj .cnpj__caption { width: 310px; }

  .s-cnpj .cnpj__cta { display: none; }
}

/* ==========================================================================
   Movimento
   ========================================================================== */

/* ---------- As peças soltas acima do mockup flutuam ---------- */
/* Amplitude curta e ciclos primos entre si: as três peças do mesmo card nunca
   voltam a subir juntas, então a dobra nunca "pulsa" como um bloco só.
   A fase negativa entra no meio do ciclo — sob o congelamento do QA ela vira
   zero e a peça volta para o quadro 0%, que é a posição do Figma. */
.s-cnpj .cnpj__toast { --float-amp: -11px; --float-giro:  0.5deg; --float-dur: 5.5s; --float-fase: -0.8s; }
.s-cnpj .cnpj__bar   { --float-amp: -13px; --float-giro: -0.5deg; --float-dur: 6.4s; --float-fase: -3.1s; }

/* O chat sobe sem girar: são dois balões em coluna, e um giro na caixa toda
   faria o de baixo descrever um arco maior que o de cima — parece torto, não
   parece flutuando. */
.s-cnpj .cnpj__chat  { --float-amp: -9px;  --float-dur: 7.2s; --float-fase: -5.4s; }

/* ---------- A foto se aproxima quando o mouse entra no card ---------- */
/* Só a foto: as peças de interface acima dela ficam paradas, e é esse contraste
   que faz elas lerem como camada solta em vez de parte da imagem. */
.s-cnpj .cnpj__card { --zoom: 1.05; }

/* A foto da abertura vive dentro do painel girado, e é bem maior que ele.
   A origem é o ponto da foto que está no centro do painel — medido, não
   chutado: (409,723/2 + 78,2) / 553,68 e (330,422/2 + 145,385) / 660,844. */
.s-cnpj .cnpj__painel img { transform-origin: 51.12% 47%; }

/* Os dois mockups de tela aparecem inteiros dentro do card: o centro deles é
   o centro do que se vê, e o padrão do navegador já serve. */
.s-cnpj .cnpj__shot { transform-origin: 50% 50%; }

/* O card já recorta (overflow: hidden, radius 16). O que cresce além da borda
   some nela — é esse corte que faz o zoom parecer profundidade e não inchaço. */

/* ---------- Entrada ---------- */
/* O stagger dos três cards é o gesto que dá ritmo à dobra: a trilha se monta
   da esquerda para a direita no desktop e de cima para baixo no mobile, na
   mesma ordem do DOM. Passo de 90ms — curto o bastante para não virar espera
   em quem rola rápido. */
.s-cnpj .cnpj__title { --entra-delay: 0s; }
.s-cnpj .cnpj__card--abertura { --entra-delay: .10s; --entra-dy: 22px; }
.s-cnpj .cnpj__card--precos   { --entra-delay: .19s; --entra-dy: 22px; }
.s-cnpj .cnpj__card--nota     { --entra-delay: .28s; --entra-dy: 22px; }
.s-cnpj .cnpj__cta { --entra-delay: .36s; --entra-dy: 12px; }

/* No mobile os três cards empilham, e cada um entra na tela sozinho. O atraso
   que no desktop é cascata vira, ali, espera morta: o card chega, e só um
   quarto de segundo depois começa a aparecer. Cascata só onde os três estão
   na mesma linha. */
@media (max-width: 1023px) {
  .s-cnpj .cnpj__card--abertura,
  .s-cnpj .cnpj__card--precos,
  .s-cnpj .cnpj__card--nota { --entra-delay: 0s; }
}

/* ===== contador ===== */
/* ===========================================================
   05 Conversa com contador  —  key="contador"
   Fonte: pagina "Apresentacao 2" (14256:2)
   Desktop: no 14256:268 (1920x659) — container 1200 @ x=360, y=80, h=499
   Mobile : no 14256:832 (390x984)  — padding 40/16, gap 24, cards empilhados
   Tipografia 100% Inter (as pilulas em Lato da versao anterior sairam).
   =========================================================== */

.s-contador {
  box-sizing: border-box;
  background: #0A1E47;
  padding: 80px 0;
  min-height: 659px;
}

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

/* ---------- layout ---------- */
.s-contador .contador__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
}

/* Left: 538 = 1200 - 64 (gap) - 598 (cards) */
.s-contador .contador__left {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.s-contador .contador__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 514px;
  max-width: 100%;
}

/* ---------- textos ---------- */
.s-contador .contador__title {
  margin: 0;
  /* o Figma quebra depois de "duvidas": 312px e a largura que gera essa quebra */
  max-width: 312px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -1.08px;
  color: #FFFFFF;
}

.s-contador .contador__title .kw {
  font-weight: 700;
  font-style: italic;
  color: #04F7F7;
}

.s-contador .contador__title--mobile,
.s-contador .contador__sub--mobile {
  display: none;
}

.s-contador .contador__sub {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #CCD4E8;
}

/* ---------- CTA ---------- */
.s-contador .contador__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-contador .contador__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 360px;
  background: #04F7F7;
  color: #002868;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
}

/* ---------- cards de contadores ---------- */
.s-contador .contador__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 0 1 598px;
  width: 598px;
  min-width: 0;
  height: 499px;
}

.s-contador .contador__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 499px;
  border-radius: 16px;
  overflow: hidden;
}

/* foto: reproduz o fill IMAGE/CROP do Figma (imageTransform) */
.s-contador .contador__foto {
  position: absolute;
  display: block;
  max-width: none;
}

.s-contador .contador__card--thaina .contador__foto {
  width: 261.2450%;
  height: 151.3027%;
  left: -80.6229%;
  top: -19.2552%;
}

.s-contador .contador__card--adrielle .contador__foto {
  width: 359.8027%;
  height: 100%;
  left: -153.2264%;
  top: 0;
}

.s-contador .contador__card--charles .contador__foto {
  width: 451.8395%;
  height: 122.0379%;
  left: -243.7291%;
  top: -4.2632%;
}

/* o degrade lateral so existe no card da Thaina no frame mobile */
.s-contador .contador__scrim {
  display: none;
}

/* ---------- credencial (mesma peca no desktop e no mobile) ---------- */
.s-contador .contador__cred {
  position: absolute;
  top: 387px;
  left: 8.5px;
  width: 176.667px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background: rgba(18, 50, 122, 0.86);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.s-contador .contador__marca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 9px;
  background: #EDF0FA;
  overflow: hidden;
}

.s-contador .contador__marca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s-contador .contador__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: 'Inter', sans-serif;
}

.s-contador .contador__nome {
  font-weight: 700;
  font-style: normal;
  font-size: 12.5px;
  line-height: 16px;
  letter-spacing: 0;
  color: #FFFFFF;
}

.s-contador .contador__cargo,
.s-contador .contador__crc {
  font-weight: 400;
  font-style: normal;
  font-size: 9.5px;
  line-height: 13px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
}

/* ===========================================================
   MOBILE — frame 390x984 (14256:832). Vale ate 1023px,
   como no resto da LP.
   fluxo: H2 (40) - Sub (132) - Contadores (240, 3x200 gap 12) - CTA (888)
   =========================================================== */
@media (max-width: 1023px) {
  .s-contador {
    padding: 40px 0;
    min-height: 984px;
  }

  .s-contador .contador__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* no mobile os filhos viram itens diretos da coluna (ordem: H2, Sub, cards, CTA) */
  .s-contador .contador__left,
  .s-contador .contador__header,
  .s-contador .contador__cta {
    display: contents;
  }

  .s-contador .contador__title {
    order: 1;
    max-width: none;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.84px;
  }

  .s-contador .contador__sub {
    order: 2;
  }

  /* o texto do frame 390 e diferente do desktop */
  .s-contador .contador__title--desktop,
  .s-contador .contador__sub--desktop {
    display: none;
  }

  .s-contador .contador__title--mobile,
  .s-contador .contador__sub--mobile {
    display: block;
  }

  .s-contador .contador__cards {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    /* em coluna o flex-basis governaria a ALTURA: devolver auto */
    flex: 0 0 auto;
    width: auto;
    height: auto;
    gap: 12px;
  }

  .s-contador .contador__card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    /* 358x200 no frame 390: a proporcao mantem o recorte das fotos
       correto em qualquer largura da faixa mobile */
    aspect-ratio: 358 / 200;
  }

  .s-contador .contador__btn {
    order: 4;
    width: 100%;
  }

  /* fotos — imageTransform do frame mobile */
  .s-contador .contador__card--thaina {
    background: #D0D6DB;
  }

  .s-contador .contador__card--thaina .contador__foto {
    width: 81.5643%;
    height: 219.0000%;
    left: 19.8240%;
    top: -35.6863%;
  }

  .s-contador .contador__card--adrielle .contador__foto {
    width: 110.7201%;
    height: 148.5729%;
    left: 0.0450%;
    top: -9.1842%;
  }

  .s-contador .contador__card--charles .contador__foto {
    width: 137.0279%;
    height: 178.6919%;
    left: -31.3921%;
    top: -17.0894%;
  }

  /* degrade que prolonga o fundo claro da foto da Thaina a esquerda */
  .s-contador .contador__card--thaina .contador__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 62.011%, #E3E3E3 81.145%);
  }

  /* credencial: 14px da borda esquerda e 14px do rodape do card */
  .s-contador .contador__cred {
    top: auto;
    bottom: 14px;
    left: 14px;
    width: auto;
    max-width: calc(100% - 28px);
    padding: 9px 12px 9px 9px;
  }

  .s-contador .contador__marca {
    width: 34px;
    height: 34px;
  }

  .s-contador .contador__txt {
    flex: 0 0 auto;
  }

  .s-contador .contador__nome {
    font-size: 13px;
    line-height: 17px;
  }

  .s-contador .contador__cargo,
  .s-contador .contador__crc {
    font-size: 10px;
    line-height: 13px;
  }
}

/* --------------------------------------------------------------------------
   Telas largas ainda no layout mobile (inclui a faixa 768-1023): a coluna
   para de crescer em 560px e fica centralizada, senao os cards viram
   faixas gigantes. Sem referencia no Figma.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .s-contador .contador__title,
  .s-contador .contador__sub,
  .s-contador .contador__cards,
  .s-contador .contador__btn {
    width: 100%;
    max-width: 560px;
    align-self: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .s-contador {
    padding: 56px 0;
    min-height: 0;
  }

  .s-contador .contador__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}

/* ==========================================================================
   Movimento
   ========================================================================== */

/* ---------- A foto se aproxima quando o mouse entra no card ---------- */
/* As três fotos vêm do Figma com fill CROP: a imagem é de duas a quatro vezes
   mais larga que o card e está deslocada para a esquerda. O centro da foto,
   portanto, não é o rosto — é um ponto fora do card. Cada origem abaixo é o
   ponto da foto que cai no centro do que se vê, calculado a partir do próprio
   recorte: (50 - left%) / width% e (50 - top%) / height%.
   Sem isso o hover arrasta o enquadramento em vez de aproximar o rosto. */
.s-contador .contador__card { --zoom: 1.04; }

.s-contador .contador__card--thaina   .contador__foto { transform-origin: 50.00% 45.77%; }
.s-contador .contador__card--adrielle .contador__foto { transform-origin: 56.48% 50.00%; }
.s-contador .contador__card--charles  .contador__foto { transform-origin: 65.01% 44.46%; }

/* ---------- A credencial flutua ---------- */
/* Mesma peça, mesma leitura que o toast da dobra de CNPJ: um cartão de vidro
   solto acima da foto. Amplitude menor que lá porque aqui são três lado a
   lado — o mesmo deslocamento que passa despercebido sozinho vira ondulação
   quando repetido em fileira. */
.s-contador .contador__cred { --float-amp: -8px; --float-giro: 0.4deg; --float-dur: 7s; }
.s-contador .contador__card--thaina   .contador__cred { --float-fase: -0.4s; }
.s-contador .contador__card--adrielle .contador__cred { --float-fase: -3.6s; }
.s-contador .contador__card--charles  .contador__cred { --float-fase: -6.7s; }

/* A credencial é a única peça flutuante com backdrop-filter. Mover um elemento
   que desfoca o fundo obriga o navegador a reamostrar e reborrar esse fundo a
   cada quadro — são três ao mesmo tempo. No desktop o custo não aparece
   (medido: nenhuma diferença na mediana nem no p95 dos quadros), mas num
   celular fraco esse é justamente o caso caro. Abaixo de 1024px, onde os cards
   já mudam de arranjo, a credencial fica parada. */
@media (max-width: 1023px) {
  .s-contador .contador__cred { animation: none; }
}

/* ---------- Entrada ---------- */
/* Título e subtítulo no mesmo tempo: são uma frase só partida em dois
   elementos, e escaloná-los faria a segunda linha chegar atrasada.
   A laje dos retratos usa a variante "sobe" — sem fade. As credenciais têm
   backdrop-filter, e opacity num ancestral refaz a raiz do desfoque: durante
   o voo o vidro passaria a amostrar o card em vez da página, e a credencial
   piscaria de cor. */
.s-contador .contador__title { --entra-delay: 0s; }
.s-contador .contador__sub   { --entra-delay: 0s; }
.s-contador .contador__cards { --entra-delay: .14s; --entra-dy: 24px; }

/* ===== avaliacoes ===== */
/* ==========================================================================
   05.5 Avaliações  |  key="avaliacoes"
   Desktop: node 14150:11765 (1920x691)  |  Mobile: node 14150:12338 (390x465)
   ========================================================================== */

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

.s-avaliacoes {
  background-color: #041124;
  padding: 96px 0;
  min-height: 691px;
}

.s-avaliacoes .avaliacoes__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* --- Título ------------------------------------------------------------- */

.s-avaliacoes .avaliacoes__title {
  width: 780px;
  max-width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
}

/* --- Faixa de depoimentos ----------------------------------------------- */

.s-avaliacoes .avaliacoes__carrossel {
  width: 100%;
}

.s-avaliacoes .avaliacoes__strip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-height: 283px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Card de review ------------------------------------------------------ */

.s-avaliacoes .avaliacoes__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.s-avaliacoes .avaliacoes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}

.s-avaliacoes .avaliacoes__id {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0;
  color: #667799;
  white-space: nowrap;
}

.s-avaliacoes .avaliacoes__stars {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.2px;
  color: #04F7F7;
  white-space: nowrap;
}

.s-avaliacoes .avaliacoes__quote {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
  color: #C9E0FF;
}

.s-avaliacoes .avaliacoes__autor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  overflow: hidden;
}

.s-avaliacoes .avaliacoes__nome {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0;
  color: #FFFFFF;
  white-space: nowrap;
}

.s-avaliacoes .avaliacoes__fonte {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0;
  color: #8FA3CC;
  white-space: nowrap;
}

.s-avaliacoes .avaliacoes__link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0;
  color: #04F7F7;
  text-decoration: underline;
  white-space: nowrap;
}

/* --- Dots (só no mobile) -------------------------------------------------- */

.s-avaliacoes .avaliacoes__dots {
  display: none;
}

.s-avaliacoes .avaliacoes__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.s-avaliacoes .avaliacoes__dot.is-ativo {
  background-color: #04F7F7;
}

/* --- CTA ------------------------------------------------------------------ */

.s-avaliacoes .avaliacoes__cta {
  padding: 0 64px;
}

/* ==========================================================================
   Mobile — frame 390 (14150:12338)
   ========================================================================== */

@media (max-width: 767px) {
  .s-avaliacoes {
    padding: 40px 0 0;
    min-height: 465px;
  }

  .s-avaliacoes .avaliacoes__inner {
    gap: 20px;
  }

  .s-avaliacoes .avaliacoes__title {
    width: 100%;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -1px;
    text-align: left;
  }

  .s-avaliacoes .avaliacoes__carrossel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .s-avaliacoes .avaliacoes__carrossel::-webkit-scrollbar {
    display: none;
  }

  .s-avaliacoes .avaliacoes__strip {
    width: max-content;
    min-height: 213px;
  }

  .s-avaliacoes .avaliacoes__card {
    flex: 0 0 300px;
    width: 300px;
    scroll-snap-align: start;
  }

  .s-avaliacoes .avaliacoes__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 72px;
    height: 8px;
  }

  .s-avaliacoes .avaliacoes__cta {
    width: 100%;
    padding: 0 32px;
  }
}


/* O bloco do autor não pode empurrar a largura do card: entre 768 e 1279 os
   cards ficam mais estreitos que os 224px do Figma e o nome transbordava. */
.s-avaliacoes .avaliacoes__autor { min-width: 0; max-width: 100%; }
.s-avaliacoes .avaliacoes__autor > * { max-width: 100%; overflow-wrap: anywhere; }

/* ---------- Entrada ---------- */
/* A faixa entra como uma peça só, em fade puro. Escalonar os cinco cards seria
   bonito, mas eles vivem dentro de um strip que o carrossel translada sozinho:
   dois donos do mesmo eixo é briga garantida. */
.s-avaliacoes .avaliacoes__title { --entra-delay: 0s; }
.s-avaliacoes .avaliacoes__carrossel { --entra-delay: .14s; --entra-dur: .7s; }
.s-avaliacoes .avaliacoes__cta { --entra-delay: .28s; --entra-dy: 12px; }

/* Os pontinhos zeram o outline por desenho; sem um substituto, quem chega
   neles pelo teclado não vê onde está. Só no foco por teclado. */
.s-avaliacoes .avaliacoes__dot:focus-visible {
  outline: 2px solid #04F7F7;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   768–1023px: os reviews viram carrossel, como no mobile
   --------------------------------------------------------------------------
   A faixa mantinha as cinco colunas nessa largura, e cinco colunas em 768px dão
   134px de card. Medido: a citação e a linha de estrelas estouravam a própria
   caixa (scrollWidth 113 contra clientWidth 94). O Figma não tem frame de
   tablet — essa faixa é interpolação nossa, e a interpolação estava errada.

   Reaproveita o tratamento do mobile, que já existe e agora tem os pontinhos
   ligados: um card por vez, encaixe por scroll-snap e indicador. Só o que é do
   carrossel; título, espaçamento e CTA continuam os da faixa larga.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-avaliacoes .avaliacoes__carrossel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .s-avaliacoes .avaliacoes__carrossel::-webkit-scrollbar { display: none; }

  .s-avaliacoes .avaliacoes__strip { width: max-content; }

  .s-avaliacoes .avaliacoes__card {
    flex: 0 0 300px;
    width: 300px;
    scroll-snap-align: start;
  }

  .s-avaliacoes .avaliacoes__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 72px;
    height: 8px;
    margin: 0 auto;
  }
}

/* ===== faq ===== */
/* ==========================================================================
   06 FAQ  —  desktop 14150:11816 (1920x802) / mobile 14150:12396 (390x778)
   ========================================================================== */

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

.s-faq {
  background: #041124;
  min-height: 802px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* <faq-desktop> 1200x802 — HORIZONTAL, padding 64px vertical, gap -120px */
.s-faq .faq__inner {
  display: flex;
  align-items: center;
  padding-block: 64px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   <image-mask> — 500x674, radius 16/16/0/0, clip
   -------------------------------------------------------------------------- */
.s-faq .faq__media {
  position: relative;
  flex: 0 0 41.6667%;   /* 500 / 1200 */
  height: 674px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* <image> 500x674 — fill de imagem scaleMode FILL */
.s-faq .faq__foto,
.s-faq .faq__recorte {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none;
}

/* Vector 559x768 em (-14, -47) — #04F7F7 a 14% */
.s-faq .faq__forma {
  position: absolute;
  left: -2.8%;            /* -14 / 500 */
  top: -6.9733%;          /* -47 / 674 */
  width: 111.8%;          /* 559 / 500 */
  height: 113.9466%;      /* 768 / 674 */
  display: block;
  max-width: none;
}

/* --------------------------------------------------------------------------
   <questions> (card) — 820x450, bg #081838, stroke 1px #0E53C0 (inside),
   radius 16, drop shadow 0 4 8 rgba(117,125,146,.3), padding 24, gap 40
   -------------------------------------------------------------------------- */
.s-faq .faq__card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -10%;      /* gap -120 / 1200 */
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  border-radius: 16px;
  background: #081838;
  box-shadow:
    inset 0 0 0 1px #0E53C0,
    0 4px 8px rgba(117, 125, 146, 0.3);
}

/* <title> — Inter Bold 32/42, letter-spacing -0.96px */
.s-faq .faq__title {
  align-self: flex-start;
  width: 580px;
  max-width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.96px;
  color: #FFFFFF;
}

.s-faq .faq__dot { color: #04F7F7; }

/* <questions> lista — 772 de largura, gap 16 */
.s-faq .faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-faq .faq__item { width: 100%; }

/* <question> — 772x40, space-between, gap 43, padding-bottom 16,
   stroke bottom 1px rgba(255,255,255,.12) (inside) */
.s-faq .faq__question {
  width: 100%;
  margin: 0;
  padding: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 43px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.s-faq .faq__item:last-child .faq__question { box-shadow: none; }

/* texto da pergunta — Inter Bold 16/21, letter-spacing -0.48px */
.s-faq .faq__q {
  flex: 0 1 580px;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.48px;
  color: #FFFFFF;
  overflow-wrap: break-word;
}

/* chevrons */
.s-faq .faq__chevron {
  display: block;
  transition: transform 0.25s ease;
}

.s-faq .faq__chevron--desktop {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.s-faq .faq__chevron--mobile { display: none; }

.s-faq .faq__question[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   MOBILE — frame 390x778 (14150:12396)
   ========================================================================== */
@media (max-width: 767px) {
  .s-faq { min-height: 778px; }

  /* section: padding 40 top / 0 bottom / 16 lateral (via .container), gap 20 */
  .s-faq .faq__inner {
    flex-direction: column;
    align-items: stretch;
    padding-block: 40px 0;
  }

  /* o card deixa de ser caixa: H2, media e lista viram irmãos na coluna */
  .s-faq .faq__card {
    display: contents;
  }

  /* H2 — Inter Bold 28/44, letter-spacing -0.84px */
  .s-faq .faq__title {
    order: 1;
    align-self: stretch;
    width: 100%;
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 44px;
    letter-spacing: -0.84px;
  }

  /* <image-mask> — 358x252, radius 16/16/0/0 */
  .s-faq .faq__media {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    height: 252px;
  }

  /* <image> 369x382 em (-12, -112.6923828125) */
  .s-faq .faq__foto,
  .s-faq .faq__recorte {
    left: -3.352%;          /* -12 / 358 */
    top: -44.7192%;         /* -112.6923828125 / 252 */
    width: 103.0726%;       /* 369 / 358 */
    height: 151.5873%;      /* 382 / 252 */
  }

  /* Vector 389x536 em (-7, 10.3076171875) */
  .s-faq .faq__forma {
    left: -1.9553%;         /* -7 / 358 */
    top: 4.0904%;           /* 10.3076171875 / 252 */
    width: 108.6592%;       /* 389 / 358 */
    height: 212.6984%;      /* 536 / 252 */
  }

  /* FAQ card — 358x422, bg #081838, stroke 1px rgba(255,255,255,.14),
     radius 0/0/16/16, shadow 0 16 40 rgba(14,45,110,.08), padding 4/20 */
  .s-faq .faq__list {
    order: 3;
    width: 100%;
    gap: 0;
    padding: 4px 20px;
    border-radius: 0 0 16px 16px;
    background: #081838;
    overflow: hidden;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      0 16px 40px rgba(14, 45, 110, 0.08);
  }

  /* Item — padding 18 vertical, stroke bottom 1px rgba(255,255,255,.14) */
  .s-faq .faq__question {
    padding: 18px 0;
    gap: 16px;
    justify-content: flex-start;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
  }

  /* Q — Inter Bold 16/22, letter-spacing -0.16px */
  .s-faq .faq__q {
    flex: 1 1 auto;
    line-height: 22px;
    letter-spacing: -0.16px;
  }

  .s-faq .faq__chevron--desktop { display: none; }

  .s-faq .faq__chevron--mobile {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  /* item 1 mostra o chevron para cima no Figma (14150:12407) */
  .s-faq .faq__item:first-child .faq__chevron--mobile {
    transform: rotate(180deg);
  }
}

/* ==========================================================================
   Accordion — o Figma só traz as perguntas; o painel de resposta é novo.
   A altura é animada por max-height, que o script mede e aplica.
   ========================================================================== */
/* A resposta fechada tem altura zero, mas continuava com visibility: visible —
   ou seja, dentro da árvore de acessibilidade. Quem usa leitor de tela ouvia as
   oito respostas emendadas, como se o acordeão estivesse todo aberto.

   visibility: hidden tira da árvore sem tirar do layout (o initFAQ continua
   medindo scrollHeight para animar). A transição de visibility é atrasada até o
   fim do recolhimento, senão a resposta sumiria de uma vez em vez de encolher. */
.s-faq .faq__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height .3s ease, opacity .2s ease, visibility 0s linear .3s;
}

.s-faq .faq__item.is-open .faq__panel {
  opacity: 1;
  visibility: visible;
  transition: max-height .3s ease, opacity .2s ease, visibility 0s linear 0s;
}

.s-faq .faq__a {
  margin: 0;
  padding: 0 40px 20px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: #c9e0ff;
}

/* com o item aberto, a linha divisória desce para depois da resposta */
.s-faq .faq__item.is-open .faq__question { box-shadow: none; }
.s-faq .faq__item.is-open .faq__panel {
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, .12);
}
.s-faq .faq__item.is-open:last-child .faq__panel { box-shadow: none; }

@media (max-width: 767px) {
  .s-faq .faq__a { padding-right: 28px; font-size: 14px; line-height: 22px; }
}

/* As respostas novas têm vários parágrafos e uma delas traz lista. */
.s-faq .faq__panel > .faq__a + .faq__a,
.s-faq .faq__panel > .faq__lista + .faq__a { margin-top: 12px; }

.s-faq .faq__lista {
  margin: 12px 0 0;
  padding: 0 40px 0 20px;
  list-style: disc;
}

.s-faq .faq__lista-item {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.15px;
  color: #c9e0ff;
  list-style: disc;
}

.s-faq .faq__lista-item + .faq__lista-item { margin-top: 6px; }

/* a resposta fica rolável se passar da altura de uma tela */
.s-faq .faq__item.is-open .faq__panel { overflow-y: auto; }

@media (max-width: 767px) {
  .s-faq .faq__lista { padding-right: 28px; }
  .s-faq .faq__lista-item { font-size: 14px; line-height: 22px; }
}

/* ==========================================================================
   Movimento — a foto se aproxima no hover
   ==========================================================================
   A foto e o recorte ocupam a caixa inteira com object-fit: cover, então o
   centro da caixa é o centro da imagem e o padrão do navegador já é a origem
   certa. Os dois escalam juntos para o recorte não descolar do fundo.

   A forma ciana fica parada: ela é o grafismo da marca sobre a foto, não parte
   da foto. Parada, ela marca a moldura enquanto a imagem entra. */
.s-faq .faq__media { --zoom: 1.045; }

/* ---------- Entrada ---------- */
/* Marca-se título e lista, não o card: no desktop eles moram dentro do card,
   no mobile o card vira display:contents. Marcar os dois de dentro é a única
   escolha que funciona nos dois breakpoints — e evita reveal dentro de reveal,
   que faria dois fades sobrepostos no mesmo texto.
   A lista entra em fade puro: são oito perguntas empilhadas, e 18px de
   deslocamento num bloco desse tamanho lê como tremida. */
.s-faq .faq__media { --entra-delay: 0s; --entra-dy: 22px; }
.s-faq .faq__title { --entra-delay: .06s; }
.s-faq .faq__list  { --entra-delay: .14s; }

/* ===== 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__group--a .barra__info {
  width: 247px;
}

.s-barra .barra__group--b .barra__info {
  width: 263px;
}

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

.s-barra .barra__text {
  flex: 1 1 auto;
  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__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.
   width travada em 239px (valor medido no nó "btn" do Figma, 14150:11844) porque
   o texto renderizado no browser (Inter real) é ~1-2px mais largo que a medição
   do Figma; sem isso o grupo A cresce e desloca o grupo B (que é ancorado à
   direita via space-between) alguns px para a esquerda. */
.s-barra .barra__cta--a {
  width: 239px;
  color: var(--azul-office, #002868);
}

/* Figma: borda do CTA ghost é branco sólido (100% opacidade), não --glass-stroke (16%).
   width travada em 198px pelo mesmo motivo do cta--a acima (nó "btn" do grupo B,
   14150:11844): trava o grupo B em 477px = como no Figma, então barra__inner
   (space-between) posiciona o grupo B exatamente em x=723 (abs 1083). */
.s-barra .barra__cta--b {
  width: 198px;
  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;
  }

  .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 outline.
     width:auto porque aqui não há grupo A/space-between disputando espaço
     (reseta o width:198px 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--b { display: none; }
  .s-barra .barra__inner { justify-content: space-between; }
  .s-barra .barra__group--a { flex: 1 1 auto; justify-content: space-between; gap: 16px; }
  .s-barra .barra__text { min-width: 0; }
  .s-barra .barra__cta--a { 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; }

/* ===== 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: 12px;
  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: 12px;
  }

  /* No desktop o Figma usa scaleMode CROP com imageTransform
     [[0.6327,0,0.1599],[0,0.7060,0.2947]]. A conversão é a mesma do resto da
     página: width% = 100/a, height% = 100/d, left% = -100·tx/a, top% = -100·ty/d. */
  .modal__foto-img {
    position: absolute;
    width: 158.046%;
    height: 141.6512%;
    left: -25.2742%;
    top: -41.7472%;
    object-fit: fill;
    object-position: initial;
    max-width: none;
  }

  /* No desktop a foto é uma coluna inteira e não há texto por cima dela:
     o véu que apaga a base existe para a emenda do mobile e aqui só escureceria
     a imagem à toa. */
  .modal__foto-veu { display: 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: 42px;
    letter-spacing: -0.6px;
  }

  .modal__sub {
    max-width: 436px;        /* a largura da caixa do Figma: é ela que quebra a linha */
    font-size: 15px;
    line-height: 24px;
  }

  .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; }