/* Design tokens. Single source for colour and type across every page. */
:root {
  --teal-900: #04342C;
  --teal-800: #085041;
  --teal-700: #0A2A22;
  --teal-600: #0F6E56;
  --teal-500: #1D9E75;
  --teal-400: #3AB88D;
  --teal-300: #5DCAA5;
  --teal-200: #9FE1CB;
  --teal-100: #E1F5EE;

  --escuro: #0e1a16;
  --tinta: #0a1f19;
  --texto: #16291f;
  --suave: #4a6258;
  --creme: #f3f5f1;
  --branco-quente: #f8f9f6;
  --borda: rgba(10, 31, 25, 0.1);
  /* Fundo das seções pares da home: um creme um pouco mais verde que o
     papel, para a troca de seção ser visível sem precisar de cor forte. */
  --secao-alternada: #eef2ec;

  /* Grotesca para tudo; a serifa italica entra so como destaque pontual. */
  --fonte-display: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --fonte-corpo: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --fonte-acento: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --fonte-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escalas fluidas: crescem continuamente com a tela, sem saltos. */
  --largura-max: 1240px;
  --margem: clamp(20px, 5vw, 64px);
  --secao-y: clamp(72px, 9vw, 136px);

  /* Quatro níveis de texto: título de seção (.secao-titulo), subtítulo,
     título de cartão e corpo. */
  --tipo-subtitulo: clamp(24px, 1.2vw + 16px, 32px);
  --tipo-cartao: 20px;
  /* Sistema: dois raios (12 para peças internas, 24 para cartões) e duas
     sombras (repouso e destaque). As telas e o celular são ilustração e
     seguem o desenho do app, fora desta escala. */
  --raio: 12px;
  --raio-grande: 24px;
  --sombra-repouso: 0 1px 2px rgba(10, 31, 25, 0.04), 0 18px 40px -28px rgba(4, 52, 44, 0.3);
  --sombra-destaque: 0 2px 4px rgba(10, 31, 25, 0.04), 0 34px 64px -36px rgba(4, 52, 44, 0.45);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sem isto, o Safari do iPhone aumenta o texto por conta própria em algumas
     caixas (sobretudo na horizontal) e o texto passa a ser cortado. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--fonte-corpo);
  font-size: clamp(16px, 0.25vw + 15.2px, 17.5px);
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco-quente);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-wrap: balance;
}

/* Palavra de destaque em serifa italica, usada com parcimonia nos titulos. */
.destaque {
  font-family: var(--fonte-acento);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--teal-600);
}

a {
  color: var(--teal-600);
}

img,
svg {
  max-width: 100%;
}

/* --- Acessibilidade --- */

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

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--teal-600);
  color: #fff;
  border-radius: 0 0 var(--raio) 0;
  text-decoration: none;
}

.pular-para-conteudo:focus {
  left: 0;
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Navegação --- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}

.nav > * {
  position: relative;
}

.nav-rolado {
  background: rgba(248, 249, 246, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--borda);
}

/* A nav e um flex de largura total; o conteudo se alinha ao mesmo grid das secoes. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 max(var(--margem), calc((100vw - var(--largura-max)) / 2));
}

.nav-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}

.nav-marca svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.nav-marca span {
  white-space: nowrap;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--suave);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--tinta);
  background: rgba(10, 31, 25, 0.05);
}

.nav-links .nav-cta,
.nav-menu-movel .nav-cta {
  margin-left: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff !important;
  font-weight: 500;
}

.nav-links .nav-cta:hover {
  background: var(--teal-800);
}

.nav-menu-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.nav-menu-barras,
.nav-menu-barras::before,
.nav-menu-barras::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--tinta);
  border-radius: 2px;
}

.nav-menu-barras {
  position: relative;
}

.nav-menu-barras::before,
.nav-menu-barras::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-menu-barras::before {
  top: -5px;
}

.nav-menu-barras::after {
  top: 5px;
}

.nav-menu-movel {
  position: fixed;
  inset: 64px 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 16px var(--margem) 32px;
  background: var(--branco-quente);
  overflow-y: auto;
}

/* O display:flex acima vence o [hidden] da folha do navegador, que é só uma
   regra de atributo. Sem isto o menu fica permanentemente aberto no mobile. */
.nav-menu-movel[hidden] {
  display: none;
}

.nav-menu-movel a {
  padding: 16px 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}

.nav-menu-movel .nav-cta {
  margin: 24px 0 0;
  padding: 16px;
  text-align: center;
  font-size: 17px;
  border-bottom: 0;
}

/* O menu completo precisa de uns 980px numa linha (cinco itens e o botao);
   abaixo de 1024px fica o botao de menu, como no celular. */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .nav-menu-botao {
    display: none;
  }

  .nav-menu-movel {
    display: none !important;
  }
}

/* --- Botões --- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.botao-primario {
  background: var(--tinta);
  color: #fff;
}

.botao-primario:hover {
  background: var(--teal-800);
}

.botao-primario:active {
  transform: translateY(1px);
}

.botao-seta {
  width: 18px;
  height: 18px;
  transition: transform 0.25s cubic-bezier(.16, 1, .3, 1);
}

.botao:hover .botao-seta {
  transform: translateX(3px);
}

.botao-secundario,
.botao-fantasma {
  border: 1px solid rgba(10, 31, 25, 0.18);
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.5);
}

.botao-secundario:hover,
.botao-fantasma:hover {
  border-color: var(--tinta);
  background: #fff;
}

/* --- Hero --- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(100svh, 1000px);
  padding: calc(64px + clamp(32px, 6vw, 72px)) var(--margem) 0;
  background: var(--branco-quente);
}

/* Malha de pontos desenhada em canvas pelo script do hero. Acende perto do
   cursor; some suavemente para baixo. */
.hero-pontos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

.hero-interno {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 7vw, 72px);
  align-items: center;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero-selo-lista {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 28px);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-800);
}

.hero-pulso {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
}

.hero-pulso::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--teal-400);
  animation: pulso 2.2s ease-out infinite;
}

@keyframes pulso {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

.hero-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(42px, 3.2vw + 26px, 86px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 13ch;
}

/* A serifa italica tem altura-x menor: sobe um pouco o corpo para equilibrar. */
.hero-titulo .destaque {
  font-size: 1.08em;
  letter-spacing: -0.02em;
}

.hero-titulo-longo {
  font-size: clamp(36px, 2.2vw + 24px, 64px);
  line-height: 1.02;
  max-width: 17ch;
}

.hero-subtitulo {
  max-width: 46ch;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.55;
  color: var(--suave);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 36px);
}

.hero-contador {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  max-width: 440px;
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--suave);
  text-decoration: none;
}

.hero-contador-link {
  margin-left: 4px;
  color: var(--tinta);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(10, 31, 25, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

.hero-contador:hover .hero-contador-link {
  text-decoration-color: var(--tinta);
}

.hero-contador-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: #fff;
  color: var(--teal-700);
}

.hero-contador-icone svg {
  width: 15px;
  height: 15px;
}

/* --- Aparelho com o app (ilustração do hero) --- */

.app {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
}

.app-cena {
  position: relative;
}

.app-aparelho {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 9px;
  border-radius: 50px;
  background: linear-gradient(150deg, #23332e 0%, #0a1f19 55%, #13241f 100%);
  box-shadow:
    0 0 0 1px rgba(10, 31, 25, 0.5),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.07),
    0 30px 60px -28px rgba(4, 52, 44, 0.5),
    0 70px 120px -60px rgba(4, 52, 44, 0.35);
}

.app-tela {
  position: relative;
  overflow: hidden;
  border-radius: 41px;
  background: #f5f6f3;
  padding: 12px 12px 14px;
  color: var(--tinta);
}

.app-ilha {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 88px;
  height: 25px;
  border-radius: 20px;
  background: #050a08;
  transform: translateX(-50%);
  z-index: 5;
}

.app-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 14px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-status svg {
  width: 34px;
  height: 12px;
  fill: currentColor;
}

/* Notificação do sistema, que desce do topo quando o Pix chega. */
.app-notificacao {
  position: absolute;
  top: 40px;
  left: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px -10px rgba(10, 31, 25, 0.35), 0 0 0 1px rgba(10, 31, 25, 0.06);
  transition: transform 0.6s cubic-bezier(.16, 1, .3, 1), opacity 0.4s ease;
}

.app-notificacao-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.08);
}

.app-notificacao-icone svg {
  width: 19px;
  height: 19px;
}

.app-notificacao-texto {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.app-notificacao-texto small {
  font-size: 10.5px;
  color: var(--suave);
}

.app-notificacao-texto strong {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-notificacao-texto span {
  font-size: 12px;
  color: var(--teal-700);
}

/* A home do app, com as cores, raios e proporções do design do app
   (pj.css, tema claro), reduzidos a 80% para caber no aparelho. A tela tem
   altura de celular; o fim da lista passa por baixo das abas. */
.app-tela {
  --pj-texto: #04342c;
  --pj-texto-2: #085041;
  --pj-suave: #5f6b66;
  --pj-acento: #0f6e56;
  --pj-borda: rgba(4, 52, 44, 0.08);
  --pj-fio: rgba(4, 52, 44, 0.12);
  --pj-sombra: 0 1px 2px rgba(4, 52, 44, 0.04), 0 5px 16px rgba(4, 52, 44, 0.06);
  height: 640px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, #ecf5f0 0px, #fafbfa 260px);
  color: var(--pj-texto);
}

.app-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
}

.app-marca {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-marca svg {
  width: 24px;
  height: 24px;
}

.app-topo-acoes {
  display: flex;
  gap: 16px;
}

.app-topo-acoes svg {
  width: 19px;
  height: 19px;
}

/* Cartão do saldo: o degradê do design e os dois círculos de luz. */
.app-cartao {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(29, 158, 117, 0.38) 0%, rgba(29, 158, 117, 0) 55%),
    linear-gradient(165deg, #07473a 0%, #04342c 55%, #032920 100%);
  color: #e1f5ee;
  box-shadow: 0 1px 2px rgba(4, 52, 44, 0.12), 0 10px 26px rgba(4, 52, 44, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-cartao-luz {
  position: absolute;
  top: -80px;
  right: -29px;
  width: 141px;
  height: 141px;
  border-radius: 50%;
  background: rgba(93, 202, 165, 0.12);
}

.app-cartao-luz-2 {
  top: -51px;
  right: -83px;
  background: rgba(159, 225, 203, 0.08);
}

.app-cartao-corpo {
  position: relative;
  padding: 16px 19px 19px;
}

.app-cartao-empresa {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.app-cartao-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 6px;
  background: #22201c;
  box-shadow: 0 0 0 1px rgba(225, 245, 238, 0.16);
}

.app-cartao-logo svg {
  width: 16px;
  height: 16px;
}

.app-cartao-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 19px;
}

.app-cartao-rotulo {
  display: block;
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fe1cb;
}

.app-cartao-saldo {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.app-moeda {
  font-size: 16px;
  font-weight: 500;
  color: #9fe1cb;
}

.app-cartao-saldo [data-saldo] {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #e1f5ee;
}

.app-circulo {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(225, 245, 238, 0.12);
  color: #e1f5ee;
}

.app-cartao-linha .app-circulo {
  margin-bottom: 2px;
}

.app-circulo svg {
  width: 16px;
  height: 16px;
}

/* A faixa do imposto previsto ocupa a largura do cartão, como no app. */
.app-imposto {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 51px;
  padding: 10px 19px;
  border-top: 1px solid rgba(225, 245, 238, 0.12);
  background: rgba(0, 0, 0, 0.14);
}

.app-imposto-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: rgba(93, 202, 165, 0.16);
  color: #9fe1cb;
}

.app-imposto-icone svg {
  width: 16px;
  height: 16px;
}

.app-imposto-texto {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.app-imposto-texto small {
  font-size: 9.6px;
  color: #9fe1cb;
}

.app-imposto-texto strong {
  margin-top: 1px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Atalhos: três botões em pílula, com o ícone na cor de destaque. */
.app-atalhos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.app-atalhos span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 1px solid var(--pj-borda);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--pj-sombra);
  font-size: 12px;
  font-weight: 500;
}

.app-atalhos svg {
  width: 16px;
  height: 16px;
  color: var(--pj-acento);
}

.app-atalho-pix {
  fill: var(--pj-acento);
}

.app-pendencias {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 51px;
  margin-top: 10px;
  padding: 10px 13px;
  border: 1px solid var(--pj-borda);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--pj-sombra);
}

.app-pendencias-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #faeeda;
  color: #633806;
}

.app-pendencias-icone svg {
  width: 16px;
  height: 16px;
}

.app-pendencias-texto {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.app-pendencias-texto strong {
  font-size: 12px;
  font-weight: 500;
}

.app-pendencias-texto small {
  font-size: 9.6px;
  color: var(--pj-suave);
  font-variant-numeric: tabular-nums;
}

.app-seta {
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: -3px;
  color: var(--pj-suave);
}

.app-emitir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  margin-top: 13px;
  border-radius: 999px;
  background: var(--pj-acento);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 500;
}

.app-emitir svg {
  width: 16px;
  height: 16px;
}

.app-receber {
  margin-top: 22px;
}

.app-receber-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.app-receber-topo strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.app-receber-cartao {
  overflow: hidden;
  border: 1px solid var(--pj-borda);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--pj-sombra);
}

.app-receber ul {
  list-style: none;
}

.app-cobranca {
  --linha: 51px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--linha);
  padding: 0 13px;
}

/* Fio entre as linhas, a partir do texto, como no app. */
.app-cobranca + .app-cobranca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 51px;
  right: 0;
  height: 0.5px;
  background: var(--pj-fio);
}

.app-cobranca-sigla {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  font-size: 9.6px;
  font-weight: 600;
}

.app-sigla-azul { background: #e4effb; color: #14385e; }
.app-sigla-lilas { background: #ece8fa; color: #3f2e7a; }
.app-sigla-areia { background: #f4eee2; color: #5a4520; }

.app-cobranca-texto {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.app-cobranca-texto strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-cobranca-texto small {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9.6px;
  color: var(--pj-suave);
  font-variant-numeric: tabular-nums;
}

.app-cobranca-texto small svg {
  width: 10px;
  height: 10px;
}

.app-atraso {
  font-weight: 500;
  color: #7a1d1c !important;
}

.app-recebido {
  display: none !important;
  font-weight: 500;
  color: var(--pj-acento) !important;
}

.app-cobranca-valor {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* No estado final (sem JS ou depois da animação) a cobrança paga já saiu. */
.app-cobranca-baixa {
  display: none;
}

.app-receber-todas {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pj-acento);
}

.app-receber-todas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 13px;
  right: 0;
  height: 0.5px;
  background: var(--pj-fio);
}

.app-receber-todas svg {
  width: 16px;
  height: 16px;
  margin-right: -3px;
}

/* Abas: pílula flutuante com desfoque, sobre um véu claro no fim da tela. */
.app-tela::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 110px;
  background: linear-gradient(to top, #fafbfa 45%, rgba(250, 251, 250, 0));
  pointer-events: none;
}

.app-abas {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 5px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: inset 0 0 0 0.5px rgba(4, 52, 44, 0.12), 0 2px 6px rgba(4, 52, 44, 0.05), 0 12px 30px rgba(4, 52, 44, 0.12);
}

.app-abas span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 42px;
  border-radius: 21px;
  font-size: 9.6px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--pj-suave);
}

.app-abas svg {
  width: 19px;
  height: 19px;
}

.app-abas .app-aba-ativa {
  background: #e1f5ee;
  color: var(--pj-acento);
}

.app-aba-selo {
  position: absolute;
  top: 1px;
  left: calc(50% + 2px);
  display: grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ef9f27;
  color: #3d2304;
  box-shadow: 0 0 0 2px #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

/* Anotações com linha de chamada, no estilo de prancha. Só aparecem quando
   há espaço ao lado do aparelho. */
.app-nota {
  display: none;
}

.app-repetir {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px auto 0;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--suave);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.app-repetir:hover {
  color: var(--tinta);
  border-color: var(--tinta);
}

.app-repetir svg {
  width: 13px;
  height: 13px;
}

/* Escondido, o botão continua ocupando o lugar: assim nada se move quando
   ele aparece no fim da animação. */
.app-repetir[hidden] {
  display: flex;
  visibility: hidden;
}

/* Etapas da animação. Só valem com .animar, que o script põe; sem JS ou com
   movimento reduzido, tudo fica no estado final. */
.app.animar .app-notificacao {
  transform: translateY(-150%);
  opacity: 0;
}

.app.animar.passo-notificacao .app-notificacao {
  transform: none;
  opacity: 1;
}

.app.animar.passo-fim .app-notificacao {
  transform: translateY(-150%);
  opacity: 0;
}

/* Antes do Pix, a cobrança da ACME está na lista, vencida. Quando o Pix cai,
   ela fica verde e "Recebido agora"; depois sai da lista. */
.app.animar .app-cobranca-baixa {
  display: flex;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(.16, 1, .3, 1), opacity 0.4s ease, background 0.3s ease, padding 0.55s ease;
}

.app.animar.passo-pix .app-cobranca-baixa {
  background: var(--teal-100);
}

.app.animar.passo-pix .app-cobranca-baixa .app-atraso {
  display: none;
}

.app.animar.passo-pix .app-cobranca-baixa .app-recebido {
  display: flex !important;
}

.app.animar.passo-baixa .app-cobranca-baixa {
  height: 0;
  opacity: 0;
}

/* O fio de cima da segunda linha só existe enquanto a da ACME está na lista. */
.app-cobranca-baixa + .app-cobranca::before {
  display: none;
}

.app.animar:not(.passo-baixa) .app-cobranca-baixa + .app-cobranca::before {
  display: block;
}

/* O imposto previsto acende quando se ajusta ao Pix. */
.app.animar.passo-imposto .app-imposto {
  animation: imposto-brilho 1.1s ease-out;
}

@keyframes imposto-brilho {
  0%   { box-shadow: 0 0 0 0 rgba(93, 202, 165, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(93, 202, 165, 0); }
}

.app.animar .app-nota {
  opacity: 0;
  transform: translateY(6px);
}

.app.animar.passo-fim .app-nota {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-pulso::after {
    animation: none;
  }
}

/* Desktop: duas colunas, texto à esquerda, aparelho à direita. */
@media (min-width: 1024px) {
  .hero-interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .app {
    justify-self: end;
  }
}

/* Telas largas: sobra espaço à esquerda do aparelho para as anotações. */
@media (min-width: 1280px) {
  .hero-interno {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .app {
    width: min(100%, 520px);
  }

  .app-aparelho {
    margin-right: 0;
  }

  /* O aparelho encosta na direita da coluna; o "Ver de novo" acompanha o
     centro dele, e não o da coluna (que é mais larga, por causa das notas). */
  .app-repetir {
    margin-right: 0;
    margin-left: auto;
    transform: translateX(calc(50% - 160px));
  }


  .app-nota {
    position: absolute;
    right: 296px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 236px;
    font-family: var(--fonte-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: right;
    color: var(--tinta);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1);
  }

  /* A linha de chamada termina num ponto, encostando no detalhe da tela. */
  .app-nota i {
    order: 2;
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 1px;
    background: var(--tinta);
  }

  .app-nota i::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.2);
  }

  /* A parte separada para o imposto é a prova mais forte da página, então a
     anotação dela fala mais alto que as outras: texto em corpo, linha mais
     longa e na cor de destaque, e um ponto que pulsa quando a animação acaba. */
  .app-nota-separado {
    right: 292px;
    width: 300px;
    gap: 12px;
    font-family: var(--fonte-corpo);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .app-nota-separado b,
  .app-nota-separado b + span {
    display: block;
  }

  .app-nota-separado b {
    font-weight: 500;
    white-space: nowrap;
  }

  .app-nota-separado b + span {
    margin-top: 2px;
    font-family: var(--fonte-acento);
    font-style: italic;
    font-size: 18px;
    color: var(--teal-600);
  }

  .app-nota-separado i {
    width: 72px;
    height: 1.5px;
    background: var(--teal-600);
  }

  .app-nota-separado i::after {
    right: -4px;
    top: -4px;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.22);
  }

  .app.passo-fim .app-nota-separado i::after {
    animation: nota-pulso 1.2s ease-out 2;
  }
}

@keyframes nota-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(29, 158, 117, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .app-nota-separado i::after { animation: none !important; }
}

/* --- Seções --- */

.secao {
  padding: var(--secao-y) var(--margem);
  /* A nav é fixa, então sem isso o título de cada âncora para debaixo dela. */
  scroll-margin-top: 72px;
}

.secao-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
}

/* Separação entre as seções da home: fundos alternados entre papel e
   creme, uma linha fina no topo e o número da seção na etiqueta, como o
   índice das folhas de um projeto (01, 02...). A lista de espera, em
   verde-claro, vem logo depois do preço, antes das perguntas. */
#conteudo {
  counter-reset: secao;
}

.secao {
  counter-increment: secao;
  border-top: 1px solid var(--borda);
}

.secao-funcionalidades,
.secao-para-quem,
.secao-faq {
  background: var(--secao-alternada);
}

.secao > .secao-interno .secao-etiqueta::before,
.secao .faq-cabeca .secao-etiqueta::before,
.secao .problema-texto .secao-etiqueta::before {
  content: counter(secao, decimal-leading-zero);
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid currentColor;
  color: var(--teal-600);
}

/* Ritmo: a virada e o preço respiram mais; como funciona e perguntas, menos. */
.secao-virada,
.secao-preco {
  padding-block: calc(var(--secao-y) * 1.2);
}

.secao-passos,
.secao-faq {
  padding-block: calc(var(--secao-y) * 0.8);
}

/* "Ver de novo" só aparece com o mouse sobre a ilustração (ou com foco do
   teclado); em tela de toque, fica sempre visível, discreto. */
@media (hover: hover) {
  .app-repetir {
    opacity: 0;
    transition: opacity 0.25s, color 0.2s, border-color 0.2s;
  }

  #heroApp:hover .app-repetir,
  .conversa:hover .app-repetir,
  .fluxo-sona:hover .app-repetir,
  .app-repetir:focus-visible {
    opacity: 1;
  }
}

/* Etiqueta de secao no estilo de legenda de prancha. */
.secao-etiqueta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-700);
  margin-bottom: 18px;
}

.secao-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(30px, 2.2vw + 20px, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 18ch;
}

.secao-abertura {
  max-width: 58ch;
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(16.5px, 0.4vw + 15px, 19px);
  color: var(--suave);
}

.secao-problema {
  background: var(--secao-alternada);
}

.problema-lista {
  display: grid;
  gap: 28px;
  margin-top: 40px;
}

.problema-item h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.problema-item p {
  max-width: 56ch;
  color: var(--suave);
  font-size: 16px;
}

@media (min-width: 760px) {
  .problema-lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 48px;
  }
}

/* Legenda de figura, no estilo de prancha. */
.figura-legenda {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--suave);
}

.figura-legenda span {
  font-family: var(--fonte-mono);
  letter-spacing: 0.06em;
  color: var(--tinta);
}

/* --- Conversa com o contador (o problema, na home) --- */

/* Seção mais curta que as outras: uma janela de mensagens e o texto lado a
   lado. A janela segue o visual de app de mensagens que o leitor usa com o
   contador (fundo bege com desenhos, balão verde para o que ele envia), sem
   logo nem nome de marca. */
.secao-problema-conversa {
  padding-block: clamp(64px, 7vw, 104px);
}

.secao-problema-conversa .secao-titulo {
  text-wrap: balance;
}

.secao-problema-conversa .secao-interno {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .secao-problema-conversa .secao-interno {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    column-gap: clamp(48px, 7vw, 120px);
  }

  .secao-problema-conversa .conversa {
    order: -1;
  }
}

.conversa {
  --zap-fundo: #efeae2;
  --zap-topo: #f0f2f5;
  --zap-enviado: #d9fdd3;
  --zap-texto: #111b21;
  --zap-cinza: #667781;
  --zap-verde: #00a884;
  --zap-lido: #53bdeb;
  position: relative;
  width: min(100%, 460px);
}

/* Centralizado sobre a borda de baixo da conversa. */
.conversa .app-repetir {
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin: 0;
  transform: translateX(-50%);
}

.conversa-janela {
  display: flex;
  flex-direction: column;
  height: 460px;
  overflow: hidden;
  border-radius: var(--raio-grande);
  color: var(--zap-texto);
  /* Papel de parede de desenhos miúdos, como o padrão do app. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M58 12l6 10H52z'/%3E%3Cpath d='M96 14c4-6 12 0 6 6l-6 6-6-6c-6-6 2-12 6-6z'/%3E%3Crect x='12' y='60' width='14' height='11' rx='2'/%3E%3Cpath d='M50 66h18M59 57v18'/%3E%3Cpath d='M90 58l10 10M100 58L90 68'/%3E%3Cpath d='M14 104c4-6 10-6 14 0'/%3E%3Ccircle cx='60' cy='104' r='3'/%3E%3Cpath d='M92 98h12v12H92z'/%3E%3C/svg%3E") 0 0 / 120px 120px,
    var(--zap-fundo);
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.08),
    var(--sombra-repouso);
}

.conversa-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 10px 16px 10px 10px;
  background: var(--zap-topo);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.conversa-voltar {
  display: flex;
  align-items: center;
  color: var(--zap-verde);
}

.conversa-voltar svg {
  width: 22px;
  height: 22px;
}

.conversa-voltar b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.conversa-avatar {
  display: grid;
  place-items: end center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-left: 4px;
  overflow: hidden;
  border-radius: 50%;
  background: #dfe5e7;
  color: #fff;
}

.conversa-avatar svg {
  width: 30px;
  height: 30px;
  margin-bottom: -4px;
  fill: #fff;
  stroke: none;
}

.conversa-quem {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.conversa-quem strong {
  font-size: 15px;
  font-weight: 600;
}

.conversa-quem small {
  height: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--zap-verde);
  opacity: 0;
  transition: opacity 0.2s, height 0.2s;
}

.conversa-escrevendo .conversa-quem small {
  height: 15px;
  opacity: 1;
}

/* As mensagens se acumulam de baixo para cima e as antigas saem pelo topo,
   como numa conversa de verdade. */
.conversa-mensagens {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}

.conversa-dia {
  align-self: center;
  margin: 12px 0 4px;
}

.conversa-dia span {
  display: block;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 11.5px;
  color: #54656f;
}

.conversa-balao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
  margin-top: 10px;
  padding: 6px 8px 5px 9px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.conversa-balao.conversa-seguida {
  margin-top: 3px;
}

.conversa-contador {
  align-self: flex-start;
  background: #fff;
  transform-origin: top left;
}

.conversa-voce {
  align-self: flex-end;
  background: var(--zap-enviado);
  transform-origin: top right;
}

/* Rabinho no primeiro balão de cada sequência. */
.conversa-balao:not(.conversa-seguida)::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
}

.conversa-contador:not(.conversa-seguida) {
  border-top-left-radius: 0;
}

.conversa-contador:not(.conversa-seguida)::before {
  left: -8px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.conversa-voce:not(.conversa-seguida) {
  border-top-right-radius: 0;
}

.conversa-voce:not(.conversa-seguida)::before {
  right: -8px;
  background: var(--zap-enviado);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.conversa-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  column-gap: 10px;
}

.conversa-texto {
  flex: 1 1 auto;
}

.conversa-hora {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  margin-bottom: -2px;
  font-size: 11px;
  color: var(--zap-cinza);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.conversa-hora svg {
  width: 16px;
  height: 10px;
  color: var(--zap-lido);
}

.conversa-balao:has(.conversa-anexo) {
  padding: 4px 4px 5px;
}

.conversa-balao:has(.conversa-anexo) .conversa-linha {
  padding: 0 5px 0 6px;
}

/* Documento: caixinha com o ícone do tipo e o nome do arquivo. */
.conversa-anexo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 10px 12px 10px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
}

.conversa-voce .conversa-anexo {
  background: rgba(0, 80, 40, 0.06);
}

.conversa-arquivo {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 30px;
  color: #8696a0;
}

.conversa-arquivo svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

.conversa-arquivo b {
  position: absolute;
  left: 1px;
  right: 3px;
  bottom: 4px;
  padding: 1px 0;
  border-radius: 2px;
  background: #8696a0;
  color: #fff;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.conversa-arquivo-pdf b {
  background: #e2574c;
}

.conversa-arquivo-jpg b {
  background: #4a90d9;
}

.conversa-nome-arquivo {
  font-size: 13.5px;
  white-space: nowrap;
}

/* Indicador de "digitando": só aparece durante a animação. */
.conversa-digitando {
  display: none;
  align-self: flex-start;
  gap: 4px;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.conversa-digitando i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zap-cinza);
  opacity: 0.4;
  animation: conversa-pontinhos 1.1s infinite ease-in-out;
}

.conversa-digitando i:nth-child(2) { animation-delay: 0.15s; }
.conversa-digitando i:nth-child(3) { animation-delay: 0.3s; }

.conversa-escrevendo .conversa-digitando {
  display: flex;
}

@keyframes conversa-pontinhos {
  0%, 60%, 100% { opacity: 0.4; transform: none; }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

.conversa-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 10px;
}

.conversa-campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #8696a0;
  font-size: 14px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.conversa-campo span {
  flex: 1;
}

.conversa-campo svg {
  width: 20px;
  height: 20px;
}

.conversa-microfone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--zap-verde);
  color: #fff;
}

.conversa-microfone svg {
  width: 20px;
  height: 20px;
}

/* Animação: cada item fica escondido até a sua vez. */
.conversa-animar .conversa-mensagens > [data-passo] {
  display: none;
}

.conversa-animar .conversa-mensagens > [data-passo].conversa-chegou {
  display: flex;
  animation: conversa-entra 0.4s cubic-bezier(.16, 1, .3, 1);
}

.conversa-animar .conversa-mensagens > .conversa-dia.conversa-chegou {
  display: block;
}

@keyframes conversa-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* --- A virada: tarefas de hoje, Sona Pay no meio, dois cliques --- */

/* Três colunas: a lista de hoje, o Sona Pay onde as tarefas entram, e o que
   sobra para o cliente. No celular, empilha. */
.fluxo {
  position: relative;
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 4.5vw, 60px);
}

@media (min-width: 1000px) {
  .fluxo {
    grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
}

.fluxo-hoje,
.fluxo-sona {
  position: relative;
  z-index: 1;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: #fff;
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: var(--sombra-repouso);
}

/* Título à esquerda e contagem à direita, na mesma linha. */
.fluxo-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}

.fluxo-titulo {
  font-family: var(--fonte-display);
  font-size: clamp(22px, 1.2vw + 14px, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tinta);
}

.fluxo-contagem {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: right;
}

.fluxo-contagem b {
  font-family: var(--fonte-display);
  font-size: clamp(26px, 1.2vw + 18px, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.fluxo-contagem span {
  max-width: 9ch;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--suave);
  text-align: left;
}

.fluxo-sona .fluxo-titulo,
.fluxo-sona .fluxo-contagem b {
  color: var(--teal-600);
}

/* Lista de hoje: densa, com caixinhas por marcar. */
.fluxo-tarefas {
  list-style: none;
  columns: 1;
}

.fluxo-tarefa {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6.5px 0;
  border-bottom: 1px dashed rgba(10, 31, 25, 0.08);
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--tinta);
}

.fluxo-tarefa:last-child {
  border-bottom: 0;
}

.fluxo-caixa {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(10, 31, 25, 0.35);
  border-radius: 4px;
  color: #fff;
  transition: background 0.3s, border-color 0.3s;
}

.fluxo-caixa svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

.fluxo-tarefa-texto {
  transition: color 0.4s;
}

/* Tarefa que entrou no Sona Pay: marcada em verde, texto apagado. */
.fluxo-tarefa.feito .fluxo-caixa,
.fluxo-fechou .fluxo-tarefa .fluxo-caixa {
  background: var(--teal-500);
  border-color: var(--teal-500);
}

.fluxo-tarefa.feito .fluxo-caixa svg,
.fluxo-fechou .fluxo-tarefa .fluxo-caixa svg {
  opacity: 1;
  transform: none;
}

.fluxo-tarefa.feito .fluxo-tarefa-texto,
.fluxo-fechou .fluxo-tarefa .fluxo-tarefa-texto {
  color: var(--suave);
}

/* O meio: o Sona Pay, com as linhas que chegam e saem. */
.fluxo-meio {
  display: grid;
  place-items: center;
}

.fluxo-linhas {
  display: none;
}

.fluxo-no {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fluxo-marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--borda);
  box-shadow: 0 0 0 8px rgba(225, 245, 238, 0.7), 0 22px 44px -22px rgba(4, 52, 44, 0.5);
}

.fluxo-marca svg {
  width: 40px;
  height: 40px;
}

.fluxo-pulso {
  animation: fluxo-pulso 0.5s ease-out;
}

@keyframes fluxo-pulso {
  0%   { box-shadow: 0 0 0 8px rgba(225, 245, 238, 0.7), 0 0 0 8px rgba(29, 158, 117, 0.4), 0 22px 44px -22px rgba(4, 52, 44, 0.5); }
  100% { box-shadow: 0 0 0 8px rgba(225, 245, 238, 0.7), 0 0 0 22px rgba(29, 158, 117, 0), 0 22px 44px -22px rgba(4, 52, 44, 0.5); }
}

.fluxo-no-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Lado do Sona Pay: o cartão e a frase de base logo abaixo, juntos na
   coluna, para os dois lados terem peso parecido. */
.fluxo-direita {
  display: grid;
  gap: 22px;
}

.fluxo-sona {
  border-color: rgba(29, 158, 117, 0.35);
  box-shadow: var(--sombra-destaque);
  transition: border-color 0.6s, box-shadow 0.6s, background 0.8s;
}

.fluxo-cliques {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.fluxo-clique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--raio);
  background: var(--branco-quente);
  border: 1px solid var(--borda);
  transition: background 0.5s, border-color 0.5s;
}

.fluxo-clique-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fluxo-clique-texto strong {
  font-size: 16px;
  font-weight: 600;
}

.fluxo-clique-texto small {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--suave);
}

.fluxo-botao {
  position: relative;
  flex-shrink: 0;
  display: grid;
  min-width: 112px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: background 0.3s, transform 0.15s;
}

.fluxo-botao-antes,
.fluxo-botao-depois {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.25s;
}

.fluxo-botao-depois svg {
  width: 12px;
  height: 12px;
}

.fluxo-botao-depois {
  opacity: 0;
}

/* No celular, o botão desce para baixo do texto: lado a lado, a explicação
   ficava espremida em três ou quatro palavras por linha. */
@media (max-width: 479px) {
  .fluxo-clique {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.fluxo-clique.clicando .fluxo-botao {
  transform: scale(0.94);
}

/* Toque visível no botão: um anel que se abre. */
.fluxo-clique.clicando .fluxo-botao::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  animation: fluxo-toque 0.5s ease-out;
}

@keyframes fluxo-toque {
  from { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.6); }
  to   { box-shadow: 0 0 0 12px rgba(29, 158, 117, 0); }
}

.fluxo-clique.feito,
.fluxo-fechou .fluxo-clique {
  background: #f1faf6;
  border-color: rgba(29, 158, 117, 0.25);
}

.fluxo-clique.feito .fluxo-botao,
.fluxo-fechou .fluxo-clique .fluxo-botao {
  background: var(--teal-600);
}

.fluxo-clique.feito .fluxo-botao-antes,
.fluxo-fechou .fluxo-clique .fluxo-botao-antes {
  opacity: 0;
}

.fluxo-clique.feito .fluxo-botao-depois,
.fluxo-fechou .fluxo-clique .fluxo-botao-depois {
  opacity: 1;
}

/* Mês fechado: o cartão inteiro esverdeia e o selo salta. O espaço do selo
   existe desde o começo, para nada pular. */
.fluxo-fechou .fluxo-sona {
  border-color: var(--teal-500);
  background:
    radial-gradient(120% 70% at 20% 100%, rgba(93, 202, 165, 0.22), transparent 60%),
    #fff;
  box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12), var(--sombra-destaque);
}

.fluxo-estado {
  position: relative;
  display: grid;
  margin-top: 14px;
}

.fluxo-aberto,
.fluxo-fechado {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: var(--raio);
}

/* Antes: o mês ainda em aberto, esperando as confirmações. */
.fluxo-aberto {
  border: 1px dashed rgba(10, 31, 25, 0.18);
  transition: opacity 0.3s, transform 0.3s;
}

.fluxo-aberto strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fluxo-aberto small {
  display: block;
  font-size: 14px;
  color: var(--suave);
}

.fluxo-selo.fluxo-selo-aberto {
  position: relative;
  background: transparent;
  box-shadow: none;
  border: 2px dashed rgba(29, 158, 117, 0.55);
  animation: fluxo-gira 8s linear infinite;
}

@keyframes fluxo-gira {
  to { transform: rotate(360deg); }
}

.fluxo-fechou .fluxo-aberto {
  opacity: 0;
  transform: scale(0.97);
}

/* Depois: mês fechado. */
.fluxo-fechado {
  background: var(--teal-100);
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(.34, 1.56, .64, 1);
}

.fluxo-fechou .fluxo-fechado {
  opacity: 1;
  transform: none;
}

.fluxo-selo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(15, 110, 86, 0.7);
}

.fluxo-selo svg {
  width: 20px;
  height: 20px;
}

.fluxo-fechou .fluxo-selo path {
  stroke-dasharray: 24;
  animation: fluxo-risco 0.5s 0.15s ease-out both;
}

@keyframes fluxo-risco {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

.fluxo-fechado strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--teal-800);
}

.fluxo-fechado small {
  display: block;
  font-size: 14px;
  color: var(--teal-700);
}

/* Chuva de pontos que sai do selo (mês fechado na virada, contabilidade
   em dia no celular do hero). */
.fluxo-festa,
.festa {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.fluxo-festa i,
.festa i {
  position: absolute;
  width: var(--t);
  height: var(--t);
  border-radius: 50%;
  opacity: 0;
  animation: fluxo-festa 1.3s cubic-bezier(.16, 1, .3, 1) var(--d) forwards;
}

@keyframes fluxo-festa {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}

/* "Ver de novo" fica centralizado embaixo da faixa do estado, em qualquer tela. */
.fluxo-repetir {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: center;
  margin: 12px 0 0;
}

/* O botão já ocupa o lugar escondido, para o cartão não crescer no fim. */
.fluxo-repetir[hidden] {
  display: flex;
  visibility: hidden;
}

/* Frase de base, sob o cartão da direita: o argumento de venda da seção. */
.fluxo-base {
  padding: 0 4px;
}

.fluxo-base-titulo {
  font-family: var(--fonte-display);
  font-size: var(--tipo-subtitulo);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--tinta);
  text-wrap: balance;
}

.fluxo-base-texto {
  margin-top: 10px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--suave);
}

.fluxo-base-texto .destaque {
  font-size: 1.12em;
  color: var(--teal-600);
}

@media (min-width: 1000px) {
  .fluxo-linhas {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
  }

  .fluxo-sona {
    padding: 30px;
  }
}

.fluxo-fio {
  fill: none;
  stroke: rgba(10, 31, 25, 0.1);
  stroke-width: 1;
  transition: stroke 0.5s;
}

.fluxo-fio-ativo,
.fluxo-fechou .fluxo-fio {
  stroke: rgba(29, 158, 117, 0.45);
}

.fluxo-bola {
  fill: var(--teal-500);
}

.fluxo-porta {
  fill: #fff;
  stroke: rgba(10, 31, 25, 0.25);
  stroke-width: 1.2;
  transition: stroke 0.4s;
}

.fluxo-fechou .fluxo-porta {
  stroke: var(--teal-500);
}

/* No celular, um fio curto liga as três partes, de cima para baixo. */
@media (max-width: 999.98px) {
  .fluxo-meio {
    position: relative;
    padding: 22px 0;
  }

  .fluxo-meio::before,
  .fluxo-meio::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 22px;
    background: rgba(29, 158, 117, 0.5);
  }

  .fluxo-meio::before { top: 0; }
  .fluxo-meio::after { bottom: 0; }

  .fluxo-marca {
    width: 64px;
    height: 64px;
  }

  .fluxo-marca svg {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fluxo,
  .fluxo * {
    transition: none !important;
    animation: none !important;
  }

  .fluxo-festa {
    display: none;
  }
}

/* --- Funcionalidades: vitrine em abas --- */

/* Uma funcionalidade por vez. No alto, quatro abas numeradas com uma barra
   que enche e avança sozinha; embaixo, o texto e a tela do app lado a lado. */
.vitrine {
  margin-top: clamp(32px, 4vw, 52px);
}

.vitrine-abas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 20px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.vitrine-abas[hidden] {
  display: none;
}

.vitrine-aba {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  padding: 0 0 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--suave);
  cursor: pointer;
  transition: color 0.3s;
}

.vitrine-aba:hover,
.vitrine-aba[aria-selected="true"] {
  color: var(--tinta);
}

.vitrine-num {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.vitrine-aba[aria-selected="true"] .vitrine-num {
  color: var(--teal-600);
}

.vitrine-aba-nome {
  font-size: 15px;
  font-weight: 500;
}

/* Barra de progresso: fina, na base de cada aba. */
.vitrine-progresso {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: rgba(10, 31, 25, 0.12);
  overflow: hidden;
}

.vitrine-progresso b {
  position: absolute;
  inset: 0;
  background: var(--teal-500);
  transform: scaleX(0);
  transform-origin: left;
}

.vitrine-aba.vista .vitrine-progresso b {
  transform: scaleX(1);
  background: rgba(29, 158, 117, 0.45);
}

.vitrine-parada .vitrine-aba[aria-selected="true"] .vitrine-progresso b {
  transform: scaleX(1);
}

.vitrine-rodando .vitrine-aba[aria-selected="true"] .vitrine-progresso b {
  animation: vitrine-encher var(--intervalo, 6500ms) linear forwards;
}

@keyframes vitrine-encher {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Painel: texto à esquerda, tela à direita, sobre um palco claro. */
.vitrine-painel {
  display: grid;
  gap: 28px;
  align-items: center;
}

.vitrine-painel + .vitrine-painel {
  margin-top: 56px;
}

.vitrine-ativa .vitrine-painel + .vitrine-painel {
  margin-top: 0;
}

.vitrine-painel[hidden] {
  display: none;
}

@media (min-width: 900px) {
  .vitrine-painel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
  }
}

.vitrine-indice {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--teal-600);
}

.vitrine-indice span {
  color: var(--suave);
}

.vitrine-titulo {
  margin-top: 14px;
  max-width: 16ch;
  font-family: var(--fonte-display);
  font-size: var(--tipo-subtitulo);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--tinta);
  text-wrap: balance;
}

.vitrine-desc {
  margin-top: 18px;
  max-width: 40ch;
  font-size: clamp(16px, 0.4vw + 14.5px, 18.5px);
  line-height: 1.5;
  color: var(--suave);
}

/* O palco da tela: uma prancha creme com malha fina, como papel de desenho. */
.vitrine .tela-figura {
  display: grid;
  justify-items: center;
  padding: clamp(28px, 4vw, 48px) 20px;
  border-radius: var(--raio-grande);
  background:
    linear-gradient(rgba(10, 31, 25, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(10, 31, 25, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--branco-quente);
  border: 1px solid var(--borda);
}

/* A tela do app, recortada sem aparelho. */
.tela {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 320px);
  height: 420px;
  padding: 20px 18px;
  border-radius: 28px;
  background: #f5f6f3;
  color: var(--tinta);
  box-shadow:
    0 0 0 1px rgba(10, 31, 25, 0.07),
    0 30px 50px -34px rgba(4, 52, 44, 0.45);
  overflow: hidden;
}

.tela-figura .figura-legenda span {
  white-space: nowrap;
}

.vitrine .figura-legenda {
  justify-self: stretch;
  justify-content: flex-start;
  margin-top: 20px;
}

.telas-rodape {
  margin-top: 14px;
  font-size: 12px;
  color: var(--suave);
}

/* Celular: abas compactas, só o número e a barra. */
@media (max-width: 699.98px) {
  .vitrine-aba-nome {
    display: none;
  }
}

/* Peças comuns. */
.tela-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tela-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suave);
}

.tela-selo {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 500;
}

.tela-valor {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tela-titulo {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tela-texto {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--suave);
}

.tela-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 12px;
  color: var(--suave);
}

.tela-botao {
  display: block;
  margin-top: auto;
  padding: 12px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}

.tela-botao-contorno {
  background: transparent;
  border: 1px solid rgba(10, 31, 25, 0.2);
  color: var(--tinta);
}

.tela-link {
  margin-top: 10px;
  font-size: 13px;
  color: var(--suave);
  text-align: center;
}

/* Tela das notas fiscais: a programada em destaque, as emitidas embaixo. */
.tela-notas {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.tela-notas li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.06);
}

.tela-nota-programada {
  box-shadow: 0 0 0 1.5px var(--teal-500) !important;
}

.tela-nota-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eef1ec;
  color: var(--suave);
}

.tela-nota-programada .tela-nota-icone {
  background: var(--teal-100);
  color: var(--teal-600);
}

.tela-nota-icone svg {
  width: 17px;
  height: 17px;
}

.tela-nota-texto,
.tela-nota-estado {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}

.tela-nota-texto strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Celular: a prancha encolhe a borda e a tela ganha largura, para os nomes
   de cliente caberem inteiros (o Safari desenha a fonte mais larga que o
   Chrome, e o corte com reticências aparecia lá primeiro). */
@media (max-width: 480px) {
  .vitrine .tela-figura {
    padding-inline: 8px;
  }

  .tela {
    width: 100%;
    max-width: 340px;
    padding-inline: 14px;
  }

  .tela-nota-texto strong {
    font-size: 12.5px;
  }
}

.tela-nota-texto small,
.tela-nota-estado small {
  font-size: 11.5px;
  color: var(--suave);
}

.tela-nota-estado {
  justify-items: end;
  text-align: right;
}

.tela-nota-estado em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--suave);
}

.tela-nota-programada .tela-nota-estado em {
  color: var(--teal-600);
}

/* Tela do saldo: o Pix que entrou e a divisão entre o que é seu e o
   imposto separado, na mesma conta. */
.tela-entrada {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.06);
  font-size: 12.5px;
  color: var(--suave);
}

.tela-entrada b {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}

.tela-cartao {
  position: relative;
  margin-top: 12px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.06);
}

.tela-divisao {
  display: flex;
  gap: 3px;
  height: 10px;
  margin-bottom: 16px;
}

.tela-divisao span {
  border-radius: 999px;
  transition: flex-grow 0.9s cubic-bezier(.16, 1, .3, 1) 0.6s;
}

.tela-divisao-livre {
  flex: 11519 1 0;
  background: var(--tinta);
}

.tela-divisao-imposto {
  flex: 881 1 0;
  min-width: 10px;
  background: var(--teal-400);
}

.tela-parte {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--suave);
}

.tela-parte span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tela-parte i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tela-ponto-livre { background: var(--tinta); }
.tela-ponto-imposto { background: var(--teal-400); }

.tela-parte b {
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.tela-parte-livre {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.tela-separado .tela-selo {
  display: inline-block;
  margin-top: 10px;
}

/* Tela dos pagamentos programados: cada um com a sua chave ligada. */
.tela-pagamentos {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.tela-pagamentos li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.06);
}

.tela-pagamento-texto {
  display: grid;
  line-height: 1.3;
  min-width: 0;
}

.tela-pagamento-texto strong {
  font-size: 13px;
  font-weight: 600;
}

.tela-pagamento-texto small {
  font-size: 11.5px;
  color: var(--suave);
}

.tela-pagamentos b {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tela-interruptor {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: var(--teal-500);
  transition: background 0.35s;
}

.tela-interruptor i {
  position: absolute;
  top: 3px;
  left: 17px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.35s cubic-bezier(.34, 1.56, .64, 1);
}

/* Tela do que depende de você. */
.tela-contador {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.tela-pendencias {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.tela-pendencias li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 31, 25, 0.06);
}

.tela-pendencias span {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.tela-pendencias strong {
  font-size: 13px;
  font-weight: 600;
}

.tela-pendencias small {
  font-size: 11.5px;
  color: var(--suave);
}

.tela-pendencias em {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
}

.tela-feitos {
  color: var(--teal-700);
}

.tela-feitos svg {
  width: 14px;
  height: 14px;
}

/* Animações de entrada, uma por tela. Só valem com o script; sem ele, tudo
   já aparece no estado final. */
.telas-animar .tela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.16, 1, .3, 1);
}


.telas-animar .tela.tela-viva {
  opacity: 1;
  transform: none;
}

/* Notas e pagamentos entram um a um; a barra do saldo se divide; as
   chaves dos pagamentos ligam em sequência. */
.telas-animar .tela-notas li,
.telas-animar .tela-pagamentos li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.telas-animar .tela-viva .tela-notas li,
.telas-animar .tela-viva .tela-pagamentos li { opacity: 1; transform: none; }
.telas-animar .tela-viva .tela-notas li:nth-child(1),
.telas-animar .tela-viva .tela-pagamentos li:nth-child(1) { transition-delay: 0.5s; }
.telas-animar .tela-viva .tela-notas li:nth-child(2),
.telas-animar .tela-viva .tela-pagamentos li:nth-child(2) { transition-delay: 0.65s; }
.telas-animar .tela-viva .tela-notas li:nth-child(3),
.telas-animar .tela-viva .tela-pagamentos li:nth-child(3) { transition-delay: 0.8s; }

.telas-animar .tela-divisao-livre { flex-grow: 1; }
.telas-animar .tela-divisao-imposto { flex-grow: 0; }
.telas-animar .tela-viva .tela-divisao-livre { flex-grow: 11519; }
.telas-animar .tela-viva .tela-divisao-imposto { flex-grow: 881; }

.telas-animar .tela-interruptor { background: #c9d2cd; }
.telas-animar .tela-interruptor i { left: 3px; }
.telas-animar .tela-viva .tela-interruptor { background: var(--teal-500); }
.telas-animar .tela-viva .tela-interruptor i { left: 17px; }
.telas-animar .tela-viva li:nth-child(1) .tela-interruptor,
.telas-animar .tela-viva li:nth-child(1) .tela-interruptor i { transition-delay: 1.1s; }
.telas-animar .tela-viva li:nth-child(2) .tela-interruptor,
.telas-animar .tela-viva li:nth-child(2) .tela-interruptor i { transition-delay: 1.3s; }
.telas-animar .tela-viva li:nth-child(3) .tela-interruptor,
.telas-animar .tela-viva li:nth-child(3) .tela-interruptor i { transition-delay: 1.5s; }




.telas-animar .tela-pendencias li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.telas-animar .tela-viva .tela-pendencias li { opacity: 1; transform: none; }
.telas-animar .tela-viva .tela-pendencias li:nth-child(1) { transition-delay: 0.7s; }
.telas-animar .tela-viva .tela-pendencias li:nth-child(2) { transition-delay: 0.85s; }
.telas-animar .tela-viva .tela-pendencias li:nth-child(3) { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .vitrine *,
  .vitrine {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Quem cuida da contabilidade --- */

.secao-escritorio {
  background: var(--creme);
}

.divisao {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.divisao-coluna {
  padding: 24px;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid var(--borda);
}

.divisao-coluna h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--teal-600);
  margin-bottom: 14px;
}

.divisao-coluna ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.divisao-coluna li {
  padding-left: 22px;
  position: relative;
  font-size: 15.5px;
}

.divisao-coluna li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-400);
}

.nota-confianca {
  margin-top: 24px;
  font-size: 15px;
  color: var(--suave);
}

@media (min-width: 760px) {
  .divisao {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* --- Como funciona: régua de quatro passos --- */

/* Quatro passos ligados por uma linha fina, como uma régua. No celular, a
   régua fica em pé: linha vertical à esquerda e os passos empilhados. */
.regua {
  position: relative;
  list-style: none;
  display: grid;
  gap: 28px;
  margin-top: clamp(36px, 4.5vw, 56px);
}

.regua-passo {
  position: relative;
  padding-left: 44px;
}

/* Fio que liga um passo ao próximo. */
.regua-passo::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 26px;
  bottom: -28px;
  width: 1px;
  background: var(--borda);
  transform-origin: top;
}

.regua-passo:last-child::before {
  display: none;
}

.regua-marca {
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1.5px solid var(--tinta);
  background: var(--branco-quente);
  color: #fff;
}

.regua-final .regua-marca {
  border-color: var(--teal-500);
  background: var(--teal-500);
  box-shadow: 0 0 0 5px rgba(93, 202, 165, 0.22);
}

.regua-marca svg {
  width: 13px;
  height: 13px;
}

/* Sem animação, só a última bolinha tem o check. */
.regua-passo:not(.regua-final) .regua-marca svg {
  display: none;
}

.regua-num {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--suave);
}

.regua-passo h3 {
  margin-top: 6px;
  font-size: clamp(18px, 0.6vw + 15px, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.regua-final h3 {
  color: var(--teal-600);
}

.regua-passo p {
  margin-top: 8px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--suave);
}

@media (min-width: 900px) {
  .regua {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
  }

  .regua-passo {
    padding: 44px 0 0;
  }

  .regua-passo::before {
    left: 30px;
    right: calc(clamp(20px, 3vw, 44px) * -1);
    top: 11px;
    bottom: auto;
    width: auto;
    height: 1px;
    transform-origin: left;
  }

  .regua-marca {
    top: 0;
  }
}

/* Animação: a linha se desenha e os passos acendem em sequência. */
.regua-animar .regua-passo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 220ms);
}

.regua-animar .regua-passo::before {
  transform: scaleY(0);
  transition: transform 0.5s ease;
  transition-delay: calc(var(--i) * 220ms + 200ms);
}

@media (min-width: 900px) {
  .regua-animar .regua-passo::before {
    transform: scaleX(0);
  }
}

.regua-viva .regua-passo {
  opacity: 1;
  transform: none;
}

.regua-viva .regua-passo::before {
  transform: none;
}

/* Cada bolinha acende em verde e o check se desenha, na vez do seu passo. */
.regua-animar .regua-passo .regua-marca svg {
  display: block;
}

.regua-animar .regua-marca path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.regua-animar .regua-final .regua-marca {
  border-color: var(--tinta);
  background: var(--branco-quente);
  box-shadow: none;
}

.regua-viva .regua-marca,
.regua-viva .regua-final .regua-marca {
  border-color: var(--teal-500);
  background: var(--teal-500);
  animation: regua-acende 0.5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * 220ms + 400ms);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.4s ease;
  transition-delay: calc(var(--i) * 220ms + 400ms);
}

.regua-viva .regua-final .regua-marca {
  box-shadow: 0 0 0 5px rgba(93, 202, 165, 0.22);
}

.regua-viva .regua-marca path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s ease;
  transition-delay: calc(var(--i) * 220ms + 550ms);
}

.regua-passo .festa {
  inset: -60px -40px;
  z-index: 0;
}

@keyframes regua-acende {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .regua *,
  .regua *::before {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Para quem é: critérios e um cartão por profissão --- */

.criterios {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 2.5vw, 30px);
}

.criterios li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--texto);
}

.criterios svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 2px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  box-sizing: content-box;
}

/* Cinco cartões lado a lado em tela larga; no celular, um carrossel que
   desliza com o dedo. */
.perfis {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 270px);
  gap: 16px;
  margin: clamp(32px, 4vw, 52px) calc(var(--margem) * -1) 0;
  padding: 4px var(--margem) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--margem);
  scrollbar-width: none;
}

.perfis::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1100px) {
  .perfis {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.perfis li {
  scroll-snap-align: start;
  display: flex;
}

.perfil {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: #fff;
  color: var(--tinta);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s, border-color 0.35s;
}


/* Desenho sobre papel quadriculado, como na vitrine de funcionalidades. */
.perfil-desenho {
  display: grid;
  place-items: center;
  aspect-ratio: 10 / 7;
  padding: 14px;
  border-bottom: 1px solid var(--borda);
  background:
    linear-gradient(rgba(10, 31, 25, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(10, 31, 25, 0.045) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--creme);
  color: var(--tinta);
}

.perfil-desenho svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  overflow: visible;
}

.perfil-desenho .acento {
  stroke: var(--teal-500);
  stroke-width: 2;
}


.perfil-cursor {
  animation: perfil-piscar 1.1s steps(1) infinite;
}

@keyframes perfil-piscar {
  50% { opacity: 0; }
}

.perfil-texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.perfil-num {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--teal-600);
}

.perfil strong {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.perfil-frase {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--suave);
}


/* Os traços se desenham quando os cartões aparecem. */
.perfis-animar .perfil-desenho path:not(.perfil-cursor) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(var(--i) * 140ms + 100ms);
}

.perfis-animar .perfil-desenho path.acento:not(.perfil-cursor) {
  transition-delay: calc(var(--i) * 140ms + 700ms);
}

.perfis-animar.perfis-vivos .perfil-desenho path:not(.perfil-cursor) {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .perfis *,
  .perfil {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Preço: dois cartões --- */

/* Dois cartões claros do mesmo tamanho. No computador, a conta PJ à
   esquerda e o Completo à direita, em destaque; no celular, o Completo
   primeiro. */
.planos {
  display: grid;
  gap: 18px;
  margin-top: clamp(32px, 4vw, 52px);
}

@media (max-width: 899.98px) {
  .plano-completo {
    order: -1;
  }
}

@media (min-width: 900px) {
  .planos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
}

.plano {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sombra-repouso);
}

/* O recomendado: borda verde, faixa verde-clara no topo e sombra. */
.plano-completo {
  border: 1.5px solid var(--teal-500);
  box-shadow: var(--sombra-destaque);
}

.plano-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid var(--borda);
  background: var(--branco-quente);
}

.plano-completo .plano-cabeca {
  background: var(--teal-100);
  border-bottom-color: rgba(29, 158, 117, 0.25);
}

.plano-cabeca h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.plano-subtitulo {
  margin-top: 4px;
  font-size: 14px;
  color: var(--suave);
}

.plano-completo .plano-subtitulo {
  color: var(--teal-800);
}

.plano-selo {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--teal-600);
  color: #fff;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plano-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px) clamp(24px, 3vw, 34px);
}

.plano-preco {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plano-preco b {
  font-family: var(--fonte-display);
  font-size: clamp(40px, 3vw + 24px, 54px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.plano-preco span {
  font-size: 16px;
  color: var(--suave);
}

.plano-compromisso {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--texto);
}

.plano-descricao {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tinta);
  font-weight: 500;
}

/* Cada item: ícone de check na primeira linha e o texto ao lado. */
.plano-itens {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 16px 0 28px;
}

.plano-itens li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
}

.plano-check {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.plano-check circle {
  fill: var(--teal-100);
}

.plano-check path {
  stroke: var(--teal-600);
}

.plano-completo .plano-check circle {
  fill: var(--teal-500);
}

.plano-completo .plano-check path {
  stroke: #fff;
}

/* O botão desce até o pé do cartão, para os dois ficarem na mesma linha. */
.plano-botao {
  justify-content: center;
  margin-top: auto;
}

.planos-notas {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--suave);
}

/* --- Perguntas frequentes --- */

/* Título à esquerda, acompanhando a rolagem; perguntas em grupos à direita.
   No celular, empilha. */
.faq {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 960px) {
  .faq {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
  }

  .faq-cabeca {
    position: sticky;
    top: 120px;
  }
}

.secao-faq {
  position: relative;
}

/* A âncora antiga #faq aponta para o começo da seção. */
.ancora-antiga {
  position: absolute;
  top: 0;
  scroll-margin-top: 72px;
}

.faq-grupos {
  display: grid;
  gap: clamp(32px, 4vw, 44px);
}

.faq-grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tinta);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}

.faq-grupo-titulo span {
  color: var(--teal-600);
}

.faq-item {
  border-bottom: 1px solid var(--borda);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--teal-700);
}

/* Sinal de mais que vira menos: duas linhas finas num círculo. */
.faq-sinal {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  transition: background 0.25s, border-color 0.25s;
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  border-radius: 1px;
  background: var(--tinta);
  transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), background 0.25s;
}

.faq-sinal::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-sinal {
  background: var(--tinta);
  border-color: var(--tinta);
}

.faq-item[open] .faq-sinal::before,
.faq-item[open] .faq-sinal::after {
  background: #fff;
}

.faq-item[open] .faq-sinal::after {
  transform: rotate(0deg);
}

.faq-resposta p {
  max-width: 62ch;
  padding: 0 48px 22px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--suave);
}

.faq-item[open] .faq-resposta {
  animation: faq-abrir 0.35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes faq-abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-resposta { animation: none; }
}

/* --- Lista de espera --- */

.secao-lista {
  background: var(--teal-100);
}

/* Convite à esquerda, cartão do formulário à direita. No celular, empilha. */
.lista {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (min-width: 960px) {
  .lista {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(48px, 7vw, 112px);
  }

  .lista-convite {
    position: sticky;
    top: 120px;
  }
}

.lista-beneficios {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.lista-beneficios li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texto);
}

.lista-beneficios svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.lista-beneficios circle {
  fill: var(--teal-500);
}

.lista-beneficios path {
  stroke: #fff;
}

.lista-cartao {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(29, 158, 117, 0.3);
  border-radius: var(--raio-grande);
  background: #fff;
  box-shadow: var(--sombra-destaque);
}

.formulario {
  display: grid;
  gap: 20px;
}

.formulario-passo {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-600);
}

/* Topo da etapa 2: o selo de "está na lista" e o convite para contar mais. */
.formulario-topo {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borda);
}

.formulario-topo h3 {
  margin-top: 4px;
  font-size: var(--tipo-cartao);
  font-weight: 600;
  letter-spacing: -0.02em;
  outline: none;
}

.formulario-topo p:last-child {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--suave);
}

.formulario-selo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
}

.formulario-selo svg {
  width: 20px;
  height: 20px;
}

.formulario-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.formulario-pular {
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.formulario-pular:hover {
  color: var(--tinta);
}

.formulario-acoes .formulario-enviar {
  justify-self: auto;
  min-width: 160px;
}

.campo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.campo label,
.campo legend {
  font-size: 15px;
  font-weight: 500;
}

.opcional {
  font-weight: 400;
  color: var(--suave);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(26, 46, 36, 0.28);
  border-radius: var(--raio);
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
}

.campo input:focus-visible,
.campo select:focus-visible {
  outline: 3px solid var(--teal-300);
  outline-offset: 1px;
  border-color: var(--teal-600);
}

.campo-linha {
  display: grid;
  gap: 22px;
}

.campo-opcoes {
  border: 0;
}

.campo-opcoes legend {
  margin-bottom: 10px;
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcao {
  position: relative;
}

.opcao input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(26, 46, 36, 0.28);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
}

.opcao input:checked + span {
  border-color: var(--teal-600);
  background: var(--teal-100);
  color: var(--teal-900);
  font-weight: 500;
}

.opcao input:focus-visible + span {
  outline: 3px solid var(--teal-300);
  outline-offset: 2px;
}

.aviso-perfil {
  padding: 14px 16px;
  border-radius: var(--raio);
  background: #fff7e6;
  border: 1px solid #f0d9a8;
  font-size: 14.5px;
  color: #5c4513;
}

.aviso-perfil[hidden],
.formulario-erro[hidden],
.formulario-sucesso[hidden],
.formulario[hidden],
#campoAtividadeOutra[hidden] {
  display: none;
}

.consentimento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--suave);
}

.consentimento input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--teal-600);
}

.formulario-enviar {
  justify-self: stretch;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}

.formulario-enviar:disabled {
  opacity: 0.7;
  cursor: wait;
}

.formulario-erro {
  font-size: 14.5px;
  color: #a12a1f;
}

.formulario-sucesso {
  display: grid;
  justify-items: start;
  gap: 10px;
  outline: none;
}

.formulario-sucesso h3 {
  margin-top: 6px;
  font-size: var(--tipo-subtitulo);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.formulario-sucesso p {
  color: var(--suave);
}

.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (min-width: 640px) {
  .campo-linha {
    grid-template-columns: 1fr 1fr;
  }

  .campo-linha-cidade {
    grid-template-columns: 1fr 120px;
  }
}

/* --- Documento (política de privacidade) --- */

.documento {
  padding: calc(64px + clamp(40px, 6vw, 88px)) var(--margem) var(--secao-y);
}

.documento-interno {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.7;
}

.documento h1 {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(34px, 2vw + 24px, 56px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.documento-data {
  margin-top: 12px;
  font-size: 14px;
  color: var(--suave);
}

.documento h2 {
  margin-top: 48px;
  margin-bottom: 12px;
  font-size: 21px;
  scroll-margin-top: 90px;
}

.documento h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 17px;
}

.documento p,
.documento li {
  color: var(--texto);
}

.documento p + p {
  margin-top: 14px;
}

.documento ul {
  margin-top: 10px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.documento li::marker {
  color: var(--teal-500);
}

/* --- Rodapé --- */

.rodape {
  padding: clamp(56px, 7vw, 88px) var(--margem) 32px;
  background: var(--escuro);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.rodape-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
}

/* No celular, Produto e Legal ficam lado a lado embaixo da marca. */
.rodape-topo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin-bottom: 40px;
}

.rodape-marca {
  grid-column: 1 / -1;
}

.rodape-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.rodape-logo svg {
  width: 30px;
  height: 30px;
}

.rodape-logo span {
  font-weight: 600;
  font-size: 17px;
  color: var(--teal-200);
}

/* Bloco regulatorio: letra miuda por convencao, mas legivel. Contraste e
   tamanho ficam acima do minimo AA de proposito, porque esconder obrigacao
   de informar em texto ilegivel anula o proposito dela. */
.rodape-legal {
  padding: 28px 0;
  margin-bottom: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

/* Blocos legais um embaixo do outro, na largura toda do rodapé, cada um com
   o título como rótulo em mono. */
.rodape-legal {
  display: grid;
  gap: 22px;
}

.rodape-legal strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-200);
}

.rodape-identificacao {
  color: rgba(255, 255, 255, 0.72);
}

/* Rede social como item de coluna, com o ícone antes do nome. */
.rodape-rede {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rodape-rede svg {
  flex-shrink: 0;
}

.rodape-coluna h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}

.rodape-coluna a {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.rodape-coluna a:hover {
  color: var(--teal-300);
}

/* Botão que reabre o aviso de privacidade, vestido como os links da coluna. */
.rodape-preferencias {
  display: block;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.rodape-preferencias:hover {
  color: var(--teal-300);
}

/* --- Aviso de consentimento ---
   Uma folha pequena no canto, com fio e rótulo mono como o resto do desenho.
   Não cobre a página nem bloqueia a rolagem. Os dois botões têm o mesmo
   peso de propósito (ANPD, Guia de cookies): não destaque o Aceitar. */

.aviso-privacidade {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  width: min(380px, calc(100% - 32px));
  padding: 20px 20px 18px;
  background: var(--branco-quente);
  border: 1px solid rgba(10, 31, 25, 0.18);
  border-radius: var(--raio);
  box-shadow: var(--sombra-destaque);
  color: var(--texto);
}

.aviso-privacidade[hidden] {
  display: none;
}

.aviso-privacidade-rotulo {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}

.aviso-privacidade-texto {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}

.aviso-privacidade-texto a {
  color: var(--teal-600);
}

.aviso-privacidade-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.aviso-privacidade-botao {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(10, 31, 25, 0.18);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.2s;
}

.aviso-privacidade-botao:hover {
  border-color: var(--tinta);
}

.rodape-base {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  line-height: 1.7;
}

.rodape-aviso {
  max-width: 620px;
}

.rodape-base a,
.rodape-legal a {
  color: var(--teal-200);
}

@media (min-width: 860px) {
  .rodape-topo {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }

  .rodape-marca {
    grid-column: auto;
  }

  .rodape-base {
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
  }
}

/* "Ver quem é", no hero, leva a este parágrafo do rodapé. Ele para abaixo da
   nav fixa e acende de leve para a pessoa achar onde chegou. */
.rodape-contabilidade {
  scroll-margin-top: 96px;
  border-radius: 8px;
  transition: background 0.6s, box-shadow 0.6s;
}

.rodape-contabilidade:target {
  background: rgba(93, 202, 165, 0.12);
  box-shadow: 0 0 0 10px rgba(93, 202, 165, 0.12);
}

/* --- Detalhes de celular --- */

/* Carrossel das profissões: pontos que mostram onde a pessoa está. */
.perfis-pontos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.perfis-pontos i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(10, 31, 25, 0.18);
  transition: width 0.3s, background 0.3s;
}

.perfis-pontos i.ativo {
  width: 20px;
  background: var(--teal-600);
}

@media (min-width: 1100px) {
  .perfis-pontos {
    display: none;
  }
}

/* Funcionalidades: no celular as abas mostram só o número; o nome da aba
   ativa aparece logo abaixo. */
.vitrine-aba-atual {
  display: none;
}

@media (max-width: 699.98px) {
  .vitrine-aba-atual {
    display: block;
    margin: -16px 0 24px;
    font-family: var(--fonte-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-600);
  }

  /* O "01 / 04" repete o que as abas já mostram. */
  .vitrine-indice {
    display: none;
  }

  /* Critérios de "Para quem é": lista enxuta em vez de quatro pílulas. */
  .criterios {
    display: grid;
    gap: 8px;
  }

  .criterios li {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14.5px;
  }
}

/* Lista de espera no lançamento: o cartão vira só a chamada para abrir a conta. */
.lista-chamada {
  display: grid;
  align-content: center;
  min-height: 200px;
}

/* --- Páginas de evento (/bbdw/) --- */

/* Sem ilustração ao lado, o hero não precisa da altura da tela. */
.evento-hero {
  min-height: 0;
}

.evento-hero .hero-titulo {
  max-width: 14ch;
}

.contatos {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 760px) {
  .contatos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
  }
}

.contato {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: #fff;
  box-shadow: var(--sombra-repouso);
  color: var(--tinta);
}

.contato-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.contato-acoes a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(10, 31, 25, 0.18);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.contato-acoes a:hover {
  border-color: var(--tinta);
  background: var(--branco-quente);
}

.contato-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  color: var(--teal-600);
}

.contato-icone svg {
  width: 20px;
  height: 20px;
}

.contato-rotulo {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.contato-valor {
  font-size: var(--tipo-cartao);
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* --- Calculadora da regra dos 28% (/calculadora-regra-dos-28/) --- */

/* A calculadora traz o próprio CSS (assets/calculadora-regra-28/calculadora.css),
   tudo sob .c28. Aqui fica só a página em volta: topo, quadro e texto. */

/* O topo e o quadro dividem a malha fina de desenho da home, que some para
   baixo. */
.calc-topo {
  position: relative;
  isolation: isolate;
  padding: calc(64px + clamp(40px, 6vw, 88px)) var(--margem) clamp(32px, 4vw, 52px);
}

.calc-topo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(10, 31, 25, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(10, 31, 25, 0.045) 1px, transparent 1px) 0 0 / 24px 24px;
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Topo, quadro e texto alinhados à mesma borda do container da home; o texto
   corrido fica numa coluna de leitura. */
.calc-topo-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
}

.calc-topo-interno > * {
  max-width: 760px;
}

.calc-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(34px, 2.4vw + 24px, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.calc-selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 2.4vw, 28px);
}

.calc-selos li {
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--suave);
}

.calc-moldura {
  max-width: calc(var(--largura-max) + 2 * var(--margem));
  margin: 0 auto clamp(48px, 7vw, 96px);
  padding: 0 var(--margem);
}

/* A prancha: marcas de corte em dois cantos, como numa folha de desenho. */
.calc-folha {
  position: relative;
}

.calc-folha::before,
.calc-folha::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--teal-600);
  pointer-events: none;
}

.calc-folha::before {
  top: -9px;
  left: -9px;
  border-width: 1px 0 0 1px;
}

.calc-folha::after {
  right: -9px;
  bottom: -9px;
  border-width: 0 1px 1px 0;
}

/* O quadro reserva altura antes de a calculadora chegar, para o texto
   abaixo não pular quando ela aparece. */
.calc-alvo {
  min-height: 560px;
  border: 1px solid rgba(10, 31, 25, 0.16);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: var(--sombra-destaque);
  /* clip, e não hidden: recorta os cantos sem virar área de rolagem, então os
     botões fixos no rodapé de cada etapa da calculadora (sticky) continuam fixos. */
  overflow: clip;
}

.calc-espera,
.calc-sem-js {
  padding: 32px 20px;
  color: var(--suave);
}

.calc-privacidade {
  margin-top: 14px;
  font-size: 14px;
  color: var(--suave);
}

.calc-secao-alternada {
  background: var(--secao-alternada);
}

.calc-texto > * {
  max-width: 760px;
}

.calc-texto > p {
  max-width: 62ch;
  margin-top: 16px;
  font-size: clamp(16px, 0.3vw + 15px, 18px);
  color: var(--texto);
}

.calc-texto .secao-titulo {
  max-width: 22ch;
}

.calc-atividades {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 24px;
  margin-top: 20px;
}

.calc-atividades li {
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 15.5px;
  color: var(--tinta);
}

/* Os três requisitos da regra, numerados como os passos da home. */
.calc-requisitos {
  list-style: none;
  counter-reset: requisito;
  margin-top: 24px;
  border-top: 1px solid var(--borda);
}

.calc-requisitos li {
  counter-increment: requisito;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 18px 0;
  border-bottom: 1px solid var(--borda);
}

.calc-requisitos li::before {
  content: counter(requisito, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 3px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-600);
}

.calc-requisitos h3 {
  font-size: var(--tipo-cartao);
  letter-spacing: -0.02em;
}

.calc-requisitos p {
  margin-top: 6px;
  color: var(--suave);
}

/* Selo de tempo e o atalho para os requisitos, na mesma linha. */
.calc-topo-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(20px, 2.4vw, 28px);
}

.calc-topo-rodape .calc-selos {
  margin-top: 0;
}

.calc-link-quem {
  font-size: 15px;
  font-weight: 500;
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--teal-300);
}

.calc-link-quem:hover {
  text-decoration-color: currentColor;
}

.calc-subtitulo {
  margin-top: 36px;
  font-size: var(--tipo-cartao);
}

.calc-passos {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: 24px;
}

.calc-passos li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--borda);
}

.calc-passo-numero {
  grid-row: span 2;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--teal-600);
  padding-top: 3px;
}

.calc-passos h3 {
  font-size: 18px;
}

.calc-passos p {
  margin-top: 4px;
  color: var(--suave);
}

.calc-aviso {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 2px solid var(--teal-600);
  background: var(--teal-100);
  font-size: 15.5px;
}

/* --- Calculadora: fórmula, exemplo e tabelas do Simples ------------------- */

/* A fórmula do Fator R, como uma cota de desenho: rótulo em mono, conta em
   destaque e o resultado embaixo. */
.calc-formula {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--teal-600);
  background: #fff;
}

.calc-texto > p.calc-formula {
  max-width: 760px;
}

.calc-formula-rotulo {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-700);
}

.calc-formula-conta {
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}

.calc-formula-resultado {
  font-size: 15.5px;
  color: var(--suave);
}

/* Tabelas com fio fino, números alinhados; rolam de lado só se não couberem. */
.calc-tabela-rolagem {
  margin-top: 24px;
  overflow-x: auto;
}

.calc-tabela {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.calc-tabela caption {
  padding-bottom: 10px;
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-700);
}

.calc-tabela th,
.calc-tabela td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  font-size: 15.5px;
  color: var(--tinta);
}

.calc-tabela thead th {
  padding-top: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--suave);
  border-bottom-color: var(--tinta);
}

.calc-tabela tbody th {
  font-weight: 500;
}

.calc-anexo td:nth-child(3),
.calc-anexo td:nth-child(4) {
  text-align: right;
}

.calc-anexo thead th:nth-child(3),
.calc-anexo thead th:nth-child(4) {
  text-align: right;
}

.calc-exemplo td small {
  margin-left: 6px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--suave);
}

.calc-exemplo thead th:last-child,
.calc-exemplo td:last-child {
  color: var(--teal-700);
}

.calc-exemplo-total th,
.calc-exemplo-total td {
  font-weight: 600;
  border-bottom-color: var(--tinta);
}

.calc-texto > p.calc-nota {
  font-size: 14px;
  color: var(--suave);
}

/* No celular, as colunas cabem na largura: letra menor e menos respiro. */
@media (max-width: 480px) {
  .calc-tabela th,
  .calc-tabela td {
    padding-right: 8px;
    font-size: 14px;
  }

  .calc-tabela thead th {
    font-size: 11px;
  }

  .calc-exemplo td small {
    display: block;
    margin: 2px 0 0;
  }
}

/* Atalho embaixo de uma resposta do FAQ para outra página do site. */
.faq-link {
  font-weight: 500;
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--teal-300);
}

.faq-link:hover {
  text-decoration-color: currentColor;
}

/* Atalho para a calculadora embaixo dos cartões de profissão: uma faixa de
   fio fino, como uma nota de prancha. */
.para-quem-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 16px 0;
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  font-size: 15.5px;
  color: var(--texto);
}

.para-quem-calc-etiqueta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-700);
}

.para-quem-calc-texto {
  flex: 1 1 320px;
}

.para-quem-calc a {
  font-weight: 500;
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--teal-300);
  white-space: nowrap;
}

.para-quem-calc a:hover {
  text-decoration-color: currentColor;
}

/* --- Calculadora: seções em duas colunas, como o FAQ da home --------------
   Etiqueta e título à esquerda, presos na tela; texto, tabelas e passos à
   direita, na mesma largura de leitura. No celular, tudo empilhado. */
.calc-duas {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.calc-cabeca .secao-titulo {
  max-width: 16ch;
}

@media (min-width: 960px) {
  .calc-duas {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(48px, 7vw, 112px);
    align-items: start;
  }

  .calc-cabeca {
    position: sticky;
    top: 120px;
  }

  .calc-cabeca .secao-titulo {
    max-width: none;
  }

  /* O texto começa na altura da etiqueta, sem o respiro do primeiro parágrafo. */
  .calc-duas .calc-texto > :first-child {
    margin-top: 0;
  }
}

/* --- Calculadora: o desenho do exemplo no hero ----------------------------
   A mesma régua da imagem de compartilhamento, numa prancha com marcas de
   corte. Só aparece com duas colunas, na altura do texto, para o card de
   cálculo não descer. */
.calc-fig {
  display: none;
}

@media (min-width: 1024px) {
  .calc-topo-interno {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }

  .calc-fig {
    --fig-hoje: #B06A00; /* o âmbar de "abaixo da regra", o mesmo da calculadora */
    display: block;
    position: relative;
    max-width: 440px;
    justify-self: end;
    width: 100%;
    padding: 24px 26px 22px;
    border: 1px solid rgba(10, 31, 25, 0.16);
    border-radius: var(--raio);
    background: #fff;
    box-shadow: var(--sombra-destaque);
  }

  .calc-fig::before,
  .calc-fig::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0 solid var(--teal-600);
  }

  .calc-fig::before {
    top: -9px;
    left: -9px;
    border-width: 1px 0 0 1px;
  }

  .calc-fig::after {
    right: -9px;
    bottom: -9px;
    border-width: 0 1px 1px 0;
  }

  .calc-fig-legenda {
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--suave);
  }

  .calc-fig-legenda strong {
    font-weight: 500;
    color: var(--teal-700);
  }

  .calc-fig-regua {
    position: relative;
    height: 74px;
    margin: 18px 0 6px;
  }

  .calc-fig-trilho,
  .calc-fig-cheio {
    position: absolute;
    top: 36px;
    left: 0;
    height: 8px;
    border-radius: 4px;
  }

  .calc-fig-trilho {
    right: 0;
    background: rgba(10, 31, 25, 0.08);
  }

  .calc-fig-cheio {
    background: var(--fig-hoje);
  }

  .calc-fig-limite {
    position: absolute;
    top: 16px;
    bottom: 0;
    border-left: 2px dashed var(--teal-600);
  }

  .calc-fig-limite span,
  .calc-fig-hoje span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--fonte-mono);
    font-size: 11.5px;
  }

  .calc-fig-limite span {
    top: -16px;
    color: var(--teal-700);
  }

  .calc-fig-hoje {
    position: absolute;
    top: 31px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border: 3px solid var(--fig-hoje);
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
  }

  .calc-fig-hoje span {
    top: 24px;
    left: 50%;
    font-weight: 500;
    color: var(--fig-hoje);
  }

  .calc-fig-escala {
    display: flex;
    justify-content: space-between;
    font-family: var(--fonte-mono);
    font-size: 11px;
    color: var(--suave);
  }

  .calc-fig-imposto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
  }

  .calc-fig-imposto small {
    display: block;
    font-size: 13px;
    color: var(--suave);
  }

  .calc-fig-imposto strong {
    display: block;
    margin-top: 2px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
  }

  .calc-fig-depois strong {
    color: var(--teal-600);
  }

  .calc-fig-seta {
    padding-bottom: 6px;
    font-size: 22px;
    color: var(--suave);
  }

  .calc-fig-nota {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--suave);
  }
}