/* landing.css: a landing do pre-lancamento.

   A IDEIA: o deck e feito de slides parados; a landing e uma DESCIDA. Entao a
   marca aqui nao aparece so como logo: os quadrados do arco viram a TRILHA na
   borda esquerda, e a lider dourada marca onde voce esta. A marca vira a
   navegacao. E o "flow" do nome, funcionando.

   Paleta: a mesma identidade v2 do deck e do app (ouro #FFC53D so como sinal,
   violeta so na zona de IA, interface neutra). O que muda em relacao ao deck e
   a ENERGIA: tipo maior, prints sangrando pelas bordas, movimento na rolagem.

   Unidades: aqui e `clamp()` com vw, e nao o `cqw` do deck. Slide tem
   proporcao fixa; pagina nao tem. */

:root{
  --tinta:#0B0E10; --tinta-2:#0E1418;
  --superficie:#141A1F; --superficie-2:#1A2127;
  --borda:#232C33; --borda-forte:#38444D;
  --texto:#ECF1F4; --texto-2:#98A3AB; --texto-3:#7E8992;
  --ouro:#FFC53D; --ouro-2:#B87A00;
  --azul:#8AA2FF; --violeta:#A855F7; --violeta-2:#C79BFA;
  --verde:#00E676; --vermelho:#FF5A5A;
  /* --texto-3 e mais claro aqui que no deck (#6A757D -> #7E8992): naquele o
     texto pequeno era so carimbo de rodape; aqui ele carrega rotulo e legenda
     que a pessoa precisa LER. 4,11:1 nao passava no minimo de 4,5:1. */
  --fam:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --raio:14px;
  --env:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--tinta); color:var(--texto);
  font-family:var(--fam); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}

.env{width:100%; max-width:var(--env); margin-inline:auto; padding-inline:24px;}
/* Todo filho de grid nasce com min-width:auto e se recusa a encolher abaixo do
   proprio conteudo, estourando a coluna. Um lugar so conserta a pagina toda. */
.heroi .env > *,.dupla > *,.form-grade > *,.passos > *,.numeros > *{min-width:0;}

/* ── Tipografia ───────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0; font-weight:800; font-stretch:115%; letter-spacing:-.028em;
         line-height:1.02; text-wrap:balance;}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);}
h2{font-size:clamp(1.85rem,3.7vw,3rem);}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem); font-stretch:110%; letter-spacing:-.012em;}
p{margin:0;}
.lead{font-size:clamp(1.02rem,1.35vw,1.28rem); color:var(--texto-2); line-height:1.58;}
.olho{
  font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--texto-2); font-stretch:112%; display:flex; align-items:center; gap:14px;
}
.olho::before{content:''; width:34px; height:3px; border-radius:2px; background:var(--ouro); flex:none;}
.ia-txt{color:var(--violeta-2);}
.destaque{color:var(--texto);}

/* ── Cabecalho fixo ───────────────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:40;
  background:rgba(11,14,16,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
}
.topo .env{display:flex; align-items:center; justify-content:space-between; gap:16px;
           padding-block:14px;}
.topo svg{height:26px; width:auto;}

/* ── Botoes ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:99px; border:1px solid transparent;
  font-family:var(--fam); font-size:1rem; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--violeta); outline-offset:3px;}
.btn-ouro{background:var(--ouro); color:#0B0E10;}
.btn-ouro:hover{filter:brightness(1.08);}
.btn-vazio{background:transparent; color:var(--texto); border-color:var(--borda-forte);}
.btn-vazio:hover{border-color:var(--ouro); color:var(--ouro);}
.btn-g{padding:18px 34px; font-size:1.08rem;}
.topo .btn{padding:11px 20px; font-size:.94rem;}

/* ── A trilha: a marca virando navegacao ──────────────────────────────────── */
.trilha{
  position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:30;
  display:flex; flex-direction:column; gap:16px; align-items:center;
}
.trilha a{
  width:9px; height:9px; border-radius:2px; background:var(--borda-forte);
  transform:rotate(-20deg); display:block; position:relative;
  transition:background .3s ease, width .3s ease, height .3s ease;
}
.trilha a::after{
  content:attr(data-nome); position:absolute; left:22px; top:50%;
  transform:translateY(-50%) rotate(20deg) translateX(-6px);
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.trilha a:hover::after,.trilha a:focus-visible::after{
  opacity:1; transform:translateY(-50%) rotate(20deg) translateX(0);
}
.trilha a.aqui{background:var(--ouro); width:15px; height:15px;}
@media (max-width:1200px){.trilha{display:none;}}

/* ── Heroi ────────────────────────────────────────────────────────────────── */
.heroi{position:relative; padding-block:clamp(52px,8vw,104px) clamp(48px,7vw,92px);
       overflow:hidden;}
.heroi .env{display:flex; flex-direction:column; gap:clamp(34px,4.5vw,60px);}
.heroi-txt{display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px);
           align-items:flex-start;}
.heroi h1{max-width:19ch;}
.heroi .lead{max-width:62ch;}
.selo{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:99px;
  background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.34);
  color:var(--violeta-2); font-size:.92rem; font-weight:600;
}
.selo i{width:8px; height:8px; border-radius:2px; background:var(--violeta);
        transform:rotate(-20deg); flex:none;}
.acoes{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.sob-botao{font-size:.9rem; color:var(--texto-3);}

/* ── O trio: as tres caras do mesmo sistema ──────────────────────────────
   Um sistema, tres pessoas: o cliente no portal, voce no painel, o tecnico na
   rua. Os rotulos ficam EM CIMA das imagens de proposito: assim eles alinham
   numa linha so, enquanto as telas penduram em alturas diferentes por causa
   da proporcao de cada uma. O desalinhamento vira ritmo, nao bagunca. */
.trio{
  position:relative; display:block; padding-bottom:5.5%;
}
.trio::before{  /* brilho quente por tras da tela do meio */
  content:''; position:absolute; inset:-10% 10% 6%;
  background:radial-gradient(closest-side,rgba(255,197,61,.14),rgba(255,197,61,0) 70%);
  pointer-events:none;
}
.trio figure{margin:0; min-width:0;}
.trio .mesa{width:74%; margin-inline:auto;}
.trio .fone-a,.trio .fone-b{position:absolute; bottom:0; width:18.7%; z-index:2;}
.trio .fone-a{left:0;}
.trio .fone-b{right:0;}
.trio img{
  width:100%; border-radius:16px; border:1px solid var(--borda);
  background:var(--superficie);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -24px rgba(0,0,0,.88);
}
.trio .fone-a img,.trio .fone-b img{
  border:1px solid var(--borda-forte);
  box-shadow:
    0 0 0 7px var(--tinta),                      /* recorte: separa do que esta atras */
    0 0 0 8px rgba(255,255,255,.07),             /* fio de luz na borda do recorte */
    inset 0 1px 0 rgba(255,255,255,.09),
    0 26px 52px -18px rgba(0,0,0,.95);
}
/* Os rotulos ficam numa faixa propria embaixo, distribuidos nas mesmas tres
   posicoes dos aparelhos (esquerda, centro, direita). Sair de dentro das
   figuras foi o que resolveu: com o celular absoluto, a legenda dentro dele
   nunca teria como alinhar com as outras. */
.trio-legendas{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:22px;
  text-align:center;
}
.trio-legendas span{font-size:.92rem; color:var(--texto-2); line-height:1.35;}
.trio-legendas b{display:block; color:var(--texto); font-weight:700; font-size:1.02rem;}
/* os celulares avancam por cima da tela do meio */
.trio .mesa img{border-radius:12px;}
/* o arco da marca, gigante e vazado, sangrando no canto */
.arco-fundo{position:absolute; inset:auto -14% -30% auto; width:min(760px,72vw);
            opacity:.5; pointer-events:none; z-index:-1;}

/* O elo: a frase que amarra as tres telas, com fio saindo para cada lado. */
.trio-elo{
  position:absolute; left:50%; bottom:1%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:11px 22px; border-radius:99px;
  background:rgba(14,20,24,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(168,85,247,.42);
  color:var(--violeta-2); font-size:.94rem; font-weight:600;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9);
}
.trio-elo i{width:8px; height:8px; border-radius:2px; background:var(--violeta);
            transform:rotate(-20deg); flex:none;}
.trio-elo::before,.trio-elo::after{
  content:''; position:absolute; top:50%; width:52px; height:1px;
  background:linear-gradient(90deg,rgba(168,85,247,0),rgba(168,85,247,.55));
  pointer-events:none;
}
.trio-elo::before{right:100%; margin-right:8px;}
.trio-elo::after{left:100%; margin-left:8px; transform:scaleX(-1);}

/* ── Secoes ───────────────────────────────────────────────────────────────── */
section{position:relative;}
.secao{padding-block:clamp(56px,7.5vw,104px);}
.secao > .env{display:flex; flex-direction:column; gap:clamp(28px,3.4vw,46px);}
.cabeca{display:flex; flex-direction:column; gap:16px;}
.cabeca h2{max-width:22ch;}
.risca{border-top:1px solid var(--borda);}

/* ── Numeros da dor ───────────────────────────────────────────────────────── */
.numeros{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
         gap:clamp(22px,3vw,44px);}
.num{display:flex; flex-direction:column; gap:12px; padding-top:20px;
     border-top:1px solid var(--borda);}
.num.punch{border-top-color:var(--ouro);}
.num .valor{font-size:clamp(3rem,6vw,4.6rem); font-weight:800; font-stretch:122%;
            line-height:.88; letter-spacing:-.035em; font-variant-numeric:tabular-nums;}
.num.punch .valor{color:var(--ouro);}
.num .valor small{font-size:.4em; color:var(--texto-3);}
.num p{color:var(--texto-2); font-size:1rem;}
.num p b{color:var(--texto); font-weight:700;}

/* ── Passos com celular ───────────────────────────────────────────────────── */
.passos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
        gap:clamp(20px,2.6vw,32px); align-items:start;}
.passo{display:flex; flex-direction:column; gap:18px;}
.passo img{
  border-radius:16px; border:1px solid var(--borda); background:var(--superficie);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.8);
  height:clamp(240px,26vw,340px); width:auto; max-width:100%;
  object-fit:contain; margin-inline:auto;
}
.passo .txt{display:flex; flex-direction:column; gap:4px;}
.passo .n{
  font-size:.74rem; font-weight:700; letter-spacing:.18em; color:var(--ouro);
  font-variant-numeric:tabular-nums;
}
.passo p{color:var(--texto-2); font-size:.97rem; line-height:1.45;}
.passo b{display:block; color:var(--texto); font-weight:700; font-size:1.04rem;
         margin-bottom:2px;}

/* ── Tela larga com lista ao lado ─────────────────────────────────────────── */
.dupla{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,56px);
       align-items:center;}
.dupla.invertida{grid-template-columns:1fr 1.5fr;}
.dupla.invertida .quadro{order:2;}
.tela{border-radius:var(--raio); border:1px solid var(--borda); background:var(--superficie);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 28px 56px -26px rgba(0,0,0,.85);
      width:100%;}
.itens{display:flex; flex-direction:column; gap:clamp(16px,2vw,24px);}
.item{padding-left:16px; border-left:3px solid var(--borda);
      display:flex; flex-direction:column; gap:5px;}
.item.forte{border-left-color:var(--ouro);}
.item.ia{border-left-color:var(--violeta);}
.item.ia h3{color:var(--violeta-2);}
.item p{color:var(--texto-2); font-size:.98rem; line-height:1.45;}

/* Fileira de celulares alinhados pela altura, mesma ideia dos passos. */
.fileira{display:flex; gap:clamp(14px,1.8vw,24px); justify-content:center; flex-wrap:wrap;}
.fileira img{
  height:clamp(260px,30vw,400px); width:auto; max-width:100%; object-fit:contain;
  border-radius:16px; border:1px solid var(--borda); background:var(--superficie);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.82);
}

/* Duas telas largas empilhadas, com respiro entre elas. */
.pilha{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px);}

/* ── Listas de topicos ────────────────────────────────────────────────────── */
.topicos{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.topicos.duas-col{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px 28px;}
.topicos li{display:flex; align-items:baseline; gap:12px; color:var(--texto-2);
            font-size:1rem; line-height:1.4;}
.topicos li::before{content:''; width:7px; height:7px; border-radius:2px; flex:none;
                    background:var(--ouro); transform:rotate(-20deg) translateY(-1px);}
.rotulo{font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
        color:var(--texto-3);}

/* ── Faixa de ganho ───────────────────────────────────────────────────────── */
.ganho{padding:20px 26px; border-radius:var(--raio); background:var(--superficie);
       border:1px solid var(--borda); border-left:4px solid var(--ouro);
       color:var(--texto-2); font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.5;}
.ganho b{color:var(--texto); font-weight:700;}

/* ── Chamada no meio da pagina ────────────────────────────────────────────── */
.chamada{padding-block:clamp(48px,6vw,84px); background:
  radial-gradient(120% 140% at 50% 0%, #131A20 0%, rgba(19,26,32,0) 70%);
  border-block:1px solid var(--borda);}
.chamada .env{display:flex; flex-direction:column; align-items:center; text-align:center;
              gap:22px;}
.chamada h2{max-width:20ch;}
.chamada .lead{max-width:52ch;}

/* ── Modulos ──────────────────────────────────────────────────────────────── */
.modulos{list-style:none; margin:0; padding:0;
         display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
         gap:14px 30px;}
.modulos li{display:flex; align-items:baseline; gap:11px; font-size:1rem;
            color:var(--ouro); line-height:1.35;}
.modulos li::before{content:''; width:7px; height:7px; border-radius:2px; flex:none;
                    background:var(--ouro-2); transform:rotate(-20deg) translateY(-1px);}
.modulos li.ia{color:var(--violeta-2);}
.modulos li.ia::before{background:var(--violeta);}
.legenda{font-size:.9rem; color:var(--texto-3);}
.legenda b{color:var(--ouro); font-weight:700;}

/* ── O formulario ─────────────────────────────────────────────────────────── */
.form-secao{padding-block:clamp(56px,7.5vw,110px); scroll-margin-top:80px;}
.form-grade{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px);
            align-items:start;}
.form-txt{display:flex; flex-direction:column; gap:22px;}
.form-txt .lead{max-width:44ch;}
.promessas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.promessas li{display:flex; align-items:baseline; gap:12px; color:var(--texto-2); font-size:1rem;}
.promessas li::before{content:''; width:7px; height:7px; border-radius:2px; flex:none;
                      background:var(--verde); transform:rotate(-20deg) translateY(-1px);}

.cartao{background:var(--superficie); border:1px solid var(--borda);
        border-radius:20px; padding:clamp(24px,3vw,38px);
        box-shadow:0 30px 70px -34px rgba(0,0,0,.9);}
.campos{display:flex; flex-direction:column; gap:18px;}
.campo{display:flex; flex-direction:column; gap:7px;}
.campo label{font-size:.86rem; font-weight:700; letter-spacing:.02em; color:var(--texto);}
.campo input{
  width:100%; padding:14px 16px; border-radius:10px;
  background:var(--tinta); border:1px solid var(--borda-forte); color:var(--texto);
  font-family:var(--fam); font-size:1rem; line-height:1.3;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.campo input::placeholder{color:var(--texto-3);}
.campo input:focus{outline:none; border-color:var(--ouro);
                   box-shadow:0 0 0 3px rgba(255,197,61,.18);}
.campo input[aria-invalid="true"]{border-color:var(--vermelho);}
.erro{font-size:.86rem; color:var(--vermelho);}
.aviso-geral{padding:13px 16px; border-radius:10px; font-size:.94rem;
             background:rgba(255,90,90,.09); border:1px solid rgba(255,90,90,.3);
             color:#FF8A8A;}
.rodape-form{font-size:.86rem; color:var(--texto-3); line-height:1.5;}
/* A armadilha: escondida de gente, visivel para robo que le o HTML. Nao usa
   display:none porque parte dos robos ignora campo assim; fora da tela ele
   parece um campo comum. */
.armadilha{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.sucesso{display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
.sucesso .marca-ok{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.35);
  color:var(--verde); font-size:1.5rem; font-weight:800;
}
.sucesso h3{font-size:clamp(1.3rem,2.4vw,1.9rem);}
.sucesso p{color:var(--texto-2);}

/* ── Pagina de texto corrido (privacidade) ────────────────────────────────── */
/* Medida de leitura curta de proposito: politica que ninguem le nao informa
   ninguem, e linha larga demais e o jeito mais rapido de nao ser lida. */
.texto-legal{padding-block:clamp(44px,6vw,84px);}
.texto-legal .env{max-width:720px; display:flex; flex-direction:column; gap:14px;}
.texto-legal h1{font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:6px;}
.texto-legal h2{
  font-size:clamp(1.1rem,1.6vw,1.35rem); font-stretch:110%; letter-spacing:-.012em;
  margin-top:26px;
}
.texto-legal p{color:var(--texto-2); line-height:1.65;}
.texto-legal p b{color:var(--texto); font-weight:700;}
.texto-legal a{color:var(--ouro); text-decoration:underline; text-underline-offset:3px;}
.texto-legal a:hover{text-decoration-thickness:2px;}
.texto-legal .topicos{margin-top:4px;}

/* ── Rodape ───────────────────────────────────────────────────────────────── */
.pe{padding-block:38px; border-top:1px solid var(--borda); color:var(--texto-3);
    font-size:.9rem;}
.pe .env{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px;}
.pe .pe-links{margin-left:auto; display:flex; gap:18px;}
.pe .pe-links a{color:var(--texto-2); text-decoration:none;}
.pe .pe-links a:hover{color:var(--ouro); text-decoration:underline; text-underline-offset:3px;}
.rodape-form a{color:var(--ouro); text-decoration:underline; text-underline-offset:2px;}
@media (max-width:600px){.pe .pe-links{margin-left:0;}}
.pe svg{height:20px; width:auto; opacity:.6;}

/* ── As conversas do WhatsApp ─────────────────────────────────────────────── */
/* NAO SAO PRINT: sao desenhadas aqui, em CSS. O texto dentro dos baloes e o
   MESMO que o sistema envia (gerar_laudo.py, followup.py, db/followup.py), o
   que da duas vantagens praticas: mudar uma palavra e trabalho de segundos, e
   nenhuma imagem de 300 KB entra na pagina. Nitido em qualquer tela.

   As cores sao as do WhatsApp no tema escuro (#0B141A de fundo, #005C4B no
   balao enviado, #202C33 no recebido). Por sorte elas convivem com a paleta
   desta pagina, o que faz a moldura parecer parte do desenho e nao um
   corpo estranho colado por cima. */
.conversas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,30px);
}
.conversa{display:flex; flex-direction:column; gap:14px; margin:0; min-width:0;}

/* O rotulo de cima: QUANDO isso acontece. E o que amarra as tres numa historia
   so, em vez de tres exemplos soltos. */
.conversa-quando{display:flex; flex-direction:column; gap:3px;}
.conversa-quando .n{font-size:.74rem; font-weight:700; letter-spacing:.18em;
                    color:var(--ouro); font-variant-numeric:tabular-nums;}
.conversa-quando b{color:var(--texto); font-weight:700; font-size:1.02rem;
                   line-height:1.25;}

/* ── O aparelho ───────────────────────────────────────────────────────────── */
/* `flex:1` e o truque que iguala as tres molduras sem eu chutar altura nenhuma:
   a linha do grid tem a altura da conversa mais longa, e as outras duas esticam
   ate la. Com o corpo alinhado ao fim (`justify-content:flex-end`), a conversa
   fica encostada embaixo, igualzinho a um celular de verdade, que mostra o
   fim do papo e nao o comeco. */
.zap{
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  border-radius:22px; border:1px solid var(--borda-forte); background:#0B141A;
  box-shadow:0 26px 52px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
.zap-topo{
  display:flex; align-items:center; gap:9px; padding:11px 13px;
  background:#1F2C34; border-bottom:1px solid rgba(0,0,0,.35); flex:none;
}
.zap-volta{width:7px; height:7px; flex:none; border-left:2px solid #8696A0;
           border-bottom:2px solid #8696A0; transform:rotate(45deg);}
.zap-foto{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:#41525D; color:#E9EDEF;
  font-size:.82rem; font-weight:700;
}
.zap-quem{display:flex; flex-direction:column; min-width:0;}
.zap-quem b{color:#E9EDEF; font-size:.86rem; font-weight:600; line-height:1.2;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.zap-quem i{color:#8696A0; font-size:.7rem; font-style:normal; line-height:1.3;}
/* O tres-pontinhos do canto: nada faz, e so o que faltava para o cabecalho
   parecer o cabecalho de uma conversa de verdade. */
.zap-mais{margin-left:auto; color:#8696A0; font-size:1rem; line-height:1; flex:none;}

.zap-corpo{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:9px;
  padding:14px 11px 13px; overflow:hidden; position:relative;
}
/* O `overflow:hidden` acima e so cinto de seguranca: hoje nenhuma das tres
   conversas encosta no teto (medido no navegador: a mais alta sobra 14px). */
.zap-dia{
  align-self:center; padding:4px 12px; border-radius:8px; background:#182229;
  color:#8696A0; font-size:.66rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; flex:none;
}

/* ── Os baloes ────────────────────────────────────────────────────────────── */
.zap-bolha{
  max-width:88%; padding:7px 9px 5px; border-radius:9px; position:relative;
  color:#E9EDEF; font-size:.79rem; line-height:1.42; flex:none;
  box-shadow:0 1px 1px rgba(0,0,0,.28);
}
.zap-bolha p{margin:0;}
.zap-bolha p + p{margin-top:.55em;}
.zap-bolha b{font-weight:600;}
.zap-bolha .lnk{color:#53BDEB;}
.zap-bolha.sai{align-self:flex-end; background:#005C4B; border-top-right-radius:2px;}
.zap-bolha.entra{align-self:flex-start; background:#202C33; border-top-left-radius:2px;}

/* A hora encosta no canto de baixo, e o tique azul mora ao lado dela. */
.zap-hora{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin-top:3px; color:rgba(233,237,239,.6); font-size:.62rem;
  font-variant-numeric:tabular-nums;
}
.zap-hora .tique{width:15px; height:auto; flex:none;}
.zap-hora .tique path{fill:none; stroke:#53BDEB; stroke-width:1.9;
                      stroke-linecap:round; stroke-linejoin:round;}

/* O selo violeta: a UNICA coisa nesta moldura que nao e WhatsApp. Ele e
   deliberadamente de outra cor e de outra fonte, porque e a nossa anotacao
   sobre a mensagem: quem escreveu aquilo foi o sistema, e nao uma pessoa.
   Fica FORA do balao, flutuando sobre o fundo escuro: dentro do verde ele
   dava 3,45:1 de contraste, abaixo do minimo de 4,5:1 para texto miudo. */
.zap-auto{
  align-self:flex-end; margin-bottom:-4px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fam); font-size:.63rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--violeta-2);
}
.zap-auto i{width:6px; height:6px; border-radius:1px; background:var(--violeta);
            transform:rotate(-20deg); flex:none;}

/* O anexo em PDF, do jeito que o WhatsApp mostra documento. */
.zap-doc{
  display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:7px;
  background:rgba(0,0,0,.22); margin-bottom:6px;
}
.zap-doc .folha{
  width:26px; height:32px; flex:none; border-radius:3px; background:#E9EDEF;
  display:grid; place-items:center; color:#B02A1E; font-size:.5rem; font-weight:800;
  letter-spacing:.02em;
}
.zap-doc span{display:flex; flex-direction:column; min-width:0;}
.zap-doc b{font-size:.74rem; font-weight:600; white-space:nowrap; overflow:hidden;
           text-overflow:ellipsis;}
.zap-doc i{font-style:normal; font-size:.64rem; color:rgba(233,237,239,.55);}

.conversa > figcaption{color:var(--texto-2); font-size:.94rem; line-height:1.45;}
.conversa > figcaption b{color:var(--texto); font-weight:700;}

/* Tres celulares lado a lado nao cabem em telefone. Abaixo de 900px eles viram
   uma pilha estreita e centralizada, e a moldura volta a ter a altura do
   proprio conteudo (sem o `flex:1`, que so servia para igualar as colunas). */
@media (max-width:900px){
  .conversas{grid-template-columns:1fr; max-width:430px; margin-inline:auto;
             gap:34px;}
  .zap{flex:none;}
  /* No telefone a coluna e estreita e a moldura fica em tamanho quase real:
     o texto da mensagem sobe um degrau para nao virar letra de bula. */
  .zap-bolha{font-size:.84rem; max-width:92%;}
}

/* ── A lupa: clicar no print e ver ele grande ─────────────────────────────── */
/* Os prints da pagina sao pequenos de proposito (13 deles numa pagina so), mas
   quem esta decidindo se compra QUER ler a tela. A lupa resolve sem trocar as
   imagens: e a mesma que ja carregou, mostrada do tamanho que o arquivo tem.
   Nada aqui e obrigatorio: sem JavaScript a lupa nem nasce, e a pagina segue
   inteira. */
.ampliavel{cursor:zoom-in;}
.lupa{
  position:fixed; inset:0; z-index:60; display:none;
  place-items:center; align-content:center;
  padding:clamp(16px,4vw,54px);
  background:rgba(8,11,13,.94); backdrop-filter:blur(8px);
}
.lupa[data-aberta]{display:grid;}
.lupa figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
             max-width:100%; min-width:0;}
.lupa .area{
  display:flex; max-width:min(1500px,94vw); max-height:80vh; min-width:0;
  border-radius:14px; border:1px solid var(--borda-forte);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.95); overflow:hidden;
}
.lupa img{max-width:100%; max-height:80vh; width:auto; height:auto; display:block;}
.lupa figcaption{color:var(--texto-2); font-size:.96rem; text-align:center; max-width:64ch;}
.lupa .dica{display:none; margin-top:5px; color:var(--ouro); font-size:.86rem;}

/* MODO ZOOM: para o print de tela larga aberto no celular. Encolher uma tela de
   1888px de largura para caber num telefone da uma faixa de 164px de altura,
   que ninguem le (medido). Entao, quando o que caberia ficar abaixo do limite
   de legibilidade, a imagem vai para 1100px de largura e a pessoa ARRASTA. */
.lupa.zoom .area{overflow:auto; max-height:78vh; -webkit-overflow-scrolling:touch;
                 cursor:grab;}
.lupa.zoom img{max-width:none; max-height:none; width:1100px;}
.lupa.zoom .dica{display:block;}
.lupa .fechar{
  position:absolute; top:16px; right:16px; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--superficie); border:1px solid var(--borda-forte); color:var(--texto);
  font-family:var(--fam); font-size:1.25rem; line-height:1;
}
.lupa .fechar:hover{border-color:var(--ouro); color:var(--ouro);}
.lupa .fechar:focus-visible{outline:3px solid var(--violeta); outline-offset:3px;}
/* Enquanto a lupa esta aberta a pagina atras nao rola. */
body.travada{overflow:hidden;}
@media (prefers-reduced-motion:no-preference){
  .lupa[data-aberta] figure{animation:lupa-entra .22s cubic-bezier(.22,.61,.36,1);}
  @keyframes lupa-entra{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
}
@media (max-width:600px){
  .lupa img{max-height:72vh;}
  .lupa .fechar{top:10px; right:10px;}
}

/* ── Movimento ────────────────────────────────────────────────────────────── */
/* Regra de seguranca: o estado escondido so existe se o JS marcar o <html>.
   Sem JS, nada some. Pagina em branco por causa de enfeite seria pior que
   pagina sem enfeite. */
@media (prefers-reduced-motion:no-preference){
  html[data-anim="on"] .surge{opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  html[data-anim="on"] .surge.vis{opacity:1; transform:none;}
  html[data-anim="on"] .surge.d1{transition-delay:.08s;}
  html[data-anim="on"] .surge.d2{transition-delay:.16s;}
  html[data-anim="on"] .surge.d3{transition-delay:.24s;}
}

/* ── Telas estreitas ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .trio{padding-bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .trio .mesa{grid-column:1 / -1; width:100%; margin:0;}
  .trio .fone-a,.trio .fone-b{position:static; width:auto;}
  .trio::before{inset:-6% 0 40%;}
  .trio-elo{position:static; transform:none; grid-column:1 / -1;
            white-space:normal; justify-self:center; margin-top:4px;}
  .trio-elo::before,.trio-elo::after{display:none;}
  .trio-legendas{grid-template-columns:1fr; gap:10px; text-align:left;}
  .trio-legendas b{display:inline; margin-right:6px;}
  .dupla,.dupla.invertida{grid-template-columns:1fr;}
  .dupla.invertida .quadro{order:0;}
  .form-grade{grid-template-columns:1fr;}
  .topo .btn{padding:10px 16px; font-size:.88rem;}
}
@media (max-width:480px){
  .env{padding-inline:18px;}
  .acoes{width:100%;}
  .acoes .btn{width:100%;}
}

@media print{
  .topo,.trilha,.arco-fundo{display:none;}
  body{background:#fff; color:#000;}
}