/* =============================================================================
   VOZES DA PÓLIO — CAMADA DE EFEITOS
   Estrelas caindo, faixas deslizantes, hover de botão e imagem, modal de
   boas-vindas. Carrega DEPOIS do marca.css e nunca muda a paleta da marca.

   REGRA DE MOVIMENTO (vale para tudo aqui):
   quem pediu menos movimento — no sistema ou no botão ✦ da barra — não vê
   nada se mexendo. E quem pediu movimento explicitamente vê, mesmo que o
   sistema esteja em "reduzir movimento". O botão manda nos dois sentidos.
   ============================================================================= */

/* =============================================================================
   1) ESTRELAS CAINDO — camada fixa, atrás de todo o conteúdo
   ============================================================================= */
/* A camada fica ACIMA dos fundos das seções (que são opacos: creme, verde,
   verde-noite). Com z-index baixo as estrelas sumiam em tudo que tinha cor de
   fundo e só apareciam nos trechos transparentes — era o "não cai no site todo".
   Fica abaixo do cabeçalho (100) e dos modais (300), e não recebe clique. */
#estrelas{
  position:fixed; inset:0; overflow:hidden;
  pointer-events:none; z-index:5;
}
/* Só o z-index aqui. Escrever "position:relative" no .topo apagava o
   position:sticky do marca.css e o menu parava de acompanhar a rolagem. */
.topo{ z-index:100; }
.barra-a11y{ position:relative; z-index:100; }

.estrela{
  position:absolute; top:-30px; left:var(--x,50%);
  width:var(--s,10px); height:var(--s,10px);
  animation:vp-cair var(--dur,9s) linear var(--atraso,0s) infinite,
            vp-brilhar var(--pisca,2s) ease-in-out var(--atraso,0s) infinite;
  will-change:transform,opacity;
}
.estrela svg{ width:100%; height:100%; display:block; fill:var(--cor,#FFD100); }
/* No fundo escuro a estrela é dourada e acesa; no claro, verde e discreta. */
.estrela.dourada svg{ filter:drop-shadow(0 0 6px rgba(255,209,0,.75)); }
.estrela.verde   svg{ filter:drop-shadow(0 0 5px rgba(23,138,82,.5)); }

@keyframes vp-cair{
  from{ transform:translateY(-20px) rotate(0deg); }
  to  { transform:translateY(var(--queda,110vh)) rotate(var(--giro,180deg)); }
}
@keyframes vp-brilhar{
  0%,100%{ opacity:0; }
  50%    { opacity:var(--pico,.7); }   /* teto baixo: passa por cima do texto */
}

/* =============================================================================
   2) FAIXA DESLIZANTE (marquee) — duas linhas, sentidos opostos
   ============================================================================= */
.faixa-desliza{
  overflow:hidden; background:var(--verde); color:#fff;
  border-top:3px solid var(--amarelo); border-bottom:3px solid var(--amarelo);
  padding:0; position:relative; z-index:1;
}
/* Faixa de destaque: uma linha só, com ar em volta para ela respirar em vez de
   virar um bloco de duas pistas coladas. */
.faixa-desliza.destaque{
  margin-block:clamp(30px,5vw,58px);
  box-shadow:0 10px 30px rgba(7,59,37,.14);
}
.faixa-desliza.destaque .faixa-trilho{ padding:24px 0; }
.faixa-desliza.destaque .faixa-trilho > span{ font-size:1.24rem; letter-spacing:.005em; }
.faixa-desliza.clara{
  background:var(--verde-claro); color:var(--verde-escuro);
  border-color:rgba(14,94,58,.18);
}
.faixa-linha{ display:flex; overflow:hidden; }
.faixa-trilho{
  display:flex; align-items:center; gap:0; flex:0 0 auto;
  padding:13px 0; white-space:nowrap;
  animation:vp-desliza var(--vel,34s) linear infinite;
}
.faixa-linha.volta .faixa-trilho{ animation-direction:reverse; }
.faixa-desliza:hover .faixa-trilho{ animation-play-state:paused; }
.faixa-trilho > span{
  padding:0 30px; font-weight:800; font-size:1.12rem; letter-spacing:.01em;
}
.faixa-trilho > span.sep{ color:var(--amarelo); font-size:1.25rem; padding:0 6px; }
.faixa-desliza.clara .faixa-trilho > span.sep{ color:var(--verde-vivo); }
.faixa-linha + .faixa-linha{ border-top:1px solid rgba(255,255,255,.16); }
.faixa-desliza.clara .faixa-linha + .faixa-linha{ border-top-color:rgba(14,94,58,.14); }

@keyframes vp-desliza{
  from{ transform:translateX(0); }
  to  { transform:translateX(-100%); }  /* o JS clona o trilho: a cópia assume
                                           exatamente a posição inicial do
                                           original, então a volta é invisível */
}

/* =============================================================================
   3) BOTÕES — brilho que atravessa e levantada no hover
   ============================================================================= */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 48%, transparent 76%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.22,.7,.3,1);
}
.btn:hover::after, .btn:focus-visible::after{ transform:translateX(130%); }
.btn-verde::after, .btn-linha::after{ background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.28) 48%, transparent 76%); }

.btn:hover{ transform:translateY(-3px) scale(1.02); }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn-amarelo:hover{ box-shadow:0 14px 32px rgba(255,209,0,.5); }
.btn-verde:hover{ box-shadow:0 14px 32px rgba(14,94,58,.42); }

/* seta que anda para a direita nos botões marcados */
.btn .seta-vai{ display:inline-block; transition:transform .28s cubic-bezier(.22,.7,.3,1); }
.btn:hover .seta-vai{ transform:translateX(5px); }

/* =============================================================================
   4) IMAGENS QUE SE DESTACAM NO HOVER
   ============================================================================= */
.foto{
  display:block; overflow:hidden; border-radius:var(--raio);
  position:relative; background:var(--verde-claro);
  transition:transform .38s cubic-bezier(.22,.7,.3,1), box-shadow .38s ease;
}
.foto img{
  transition:transform .55s cubic-bezier(.22,.7,.3,1), filter .38s ease;
  width:100%; height:auto; display:block;
}
/* reserva a proporção antes de a imagem chegar — evita o pulo do layout */
.galeria-acoes .foto img{ aspect-ratio:4/3; object-fit:contain; background:var(--verde-claro); }
.foto:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(7,59,37,.26); }
.foto:hover img{ transform:scale(1.07); filter:saturate(1.12); }
.foto::after{                                  /* brilho dourado na borda */
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--amarelo);
  transition:box-shadow .34s ease; pointer-events:none;
}
.foto:hover::after{ box-shadow:inset 0 0 0 3px var(--amarelo); }

/* o emblema do herói respira devagar e reage ao mouse */
.hero-logo img{ transition:transform .6s cubic-bezier(.22,.7,.3,1), filter .6s ease; }
.hero-logo:hover img{ transform:scale(1.05) rotate(-1.2deg); filter:drop-shadow(0 28px 56px rgba(0,0,0,.5)); }

/* CONTORNO no hover — o traço percorre a borda inteira do cartão.
   Antes era uma barra reta de 3px no topo: num cartão de canto arredondado ela
   ia até a borda do padding e "escapava" pela curva, exatamente o defeito que
   aparecia na tela. Agora o traço É a borda: um anel do mesmo tamanho e do
   mesmo raio do cartão, recortado por máscara para sobrar só a moldura.

   Dois cuidados que continuam valendo:
   1. NADA de overflow:hidden aqui — o selo "MAIS DIRETO" fica acima da borda
      (top:-13px) e seria cortado ao meio.
   2. O anel usa ::after, não ::before — ::before já é o selo em .caminho.eixo. */
.card{ position:relative; }
.card::after{
  content:""; position:absolute; inset:-1px;   /* cobre a borda de 1px do cartão */
  border-radius:inherit;                        /* segue o mesmo arredondamento */
  padding:2px;                                  /* espessura do contorno */
  background:linear-gradient(125deg, var(--amarelo) 0%, var(--verde-vivo) 55%, var(--verde) 100%);
  /* recorta o miolo: sobra só o anel na borda */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0;
  transition:opacity .32s ease;
  pointer-events:none;
}
.card:hover::after,
.card:focus-within::after{ opacity:1; }

/* Navegador sem mask-composite: cai num contorno sólido, que também segue o raio. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .card::after{
    padding:0; background:none;
    box-shadow:inset 0 0 0 2px var(--amarelo);
  }
}

/* o selo do cartão em destaque fica por cima do contorno */
.caminho.eixo::before{ z-index:2; }
/* Este cartão tem borda de 2px (e não 1px): o anel recua 2px para cobrir a
   borda inteira, senão sobraria um fio verde aparecendo por baixo. */
.caminho.eixo::after{ inset:-2px; }

/* Os cartões que já têm borda verde de destaque mantêm o contorno próprio;
   o anel só reforça, sem brigar. */
.area-escura .card::after{
  background:linear-gradient(125deg, var(--amarelo) 0%, #7FD6A6 60%, var(--amarelo) 100%);
}

/* =============================================================================
   5) INSTAGRAM — glifo oficial com o degradê da marca
   ============================================================================= */
.ig-glifo{ width:1.35em; height:1.35em; flex-shrink:0; display:block; }
.btn .ig-glifo, .rodape-ig .ig-glifo{ width:22px; height:22px; }

/* =============================================================================
   6) BOTÃO "ENTRAR COM O GOOGLE"
   ============================================================================= */
.btn-google{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:52px; padding:14px 22px;
  background:#fff; color:#3C4043; border:2px solid #DADCE0; border-radius:999px;
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-google:hover{ border-color:#C6C9CE; box-shadow:0 4px 14px rgba(60,64,67,.18); transform:translateY(-2px); }
.btn-google svg{ width:22px; height:22px; flex-shrink:0; }
.google-ou{
  display:flex; align-items:center; gap:14px; margin:22px 0;
  color:var(--tinta-suave); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.google-ou::before, .google-ou::after{ content:""; flex:1; height:1px; background:var(--linha); }

/* =============================================================================
   7) TELA DE ENTRADA (TRIAGEM) — convite, não pedágio

   Regra de tamanho: a tela tem CINCO escolhas e precisa caber inteira em
   notebook de 768px de altura, sem rolagem dentro do quadro. Todas as medidas
   abaixo escalam por clamp() com a altura da janela (svh), então ela encolhe
   sozinha em vez de depender de um monte de exceção.
   ============================================================================= */
.convite{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(5,42,27,.66); backdrop-filter:blur(3px);
}
.convite.ver{ display:flex; }

.convite-caixa{
  background:#fff; border-radius:22px; width:min(408px,100%);
  max-height:96svh; overflow:auto; overscroll-behavior:contain;
  box-shadow:0 24px 60px rgba(0,0,0,.42);
  position:relative; animation:vp-sobe .38s cubic-bezier(.22,.7,.3,1);
}
@keyframes vp-sobe{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---- topo verde ---- */
.convite-topo{
  background:linear-gradient(150deg, var(--verde) 0%, var(--verde-escuro) 100%);
  padding:clamp(12px,2.2svh,18px) 22px clamp(30px,4.6svh,38px);
  text-align:center; color:#fff; position:relative; border-radius:22px 22px 0 0;
}
.convite-selo{
  display:inline-block; padding:4px 12px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:7px;
}
.convite-topo h2{ color:#fff; font-size:clamp(1.02rem,1.9svh,1.22rem); margin:0; line-height:1.25; }
.convite-topo h2 em{ font-style:normal; color:var(--amarelo); }
.convite-x{
  position:absolute; top:9px; right:9px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.14); color:#fff;
  font-size:1.3rem; line-height:1; cursor:pointer; transition:background .16s;
}
.convite-x:hover{ background:rgba(255,255,255,.3); }

/* ---- emblema ---- */
.convite-emblema{
  width:clamp(46px,7svh,60px); height:clamp(46px,7svh,60px);
  margin:calc(clamp(46px,7svh,60px) / -2) auto 0; position:relative;
  border-radius:50%; background:#fff; padding:5px;
  box-shadow:0 6px 16px rgba(7,59,37,.22); display:grid; place-items:center;
}
.convite-emblema img{ width:100%; height:auto; }

/* ---- corpo ---- */
.convite-corpo{ padding:clamp(8px,1.4svh,12px) clamp(18px,3vw,24px) clamp(16px,2.4svh,22px); text-align:center; }
.convite-corpo p#convite-texto{
  font-size:clamp(.79rem,1.5svh,.88rem); color:var(--tinta-media);
  margin:clamp(6px,1svh,10px) 0 clamp(10px,1.6svh,14px); line-height:1.45;
}

/* ---- as cinco escolhas ---- */
.perfis{ display:grid; gap:clamp(5px,.8svh,8px); text-align:left; }
.perfil{
  display:flex; align-items:center; gap:11px;
  padding:clamp(7px,1.1svh,11px) 13px; min-height:clamp(44px,6.2svh,56px);
  border-radius:12px; border:2px solid var(--linha); background:#fff; text-decoration:none;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.perfil:hover, .perfil:focus-visible{
  border-color:var(--verde); background:var(--verde-claro); transform:translateX(3px);
}
.perfil-ic{ font-size:clamp(1.05rem,2svh,1.3rem); line-height:1; flex-shrink:0; width:24px; text-align:center; }
.perfil-txt{ flex:1; display:flex; flex-direction:column; line-height:1.28; min-width:0; }
.perfil-txt b{ color:var(--verde-escuro); font-size:clamp(.85rem,1.6svh,.94rem); }
.perfil-txt small{ color:var(--tinta-suave); font-size:clamp(.7rem,1.35svh,.78rem); }
.perfil-seta{ color:var(--verde); font-size:1.2rem; font-weight:800; flex-shrink:0; }

/* ---- pé ---- */
.convite-rodape{
  border-top:1px solid var(--linha); margin-top:clamp(9px,1.5svh,14px);
  padding-top:clamp(8px,1.3svh,12px); font-size:clamp(.74rem,1.4svh,.82rem); color:var(--tinta-suave);
}
.convite-rodape a{ font-weight:700; }
.convite-entrar{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:clamp(42px,5.6svh,50px); margin-top:clamp(8px,1.3svh,12px);
  padding:11px 18px; border:2px solid var(--verde); border-radius:12px; background:#fff;
  font:inherit; font-weight:800; font-size:clamp(.85rem,1.6svh,.95rem); color:var(--verde-escuro);
  cursor:pointer; transition:background .16s ease;
}
.convite-entrar:hover{ background:var(--verde-claro); }
.convite-nota{ font-size:clamp(.68rem,1.3svh,.76rem); color:var(--tinta-suave); margin:clamp(6px,1svh,10px) 0 0; }

html[data-movimento="off"] .perfil:hover{ transform:none; }
html[data-movimento="off"] .convite-caixa{ animation:none; }

/* =============================================================================
   8) DESLIGAR TUDO PARA QUEM PEDIU MENOS MOVIMENTO
   O :not([data-movimento="on"]) é o que permite ao botão ✦ LIGAR a animação
   mesmo em máquina com "reduzir movimento" no sistema.
   ============================================================================= */
@media (prefers-reduced-motion: reduce){
  html:not([data-movimento="on"]) .estrela,
  html:not([data-movimento="on"]) .faixa-trilho,
  html:not([data-movimento="on"]) .convite-caixa{ animation:none !important; }
  html:not([data-movimento="on"]) #estrelas{ display:none; }
  html:not([data-movimento="on"]) .btn::after{ display:none; }
  html:not([data-movimento="on"]) .btn:hover,
  html:not([data-movimento="on"]) .foto:hover,
  html:not([data-movimento="on"]) .hero-logo:hover img{ transform:none; }
}
html[data-movimento="off"] .estrela,
html[data-movimento="off"] .faixa-trilho,
html[data-movimento="off"] .convite-caixa{ animation:none !important; }
html[data-movimento="off"] #estrelas{ display:none; }
html[data-movimento="off"] .btn::after{ display:none; }
html[data-movimento="off"] .btn:hover,
html[data-movimento="off"] .foto:hover,
html[data-movimento="off"] .hero-logo:hover img{ transform:none; }

/* Com o movimento desligado a faixa vira lista estática, sem cortar texto */
html[data-movimento="off"] .faixa-trilho{ flex-wrap:wrap; white-space:normal; justify-content:center; }
@media (prefers-reduced-motion: reduce){
  html:not([data-movimento="on"]) .faixa-trilho{ flex-wrap:wrap; white-space:normal; justify-content:center; }
}

/* =============================================================================
   9) VALORES CLICÁVEIS — o painel abre no próprio lugar, sem levar a outra tela
   ============================================================================= */
.valores-bloco{
  margin-top:clamp(44px,6vw,72px);
  padding:clamp(28px,4vw,46px) clamp(20px,3vw,38px);
  background:var(--verde-claro);
  border:1px solid rgba(14,94,58,.16);
  border-radius:var(--raio-g);
}
.area-escura .valores-bloco{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }

/* minmax(0,1fr) e não 1fr: "Companheirismo" é largo e, sem isso, empurrava a
   coluna e deixava os seis botões de tamanhos diferentes. */
.valores-grade{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px; margin-top:28px;
}
@media (max-width:980px){ .valores-grade{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .valores-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.valor-nome{ overflow-wrap:anywhere; }

.valor-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:8px; padding:20px 12px 16px; min-height:118px;
  background:#fff; border:2px solid transparent; border-radius:16px;
  font:inherit; cursor:pointer; text-align:center; position:relative;
  box-shadow:0 2px 8px rgba(7,59,37,.07);
  transition:transform .2s cubic-bezier(.22,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.valor-btn:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(7,59,37,.16); border-color:var(--amarelo); }
.valor-btn.ativo{ border-color:var(--verde); box-shadow:0 12px 26px rgba(7,59,37,.2); }
.valor-icone{ font-size:1.7rem; line-height:1; }
.valor-nome{ font-weight:800; font-size:.92rem; color:var(--verde-escuro); line-height:1.2; }
.valor-mais{
  position:absolute; top:8px; right:11px; font-size:1.1rem; font-weight:800;
  color:var(--verde); transition:transform .22s ease;
}
.valor-btn.ativo .valor-mais{ transform:rotate(45deg); }

.valor-painel{
  margin-top:16px; padding:clamp(22px,3vw,34px);
  background:#fff; border:2px solid var(--verde); border-radius:18px;
  position:relative; box-shadow:0 18px 44px rgba(7,59,37,.18);
  animation:vp-abre .34s cubic-bezier(.22,.7,.3,1);
}
@keyframes vp-abre{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.valor-painel:focus{ outline:none; }
.valor-painel:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

.valor-x{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--linha); background:#fff; color:var(--tinta-media);
  font-size:1.4rem; line-height:1; cursor:pointer; transition:background .15s;
}
.valor-x:hover{ background:var(--verde-claro); color:var(--verde-escuro); }

.valor-cabeca{ display:flex; align-items:center; gap:16px; margin-bottom:16px; padding-right:44px; }
.valor-icone-g{ font-size:2.4rem; line-height:1; flex-shrink:0; }
.valor-cabeca h4{ margin:0; font-size:1.35rem; color:var(--verde-escuro); }
.valor-lema{ margin:2px 0 0; font-size:.95rem; font-weight:700; color:var(--verde); }  /* verde-vivo dava 4.38 sobre branco */
.valor-texto{ font-size:1rem; color:var(--tinta-media); margin-bottom:16px; }
.valor-pontos{ font-size:.94rem; margin-bottom:16px; }
.valor-frase{
  border-left:4px solid var(--amarelo); padding:10px 0 10px 16px; margin:0 0 14px;
  font-size:1.02rem; font-weight:700; font-style:italic; color:var(--verde-escuro);
}
.valor-fonte{ font-size:.76rem; color:var(--tinta-suave); margin:0; }

/* =============================================================================
   10) GALERIA DE PUBLICAÇÕES
   ============================================================================= */
.galeria-acoes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(18px,2.4vw,30px);
}
.galeria-acoes figcaption{ padding-top:14px; }
.galeria-acoes figcaption b{ display:block; color:var(--verde-escuro); font-size:.95rem; line-height:1.3; }
.galeria-quando{ display:block; font-size:.78rem; color:var(--verde); font-weight:700; margin-top:4px; }
.galeria-acoes figcaption p{ font-size:.88rem; margin:8px 0 0; color:var(--tinta-media); }
.galeria-acoes a{ display:block; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  html:not([data-movimento="on"]) .valor-painel,
  html:not([data-movimento="on"]) .valor-btn:hover{ animation:none; transform:none; }
}
html[data-movimento="off"] .valor-painel{ animation:none; }
html[data-movimento="off"] .valor-btn:hover{ transform:none; }

/* =============================================================================
   11) "FAÇA PARTE" — o botão que acompanha o site inteiro
   A porta de entrada de pessoas não pode viver só no topo da página: some na
   primeira rolagem. Este fica sempre a um clique, e reabre a mesma tela de
   triagem da entrada.
   ============================================================================= */
.faca-parte{
  position:fixed; right:20px; bottom:20px; z-index:95;
  align-items:center; justify-content:center;
  padding:15px 28px; min-height:56px; border:0; border-radius:999px;
  background:var(--amarelo); color:var(--verde-escuro);
  font:inherit; font-weight:800; font-size:.98rem; text-decoration:none; cursor:pointer;
  box-shadow:0 10px 30px rgba(255,209,0,.45), 0 2px 8px rgba(7,59,37,.2);
  /* Some e aparece por DISPLAY, não por opacidade.
     Tentei transição e depois animação de opacidade: nas duas o valor ficava
     preso em 0 — o botão nasce invisível e recebe a classe antes de ter sido
     pintado uma vez. display não tem estado intermediário para travar. */
  display:none;
  transition:box-shadow .2s ease;
}
.faca-parte.ver{
  display:inline-flex;
  animation:vp-sobe-botao .32s cubic-bezier(.22,.7,.3,1);
}
@keyframes vp-sobe-botao{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.faca-parte:hover{ box-shadow:0 16px 40px rgba(255,209,0,.6), 0 2px 8px rgba(7,59,37,.24); transform:translateY(-3px); }

/* Quando existe o botão do WhatsApp, os dois se empilham em vez de brigar. */
.zap{ bottom:88px; }

/* No celular vira uma barra larga na base — polegar alcança sem mirar. */
@media (max-width:620px){
  .faca-parte{
    left:14px; right:14px; bottom:14px; justify-content:center;
    border-radius:16px; padding:16px 20px;
  }
  .zap{ bottom:86px; right:14px; }
}

html[data-movimento="off"] .faca-parte.ver{ animation:none; }
html[data-movimento="off"] .faca-parte:hover{ transform:none; }
@media (prefers-reduced-motion: reduce){
  html:not([data-movimento="on"]) .faca-parte.ver{ animation:none; }
  html:not([data-movimento="on"]) .faca-parte:hover{ transform:none; }
}
@media print{ .faca-parte{ display:none !important; } }

/* Chamadas no meio do conteúdo — o convite reaparece no fluxo da leitura, e
   não só no topo e no rodapé. Abrem a mesma tela de triagem. */
.chamada-meio{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  margin-top:34px; padding:24px 28px; border-radius:var(--raio-g);
  background:linear-gradient(120deg, var(--verde) 0%, var(--verde-escuro) 100%);
  color:#fff; box-shadow:0 12px 34px rgba(7,59,37,.2);
}
.chamada-meio b{ display:block; font-size:1.12rem; font-weight:800; color:#fff; }
.chamada-meio span{ display:block; font-size:.92rem; color:#C9DED4; margin-top:4px; max-width:56ch; }
.chamada-meio .btn{ flex-shrink:0; }
/* o span do rótulo do botão herdava o verde-claro do .chamada-meio span acima;
   no botão amarelo o texto tem de ser verde-escuro para ler bem. */
.chamada-meio .btn-amarelo,
.chamada-meio .btn-amarelo span{ color:var(--verde-escuro); }
@media (max-width:620px){
  .chamada-meio{ flex-direction:column; align-items:flex-start; padding:22px; }
  .chamada-meio .btn{ width:100%; }
}

/* Celular baixo (iPhone SE e afins): os últimos pixels vêm daqui. */
/* Notebook baixo (1366x640 e afins): os últimos pixels vêm daqui. Sem isto a
   caixa estourava 23px e o botão de entrar ficava fora da tela. */
@media (max-height: 700px){
  .convite{ padding:6px; }
  .convite-caixa{ max-height:99svh; }
  .convite-topo{ padding:8px 20px 26px; }
  .convite-topo h2{ font-size:1rem; }
  .convite-selo{ margin-bottom:5px; padding:3px 11px; font-size:.6rem; }
  .convite-emblema{ width:44px; height:44px; margin-top:-22px; padding:4px; }
  .convite-corpo{ padding:8px 20px 14px; }
  .convite-corpo p#convite-texto{ font-size:.78rem; margin:6px 0 9px; }
  .perfis{ gap:5px; }
  .perfil{ min-height:44px; padding:5px 12px; }
  .perfil-ic{ font-size:1.1rem; }
  .perfil-txt small{ font-size:.7rem; }
  .convite-lgpd{ font-size:.68rem; padding:7px 10px; margin-top:8px; }
  .convite-rodape{ margin-top:8px; padding-top:7px; font-size:.75rem; }
  .convite-entrar{ min-height:42px; margin-top:8px; font-size:.86rem; }
}

/* Aviso de confidencialidade dentro da tela de entrada */
.convite-lgpd{
  font-size:clamp(.72rem,1.35svh,.79rem); color:var(--tinta-suave);
  background:var(--verde-claro); border-radius:10px; padding:9px 12px;
  margin:clamp(10px,1.6svh,14px) 0 0; line-height:1.45; text-align:left;
}
.convite-lgpd a{ font-weight:700; color:var(--verde-escuro); }

/* A tela de triagem cabe inteira, sem rolagem interna. Cada item que entra aqui
   precisa caber no orçamento: o aviso de LGPD absorveu a nota que existia
   abaixo do botão, e os espaços foram reapertados. */
.convite-lgpd{ padding:8px 11px; margin-top:clamp(8px,1.3svh,11px); line-height:1.4; }
.convite-topo{ padding:clamp(10px,1.8svh,15px) 22px clamp(28px,4.2svh,34px); }
.convite-corpo p#convite-texto{ margin:clamp(5px,.9svh,9px) 0 clamp(8px,1.3svh,12px); }
.perfis{ gap:clamp(4px,.7svh,7px); }
.perfil{ min-height:clamp(42px,5.8svh,54px); }
.convite-rodape{ margin-top:clamp(8px,1.2svh,12px); padding-top:clamp(7px,1.1svh,10px); }
.convite-entrar{ margin-top:clamp(7px,1.1svh,10px); }


/* =============================================================================
   IDIOMAS NA TELA DE ENTRADA
   Pedido do cliente: as bandeiras no pé da tela de cadastro inicial, e o × do
   canto fora. Quem chega de fora troca de idioma antes de escolher a porta.

   ORÇAMENTO DE ALTURA: esta faixa custa ~38px numa tela que já cabia por pouco.
   O × saiu (não devolve altura, era absoluto), então os pixels vieram de
   reapertar o topo, os cinco perfis e o pé — as linhas depois desta faixa.
   Se um dia entrar mais alguma coisa aqui, algo tem de sair.
   ============================================================================= */
.convite-idiomas{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:clamp(7px,1.1svh,11px); padding-top:clamp(6px,1svh,9px);
  border-top:1px solid var(--linha);
}
.convite-idiomas-txt{
  font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.convite-idiomas .idioma-btn{ min-height:32px; padding:4px 9px; font-size:.68rem; }
.convite-idiomas .bandeira{ width:19px; height:13px; }

/* O × do canto não existe mais. A regra fica aqui só para deixar registrado:
   a saída da tela são o botão do pé, a tecla Esc e o clique fora do quadro. */
.convite-x{ display:none !important; }

/* --- os pixels que pagam a faixa de idiomas ---
   Medido no navegador, janela de 720px: o conteúdo do quadro pesava 720px e a
   caixa cabia 677 — as bandeiras ficavam 12px fora da tela. Estes números vêm
   da medição, não do olho. */
.convite{ padding:8px; }                       /* era 14px: devolve 12px de tela */
.convite-caixa{ max-height:98svh; }
.convite-topo{ padding:clamp(9px,1.6svh,13px) 22px clamp(24px,3.6svh,29px); }
.convite-selo{ margin-bottom:5px; }
.convite-corpo{ padding:clamp(6px,1.1svh,10px) clamp(18px,3vw,24px) clamp(11px,1.6svh,15px); }
.convite-corpo p#convite-texto{ margin:clamp(4px,.7svh,7px) 0 clamp(6px,1svh,9px); }
.perfil{ min-height:clamp(40px,5.4svh,50px); padding:clamp(5px,.8svh,9px) 13px; }
.convite-lgpd{ margin-top:clamp(6px,1svh,9px); padding:6px 11px; }
.convite-rodape{ margin-top:clamp(6px,1svh,9px); padding-top:clamp(6px,1svh,9px); }
.convite-entrar{ min-height:clamp(40px,5.2svh,46px); margin-top:clamp(6px,1svh,9px); }
.convite-idiomas{ margin-top:clamp(6px,1svh,9px); padding-top:clamp(5px,.9svh,8px); }
.convite-idiomas .idioma-btn{ min-height:30px; }

/* Notebook e celular baixos: o mesmo aperto, em número fixo.
   Medido em 1366x640 COM O SITE EM INGLÊS, que é o caso mais apertado dos três
   idiomas — as frases em inglês quebram em mais linhas que as em português. */
@media (max-height: 700px){
  .convite-topo{ padding:7px 20px 24px; }
  .convite-corpo{ padding:7px 20px 11px; }
  .convite-corpo p#convite-texto{ font-size:.74rem; line-height:1.35; margin:4px 0 7px; }
  .perfil{ min-height:42px; padding:4px 12px; }
  .convite-lgpd{ margin-top:6px; padding:5px 10px; font-size:.66rem; line-height:1.35; }
  .convite-rodape{ margin-top:6px; padding-top:6px; font-size:.72rem; }
  .convite-entrar{ min-height:40px; margin-top:6px; padding:8px 18px; font-size:.85rem; }
  .convite-idiomas{ margin-top:6px; padding-top:5px; gap:8px; }
  .convite-idiomas .idioma-btn{ min-height:30px; padding:3px 8px; }
  .convite-idiomas-txt{ font-size:.6rem; }
}