/* QLTech — site.
   ═══════════════════════════════════════════════════════════════════════════
   PLATINUM É A COR DA MARCA, e aqui ela manda (pedido do fundador, 25/08). O
   navy deixa de ser o rosto do site e passa a ser o que sempre foi bom em ser:
   TINTA e PROFUNDIDADE.

   E o pedido veio com o aviso certo — "cuidado com a nitidez ao trocar". Ele
   está certo, e a aritmética é implacável:

     platinum sobre branco ............  1,20:1   invisível
     branco sobre platinum ............  1,36:1   invisível  ← o erro fácil
     navy sobre platinum .............. 12,06:1   é o CTA
     platinum sobre navy .............. 12,06:1   é a marca brilhando no escuro

   Ou seja: platinum é SUPERFÍCIE (com tinta escura em cima) ou TINTA SOBRE
   ESCURO. Nunca tinta sobre claro, nunca fundo de texto branco.

   Cada par que esta folha usa está medido em `test/contraste.test.js`, com a
   conta da WCAG — trocar uma cor aqui e ver o teste acusar é diferente de olhar
   a tela num monitor bom, num quarto claro, e achar que está bom.

   Laranja é do QLHub, dourado do QLicitações, roxo do QLPatrium. Nenhum entra.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* marca */
  --plat: #D9DDE4;
  --plat-clara: #EEF1F6;
  --plat-fraco: #B9C2DA;
  --navy: #0D1F3C;
  --navy-2: #16305A;
  --navy-fundo: #0A1830;

  /* tinta */
  --ink: #1D2331;
  --ink-2: #344456;
  --ink-3: #4B5563;

  /* superfície */
  --bg: #FFFFFF;
  --bg-2: #F4F6FA;
  --bg-3: #EAEEF5;

  /* Borda em 3,04:1 sobre branco — o mínimo da WCAG para componente não-textual
     (1.4.11). O `#AAB5D3` do badge dá 2,05:1: serve como hairline colada no
     platinum, não como contorno sobre branco. */
  --borda: #8794B2;
  --borda-suave: #DCE2EC;

  /* CTA: platinum com tinta NAVY. Com texto branco daria 1,36:1. */
  --cta: #D9DDE4;
  --cta-tinta: #0D1F3C;
  --cta-hover: #C7CDD9;

  /* Foco declarado DUAS vezes: um anel navy some no hero escuro. */
  --foco: #0D1F3C;
  --foco-escuro: #D9DDE4;

  /* Branco é token para NÃO escapar da conferência de contraste: ele é a tinta
     dos títulos sobre o hero escuro, e isso é um par que precisa ser medido. */
  --branco: #FFFFFF;
  /* Decoração pura (os pontinhos da janela do app). Token mesmo assim: cor solta
     no meio da folha é cor que ninguém confere depois. */
  --ponto: #CBD3E0;

  --ok: #15803D;
  --r: 14px;
  --r-lg: 20px;
  --largura: 1140px;
}

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

@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FFFD;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--navy); }

/* Foco visível — quem navega por teclado precisa ver onde está. */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.escura :focus-visible { outline-color: var(--foco-escuro); }

.env { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 22px; }

h1, h2, h3, .preco, .marca b {
  font-family: 'Jakarta', -apple-system, "Segoe UI", sans-serif;
  font-weight: 800; letter-spacing: -.028em; line-height: 1.08;
}

h1 { font-size: clamp(38px, 5.6vw, 62px); margin-bottom: 20px; }
h2 { font-size: clamp(28px, 3.9vw, 42px); line-height: 1.14; margin-bottom: 16px; }
h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 9px; }

/* A margem inferior não é enfeite: sem ela o selo "mais escolhido" do plano em
   destaque (que sobe -13px) cobria a última linha deste parágrafo. */
.sub { font-size: 19.5px; color: var(--ink-3); max-width: 60ch; margin-bottom: 36px; }
.escura .sub { color: var(--plat-fraco); }

.olho {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: var(--plat);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 18px;
}
.escura .olho { color: var(--navy); background: var(--plat); }

/* ── revelar ao rolar ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visivel { opacity: 1; transform: none; }
/* Quem pediu menos movimento vê tudo, parado. Sem isto, um `IntersectionObserver`
   que não dispara deixaria a página em branco para essa pessoa. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flutua { animation: none !important; }
}

/* ── cabeçalho ───────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--borda-suave);
}
.topo .env { display: flex; align-items: center; gap: 26px; height: 70px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
/* O badge platinum SEMPRE com hairline sobre fundo claro — sem ela some no
   branco (2,05:1). É a mesma lição que está no BRAND_QLTECH. */
.marca img { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #AAB5D3; }
.marca b { font-size: 20px; }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topo nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 11px 14px; border-radius: 9px;
}
.topo nav a:not(.btn):hover { background: var(--bg-3); }

/* ── botões ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 26px;
  border-radius: 11px; border: 1.5px solid var(--borda);
  background: transparent; color: var(--ink);
  font: inherit; font-weight: 700; font-size: 16.5px; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--bg-3); }
.btn:active { transform: translateY(1px); }

.btn--cta {
  background: var(--cta); color: var(--cta-tinta); border-color: var(--cta);
  box-shadow: 0 8px 22px rgba(13,31,60,.16);
}
.btn--cta:hover { background: var(--cta-hover); box-shadow: 0 10px 28px rgba(13,31,60,.22); }

/* SOBRE FUNDO ESCURO A TINTA DO BOTÃO TEM QUE VIRAR CLARA — e o seletor precisa
   cobrir os DOIS fundos escuros da página.
   
   Estava só em `.escura`, e a hero tem classe `.hero`: o botão "Ver como
   funciona" ficou com tinta `--ink` (navy) sobre `--navy-fundo`, ou seja
   praticamente invisível. O teste de contraste não pegou porque ele confere
   PARES DE TOKEN, e não qual regra vence em qual lugar — o par nem existia na
   lista, porque ninguém quis criá-lo.
   
   Por isso os dois fundos escuros agora compartilham a mesma lista de seletores,
   sempre: acrescentar uma terceira seção escura sem acrescentá-la aqui repete o
   bug. */
.escura .btn,
.hero .btn { color: var(--branco); border-color: rgba(217,221,228,.45); }

/* LINK COMUM sobre fundo escuro. O `a { color: var(--navy) }` global cai dentro
   do heroi e da secao escura e vira NAVY SOBRE NAVY -- 1,03:1, invisivel. Foi
   assim que "o que a lei exige ja esta pronto", no subtitulo do heroi, sumiu
   deixando so o ponto final na tela.
   E o mesmo defeito que o botao secundario ja tinha tido; a regra de la cobria
   `.btn` e nao o link solto. */
.hero a:not(.btn):not(.marca),
.escura a:not(.btn):not(.marca) { color: var(--plat); }
.escura .btn:hover,
.hero .btn:hover { background: rgba(217,221,228,.12); }
.escura .btn--cta,
.hero .btn--cta { color: var(--cta-tinta); border-color: var(--cta); }
.escura :focus-visible,
.hero :focus-visible { outline-color: var(--foco-escuro); }

/* ── seções ──────────────────────────────────────────────────────────────── */
section { padding: 92px 0; position: relative; }
section.alt { background: var(--bg-2); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--navy-fundo);
  color: var(--branco);
  /* O cabeçalho é grudento e tem 70px: com 96px de topo, o rótulo da primeira
     linha nascia POR BAIXO dele. O respiro tem que contar a altura do cabeçalho. */
  padding: calc(70px + 42px) 0 104px;
  overflow: hidden;
}
.hero h1 { color: var(--branco); }
/* O véu de luz: platinum brilhando no escuro, que é onde ela brilha. */
.hero-luz {
  position: absolute; top: -280px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 900px; pointer-events: none;
  background: radial-gradient(circle, rgba(217,221,228,.16) 0%, rgba(217,221,228,.05) 42%, transparent 70%);
}
.hero-malha {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(217,221,228,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,221,228,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000, transparent);
}
.hero .env { position: relative; z-index: 1; }
.hero-linhas { display: grid; grid-template-columns: 1fr 470px; gap: 60px; align-items: center; }
.hero .acoes { display: flex; gap: 13px; flex-wrap: wrap; margin: 30px 0 18px; }
.hero .nota { font-size: 14.5px; color: var(--plat-fraco); }

.confianca { display: flex; gap: 14px 26px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(217,221,228,.16); }
.confianca div { font-size: 13.5px; color: var(--plat-fraco); display: flex; align-items: center; gap: 7px; }
.confianca svg { width: 17px; height: 17px; stroke: var(--plat); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── a janela do app ─────────────────────────────────────────────────────── */
.janela {
  background: var(--branco); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(217,221,228,.3);
  box-shadow: 0 34px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(217,221,228,.08);
}
.flutua { animation: flutuar 6s ease-in-out infinite; }
@keyframes flutuar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.janela-topo {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; background: var(--bg-2); border-bottom: 1px solid var(--borda-suave);
}
.janela-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--ponto); }
.janela-topo span { margin-left: 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.janela-corpo { padding: 18px; }
.linha-item {
  display: grid; grid-template-columns: 34px 1fr 74px 52px; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--borda-suave); font-size: 13px;
}
.linha-item:last-child { border-bottom: 0; }
.linha-item b { font-weight: 700; color: var(--ink-2); }
.linha-item span { color: var(--ink-3); }
.linha-item .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.barrinha { height: 7px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.barrinha i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.janela-rodape {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; background: var(--plat); font-size: 13px; font-weight: 700; color: var(--navy);
}

/* ── cartões ─────────────────────────────────────────────────────────────── */
.grade { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cartao {
  background: var(--bg); border: 1px solid var(--borda-suave); border-radius: var(--r);
  padding: 28px; transition: transform .18s ease, box-shadow .18s ease;
}
.alt .cartao { background: var(--bg); }
.cartao:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13,31,60,.09); }
.cartao p { color: var(--ink-3); font-size: 15.5px; }
.icone {
  width: 46px; height: 46px; border-radius: 12px; background: var(--plat);
  display: grid; place-items: center; margin-bottom: 16px;
}
.icone svg { width: 23px; height: 23px; stroke: var(--navy); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.passo { counter-increment: passo; }
.passo .num {
  width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: var(--plat);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-bottom: 14px;
  font-family: 'Jakarta', sans-serif;
}

/* ── tabela ──────────────────────────────────────────────────────────────── */
.tabela-env {
  overflow-x: auto; border: 1px solid var(--borda-suave); border-radius: var(--r); background: var(--bg);
}
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--borda-suave); }
thead th { background: var(--plat); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--navy); font-weight: 800; }
tbody tr:last-child td { border-bottom: 0; }
td.sim { color: var(--ok); font-weight: 700; }
td.nao { color: var(--ink-3); }

/* ── planos ──────────────────────────────────────────────────────────────── */
.planos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.plano { border: 1px solid var(--borda-suave); border-radius: var(--r-lg); padding: 32px; background: var(--bg); }
.plano.destaque {
  border: 2px solid var(--navy); position: relative;
  box-shadow: 0 20px 46px rgba(13,31,60,.13);
}
.plano .selo {
  position: absolute; top: -13px; left: 28px;
  background: var(--navy); color: var(--plat);
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.plano .preco { font-size: 46px; margin: 12px 0 2px; }
.plano .preco small { font-family: system-ui, sans-serif; font-size: 16px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0; }
.plano .quem { color: var(--ink-3); font-size: 15px; }
.plano ul { list-style: none; margin: 20px 0 26px; font-size: 15.5px; }
.plano li { padding-left: 27px; position: relative; margin-bottom: 10px; color: var(--ink-2); }
.plano li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 11px; height: 6px; border-left: 2.2px solid var(--ok); border-bottom: 2.2px solid var(--ok);
  transform: rotate(-45deg);
}
.plano .btn { width: 100%; }
.plano-nota { margin-top: 26px; color: var(--ink-3); font-size: 15px; }

/* ── perguntas ───────────────────────────────────────────────────────────── */
details {
  border: 1px solid var(--borda-suave); border-radius: var(--r);
  padding: 20px 24px; margin-bottom: 12px; background: var(--bg);
}
details[open] { border-color: var(--borda); }
summary { font-weight: 700; cursor: pointer; font-size: 17px; list-style: none; padding-right: 30px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ''; position: absolute; right: 2px; top: 8px;
  width: 9px; height: 9px; border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
details[open] summary::after { transform: rotate(-135deg); top: 12px; }
details p { color: var(--ink-3); margin-top: 13px; font-size: 16px; }

/* ── fechamento e rodapé ─────────────────────────────────────────────────── */
.escura { background: var(--navy-fundo); color: var(--branco); overflow: hidden; }
.escura h2 { color: var(--branco); }

footer { background: var(--navy); color: var(--plat-fraco); padding: 54px 0 40px; font-size: 15px; }
footer a { color: var(--plat); }
footer .linhas { display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-between; }
footer strong { color: var(--branco); display: block; margin-bottom: 11px; }
footer .suite { display: flex; gap: 18px; flex-wrap: wrap; }
footer .marca { color: var(--branco); }
footer .marca img { border: 0; }
footer small { display: block; margin-top: 32px; padding-top: 22px;
  border-top: 1px solid rgba(217,221,228,.16); color: var(--plat-fraco); font-size: 13.5px; }

@media (max-width: 900px) {
  .hero-linhas { grid-template-columns: 1fr; gap: 44px; }
  section { padding: 62px 0; }
  .hero { padding: 64px 0 72px; }
  .topo nav a:not(.btn) { display: none; }
  .topo .env { height: 64px; gap: 14px; }
}

/* ── páginas legais (privacidade, termos) ─────────────────────────────────────
   Documento para LER, não para converter: uma coluna estreita, hierarquia por
   tamanho e nada de decoração. A largura em `ch` é medida de leitura, não de
   tela — 68 caracteres é onde o olho volta para a linha certa.

   Sem cor nova: todo par aqui já passou pelo `test/contraste.test.js`. */
.legal { max-width: 68ch; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.legal .data { color: var(--ink-3); font-size: 14px; margin-bottom: 34px; }
.legal h2 {
  font-size: 21px; margin: 42px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--borda-suave);
}
.legal p { color: var(--ink-2); margin-bottom: 14px; }
.legal ul { color: var(--ink-2); margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--navy-2); }
/* O quadro do "vá direto ao ponto": quem abre uma política quer saber como
   exercer o direito, não ler dez seções antes. */
.legal .destaque {
  background: var(--bg-2); border: 1px solid var(--borda-suave);
  border-radius: var(--r); padding: 20px 22px; margin: 0 0 30px;
}
.legal .destaque p:last-child { margin-bottom: 0; }

/* ── seletor de ciclo (mensal / anual) ───────────────────────────────────────
   SEM JavaScript: dois rádios escondidos e o irmão `~` trocando o preço. A CSP
   desta página não abre para script inline, e preço é a informação que menos
   pode depender de um script carregar.

   Os rádios ficam visualmente escondidos mas NAVEGÁVEIS (clip, não `display:
   none` — que os tiraria da ordem de tabulação e da leitura de tela). O foco
   aparece no rótulo, que é o que a pessoa enxerga. */
.ciclo-radio {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ciclo { display: flex; justify-content: center; margin: 0 0 34px; }
.ciclo label {
  padding: 11px 26px; font-weight: 700; font-size: 15px; cursor: pointer;
  border: 1px solid var(--borda); color: var(--ink-2); background: var(--bg);
  transition: background .15s ease, color .15s ease;
}
.ciclo label:first-of-type { border-radius: 999px 0 0 999px; border-right: 0; }
.ciclo label:last-of-type  { border-radius: 0 999px 999px 0; }
.ciclo label:hover { background: var(--bg-3); }
.ciclo label b { font-weight: 800; }

#c-mensal:checked ~ .ciclo label[for="c-mensal"],
#c-anual:checked  ~ .ciclo label[for="c-anual"] {
  background: var(--navy); color: var(--branco); border-color: var(--navy);
}
#c-mensal:focus-visible ~ .ciclo label[for="c-mensal"],
#c-anual:focus-visible  ~ .ciclo label[for="c-anual"] {
  outline: 3px solid var(--foco); outline-offset: 2px;
}

/* Um dos dois preços some. `display: none` e não `visibility`: o cartão não
   pode guardar espaço vazio de um preço que não está sendo mostrado. */
#c-mensal:checked ~ .planos .preco-anual,
#c-anual:checked  ~ .planos .preco-mensal { display: none; }

.plano .preco-nota { color: var(--ink-3); font-size: 14px; margin: 0; min-height: 40px; }

/* Dois planos, não três: sem o limite a grade `auto-fit` estica os dois cartões
   pela folha inteira e a linha de leitura fica longa demais. */
.planos { max-width: 780px; margin: 0 auto; }

/* ── chat de vendas ──────────────────────────────────────────────────────────
   O painel é claro com cabeçalho navy: o hero é escuro, e uma janelinha escura
   por cima dele desapareceria. Nenhuma cor nova — os pares abaixo já passaram
   pelo `test/contraste.test.js`. */
.chat-botao {
  position: fixed; z-index: 60; right: 20px; bottom: 20px;
  padding: 14px 22px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 15px;
  color: var(--cta-tinta); background: var(--cta);
  box-shadow: 0 10px 30px rgba(13, 31, 60, .3);
  cursor: pointer; min-height: 44px;
}
.chat-botao:hover { background: var(--cta-hover); }

.chat-painel {
  position: fixed; z-index: 61;
  right: 16px; left: 16px; bottom: 16px;
  display: flex; flex-direction: column;
  max-height: min(600px, 80dvh);
  border-radius: 18px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--borda-suave);
  box-shadow: 0 22px 60px rgba(13, 31, 60, .34);
}
@media (min-width: 700px) { .chat-painel { left: auto; width: 400px; } }
.chat-painel[hidden] { display: none; }

.chat-painel header {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 16px; background: var(--navy); color: var(--branco);
}
.chat-painel header span { flex: 1; font-size: 12px; color: var(--plat); }
.chat-fechar {
  border: 0; background: transparent; color: var(--branco);
  font-size: 16px; cursor: pointer; line-height: 1;
  min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0;
}

.chat-corpo { flex: 1; overflow-y: auto; padding: 16px; }
.chat-intro { margin: 0 0 12px; font-size: 14px; color: var(--ink-3); }
.chat-form { display: flex; flex-direction: column; gap: 9px; }
/* O ATRIBUTO `hidden` PERDE PARA QUALQUER `display`. O navegador aplica
   `[hidden] { display: none }` na folha do USUARIO, que qualquer regra de autor
   sobrepoe — entao `display: flex` aqui deixava o formulario de contato visivel
   DEPOIS de enviado, empilhado em cima da conversa. So aparece olhando a tela:
   nenhum erro, nenhum aviso, e o teste de contraste nao ve isso. */
.chat-form[hidden] { display: none; }
.chat-form input, .chat-pe input {
  font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--bg); color: var(--ink); min-height: 44px;
}
.chat-enviar {
  font: inherit; font-weight: 700; padding: 12px; min-height: 44px;
  border: 0; border-radius: 10px; cursor: pointer;
  color: var(--cta-tinta); background: var(--cta);
}
.chat-erro { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

.chat-fio { display: flex; flex-direction: column; gap: 10px; }
.chat-fio[hidden] { display: none; }
.chat-balao {
  padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5;
  max-width: 88%; white-space: pre-wrap;
}
.chat-balao--usuario {
  align-self: flex-end; background: var(--navy); color: var(--branco);
  border-bottom-right-radius: 4px;
}
.chat-balao--assistente {
  align-self: flex-start; background: var(--bg-2); color: var(--ink);
  border-bottom-left-radius: 4px;
}

.chat-pe { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--borda-suave); }
.chat-pe[hidden] { display: none; }
.chat-pe input { flex: 1; }
.chat-pe button {
  font: inherit; font-weight: 700; padding: 0 17px; min-height: 44px;
  border: 0; border-radius: 10px; cursor: pointer;
  color: var(--cta-tinta); background: var(--cta);
}

/* ══ O FLUXO ════════════════════════════════════════════════════════════════
   A jornada como LINHA CONTINUA. Cada etapa mostra a tela de onde ela sai, e a
   frase diz o que ela ENTREGA para a proxima -- que e o argumento do produto:
   nada e digitado duas vezes.

   No desktop, duas colunas alternadas com o trilho no meio. No celular vira
   pilha e o trilho some: linha vertical em tela estreita rouba largura de
   texto e nao ajuda a ler. */
.fluxo { position: relative; margin-top: 34px; }
.fluxo::before {
  content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px;
  transform: translateX(-1px); background: var(--bg-3);
}
.etapa {
  display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center;
  gap: 0; margin-bottom: 42px;
}
.etapa:last-child { margin-bottom: 0; }
.etapa-texto { padding: 0 8px; }
.etapa-texto h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.etapa-texto p { color: var(--ink-3); margin: 0; font-size: 15.5px; }
.etapa-sai {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  background: var(--plat-clara); border-radius: 99px; padding: 5px 13px;
}
.etapa-sai svg { width: 14px; height: 14px; stroke: var(--navy); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.etapa-marca {
  justify-self: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--plat); display: grid; place-items: center;
  font-family: 'Jakarta', sans-serif; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 7px var(--bg);
}
.alt .etapa-marca { box-shadow: 0 0 0 7px var(--bg-2); }
.etapa-tela { padding: 0 8px; min-width: 0; }
/* A alternancia: nas etapas pares o texto vai para a direita e a tela para a
   esquerda, sem trocar a ordem no HTML (leitor de tela le na ordem certa).
//
   COM `grid-column`, NAO COM `order`. A primeira versao usava `order` e
   quebrou: `order` reordena os itens na sequencia de colocacao, mas quem
   escolhe a COLUNA continua sendo a colocacao automatica -- e ela foi pondo a
   marca na coluna 1 e a TELA na coluna estreita do meio, com 76px de largura
   em vez de 510. Medido na tela; num screenshot reduzido parecia so
   "espremido". Posicionar explicitamente e a unica forma que nao depende da
   ordem em que o navegador coloca. */
.etapa-texto { grid-column: 1; grid-row: 1; }
.etapa-marca { grid-column: 2; grid-row: 1; }
.etapa-tela  { grid-column: 3; grid-row: 1; }
.etapa:nth-child(even) .etapa-texto { grid-column: 3; }
.etapa:nth-child(even) .etapa-tela  { grid-column: 1; }

/* ── a tela replicada ──────────────────────────────────────────────────────
   Nao e screenshot: e HTML com os mesmos tokens do app. Tres motivos --
   captura de tela real levaria dado de cliente para o ar, PNG de interface a
   1400px derruba o LCP, e replica nao sai da identidade. */
.tela {
  background: var(--bg); border: 1px solid var(--borda-suave); border-radius: var(--r);
  overflow: hidden; box-shadow: 0 10px 30px rgba(13,31,60,.07);
}
.tela-topo {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--bg-2); border-bottom: 1px solid var(--borda-suave);
  font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.tela-topo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ponto); flex: none; }
.tela-corpo { padding: 14px; font-size: 12.5px; }
.tela-linha {
  display: grid; gap: 8px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--borda-suave);
}
.tela-linha:last-child { border-bottom: 0; }
/* `min-width: 0` NAO e higiene: item de grade nasce com `min-width: auto`, e
   isso impede a coluna `1fr` de encolher abaixo da palavra mais longa da
   celula. Em 375px a palavra "Impermeabilizacao" segurava a linha em 356px e a
   PAGINA INTEIRA ganhava 14px de rolagem horizontal -- medido na tela. O
   `overflow-wrap` deixa a palavra quebrar em vez de empurrar. */
.tela-linha > * { min-width: 0; overflow-wrap: anywhere; }
.tela-linha b { color: var(--ink-2); font-weight: 700; }
.tela-linha span { color: var(--ink-3); }
.tela-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.tela-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--plat-clara); font-size: 12.5px;
  font-weight: 700; color: var(--navy);
}
.pilula {
  display: inline-block; border-radius: 99px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 700; border: 1px solid var(--borda-suave);
  color: var(--ink-3); background: var(--bg);
}
.pilula--forte { background: var(--navy); border-color: var(--navy); color: var(--plat); }
.pilula--ok { background: var(--plat-clara); border-color: var(--plat); color: var(--navy); }

/* ── o celular do canteiro ─────────────────────────────────────────────── */
.fone {
  width: 208px; margin: 0 auto; border-radius: 26px; padding: 9px;
  background: var(--navy); box-shadow: 0 16px 40px rgba(13,31,60,.22);
}
.fone-tela { background: var(--bg); border-radius: 18px; overflow: hidden; }
.fone-topo {
  padding: 8px 12px; background: var(--bg-2); font-size: 11px; font-weight: 700;
  color: var(--ink-3); display: flex; justify-content: space-between; align-items: center;
}
.fone-foto {
  height: 96px; background: var(--bg-3); display: grid; place-items: center;
}
.fone-foto svg { width: 30px; height: 30px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; }
.fone-corpo { padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); }
.fone-botao {
  margin: 4px 12px 12px; padding: 9px; border-radius: 12px; background: var(--navy);
  color: var(--plat); text-align: center; font-weight: 700; font-size: 12px;
}

@media (max-width: 900px) {
  .fluxo::before { display: none; }
  .etapa { grid-template-columns: 1fr; gap: 16px; margin-bottom: 34px; }
  .etapa-marca { justify-self: start; box-shadow: none; }
  .alt .etapa-marca { box-shadow: none; }
  /* No empilhado a ordem do HTML manda: texto, marca e tela na sequencia em
     que se le. A colocacao explicita do desktop e desfeita. */
  .etapa-texto, .etapa-marca, .etapa-tela,
  .etapa:nth-child(even) .etapa-texto,
  .etapa:nth-child(even) .etapa-tela { grid-column: 1; grid-row: auto; }
  .etapa-texto, .etapa-tela { padding: 0; }
}

/* ── faixa de escopo ─────────────────────────────────────────────────────
   Logo abaixo do heroi. Quem chega precisa medir o tamanho do produto antes de
   decidir se vale rolar -- e cinco fatos curtos fazem isso melhor que um
   paragrafo. */
.escopo { background: var(--bg-2); border-block: 1px solid var(--borda-suave); }
.escopo .env {
  display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center;
  padding: 18px 22px; font-size: 14px; color: var(--ink-2);
}
.escopo b { color: var(--navy); font-weight: 800; }

/* ── recurso: bloco alternado texto/tela ─────────────────────────────────
   Mesma logica do `.etapa`, sem o trilho e sem a marca: aqui nao ha sequencia,
   sao tres recortes independentes. `grid-column` explicito pelo mesmo motivo
   de la -- `order` nao escolhe coluna. */
.recurso {
  display: grid; grid-template-columns: 1fr 1fr; gap: 46px;
  align-items: center; margin-bottom: 56px;
}
.recurso:last-child { margin-bottom: 0; }
.recurso > div:first-child { grid-column: 1; grid-row: 1; }
.recurso > div:last-child { grid-column: 2; grid-row: 1; }
/* `nth-of-type`, NAO `nth-child`. O `.env` desta secao tem o olho, o h2 e o
   subtitulo antes dos blocos: com `nth-child` o PRIMEIRO `.recurso` e o quarto
   filho -- logo "par" -- e a alternancia sai invertida. `nth-of-type` conta so
   entre irmaos `div`, que aqui sao exatamente os tres blocos.
   E o mesmo erro do `order` no fluxo: seletor posicional contando coisa que eu
   nao esperava. */
.recurso:nth-of-type(even) > div:first-child { grid-column: 2; }
.recurso:nth-of-type(even) > div:last-child { grid-column: 1; }
.recurso h3 { font-size: 23px; margin: 0 0 10px; letter-spacing: -.012em; }
.recurso p { color: var(--ink-3); margin: 0 0 14px; font-size: 16px; }
.recurso ul { margin: 0; padding-left: 19px; color: var(--ink-3); font-size: 15.5px; }
.recurso li { margin-bottom: 6px; }

@media (max-width: 900px) {
  .recurso { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }
  .recurso > div:first-child, .recurso > div:last-child,
  .recurso:nth-of-type(even) > div:first-child,
  .recurso:nth-of-type(even) > div:last-child { grid-column: 1; grid-row: auto; }
}