/* Landing. Fica fora do design.css porque nenhuma tela de produto usa faixa
   larga, herói, mock de aparelho ou seção de contraste invertido. */

.pular {
  position: absolute; left: -9999px; top: var(--e3);
  background: var(--acao); color: var(--acao-tinta);
  padding: var(--e2) var(--e4); border-radius: var(--r-pill); z-index: 200;
}
.pular:focus { left: var(--e5); }

.faixa { max-width: 1140px; margin: 0 auto; padding-inline: var(--e5); width: 100%; }

/* ------------------------------------------------------------ topo -- */

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  transition: border-color .25s var(--curva), background .25s var(--curva);
}
/* A borda e o fundo mais firme só entram depois que a página rola: no topo o
   risco fica solto sob o logo; no meio da rolagem é o que separa a barra do
   conteúdo que passa por baixo. */
.cabecalho.rolou {
  border-bottom-color: var(--linha);
  background: color-mix(in srgb, var(--fundo) 90%, transparent);
}

.cabecalho-miolo { display: flex; align-items: center; height: 64px; gap: var(--e6); }
.cabecalho .logo-marca { height: 26px; }

.menu { display: flex; align-items: center; gap: var(--e5); margin-right: auto; }
.menu a {
  position: relative; padding: 6px 0;
  font-size: 14px; font-weight: 500; color: var(--tinta-2);
  transition: color .16s var(--curva);
}
.menu a:hover { color: var(--tinta); text-decoration: none; }
/* Sublinhado que cresce do centro: sinal de foco sem deslocar o texto, que é o
   que o `text-decoration` faria ao entrar e sair. */
.menu a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--acento-vivo); border-radius: 2px;
  transition: left .22s var(--curva), right .22s var(--curva);
}
.menu a:hover::after { left: 0; right: 0; }

.cabecalho .btn { height: 36px; padding-inline: var(--e4); border-radius: 9px; }

@media (max-width: 760px) {
  .menu { display: none; }
  .cabecalho-miolo { gap: var(--e4); }
  .cabecalho-miolo .logo-link { margin-right: auto; }
}

/* ----------------------------------------------------------- herói -- */

.chapeu {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 600; color: var(--tinta-3); margin-bottom: var(--e4);
}
.chapeu.claro { color: rgba(255,255,255,.5); }

.display { font-family: var(--display); font-weight: 700; }

.heroi {
  position: relative; overflow: hidden;
  /* Ocupa a janela inteira (menos o cabeçalho) para que a faixa de números
     comece abaixo da dobra. Antes ela aparecia cortada na abertura, e faixa
     pela metade lê como página quebrada, não como "tem mais coisa abaixo". */
  min-height: calc(100dvh - 64px);
  display: flex; align-items: center;
  padding-block: clamp(var(--e5), 3.5vw, var(--e7)) clamp(var(--e6), 5vw, var(--e8));
}
/* Halo atrás do herói. Fica em ::before para não entrar no fluxo e para poder
   sangrar além da faixa sem criar rolagem horizontal. */
.heroi::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 78%;
  background: radial-gradient(58% 60% at 20% 32%,
      color-mix(in srgb, var(--acento) 13%, transparent), transparent 70%);
  pointer-events: none;
}
.heroi-grade {
  position: relative; width: 100%; display: grid; gap: clamp(var(--e6), 5vw, var(--e9));
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  /* Alinhado ao topo, não centralizado: o telefone tem quase 700px e, com
     `center`, ele empurrava o título para o meio da coluna, a página abria
     com todo o conteúdo caído para baixo. */
  align-items: start;
}
@media (max-width: 940px) { .heroi-grade { grid-template-columns: 1fr; } }

.heroi h1 {
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.05; letter-spacing: -.028em; margin-bottom: var(--e5);
}
.heroi h1 em { font-style: normal; color: var(--acento); }

.chamada { font-size: clamp(16px, 1.35vw, 18.5px); color: var(--tinta-2); max-width: 46ch; }
.chamada + .chamada { margin-top: var(--e4); }
.chamada.centralizada { margin-inline: auto; }
.heroi-acoes { margin-top: var(--e6); flex-wrap: wrap; }

/* ------------------------------------------------------- telefone -- */

/* Mock do WhatsApp em iPhone.
 *
 * A tela é montada em **medida real**, 390×844, que é o iPhone lógico, e o
 * conjunto inteiro é reduzido por `transform: scale`. Montar direto no tamanho
 * final seria mais simples e daria errado: o texto do WhatsApp tem 16,5pt, e
 * num aparelho desenhado a 320px ele fica desproporcional. É exatamente isso
 * que denuncia um mock falso, e nenhum ajuste de fonte conserta depois. */

.heroi-visual { position: relative; justify-self: center; width: fit-content; }

.palco-telefone {
  --escala: .78;
  --moldura: 13px;
  position: relative;
  width:  calc((390px + var(--moldura) * 2) * var(--escala));
  height: calc((844px + var(--moldura) * 2) * var(--escala));
}
@media (max-width: 1180px) { .palco-telefone { --escala: .70; } }
@media (max-width: 940px)  { .palco-telefone { --escala: .74; } }
@media (max-width: 420px)  { .palco-telefone { --escala: .60; } }

/* Altura manda mais que largura aqui: num monitor 1440×760 o telefone em .78
   estoura a dobra sozinho e empurra a faixa de números para dentro dela. */
@media (max-height: 900px) { .palco-telefone { --escala: .68; } }
@media (max-height: 800px) { .palco-telefone { --escala: .60; } }
@media (max-height: 700px) { .palco-telefone { --escala: .52; } }
@media (max-height: 620px) { .palco-telefone { --escala: .46; } }

.telefone {
  position: absolute; top: 0; left: 0;
  width:  calc(390px + var(--moldura) * 2);
  height: calc(844px + var(--moldura) * 2);
  padding: var(--moldura);
  transform: scale(var(--escala));
  transform-origin: top left;
  border-radius: 66px;
  background: linear-gradient(148deg, #48505f 0%, #262c38 30%, #12161f 62%, #333b49 100%);
  box-shadow: var(--sombra-3), inset 0 0 0 2px rgba(255,255,255,.14);
}
/* Botões laterais. */
.telefone::before, .telefone::after {
  content: ''; position: absolute; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #545d6e, #262d3a);
}
.telefone::before { left: -3px; top: 168px; height: 96px; }
.telefone::after  { right: -3px; top: 210px; height: 128px; }

.tela {
  position: relative; width: 390px; height: 844px;
  border-radius: 53px; overflow: hidden; background: #ECE5DD;
  display: flex; flex-direction: column;
}
/* Ilha dinâmica, nas medidas do aparelho. */
.tela::before {
  content: ''; position: absolute; z-index: 3;
  top: 11px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; border-radius: 999px; background: #05070c;
}

/* --- barra de status (54pt) --------------------------------------------- */
.wa-status {
  flex: none; height: 54px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 30px 0 34px;
  background: #f6f6f6; color: #000;
}
.wa-hora { font-size: 15.5px; font-weight: 650; letter-spacing: -.2px; }
.wa-sinal { display: inline-flex; align-items: center; gap: 5px; }
.wa-sinal svg:first-child { width: 18px; height: 12px; }
.wa-sinal svg:nth-child(2) { width: 16px; height: 12px; }
.wa-bateria {
  width: 25px; height: 12px; border-radius: 3.5px;
  border: 1.2px solid rgba(0,0,0,.35); position: relative; display: inline-block;
}
.wa-bateria::after {
  content: ''; position: absolute; right: -3px; top: 3.5px;
  width: 1.8px; height: 4px; border-radius: 0 2px 2px 0; background: rgba(0,0,0,.35);
}
.wa-bateria i {
  position: absolute; inset: 1.6px; right: 6px; border-radius: 1.6px; background: #000;
}

/* --- cabeçalho da conversa ---------------------------------------------- */
.wa-topo {
  flex: none; height: 52px; display: flex; align-items: center; gap: 9px;
  padding: 0 14px 0 6px; background: #f6f6f6;
  border-bottom: .5px solid rgba(0,0,0,.14);
}
.wa-voltar { width: 22px; height: 22px; flex: none; color: #00a884; }
.wa-avatar {
  width: 37px; height: 37px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #22C55E, #10B981); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.wa-quem { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; margin-right: auto; }
.wa-quem strong { font-size: 17px; font-weight: 620; letter-spacing: -.2px; color: #000; }
.wa-estado { font-size: 12.5px; color: #667781; }
.wa-acao { width: 23px; height: 23px; flex: none; color: #00a884; }

/* --- conversa ------------------------------------------------------------ */
.wa-conversa {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 10px 10px 6px;
  display: flex; flex-direction: column; gap: 3px;
  /* Ancorado embaixo: uma conversa aberta está sempre rolada até a última
     mensagem. Com o conteúdo colado no topo sobra um vazio no meio da tela e
     o mock deixa de parecer captura de uso real. */
  justify-content: flex-end;
  background-color: #ECE5DD;
  /* Papel de parede do WhatsApp, aproximado. Vai em data: URI porque a CSP é
     `img-src 'self' data:`, arquivo externo seria bloqueado, e um pedido de
     rede a mais no herói não se paga. Traço fino e opacidade baixa: o padrão
     real é textura, não desenho. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108'%3E%3Cg fill='none' stroke='%23d3c9bc' stroke-width='.9' opacity='.55'%3E%3Cpath d='M12 20c3-4 7-4 10 0'/%3E%3Ccircle cx='44' cy='14' r='3.4'/%3E%3Cpath d='M70 10v8M66 14h8'/%3E%3Cpath d='M90 18l4-6 4 6z'/%3E%3Cpath d='M8 52h7v7H8z'/%3E%3Cpath d='M34 46c4 2 4 8 0 10'/%3E%3Ccircle cx='62' cy='52' r='4'/%3E%3Cpath d='M86 48l6 4-6 4z'/%3E%3Cpath d='M16 86l4 5 4-5'/%3E%3Cpath d='M40 82h9'/%3E%3Ccircle cx='68' cy='86' r='3.4'/%3E%3Cpath d='M90 82c4 3 4 6 0 9'/%3E%3C/g%3E%3C/svg%3E");
}
.wa-dia {
  align-self: center; margin: 2px 0 6px;
  background: #E1F2FB; color: #54656F;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  padding: 5px 12px; border-radius: 8px;
}

/* Aviso de criptografia: abre toda conversa no WhatsApp e é um dos elementos
   mais reconhecíveis da tela. Amarelo pálido com cadeado, centralizado. */
.wa-cripto {
  align-self: center; max-width: 88%; margin: 2px 0 4px;
  display: inline-flex; align-items: flex-start; gap: 5px;
  background: #FDF4C9; color: #7A6C4E;
  font-size: 12.5px; line-height: 16px; text-align: center;
  padding: 6px 11px; border-radius: 8px;
}
.wa-cripto svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }

.wa-balao {
  position: relative; max-width: 76%;
  padding: 7px 10px 8px; border-radius: 17px;
  font-size: 16.5px; line-height: 21.5px; color: #111b21;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  overflow-wrap: anywhere;
}
.wa-balao.meu  { align-self: flex-end; background: #DCF8C6; }
.wa-balao.dele { align-self: flex-start; background: #fff; }

/* Rabinho: triângulo no canto superior, com o canto correspondente quadrado.
   É a forma que o aplicativo usa no primeiro balão de cada bloco. */
.wa-balao.com-rabo.meu  { border-top-right-radius: 5px; }
.wa-balao.com-rabo.dele { border-top-left-radius: 5px; }
.wa-balao.com-rabo::after {
  content: ''; position: absolute; top: 0; width: 8px; height: 12px;
}
.wa-balao.com-rabo.meu::after {
  right: -8px; background: #DCF8C6; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.wa-balao.com-rabo.dele::after {
  left: -8px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* A hora acompanha o fim do texto quando cabe na linha, e desce quando não
   cabe, é o comportamento do aplicativo, e `float` entrega isso sem script. */
.wa-meta {
  float: right; margin: 7px -2px -3px 9px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: rgba(11,20,26,.45); white-space: nowrap;
}
.wa-visto { width: 17px; height: 11px; color: #34B7F1; }

/* --- barra de digitação --------------------------------------------------- */
.wa-barra {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 10px; background: #F6F6F6;
  border-top: .5px solid rgba(0,0,0,.10);
}
.wa-mais { width: 26px; height: 26px; flex: none; color: #8696a0; }
.wa-campo {
  flex: 1; background: #fff; border: .5px solid rgba(0,0,0,.12);
  border-radius: 19px; padding: 8px 14px;
  font-size: 16.5px; color: #8696a0; line-height: 21px;
}
.wa-mic { width: 25px; height: 25px; flex: none; color: #8696a0; }

.wa-inicio {
  flex: none; width: 140px; height: 5px; border-radius: 999px;
  background: rgba(0,0,0,.32); margin: 6px auto 9px;
}

/* ---------------------------------------------------------- números -- */

.numeros { border-block: 1px solid var(--linha); background: var(--papel); }
.numeros-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.numeros-grade > div {
  padding: var(--e6) var(--e5); border-left: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: var(--e1);
}
.numeros-grade > div:first-child { border-left: 0; padding-left: 0; }
.numeros-grade strong { font-size: 34px; letter-spacing: -.026em; line-height: 1.05; }
.numeros-grade span { font-size: 13px; color: var(--tinta-2); }
@media (max-width: 760px) {
  .numeros-grade > div { border-left: 0; padding-inline: 0; padding-block: var(--e4); }
}

/* ---------------------------------------------------------- seções -- */

.secao { padding-block: clamp(var(--e8), 8vw, 112px); }
.cabeca-secao { margin-bottom: clamp(var(--e6), 4vw, var(--e8)); }
.titulo-grande { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.14; letter-spacing: -.024em; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.passos li {
  display: grid; grid-template-columns: 76px minmax(0, 300px) minmax(0, 1fr);
  gap: var(--e5); align-items: start;
  padding-block: var(--e6); border-top: 1px solid var(--linha);
}
.passos li:last-child { border-bottom: 1px solid var(--linha); }
.passos .num {
  font-family: var(--mono); font-size: 12px; color: var(--tinta-3);
  letter-spacing: .06em; padding-top: 3px;
}
.passos h3 { font-size: 19px; letter-spacing: -.016em; }
@media (max-width: 760px) {
  .passos li { grid-template-columns: 1fr; gap: var(--e2); }
  .passos .num { padding-top: 0; }
}

/* ------------------------------------------------- seção invertida -- */

/* Contraste invertido: é o argumento central do produto, e merece ser o único
   momento da página que muda de fundo. */
.escura {
  background: var(--n-950); color: var(--n-0);
  padding-block: clamp(var(--e8), 8vw, 112px);
}
.escura h2, .escura h3 { color: #fff; }
.chamada.clara { color: rgba(255,255,255,.66); max-width: 44ch; }
.mini.clara { color: rgba(255,255,255,.58); }
.escura .titulo-grande { margin-bottom: var(--e5); }

.escura-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(var(--e6), 5vw, var(--e8)); align-items: start;
}
@media (max-width: 940px) { .escura-grade { grid-template-columns: 1fr; } }

.modos { display: flex; flex-direction: column; }
.modos article {
  padding-block: var(--e5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: var(--e2);
}
.modos article:first-child { border-top: 0; padding-top: 0; }
.modos h3 { font-size: 16px; }
.modos .tag.ok { background: rgba(75,179,119,.16); color: #7fd6a2; }
.amostra-codigo {
  align-self: flex-start; margin-top: var(--e1);
  border: 1px dashed rgba(255,255,255,.22); border-radius: var(--r2);
  padding: 7px var(--e4); letter-spacing: .22em; font-size: 15px;
  color: #7fd6a2;
}
.nota-final { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--e5); margin-top: var(--e5); }

/* ------------------------------------------------------ mock painel -- */

.janela {
  border: 1px solid var(--linha); border-radius: var(--r4); overflow: hidden;
  background: var(--papel); box-shadow: var(--sombra-2);
}
.janela-topo {
  display: flex; align-items: center; gap: 6px;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha);
  background: var(--papel-2);
}
.janela-topo i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); }
.janela-topo span { margin-left: var(--e3); font-size: 11.5px; color: var(--tinta-3); }
.janela-miolo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e5); }

.mock-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); }
.mock-indicadores > div {
  border: 1px solid var(--linha); border-radius: var(--r3); padding: var(--e4);
  display: flex; flex-direction: column; gap: 2px;
}
.mock-indicadores .rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); font-weight: 600; }
.mock-indicadores strong { font-size: 30px; letter-spacing: -.026em; line-height: 1.15; }
.mock-indicadores .palavra { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; margin-block: 5px; }
.mock-indicadores .sub { font-size: 11.5px; color: var(--tinta-2); }

.mock-tabela { border: 1px solid var(--linha); border-radius: var(--r3); overflow: hidden; }
.mock-linha {
  display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: var(--e3);
  padding: 11px var(--e4); font-size: 13.5px; align-items: center;
  border-top: 1px solid var(--linha);
}
.mock-linha:first-child { border-top: 0; }
.mock-linha.cabecalho-tabela {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-3); font-weight: 600; background: var(--papel-2);
}
.selo-chip {
  justify-self: start; font-size: 11.5px; font-weight: 550;
  background: var(--realce); color: var(--tinta-2);
  padding: 2px 9px; border-radius: var(--r-pill);
}
.selo-chip.pronto { background: var(--ok-fundo); color: var(--ok-tinta); }
@media (max-width: 640px) {
  .mock-linha { grid-template-columns: 1.3fr .8fr; }
  .mock-linha span:nth-child(2), .mock-linha span:nth-child(4) { display: none; }
}

.recursos { margin-top: clamp(var(--e6), 4vw, var(--e8)); }
.recursos article {
  border-top: 1px solid var(--linha); padding-top: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
}

/* ------------------------------------------------------------- cta -- */

.chamada-final {
  border-top: 1px solid var(--linha); background: var(--papel);
  padding-block: clamp(var(--e8), 8vw, 112px);
}
.chamada-final .chamada { margin-block: var(--e4) var(--e6); }

.rodape { border-top: 1px solid var(--linha); }
.rodape .faixa { padding-block: var(--e5); }
@media (max-width: 620px) {
  .rodape .linha { flex-direction: column; align-items: flex-start; gap: var(--e3); }
}

/* Entrada escalonada: cada filho entra logo depois do anterior, em vez de a
 * lista inteira aparecer de uma vez. O índice vem do JS numa variável CSS, que
 * é o que permite o atraso ser proporcional sem uma regra por posição. */
.pronto .revela-filhos > * { opacity: 0; transform: translateY(18px); }
.pronto .revela-filhos.visivel > * {
  opacity: 1; transform: none;
  transition: opacity .62s var(--curva), transform .62s var(--curva);
  transition-delay: calc(var(--i, 0) * 85ms);
}
@media (prefers-reduced-motion: reduce) {
  .pronto .revela-filhos > * { opacity: 1; transform: none; }
}

/* Fio que cresce no topo de cada passo, acompanhando a entrada do item. */
.passos li { position: relative; }
.passos li::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--acento-vivo); transform: scaleX(0); transform-origin: left;
}
.pronto .revela-filhos.visivel > li::before {
  transform: scaleX(1);
  transition: transform .85s var(--curva);
  transition-delay: calc(var(--i, 0) * 85ms + 120ms);
}

/* -------------------------------------------------------- revelação -- */

/* Entrada suave conforme a seção chega à tela. Só decoração: o `.visivel` é
   posto pelo JS, e se o JS não rodar nada disso se aplica, por isso o estado
   inicial mora numa classe que o próprio JS liga (`.pronto` no html), e não no
   CSS solto. Sem isso, JS quebrado deixaria a página invisível. */
.pronto .revela { opacity: 0; transform: translateY(14px); }
.pronto .revela.visivel {
  opacity: 1; transform: none;
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.pronto .revela.atraso-1.visivel { transition-delay: .08s; }
.pronto .revela.atraso-2.visivel { transition-delay: .16s; }
.pronto .revela.atraso-3.visivel { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .pronto .revela { opacity: 1; transform: none; }
}

/* A seção do argumento central é a única da página que inverte o fundo, é o
 * que a marca como o momento diferente. No tema escuro, "fundo preto" deixa de
 * inverter coisa alguma: ela some no resto da página. Então a inversão é
 * relativa ao tema, não absoluta, no escuro ela vira clara. */
@media (prefers-color-scheme: dark) {
  .escura { background: var(--n-50); color: var(--n-950); }
  .escura h2, .escura h3 { color: var(--n-950); }
  .escura .chapeu.claro  { color: rgba(11,11,10,.52); }
  .escura .chamada.clara { color: rgba(11,11,10,.68); }
  .escura .mini.clara    { color: rgba(11,11,10,.60); }
  .escura .modos article,
  .escura .nota-final    { border-color: rgba(11,11,10,.14); }
  .escura .modos .tag.ok { background: rgba(28,122,69,.13); color: var(--verde-600); }
  .escura .amostra-codigo { border-color: rgba(11,11,10,.24); color: var(--verde-600); }
}