/* ===== Base ===== */
:root {
  --creme: #fff7ec;
  --tinta: #141414;
  --tinta-suave: #4a4a4a;
  --vermelho: #c8102e;
  --amarelo: #ffd23f;
  --verde-zap: #25d366;
  --verde-dinheiro: #0a8f4a;
  --bloco-amarelo: #fff1c2;
  --bloco-rosa: #ffe3e8;
  --bloco-verde: #dff7e8;
  --fonte-titulo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio-bloco: 28px;
  --raio-card: 20px;
  --sombra: 0 18px 40px rgba(20, 20, 20, 0.12);
  --largura: 1160px;
  --altura-barra: 64px;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

section[id],
div[id] {
  scroll-margin-top: calc(var(--altura-barra) + 16px);
}

/* Visualmente oculto, mas lido pelo leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "Pular para o conteúdo": fora da tela até receber foco. */
.pular {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--tinta);
  color: var(--creme);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transform: translateY(-200%);
}

.pular:focus {
  transform: none;
}

/* ===== Componentes comuns ===== */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 20px;
}

.secao {
  padding-block: 72px;
}

.etiqueta {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--vermelho);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.titulo-secao {
  margin: 0 0 16px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.texto-secao {
  max-width: 620px;
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.55;
}

.marca-texto {
  background: linear-gradient(transparent 55%, var(--amarelo) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Botão de ação: todos levam ao formulário da demonstração (ou enviam o formulário). */
.btn-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  background: var(--tinta);
  color: var(--creme);
  font-family: var(--fonte-texto);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.14);
  cursor: pointer;
}

@media (hover: hover) {
  .btn-acao:hover {
    transform: translateY(-2px);
  }
}

.btn-acao .icone-seta {
  flex: none;
}

.btn-acao--pequeno {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.bloco {
  padding: 28px;
  border-radius: var(--raio-bloco);
}

.bloco--amarelo {
  background: var(--bloco-amarelo);
}

.bloco--rosa {
  background: var(--bloco-rosa);
}

.bloco--verde {
  background: var(--bloco-verde);
}

/* Celular de mentira, com a tela do WhatsApp. */
.celular {
  position: relative;
  width: 270px;
  aspect-ratio: 9 / 18.5;
  padding: 10px;
  background: var(--tinta);
  border-radius: 40px;
  box-shadow: var(--sombra);
}

.celular-tela {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ece5dd;
  border-radius: 31px;
}

.zap-topo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #075e54;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* O círculo do avatar vem do CSS: não escreva elemento de avatar no HTML. */
.zap-topo::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d9d2c9;
}

.zap-conversa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
}

.bolha {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.38;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(20, 20, 20, 0.08);
}

.bolha--loja {
  align-self: flex-start;
  background: #fff;
}

.bolha--cliente {
  align-self: flex-end;
  background: #dcf8c6;
}

/* Botões de resposta: dentro da bolha da loja, depois do texto, com a largura da bolha. */
.zap-botoes {
  display: flex;
  flex-direction: column;
  margin: 8px -10px -8px;
  border-top: 1px solid #e6e6e6;
}

.zap-botoes > * {
  display: block;
  padding: 8px 10px;
  background: #fff;
  color: #027eb5;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.zap-botoes > * + * {
  border-top: 1px solid #e6e6e6;
}

.zap-botoes > :last-child {
  border-radius: 0 0 12px 12px;
}

.cartao-dinheiro {
  display: inline-block;
  padding: 12px 16px;
  background: #fff;
  color: var(--verde-dinheiro);
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  border-radius: 14px;
  box-shadow: var(--sombra);
}

.cartao-dinheiro small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-suave);
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 600;
}

/* Entrada ao aparecer: o estado inicial só existe dentro de .anima.
   A transição fica só no estado final, para o elemento sumir na hora quando .anima entra. */
.anima [data-entra] {
  opacity: 0;
  transform: translateY(24px);
}

.anima [data-entra].visivel {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--ordem, 0) * 80ms);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-acao {
    transition: transform 0.2s ease;
  }
}

@media (min-width: 900px) {
  .secao {
    padding-block: 112px;
  }

  .texto-secao {
    font-size: 18px;
  }

  .bloco {
    padding: 48px;
  }

  .celular {
    width: 300px;
  }
}

/* ===== Barra fixa ===== */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--altura-barra);
  background: var(--creme);
}

/* A sombra fica pronta num pseudo-elemento e só acende (opacidade). */
.barra::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 6px 24px rgba(20, 20, 20, 0.12);
  opacity: 0;
  pointer-events: none;
}

.barra--rolada::after {
  opacity: 1;
}

.barra-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}

.barra-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.barra-icone {
  flex: none;
}

.barra-menu {
  display: none;
}

/* No celular o botão mostra só "Quero ver"; o leitor de tela ouve "Quero ver funcionando". */
.barra-acao-extra {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .barra::after {
    transition: opacity 0.25s ease;
  }
}

@media (min-width: 420px) {
  .barra-acao-extra {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

@media (min-width: 900px) {
  .barra-menu {
    display: flex;
    gap: 4px;
  }

  .barra-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
  }

  .barra-menu a:hover {
    background: var(--bloco-amarelo);
  }
}

/* ===== Topo ===== */
.topo {
  padding-block: 32px 64px;
}

.topo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.topo-titulo {
  margin-bottom: 18px;
  font-family: var(--fonte-titulo);
  font-size: clamp(38px, 6.2vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* O título inteiro já é 800; o <strong> só marca o trecho, sem pedir um peso que a letra não tem. */
.topo-titulo strong {
  font-weight: inherit;
}

.topo-lead {
  max-width: 540px;
  margin-bottom: 28px;
  color: var(--tinta-suave);
  font-size: 18px;
  line-height: 1.55;
}

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

/* Palco do celular: formas atrás, celular inclinado e o cartão do dinheiro na frente. */
.topo-palco {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 24px 40px;
}

/* As formas podem passar da coluna; este quadro corta só o que sair dos lados (nada vaza em 360 px)
   e deixa passar o que sai por cima e por baixo. */
.topo-formas {
  position: absolute;
  inset: 0 -20px;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

/* Safari e iOS antes do 16 não conhecem overflow: clip; sem isso as formas fariam a página rolar de lado.
   Aqui dentro só há formas decorativas (nada sticky), então hidden serve. */
@supports not (overflow: clip) {
  .topo-formas {
    overflow: hidden;
  }
}

.topo-forma {
  position: absolute;
  display: block;
}

.topo-forma--circulo {
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  background: var(--amarelo);
  border-radius: 50%;
}

.topo-forma--quadrado {
  bottom: 28px;
  left: 0;
  width: 120px;
  height: 120px;
  background: var(--vermelho);
  border-radius: 28px;
  opacity: 0.14;
  rotate: 18deg;
}

/* A inclinação usa a propriedade rotate, separada do transform: as animações mexem só no transform. */
.topo-aparelho {
  position: relative;
  rotate: -4deg;
}

/* No celular o cartão fica sobre o canto de baixo do aparelho, abaixo da conversa. */
.topo-cartao {
  position: absolute;
  right: -12px;
  bottom: -16px;
  z-index: 2;
  white-space: nowrap;
  rotate: 6deg;
}

/* Em telas abaixo de 360 px o cartão inclinado passaria da borda e faria a página rolar de lado. */
@media (max-width: 359px) {
  .topo-cartao {
    right: 0;
  }
}

/* Conversa: cada passo é uma coluna com o mesmo espaço entre bolhas da .zap-conversa. */
.topo-passo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Brilho do toque no botão "Quero agendar" (parado: apagado). */
.topo-agendar {
  position: relative;
}

.topo-agendar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 126, 181, 0.2);
  opacity: 0;
  pointer-events: none;
}

/* Linha do tempo de cada ciclo (10 s):
   0,4 s a loja manda a mensagem com os 3 botões
   1,2 s a 2,0 s "Quero agendar" pisca duas vezes
   2,0 s o cliente responde "Quero agendar"
   3,3 s a loja: "Combinado, Carlos! Sábado às 9h00 fica bom?"
   4,5 s o cliente: "Fechado!"
   5,5 s o cartão "+ R$ 189" sobe
   8,4 s tudo some junto (0,3 s) e a tela fica vazia até recomeçar
   Cada passo fica 2,0 s escondido no começo do seu ciclo (0% a 20%); esse tempo precisa ser
   maior que o intervalo entre duas bolhas seguidas (1,6 s) mais o sumiço (0,3 s). */
@keyframes topo-passo {
  0% {
    opacity: 1;
    transform: none;
  }
  3% {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  20% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  24%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes topo-toque {
  0%,
  4%,
  8%,
  100% {
    opacity: 0;
  }
  2%,
  6% {
    opacity: 1;
  }
}

@keyframes topo-cartao {
  0% {
    opacity: 0;
    transform: translate(-28px, 24px) scale(0.9);
  }
  4%,
  29% {
    opacity: 1;
    transform: none;
  }
  32%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes topo-marca {
  to {
    background-position: 0% 100%;
  }
}

@keyframes topo-flutua {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-18px) rotate(8deg);
  }
}

@keyframes topo-balanca {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

/* Tudo o que se mexe fica dentro de .anima. Sem ela: conversa inteira, cartão à mostra, nada se mexe.
   Atraso negativo = o ciclo já começa andando (atraso de cada passo = momento em que a bolha aparece menos 2,0 s). */
.anima .topo-passo {
  animation: topo-passo 10s ease-out infinite;
}

.anima .topo-passo--1 {
  animation-delay: -1.6s;
}

.anima .topo-passo--2 {
  animation-delay: 0s;
}

.anima .topo-passo--3 {
  animation-delay: -8.7s;
}

.anima .topo-passo--4 {
  animation-delay: -7.5s;
}

.anima .topo-agendar::after {
  animation: topo-toque 10s linear -8.8s infinite;
}

.anima .topo-cartao {
  animation: topo-cartao 10s ease-out -4.5s infinite;
}

/* O marca-texto passa da esquerda para a direita uma vez, logo depois de a página abrir. */
.anima .topo-titulo .marca-texto {
  background-image: linear-gradient(90deg, var(--amarelo) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 45%;
  background-position: 100% 100%;
  animation: topo-marca 0.9s ease-out 0.4s forwards;
}

.anima .topo-forma {
  animation: topo-flutua 6s ease-in-out infinite alternate;
}

.anima .topo-forma--quadrado {
  animation-duration: 8s;
  animation-delay: -3s;
}

.anima .topo-aparelho {
  animation: topo-balanca 5s ease-in-out infinite alternate;
}

@media (min-width: 900px) {
  .topo {
    padding-block: 56px 96px;
  }

  .topo-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
  }

  .topo-lead {
    font-size: 19px;
  }

  .topo-palco {
    padding-block: 40px 56px;
  }

  .topo-forma--circulo {
    width: 250px;
    height: 250px;
  }

  .topo-forma--quadrado {
    bottom: 40px;
    left: 32px;
    width: 140px;
    height: 140px;
    border-radius: 32px;
  }

  /* Entre 900 e 1023 px a coluna do celular é estreita: o cartão sai só um pouco para não passar da tela. */
  .topo-cartao {
    right: -12px;
    bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .topo-cartao {
    right: -32px;
  }
}

/* ===== Faixa ===== */
.faixa {
  overflow: hidden;
  padding-block: 18px;
  background: var(--tinta);
  color: var(--creme);
}

/* As duas cópias lado a lado; andar -50% leva a segunda cópia exatamente ao lugar da primeira. */
.faixa-trilho {
  display: flex;
  width: max-content;
}

/* O espaço depois do último item (padding) é igual ao espaço entre itens, para não ter emenda. */
.faixa-lista {
  display: flex;
  flex: none;
  gap: 48px;
  margin: 0;
  padding: 0 48px 0 0;
  list-style: none;
}

.faixa-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.faixa-icone {
  flex: none;
  color: var(--amarelo);
}

@keyframes faixa-corre {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.anima .faixa-trilho {
  animation: faixa-corre 40s linear infinite;
}

/* A pausa é só para quem tem mouse: no celular o :hover gruda depois de um toque e a faixa pararia. */
@media (hover: hover) {
  .faixa:hover .faixa-trilho {
    animation-play-state: paused;
  }
}

@media (min-width: 900px) {
  .faixa {
    padding-block: 22px;
  }

  .faixa-item {
    font-size: 22px;
  }
}

/* ===== Problema ===== */
.problema-titulo {
  max-width: 760px;
}

.problema-texto {
  margin-bottom: 32px;
}

.problema-trilha {
  position: relative;
}

/* Linha que liga os passos. No celular: em pé, no centro dos ícones (64 px), do primeiro ao último. */
.problema-linha {
  position: absolute;
  top: 32px;
  left: 0;
  width: 64px;
  height: calc(100% - 64px);
  overflow: visible;
}

.problema-traco {
  stroke: var(--vermelho);
  stroke-width: 4;
  stroke-linecap: butt;
}

.problema-traco--deitado {
  display: none;
}

.problema-passos {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.problema-passo {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.problema-icone {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  background: #fff;
  color: var(--tinta);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(20, 20, 20, 0.1);
}

.problema-passo--perdido .problema-icone {
  background: var(--vermelho);
  color: #fff;
}

/* Selo "R$" vermelho riscado no último passo. */
.problema-rs {
  position: absolute;
  top: -14px;
  right: -6px;
  padding: 2px 7px;
  background: #fff;
  color: var(--vermelho);
  font-size: 15px;
  line-height: 1.2;
  border: 2px solid var(--vermelho);
  border-radius: 8px;
  transform: rotate(-8deg);
}

.problema-rs::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  left: 2px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--vermelho);
  border-radius: 2px;
  transform: rotate(-16deg);
  transform-origin: left center;
}

.problema-fecho {
  max-width: 820px;
  margin-top: 40px;
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Animação: a linha se desenha (2,25 s) e cada passo acende quando a linha chega nele.
   Estado inicial só dentro de .anima; a transição fica só no estado final (.ativo). */
.anima .problema-trilha[data-ativa] .problema-traco {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.anima .problema-trilha[data-ativa].ativo .problema-traco {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.25s linear 0.25s;
}

.anima .problema-trilha[data-ativa] .problema-passo {
  opacity: 0;
  transform: translateY(14px) scale(0.92);
}

.anima .problema-trilha[data-ativa].ativo .problema-passo {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 0.75s + 0.15s);
}

.anima .problema-trilha[data-ativa] .problema-rs {
  opacity: 0;
  transform: rotate(-8deg) scale(0.4);
}

.anima .problema-trilha[data-ativa].ativo .problema-rs {
  opacity: 1;
  transform: rotate(-8deg);
  transition: opacity 0.3s ease 2.8s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s;
}

.anima .problema-trilha[data-ativa] .problema-rs::after {
  transform: rotate(-16deg) scaleX(0);
}

.anima .problema-trilha[data-ativa].ativo .problema-rs::after {
  transform: rotate(-16deg) scaleX(1);
  transition: transform 0.35s ease 3.3s;
}

@media (min-width: 900px) {
  .problema-texto {
    margin-bottom: 48px;
  }

  /* Quatro colunas sem espaço entre elas: o centro de cada ícone cai em 12,5%, 37,5%, 62,5% e 87,5%. */
  .problema-passos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .problema-passo {
    flex-direction: column;
    gap: 16px;
    padding-inline: 8px;
    font-size: 22px;
    text-align: center;
  }

  .problema-icone {
    width: 80px;
    height: 80px;
  }

  .problema-rs {
    top: -10px;
    right: -16px;
  }

  /* No computador: deitada, na altura do centro dos ícones (80 px), do primeiro ao último. */
  .problema-linha {
    top: 38px;
    left: 12.5%;
    width: 75%;
    height: 4px;
  }

  .problema-traco--em-pe {
    display: none;
  }

  .problema-traco--deitado {
    display: inline;
  }
}

/* ===== Como funciona ===== */
.passos-titulo {
  max-width: 760px;
  margin-bottom: 40px;
}

.passos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.passos-lista {
  display: grid;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passos-passo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.passos-numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--vermelho);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  border-radius: 50%;
}

.passos-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.passos-texto {
  max-width: 520px;
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.55;
}

/* No celular: cada passo tem o seu quadro, um celular menor num bloco colorido, logo abaixo do texto. */
.passos-quadro {
  display: flex;
  align-self: stretch;
  justify-content: center;
  margin-top: 8px;
  padding: 28px 16px;
  background: var(--bloco-amarelo);
  border-radius: var(--raio-bloco);
}

.passos-passo[data-passo="2"] .passos-quadro {
  background: var(--bloco-verde);
}

.passos-passo[data-passo="3"] .passos-quadro {
  background: var(--bloco-rosa);
}

.passos-quadro .celular {
  width: 240px;
}

/* O palco amarelo com o celular parado só existe a partir de 900 px. */
.passos-palco {
  display: none;
}

/* As três telas do celular parado ficam empilhadas; só a .atual aparece, e ela fica por cima. */
.passos-telas {
  position: relative;
}

.passos-tela {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.passos-tela.atual {
  z-index: 1;
  opacity: 1;
}

/* Desenho das telas do sistema (o mesmo nos quadros e no celular parado). */
.passos-app-topo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 14px 12px;
  background: var(--vermelho);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.passos-app-topo small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
}

.passos-app-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  background: #f6f5f2;
}

/* Tela de "Atendimento salvo": conteúdo no meio, como uma confirmação. */
.passos-app-corpo--centro {
  justify-content: center;
}

.passos-sucesso {
  display: grid;
  align-self: center;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--verde-dinheiro);
  color: #fff;
  border-radius: 50%;
}

.passos-placa {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 150px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  border: 3px solid var(--tinta);
  border-radius: 8px;
}

.passos-placa-faixa {
  padding: 2px 0;
  background: #003399;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.passos-placa-numero {
  padding: 2px 0 4px;
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.passos-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.passos-campo-rotulo {
  color: var(--tinta-suave);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.passos-campo-valor {
  padding: 8px 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
}

.passos-marcado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
}

.passos-caixinha {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--vermelho);
  color: #fff;
  border-radius: 4px;
}

/* Botão no pé da tela, como no sistema. */
.passos-botao {
  display: block;
  margin-top: auto;
  padding: 11px;
  background: var(--vermelho);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px;
}

.passos-proxima {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  background: var(--bloco-verde);
  border: 2px solid var(--verde-dinheiro);
  border-radius: 12px;
}

.passos-proxima-rotulo {
  color: var(--tinta-suave);
  font-size: 12px;
  font-weight: 600;
}

.passos-proxima-valor {
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.passos-barra {
  display: block;
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  background: #fff;
  border-radius: 999px;
}

.passos-barra-cheia {
  display: block;
  height: 100%;
  background: var(--verde-dinheiro);
  border-radius: inherit;
  transform: scaleX(0.6);
  transform-origin: left center;
}

.passos-barra-legenda {
  display: flex;
  justify-content: space-between;
  color: var(--tinta-suave);
  font-size: 11px;
  font-weight: 600;
}

.passos-media {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}

.passos-media svg {
  flex: none;
  color: var(--vermelho);
}

/* Barra de digitar do WhatsApp, no pé da tela do lembrete (só desenho). */
.passos-zap-barra {
  display: flex;
  flex: none;
  gap: 6px;
  margin-top: auto;
  padding: 8px;
}

.passos-zap-campo {
  flex: 1;
  height: 34px;
  background: #fff;
  border-radius: 999px;
}

.passos-zap-mic {
  flex: none;
  width: 34px;
  height: 34px;
  background: #128c7e;
  border-radius: 50%;
}

/* Troca de tela: a nova acende por cima (0,45 s) e a antiga só some depois disso, para o fundo não piscar.
   A transição de 0 s com atraso no estado de saída não faz nada piscar quando .anima entra,
   porque essas telas já estão escondidas nessa hora. */
.anima .passos-tela {
  transform: scale(0.96);
  transition: opacity 0s linear 0.45s, transform 0s linear 0.45s;
}

.anima .passos-tela.atual {
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.anima .passos-tela .passos-caixinha {
  transform: scale(0);
  transition: transform 0s linear 0.45s;
}

.anima .passos-tela.atual .passos-caixinha {
  transform: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}

.anima .passos-tela .passos-sucesso {
  transform: scale(0);
  transition: transform 0s linear 0.45s;
}

.anima .passos-tela.atual .passos-sucesso {
  transform: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.anima .passos-tela .passos-barra-cheia {
  transform: scaleX(0);
  transition: transform 0s linear 0.45s;
}

.anima .passos-tela.atual .passos-barra-cheia {
  transform: scaleX(0.6);
  transition: transform 0.9s ease 0.3s;
}

.anima .passos-tela .passos-resposta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0s linear 0.45s, transform 0s linear 0.45s;
}

.anima .passos-tela.atual .passos-resposta {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.6s, transform 0.35s ease 0.6s;
}

@media (min-width: 900px) {
  .passos-titulo {
    margin-bottom: 24px;
  }

  .passos-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }

  /* Cada passo ocupa 70% da altura da janela; o espaço no fim deixa o celular parado
     até o passo 3 passar do meio da tela. */
  .passos-lista {
    gap: 0;
    padding-bottom: 25vh;
  }

  .passos-passo {
    justify-content: center;
    min-height: 70vh;
  }

  .passos-quadro {
    display: none;
  }

  /* Palco amarelo da altura da lista inteira; o celular anda parado dentro dele.
     Nenhum ancestral do celular pode ter overflow nem transform. */
  .passos-palco {
    --folga-palco: 40px;
    display: flex;
    justify-content: center;
    padding-block: var(--folga-palco);
    background: var(--bloco-amarelo);
    border-radius: var(--raio-bloco);
  }

  /* O celular tem de caber inteiro na janela. O pior momento é o passo 1 no meio: o palco começa 15% da
     altura da janela abaixo do topo ((100% - 70%) / 2) e o celular fica a mais uma folga dali. Então a altura
     dele é no máximo 85% da janela menos a folga e 12 px de margem embaixo. A largura sai dessa altura pela
     proporção da tela (9 / 18,5), com no máximo 300 px e no mínimo 240 px (abaixo disso as telas não cabem). */
  .passos-celular {
    --janela: 100vh;
    position: sticky;
    top: calc(var(--altura-barra) + var(--folga-palco));
    align-self: flex-start;
    width: max(240px, min(300px, calc((0.85 * var(--janela) - var(--folga-palco) - 12px) * 9 / 18.5)));
  }

  @supports (height: 100svh) {
    .passos-celular {
      --janela: 100svh;
    }
  }

  /* O passo do meio da tela fica aceso; os outros, apagados. */
  .anima .passos-passo {
    opacity: 0.35;
  }

  .anima .passos-passo[aria-current="step"] {
    opacity: 1;
    transition: opacity 0.35s ease;
  }
}

/* Janela baixa (notebook): a folga em volta do celular parado diminui para ele poder ficar maior. */
@media (min-width: 900px) and (max-height: 780px) {
  .passos-palco {
    --folga-palco: 24px;
  }
}

/* ===== Lembretes ===== */
.regua-titulo {
  margin: 0 0 28px;
  max-width: 780px;
}

.regua-bloco {
  padding: 28px 20px;
}

.regua-linha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

/* Celular: a linha é vertical, o ponto fica à esquerda e o texto à direita. */
.regua-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

/* Trecho da linha que liga este ponto ao próximo: trilho claro (::before) e preenchimento vermelho (::after). */
.regua-item:not(:last-child)::before,
.regua-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -46px; /* até o centro do próximo ponto: 22px de vão mais 24px */
  left: 22px;
  width: 4px;
  border-radius: 4px;
}

.regua-item::before {
  background: rgba(20, 20, 20, 0.12);
}

.regua-item::after {
  background: var(--vermelho);
  transform-origin: center top;
}

.regua-ponto {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 6px var(--bloco-amarelo);
}

/* Camada "apagada" por cima do ponto. Padrão: invisível (ponto aceso). Só a animação a mostra no começo.
   Passa 1 px da borda para o vermelho de baixo não aparecer como um fio rosa no contorno. O número fica
   em marrom escuro (5:1 sobre o fundo claro), para o estado apagado também ser legível. */
.regua-ponto::after {
  content: attr(data-n);
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efe2bf;
  color: #6a5d3c;
  opacity: 0;
}

.regua-texto {
  min-width: 0;
}

.regua-quando {
  margin: 0 0 8px;
  padding-top: 13px;
  color: var(--vermelho);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A frase vem num balão branco, como a mensagem que o cliente recebe. */
.regua-frase {
  margin: 0;
  padding: 12px 14px;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.08);
  color: var(--tinta);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.regua-selos {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.regua-selo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--raio-card);
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.06);
  color: var(--tinta);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.regua-selo-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bloco-rosa);
  color: var(--vermelho);
}

/* Computador: a linha fica na horizontal, cinco colunas. */
@media (min-width: 900px) {
  .regua-titulo {
    margin-bottom: 36px;
  }

  .regua-bloco {
    padding: 48px 36px;
  }

  .regua-linha {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }

  .regua-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Do centro deste ponto ao centro do próximo: metade desta coluna, o vão de 16px e metade da próxima. */
  .regua-item:not(:last-child)::before,
  .regua-item:not(:last-child)::after {
    top: 22px;
    bottom: auto;
    left: 50%;
    right: calc(-50% - 16px);
    width: auto;
    height: 4px;
  }

  .regua-item::after {
    transform-origin: left center;
  }

  .regua-texto {
    width: 100%;
  }

  .regua-quando {
    margin: 18px 0 10px;
    padding-top: 0;
  }

  .regua-frase {
    border-radius: 16px;
  }

  .regua-selos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
}

/* Animação (só com .anima): cada trecho da linha leva 0,45 s; o ponto acende quando o trecho anterior chega nele. */
.anima .regua-linha[data-ativa] .regua-item::after {
  transform: scaleY(0);
}

.anima .regua-linha[data-ativa] .regua-ponto::after {
  opacity: 1;
}

.anima .regua-linha[data-ativa] .regua-texto {
  opacity: 0;
  transform: translateY(12px);
}

.anima .regua-linha[data-ativa].ativo .regua-item::after {
  transform: none;
  transition: transform 0.45s linear calc(var(--ordem, 0) * 0.45s);
}

.anima .regua-linha[data-ativa].ativo .regua-ponto {
  animation: regua-pulo 0.55s ease-out calc(var(--ordem, 0) * 0.45s) both;
}

.anima .regua-linha[data-ativa].ativo .regua-ponto::after {
  opacity: 0;
  transition: opacity 0.2s ease calc(var(--ordem, 0) * 0.45s);
}

.anima .regua-linha[data-ativa].ativo .regua-texto {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease calc(var(--ordem, 0) * 0.45s + 0.1s),
    transform 0.4s ease calc(var(--ordem, 0) * 0.45s + 0.1s);
}

@media (min-width: 900px) {
  .anima .regua-linha[data-ativa] .regua-item::after {
    transform: scaleX(0);
  }
}

@keyframes regua-pulo {
  0% {
    transform: scale(1);
  }
  35% {
    transform: translateY(-10px) scale(1.15);
  }
  70% {
    transform: translateY(0) scale(0.95);
  }
  100% {
    transform: none;
  }
}

/* ===== Painel ===== */
.painel-cabeca {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.painel-titulo {
  margin: 0;
}

.painel-texto {
  margin: 14px auto 0;
}

.painel-bloco {
  position: relative;
  padding: 40px 12px 12px; /* espaço para o adesivo não encostar no quadro */
}

/* Forma decorativa cortada pelos cantos do bloco (elemento próprio com overflow: hidden, que o Safari antigo entende). */
.painel-formas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.painel-forma {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--amarelo);
  opacity: 0.55;
}

/* Adesivo amarelo inclinado em cima da borda do bloco. */
.painel-aviso {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: 16px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--amarelo);
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.12);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  transform: rotate(-3deg);
}

/* Quadro de navegador. */
.painel-navegador {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: var(--raio-card);
  background: #fff;
  box-shadow: var(--sombra);
}

.painel-navegador-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7e3dd;
  background: #f3f1ee;
}

.painel-bolinha {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.painel-bolinha:nth-child(2) {
  background: #febc2e;
}

.painel-bolinha:nth-child(3) {
  background: #28c840;
}

.painel-endereco {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  padding: 5px 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A tela do sistema, no jeito da tela real de Lembretes. */
.painel-app {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
}

.painel-app-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
}

.painel-app-titulo {
  margin: 0;
  color: var(--tinta);
  font-size: 22px;
  font-weight: 600;
}

.painel-periodo {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.painel-numeros,
.painel-graficos {
  display: grid;
  gap: 12px;
}

.painel-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.painel-card-titulo {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
}

.painel-valor {
  margin: 6px 0 0;
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: clamp(40px, 11vw, 72px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.painel-valor--verde {
  color: var(--verde-dinheiro);
}

.painel-valor--menor {
  font-size: clamp(32px, 8vw, 48px);
}

.painel-legenda {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 14px;
}

/* "Cada R$ 1 trouxe R$ 78": o destaque verde. */
.painel-retorno {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bloco-verde);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
}

.painel-retorno strong {
  color: var(--verde-dinheiro);
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

/* Funil: 4 barras horizontais, largura proporcional (inline no HTML). */
.painel-funil {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.painel-funil-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
}

.painel-funil-nome {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.painel-funil-numero {
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.painel-funil-trilho {
  grid-column: 1 / -1;
  display: block;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1f1f1;
}

.painel-funil-barra {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--vermelho);
  transform-origin: left center;
}

.painel-funil-item:nth-child(2) .painel-funil-barra {
  background: #dc3a55;
}

.painel-funil-item:nth-child(3) .painel-funil-barra {
  background: #ea7286;
}

.painel-funil-item:nth-child(4) .painel-funil-barra {
  background: var(--verde-dinheiro);
}

/* Mês a mês: 6 barras verticais, altura proporcional (inline no HTML), valor em cima e mês embaixo. */
.painel-meses {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.painel-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.painel-mes-coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  height: 160px;
  border-bottom: 2px solid #e5e7eb;
}

.painel-mes-valor {
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.painel-mes-barra {
  display: block;
  flex: none;
  width: 100%;
  max-width: 44px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #1fb86a, var(--verde-dinheiro));
  transform-origin: center bottom;
}

.painel-mes-nome {
  color: #4b5563;
  font-size: 12px;
}

.painel-mes:last-child .painel-mes-nome {
  color: var(--tinta);
  font-weight: 600;
}

@media (min-width: 900px) {
  .painel-cabeca {
    margin-bottom: 56px;
  }

  .painel-bloco {
    padding: 56px 48px 48px;
  }

  .painel-aviso {
    right: 48px;
    font-size: 14px;
  }

  .painel-forma {
    right: -80px;
    bottom: -120px;
    width: 380px;
    height: 380px;
  }

  .painel-app {
    gap: 16px;
    padding: 28px;
  }

  .painel-numeros {
    grid-template-columns: 3fr 2fr;
    gap: 16px;
  }

  .painel-graficos {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .painel-card {
    padding: 22px;
  }

  .painel-meses {
    gap: 12px;
  }

  .painel-mes-coluna {
    height: 190px;
  }

  .painel-mes-valor {
    font-size: 12px;
  }
}

/* Animação (só com .anima). Quem põe "ativo" em cada .painel-parte é o js/secoes/painel.js, junto com os contadores. */
.anima .painel-parte .painel-funil-barra {
  transform: scaleX(0);
}

.anima .painel-parte .painel-mes-barra {
  transform: scaleY(0);
}

.anima .painel-parte .painel-mes-valor {
  opacity: 0;
}

.anima .painel-parte.ativo .painel-funil-barra {
  transform: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--ordem, 0) * 150ms);
}

.anima .painel-parte.ativo .painel-mes-barra {
  transform: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--ordem, 0) * 120ms);
}

.anima .painel-parte.ativo .painel-mes-valor {
  opacity: 1;
  transition: opacity 0.3s ease calc(var(--ordem, 0) * 120ms + 0.5s);
}

/* ===== Calculadora ===== */
.calc-bloco {
  display: grid;
  gap: 28px;
  padding: 28px 20px;
}

.calc-controles {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.calc-titulo {
  margin: 0;
}

.calc-campo {
  display: grid;
  gap: 2px;
}

.calc-campo-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.calc-rotulo {
  color: var(--tinta);
  font-size: 16px;
  font-weight: 600;
}

.calc-valor {
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

/* Controle deslizante: 44 px de área de toque; trilho vermelho até a bolinha (--p, de 0 a 1, vem do HTML e do JS). */
.calc-controle {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.calc-controle:focus {
  outline: none;
}

.calc-controle:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
  border-radius: 12px;
}

.calc-controle::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(var(--vermelho), var(--vermelho)) 0 0 / calc(var(--p, 0.5) * (100% - 30px) + 15px) 100% no-repeat,
    #f5b9c4;
}

.calc-controle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin-top: -10px; /* (10px do trilho - 30px da bolinha) / 2 */
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--vermelho);
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);
}

.calc-controle::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: #f5b9c4;
}

.calc-controle::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--vermelho);
}

.calc-controle::-moz-range-thumb {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--vermelho);
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);
}

/* Resultado: cartão branco; a perda em vermelho, o recuperável no bloco verde. */
.calc-resultado {
  container-type: inline-size; /* os números medem o cartão (cqi), não a tela: o maior resultado cabe com a unidade na mesma linha */
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 24px 20px;
  border-radius: var(--raio-card);
  background: #fff;
  box-shadow: var(--sombra);
}

.calc-saida {
  display: grid;
  gap: 16px;
}

.calc-linha {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.4;
}

.calc-perda {
  display: block;
  margin-top: 4px;
  color: var(--vermelho);
  font-weight: 600;
}

/* O número ocupa a linha dele e a unidade ("por mês") vai logo abaixo. O tamanho acompanha a largura do cartão
   (cqi): o maior resultado ("R$ 350.000", "R$ 4.200.000", "+ R$ 87.500") cabe numa linha só em qualquer largura,
   então a altura do resultado não pula quando o controle mexe. A primeira linha de font-size é para navegador sem cqi. */
.calc-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 34px;
  font-size: clamp(28px, 17.5cqi, 60px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.calc-perda--ano .calc-numero {
  font-size: 28px;
  font-size: clamp(24px, 15cqi, 40px);
}

.calc-unidade {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

.calc-recuperavel {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--bloco-verde);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.45;
}

.calc-ganho {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}

.calc-ganho .calc-numero {
  color: var(--verde-dinheiro);
  font-size: 28px;
  font-size: clamp(26px, calc(17cqi - 6px), 46px); /* o bloco verde tem 18 px de folga de cada lado */
}

.calc-nota {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 14px;
  line-height: 1.45;
}

/* Computador: controles à esquerda, resultado à direita. */
@media (min-width: 900px) {
  .calc-bloco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding: 56px;
  }

  .calc-controles {
    gap: 28px;
  }

  .calc-resultado {
    padding: 36px;
  }
}

/* ===== Planos ===== */
.planos-titulo {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.planos-grade {
  display: grid;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.planos-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px 24px 28px;
  border: 3px solid rgba(20, 20, 20, 0.08); /* mesma espessura do Pro: títulos e botões ficam alinhados */
  border-radius: var(--raio-bloco);
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
}

.planos-card--pro {
  border-color: var(--vermelho);
  box-shadow: 0 18px 44px rgba(200, 16, 46, 0.16);
}

/* Etiqueta "Mais completo" em cima da borda do card. */
.planos-selo {
  position: absolute;
  top: 0;
  left: 24px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.planos-nome {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.planos-frase {
  margin: 10px 0 0;
  color: var(--tinta-suave);
  font-size: 18px;
  line-height: 1.45;
}

.planos-lista {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 24px 0 28px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.planos-lista li {
  position: relative;
  padding-left: 36px;
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.45;
}

/* Check desenhado só com CSS: círculo rosa e o "v" vermelho. */
.planos-lista li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bloco-rosa);
}

.planos-lista li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 9px;
  width: 6px;
  height: 11px;
  border: solid var(--vermelho);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.planos-card--pro .planos-lista li:first-child {
  font-weight: 600;
}

/* O botão fica no pé do card, com a mesma altura nos dois. */
.planos-card .btn-acao {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

.planos-valor {
  max-width: 620px;
  margin: 32px auto 0;
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .planos-titulo {
    margin-bottom: 56px;
  }

  .planos-grade {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .planos-card {
    min-height: 560px;
    padding: 48px 40px 40px;
  }

  .planos-selo {
    left: 40px;
  }
}

/* ===== Perguntas ===== */
.faq-lista {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: var(--raio-card);
}

.faq-item[open] {
  box-shadow: var(--sombra);
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 18px 14px 20px;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  border-radius: var(--raio-card);
}

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

/* Sinal de mais num círculo amarelo; ao abrir, gira 45 graus e vira um x. */
.faq-pergunta::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 14px 3px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 3px 14px no-repeat,
    var(--amarelo);
}

.faq-item[open] > .faq-pergunta::after {
  transform: rotate(45deg);
}

.faq-resposta {
  padding: 0 20px 20px;
  color: var(--tinta-suave);
  font-size: 16px;
  line-height: 1.55;
}

.anima .faq-pergunta::after {
  transition: transform 0.25s ease;
}

.anima .faq-item[open] > .faq-resposta {
  animation: faq-abre 0.3s ease both;
}

@keyframes faq-abre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 900px) {
  .faq-dentro {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 64px;
    align-items: start;
  }

  .faq-lista {
    margin-top: 0;
  }

  .faq-pergunta {
    font-size: 20px;
  }
}

/* ===== Formulário da demonstração (chamada final) ===== */
.final-bloco {
  position: relative;
  overflow: hidden;
  padding: 32px 16px 16px;
  background: var(--amarelo);
}

.final-forma {
  position: absolute;
  pointer-events: none;
}

.final-forma--circulo {
  top: -70px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--creme);
  opacity: 0.55;
}

.final-forma--quadrado {
  bottom: -40px;
  left: -30px;
  width: 130px;
  height: 130px;
  border-radius: 30px;
  background: var(--vermelho);
  opacity: 0.12;
  transform: rotate(18deg);
}

.anima .final-forma--circulo {
  animation: final-flutua 6s ease-in-out infinite alternate;
}

.anima .final-forma--quadrado {
  animation: final-gira 8s ease-in-out infinite alternate;
}

@keyframes final-flutua {
  to {
    transform: translateY(18px);
  }
}

@keyframes final-gira {
  to {
    transform: rotate(32deg) translateY(-10px);
  }
}

/* A grade fica na frente das formas. */
.final-grade {
  position: relative;
  display: grid;
  gap: 28px;
}

.final-chamada {
  padding-inline: 4px;
}

.final-titulo {
  max-width: 760px;
  margin: 0 0 14px;
}

.final-texto {
  margin: 0 0 22px;
  color: var(--tinta);
  text-wrap: balance;
}

.final-passos {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.final-passo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.final-passo-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--amarelo);
  font-family: var(--fonte-titulo);
  font-weight: 800;
}

.form-cartao {
  min-width: 0;
  padding: 24px 18px;
  border-radius: var(--raio-card);
  background: #fff;
  box-shadow: var(--sombra);
}

.form {
  display: grid;
  gap: 28px;
}

.form-dados {
  display: grid;
  gap: 18px;
}

.campo {
  display: grid;
  gap: 6px;
  align-content: start;
}

.campo-rotulo {
  font-size: 16px;
  font-weight: 600;
}

/* Borda #8a8a8a: 3,5:1 sobre o branco (o contorno do campo precisa de 3:1). 17 px: o iPhone não dá zoom ao tocar. */
.campo-entrada {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #8a8a8a;
  border-radius: 14px;
  background: #fff;
  color: var(--tinta);
  font-size: 17px;
  line-height: 1.3;
}

.campo-entrada::placeholder {
  color: #6b6b6b;
  opacity: 1;
}

.campo-entrada:focus {
  border-color: var(--tinta);
}

.campo-entrada[aria-invalid="true"] {
  border-color: var(--vermelho);
}

.campo-erro {
  color: var(--vermelho);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.campo-erro:empty {
  display: none;
}

.grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-pergunta {
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.grupo .campo-erro {
  margin: -4px 0 10px;
}

.grupo-opcoes {
  display: grid;
  gap: 8px;
}

/* Escolha única em botão grande: o rádio fica invisível por cima da caixa e recebe o toque. */
.escolha {
  position: relative;
  display: block;
  cursor: pointer;
}

.escolha input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.escolha-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #8a8a8a;
  border-radius: 14px;
  background: #fff;
  font-weight: 600;
  line-height: 1.3;
}

.escolha-caixa::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: #fff;
}

.escolha input:checked + .escolha-caixa {
  border-color: var(--tinta);
  background: var(--amarelo);
}

.escolha input:checked + .escolha-caixa::before {
  background: var(--tinta);
  box-shadow: inset 0 0 0 4px var(--amarelo);
}

.escolha input:focus-visible + .escolha-caixa {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

.escolha input[aria-invalid="true"] + .escolha-caixa {
  border-color: var(--vermelho);
}

@media (hover: hover) {
  .escolha:hover .escolha-caixa {
    border-color: var(--tinta);
  }
}

/* Armadilha contra robô: fora da vista e do leitor de tela (aria-hidden no HTML), sem tab. */
.armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.form-envio {
  display: grid;
  gap: 12px;
}

/* Vazio, some; com texto, aparece e o leitor de tela anuncia (role="alert"). */
.form-aviso:empty {
  display: none;
}

.form-aviso {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bloco-rosa);
  color: var(--vermelho);
  font-weight: 600;
  line-height: 1.4;
}

.form-botao {
  width: 100%;
  min-height: 56px;
  font-size: 18px;
}

.form-botao[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.form-consentimento {
  color: var(--tinta-suave);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.form-obrigado {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-block: 8px;
}

/* Recebe o foco só para o leitor de tela anunciar; não é algo clicável. */
.form-obrigado:focus {
  outline: none;
}

.form-obrigado-icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-dinheiro);
  color: #fff;
}

.form-obrigado-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.form-obrigado-texto {
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.55;
}

.anima .form-obrigado {
  animation: form-aparece 0.45s ease both;
}

@keyframes form-aparece {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 560px) {
  .form-cartao {
    padding: 32px;
  }

  .form-dados {
    grid-template-columns: 1fr 1fr;
  }

  .grupo-opcoes--duas {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .final-bloco {
    padding: 64px 48px;
  }

  .final-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 48px;
    align-items: start;
  }

  .final-chamada {
    padding-top: 8px;
  }

  .form-cartao {
    padding: 36px;
  }

  .final-forma--circulo {
    width: 320px;
    height: 320px;
    top: -110px;
    right: -80px;
  }

  .final-forma--quadrado {
    width: 190px;
    height: 190px;
    bottom: -60px;
    left: 40px;
  }
}

/* ===== Rodapé ===== */
.rodape {
  padding-block: 44px;
  background: var(--tinta);
  color: var(--creme);
}

.rodape-dentro {
  display: grid;
  gap: 8px;
}

.rodape-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 800;
}

.rodape-icone {
  flex: none;
}

.rodape-texto {
  color: rgba(255, 247, 236, 0.82);
  font-size: 15px;
}

.rodape-texto a {
  color: var(--amarelo);
  text-underline-offset: 3px;
}

/* O contorno de foco global é da cor do fundo do rodapé: aqui ele vira amarelo para aparecer. */
.rodape-texto a:focus-visible {
  outline-color: var(--amarelo);
}

.rodape-pixel {
  color: rgba(255, 247, 236, 0.7);
  font-size: 13px;
}

@media (min-width: 900px) {
  .rodape-dentro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 32px;
    row-gap: 8px;
  }

  .rodape-marca {
    margin: 0 auto 0 0;
  }

  .rodape-pixel {
    flex-basis: 100%;
  }
}

/* ===== Política de privacidade (privacidade.html) ===== */
.politica {
  padding-block: 40px 80px;
}

.politica-dentro {
  max-width: 760px;
}

.politica-titulo {
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: clamp(36px, 7vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.politica-data {
  margin-bottom: 24px;
  color: var(--tinta-suave);
  font-size: 15px;
}

.politica-subtitulo {
  margin: 36px 0 12px;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.politica-texto,
.politica-lista {
  color: var(--tinta-suave);
  font-size: 17px;
  line-height: 1.6;
}

.politica-texto + .politica-texto,
.politica-lista + .politica-texto {
  margin-top: 12px;
}

.politica-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.politica-lista strong,
.politica-numero {
  color: var(--tinta);
  font-weight: 600;
}

.politica-voltar {
  margin-top: 40px;
}

@media (min-width: 900px) {
  .politica {
    padding-block: 64px 112px;
  }

  .politica-subtitulo {
    font-size: 26px;
  }
}

/* Link de texto no meio da frase (consentimento do formulário). */
.form-consentimento a {
  color: var(--tinta);
  text-underline-offset: 3px;
}