/* ============================================================
   Pele das landing pages de produto — /lp/<produto>/
   ============================================================
   Esta folha NÃO é a do site institucional, e essa é a decisão inteira.

   O site é papel: fundo #FAF7F2, textura de fibra, Plus Jakarta Sans, todo
   botão cortado em parelelogramo, metáfora de pasta e gaveta. Ele fala de
   uma EMPRESA. A landing fala de um PRODUTO, e quem chega nela por anúncio
   está decidindo se quer passar a semana dentro daquela tela. Vender
   usabilidade com a casca do institucional é mostrar a embalagem e esconder
   o conteúdo.

   Então aqui a página é a própria aplicação: os tokens, as fontes, os raios,
   as sombras e as cores semânticas saem de `app/src/app/globals.css` do
   Leque Preços, com os mesmos nomes. A pessoa vê a interface antes de
   entrar nela, e quando entrar não vai achar que trocou de empresa.

   O único fio que amarra à Leque é a marca — o leque e o lockup. É de
   propósito: a família de produtos é colorida, a casa é a mesma.

   Serve para as próximas (/lp/leque-atende/, /lp/leque-docs/): trocar o
   bloco `--azul`/`--azul-claro`/`--chip` de `[data-produto]` retinta a
   página inteira sem tocar em mais nada.
   ============================================================ */

:root {
  /* ── Superfícies ────────────────────────────────────────────────── */
  --fundo: #EEF1F6;
  --superficie: #F4F7FB;
  --card: #FFFFFF;
  --navy: #0B1B3A;

  /* ── Texto ──────────────────────────────────────────────────────── */
  --tinta: #0B1B3A;
  /* 0,65 e não 0,6: em 0,6 o texto secundário dá 4,37:1 sobre o fundo da
     aplicação, abaixo do mínimo AA. Não é cor de marca, é opacidade
     derivada — e o público é justamente o de baixa visão. */
  --tinta-suave: rgba(11, 27, 58, .65);
  --tinta-fraca: rgba(11, 27, 58, .48);

  /* ── Marca do produto ───────────────────────────────────────────── */
  --azul: #2C4F7C;
  --azul-claro: #93C5FD;
  --chip: #E7EAF0;
  --borda: rgba(44, 79, 124, .10);
  --borda-forte: rgba(44, 79, 124, .20);

  /* ── Semântica de preço ─────────────────────────────────────────── */
  /* O par claro é o CHIP; o `-texto` é o mesmo tom escurecido até passar em
     AA para quando o valor é LIDO e não só visto. */
  --menor-preco: #1A8F5C;
  --menor-preco-texto: #15794E;
  --menor-preco-bg: #EAFAF1;
  --mediana: #A66A1F;
  --mediana-bg: #F7ECD9;
  --acima-media: #DC2626;
  --acima-media-texto: #B91C1C;
  --acima-media-bg: #FEF2F2;

  /* ── Semântica de estado ────────────────────────────────────────── */
  --aviso: #B45309;
  --aviso-bg: #FEF6E7;
  --concluido: #15794E;
  --concluido-bg: #E9F7F0;

  /* ── Raios: a mesma escala derivada de --radius: 1rem ───────────── */
  --r: 1rem;
  --r-sm: .6rem;
  --r-md: .8rem;
  --r-lg: 1rem;
  --r-xl: 1.4rem;
  --r-2xl: 1.8rem;

  /* ── Sombras: macias, nunca duras — a aplicação flutua, não recorta ─ */
  --sombra-sm: 0 1px 2px rgba(11, 27, 58, .04), 0 1px 3px rgba(11, 27, 58, .05);
  --sombra: 0 4px 20px -2px rgba(11, 27, 58, .06), 0 0 3px rgba(11, 27, 58, .03);
  --sombra-lg: 0 18px 40px -12px rgba(11, 27, 58, .18), 0 4px 12px rgba(11, 27, 58, .06);
  --sombra-xl: 0 40px 80px -24px rgba(11, 27, 58, .30), 0 12px 28px -8px rgba(11, 27, 58, .12);

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Inter Tight", "Inter", system-ui, sans-serif;

  --cerca: 1180px;
}

/* Retinte por produto: só isto muda de uma landing para a outra. */
[data-produto="precos"] { --azul: #2C4F7C; --azul-claro: #93C5FD; --chip: #E7EAF0; }
[data-produto="atende"] { --azul: #E36200; --azul-claro: #F2B485; --chip: #FDEEE0; }
[data-produto="docs"]   { --azul: #006075; --azul-claro: #85B3BD; --chip: #E1EEF0; }
[data-produto="dados"]  { --azul: #442074; --azul-claro: #A594BC; --chip: #EDE7F2; }
[data-produto="fluxos"] { --azul: #006F38; --azul-claro: #85BA9F; --chip: #E1F0E8; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  /* Mesmas features tipográficas da aplicação: o "a" e o "g" de dois andares
     da Inter, que é o desenho que ela usa nas telas. */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* Números sempre tabulares: valor que existe para ser comparado não pode
   dançar de largura entre uma linha e a outra. */
.num { font-family: var(--titulo); font-variant-numeric: tabular-nums; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.cerca { max-width: var(--cerca); margin-inline: auto; padding-inline: 28px; }

/* ============================================================
   Entrada dos blocos — o mesmo `surge` da aplicação
   ============================================================
   Entrar numa tela é um evento ÚNICO, com hora para acabar; o que a
   aplicação não admite é movimento CONTÍNUO ao lado de quem confere preço.
   Aqui vale a mesma regra, e por isso nada nesta página fica animando em
   laço, exceto o leque da marca — que é a marca, não conteúdo. */
.js .surge { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.js .surge.dentro { opacity: 1; transform: none; }
.js .escada > * { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1); }
.js .escada.dentro > * { opacity: 1; transform: none; }
.js .escada.dentro > *:nth-child(2) { transition-delay: .06s; }
.js .escada.dentro > *:nth-child(3) { transition-delay: .12s; }
.js .escada.dentro > *:nth-child(4) { transition-delay: .18s; }
.js .escada.dentro > *:nth-child(5) { transition-delay: .24s; }
.js .escada.dentro > *:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .surge, .js .escada > * { opacity: 1; transform: none; transition: none; }
}

/* Entrada do hero. Não usa `.surge` (que espera o bloco cruzar a dobra):
   o hero JÁ está na dobra quando a página abre, e esperar o observador
   deixaria o primeiro quadro com o título invisível. Aqui é animação com
   atraso inline, peça por peça — o mesmo escalonamento do painel de login. */
.entra { animation: entra .85s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
/* A janela do produto entra de um pouco mais longe e de 96%: ela é a peça
   grande da cena, e entrar no mesmo tempo do texto faria as duas brigarem. */
.entra--janela { animation: entra-janela 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes entra-janela {
  from { opacity: 0; transform: translateY(34px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entra, .entra--janela { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   O leque
   ============================================================
   As sete lâminas giram em torno do MESMO pivô (0,0) do viewBox — é isso
   que permite animar por CSS sem tocar no `d` nem no `rotate()` de repouso.
   `transform-box: view-box` ancora o pivô ao espaço do viewBox em vez do
   bounding box do path; sem ele a lâmina treme em torno do próprio centro
   em vez de abrir e fechar como um leque. */
.lamina {
  transform-box: view-box;
  transform-origin: 0 0;
  animation-name: abre, brisa;
  /* 1,4s e 9s: os mesmos tempos da tela de entrada da aplicacao. A brisa
     entra no milissegundo em que a abertura daquela lamina termina — os
     atrasos vem inline, por lamina. Sobrepor as duas faz a lamina trocar de
     animacao no meio do caminho e voltar atras. */
  animation-duration: 1.4s, 9s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}
@keyframes abre {
  from { transform: rotate(-46deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}
/* Começa e termina em 0deg — o mesmo ângulo em que `abre` para. Se o ciclo
   começasse no extremo, a lâmina saltaria no instante da troca. */
@keyframes brisa {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2.5deg); }
  75% { transform: rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lamina { animation: none; opacity: 1; }
}

/* ── Lockup LEQUE / PREÇOS ────────────────────────────────────────────
   O azul de "PREÇOS" não pode ser o mesmo hex nos dois fundos: o #2C4F7C
   quase some sobre o navy (~2:1). A mesma família de azul em luminâncias
   opostas resolve — `--azul-claro` no escuro, `--azul` no claro. */
.lockup { font-family: var(--titulo); font-weight: 800; line-height: 1.02; letter-spacing: .05em; font-size: 15px; }
.lockup b { display: block; font-weight: 800; color: var(--tinta); }
.lockup i { display: block; font-style: normal; color: var(--azul); margin-top: 1px; }
.lockup--escuro b { color: #fff; }
.lockup--escuro i { color: var(--azul-claro); }

/* ── A superfície da marca ────────────────────────────────────────────
   Degradê azul-da-marca → navy com o leque sangrando pelo canto. Vale a
   regra que ela tem dentro da aplicação: UMA por tela. Marca a ação que
   justifica a página existir — aqui, o pedido de reunião. Se virar
   decoração e aparecer três vezes, deixa de ser destaque. */
.marca-fundo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, var(--azul), var(--navy));
  color: #fff;
}
.marca-fundo > * { position: relative; z-index: 1; }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, box-shadow .16s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Reflexo que atravessa o botão principal no hover. Só no primário: se todo
   botão brilhasse, nenhum seria o principal. Roda uma vez por passada do
   mouse, não em laço. */
.btn--primario { position: relative; overflow: hidden; }
.btn--primario > * { position: relative; z-index: 1; }
.btn--primario::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.btn--primario:hover::after { animation: reflexo .75s ease-out; }
@keyframes reflexo {
  from { left: -60%; opacity: 1; }
  to { left: 130%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primario:hover::after { animation: none; }
}

.btn--primario { background: var(--azul); color: #fff; box-shadow: var(--sombra-sm); }
.btn--primario:hover { background: color-mix(in srgb, var(--azul) 88%, #000); }

.btn--contorno { background: var(--card); color: var(--azul); border-color: var(--borda-forte); }
.btn--contorno:hover { background: var(--superficie); }
/* Sobre o palco escuro o botao secundario vira vidro: um retangulo branco
   solido ao lado do primario roubaria a hierarquia inteira. */
.palco .btn--contorno { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .20); color: #fff; }
.palco .btn--contorno:hover { background: rgba(255, 255, 255, .18); }
.palco .btn--primario { background: #fff; color: var(--navy); }
.palco .btn--primario:hover { background: var(--azul-claro); }

.btn--branco { background: #fff; color: var(--navy); box-shadow: var(--sombra-lg); }
.btn--branco:hover { background: var(--azul-claro); }

.btn--vidro { background: rgba(255, 255, 255, .14); color: #fff; }
.btn--vidro:hover { background: rgba(255, 255, 255, .24); }

.btn--largo { width: 100%; white-space: normal; }
.btn--pequeno { padding: 10px 16px; font-size: 14.5px; }

/* ============================================================
   Topo
   ============================================================
   Fixo porque a página é longa e a decisão de agendar não acontece no fim
   da leitura — acontece no parágrafo em que a pessoa se reconhece. */
/* Duas peles. Sobre o palco escuro do hero a barra é transparente — pintá-la
   de claro ali cortaria o degradê com uma faixa e a página começaria com uma
   emenda. Passado o hero, ela vira o vidro claro do resto da página. A troca
   é decidida por um sentinela de 1px no fim do palco — ver o script, que
   explica por que ali não cabe um `IntersectionObserver`. */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.topo--fixado {
  background: rgba(238, 241, 246, .82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--borda);
}
/* Ainda sobre o palco, mas a página já rolou: vidro escuro no tom do fundo
   do palco, para o texto do hero não aparecer atrás da barra. */
.topo--sobre-escuro.topo--rolado {
  background: rgba(11, 27, 58, .82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.topo--sobre-escuro .lockup b { color: #fff; }
.topo--sobre-escuro .lockup i { color: var(--azul-claro); }
.topo--sobre-escuro .topo__nav a { color: rgba(255, 255, 255, .72); }
.topo--sobre-escuro .topo__nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topo--sobre-escuro .btn--primario { background: rgba(255, 255, 255, .14); box-shadow: none; }
.topo--sobre-escuro .btn--primario:hover { background: rgba(255, 255, 255, .24); }

/* 1px, e nao 0: um elemento de altura zero nao produz mudanca de limiar no
   IntersectionObserver — o observador dispara a primeira vez e nunca mais, e
   a barra ficava presa na pele escura pela pagina inteira. */
#sentinela { height: 1px; }
.topo__linha { display: flex; align-items: center; gap: 24px; height: 68px; }
.topo__marca { display: flex; align-items: center; gap: 13px; }

/* A marca não mora numa caixinha branca. O quadrado com sombra é o
   tratamento que ela recebe DENTRO da aplicação, onde precisa se destacar da
   coluna navy sólida; aqui ele só embrulhava o leque num cartão sem função e
   fazia a marca parecer um favicon colado.

   No lugar, o próprio leque com luz atrás: um halo radial da família de azul
   do degradê da marca, que dá volume à peça sem desenhar borda nenhuma. É a
   mesma ideia das "correntes de ar" do painel de login — luz, não moldura. */
.topo__selo {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}
.topo__selo::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 55%, rgba(66, 118, 193, .38), rgba(66, 118, 193, 0) 68%);
  transition: opacity .3s ease;
}
.topo__selo svg { position: relative; }
.marca-no-escuro { display: none; color: #fff; }
.topo--sobre-escuro .marca-no-claro { display: none; }
.topo--sobre-escuro .marca-no-escuro { display: block; }
/* Sobre o navy do hero o halo some (o fundo já é escuro) e a marca ganha
   contorno claro em vez de luz. */
.topo--sobre-escuro .topo__selo::before { opacity: 0; }
.topo__nav { display: flex; gap: 4px; margin-left: auto; }
.topo__nav a { padding: 8px 13px; border-radius: var(--r-md); font-size: 15px; color: var(--tinta-suave); font-weight: 500; }
.topo__nav a:hover { background: var(--chip); color: var(--azul); }
.topo__acao { display: flex; gap: 10px; }
.topo__nav + .topo__acao { margin-left: 0; }

/* ============================================================
   O palco escuro
   ============================================================
   É o painel de entrada da aplicação virado hero: mesmo navy, mesmas
   "correntes de ar", mesmo leque em escala de ilustração sangrando pelo
   canto. Quem chega pelo anúncio vê, antes de qualquer texto, exatamente a
   primeira tela que vai encontrar depois de assinar.

   A regra de "uma superfície de marca por tela" que vem da aplicação vira,
   aqui, DUAS e só duas: a promessa (o hero) e o pedido (o formulário) — a
   abertura e o fecho da mesma frase. Tudo entre as duas é a superfície clara
   do produto, que é onde o produto de fato acontece. Uma terceira faria as
   três deixarem de significar qualquer coisa.
   ============================================================ */
.palco {
  position: relative;
  overflow: hidden;
  margin-top: -68px;
  padding-top: 68px;
  background: linear-gradient(160deg, #123156 0%, var(--navy) 55%, #081428 100%);
  color: #fff;
}

/* Correntes de ar: manchas de luz que atravessam o painel devagar. Anima-se
   APENAS `transform` — `filter: blur()` é caro de rasterizar, e se a forma
   também mudasse de tamanho o navegador refaria o borrão a cada quadro.
   Deslocá-las sem escalar deixa a camada pronta uma vez e o resto vira
   composição, que é o que máquina de repartição aguenta. */
.correntes { position: absolute; inset: 0; pointer-events: none; }
.corrente {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  will-change: transform;
  animation: deriva 24s ease-in-out infinite alternate;
}
.corrente--a { width: 560px; height: 560px; top: -180px; left: -120px; background: #2c66ba; opacity: .42; }
.corrente--b { width: 460px; height: 460px; top: 28%; right: -120px; background: #1656b2; opacity: .36; animation-delay: -7s; animation-duration: 30s; }
.corrente--c { width: 400px; height: 400px; bottom: -160px; left: 26%; background: #85a6d7; opacity: .20; animation-delay: -14s; animation-duration: 36s; }
@keyframes deriva {
  from { transform: translate3d(-6%, 4%, 0); }
  to { transform: translate3d(8%, -6%, 0); }
}

/* O leque em escala de ilustração, sangrando pelo canto — a mesma peça do
   painel de login, no mesmo papel: ilustração, não logotipo repetido. */
.palco__leque { position: absolute; right: -70px; bottom: -190px; color: #fff; opacity: .16; pointer-events: none; }

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

/* ============================================================
   Hero
   ============================================================ */
.heroi { position: relative; padding: 62px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 56px; align-items: center; }
.heroi__titulo { font-size: 54px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 20px; }
.heroi__titulo em { font-style: normal; color: var(--azul-claro); }
/* #AFC3E4 e #8FA6CC: os dois tons de texto do painel de login, e não um
   branco rebaixado por opacidade — a família de azul mantém a leitura presa
   ao degradê do fundo em vez de virar cinza sobre azul. */
.heroi__texto { font-size: 18px; line-height: 1.6; color: #AFC3E4; max-width: 520px; }
.heroi__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 20px; }
.heroi__nota { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #8FA6CC; }
.heroi__nota svg { flex: none; color: var(--azul-claro); }

/* Chip de vidro: o mesmo `bg-white/10` + borda `white/10` dos argumentos do
   painel de login, com o ícone no azul-claro da marca. */
.selo-lei {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.selo-lei svg { color: var(--azul-claro); }

/* ── A composição do hero: a foto atrás, a tela na frente ──────────────
   A foto sozinha vende empresa; a tela sozinha vende funcionalidade. O que
   vende USO é a tela em cima da pessoa que a usa — e por isso a janela do
   produto sai do quadro da foto por baixo e pela esquerda, em vez de
   ficarem lado a lado como dois cartões. */
/* A folga de baixo é onde a janela do produto ultrapassa o quadro da foto.
   Com a foto real em mãos ficou claro que ela precisa descer: o queixo da
   servidora está a ~38% da altura, e a janela começando a 30% cortava a boca.
   Agora ela pousa a ~43%, em cima da costa do monitor que a própria foto
   traz — o que faz a tela do site parecer o que ela está olhando. */
.heroi__palco { position: relative; padding-bottom: 46px; }
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--chip);
  box-shadow: var(--sombra-lg);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
/* Retrato, nao paisagem, e recuado para a direita: e o formato que deixa
   a metade de baixo do quadro livre para a janela do produto pousar sem
   cobrir o rosto de quem esta na foto. */
.heroi__foto { aspect-ratio: 4 / 5; margin-left: 16%; }
/* Dois véus, e não um. O de baixo é onde a janela do produto pousa sem
   competir com o rosto de quem está na imagem. O `multiply` por cima é o que
   prende a foto ao degradê do palco: sem ele, qualquer foto entra na cena
   com a própria temperatura de cor e vira um adesivo colado no navy. */
.heroi__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 27, 58, .62), rgba(11, 27, 58, 0) 52%);
}
/* `screen`, e não `multiply`. O véu de multiplicar foi escrito quando a foto
   ainda era um placeholder claro; a foto real já chega escura e fria, e
   multiplicar por cima dela fechava o rosto — a peça mais cara da imagem —
   para ganhar uma integração de cor que ela já tinha. Este aqui faz o
   contrário: devolve um fio de luz azul da própria família do palco, sem
   tocar nos meios-tons da pele. */
.heroi__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(150deg, rgba(44, 102, 186, .22), rgba(11, 27, 58, 0) 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.heroi__foto { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); }
.heroi__palco > .heroi__janela {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76%;
  z-index: 2;
}
/* Halo: a janela clara sobre o navy precisa de uma transição, senão ela
   parece recortada e colada. O brilho é da mesma família de azul do fundo,
   então lê como luz da própria cena e não como sombra branca. */
.heroi__janela::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(133, 166, 215, .30), rgba(133, 166, 215, 0) 72%);
  filter: blur(24px);
  pointer-events: none;
}

/* ============================================================
   A janela da aplicação
   ============================================================
   Não é screenshot: é a própria interface remontada com os tokens do
   produto. Screenshot desatualiza e borra; isto acompanha o design system
   e continua nítido em tela retina. */
.janela {
  position: relative;
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-xl);
  overflow: hidden;
}
/* Fio de luz na borda de cima: é o que faz um retângulo branco parecer uma
   superfície com volume em vez de um recorte. Um pixel, e some no meio. */
.janela::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 22%, rgba(255, 255, 255, .9) 78%, transparent);
  pointer-events: none;
  z-index: 3;
}
.janela__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.janela__ponto { width: 9px; height: 9px; border-radius: 999px; background: var(--chip); }
.janela__url {
  margin-left: 10px;
  padding: 3px 10px;
  background: var(--card);
  border-radius: 999px;
  font-size: 11px;
  color: var(--tinta-fraca);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.janela__corpo { padding: 16px; }

/* ── A casca completa: coluna navy + barra de topo + conteúdo ──────── */
.app { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 320px; }
.heroi__janela .app { grid-template-columns: 132px minmax(0, 1fr); min-height: 0; }
.heroi__janela .app__conteudo { padding: 13px; gap: 9px; }
.heroi__janela .app__item { font-size: 11.5px; padding: 7px 9px; }
.heroi__janela .app__marca { padding: 2px 2px 14px; }
/* Mesmo degrade da coluna de navegacao da aplicacao. Nao usa a classe
   `.marca-fundo` de proposito: aquela vale a regra de UMA por pagina, e
   esta aqui nao e uma superficie da PAGINA — e um pixel do produto sendo
   retratado dentro de uma janela. */
.app__coluna { position: relative; overflow: hidden; padding: 14px 12px; background: linear-gradient(to bottom right, var(--azul), var(--navy)); }
.app__leque { position: absolute; left: -34px; bottom: -54px; color: #fff; opacity: .10; pointer-events: none; }
.app__marca { display: flex; align-items: center; gap: 10px; padding: 4px 4px 18px; }
.app__marca-selo { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border-radius: 11px; flex: none; }
.app__menu { display: grid; gap: 3px; }
.app__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
}
.app__item svg { flex: none; opacity: .85; }
/* Item ativo: lâmina azul-clara à esquerda — o mesmo token do "PREÇOS" do
   lockup, os dois mudam juntos porque saem da mesma variável. */
.app__item--ativo { position: relative; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); color: #fff; font-weight: 600; }
.app__item--ativo::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 999px; background: var(--azul-claro); }

.app__painel { background: var(--fundo); display: flex; flex-direction: column; }
.app__topo { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--card); border-bottom: 1px solid var(--borda); }
.app__titulo { font-family: var(--titulo); font-size: 14px; font-weight: 700; }
.app__usuario { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tinta-suave); }
.app__avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--chip); color: var(--azul); font-size: 10.5px; font-weight: 700; }
.app__conteudo { padding: 16px; display: grid; gap: 12px; align-content: start; }

/* ── Peças da interface ───────────────────────────────────────────── */
.ui-busca { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-md); font-size: 13px; font-weight: 500; box-shadow: var(--sombra-sm); }
.ui-busca svg { flex: none; color: var(--tinta-fraca); }
.ui-busca span { color: var(--tinta); }
.ui-busca b { margin-left: auto; padding: 5px 11px; background: var(--azul); color: #fff; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; }

.ui-resumo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--tinta-suave); }
.ui-resumo strong { font-family: var(--titulo); font-size: 15px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ui-resumo em { font-style: normal; color: var(--borda-forte); }

.ui-lista { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-md); overflow: hidden; }
.ui-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--borda); }
.ui-linha:last-child { border-bottom: none; }
.ui-linha__desc { font-size: 12px; font-weight: 600; }
.ui-linha__meta { font-size: 10.5px; color: var(--tinta-suave); margin-top: 1px; }
.ui-linha__valor { text-align: right; flex: none; }
.ui-linha__preco { font-family: var(--titulo); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.marca-preco { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.marca-preco--menor { background: var(--menor-preco-bg); color: var(--menor-preco-texto); }
.marca-preco--mediana { background: var(--mediana-bg); color: var(--mediana); }
.marca-preco--acima { background: var(--acima-media-bg); color: var(--acima-media-texto); }
.marca-preco--concluido { background: var(--concluido-bg); color: var(--concluido); }
.marca-preco--aviso { background: var(--aviso-bg); color: var(--aviso); }

/* KPIs: quatro números do mesmo tamanho e da mesma cor lado a lado não têm
   por onde o olho começar. Um deles carrega a promessa do produto — quanto
   o órgão deixou de gastar — e é esse que ganha peso e cor. */
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-kpi { padding: 12px 13px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-md); }
.ui-kpi span { display: block; font-size: 10.5px; color: var(--tinta-suave); font-weight: 500; }
/* O valor nunca quebra: "R$ 86.400" em duas linhas desalinha o cartao de
   destaque em relacao aos outros dois e destroi justamente a comparacao que
   a fileira existe para permitir. */
.ui-kpi strong { display: block; margin-top: 3px; font-family: var(--titulo); font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-kpi--destaque { background: var(--concluido-bg); border-color: rgba(21, 121, 78, .25); }
.ui-kpi--destaque strong { color: var(--menor-preco-texto); }

.ui-barras { display: flex; align-items: flex-end; gap: 7px; height: 66px; padding: 0 2px; }
.ui-barras i { flex: 1; border-radius: 4px 4px 0 0; background: var(--azul); opacity: .28; }
.ui-barras i:nth-child(4) { opacity: 1; }

.ui-doc { display: grid; gap: 7px; padding: 13px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-md); }
.ui-doc i { display: block; height: 7px; border-radius: 999px; background: var(--chip); }
.ui-doc i:nth-child(1) { width: 58%; height: 10px; background: var(--azul); opacity: .8; }
.ui-doc i:nth-child(3) { width: 88%; }
.ui-doc i:nth-child(4) { width: 72%; }
.ui-doc i:nth-child(5) { width: 92%; }
.ui-doc i:nth-child(6) { width: 46%; }

/* ============================================================
   Faixa de fontes
   ============================================================
   O lugar da prova social enquanto não há cliente para citar: a
   credibilidade vem de ONDE o preço sai, não de quem já usa. */
/* Mora no pé do palco escuro, em vidro: é a última coisa que a pessoa lê
   antes de a página clarear, e o argumento dela — "de onde vem o preço" — é
   justamente o que sustenta a promessa do título logo acima. */
.fontes { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; padding: 18px 24px; margin-bottom: 58px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg); backdrop-filter: blur(8px); }
.fontes__rotulo { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--azul-claro); }
.fontes ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fontes li { padding: 6px 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #DDE7F6; transition: background .18s ease, transform .18s ease; }
.fontes li:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }

/* ============================================================
   Seções
   ============================================================ */
.secao { padding: 78px 0; }
.secao--claro { background: var(--card); }
.olho { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--azul); margin-bottom: 13px; }
.olho::before { content: ""; width: 26px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); }
.secao__titulo { font-size: 38px; line-height: 1.12; font-weight: 800; max-width: 20ch; }
.secao__titulo--largo { max-width: 26ch; }
.secao__linha { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--tinta-suave); max-width: 62ch; }

/* ── Tela grande com legendas apontando para a interface ──────────────
   É a seção que vende UI/UX: em vez de afirmar "é fácil de usar", ela
   mostra a tela e nomeia o que está acontecendo dentro dela. */
.vitrine { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 44px; align-items: center; margin-top: 42px; }
.legendas { display: grid; gap: 22px; }
.legenda { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.legenda__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--chip); color: var(--azul); font-family: var(--titulo); font-weight: 700; font-size: 15px; }
.legenda h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.legenda p { font-size: 14.5px; line-height: 1.55; color: var(--tinta-suave); }

/* ── Realce cruzado ───────────────────────────────────────────────────
   A legenda diz "menor, mediana e maior no topo" — e o olho tem que sair da
   frase e achar aquilo na tela ao lado sozinho. Aqui a frase acende a peça:
   passar o mouse (ou chegar pelo teclado) numa legenda apaga o resto da
   interface e destaca exatamente o pedaço de que ela fala.

   É o argumento da seção sendo demonstrado em vez de afirmado — e, como é
   disparado por intenção do visitante e nunca sozinho, não vira movimento
   ambiente. */
.legenda { cursor: default; border-radius: var(--r-md); transition: background .2s ease; }
.legenda__n { transition: background .2s ease, color .2s ease, transform .2s ease; }
.legenda:hover .legenda__n,
.legenda:focus-within .legenda__n { background: var(--azul); color: #fff; transform: scale(1.06); }

/* Enquanto uma legenda está ativa, a tela inteira recua um passo... */
.vitrine.realcando .janela .ui-busca,
.vitrine.realcando .janela .ui-resumo,
.vitrine.realcando .janela .ui-lista,
.vitrine.realcando .janela .app__coluna,
.vitrine.realcando .janela .app__topo { opacity: .38; transition: opacity .22s ease; }

/* ...menos a peça de que a legenda fala. O anel usa o azul-claro da marca,
   o mesmo da lâmina do item ativo do menu: dentro do produto essa cor já
   significa "é aqui que você está". */
.vitrine .realce {
  opacity: 1 !important;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--azul-claro), 0 8px 24px -8px rgba(44, 79, 124, .45);
  border-radius: var(--r-sm);
  transition: box-shadow .22s ease, opacity .22s ease;
}
.vitrine .ui-lista.realce, .vitrine .ui-busca.realce { border-radius: var(--r-md); }
/* Chips e metadados: o anel encosta demais num alvo de 10px, então eles
   ganham respiro antes do contorno. */
.vitrine .marca-preco.realce, .vitrine .ui-linha__meta.realce { box-shadow: 0 0 0 3px rgba(147, 197, 253, .55); }

@media (prefers-reduced-motion: reduce) {
  .legenda:hover .legenda__n, .legenda:focus-within .legenda__n { transform: none; }
}

/* ── Pilares de usabilidade ───────────────────────────────────────── */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.pilar { padding: 26px 24px 28px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); transition: box-shadow .18s ease, transform .18s ease; }
/* Fio da marca acendendo na borda de cima: hover que muda só sombra e
   posição não diz QUAL cartão, diz apenas "algo se mexeu". */
.pilar::before, .cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  opacity: 0;
  transition: opacity .22s ease;
}
.pilar, .cartao { position: relative; overflow: hidden; }
.pilar:hover::before, .cartao:hover::before { opacity: 1; }
.pilar:hover { box-shadow: var(--sombra-lg); transform: translateY(-2px); }
.cartao { transition: box-shadow .2s ease, transform .2s ease; }
.cartao:hover { box-shadow: var(--sombra-lg); transform: translateY(-2px); }

/* O ícone acende junto: o chip claro vira o azul da marca. */
.pilar__ico, .cartao__ico { transition: background .22s ease, color .22s ease; }
.pilar:hover .pilar__ico, .cartao:hover .cartao__ico { background: var(--azul); color: #fff; }
.pilar__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 15px; border-radius: var(--r-md); background: var(--chip); color: var(--azul); }
.pilar h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; }
.pilar p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }

/* ── Bloco com foto ao lado ───────────────────────────────────────── */
.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.dupla--invertida .dupla__foto { order: -1; }
/* Cada bloco recorta na proporção NATIVA da sua foto, em vez de os dois
   usarem a mesma: `object-fit: cover` num quadro de proporção diferente corta
   pelas laterais, e nas duas imagens é justamente lá que está o contexto — o
   monitor apontado numa, o notebook e o caderno na outra. */
.dupla__foto { aspect-ratio: 4 / 3; }
.dupla--invertida .dupla__foto { aspect-ratio: 3 / 2; }
.lista-marcada { display: grid; gap: 14px; margin-top: 26px; }
.lista-marcada li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.lista-marcada svg { margin-top: 4px; color: var(--menor-preco); }

/* ── Antes / depois ───────────────────────────────────────────────── */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.coluna { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--borda); }
.coluna--hoje { background: var(--superficie); }
.coluna--leque { background: var(--card); box-shadow: var(--sombra); }
.coluna h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 18px; }
.coluna ul { display: grid; gap: 13px; }
.coluna li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--tinta-suave); }
.coluna li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 999px; }
/* O sinal do "hoje" é o mesmo vermelho de "acima da média" da aplicação, e
   o do "com o Leque" é o mesmo verde de "menor preço": a pessoa vai
   reencontrar exatamente esse par dentro do produto. */
.coluna--hoje li::before { background: var(--acima-media-bg); box-shadow: inset 0 0 0 1.5px var(--acima-media); }
.coluna--leque li::before { background: var(--menor-preco-bg); box-shadow: inset 0 0 0 1.5px var(--menor-preco); }
.coluna--leque li strong { color: var(--tinta); font-weight: 700; }

/* ── Passos ───────────────────────────────────────────────────────── */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.passo { display: flex; flex-direction: column; padding: 20px 20px 22px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); }
.passo__n { font-family: var(--titulo); font-size: 12.5px; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.passo h3 { font-size: 16.5px; font-weight: 700; margin: 10px 0 7px; }
.passo p { font-size: 14px; line-height: 1.55; color: var(--tinta-suave); }
.passo__tela { margin-top: 16px; padding: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-md); display: grid; gap: 6px; }

/* ── Grade de módulos / conformidade ──────────────────────────────── */
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.cartao { padding: 24px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); }
.cartao__ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--chip); color: var(--azul); }
.cartao h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.cartao p { font-size: 14px; line-height: 1.55; color: var(--tinta-suave); }

/* ── Números do mercado ───────────────────────────────────────────── */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.numero { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-sm); }
/* Degradê no próprio número, na família do leque. É o único lugar da página
   em que a cor da marca aparece como preenchimento de TEXTO — e são três
   números que existem para ser lidos como uma série. */
.numero strong {
  font-family: var(--titulo);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--azul), #4276c1 55%, #85a6d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.numero p { font-size: 14.5px; line-height: 1.55; color: var(--tinta-suave); }
.numero cite { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--borda-forte); font-style: normal; font-size: 12.5px; color: var(--tinta-fraca); }

/* ── Dúvidas ──────────────────────────────────────────────────────── */
/* <details> nativo: abre sem JavaScript, é indexável pelo buscador e o
   leitor de tela já anuncia aberto/fechado. Objeção que só existe dentro de
   um acordeão em JS é objeção que o Google não lê. */
.duvidas { display: grid; gap: 10px; margin-top: 38px; max-width: 880px; }
.duvidas details { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 2px 24px; box-shadow: var(--sombra-sm); }
.duvidas details[open] { box-shadow: var(--sombra); }
.duvidas summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; font-family: var(--titulo); font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--azul); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.duvidas details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.duvidas p { padding-bottom: 14px; font-size: 15px; line-height: 1.65; color: var(--tinta-suave); max-width: 70ch; }
.duvidas p:last-of-type { padding-bottom: 20px; }

/* ============================================================
   O pedido
   ============================================================ */
.pedido > * { min-width: 0; }
.formulario > * { min-width: 0; }
.pedido { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 52px; border-radius: var(--r-2xl); }
.pedido__titulo { font-size: 36px; line-height: 1.1; font-weight: 800; margin-bottom: 16px; }
.pedido__linha { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.pedido__itens { display: grid; gap: 12px; margin-top: 26px; }
.pedido__itens li { display: grid; grid-template-columns: 32px 1fr; gap: 13px; align-items: center; font-size: 15px; color: rgba(255, 255, 255, .90); }
/* Ícone dentro de chip de vidro: o mesmo `w-9 h-9 rounded-xl bg-white/10
   border-white/10` dos três argumentos do painel de login. */
.pedido__itens svg { box-sizing: content-box; padding: 7px; width: 16px; height: 16px; border-radius: 10px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .12); color: var(--azul-claro); }
/* Marca d agua atras de tudo (z-index 0 vence o `.marca-fundo > *`, que
   poe todo filho em 1): a direita, o cartao branco do formulario cobria o
   leque e sobrava so uma lasca no canto, que lia como defeito de recorte. */
.pedido__leque { position: absolute; left: -60px; bottom: -140px; z-index: 0; color: #fff; opacity: .10; pointer-events: none; }

/* O cartão branco dentro do degradê. É onde a pessoa escreve — e escrever
   pede a superfície clara da própria aplicação, não o navy. */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 28px; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sombra-xl); }
.formulario label { display: block; }
.formulario label span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--tinta-suave); }
.formulario input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  color: var(--tinta);
  background: var(--card);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.formulario input::placeholder { color: var(--tinta-fraca); }
.formulario input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }
.formulario input:invalid:not(:placeholder-shown) { border-color: var(--acima-media); }
/* O botão de envio, o aviso e a legenda atravessam as duas colunas: o botão
   é UMA ação, não um campo, e meio botão ao lado de meio vazio lê como se
   faltasse algo do lado direito. */
.inteiro, .formulario > button, .aviso, .legenda-form, .enviado { grid-column: 1 / -1; }
.legenda-form { font-size: 12.5px; line-height: 1.45; color: var(--tinta-fraca); }
.aviso { min-height: 1px; font-size: 14.5px; font-weight: 500; }
.aviso--erro { color: var(--acima-media-texto); }

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

/* Confirmação: o formulário some e entra o próximo passo — escolher o
   horário. Marcar reunião em dois momentos converte melhor do que pedir
   dados e hora de uma vez, e o segundo passo só aparece quando o primeiro
   já está garantido. */
.enviado { display: none; text-align: center; padding: 14px 4px 8px; }
.formulario.pronto label,
.formulario.pronto .legenda-form,
.formulario.pronto .aviso,
.formulario.pronto > button { display: none; }
.formulario.pronto .enviado { display: block; }
.enviado__selo { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 999px; background: var(--concluido-bg); color: var(--concluido); }
.enviado h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.enviado p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); margin-bottom: 20px; }

/* ============================================================
   Rodapé
   ============================================================ */
.rodape { padding: 34px 0; border-top: 1px solid var(--borda); }
.rodape__linha { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-suave); }
.rodape nav { display: flex; gap: 20px; margin-left: auto; }
.rodape nav a:hover { color: var(--azul); }

/* ============================================================
   WhatsApp e barra do celular
   ============================================================
   Canal paralelo, fora da hierarquia: quem escolhe WhatsApp normalmente não
   quer preencher formulário nenhum, quer perguntar uma coisa. */
.zap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 19px;
  background: #128C7E;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: var(--sombra-lg);
  transition: transform .16s ease, background .16s ease;
}
.zap:hover { transform: translateY(-2px); background: #0f7568; }

.barra {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(238, 241, 246, .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda);
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1080px) {
  .heroi { grid-template-columns: 1fr; gap: 42px; padding: 42px 0 56px; }
  .heroi__titulo { font-size: 44px; }
  .heroi__foto { margin-left: 0; }
  .topo__nav { display: none; }
  .topo__acao { margin-left: auto; }
  .vitrine, .dupla { grid-template-columns: 1fr; gap: 34px; }
  .dupla--invertida .dupla__foto { order: 0; }
  .passos, .grade { grid-template-columns: 1fr 1fr; }
  .pilares { grid-template-columns: 1fr; }
  .pedido { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
}

@media (max-width: 720px) {
  .cerca { padding-inline: 18px; }
  .secao { padding: 54px 0; }
  .heroi__titulo { font-size: 33px; }
  .heroi__texto { font-size: 16.5px; }
  .secao__titulo { font-size: 27px; }
  .heroi__palco { padding-bottom: 0; }
  /* A janela sai de cima da foto e vai para baixo dela: sobreposta numa
     coluna de 375px, ela cobriria a foto inteira e as duas peças
     desapareceriam juntas. */
  /* Seletor de filho para vencer o `.heroi__palco > .heroi__janela` do
     desktop: com a regra de classe simples, a janela continuava absoluta no
     celular e caia por cima do proprio texto do hero. */
  .heroi__palco > .heroi__janela { position: static; width: 100%; margin-top: -28px; }
  /* Quadrado, com o recorte puxado para cima. O 4:3 daqui foi escrito antes
     da foto existir: cortar um retrato 4:5 num quadro deitado tira metade da
     altura pelo meio — e nesta foto a metade de cima é o rosto. `center 22%`
     mantém o rosto no quadro em qualquer largura de celular. */
  .heroi__foto { aspect-ratio: 1 / 1; }
  .heroi__foto img { object-position: center 22%; }
  .app { grid-template-columns: 54px minmax(0, 1fr); }
  .app__marca-selo { width: 30px; height: 30px; }
  .app__lockup, .app__item span { display: none; }
  .app__item { justify-content: center; padding: 9px 0; }
  .app__item--ativo::before { display: none; }
  .ui-kpis { grid-template-columns: 1fr; }
  .contraste, .passos, .grade, .grade--3, .numeros, .formulario { grid-template-columns: 1fr; }
  .pedido { padding: 26px 18px; }
  .formulario { padding: 20px; }
  .pedido__titulo { font-size: 27px; }
  .rodape nav { margin-left: 0; }

  /* A barra fixa entra e o WhatsApp sobe: um cobria o outro exatamente no
     polegar. */
  .barra { display: flex; }
  .barra .btn { flex: 1; }
  .zap { bottom: 80px; right: 14px; padding: 11px 16px; font-size: 13.5px; }
  body { padding-bottom: 70px; }
  .topo__acao { display: none; }
}