/* ============================================================
   ZUNGA SOLUÇÕES — sistema visual
   Paleta, arredondamento e camada de movimento.
   A Zunga é um OVNI: nada de canto vivo onde couber curva.
   ============================================================ */

:root{
  --zs-verde:#129B3D;
  --zs-verde-esc:#0D7A2F;
  --zs-verde-claro:#18B84A;
  --zs-neon:#3DFF7A;
  --zs-preto:#0A0C0B;
  --zs-tinta:#151917;
  --zs-texto:#66706A;
  --zs-linha:#DDE4DF;
  --zs-papel:#F1F5F2;

  /* raio padrão — a marca é redonda */
  --zs-r-p:12px;    /* pequeno: selo, campo */
  --zs-r-m:20px;    /* médio: cartão */
  --zs-r-g:32px;    /* grande: bloco */
  --zs-r-pilula:999px;

  /* posição do cursor, alimentada pelo zs.js */
  --zs-mx:50vw;
  --zs-my:40vh;
}

/* ---------- arredondamento em tudo que pede curva ---------- */
.zs a.elementor-button,
.zs button,
.zs .e-button,
.zs input[type="submit"]{ border-radius:var(--zs-r-pilula) !important; }

.zs input:not([type="submit"]),
.zs textarea,
.zs select{ border-radius:var(--zs-r-p) !important; }

.zs .zs-cartao,
.zs .zs-caixa,
.zs .zs-foto img{ border-radius:var(--zs-r-m); }

/* o logo NUNCA arredonda - o raio cortaria os cantos da marca */
.zs .zs-logo img,
.zs header img{ border-radius:0 !important; }

.zs .zs-selo{ border-radius:var(--zs-r-pilula); }

/* faixa que sangra até a borda NÃO arredonda */
.zs .zs-faixa{ border-radius:0; }

/* ============================================================
   EM BREVE — a transmissão
   ============================================================ */
.zs-embreve{
  position:relative;
  overflow:hidden;
  background:var(--zs-preto);
  color:var(--zs-papel);
  isolation:isolate;
}

/* facho verde que acompanha o cursor */
.zs-embreve::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(620px circle at var(--zs-mx) var(--zs-my),
             rgba(18,155,61,.20), transparent 46%);
  transition:background .28s ease-out;
}

/* grade de fundo, com esmaecimento embaixo */
.zs-embreve::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 84%);
          mask-image:linear-gradient(to bottom, #000, transparent 84%);
  animation:zs-desliza 26s linear infinite;
}
@keyframes zs-desliza{ to{ background-position:56px 56px; } }

.zs-embreve > *{ position:relative; z-index:1; }

/* conteudo centralizado em 1300px; o fundo continua sangrando ate a borda */
.zs-embreve > *:not(.zs-poeira){
  width:100%;
  max-width:1300px;
  margin-inline:auto;
}

/* ---------- partículas subindo ---------- */
.zs-poeira{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.zs-poeira i{
  position:absolute; bottom:-10px;
  width:3px; height:3px; border-radius:50%;
  background:var(--zs-neon); opacity:.5;
  animation:zs-sobe linear infinite;
}
@keyframes zs-sobe{
  from{ transform:translateY(0) scale(1); opacity:0; }
  12%{ opacity:.6; }
  to{ transform:translateY(-102vh) scale(.4); opacity:0; }
}

/* ---------- o disco e o tripulante ---------- */
/* o widget de SVG do Elementor nasce travado em 65px de altura;
   aqui ele volta a respeitar a proporção do desenho */
.zs-ovni,
.zs-tripulante{ height:auto !important; }
.zs-ovni svg,
.zs-tripulante svg{ display:block; width:100%; height:auto; }

.zs-ovni{
  position:relative;
  display:block;
  width:min(340px,74%);
  margin-inline:auto;
  animation:zs-flutua 6.5s ease-in-out infinite;
  filter:drop-shadow(0 22px 46px rgba(18,155,61,.34));
}
.zs-ovni .zs-facho{ animation:zs-pulsa 3.6s ease-in-out infinite; transform-origin:50% 0; }
.zs-tripulante{
  display:block; width:104px; margin:-34px auto 0;
  animation:zs-flutua 6.5s ease-in-out infinite .5s;
  filter:drop-shadow(0 12px 26px rgba(61,255,122,.36));
}
@keyframes zs-flutua{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }
@keyframes zs-pulsa{ 0%,100%{ opacity:.32; } 50%{ opacity:.74; } }

/* ---------- selo pulsante ---------- */
.zs-selo{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px;
  border:1px solid rgba(18,155,61,.42);
  background:rgba(18,155,61,.10);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--zs-neon);
}
.zs-selo::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--zs-neon); animation:zs-farol 1.9s ease-in-out infinite;
}
@keyframes zs-farol{
  0%,100%{ box-shadow:0 0 0 0 rgba(61,255,122,.55); opacity:1; }
  70%{ box-shadow:0 0 0 11px rgba(61,255,122,0); opacity:.65; }
}

/* ---------- título que entra letra a letra ---------- */
.zs-letra{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) rotate(6deg);
  animation:zs-entra .62s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes zs-entra{ to{ opacity:1; transform:none; } }

/* ---------- revelação ao rolar ---------- */
.zs-revela{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1); }
.zs-revela.zs-visivel{ opacity:1; transform:none; }

/* ---------- botão com ímã ---------- */
.zs-ima{ transition:transform .18s ease-out, box-shadow .25s ease; will-change:transform; }
.zs-ima:hover{ box-shadow:0 14px 34px rgba(18,155,61,.34); }

/* ---------- cartão de vidro ---------- */
.zs-cartao{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .3s ease, transform .3s ease;
}
.zs-cartao:hover{ border-color:rgba(18,155,61,.5); transform:translateY(-4px); }

/* ---------- respeita quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .zs-ovni,.zs-tripulante,.zs-poeira i,.zs-embreve::after,.zs-selo::before{ animation:none !important; }
  .zs-letra{ opacity:1; transform:none; animation:none; }
  .zs-revela{ opacity:1; transform:none; transition:none; }
  .zs-embreve::before{ transition:none; }
}

/* rodape: apenas um fio separando, sem moldura */
.zs-rodape{
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

/* ============================================================
   CABEÇALHO — barra flutuante arredondada, encolhe ao rolar
   ============================================================ */
.zs-cab-fora{
  position:fixed; top:0; left:0; right:0; z-index:90;
  padding:26px max(20px,calc((100% - 1300px)/2));
  background:transparent;
  transition:background .32s ease, padding .32s ease, box-shadow .32s ease,
             border-color .32s ease;
  border-bottom:1px solid transparent;
}
/* ao rolar, vira barra solida de ponta a ponta - nunca uma pilula solta */
.zs-cab-fora.zs-encolhido{
  padding-top:13px; padding-bottom:13px;
  background:rgba(10,12,11,.94);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 14px 38px rgba(0,0,0,.34);
}

.zs-cab{
  display:flex; align-items:center; gap:30px;
  background:none; border:0; padding:0; border-radius:0;
}

.zs-cab-marca{ display:flex; align-items:center; flex:0 0 auto; }
.zs-cab-marca img{ display:block; height:auto; border-radius:0 !important; }

.zs-cab-menu{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.zs-cab-menu a{
  color:#F1F5F2; font:600 14.5px/1 "DM Sans",sans-serif;
  text-decoration:none; transition:color .22s ease;
}
.zs-cab-menu a:hover{ color:var(--zs-verde-claro); }

/* submenu de soluções */
.zs-cab-drop{ position:relative; }
.zs-cab-drop-botao{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer; padding:0;
  color:#F1F5F2; font:600 14.5px/1 "DM Sans",sans-serif;
  transition:color .22s ease;
}
.zs-cab-drop-botao:hover,
.zs-cab-drop[aria-aberto="1"] .zs-cab-drop-botao{ color:var(--zs-verde-claro); }
.zs-cab-drop-botao span{ font-size:11px; transition:transform .25s ease; }
.zs-cab-drop[aria-aberto="1"] .zs-cab-drop-botao span{ transform:rotate(180deg); }

.zs-cab-drop-painel{
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(420px,86vw);
  display:grid; gap:4px; padding:12px;
  background:rgba(14,18,16,.97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease, visibility .24s;
}
.zs-cab-drop[aria-aberto="1"] .zs-cab-drop-painel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.zs-cab-drop-painel a{
  display:grid; gap:3px; padding:13px 16px; border-radius:14px;
  transition:background .2s ease;
}
.zs-cab-drop-painel a:hover{ background:rgba(18,155,61,.14); }
.zs-cab-drop-painel strong{ font:700 14.5px/1.2 "Manrope",sans-serif; color:#F1F5F2; }
.zs-cab-drop-painel small{ font:400 12.5px/1.45 "DM Sans",sans-serif; color:#8B948F; }

.zs-cab-cta{
  flex:0 0 auto;
  padding:13px 24px; border-radius:999px;
  background:var(--zs-verde); color:#fff;
  font:700 14.5px/1 "DM Sans",sans-serif; text-decoration:none;
  transition:background .22s ease, box-shadow .25s ease;
}
.zs-cab-cta:hover{ background:var(--zs-verde-claro); box-shadow:0 12px 30px rgba(18,155,61,.36); }

.zs-cab-hamburguer{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:10px;
}
.zs-cab-hamburguer span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:#F1F5F2; transition:transform .28s ease, opacity .2s ease;
}
.zs-cab-hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.zs-cab-hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.zs-cab-hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:1000px){
  .zs-cab{ padding:10px 10px 10px 18px; }
  .zs-cab-hamburguer{ display:flex; margin-left:auto; }
  .zs-cab-cta{ display:none; }
  .zs-cab-menu{
    position:absolute; top:calc(100% + 12px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px; margin:0; padding:14px;
    background:rgba(14,18,16,.98); border:1px solid rgba(255,255,255,.10);
    border-radius:26px; box-shadow:0 26px 60px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .zs-cab-fora.zs-aberto .zs-cab-menu{ opacity:1; visibility:visible; transform:none; }
  .zs-cab-menu a,.zs-cab-drop-botao{ padding:13px 14px; border-radius:14px; }
  .zs-cab-drop-painel{
    position:static; transform:none; width:auto; opacity:1; visibility:visible;
    pointer-events:auto; box-shadow:none; background:rgba(255,255,255,.03);
    border:0; padding:4px; display:none;
  }
  .zs-cab-drop[aria-aberto="1"] .zs-cab-drop-painel{ display:grid; transform:none; }
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.zs-rod{ background:var(--zs-preto); color:#AEB6B1; }
.zs-rod-dentro{
  max-width:1300px; margin-inline:auto;
  padding:78px max(22px,0px) 30px;
}
/* flex em vez de grid: aceita quantas colunas o cliente criar no repeater.
   Com grid + auto-fit a faixa flexivel comia todo o espaco e sobrava 1 coluna. */
.zs-rod-topo{
  display:flex; flex-wrap:wrap; gap:44px 40px;
  padding-bottom:44px;
}
.zs-rod-marca{ flex:1 1 300px; min-width:260px; }
.zs-rod-col{ flex:1 1 158px; min-width:150px; }
.zs-rod-marca img{ display:block; height:auto; border-radius:0 !important; }
.zs-rod-assinatura{
  margin:18px 0 0; max-width:300px;
  font:400 15px/1.62 "DM Sans",sans-serif; color:#8B948F;
}
.zs-rod-col h4{
  margin:0 0 16px;
  font:700 12px/1 "DM Sans",sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--zs-neon);
}
.zs-rod-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.zs-rod-col a,.zs-rod-col span{
  font:400 14.5px/1.45 "DM Sans",sans-serif; color:#AEB6B1;
  text-decoration:none; transition:color .2s ease;
}
.zs-rod-col a:hover{ color:var(--zs-verde-claro); }

.zs-rod-base{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.09);
  font:400 13px/1.5 "DM Sans",sans-serif; color:#727C77;
}
.zs-rod-legais{ display:flex; gap:20px; flex-wrap:wrap; }
.zs-rod-legais a{ color:#727C77; text-decoration:none; transition:color .2s ease; }
.zs-rod-legais a:hover{ color:var(--zs-verde-claro); }

@media(max-width:900px){
  .zs-rod-dentro{ padding-top:56px; }
  .zs-rod-topo{ gap:34px 28px; }
  .zs-rod-marca{ flex:1 1 100%; }
  .zs-rod-col{ flex:1 1 40%; }
  .zs-rod-base{ justify-content:flex-start; }
}

/* ============================================================
   COMPONENTES DE PÁGINA
   ============================================================ */

/* --- herói interno: escuro, com o facho seguindo o cursor --- */
.zs.zs-heroi{
  position:relative; overflow:hidden;
  background:var(--zs-preto); color:var(--zs-papel);
  padding:158px max(22px,calc((100% - 1300px)/2)) 96px;
  isolation:isolate;
}
.zs-heroi::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(680px circle at var(--zs-mx) var(--zs-my),
             rgba(18,155,61,.17), transparent 48%);
  transition:background .3s ease-out;
}
.zs-heroi::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);
          mask-image:linear-gradient(to bottom,#000,transparent 88%);
}
/* a poeira fica fora dessa regra: se virar relative, entra como celula do grid */
.zs-heroi > *:not(.zs-poeira){ position:relative; z-index:1; }

/* --- faixa de seção: fundo sangra, miolo em 1300 --- */
.zs.zs-secao{ padding:96px max(22px,calc((100% - 1300px)/2)); }
.zs-secao-clara{ background:var(--zs-papel); color:var(--zs-tinta); }
.zs-secao-escura{ background:var(--zs-preto); color:var(--zs-papel); }
.zs-secao-verde{ background:var(--zs-verde); color:#fff; }

/* --- rótulo de seção --- */
.zs-rotulo{
  display:inline-flex; align-items:center; gap:11px;
  font:700 12px/1 "DM Sans",sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--zs-verde);
}
.zs-rotulo::before{ content:""; width:26px; height:2px; background:currentColor; }
.zs-secao-escura .zs-rotulo{ color:var(--zs-neon); }
.zs-secao-verde .zs-rotulo{ color:#fff; }

/* --- moldura de foto que ainda não chegou --- */
.zs-foto-vazia{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--zs-r-m);
  background:
    radial-gradient(circle at 50% 118%, rgba(18,155,61,.20), transparent 62%),
    linear-gradient(150deg,#0E1512,#161D18);
  border:1px solid rgba(18,155,61,.26);
  display:grid; place-items:center; text-align:center; padding:26px;
}
.zs-foto-vazia b{
  font:800 17px/1.25 "Manrope",sans-serif; color:var(--zs-papel);
  letter-spacing:-.02em; display:block;
}
.zs-foto-vazia small{
  display:block; margin-top:9px;
  font:700 10.5px/1 "DM Sans",sans-serif; letter-spacing:.15em;
  text-transform:uppercase; color:var(--zs-neon); opacity:.75;
}
.zs-foto-vazia::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(61,255,122,.10) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:zs-varre 4.2s ease-in-out infinite;
}
@keyframes zs-varre{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* --- grade de cartões --- */
.zs-grade{ display:grid; gap:20px; margin-top:52px; }
/* numero de colunas fixo: com auto-fit o navegador encaixava 5 numa grade de 4 */
.zs-grade-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.zs-grade-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.zs-grade-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1080px){
  .zs-grade-3,.zs-grade-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px){
  .zs-grade-2,.zs-grade-3,.zs-grade-4{ grid-template-columns:1fr; }
}

/* --- cartão de link --- */
.zs-link-cartao{
  display:flex; flex-direction:column; gap:13px;
  padding:30px 28px; text-decoration:none;
  border-radius:var(--zs-r-m);
  border:1px solid var(--zs-linha); background:#fff; color:inherit;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.zs-link-cartao:hover{
  transform:translateY(-6px); border-color:var(--zs-verde);
  box-shadow:0 24px 52px rgba(10,12,11,.12);
}
.zs-secao-escura .zs-link-cartao{
  background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.10); color:var(--zs-papel);
}
.zs-secao-escura .zs-link-cartao:hover{ border-color:rgba(18,155,61,.55); background:rgba(18,155,61,.07); }
.zs-link-cartao .zs-num{
  font:700 11.5px/1 "DM Sans",sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zs-verde);
}
.zs-secao-escura .zs-link-cartao .zs-num{ color:var(--zs-neon); }
.zs-link-cartao h3{ margin:0; font:800 21px/1.2 "Manrope",sans-serif; letter-spacing:-.03em; }
.zs-link-cartao p{ margin:0; font:400 14.8px/1.6 "DM Sans",sans-serif; color:var(--zs-texto); }
.zs-secao-escura .zs-link-cartao p{ color:#8B948F; }
.zs-link-cartao .zs-seta{
  margin-top:auto; padding-top:12px;
  font:700 13.5px/1 "DM Sans",sans-serif; color:var(--zs-verde);
  transition:transform .28s ease;
}
.zs-link-cartao:hover .zs-seta{ transform:translateX(6px); }

/* --- etiquetas de item --- */
.zs-etiquetas{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.zs-etiquetas li{
  font:600 12.5px/1 "DM Sans",sans-serif; color:#41504A;
  padding:8px 13px; border-radius:999px;
  background:var(--zs-papel); border:1px solid var(--zs-linha);
}
.zs-secao-escura .zs-etiquetas li{
  color:#B7C0BA; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10);
}

@media(max-width:900px){
  .zs.zs-heroi{ padding:118px 22px 68px; }
  .zs.zs-secao{ padding:64px 22px; }
  .zs-grade{ margin-top:36px; }
}

/* --- cabeçalho de seção --- */
.zs-secao-topo{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:56px; flex-wrap:wrap;
}
.zs-secao-titulo{
  margin:18px 0 0; max-width:760px;
  font:800 clamp(30px,3.4vw,46px)/1.08 "Manrope",sans-serif; letter-spacing:-.042em;
}
.zs-secao-titulo .zs-destaque{ display:block; color:var(--zs-verde); }
.zs-secao-escura .zs-secao-titulo .zs-destaque{ color:var(--zs-verde-claro); }
.zs-secao-verde .zs-secao-titulo .zs-destaque{ color:var(--zs-preto); }
.zs-secao-intro{
  margin:0; max-width:430px;
  font:400 16.5px/1.62 "DM Sans",sans-serif; color:var(--zs-texto);
}
.zs-secao-escura .zs-secao-intro{ color:#8B948F; }
.zs-secao-verde .zs-secao-intro{ color:rgba(255,255,255,.86); }
.zs-foto{ border-radius:var(--zs-r-m); overflow:hidden; aspect-ratio:4/3; }
.zs-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:900px){ .zs-secao-topo{ gap:24px; } }

/* ============================================================
   A PEÇA EM ANÁLISE — o mecanismo próprio da Zunga
   A peça no centro, o facho da nave escaneando, e a informação
   aparecendo em volta ligada por fios. Em vez de listar, encena.
   ============================================================ */
.zs.zs-an{
  position:relative; overflow:hidden;
  background:var(--zs-preto); color:var(--zs-papel);
  padding:110px max(22px,calc((100% - 1300px)/2)) 118px;
}
.zs-an::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 55%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 50% 55%,#000,transparent 72%);
}
.zs-an > *:not(.zs-poeira){ position:relative; z-index:1; }
.zs-an-topo{ max-width:760px; }
.zs-an-intro{
  margin:18px 0 0; max-width:560px;
  font:400 16.5px/1.64 "DM Sans",sans-serif; color:#8B948F;
}

/* --- palco --- */
.zs-an-palco{
  display:grid; grid-template-columns:1fr minmax(240px,320px) 1fr;
  gap:34px; align-items:center; margin-top:72px; min-height:560px;
}
.zs-an-centro{ position:relative; display:grid; place-items:center; }
.zs-an-peca{
  position:relative; z-index:2; width:250px; height:auto; display:block;
  border-radius:0 !important;
  filter:drop-shadow(0 26px 54px rgba(18,155,61,.30));
  animation:zs-flutua 7s ease-in-out infinite;
}

/* facho da nave descendo sobre a peça */
.zs-an-facho{
  position:absolute; top:-8%; left:50%; transform:translateX(-50%);
  width:min(420px,120%); height:118%;
  background:linear-gradient(to bottom,rgba(61,255,122,.30),rgba(61,255,122,0) 78%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  animation:zs-pulsa 3.8s ease-in-out infinite;
  pointer-events:none; z-index:1;
}

/* linha de varredura passando pela peça */
.zs-an-varredura{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(340px,96%); height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--zs-neon),transparent);
  box-shadow:0 0 22px 4px rgba(61,255,122,.5);
  animation:zs-varredura 4.6s ease-in-out infinite;
}
@keyframes zs-varredura{
  0%,100%{ top:14%; opacity:0; }
  12%{ opacity:.95; }
  50%{ top:84%; opacity:.95; }
  62%{ opacity:0; }
}

/* --- chamadas em volta --- */
.zs-an-coluna{ position:relative; height:100%; min-height:520px; }
.zs-an-chamada{
  position:absolute; top:var(--zs-alt); width:min(300px,100%);
  padding:18px 20px; border-radius:var(--zs-r-m);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .3s ease, transform .3s ease;
}
.zs-an-chamada:hover{ border-color:rgba(61,255,122,.45); transform:translateY(-3px); }
.zs-an-esq .zs-an-chamada{ right:0; text-align:right; }
.zs-an-dir .zs-an-chamada{ left:0; }
.zs-an-chamada h3{
  margin:0 0 6px; font:800 15.5px/1.25 "Manrope",sans-serif;
  letter-spacing:-.02em; color:var(--zs-neon);
}
.zs-an-chamada p{
  margin:0; font:400 14px/1.58 "DM Sans",sans-serif; color:#A7B0AA;
}

/* fio ligando a chamada até a peça */
.zs-an-chamada::after{
  content:""; position:absolute; top:50%; width:34px; height:1px;
  background:linear-gradient(90deg,rgba(61,255,122,.7),rgba(61,255,122,0));
}
.zs-an-esq .zs-an-chamada::after{ right:-34px; }
.zs-an-dir .zs-an-chamada::after{
  left:-34px; background:linear-gradient(270deg,rgba(61,255,122,.7),rgba(61,255,122,0));
}
.zs-an-ponto{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  transform:translateY(-50%); background:var(--zs-neon);
  animation:zs-farol 2.2s ease-in-out infinite;
}
.zs-an-esq .zs-an-ponto{ right:-38px; }
.zs-an-dir .zs-an-ponto{ left:-38px; }

@media(max-width:1080px){
  .zs-an-palco{
    grid-template-columns:1fr; gap:26px; min-height:0; margin-top:48px;
  }
  .zs-an-coluna{ position:static; min-height:0; display:grid; gap:14px; }
  .zs-an-chamada{
    position:static; width:auto; text-align:left !important;
  }
  .zs-an-chamada::after,.zs-an-ponto{ display:none; }
  .zs-an-centro{ order:-1; }
  .zs-an-peca{ width:200px; }
}
@media (prefers-reduced-motion:reduce){
  .zs-an-peca,.zs-an-facho,.zs-an-varredura{ animation:none !important; }
  .zs-an-varredura{ opacity:0; }
}

/* ============================================================
   CONTRASTE — o kit global pinta h1..h6 de #151917, que sobre
   fundo escuro dá 1,11:1. Aqui o texto volta a ser legível.
   Alvo: mínimo 4,5:1 no corpo e 3:1 em título grande (WCAG AA).
   ============================================================ */
.zs-secao-escura h1,.zs-secao-escura h2,.zs-secao-escura h3,
.zs-secao-escura h4,.zs-secao-escura h5,.zs-secao-escura h6,
.zs-secao-escura .zs-secao-titulo,
.zs.zs-heroi h1,.zs.zs-heroi h2,.zs.zs-heroi h3,
.zs.zs-an h1,.zs.zs-an h2,.zs.zs-an h3,
.zs-rod h1,.zs-rod h2,.zs-rod h3,.zs-rod h4{
  color:var(--zs-papel);          /* #F1F5F2 sobre #0A0C0B = 17,9:1 */
}
.zs-secao-escura .zs-link-cartao h3{ color:var(--zs-papel); }
.zs-secao-escura .zs-link-cartao p,
.zs-secao-escura .zs-secao-intro,
.zs-an-intro,
.zs-an-chamada p{
  color:#A7B0AA;                  /* sobre #0A0C0B = 8,6:1 */
}
.zs-secao-escura .zs-etiquetas li{ color:#C6CFC9; }

/* seção verde: texto escuro sobre verde, que é o que contrasta */
.zs-secao-verde h1,.zs-secao-verde h2,.zs-secao-verde h3{ color:#fff; }
.zs-secao-verde .zs-link-cartao{ background:rgba(255,255,255,.94); color:var(--zs-tinta); }
.zs-secao-verde .zs-link-cartao h3{ color:var(--zs-tinta); }

/* ============================================================
   FAIXAS BRANCAS — o Elementor separa widget com margem, e o
   body branco aparecia no vão entre uma seção e outra.
   ============================================================ */
body{ background:var(--zs-preto); }
.elementor-widget:not(:last-child){ margin-block-end:0 !important; }
.elementor-element.elementor-widget{ margin-bottom:0 !important; }
.zs-secao,.zs-an,.zs.zs-heroi,.zs-rod{ margin:0 !important; }

/* ============================================================
   CABEÇALHO — o gatilho do menu era <button>, então o kit
   global pintava de verde e ficavam dois botões iguais.
   ============================================================ */
.zs-cab .zs-cab-drop-botao{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  color:#F1F5F2 !important; font:600 14.5px/1 "DM Sans",sans-serif !important;
  letter-spacing:0 !important; text-transform:none !important;
}
.zs-cab .zs-cab-drop-botao:hover{ color:var(--zs-verde-claro) !important; }

/* o indicador vira um facho girando, não uma setinha qualquer */
.zs-cab-drop-botao span{
  display:inline-block; width:0; height:0; font-size:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid currentColor;
  transition:transform .28s ease;
}

/* ============================================================
   O BOTÃO PRINCIPAL — o único verde, e com vida alienígena:
   um facho varre a pílula, e o tripulante sobe ao passar o mouse.
   ============================================================ */
.zs-cab-cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding-right:46px !important;
}
.zs-cab-cta::before{             /* facho varrendo */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:zs-varre-botao 4.2s ease-in-out infinite;
}
.zs-cab-cta::after{              /* o tripulante espiando */
  content:""; position:absolute; right:14px; bottom:-20px;
  width:20px; height:20px;
  background:url("mascote-icone.svg") center/contain no-repeat;
  transition:transform .34s cubic-bezier(.2,1.5,.4,1), opacity .3s ease;
  opacity:0;
}
.zs-cab-cta:hover::after{ transform:translateY(-24px); opacity:1; }
.zs-cab-cta:hover{ background:var(--zs-verde-claro); }
@keyframes zs-varre-botao{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }

@media (prefers-reduced-motion:reduce){
  .zs-cab-cta::before{ animation:none; opacity:0; }
  .zs-cab-cta::after{ transition:none; }
}

/* a luz de fundo seguindo o cursor também na seção da peça em análise */
.zs-an::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(660px circle at var(--zs-mx) var(--zs-my),
             rgba(18,155,61,.16), transparent 48%);
  transition:background .3s ease-out;
}

/* a poeira nunca participa do layout */
.zs-poeira{ position:absolute !important; inset:0; grid-area:unset !important; }

/* ============================================================
   MENU: a ponte invisível sobre o vão
   Havia 18px entre o botão e o painel. Ao atravessar esse vão o
   ponteiro saía da área e o menu fechava na cara da pessoa.
   ============================================================ */
.zs-cab-drop-painel::before{
  content:""; position:absolute; left:0; right:0; top:-22px; height:24px;
}
/* área de captura do próprio gatilho, para o ponteiro não escapar */
.zs-cab-drop-botao{ padding:10px 2px !important; margin:-10px -2px; }

/* ============================================================
   TÍTULOS: respeitar a quebra escrita no texto
   O título é escrito em duas frases, uma por linha. Sem isso o
   navegador quebrava em qualquer lugar e deixava "Te" sozinho.
   ============================================================ */
.zs.zs-heroi h1,
.zs.zs-heroi h2,
.zs-embreve h1{
  white-space:pre-line;
}
/* nas telas estreitas a frase pode fluir, senão estoura a lateral */
@media(max-width:560px){
  .zs.zs-heroi h1,.zs.zs-heroi h2,.zs-embreve h1{ white-space:normal; }
}
/* evita palavra órfã nos demais títulos */
.zs-secao-titulo,.zs-an-topo h2{ text-wrap:pretty; }

/* ============================================================
   BOTÃO DO CABEÇALHO: a frase da marca se completa no hover
   Parado: verde sólido, "Me dá o problema".
   No mouse: vaza o fundo, acende a borda em neon e o texto vira
   "Te dou a solução" com o tripulante do lado.

   O verde do fundo é o #0D7A2F e não o #129B3D: com branco por
   cima, o #129B3D dá 3,63:1 e reprova no mínimo de 4,5:1. O
   #0D7A2F dá 5,52:1 e é praticamente a mesma cor no olho.
   ============================================================ */
.zs-cab .zs-cab-cta{
  position:relative;
  display:grid; place-items:center;
  background:var(--zs-verde-esc) !important;
  border:1.5px solid var(--zs-verde-esc);
  color:#fff;
  padding:13px 26px !important;
  border-radius:999px; line-height:1;
  text-decoration:none;
  transition:background .28s ease, color .28s ease,
             border-color .28s ease, box-shadow .28s ease;
}

/* os dois textos ocupam a mesma célula: o botão fica do tamanho
   do maior e não pula de largura na troca */
.zs-cab-cta-normal,
.zs-cab-cta-hover{
  grid-area:1 / 1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap;
  transition:opacity .26s ease, transform .26s ease;
}
.zs-cab-cta-hover{ opacity:0; transform:translateY(5px); }

.zs-cab .zs-cab-cta:hover,
.zs-cab .zs-cab-cta:focus-visible{
  background:transparent !important;
  color:var(--zs-neon);
  border-color:var(--zs-neon);
  box-shadow:0 0 0 1px rgba(61,255,122,.30),
             0 0 24px rgba(61,255,122,.42),
             inset 0 0 20px rgba(61,255,122,.12);
  text-shadow:0 0 14px rgba(61,255,122,.55);
}
.zs-cab-cta:hover .zs-cab-cta-normal,
.zs-cab-cta:focus-visible .zs-cab-cta-normal{ opacity:0; transform:translateY(-5px); }
.zs-cab-cta:hover .zs-cab-cta-hover,
.zs-cab-cta:focus-visible .zs-cab-cta-hover{ opacity:1; transform:none; }

/* o tripulante, do tamanho do texto e centralizado nele */
.zs-cab-et{
  display:block; flex:0 0 auto;
  width:20px; height:20px;
  background:url("mascote-icone.svg") center/contain no-repeat;
  animation:zs-et-flutua 3.4s ease-in-out infinite;
}
@keyframes zs-et-flutua{
  0%,100%{ transform:translateY(-1px) rotate(-4deg); }
  50%{ transform:translateY(-4px) rotate(4deg); }
}

.zs-cab-cta::before,.zs-cab-cta::after{ content:none !important; }

@media (prefers-reduced-motion:reduce){
  .zs-cab-et{ animation:none; transform:none; }
  .zs-cab-cta-normal,.zs-cab-cta-hover{ transition:none; }
}

/* ============================================================
   BRIEFING: o formulário que vira mensagem de WhatsApp
   ============================================================ */
.zs.zs-brief{
  position:relative; overflow:hidden;
  background:var(--zs-preto); color:var(--zs-papel);
  padding:110px max(22px,calc((100% - 1300px)/2));
}
.zs-brief > *{ position:relative; z-index:1; }
.zs-brief-grade{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.zs-brief-intro{
  margin:18px 0 0; max-width:420px;
  font:400 16.5px/1.64 "DM Sans",sans-serif; color:#A7B0AA;
}
.zs-brief-atalhos{ display:grid; gap:12px; margin-top:34px; }
.zs-brief-atalho{
  display:grid; gap:5px; padding:18px 20px;
  border-radius:var(--zs-r-m);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  text-decoration:none; transition:border-color .28s ease, transform .28s ease;
}
a.zs-brief-atalho:hover{ border-color:rgba(61,255,122,.5); transform:translateY(-3px); }
.zs-brief-atalho strong{ font:800 15.5px/1.25 "Manrope",sans-serif; color:var(--zs-neon); }
.zs-brief-atalho span{ font:400 14px/1.55 "DM Sans",sans-serif; color:#A7B0AA; }

.zs-brief-form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  padding:36px; border-radius:var(--zs-r-g);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.zs-brief-campo{ display:grid; gap:8px; }
.zs-brief-inteira{ grid-column:1 / -1; }
.zs-brief-campo > span{
  font:700 11.5px/1 "DM Sans",sans-serif;
  letter-spacing:.13em; text-transform:uppercase; color:#A7B0AA;
}
.zs-brief-form input,
.zs-brief-form textarea,
.zs-brief-form select{
  width:100%; padding:14px 16px;
  border-radius:var(--zs-r-p) !important;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,11,.6);
  color:var(--zs-papel);
  font:400 15px/1.45 "DM Sans",sans-serif;
  transition:border-color .24s ease, box-shadow .24s ease;
}
.zs-brief-form textarea{ resize:vertical; min-height:112px; }
.zs-brief-form input::placeholder,
.zs-brief-form textarea::placeholder{ color:#6E7873; }
.zs-brief-form input:focus,
.zs-brief-form textarea:focus,
.zs-brief-form select:focus{
  outline:0; border-color:var(--zs-neon);
  box-shadow:0 0 0 3px rgba(61,255,122,.16);
}
.zs-brief-form select option{ background:#121815; color:var(--zs-papel); }

.zs-brief-enviar{
  grid-column:1 / -1;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  margin-top:6px; padding:17px 30px;
  border:1.5px solid var(--zs-verde-esc); border-radius:999px;
  background:var(--zs-verde-esc); color:#fff; cursor:pointer;
  font:700 15px/1 "DM Sans",sans-serif;
  transition:background .28s ease, color .28s ease,
             border-color .28s ease, box-shadow .28s ease;
}
.zs-brief-enviar:hover{
  background:transparent; color:var(--zs-neon); border-color:var(--zs-neon);
  box-shadow:0 0 0 1px rgba(61,255,122,.3), 0 0 24px rgba(61,255,122,.4);
}
.zs-brief-aviso{
  grid-column:1 / -1; margin-top:2px;
  font:400 13px/1.55 "DM Sans",sans-serif; color:#7F8A84;
}

@media(max-width:980px){
  .zs.zs-brief{ padding:64px 22px; }
  .zs-brief-grade{ grid-template-columns:1fr; gap:38px; }
  .zs-brief-form{ grid-template-columns:1fr; padding:24px; }
  .zs-brief-campo{ grid-column:1 / -1; }
}

/* ============================================================
   VARIANTES DE HERÓI
   Cada página monta o herói de um jeito, mas a peça gráfica
   SEMPRE fica na coluna dela, ao lado do texto. Nunca por cima
   nem atrás: isso encobre a leitura e deixa um vão vazio do
   outro lado. A variação vem do lado, da proporção e do
   alinhamento, não de sobreposição.
   ============================================================ */

/* espelhado: a peça à esquerda, o texto à direita */
.zs.zs-heroi-espelhado{ grid-template-columns:.85fr 1.15fr !important; }
.zs.zs-heroi-espelhado .zs-heroi-arte{ order:-1; }

/* faixa: peça menor à direita, centralizada com o bloco de texto.
   Antes ela ficava presa ao topo e, como o texto é mais alto, o
   mascote boiava acima da leitura. O que diferencia esta variante
   é a coluna mais estreita e a peça menor, não o alinhamento. */
.zs.zs-heroi-faixa{
  grid-template-columns:1.35fr .65fr !important;
  align-items:center !important;
}
.zs.zs-heroi-faixa .zs-heroi-arte svg{ width:100% !important; max-width:250px; }

/* largo: peça menor à esquerda, alinhada embaixo */
.zs.zs-heroi-largo{
  grid-template-columns:.65fr 1.35fr !important;
  align-items:end !important;
}
.zs.zs-heroi-largo .zs-heroi-arte{ order:-1; padding-block-end:10px; }
.zs.zs-heroi-largo .zs-heroi-arte svg{ width:100% !important; max-width:250px; }

/* topo: peça acima, texto abaixo, tudo centralizado e empilhado */
.zs.zs-heroi-topo{ grid-template-columns:1fr !important; text-align:center; }
.zs.zs-heroi-topo .zs-heroi-arte{ order:-1; }
.zs.zs-heroi-topo .zs-heroi-texto{ align-items:center !important; }
.zs.zs-heroi-topo .zs-heroi-texto h1,
.zs.zs-heroi-topo .zs-heroi-texto p{ margin-inline:auto; }

@media(max-width:900px){
  .zs.zs-heroi-espelhado,
  .zs.zs-heroi-faixa,
  .zs.zs-heroi-largo{
    grid-template-columns:1fr !important;
    align-items:center !important;
  }
  .zs-heroi-arte{ order:0 !important; }
}