/* site.css · tokens do design.md (fonte da verdade). Toda cor e medida nova entra lá primeiro. */
:root {
  --noite-0: #070b24; --noite-1: #0c1544; --noite-2: #121b52; --noite-3: #19246a;
  --tinta: #eef1fa; --tinta-2: #aeb7d6; --tinta-3: #6f7aa6;
  --linha: rgba(174,183,214,.14); --linha-forte: rgba(174,183,214,.32);
  --laranja: #f2591a; --laranja-claro: #ff7a3d; --laranja-suave: rgba(242,89,26,.14);
  --gelo: #9fc4ff; --gelo-suave: rgba(159,196,255,.12);
  --menta: #5fe3b1; --menta-suave: rgba(95,227,177,.14);
  --ambar: #ffd18c; --ambar-suave: rgba(255,209,140,.14);
  --erro: #ffa8b4;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --r-cartao: 16px; --r-campo: 12px; --r-pilula: 999px;
  --titulo: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corpo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--noite-1); color: var(--tinta);
  font-family: var(--corpo); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--titulo); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; max-width: 36rem; }
a { color: var(--gelo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px); gap: var(--e-4);
  background: linear-gradient(to bottom, rgba(7,11,36,.9), rgba(7,11,36,0)); pointer-events: none;
}
.topo > * { pointer-events: auto; }
.marca { display: inline-flex; align-items: center; height: 30px; }
.marca svg { height: 30px; width: auto; display: block; }
.topo nav { display: flex; align-items: center; gap: var(--e-4); }
.topo nav a.link { color: var(--tinta-2); font-weight: 500; font-size: 15px; }
.topo nav a.link:hover { color: var(--tinta); text-decoration: none; }
@media (max-width: 640px) { .topo nav a.link { display: none; } .topo .so-largo { display: none; } }

/* ---------- botões, chips, campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 22px; border-radius: var(--r-pilula); border: 1px solid transparent;
  font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, transform .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--laranja); color: var(--tinta); }
.btn-p:hover { background: var(--laranja-claro); }
.btn-s { background: transparent; border-color: var(--linha-forte); color: var(--tinta); }
.btn-s:hover { background: var(--gelo-suave); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn-peq { min-height: 40px; padding: 0 16px; font-size: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pilula);
  border: 1px solid var(--linha); background: transparent; color: var(--tinta); font-weight: 500; font-size: 15px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--linha-forte); }
.chip[aria-pressed="true"] { border-color: var(--laranja); color: var(--laranja); background: var(--laranja-suave); }
.chip.destaque { border-color: var(--gelo); }
.chip.destaque::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gelo); }
.chip[aria-pressed="true"].destaque::before { background: var(--laranja); }

.campo {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r-campo); border: 1px solid var(--linha);
  background: var(--noite-2); color: var(--tinta); font-size: 17px; outline: none; transition: border-color .15s;
}
.campo::placeholder { color: var(--tinta-3); }
.campo:focus { border-color: var(--laranja); }
.campo[aria-invalid="true"] { border-color: var(--erro); }
textarea.campo { min-height: 96px; resize: vertical; line-height: 1.5; }
.rotulo { display: block; font-size: 14px; font-weight: 500; color: var(--tinta-2); margin-bottom: 6px; }
.erro-campo { color: var(--erro); font-size: 14px; margin-top: 6px; }
.nota { font-size: 14px; color: var(--tinta-2); border-left: 2px solid var(--linha-forte); padding-left: 12px; }

/* ---------- cena 3D fixa ---------- */
.cena { position: fixed; inset: 0; z-index: 0; background: var(--noite-0); }
.cena canvas { display: block; width: 100%; height: 100%; }
.cena-poster {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 50% 45%, #182a7a 0%, var(--noite-1) 55%, var(--noite-0) 100%);
}
.cena-poster svg { width: min(38vw, 220px); height: auto; opacity: .9; }
.cena[data-estado="3d"] .cena-poster { display: none; }

/* ---------- capítulos sobre a cena ---------- */
main { position: relative; z-index: 1; }
.cap { min-height: 100svh; display: grid; align-items: center; padding: 120px clamp(16px, 5vw, 64px) 96px; }
.cap-miolo { max-width: var(--largura); margin: 0 auto; width: 100%; }
.cap-texto { max-width: 34rem; }
.abertura { min-height: 100svh; align-items: end; padding-bottom: 72px; }
.abertura h1 { font-size: clamp(42px, 7.5vw, 86px); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; }
.abertura p.sub { font-size: clamp(18px, 2.2vw, 24px); color: var(--tinta-2); margin-top: var(--e-4); font-weight: 500; }
.abertura .cue { margin-top: var(--e-7); display: inline-flex; align-items: center; gap: 10px; color: var(--tinta-3); font-size: 14px; font-weight: 500; }
.abertura .cue i { display: block; width: 1px; height: 36px; background: linear-gradient(to bottom, var(--tinta-3), transparent); }
.cap h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; }
.cap h2 + p { margin-top: var(--e-5); font-size: 18px; color: var(--tinta-2); }
.cap .marcas { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--tinta); font-family: var(--titulo); font-weight: 600; font-size: 15px; }
.cap .marcas span { opacity: .85; }
.cap .marcas span.mais { color: var(--tinta-2); font-family: var(--corpo); font-weight: 500; }

/* passos do modelo */
.passos { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: 6px; counter-reset: passo; max-width: 36rem; }
.passos li {
  counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-cartao); border: 1px solid var(--linha); background: rgba(12,21,68,.55);
  backdrop-filter: blur(6px); transition: border-color .3s, background .3s;
}
.passos li::before {
  content: counter(passo); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--linha-forte); font-family: var(--titulo); font-weight: 700; font-size: 15px; color: var(--tinta-2);
  font-variant-numeric: tabular-nums; transition: background .3s, color .3s, border-color .3s;
}
.passos li strong { display: block; font-family: var(--titulo); font-weight: 600; font-size: 18px; }
.passos li span { color: var(--tinta-2); font-size: 15px; }
.passos li.ativo { border-color: var(--laranja); background: rgba(18,27,82,.85); }
.passos li.ativo::before { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }

/* por que vale */
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: var(--e-6); }
.cartao { padding: 22px; border-radius: var(--r-cartao); border: 1px solid var(--linha); background: rgba(18,27,82,.7); backdrop-filter: blur(8px); }
.cartao h3 { font-size: 20px; font-weight: 600; }
.cartao p { margin-top: 10px; color: var(--tinta-2); font-size: 15px; }
.cartao svg { width: 40px; height: 40px; margin-bottom: 14px; }
.numeros { display: flex; flex-wrap: wrap; gap: var(--e-6); margin-top: var(--e-7); }
.numeros div strong { display: block; font-family: var(--titulo); font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.numeros div span { color: var(--tinta-2); font-size: 14px; font-weight: 500; }
@media (max-width: 860px) { .cartoes { grid-template-columns: 1fr; } }

/* ---------- a porta (experiência) ---------- */
.porta { position: relative; background: var(--noite-1); padding: var(--e-9) clamp(16px, 5vw, 64px) var(--e-9); border-top: 1px solid var(--linha); }
.porta::before { content: ""; position: absolute; inset: -140px 0 auto 0; height: 140px; background: linear-gradient(to bottom, transparent, var(--noite-1)); pointer-events: none; }
.porta-miolo { max-width: var(--largura); margin: 0 auto; }
.porta-intro { max-width: 40rem; margin-bottom: var(--e-7); }
.porta-intro h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; }
.porta-intro p { margin-top: var(--e-4); color: var(--tinta-2); font-size: 18px; }
.porta-grade { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--e-6); align-items: start; }
@media (max-width: 980px) { .porta-grade { grid-template-columns: 1fr; } }

.fio { display: grid; gap: var(--e-4); }
.balao { max-width: 36rem; padding: 14px 18px; border-radius: 18px; line-height: 1.5; animation: entra .45s ease both; }
.balao.pergunta { background: var(--noite-2); border: 1px solid var(--linha); border-top-left-radius: 6px; font-family: var(--titulo); font-weight: 600; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; }
.balao.pergunta small { display: block; font-family: var(--corpo); font-weight: 400; font-size: 15px; color: var(--tinta-2); margin-top: 8px; }
.balao.resposta { justify-self: end; background: var(--laranja-suave); border: 1px solid rgba(242,89,26,.5); border-top-right-radius: 6px; font-weight: 500; }
.balao.sistema { background: transparent; border: 1px dashed var(--linha-forte); color: var(--tinta-2); font-size: 15px; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .balao { animation: none; } }

.entrada { display: grid; gap: var(--e-3); max-width: 36rem; padding: 4px 0 0; }
.entrada .linha { display: flex; gap: var(--e-2); align-items: flex-start; }
.entrada .linha .campo { flex: 1; }
.entrada .acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.entrada .legenda { font-size: 14px; color: var(--tinta-2); }
.entrada .legenda b { color: var(--gelo); font-weight: 600; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
@media (max-width: 560px) { .grade-2 { grid-template-columns: 1fr; } }

/* os 3 pontos */
.pontos { display: grid; gap: var(--e-3); }
.ponto { padding: 14px 16px; border-radius: var(--r-cartao); border: 1px solid var(--linha); background: var(--noite-2); }
.ponto header { display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline; }
.ponto header strong { font-family: var(--titulo); font-weight: 600; font-size: 17px; }
.ponto header em { font-style: normal; font-size: 13px; color: var(--tinta-3); }
.ponto p { font-size: 14px; color: var(--tinta-2); margin: 6px 0 12px; }
.ponto[data-estado="on"] { border-color: rgba(95,227,177,.5); }
.ponto[data-estado="meio"] { border-color: rgba(255,209,140,.5); }

/* painel */
.painel { position: sticky; top: 84px; display: grid; gap: var(--e-3); }
.painel-bloco { padding: 18px; border-radius: var(--r-cartao); border: 1px solid var(--linha); background: var(--noite-2); }
.painel-bloco h3 { font-size: 14px; font-weight: 600; color: var(--tinta-2); font-family: var(--corpo); margin-bottom: 10px; }
.painel-bloco .empresa { font-family: var(--titulo); font-weight: 600; font-size: 22px; line-height: 1.2; }
.painel-bloco .empresa.vazia { color: var(--tinta-3); font-weight: 500; font-size: 17px; }
.painel-bloco .perfil { color: var(--tinta-2); font-size: 14px; margin-top: 4px; }
.painel-bloco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.painel-bloco ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.painel-bloco ul li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--menta); }
.painel-icones { display: flex; gap: 10px; margin-top: 12px; }
.painel-icones svg { width: 44px; height: 44px; }
.painel-vazio { color: var(--tinta-3); font-size: 14px; }
.operacao-svg { width: 100%; height: auto; display: block; }
.painel-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--tinta-2); }
.painel-legenda b { font-weight: 600; color: var(--tinta); }
.painel-legenda b.on { color: var(--menta); }
.painel-legenda b.meio { color: var(--ambar); }
.operacao-svg { max-width: 400px; margin: 0 auto; }
@media (max-width: 980px) {
  /* no celular a conversa vem primeiro; o desenho fica logo abaixo, sem grudar no topo */
  .painel { position: static; grid-template-columns: 1fr; order: 2; }
  .painel-bloco.compacto { padding: 12px 14px; }
  .operacao-svg { max-width: 340px; }
}

/* mapa do caso */
.mapa { padding: 18px; border-radius: var(--r-cartao); border: 1px solid var(--linha); background: var(--noite-2); max-width: 44rem; }
.mapa h3 { font-family: var(--corpo); font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: 12px; }
.mapa ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mapa li { position: relative; padding: 0 0 18px 34px; }
.mapa li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: -2px; width: 1.5px; background: var(--linha-forte); }
.mapa li:last-child::before { display: none; }
.mapa li i { position: absolute; left: 4px; top: 8px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gelo); background: var(--noite-2); }
.mapa li[data-tipo="empresa"] i { border-color: var(--laranja); background: var(--laranja); }
.mapa li[data-tipo="weconnect"] i { border-color: var(--gelo); background: var(--gelo); }
.mapa li[data-tipo="trava"] i { border-color: var(--ambar); }
.mapa li[data-tipo="objetivo"] i { border-color: var(--menta); background: var(--menta); }
.mapa li[data-tipo="passo"] i { border-color: var(--laranja); }
.mapa li[data-tipo="campanha"] i { border-color: var(--laranja); background: var(--laranja-suave); }
.mapa li strong { display: block; font-family: var(--titulo); font-weight: 600; font-size: 17px; line-height: 1.3; }
.mapa li span { color: var(--tinta-2); font-size: 14px; }

/* o caminho (fim) */
.caminho { padding: 24px; border-radius: var(--r-cartao); border: 1px solid rgba(242,89,26,.45); background: linear-gradient(180deg, rgba(242,89,26,.08), rgba(18,27,82,.9)); max-width: 44rem; display: grid; gap: var(--e-4); }
.caminho h3 { font-size: 24px; font-weight: 700; }
.caminho .duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 560px) { .caminho .duas { grid-template-columns: 1fr; } }
.caminho h4 { font-family: var(--corpo); font-size: 14px; font-weight: 600; color: var(--tinta-2); margin: 0 0 8px; }
.caminho ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.caminho ul li { display: flex; gap: 10px; font-size: 15px; }
.caminho ul.tem li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--menta); }
.caminho ul.falta li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; border: 1.5px solid var(--laranja); }
.caminho .quem { display: flex; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid var(--linha); }
.caminho .quem b { display: block; font-weight: 600; }
.caminho .quem span { color: var(--tinta-2); font-size: 14px; }
.caminho .quem i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; font-style: normal; font-family: var(--titulo); font-weight: 700; }

/* ---------- rodapé ---------- */
.rodape { position: relative; z-index: 1; background: var(--noite-0); border-top: 1px solid var(--linha); padding: var(--e-7) clamp(16px, 5vw, 64px); color: var(--tinta-2); font-size: 14px; }
.rodape .miolo { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); align-items: center; justify-content: space-between; }
.rodape .marca svg { height: 24px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* ---------- página simples (privacidade, painel) ---------- */
.pagina { max-width: 46rem; margin: 0 auto; padding: 120px clamp(16px, 5vw, 40px) 96px; }
.pagina h1 { font-size: 36px; font-weight: 700; }
.pagina h2 { font-size: 22px; font-weight: 600; margin-top: var(--e-6); }
.pagina p, .pagina li { color: var(--tinta-2); margin-top: var(--e-3); max-width: none; }
.pagina table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: var(--e-4); }
.pagina th, .pagina td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.pagina th { color: var(--tinta-2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* o convite para construir, com o investimento ao lado */
.convite { margin-top: var(--e-3); padding: 16px 18px; border-radius: var(--r-cartao); border: 1px solid rgba(242,89,26,.45); background: linear-gradient(180deg, rgba(242,89,26,.10), rgba(18,27,82,.6)); max-width: 36rem; }
.convite h4 { margin: 0; font-family: var(--titulo); font-size: 17px; font-weight: 600; }
.convite p { margin-top: 8px; font-size: 15px; color: var(--tinta); }
.convite p.ressalva { font-size: 13px; color: var(--tinta-2); }

[hidden] { display: none !important; }

/* a oferta de implementação (capítulo "por que vale" e o fim da experiência) */
.oferta { margin-top: var(--e-6); padding: 22px 24px; border-radius: var(--r-cartao); border: 1px solid rgba(242,89,26,.5); background: linear-gradient(135deg, rgba(242,89,26,.14), rgba(18,27,82,.75)); backdrop-filter: blur(8px); display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: center; max-width: 60rem; }
.oferta-valor { display: grid; gap: 4px; min-width: 200px; }
.oferta-valor strong { font-family: var(--titulo); font-size: 40px; font-weight: 700; line-height: 1; color: var(--tinta); }
.oferta-valor span { font-size: 14px; color: var(--tinta-2); max-width: 16rem; }
.oferta p { font-size: 16px; color: var(--tinta); max-width: none; }
@media (max-width: 760px) { .oferta { grid-template-columns: 1fr; gap: var(--e-3); } }
.painel-mudanca { margin-top: 10px; font-size: 13.5px; color: var(--tinta); border-left: 2px solid var(--laranja); padding-left: 10px; }
.painel-mudanca:empty { display: none; }