@charset "UTF-8";
/* =====================================================================
   A PÁGINA INICIAL DE vnt.com.br
   (21/09/2026 · reestruturada em 22/09 · repintada em 22/09 à noite)

   ⚠️⚠️ A PÁGINA É CLARA DO COMEÇO AO FIM (22/09/2026: *"eu quero tudo
   branco... varie entre branco e aquele branco um pouco mais escuro que
   tem o portal. Algo mais clean, e tá muito AI slop o que você fez"*).

   O QUE SAIU, e não deve voltar:
     · as faixas navy — hero, "tudo junto" e o fecho eram escuros;
     · o néon: fios verdes brilhando, `box-shadow` colorido, os cantinhos
       de moldura, o `drop-shadow` nas setas;
     · as "auroras": pilhas de quatro `radial-gradient` em posições
       ímpares fazendo fundo de nebulosa;
     · a malha de linhas no escuro;
     · texto com degradê (o "um lugar só", os números dos passos);
     · o botão com degradê de três paradas e halo verde.
   Isso tudo junto é o visual genérico de página feita por IA, e ele
   reconheceu de primeira. Não é o visual do Vnt.

   ⚠️⚠️ A PERSONALIDADE VEM DO SISTEMA, E OS VALORES SÃO OS DELE — copiados
   de `assets/portal.css`, não inventados aqui:
     · papel branco (#FFF) sobre a parede clara (#F3F5F8), alternando;
     · borda fina #E7E9EF, raio 10/14/18, sombra quase invisível;
     · botão CHAPADO, sem brilho (é assim o `.btn-accent` do portal);
     · o verde #84BC25 entra em pouca coisa e sempre chapado;
     · a única "textura" é a mesma mancha verde larguíssima que o portal
       tem no `body::before` — é ela que faz o cinza do portal parecer um
       branco mais quente. É o "branco mais bege" que ele descreveu.
   Mudou a identidade do sistema? Estes valores mudam junto.

   ⚠️ NADA SE MEXE SOZINHO. Sem animação de entrada, sem carrossel, sem
   popup. As únicas transições são de :hover e :focus.

   ⚠️⚠️ SEÇÃO VAZIA É DEFEITO (22/09/2026, primeira recusa: *"achei muito
   mal estruturado"*). Toda seção precisa de uma âncora visual além do
   texto, e todo cartão precisa encher a própria altura.

   ⚠️ SEM BIBLIOTECA. Só a fonte do Google.
   ===================================================================== */

*, *::before, *::after{ box-sizing:border-box; }

:root{
  /* --- os valores do portal (assets/portal.css) ---
     ⚠️ As cores dos quatro produtos NÃO moram aqui: elas viajam pelo
     `style` de cada bloco, vindas do PHP (que por sua vez copia
     includes/bracos.php). Token global para elas seria um convite a
     usá-las fora do bloco do produto. */
  --verde:#84BC25;
  --verde-escuro:#679405;
  --verde-suave:#F0F7E1;

  --papel:#FFFFFF;      /* a folha */
  --papel-2:#F3F5F8;    /* a parede clara do portal (--surface-0) */
  --papel-3:#EBEEF3;    /* um degrau abaixo, para o rodapé e a moldura */

  --tinta:#131829;
  --tinta-2:#59607A;
  --tinta-3:#8B92A8;
  --linha:#E7E9EF;
  --linha-forte:#D6DAE4;

  --raio:10px; --raio-m:14px; --raio-g:18px;
  --sombra:0 1px 3px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.04);
  --sombra-m:0 6px 18px rgba(17,24,39,.08);

  --fonte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Outfit",var(--fonte);
  --largura:1180px;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--fonte); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.lp-dentro{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 20px; }

/* =====================================================================
   AS DUAS SUPERFÍCIES — é só isso que a página alterna

   ⚠️ A MANCHA VERDE É A MESMA DO PORTAL (`body::before` em portal.css),
   e é a única coisa que não é cor chapada na página inteira. Larga,
   fraquíssima, sem direção: é ela que tira o cinza do off-white e o
   deixa com aquele tom levemente mais quente que ele reconhece do
   sistema. Não aumente a opacidade — a 10% vira fundo colorido, e aí a
   seção compete com o conteúdo.
   ===================================================================== */
.claro{ background:var(--papel); color:var(--tinta); position:relative; }
.parede{ background:var(--papel-2); color:var(--tinta); position:relative;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); }
.parede::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(780px 520px at 10% -10%, rgba(132,188,37,.07), transparent 62%),
    radial-gradient(680px 460px at 94% 4%, rgba(132,188,37,.05), transparent 60%);
}
.parede > *{ position:relative; }

.secao{ padding:clamp(60px, 7.5vw, 94px) 0; }
.secao-cabeca{ max-width:64ch; }
.secao-cabeca.centro{ margin-left:auto; margin-right:auto; text-align:center; }
.secao-cabeca.centro .rotulo{ justify-content:center; }
.secao-cabeca.centro .chamada{ margin-left:auto; margin-right:auto; }
.secao-cabeca h2 + .chamada{ margin-top:16px; }

/* =====================================================================
   PEÇAS QUE SE REPETEM
   ===================================================================== */

/* O RÓTULO DE SEÇÃO.
   ⚠️ O MARCADOR É O PINGO DA MARCA, não um tracinho: um quadrado com três
   cantos redondos e o de baixo à esquerda reto — a mesma forma do pingo
   verde do logo Vnt. É a assinatura mais barata que a página tem, e a
   única que ninguém confunde com outro produto. */
.rotulo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
  margin:0 0 16px;
}
.rotulo::before{
  content:""; width:9px; height:9px; flex:0 0 9px;
  background:var(--verde); border-radius:50% 50% 50% 2px;
}

h1, h2, h3{ font-family:var(--display); font-weight:600; letter-spacing:-.022em;
  line-height:1.12; margin:0; color:var(--tinta); text-wrap:balance; }
h1{ font-size:clamp(33px, 5.6vw, 56px); font-weight:500; }
h2{ font-size:clamp(26px, 3.8vw, 38px); }
h3{ font-size:clamp(17px, 2vw, 20px); }
.chamada{ font-size:clamp(15.5px, 1.8vw, 18px); color:var(--tinta-2); line-height:1.6; max-width:62ch; }

/* O BOTÃO — chapado, como o `.btn-accent` do portal.
   ⚠️ SEM DEGRADÊ E SEM SOMBRA COLORIDA. O botão do sistema é uma cor só;
   o halo verde que estava aqui era enfeite que o Vnt não usa em lugar
   nenhum. */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  font-family:var(--display); font-size:16px; font-weight:600;
  color:#fff; text-decoration:none; white-space:nowrap;
  background:var(--verde-escuro);
  transition:background .15s ease;
}
.botao:hover{ background:var(--verde); color:#fff; }
.botao:focus-visible{ outline:2px solid var(--verde-escuro); outline-offset:3px; }
.botao-g{ padding:17px 36px; font-size:17px; }

.link-discreto{
  font-size:15px; color:var(--tinta-2); text-decoration:none;
  border-bottom:1px solid var(--linha-forte); padding-bottom:2px;
  transition:border-color .15s, color .15s;
}
.link-discreto:hover{ color:var(--tinta); border-bottom-color:var(--verde); }

.ico{ width:22px; height:22px; flex:0 0 22px; color:var(--verde-escuro); }
.ico svg{ width:100%; height:100%; display:block; }

/* o cartão padrão da página: o `.card` do portal, sem mais nada */
.cartao{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-m); box-shadow:var(--sombra);
}

/* =====================================================================
   TOPO — a faixa clara, como a do sistema
   ===================================================================== */
.lp-topo{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha);
}
.lp-topo-dentro{ display:flex; align-items:center; gap:16px; height:66px; }
.lp-topo-marca img{ height:auto; width:auto; max-height:26px; max-width:100%; }
.lp-topo-fim{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.lp-topo .botao{ padding:10px 20px; font-size:15px; }
@media (max-width: 560px){
  .lp-topo-fim .link-discreto{ display:none; }
  .lp-topo-dentro{ height:58px; }
}

/* =====================================================================
   1 · HERO
   ===================================================================== */
.lp-hero{ padding:clamp(56px, 7.5vw, 96px) 0 clamp(40px, 5vw, 60px); text-align:center; }
.lp-hero h1{ margin:0 auto; max-width:16ch; }
/* ⚠️ O DESTAQUE DA FRASE É COR CHAPADA, não texto com degradê. */
.lp-hero h1 em{ font-style:normal; color:var(--verde-escuro); white-space:nowrap; }
.lp-hero .chamada{ margin:20px auto 0; text-align:center; }
.lp-hero-acoes{ display:flex; align-items:center; justify-content:center; gap:22px;
  flex-wrap:wrap; margin-top:30px; }
.lp-hero-nota{ margin:16px 0 0; font-size:13.5px; color:var(--tinta-3); }

/* =====================================================================
   2 · DEMONSTRAÇÃO — a folha em cima da parede

   ⚠️⚠️ O CONTAINER É 16:9 E A ALTURA NÃO DEPENDE DO QUE ESTÁ DENTRO. Ela
   vem do `aspect-ratio`, e o conteúdo é posicionado por `inset:0`. As
   duas regras abaixo já valem para os dois tipos de conteúdo que podem
   entrar aqui, então a troca não move um pixel de nada na página — nem
   do que vem depois. NÃO ponha altura fixa aqui, nem envolva o conteúdo
   em mais uma caixa: é isso que quebraria a troca.

   ⚠️ A MOLDURA É UMA BORDA FINA E UMA SOMBRA CURTA — o mesmo relevo dos
   quadros do sistema. Os cantinhos néon que estavam aqui saíram.
   --------------------------------------------------------------------- */
.lp-demo{ padding:clamp(44px, 6vw, 72px) 0; }
.lp-demo-caixa{ max-width:1020px; margin:0 auto; }

#demonstracao{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:var(--raio-g); overflow:hidden;
  background:var(--papel);
  border:1px solid var(--linha-forte);
  box-shadow:0 18px 44px rgba(17,24,39,.10), 0 2px 6px rgba(17,24,39,.05);
}
#demonstracao > img,
#demonstracao > video{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover; object-position:top center;
  border:0; background:var(--papel);
}
.lp-demo-legenda{
  margin:18px 0 0; text-align:center; font-size:13.5px; color:var(--tinta-3);
}

/* =====================================================================
   3 · O QUE É A VNT — o trilho dos quatro

   ⚠️ ESTA SEÇÃO ERA UM PARÁGRAFO NO VAZIO. O trilho é a âncora dela:
   mostra, sem precisar dizer, o que a frase promete — um sistema, quatro
   aplicativos pendurados no mesmo fio.
   --------------------------------------------------------------------- */
.trilho{
  position:relative; margin:44px 0 0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width: 760px){ .trilho{ grid-template-columns:repeat(4, 1fr); gap:16px; } }

/* o fio que passa POR TRÁS dos quatro — linha fina, sem brilho */
.trilho::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:12px; bottom:12px; width:1px; transform:translateX(-50%);
  background:var(--linha-forte);
}
@media (min-width: 760px){
  .trilho::before{
    left:7%; right:7%; top:50%; bottom:auto; width:auto; height:1px; transform:none;
    background:var(--linha-forte);
  }
}
.trilho-item{
  position:relative; z-index:1; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio-m);
  padding:22px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  min-height:116px; box-shadow:var(--sombra);
}
/* ⚠️⚠️ NUNCA TRAVE ALTURA E LARGURA JUNTAS NUM LOGO. As quatro artes têm
   proporções bem diferentes (2,88 a 6,19), então altura fixa + o
   `max-width` do reset esmaga a arte na horizontal. O par certo é
   `max-height`/`max-width` com os dois lados em `auto`: o navegador
   escolhe qual limite morde primeiro e a proporção nunca muda. Foi esse
   o defeito que ele viu ("as logos estão esticadas"). */
.trilho-item img{ height:auto; width:auto; max-height:23px; max-width:88%; }
.trilho-item span{ font-size:13px; color:var(--tinta-3); line-height:1.4; }

.garantias{ display:grid; gap:18px; margin:36px 0 0; padding:0; list-style:none; }
@media (min-width: 760px){ .garantias{ grid-template-columns:repeat(3, 1fr); gap:26px; } }
.garantias li{ display:flex; gap:12px; align-items:flex-start; text-align:left;
  font-size:15px; color:var(--tinta-2); line-height:1.5; }
.garantias b{ display:block; color:var(--tinta); font-family:var(--display);
  font-size:16px; font-weight:600; margin:0 0 3px; }

/* =====================================================================
   4 · COMO FUNCIONA

   ⚠️ O NÚMERO É COR CHAPADA. Ele já foi contorno vazado (sumia) e depois
   degradê no texto (enfeite que o sistema não usa). Verde chapado,
   grande, e pronto.
   ⚠️ E O CARTÃO ENCHE A PRÓPRIA ALTURA: número em cima, título no meio,
   texto empurrado para a base por `margin-top:auto`.
   --------------------------------------------------------------------- */
.passos{ display:grid; gap:16px; margin:42px 0 0; padding:0; list-style:none; }
@media (min-width: 860px){ .passos{ grid-template-columns:repeat(3, 1fr); gap:20px; } }

.passo{
  position:relative; background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:28px 26px 26px; box-shadow:var(--sombra);
  display:flex; flex-direction:column; gap:10px; min-height:196px;
}
.passo-topo{ display:flex; align-items:center; gap:12px; }
.passo-n{
  font-family:var(--display); font-size:38px; font-weight:700; line-height:1;
  margin:0; letter-spacing:-.04em; color:var(--verde);
}
.passo-topo .ico{ width:24px; height:24px; flex-basis:24px; margin-left:auto; color:var(--tinta-3); }
.passo h3{ margin:0; }
.passo p{ margin:auto 0 0; color:var(--tinta-2); font-size:15px; }

/* =====================================================================
   5 · OS QUATRO APLICATIVOS

   ⚠️ SÃO TRÊS BLOCOS PARA QUATRO APLICATIVOS (22/09/2026): Agenda e
   Projetos dividem um retângulo largo, porque são a mesma coisa no
   sistema. Os dois simples (CRM e Atendimento) continuam idênticos entre
   si — o que muda neles é só a variável `--c`.
   ⚠️ TODO BLOCO TEM UMA PESSOA, E UMA SÓ. É o que mantém os simples com o
   mesmo peso do duplo, e foi por isso que a pessoa passou a ser do BLOCO
   e não do aplicativo (ver o ⚠️ de `$blocos` no index.php).

   ⚠️ A COR DO PRODUTO ENTRA CHAPADA E EM POUCA COISA: uma barra de 3px no
   topo, o marcador da lista e a frase. Nada de brilho colorido nem de
   mancha no canto — era o que fazia o cartão parecer de outro sistema.
   ===================================================================== */
.apps{ display:grid; gap:18px; margin:42px 0 0; }
@media (min-width: 900px){ .apps{ grid-template-columns:repeat(2, 1fr); gap:20px; } }

.app{
  --c:var(--verde);
  position:relative; overflow:hidden;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:0 30px 28px; box-shadow:var(--sombra);
  display:flex; flex-direction:column;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* a barra da cor do produto, colada no topo do cartão */
.app::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--c);
}
.app:hover{ border-color:var(--linha-forte); box-shadow:var(--sombra-m); }
.app > *{ position:relative; z-index:1; }

@media (min-width: 900px){ .app-duplo{ grid-column:1 / -1; } }
/* ⚠️ TODO BLOCO USA `.app-duplo-metades`, inclusive o simples — ali ela é
   uma grade de uma coluna só. Ter uma estrutura só evita dois caminhos
   de marcação para manter iguais na mão. */
.app-duplo-metades{ display:grid; gap:26px; padding-top:30px; }
@media (min-width: 720px){ .app-duplo .app-duplo-metades{ grid-template-columns:1fr 1fr; gap:38px; } }

/* ⚠️⚠️ O MESMO CUIDADO DO TRILHO: `align-self` para a imagem não ser
   esticada pelo flex em coluna, e `max-height`/`max-width` com os dois
   lados em `auto` para a proporção nunca mudar. As quatro logos já
   renderizaram 406×36 todas iguais por causa disso. Não devolva `height`
   fixo aqui. */
.app-logo{ align-self:flex-start; height:auto; width:auto;
  max-height:32px; max-width:100%; margin:0 0 14px; }
.app-frase{ font-family:var(--display); font-size:clamp(18px, 2vw, 21px); font-weight:500;
  line-height:1.25; margin:0 0 18px; color:var(--c); letter-spacing:-.01em; max-width:22ch; }
.app-lista{ list-style:none; margin:0; padding:0 150px 0 0; display:grid; gap:11px; }
.app-lista li{ position:relative; padding-left:22px; font-size:15px; color:var(--tinta-2); line-height:1.5; }
.app-lista li::before{
  content:""; position:absolute; left:2px; top:.6em; width:7px; height:7px;
  background:var(--c); border-radius:50% 50% 50% 2px;
}
/* ⚠️ SÓ A ÚLTIMA COLUNA ABRE ESPAÇO PARA A PESSOA. A da esquerda usa a
   largura inteira: a pessoa mora no canto de baixo à direita do cartão,
   e recuar as duas deixaria um buraco no meio. */
.app-duplo .app-lista{ padding-right:0; }
@media (min-width: 720px){
  .app-duplo .app-duplo-metades > div:last-child .app-lista{ padding-right:160px; }
}
@media (max-width: 719px){
  .app-duplo .app-duplo-metades > div:last-child .app-lista{ padding-right:96px; }
}

.app-pessoa{
  position:absolute; right:-24px; bottom:-12px; width:182px; height:auto;
  z-index:0; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 64%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 64%, transparent 99%);
}
/* ⚠️ NÃO EXISTE MAIS "PESSOA ESPELHADA". Ela existia para a assistente
   aparecer duas vezes sem parecer engano — o que deixou de ser preciso
   quando Agenda e Projetos viraram um bloco só e ela passou a aparecer
   UMA vez. Se alguém devolver a duplicata, o espelho volta junto. */
@media (max-width: 520px){
  .app{ padding:0 22px 24px; }
  .app-duplo-metades{ padding-top:26px; }
  .app-pessoa{ width:136px; right:-18px; }
  .app-lista{ padding-right:94px; }
}

/* =====================================================================
   6 · TUDO JUNTO — o caminho do trabalho

   ⚠️ A SETA É `::after` DO PONTO, e o último não tem. No celular a linha
   vira coluna e a seta aponta para baixo — a mesma peça girada, não um
   segundo desenho.
   ⚠️ A COR DE CADA PONTO É A DO APLICATIVO DELE, chapada, na barra de
   cima e no nome. Sobre papel branco o vermelho e o roxo se leem sem
   precisar de tom clareado — o `--pc-txt` que existia aqui era remendo
   do tempo em que a seção era escura, e saiu.
   ===================================================================== */
.fluxo{ display:grid; gap:12px; margin:42px 0 0; padding:0; list-style:none; }
@media (min-width: 900px){ .fluxo{ grid-template-columns:repeat(4, 1fr); gap:30px; } }

.fluxo li{ position:relative; }
.fluxo-ponto{
  position:relative; height:100%; padding:24px 22px;
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-m); box-shadow:var(--sombra); overflow:hidden;
}
.fluxo-ponto::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--pc, var(--verde));
}
.fluxo-ponto b{ display:block; font-family:var(--display); font-size:16.5px; font-weight:600;
  color:var(--pc, var(--tinta)); margin:0 0 4px; letter-spacing:-.01em; }
.fluxo-ponto span{ font-size:14.5px; color:var(--tinta-2); line-height:1.5; }

.fluxo li:not(:last-child)::after{
  content:""; position:absolute; z-index:2;
  left:50%; bottom:-12px; transform:translateX(-50%) rotate(90deg);
  width:10px; height:10px;
  border-right:2px solid var(--linha-forte); border-top:2px solid var(--linha-forte);
}
@media (min-width: 900px){
  .fluxo li:not(:last-child)::after{
    left:auto; right:-20px; bottom:auto; top:50%; transform:translateY(-50%) rotate(45deg);
  }
  .fluxo li:not(:last-child)::before{
    content:""; position:absolute; top:50%; right:-30px; width:30px; height:1px;
    background:var(--linha-forte);
  }
}
/* ⚠️ A FRASE DE FECHO É A CONCLUSÃO DA SEÇÃO, não um rodapézinho cinza. */
.lp-junto-fim{
  margin:32px 0 0; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:16px; font-weight:500; color:var(--tinta);
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--linha); background:var(--papel); box-shadow:var(--sombra);
}

/* =====================================================================
   7 · QUEM FAZ
   ===================================================================== */
.quem-grade{ display:grid; gap:34px; align-items:center; }
@media (min-width: 900px){ .quem-grade{ grid-template-columns:1fr minmax(300px, 400px); gap:56px; } }
.quem-texto p{ color:var(--tinta-2); font-size:16px; margin:16px 0 0; max-width:60ch; }

/* ⚠️ OS DOIS NÚMEROS SAEM DO PRÓPRIO TEXTO DA SEÇÃO ("25 anos", "mais de
   3.000 empresas"). Não invente um terceiro: número em página
   institucional é promessa, e promessa que ninguém confere vira
   superlativo — que é justamente o que o pedido proibiu. */
.numeros{ display:flex; gap:40px; flex-wrap:wrap; margin:30px 0 0; padding:26px 0 0;
  border-top:1px solid var(--linha); }
.numeros div{ min-width:140px; }
.numeros b{ display:block; font-family:var(--display); font-size:clamp(30px, 3.6vw, 38px);
  font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--verde-escuro); }
.numeros span{ display:block; margin-top:7px; font-size:14px; color:var(--tinta-2); line-height:1.4; }

/* os dois retratos, encaixados */
.donos{ position:relative; display:flex; justify-content:center; }
.donos figure{
  margin:0; width:52%; position:relative;
  border-radius:var(--raio-g); overflow:hidden;
  background:var(--papel-2); border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.donos figure:nth-child(2){ margin-left:-20px; margin-top:32px; }
.donos img{ width:100%; height:auto; }
.donos figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 14px 12px;
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--tinta); text-align:center;
  background:linear-gradient(to top, rgba(255,255,255,.96) 62%, rgba(255,255,255,0));
}
.donos figcaption small{ display:block; font-weight:400; font-size:11.5px;
  color:var(--tinta-3); letter-spacing:.04em; text-transform:uppercase; }
/* ⚠️ NO CELULAR OS DOIS VIRAM DUAS COLUNAS INTEIRAS. A 52% cada, com o
   encaixe negativo, eles ficavam com ~150px num ecrã de 375. */
@media (max-width: 520px){
  .donos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .donos figure{ width:100%; }
  .donos figure:nth-child(2){ margin:0; }
}

/* =====================================================================
   8 · PERGUNTAS — cartões, não linhas soltas

   ⚠️ ERA UMA LISTA DE LINHAS COM RESPOSTAS DE UMA PALAVRA ("Sim."), o que
   deixava dois terços da largura vazios em cada linha.
   ===================================================================== */
.perguntas{ display:grid; gap:14px; margin:40px 0 0; padding:0; list-style:none; }
@media (min-width: 720px){
  .perguntas{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  /* ⚠️ São CINCO: a última ocupa a linha inteira para não sobrar um
     cartão órfão com um buraco do lado. Mudou a quantidade para par?
     Tire esta regra. */
  .perguntas li:last-child{ grid-column:1 / -1; }
}
.perguntas li{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-m);
  padding:22px 24px; display:flex; gap:13px; align-items:flex-start;
  box-shadow:var(--sombra); transition:border-color .15s ease;
}
.perguntas li:hover{ border-color:var(--linha-forte); }
.perguntas .ico{ margin-top:1px; width:20px; height:20px; flex-basis:20px; }
.perguntas b{ display:block; font-family:var(--display); font-size:16px; font-weight:600;
  color:var(--tinta); margin:0 0 3px; }
.perguntas span{ display:block; color:var(--tinta-2); font-size:15px; }

/* =====================================================================
   9 · FIM — o painel de fechamento

   ⚠️ A ESPINHA VERDE À ESQUERDA É A MESMA DA BARRA DO SISTEMA
   (`#sidebar::before` em portal.css): 4px de verde colados na borda. É a
   peça mais reconhecível do Vnt, e aqui ela fecha a página sem precisar
   de moldura nem de brilho.
   ===================================================================== */
.lp-fim{ padding:clamp(60px, 8vw, 96px) 0; }
.lp-fim-painel{
  position:relative; max-width:860px; margin:0 auto; overflow:hidden;
  padding:clamp(36px, 5vw, 56px) clamp(24px, 5vw, 56px);
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-g); box-shadow:var(--sombra-m);
}
.lp-fim-painel::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--verde);
}
.lp-fim-painel h2{ max-width:18ch; }
.lp-fim-painel .chamada{ margin:16px 0 0; }
.lp-fim-acoes{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:28px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.lp-rodape{ background:var(--papel-3); border-top:1px solid var(--linha); padding:34px 0 30px; }
.lp-rodape-dentro{ display:grid; gap:18px; }
@media (min-width: 760px){
  .lp-rodape-dentro{ grid-template-columns:1fr auto; align-items:center; }
}
.lp-rodape-marca{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lp-rodape-marca img{ height:auto; width:auto; max-height:24px; max-width:100%; }
.lp-rodape-marca span{ font-size:13.5px; color:var(--tinta-3); }
.lp-rodape-links{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
  font-size:14px; color:var(--tinta-3); }
.lp-rodape-links a{ color:var(--tinta-2); text-decoration:none; }
.lp-rodape-links a:hover{ color:var(--tinta); text-decoration:underline; }
.lp-rodape-links .sep{ color:var(--linha-forte); }