/* =========================================================================
   ZYGON · APLICAÇÃO DO BRIEFING "Sobre o site"
   Carregado DEPOIS de styles.css e extra.css — só acrescenta e sobrescreve.
   Blocos: fontes oficiais · topo imagem+texto · CTA WhatsApp destacado ·
           logos de clientes/parceiros/ECOZ · depoimentos com foto · equipe
   ========================================================================= */

/* ---------- 0. PALETA OFICIAL DA MARCA ----------
   Fonte: ID visual/PALETA DE CORES/cores.jpg
     principal  #000000 · #a86bff · #c4fa2e
     secundária #f0f0e5 · #d9bdff · #7a5454
   O projeto tinha um verde (#25D76C) que NÃO está na paleta. Ele fica
   apenas no botão flutuante do WhatsApp, onde o verde é a cor da própria
   plataforma e ajuda no reconhecimento. Em todo o resto foi substituído. */
:root{
  --purple-soft:#d9bdff;      /* era #c39bff — agora o tom oficial       */
  --areia:#f0f0e5;            /* secundária oficial: fundos claros        */
  --marrom:#7a5454;           /* secundária oficial: apoio               */
  --wpp:#25D76C;              /* verde do WhatsApp, só no botão flutuante */
}
/* barra de progresso: só cores da marca */
.scroll-progress__bar{background:linear-gradient(90deg,var(--lime),var(--purple))}
/* mensagem de sucesso dos formulários: lime, que é o "positivo" da marca */
.form__msg.ok{background:rgba(196,250,46,.12);color:var(--lime);border-color:rgba(196,250,46,.35)}

/* ---------- 1. FONTES OFICIAIS DA MARCA (ID visual/FONTES) ----------
   Ficam locais para o site não depender do Google Fonts e para garantir
   exatamente os arquivos aprovados da marca. */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-ExtraLight.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fontes/BricolageGrotesque-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

/* ---------- 2. LOGO SEM DEGRADÊ ----------
   Os PNGs oficiais já são chapados; aqui só garantimos que nenhum filtro
   antigo reintroduza brilho colorido na marca. */
.nav__logo-img,.footer__logo-img{filter:none}
.nav__logo-img{height:36px;width:auto;object-fit:contain}
.footer__logo-img{height:68px;width:auto;object-fit:contain}
@media(max-width:640px){.nav__logo-img{height:30px}.footer__logo-img{height:52px}}

/* ---------- 3. HOME · TOPO EM IMAGEM + TEXTO ----------
   Substitui a estética de dashboard pelo formato padrão pedido no briefing. */
.hero-zg{position:relative;overflow:hidden;padding:calc(var(--navH,72px) + 60px) 0 90px;border-bottom:1px solid var(--border)}
.hero-zg__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 78% 12%,rgba(196,250,46,.12),transparent 68%),
             radial-gradient(50% 45% at 10% 88%,rgba(168,107,255,.12),transparent 68%)}
.hero-zg__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.5vw,72px);align-items:center}

.hero-zg__kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.hero-zg__kicker::before{content:"";width:26px;height:1px;background:var(--lime)}
.hero-zg__title{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.045em;margin:22px 0 26px}
.hero-zg__title em{display:block;font-family:var(--f-serif);font-style:italic;font-weight:300;color:var(--lime)}
.hero-zg__lead{font-size:clamp(15px,1.25vw,18px);line-height:1.65;font-weight:300;color:var(--text-dim);max-width:56ch}
.hero-zg__lead + .hero-zg__lead{margin-top:16px}
.hero-zg__lead .hl{color:var(--text);font-weight:500}
.hero-zg__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.hero-zg__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px;padding:0;list-style:none}
.hero-zg__tags li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);padding:8px 14px;border:1px solid var(--border);border-radius:100px}
.hero-zg__tags li:first-child{color:var(--lime);border-color:rgba(196,250,46,.35)}

.hero-zg__media{position:relative;margin:0}
.hero-zg__shot{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-zg__shot img{width:100%;height:100%;object-fit:cover;display:block}
.hero-zg__shot::after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:linear-gradient(180deg,transparent 45%,rgba(8,12,14,.75))}
.hero-zg__caption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:6px}
.hero-zg__caption q{font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.02em;color:#fff;quotes:none}
.hero-zg__caption q em{font-family:var(--f-serif);font-style:italic;color:var(--lime)}
.hero-zg__caption span{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* imagem secundária sobreposta — escondida no mobile para não distorcer */
.hero-zg__shot--small{position:absolute;left:-46px;bottom:-38px;width:40%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:5px solid var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.hero-zg__shot--small img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1000px){
  .hero-zg{padding:calc(var(--navH,72px) + 36px) 0 64px}
  .hero-zg__grid{grid-template-columns:1fr;gap:40px}
  .hero-zg__shot{aspect-ratio:16/11;max-height:60vh}
  .hero-zg__shot--small{display:none}
  .hero-zg__lead{max-width:none}
}
@media(max-width:560px){
  .hero-zg__shot{aspect-ratio:4/3;border-radius:20px}
  .hero-zg__caption{left:16px;right:16px;bottom:16px}
  .hero-zg__actions{gap:12px}
}

/* ---------- 4. CTA DO WHATSAPP EM DESTAQUE ----------
   Briefing: "Destacar melhor a cor do botão de chamada para ação".
   Lime chapado da marca + halo + ícone do WhatsApp. */
.btn--wpp{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:#000;
  font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:18px 30px;border-radius:100px;border:0;overflow:visible;
  box-shadow:0 0 0 0 rgba(196,250,46,.55),0 14px 40px rgba(196,250,46,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn--wpp:hover{transform:translateY(-2px);background:var(--lime-soft);box-shadow:0 0 0 6px rgba(196,250,46,.16),0 18px 50px rgba(196,250,46,.38)}
.btn--wpp:active{transform:translateY(0)}
.btn--wpp svg{flex:0 0 auto}
.btn--wpp--xl{font-size:18px;padding:22px 38px}
.btn--wpp::before{content:"";position:absolute;inset:-3px;border-radius:100px;border:1px solid rgba(196,250,46,.5);opacity:0;transition:opacity .25s}
.btn--wpp:hover::before{opacity:1}
/* o CTA do topo do menu também ganha halo, para ler como o mesmo botão */
.nav__cta{box-shadow:0 6px 22px rgba(196,250,46,.30)}
.nav__cta:hover{box-shadow:0 8px 28px rgba(196,250,46,.45)}
/* botão flutuante: verde WhatsApp, mas com anel lime da marca */
.float-whatsapp{box-shadow:0 10px 36px rgba(37,215,108,.45)}

/* ---------- 5. LOGOS DE CLIENTES (32 posições, hoje 18 enviadas) ----------
   6 colunas em vez de 8: célula mais larga = logo maior e legível.
   6 × 6 linhas ainda comporta as 32 posições previstas no briefing. */
/* Chip claro: as marcas aparecem na cor original e sempre legíveis.
   O tratamento anterior (silhueta branca) destruía logos de área cheia
   com texto vazado — Prezunic, Frooty, Grano viravam mancha. */
.clients-grid{grid-template-columns:repeat(6,1fr);gap:14px}
.client-cell{min-height:132px;padding:16px;border:1px solid transparent;
  background:var(--areia);border-radius:16px;transition:transform .3s var(--ease),box-shadow .3s}
.client-cell img{max-width:100%;max-height:78px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:opacity .3s,filter .3s}
.client-cell:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.client-cell:hover img{opacity:1;filter:grayscale(0)}
@media(max-width:1100px){.clients-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.clients-grid{grid-template-columns:repeat(3,1fr)}
  .client-cell{min-height:112px;padding:14px}.client-cell img{max-height:64px}}
@media(max-width:520px){.clients-grid{grid-template-columns:repeat(2,1fr)}
  .client-cell{min-height:104px}.client-cell img{max-height:60px}}

/* ---------- 6. PARCEIROS E CHANCELAS ---------- */
.badges{align-items:stretch;gap:16px}
.badge-logo{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:22px 30px;min-width:200px;min-height:104px;border:1px solid var(--border);border-radius:16px;
  background:rgba(255,255,255,.02);transition:border-color .3s,transform .3s}
.badge-logo:hover{border-color:var(--lime);transform:translateY(-2px)}
.badge-logo img{max-height:52px;max-width:150px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.badge-logo:hover img{opacity:1}
.badge-logo span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.badge-logo--stack{flex-direction:column;gap:10px}
@media(max-width:560px){.badge-logo{min-width:150px;min-height:88px;padding:18px 22px}
  .badge-logo img{max-height:40px;max-width:118px}}

/* ---------- 7. ECOZ — logos oficiais no rodapé e na página ---------- */
.footer-ecoz__logos{gap:22px;align-items:center}
.footer-ecoz__logos img{max-height:54px;max-width:160px;width:auto;object-fit:contain;opacity:.92;transition:opacity .3s}
.footer-ecoz:hover .footer-ecoz__logos img{opacity:1}
.ecoz-logos{display:flex;gap:44px;flex-wrap:wrap;align-items:center;margin:48px 0 10px}
.ecoz-logos img{max-height:100px;max-width:260px;width:auto;object-fit:contain}
@media(max-width:560px){.footer-ecoz__logos{gap:16px}.footer-ecoz__logos img{max-height:38px;max-width:112px}
  .ecoz-logos{gap:28px}.ecoz-logos img{max-height:66px;max-width:180px}}

/* ---------- 8. DEPOIMENTOS COM FOTO (prova social) ---------- */
.testimonial__who{flex-direction:row;align-items:center;gap:16px}
.testimonial__avatar{flex:0 0 68px;width:68px;height:68px;border-radius:50%;overflow:hidden;background:var(--surface)}
.testimonial__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.testimonial__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.testimonial__quote{flex:1}

/* ---------- 9. EQUIPE — foto retrato sem distorção ---------- */
.member__photo{max-width:230px}
.member__photo img{aspect-ratio:1/1;object-position:center 22%}

/* ---------- 7b. CASES — objetivo/solução dentro da coluna do meio ---------- */
.case-row{align-items:start}
.case-row__desc{display:flex;flex-direction:column;gap:12px}
.case-row__desc p{font-size:15px;line-height:1.6;color:var(--text-dim);font-weight:300}
.case-row__desc b{display:block;font-family:var(--f-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.case-row__nums{padding-top:4px}
.case-num span{max-width:150px;text-align:right;line-height:1.4}
@media(max-width:900px){.case-num span{text-align:left;max-width:none}}

/* ---------- 8b. SOLUÇÕES — texto de abertura de cada grupo ---------- */
.sol-group__intro{grid-column:1/-1;margin:-6px 0 6px;font-size:15px;line-height:1.65;font-weight:300;color:var(--text-dim);max-width:80ch}

/* ---------- 9b. BIG NUMBERS — agora são 5 números ---------- */
.stats{grid-template-columns:repeat(5,1fr);gap:20px}
.stats .stat__num,.stats .stat__plus{font-size:clamp(34px,4.2vw,64px)}
.stat__lbl{max-width:170px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr);row-gap:44px}}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);row-gap:36px}}

/* ---------- 10. AJUSTES GERAIS DE RESPONSIVIDADE ---------- */
img{height:auto}
.section-head__sub--center{margin-inline:auto;text-align:center}

/* =========================================================================
   AJUSTES PEDIDOS PELA ZYGON — rodada de 14/08
   ========================================================================= */

/* ---------- MENU SUPERIOR ---------- */
/* fonte maior, cinza mais claro e faixa mais alta */
.nav{padding:26px var(--pad)}
.nav.is-scrolled{padding:14px var(--pad)}
.nav__inner{padding:18px 18px 18px 26px}
.nav__links{gap:10px}
.nav__links a{font-size:14px;letter-spacing:.03em;color:rgba(245,247,250,.86);padding:10px 16px}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current="page"]{color:var(--lime)}

/* ---------- CTA DO WHATSAPP: sem neon, roxo no toque ---------- */
.btn--wpp{box-shadow:none}
.btn--wpp::before{display:none}
.btn--wpp:hover{background:var(--purple);color:#fff;box-shadow:none;transform:translateY(-2px)}
.btn--wpp:active{background:var(--purple);color:#fff}
.nav__cta{box-shadow:none}
.nav__cta:hover{background:var(--purple);color:#fff;box-shadow:none}
.float-whatsapp{box-shadow:0 8px 26px rgba(0,0,0,.45)}
.float-whatsapp::before{display:none}
.float-whatsapp:hover{background:var(--purple)}

/* ---------- HERO: hashtags no lugar dos boxes ---------- */
.hero-zg__tags--hash{gap:16px;margin-top:30px}
.hero-zg__tags--hash li{border:0;padding:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(14px,1.15vw,16px);letter-spacing:-.01em;text-transform:none;color:var(--lime)}
.hero-zg__tags--hash li:first-child{color:var(--lime)}

/* ---------- FAIXA ANIMADA: separador ponto ---------- */
.marquee__group i{font-style:normal;opacity:.5}

/* ---------- TIPOGRAFIA PADRONIZADA ----------
   Um tamanho para os títulos de seção e um para o corpo, no site inteiro. */
:root{
  --t-titulo: clamp(34px, 4.4vw, 62px);   /* títulos de seção e de página */
  --t-corpo:  clamp(16px, 1.25vw, 18.5px);/* corpo de texto              */
  --t-corpo-p: clamp(15px, 1.1vw, 17px);  /* corpo menor (cards, itens)  */
}
.hero-zg__title,
.manifesto__title,
.section-head__title,
.article__title,
.cta-final__title{font-size:var(--t-titulo);line-height:1.06;letter-spacing:-.04em}

.hero-zg__lead,
.manifesto__text,
.section-head__sub,
.case-row__desc p,
.sol-group__intro{font-size:var(--t-corpo);line-height:1.62}

.sol-item p,
.testimonial__quote{font-size:var(--t-corpo-p)}

/* cinza mais claro em todo o corpo de texto, para dar visibilidade */
:root{--text-dim:rgba(245,247,250,.80);--text-mute:rgba(245,247,250,.58)}

/* ---------- NUMERAÇÃO DE SEÇÃO FORA (/01, /02, /03) ---------- */
.section-head__num,
.manifesto__head .section-head__num{display:none}
.manifesto__head{gap:0}

/* ---------- SEGUNDO BLOCO ---------- */
/* parceiros em 2 linhas de 2, acima do botão */
.badges--2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  max-width:420px;margin:0 0 30px}
.badges--2x2 .badge-logo{min-width:0;width:100%}
@media(max-width:640px){.badges--2x2{max-width:none;justify-items:center}}

/* CTA final: fora as palavras de marca d'água, entra o símbolo da marca */
.cta-final::before{content:none}
.cta-final::after{
  content:"";
  background:url("assets/z-mark-lime.png") center/contain no-repeat;
  opacity:.05;
  width:min(52vw,620px);height:min(52vw,620px);
  top:50%;left:50%;transform:translate(-50%,-50%);
  bottom:auto;right:auto}

/* depoimentos: foto maior e nome/cargo mais claros */
.testimonial__avatar{flex:0 0 86px;width:86px;height:86px}
.testimonial__who strong{font-size:15.5px;color:#fff}
.testimonial__who span span,.testimonial__id span{color:rgba(245,247,250,.72);font-size:11.5px}
.testimonial__quote .lime{color:var(--lime);font-weight:600}

/* ---------- SOLUÇÕES ---------- */
.article__meta{margin-bottom:0}
.solutions .container > .manifesto__text:first-of-type{margin-top:18px}
.article__hero{padding-bottom:26px}
.sol-item{background:linear-gradient(155deg,rgba(196,250,46,.07),rgba(168,107,255,.05) 55%,transparent);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.sol-item:hover{border-color:var(--lime);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.sol-item h3{font-size:21px}
.sol-item h3 span{font-size:10.5px}
.sol-group{transition:border-color .3s}
.sol-group[open]{border-color:rgba(196,250,46,.28)}
.sol-group__body{animation:abreGrupo .35s var(--ease)}
@keyframes abreGrupo{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- CASES ---------- */
.case-row{padding:56px 0}
.case-row__brand{font-size:clamp(24px,2.6vw,34px)}
/* resultados abaixo do texto, com título — igual ao mobile */
.case-row{grid-template-columns:220px 1fr}
.case-row__desc{grid-column:2}
.case-row__nums{grid-column:2;justify-content:flex-start;gap:44px;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--border);position:relative}
.case-row__nums::before{content:"Resultados";position:absolute;top:-9px;left:0;
  background:var(--bg);padding-right:12px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.case-num{text-align:left}
.case-num strong{color:var(--lime)}
.case-num span{text-align:left;max-width:190px}
@media(max-width:900px){.case-row{grid-template-columns:1fr}
  .case-row__desc,.case-row__nums{grid-column:1}}

/* ---------- SOBRE ---------- */
/* chancelas na lateral do texto, um pouco menores */
.sobre-chancelas{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.sobre-chancelas .badges{margin:0;flex-direction:column;gap:12px}
.sobre-chancelas .badge-logo{width:100%;min-width:0;min-height:86px;padding:16px 20px}
.sobre-chancelas .badge-logo img{max-height:40px;max-width:120px}
@media(max-width:900px){.sobre-chancelas{grid-template-columns:1fr;gap:26px}
  .sobre-chancelas .badges{flex-direction:row;flex-wrap:wrap}
  .sobre-chancelas .badge-logo{width:auto;min-width:150px}}

/* ---------- ESPAÇAMENTOS DO TOPO DAS PÁGINAS INTERNAS ---------- */
.article__hero + * , article.article + section{margin-top:0}
.solutions{padding-top:26px}

/* ---------- MENU LATERAL DOS ARTIGOS (índice) ---------- */
.toc__list a{font-size:15px;color:rgba(245,247,250,.86)}
.toc__list a:hover{color:var(--lime)}
.toc__list span{font-size:11px}
.toc__title{font-size:12px;color:rgba(245,247,250,.62)}

/* ---------- ESPAÇAMENTO DO TOPO DAS PÁGINAS INTERNAS ---------- */
/* pedido: reduzir a distância entre o subtexto e o conteúdo */
.article__hero{padding-top:calc(var(--navH,72px) + 54px);padding-bottom:22px}
.blog-section,.solutions{padding-top:22px}

/* ---------- CLIENTES NO MOBILE ----------
   No celular o grid de 18 logos criava uma rolagem longa demais.
   Vira uma faixa que desliza para o lado, com 2 linhas. */
@media(max-width:760px){
  .clients-grid{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
    grid-template-columns:none;grid-auto-columns:44%;
    gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:14px;margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);scrollbar-width:none}
  .clients-grid::-webkit-scrollbar{display:none}
  .client-cell{scroll-snap-align:start;min-height:104px}
  /* dica visual de que dá para arrastar */
  .brands .clients-grid::after{content:"";flex:0 0 4px}
}

/* ---------- MOBILE: pedidos específicos ---------- */
@media(max-width:900px){
  /* subtexto do topo no mesmo tamanho do corpo das demais seções */
  .hero-zg__lead{font-size:var(--t-corpo)}
  /* blocos de parceiros maiores e centralizados */
  .badges--2x2{max-width:none;grid-template-columns:repeat(2,1fr);justify-items:stretch}
  .badges--2x2 .badge-logo{min-height:118px}
  .badges--2x2 .badge-logo img{max-height:56px;max-width:150px}
  /* menos espaço entre as logos Uber/Eletromídia e "conheça a equipe" */
  .sobre-chancelas + .badges,.manifesto .badges:last-of-type{margin-bottom:18px}
  .team{padding-top:26px}
}

/* ---------- DESTAQUE EM VERDE ----------
   .lime existia só dentro de alguns blocos (section-head, cta-final...).
   Como o painel deixa usar <span class="lime"> em qualquer texto, a regra
   passa a valer no site inteiro. */
.lime{color:var(--lime)}
.hero-zg__lead .lime,.manifesto__text .lime,.sol-item p .lime,
.case-row__desc .lime,.testimonial__quote .lime{color:var(--lime);font-weight:600}

/* ---------- NOTÍCIAS: resumo abaixo do título ---------- */
.news-item{grid-template-columns:130px 1fr auto;align-items:start}
.news-item__txt{display:block;min-width:0}
.news-item__resumo{margin-top:7px;font-size:15px;line-height:1.6;
  color:rgba(245,247,250,.72);max-width:70ch;font-weight:300}
.news-item:hover .news-item__resumo{color:rgba(245,247,250,.86)}
@media(max-width:700px){.news-item__resumo{font-size:14.5px}}

/* ---------- PRODUTO COM ARTIGO NO BLOG ---------- */
.sol-item--link{text-decoration:none;color:inherit;position:relative;padding-bottom:44px}
.sol-item__mais{position:absolute;left:26px;bottom:22px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lime);opacity:.85;transition:opacity .3s,transform .3s}
.sol-item--link:hover .sol-item__mais{opacity:1;transform:translateX(3px)}

/* ---------- CONVIVER COM A BARRA DE COOKIES ----------
   menu.js mede a barra injetada pelo Gerenciador de Tags e guarda a
   altura em --barra-topo. O menu desce essa medida em vez de ficar
   escondido atrás dela. */
.nav{top:var(--barra-topo,0px);transition:top .25s var(--ease),padding .4s var(--ease)}
html.tem-barra-topo .hero-zg{padding-top:calc(var(--navH,72px) + 60px + var(--barra-topo,0px))}
html.tem-barra-topo .article__hero{padding-top:calc(var(--navH,72px) + 54px + var(--barra-topo,0px))}
@media(max-width:1024px){
  html.tem-barra-topo body.menu-open .nav__links{top:calc(var(--navH,72px) + var(--barra-topo,0px))}
}

/* ---------- SOBRE: chancelas em 2x2 ao lado do texto ----------
   Empilhadas em 4, a coluna ficava com o triplo da altura do texto. */
.sobre-chancelas{grid-template-columns:1.25fr .75fr;align-items:center}
.sobre-chancelas .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sobre-chancelas .badge-logo{min-height:100px;padding:14px 16px}
.sobre-chancelas .badge-logo img{max-height:38px;max-width:104px}
.sobre-chancelas .manifesto__text{max-width:none}
@media(max-width:900px){
  .sobre-chancelas{grid-template-columns:1fr}
  .sobre-chancelas .badges{grid-template-columns:repeat(2,1fr)}
}

/* ---------- EQUIPE: título e subtítulo no mesmo alinhamento ---------- */
.section-head__sub--center{margin-inline:0;text-align:left;max-width:70ch}

/* ---------- capa do card de artigo (blog) ----------
   Opcional: sem imagem, continua valendo o padrão gráfico da marca
   (.post__pattern--1/2/3). O painel escolhe entre um e outro. */
.post__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           display:block;transition:transform .6s var(--ease)}
.post:hover .post__img{transform:scale(1.045)}
/* escurece só o topo, para a etiqueta da categoria ler bem sobre foto clara */
.post__media:has(.post__img)::after{content:"";position:absolute;inset:0 0 auto;height:78px;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);pointer-events:none}

/* ---------- página 404 ----------
   Quem chega por link antigo do site anterior cai aqui, não numa tela de
   erro do servidor. O menu inteiro fica à mão. */
.erro404__texto{margin-top:18px;max-width:62ch;font-size:var(--t-corpo);
                line-height:1.65;color:var(--text-mute)}
.erro404__rotulo{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;
                 text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.erro404__links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.erro404__links a{display:inline-flex;align-items:center;padding:11px 20px;
  border:1px solid rgba(255,255,255,.14);border-radius:100px;font-size:14.5px;
  color:var(--text);text-decoration:none;transition:all .3s var(--ease)}
.erro404__links a:hover{border-color:var(--lime);color:var(--lime);
  transform:translateY(-2px)}
.erro404__ajuda{font-size:var(--t-corpo);color:var(--text-mute)}
.erro404__ajuda a{color:var(--lime)}


/* ---------- rodapé: link da Política de Privacidade ---------- */
.footer__legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.footer__legal a:hover{color:var(--lime);border-color:var(--lime)}

/* ---------- página legal (politica-de-privacidade.html) ----------
   Reaproveita o layout de artigo, numa coluna só, e dá estilo às
   tabelas de cookies e às listas. */
.legal .article__body{grid-template-columns:minmax(0,860px)}
.legal .article__content{font-size:17px}
.legal .article__content h2{font-size:clamp(22px,2.4vw,30px)}
.legal .article__content ul,.legal .article__content ol{padding-left:1.4em}
.legal .article__content li{margin-top:.5em}
.legal .article__content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-family:var(--f-mono);font-size:12.5px;line-height:1.5}
.legal .article__content th,.legal .article__content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.legal .article__content th{color:var(--lime);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.legal .article__content td{color:var(--text-dim)}
@media(max-width:640px){.legal .article__content table{display:block;overflow-x:auto;white-space:nowrap}}

/* ---------- Big Numbers: sinal ANTES do número, tudo na mesma linha ----------
   Pedido da Zygon (ajustes v2): "+200", "+2bi", "+270mi". O .stat__num vira
   uma linha com sinal + número + sufixo; o contador anima só o .stat__val. */
.stat__num{display:flex;align-items:baseline;white-space:nowrap}
.stat__num .stat__plus{margin-left:0;margin-right:-.02em}
.stat__suf{color:var(--lime);margin-left:.03em}          /* bi, mi: colado (+2bi) */
.stat__suf--palavra{margin-left:.14em}                  /* anos, meses: com espaço */

/* =====================================================================
   AJUSTES v2 DA ZYGON (doc "AJUSTES v2 site - 25.08") — 27/08/2026
   Tudo abaixo vence as regras anteriores por vir depois no arquivo.
   ===================================================================== */

/* --- CTA final: dois símbolos Z, um de cada lado --- */
.cta-final::before,.cta-final::after{content:"";background:url("assets/z-mark-lime.png") center/contain no-repeat;
  opacity:.06;width:min(34vw,420px);height:min(34vw,420px);top:50%;bottom:auto;transform:translateY(-50%)}
.cta-final::before{left:-4%;right:auto}
.cta-final::after{right:-4%;left:auto}
@media(max-width:700px){.cta-final::before,.cta-final::after{width:54vw;height:54vw;opacity:.05}
  .cta-final::before{left:-24vw}.cta-final::after{right:-24vw}}

/* --- Hero: título um degrau acima dos títulos de seção (é o h1 da página) --- */
.hero-zg__title{font-size:clamp(38px,5vw,70px);font-variation-settings:"wdth" 92}
/* subtexto do hero na mesma presença do texto "Pessoas, tecnologia e dados" */
.hero-zg__lead{color:var(--text)}
/* faixa de hashtags mais perto do texto/botão */
.hero-zg__tags--hash{margin-top:14px}
.hero-zg__actions{margin-top:28px}

/* --- Botões WhatsApp: texto centralizado; no celular cabe na tela sem ficar gigante --- */
.btn--wpp{justify-content:center;text-align:center}
button.btn--wpp{cursor:pointer;font-family:var(--f-display);font-weight:700;line-height:1.2;appearance:none;-webkit-appearance:none}
.btn--wpp:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn--wpp .btn__icon{display:inline-flex}
@media(max-width:560px){
  .btn--wpp,.btn--wpp--xl{font-size:15.5px;padding:16px 24px;width:100%;max-width:420px}
}

/* --- Soluções: boxes de produto com mais presença --- */
.sol-item{background:linear-gradient(155deg,rgba(196,250,46,.16),rgba(168,107,255,.12) 55%,rgba(255,255,255,.03));
  border-color:rgba(196,250,46,.26)}
.sol-item:hover{border-color:var(--lime);box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 1px rgba(196,250,46,.35)}

/* --- Cases: rótulos Objetivo / Solução / Resultados maiores; sem linha dupla no topo --- */
.case-row__desc b{font-size:12.5px;letter-spacing:.16em;margin-bottom:6px}
.case-row__nums::before{font-size:12.5px;top:-10px}
.case-row:first-of-type{border-top:0}
/* Notícias: mesma linha dupla depois de "O que se fala da Zygon" */
.news-item:first-of-type{border-top:0}

/* --- Menu lateral dos artigos: maior e mais claro --- */
.toc__list a{font-size:16.5px;color:rgba(245,247,250,.95)}
.toc__list span{font-size:12px}
.toc__title,.share__title{font-size:12.5px;color:rgba(245,247,250,.78)}
.share__list a{color:rgba(245,247,250,.92);border-color:rgba(255,255,255,.3);width:44px;height:44px}
.share__list a.copiado{background:var(--lime);color:#000;border-color:var(--lime)}

/* --- Mobile: parceiros maiores e centralizados (Home, segundo bloco) --- */
@media(max-width:640px){
  .badges--2x2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:380px;margin:0 auto 30px}
  .badges--2x2 .badge-logo{min-height:100px;padding:18px 16px}
  .badges--2x2 .badge-logo img{max-height:58px;max-width:140px}
}

/* --- Mobile: menos espaço entre topo e conteúdo nas internas, e no Sobre antes da equipe --- */
@media(max-width:760px){
  .article__hero{padding-top:calc(var(--navH,72px) + 28px);padding-bottom:14px}
  html.tem-barra-topo .article__hero{padding-top:calc(var(--navH,72px) + 28px + var(--barra-topo,0px))}
  .solutions,.blog-section{padding-top:12px}
  .blog{padding-bottom:60px}
  .masonry{margin-top:16px}
  .news-item{padding:22px 0}
  .manifesto{padding-bottom:40px}
  .team{padding-top:56px;padding-bottom:70px}
  .sobre-chancelas{gap:22px}
  .cta-final{padding:100px 0}
}
/* --- Ativação dos botões WhatsApp/enviar em BRANCO (pedido v2), não roxo --- */
.btn--wpp:hover,.btn--wpp:active,.btn--wpp:focus-visible{background:var(--text);color:#000;box-shadow:0 10px 30px rgba(255,255,255,.18)}
/* --- Botão dos formulários no tamanho do conteúdo (como o da Home); largura total só no celular --- */
.form button.btn--wpp{justify-self:start;width:auto}
@media(max-width:560px){.form button.btn--wpp{justify-self:stretch;width:100%;max-width:none}}
/* --- Cases com três resultados (ex.: Prezunic): quebram linha se faltar espaço --- */
.case-row__nums{flex-wrap:wrap;row-gap:18px}
/* --- Home, segundo bloco: texto alinhado pelo TOPO dos cards de parceiros (antes: pela base) --- */
.manifesto__body{align-items:start}
.manifesto__body .manifesto__text{margin-top:0}

/* --- Blog: grade regular de 3 colunas (antes: masonry por colunas, que embaralhava a ordem) --- */
.masonry{columns:auto;column-gap:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.masonry .post{margin-bottom:0;break-inside:auto;display:flex}
@media(max-width:1000px){.masonry{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.masonry{grid-template-columns:1fr}}
/* --- Home, segundo bloco: o botão é item da grade e esticava até a largura da coluna; agora tem o tamanho do conteúdo, como o do topo --- */
.manifesto__body > .btn--wpp{justify-self:start;width:auto}
@media(max-width:560px){.manifesto__body > .btn--wpp{justify-self:stretch;width:100%;max-width:none}}
/* --- Soluções: boxes no molde do exemplo da Zygon (Canva, 28/08) ----------
   Fundo preto → roxo #2E1C47, box escuro com borda verde-limão, etiqueta
   em chip limão numerado ("01. PREMIUM"), título branco. --- */
.sol-group{background:linear-gradient(180deg,rgba(10,14,18,.55),rgba(46,28,71,.55));border-color:rgba(196,250,46,.18)}
.sol-group[open]{border-color:rgba(196,250,46,.38)}
.sol-group__body{counter-reset:produto}
.sol-item{background:linear-gradient(180deg,rgba(8,10,14,.94),rgba(46,28,71,.88));border:1.5px solid rgba(196,250,46,.8);
  border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.sol-item:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 26px rgba(196,250,46,.28)}
.sol-item h3{color:#fff;font-weight:700}
.sol-item h3 span{display:table;background:var(--lime);color:#000;font-weight:700;font-size:11px;letter-spacing:.1em;
  padding:7px 12px;border-radius:10px;margin-bottom:14px}
.sol-item h3 span::before{counter-increment:produto;content:counter(produto,decimal-leading-zero) ". "}
.sol-item p{color:rgba(245,247,250,.84)}
/* ---- artigos: texto sem espaços (link longo, palavra colada) quebra em vez de estourar a coluna ---- */
.article__content, .article__content p, .article__content li, .article__lead{overflow-wrap:anywhere;word-break:break-word}

/* ---- topo do artigo: "Voltar para o blog" e a etiqueta na mesma linha, centralizados e com respiro ---- */
.article__hero .article__back, .article__hero .article__cat{vertical-align:middle;margin-top:0;margin-bottom:28px}
.article__hero .article__back{margin-right:18px}
@media (max-width:560px){.article__hero .article__back{margin-right:12px}}

/* ---- CTA dos artigos: texto sempre visivel (a cor de link do artigo vencia a do botao) e hover roxo, como os demais botoes da marca ---- */
.article__content .btn.btn--primary{color:#000;text-decoration:none}
.btn--primary::before{display:none}
.btn--primary:hover{background:var(--purple);color:#fff;transform:translateY(-2px)}
.btn--primary:active{background:var(--purple);color:#fff}