/* ======================================================================
   home.css — v4.1, a home na FORMA do landeros.framer.website com as CORES
   da VBE.

   Carregado SO no index.html, depois de site.css. As nove paginas internas
   ficam no site.css e nao sao afetadas por nada daqui.

   Do Landeros vem a forma: header em pilula, tudo centrado, cards de raio
   grande com sombra, numeracao em circulo, pills, esteira, acordeao.
   Da VBE vem a cor: base #080B14 preto azulado, superficie #0E1526 puxando
   para o marinho, verde #00A62E de acento, ouro so no traco.

   A v4.0 foi este mesmo arquivo em tema claro. O tema inteiro vive nas
   variaveis do bloco abaixo — trocar de novo e trocar valores, nao regras.
   ====================================================================== */

.tema-vbe{
  /* base da identidade: preto azulado. As superficies puxam um pouco mais
     para o marinho do que o #0C111C da v3, para o azul aparecer de fato. */
  --fundo:#080B14;
  --fundo-2:#0E1526;
  --tinta:#FFFFFF;
  --tinta-2:#A7AEBC;
  --tinta-3:#6E7686;
  --risco:rgba(255,255,255,.11);
  --acento:#00A62E;          /* verde de fundo escuro */
  --acento-forte:#2BC94F;
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.28);
  --sombra-alta:0 2px 6px rgba(0,0,0,.34), 0 22px 56px rgba(0,0,0,.42);

  background:var(--fundo);
  color:var(--tinta);
}

/* o brilho de fundo do Landeros e lilas; aqui e o azul da base puxado para
   cima, com um toque de verde. Fica em gradiente e nao em chapado justamente
   para nao virar area de cor, que a regra do design-guide proibe */
/* z-index:-1 e NAO "> * {position:relative}". Empurrar position:relative em
   todo filho direto do body quebra os tres elementos que precisam sair do
   fluxo: o header fixo, a gaveta do menu e o modal. A gaveta sozinha abria
   524px de vazio embaixo do header, e o modal mais 374px no fim da pagina. */
.tema-vbe::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 44% at 16% 6%,rgba(28,52,110,.30) 0%,transparent 64%),
    radial-gradient(54% 40% at 86% 0%,rgba(0,166,46,.10) 0%,transparent 60%),
    radial-gradient(74% 52% at 50% 100%,rgba(20,38,84,.26) 0%,transparent 68%);
}

/* ---------- tipografia base do tema ---------- */
.tema-vbe h1,.tema-vbe h2,.tema-vbe h3,.tema-vbe h4{color:var(--tinta)}
.tema-vbe .texto{color:var(--tinta-2)}
.tema-vbe .secao{background:transparent}
.tema-vbe .claro{background:transparent;color:var(--tinta)}

/* titulo grande, leve e centrado — a marca registrada do Landeros */
.tema-vbe .titulo{
  font-weight:500;letter-spacing:-.032em;line-height:1.06;
  font-size:clamp(1.9rem,3.5vw,3rem);color:var(--tinta);
}
.tema-vbe .display{
  font-weight:500;letter-spacing:-.034em;text-transform:none;line-height:1.02;
  font-size:clamp(2.3rem,5.4vw,4.5rem);color:var(--tinta);
}
.tema-vbe .display em{font-style:normal;display:block;color:var(--tinta-3)}
.tema-vbe .pt{color:var(--acento)}

/* ---------- cabecalho de secao centrado, com os riscos laterais ---------- */
.cab-centro{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(34px,4vw,56px)}
.cab-centro .titulo{max-width:18ch}
.cab-centro .texto{margin-top:16px;max-width:56ch}
.cab-centro__risco{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);width:100%;
  justify-content:center;margin:clamp(16px,2vw,22px) 0 0;
}
.cab-centro__risco::before,.cab-centro__risco::after{
  content:"";height:1px;flex:1;max-width:210px;
  background:linear-gradient(90deg,transparent,var(--risco));
}
.cab-centro__risco::after{background:linear-gradient(270deg,transparent,var(--risco))}

/* ---------- header em pilula ---------- */
.tema-vbe .cabecalho__in{
  background:rgba(14,21,38,.74);
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--sombra);
}
.tema-vbe .cabecalho.solido .cabecalho__in{background:rgba(14,21,38,.94);border-color:rgba(255,255,255,.17)}
.tema-vbe .cabecalho__in .marca{border-right-color:var(--risco)}
.tema-vbe .menu a{color:var(--tinta-2)}
.tema-vbe .menu a:hover{color:var(--tinta)}
.tema-vbe .menu a::after{background:var(--acento)}
.tema-vbe .cabecalho .btn--linha{background:var(--acento);border-color:var(--acento);color:#04140A}
.tema-vbe .cabecalho .btn--linha:hover{background:var(--acento-forte);border-color:var(--acento-forte);color:#04140A}
.tema-vbe .hamburguer i{background:var(--tinta)}

/* ---------- pill ---------- */
.tema-vbe .pill{
  background:var(--fundo-2);border-color:var(--risco);color:var(--tinta-2);
  box-shadow:var(--sombra);
}
.tema-vbe .pill::before{background:var(--acento)}

/* ---------- botoes ---------- */
.tema-vbe .btn--verde{background:var(--acento);border-color:var(--acento);color:#04140A}
.tema-vbe .btn--verde:hover{background:var(--acento-forte);border-color:var(--acento-forte)}
.tema-vbe .btn--escuro{background:var(--fundo-2);border-color:var(--risco);color:var(--tinta);box-shadow:var(--sombra)}
.tema-vbe .btn--escuro:hover{background:var(--tinta);border-color:var(--tinta);color:#04140A}
.tema-vbe .link-tec{color:var(--tinta)}
.tema-vbe .link-tec:hover{color:var(--acento);border-color:var(--acento)}

/* ---------- hero: texto centrado, foto num card grande logo abaixo ---------- */
.heroc{padding:calc(84px + clamp(40px,6vw,86px)) 0 0;text-align:center;overflow:hidden}
.heroc__in{display:flex;flex-direction:column;align-items:center}
.heroc .display{max-width:16ch}
.heroc__texto{margin:clamp(18px,2.2vw,26px) auto 0;max-width:52ch;font-size:1rem;line-height:1.75;color:var(--tinta-2)}
.heroc__acoes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:clamp(26px,3vw,38px)}
.heroc__palco{
  margin-top:clamp(34px,4.4vw,64px);border-radius:clamp(16px,2vw,26px);
  overflow:hidden;box-shadow:var(--sombra-alta);border:1px solid rgba(255,255,255,.09);
  aspect-ratio:16/8;position:relative;background:var(--fundo-2);
}
.heroc__palco img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.heroc__barra{
  display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,44px);
  flex-wrap:wrap;margin-top:clamp(24px,3vw,36px);
  font-family:var(--fonte);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);
}
.heroc__barra b{color:var(--tinta);font-weight:700}
.heroc__barra span:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--risco);margin-left:clamp(16px,3vw,44px);vertical-align:middle}

/* ---------- cards de etapa (o "Process Is Performance") ---------- */
.passo__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.passo{
  position:relative;background:var(--fundo-2);border:1px solid var(--risco);
  border-radius:clamp(14px,1.6vw,20px);padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--sombra);
}
.passo__n{
  position:absolute;top:clamp(18px,2vw,24px);right:clamp(18px,2vw,24px);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--fundo);border:1px solid var(--risco);
  font-size:.76rem;font-weight:700;color:var(--tinta-3);
}
.passo__icone{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--fundo);border:1px solid var(--risco);margin-bottom:clamp(20px,2.2vw,28px);
}
.passo__icone svg{width:24px;height:24px;color:var(--acento)}
.passo h3{font-size:1.14rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.passo p{margin:0;font-size:.9rem;line-height:1.7;color:var(--tinta-2)}
.passo__tag{
  display:inline-block;margin-top:clamp(20px,2.2vw,26px);
  padding:7px 15px;border-radius:999px;background:var(--fundo);border:1px solid var(--risco);
  font-size:.63rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-2);
}

/* ---------- faixa de numeros ---------- */
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--risco);border:1px solid var(--risco);border-radius:clamp(14px,1.6vw,20px);overflow:hidden}
.numeros div{background:var(--fundo-2);padding:clamp(24px,2.6vw,34px);text-align:center}
.numeros b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em;color:var(--tinta)}
.numeros span{display:block;margin-top:8px;font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3)}

/* ---------- lista + preview ---------- */
.tema-vbe .famil__lin b{color:var(--tinta-2)}
.tema-vbe .famil__lin:hover,.tema-vbe .famil__lin[aria-current="true"]{background:var(--fundo-2);box-shadow:var(--sombra)}
.tema-vbe .famil__lin:hover b,.tema-vbe .famil__lin[aria-current="true"] b{color:var(--tinta)}
.tema-vbe .famil__lin i{color:var(--tinta-3)}
.tema-vbe .famil__lin[aria-current="true"] i,.tema-vbe .famil__lin[aria-current="true"] .seta{color:var(--acento)}
.tema-vbe .famil__lista li+li{border-top-color:var(--risco)}
.tema-vbe .famil__mostra{border:1px solid var(--risco);box-shadow:var(--sombra-alta);background:var(--fundo-2)}

/* ---------- cards de evento ---------- */
.tema-vbe .evento{background:var(--fundo-2);border:1px solid var(--risco);box-shadow:var(--sombra)}
.tema-vbe .evento__tag{background:var(--acento);color:#04140A}

/* ---------- esteira ---------- */
.tema-vbe .esteira{border-block-color:var(--risco)}
.tema-vbe .esteira::before{background:linear-gradient(90deg,var(--fundo),transparent)}
.tema-vbe .esteira::after{background:linear-gradient(270deg,var(--fundo),transparent)}
.tema-vbe .esteira__item{background:var(--fundo-2);border-color:var(--risco);color:var(--tinta-2);box-shadow:var(--sombra)}
.tema-vbe .esteira__item svg{color:var(--acento)}

/* ---------- comparativo: nos x locadora comum ---------- */
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.versus__card{
  background:var(--fundo-2);border:1px solid var(--risco);
  border-radius:clamp(14px,1.6vw,20px);padding:clamp(26px,3vw,40px);box-shadow:var(--sombra);
}
.versus__card--nos{border-color:rgba(0,122,27,.3)}
.versus__cab{display:flex;align-items:center;gap:13px;margin-bottom:clamp(20px,2.4vw,28px);padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--risco)}
.versus__cab b{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.versus ul{list-style:none;margin:0;padding:0}
.versus li{display:flex;align-items:flex-start;gap:13px;padding:11px 0;font-size:.92rem;line-height:1.6;color:var(--tinta-2)}
.versus li svg{width:17px;height:17px;flex:none;margin-top:3px}
.versus__card--nos li svg{color:var(--acento)}
.versus__card--eles li svg{color:#E06A72}
.versus__card--nos li{color:var(--tinta)}

/* ---------- acordeao ---------- */
.duvidas{max-width:860px;margin:0 auto}
.duvida{background:var(--fundo-2);border:1px solid var(--risco);border-radius:clamp(12px,1.4vw,16px);margin-bottom:10px;box-shadow:var(--sombra);overflow:hidden}
.duvida summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--tinta);
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{
  content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--t);
}
.duvida[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--acento)}
.duvida__corpo{padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px);font-size:.92rem;line-height:1.75;color:var(--tinta-2)}
.duvida__corpo p{margin:0}

/* ---------- sobre / operacao / cta / contato / rodape no claro ---------- */
.tema-vbe .sobre{background:var(--fundo-2);border-block:1px solid var(--risco)}
.tema-vbe .sobre__num b{color:var(--tinta)}
.tema-vbe .checks li{border-bottom-color:var(--risco);color:var(--tinta)}
.tema-vbe .oper__texto{background:var(--fundo-2);border:1px solid var(--risco);box-shadow:var(--sombra)}
.tema-vbe .oper__texto .titulo,.tema-vbe .oper__texto .rotulo{color:var(--tinta)}
.tema-vbe .oper__texto .texto{color:var(--tinta-2)}
.tema-vbe .etapas{border-top-color:var(--risco)}
.tema-vbe .etapa{border-color:var(--risco)}
.tema-vbe .etapa b{color:var(--tinta)}
.tema-vbe .cta__lado{border-left-color:rgba(255,255,255,.28)}
.tema-vbe .contato{background:transparent}
.tema-vbe .contato__lado .titulo{color:var(--tinta)}
.tema-vbe .contato__lado .texto,.tema-vbe .passos li{color:var(--tinta-2)}
.tema-vbe .passos li{border-color:var(--risco)}
.tema-vbe .canais{background:var(--risco);border-color:var(--risco)}
.tema-vbe .canal{background:var(--fundo-2)}
.tema-vbe .canal__txt b{color:var(--tinta)}
.tema-vbe .canal__txt i{color:var(--tinta-3)}
.tema-vbe .cartao{background:var(--fundo-2);border:1px solid var(--risco);box-shadow:var(--sombra-alta)}
.tema-vbe .rodape{background:var(--fundo-2);border-top-color:var(--risco);color:var(--tinta-2)}
.tema-vbe .rodape a{color:var(--tinta-2)}
.tema-vbe .rodape a:hover{color:var(--acento)}
.tema-vbe .rodape__grade b,.tema-vbe .rodape h4{color:var(--tinta)}
.tema-vbe .rodape__base{border-top-color:var(--risco);color:var(--tinta-3)}
.tema-vbe .rodape__redes a{border-color:var(--risco);color:var(--tinta-2)}
.tema-vbe .rodape__redes a:hover{border-color:var(--acento);color:var(--acento)}
.tema-vbe .modal__caixa{background:var(--fundo-2)}
.tema-vbe .modal__topo{border-bottom-color:var(--risco)}
.tema-vbe .modal__topo h3{color:var(--tinta)}
.tema-vbe .modal__meta div b{color:var(--tinta-3)}
.tema-vbe .modal__meta div span{color:var(--tinta)}
.tema-vbe .modal__corpo>p{color:var(--tinta-2)}
.tema-vbe .modal__fechar{border-color:var(--risco);color:var(--tinta-2)}
.tema-vbe .gaveta{background:var(--fundo-2)}
.tema-vbe .gaveta a{color:var(--tinta);border-color:var(--risco)}

/* ---------- responsivo ---------- */
@media(max-width:1180px){
  .passo__grade{grid-template-columns:1fr;gap:12px}
  .versus{grid-template-columns:1fr}
}
@media(max-width:960px){
  .heroc{padding-top:calc(76px + clamp(30px,6vw,54px))}
  .heroc__palco{aspect-ratio:16/10}
  .numeros{grid-template-columns:1fr}
}
@media(max-width:640px){
  .heroc__palco{aspect-ratio:4/3}
  .heroc__barra{gap:10px;flex-direction:column}
  .heroc__barra span:not(:last-child)::after{display:none}
  .cab-centro__risco{display:none}
}

/* ======================================================================
   v4.2 — organizacao da lista de familias e do card de evento
   ====================================================================== */

/* ---------- lista de familias: menos ruido, altura casada ---------- */
/* a tag some das linhas paradas e fica so na ativa: nove linhas com nome +
   tag viravam parede de texto, e a tag ja aparece na legenda do preview */
.tema-vbe .famil__lin i{
  opacity:0;transform:translateX(6px);
  transition:opacity .3s var(--t),transform .3s var(--t),color .3s var(--t);
}
.tema-vbe .famil__lin:hover i,
.tema-vbe .famil__lin:focus-visible i,
.tema-vbe .famil__lin[aria-current="true"] i{opacity:1;transform:none}

/* a lista e o preview passam a ocupar a mesma altura, em vez de a lista
   sobrar embaixo da foto */
.tema-vbe .famil__grade{align-items:stretch}
.tema-vbe .famil__cab{display:flex;flex-direction:column}
.tema-vbe .famil__lista{margin-top:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1}
.tema-vbe .famil__lista li{display:flex;flex:1}
.tema-vbe .famil__lin{flex:1;padding-block:clamp(10px,1.1vw,14px)}
.tema-vbe .famil__mostra{aspect-ratio:auto;height:100%;min-height:clamp(320px,34vw,540px)}

/* ---------- card de evento: quadrado no lugar de 3/4 ---------- */
.tema-vbe .evento{aspect-ratio:1/1}

@media(max-width:1180px){
  .tema-vbe .famil__mostra{min-height:clamp(280px,52vw,420px)}
  .tema-vbe .famil__lin{padding-block:13px}
  /* fora do desktop nao existe hover: a tag volta a aparecer sempre */
  .tema-vbe .famil__lin i{opacity:1;transform:none}
}
@media(max-width:640px){
  .tema-vbe .evento{aspect-ratio:4/5}
}

/* ---------- WhatsApp do CTA: botao, sem numero na tela ---------- */
/* era um link de duas linhas com o telefone escrito, e passava despercebido
   ao lado do botao verde. Agora tem a mesma presenca, e o numero fica onde
   serve: no rodape e na secao de contato. */
.tema-vbe .cta__zap{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  font-family:var(--fonte);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);
  transition:background .3s var(--t),border-color .3s var(--t),color .3s var(--t);
}
.tema-vbe .cta__zap:hover{background:#25D366;border-color:#25D366;color:#04140A}
.tema-vbe .cta__zap svg{width:19px;height:19px}
.tema-vbe .cta__zap span{display:inline;text-align:left}

/* ---------- rodape: coluna de estruturas e assinatura ---------- */
/* eram duas <ul> de 5 e 4, com larguras diferentes. Agora e uma lista so,
   em duas colunas que o browser balanceia, e a coluna cabe os nove nomes */
.tema-vbe .rodape__grade{grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1.45fr) minmax(0,1.05fr)}
.tema-vbe .rodape__duas{
  display:block;columns:2;column-gap:clamp(20px,2.4vw,40px);
  list-style:none;margin:0;padding:0;
}
.tema-vbe .rodape__duas li{break-inside:avoid;margin:0}
.tema-vbe .rodape__assina{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.tema-vbe .rodape__assina a{
  color:var(--tinta-2);font-weight:700;
  border-bottom:1px solid transparent;
  transition:color .25s var(--t),border-color .25s var(--t);
}
.tema-vbe .rodape__assina a:hover{color:var(--acento);border-bottom-color:var(--acento)}
@media(max-width:640px){
  .tema-vbe .rodape__duas{columns:1}
}

/* ---------- setas e pontos do carrossel no tema escuro ---------- */
/* vinham de quando a secao de projetos tinha fundo claro: a seta era
   --texto-escuro (#0F1420) e sumia dentro do circulo sobre o fundo escuro */
.tema-vbe .carrossel__seta{
  border-color:rgba(255,255,255,.24);
  color:var(--tinta);
}
.tema-vbe .carrossel__seta:hover,
.tema-vbe .carrossel__seta:focus-visible{
  border-color:var(--acento);color:var(--acento);background:rgba(0,166,46,.12);
}
.tema-vbe .carrossel__ponto{background:rgba(255,255,255,.26)}
.tema-vbe .carrossel__ponto[aria-current="true"],
.tema-vbe .carrossel__ponto.ativo{background:var(--acento)}

/* FAQ em duas colunas de tres */
.tema-vbe .duvidas{
  max-width:1080px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;align-items:start;
}
/* cada caixa cresce sozinha ao abrir; sem isto a vizinha da linha estica junto */
.tema-vbe .duvida{margin-bottom:0}
.tema-vbe .duvida summary{font-size:.95rem;gap:12px}
@media(max-width:900px){
  .tema-vbe .duvidas{grid-template-columns:1fr;max-width:860px}
}

/* formulario: cantos mais arredondados e altura casada com a coluna ao lado */
.tema-vbe .contato__grade{align-items:stretch}
.tema-vbe .contato__lado{display:flex;flex-direction:column;justify-content:center}
.tema-vbe .cartao{
  border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;
}
.tema-vbe .campo input,
.tema-vbe .campo select,
.tema-vbe .campo textarea{border-radius:14px}
.tema-vbe .cartao .btn{border-radius:999px}
@media(max-width:960px){
  .tema-vbe .contato__lado{justify-content:flex-start}
}

/* ======================================================================
   galeria do modal: zoom no hover e foto em tela cheia
   ====================================================================== */

/* ---------- miniatura com zoom ---------- */
/* a moldura segura o corte e o overflow; quem cresce e a imagem dentro dela */
.tema-vbe .modal__foto{
  position:relative;display:block;padding:0;width:100%;
  border:0;background:var(--fundo-2);cursor:zoom-in;
  border-radius:var(--raio-2);overflow:hidden;
  aspect-ratio:4/3;
  transition:transform .45s var(--t),box-shadow .45s var(--t);
}
.tema-vbe .modal__foto:hover,
.tema-vbe .modal__foto:focus-visible{
  transform:scale(1.035);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  z-index:2;
}
.tema-vbe .modal__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--t);
}
.tema-vbe .modal__foto:hover img,
.tema-vbe .modal__foto:focus-visible img{transform:scale(1.14)}

/* ---------- a lente ---------- */
/* o .modal tambem e z-index 200: em empate quem vem depois no DOM ganha, e a
   lente ganharia por acidente. 300 tira a dependencia da ordem do HTML. */
.lente{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,26px);padding:clamp(16px,4vw,54px);
  background:rgba(4,6,12,.94);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .26s var(--t),visibility .26s var(--t);
}
.lente.aberta{opacity:1;visibility:visible}
.lente[hidden]{display:none}

.lente__palco{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:min(1180px,100%);max-height:100%;
}
.lente__palco img{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border-radius:var(--raio);box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lente__palco figcaption{
  font-size:.86rem;line-height:1.5;color:#C9CEDA;text-align:center;max-width:70ch;
}

.lente__seta,.lente__fechar{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:1.15rem;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  transition:background .25s var(--t),border-color .25s var(--t),color .25s var(--t);
}
.lente__seta:hover,.lente__fechar:hover{background:#00A62E;border-color:#00A62E;color:#04140A}
.lente__seta[hidden]{display:none}
.lente__fechar{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);z-index:2}
.lente__conta{
  position:absolute;bottom:clamp(14px,2.4vw,28px);left:0;right:0;margin:0;text-align:center;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8A909C;
}
.lente__conta[hidden]{display:none}

@media(max-width:700px){
  /* em tela estreita as setas saem das laterais e vao para baixo da foto */
  .lente{flex-wrap:wrap;align-content:center}
  .lente__palco{order:-1;flex-basis:100%}
  .lente__palco img{max-height:64vh}
  .lente__conta{position:static;flex-basis:100%;order:2}
}
@media(prefers-reduced-motion:reduce){
  .tema-vbe .modal__foto img{transition:none}
  .tema-vbe .modal__foto:hover img{transform:none}
}

/* ---------- hover dos cards de etapa ---------- */
/* sinaliza onde o mouse esta, so isso. Sao <div>, nao link: sem cursor:pointer,
   que prometeria um clique que nao existe. */
.tema-vbe .passo{
  transition:transform .35s var(--t),border-color .35s var(--t),box-shadow .35s var(--t);
}
.tema-vbe .passo:hover{
  transform:translateY(-5px);
  border-color:rgba(0,166,46,.42);
  box-shadow:0 16px 40px rgba(0,0,0,.42);
}
.tema-vbe .passo__icone{transition:background .35s var(--t),border-color .35s var(--t)}
.tema-vbe .passo:hover .passo__icone{
  background:rgba(0,166,46,.12);
  border-color:rgba(0,166,46,.45);
}
.tema-vbe .passo__n,
.tema-vbe .passo__tag{transition:color .35s var(--t),border-color .35s var(--t)}
.tema-vbe .passo:hover .passo__n{color:var(--acento);border-color:rgba(0,166,46,.45)}
.tema-vbe .passo:hover .passo__tag{color:var(--tinta);border-color:rgba(0,166,46,.35)}

@media(prefers-reduced-motion:reduce){
  .tema-vbe .passo,
  .tema-vbe .passo__icone,
  .tema-vbe .passo__n,
  .tema-vbe .passo__tag{transition:none}
  .tema-vbe .passo:hover{transform:none}
}

/* ---------- regua das etapas: uma barra so, dirigida pelo scroll ---------- */
/* era um ::before por etapa. Cinco pedacos encostados abrem fio entre si no
   arredondamento, e cada um com a sua transition dessincronizava no scroll.
   Uma barra unica nao tem emenda para abrir. */
.tema-vbe .etapas{position:relative}
.tema-vbe .etapas::after{
  content:"";position:absolute;top:-1px;left:0;height:2px;
  width:calc(var(--p, 0) * 100%);
  background:var(--acento);
  box-shadow:0 0 12px rgba(0,166,46,.45);
  /* sem transition: o rAF do scroll ja atualiza quadro a quadro. Com ela, a
     barra ficava atrasada em relacao ao dedo e parecia travar. */
}
/* os pedacos por etapa saem de cena; o hover nao mexe mais no traco */
.tema-vbe .etapa::before{display:none}

/* o texto acende quando a linha chega nele */
.tema-vbe .etapa span{color:#6E7686}
.tema-vbe .etapas[data-ate="1"] .etapa:nth-child(-n+1) span,
.tema-vbe .etapas[data-ate="2"] .etapa:nth-child(-n+2) span,
.tema-vbe .etapas[data-ate="3"] .etapa:nth-child(-n+3) span,
.tema-vbe .etapas[data-ate="4"] .etapa:nth-child(-n+4) span,
.tema-vbe .etapas[data-ate="5"] .etapa:nth-child(-n+5) span{color:var(--tinta)}
.tema-vbe .etapa b{color:#3A4152;transition:color .3s var(--t)}
.tema-vbe .etapas[data-ate="1"] .etapa:nth-child(-n+1) b,
.tema-vbe .etapas[data-ate="2"] .etapa:nth-child(-n+2) b,
.tema-vbe .etapas[data-ate="3"] .etapa:nth-child(-n+3) b,
.tema-vbe .etapas[data-ate="4"] .etapa:nth-child(-n+4) b,
.tema-vbe .etapas[data-ate="5"] .etapa:nth-child(-n+5) b{color:var(--acento)}

/* titulo unico do sobre: e uma frase inteira, nao uma chamada de tres palavras.
   Corpo menor, entrelinha maior e largura de leitura — senao vira parede. */
.tema-vbe .sobre__texto .titulo{
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  line-height:1.35;
  letter-spacing:-.02em;
  max-width:26ch;
}
.tema-vbe .sobre__texto .link-tec{margin-top:clamp(24px,2.6vw,34px)}

/* ======================================================================
   v4.7 — celular (15/10/2026)
   ====================================================================== */
/* o botao do pe do menu: o .tema-vbe .gaveta a de cima pintava o texto de
   branco por cima do verde */
.tema-vbe .gaveta a::after{color:var(--acento)}
.tema-vbe .gaveta a:last-child{background:var(--acento);border-color:var(--acento);color:#04140A}

/* o rodape da home ficava em quatro colunas ate no celular: a regra de quatro
   colunas daqui ganha da do site.css, que e a que tem media query. A coluna de
   contato passava da tela e o celular afastava o zoom da pagina inteira. */
@media(max-width:960px){
  .tema-vbe .rodape__grade{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .tema-vbe .rodape__grade{grid-template-columns:1fr}
}