
/* ============ O PROJETO - 4 layouts - escala tipografica identica a home ============ */
:root{
--t-hero:clamp(1.3rem,2.4vw,2.15rem);
--t-secao:clamp(1.4rem,2.3vw,1.9rem);
--t-bloco:1.04rem;
--t-card:.99rem;
--t-corpo:17px;
--t-corpo-s:.96rem;
--t-corpo-xs:.93rem;
--t-rotulo:.68rem;
}
.proj{display:block}
.proj .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.proj h1,.proj h2,.proj h3{font-family:var(--f-tit);font-weight:700;line-height:1.18;letter-spacing:-.022em;color:var(--titulo);margin:0}
.proj h1{font-size:var(--t-hero);text-transform:uppercase}
.proj h2{font-size:var(--t-secao);text-transform:uppercase}
.proj p{margin:0 0 var(--s4)}
.proj p:last-child{margin-bottom:0}
.risca{display:block;width:54px;height:2px;background:var(--verde);margin:var(--s3) 0 var(--s4);border:0}
.proj section{padding:var(--s8) 0}
.p-texto p{font-size:var(--t-corpo);line-height:1.72;font-weight:300;color:var(--texto)}
.lead{font-size:var(--t-corpo);line-height:1.68;font-weight:400}

/* destaque (frase dos resultados) */
.p-destaque{margin:var(--s6) 0 0;padding:var(--s4) var(--s5);background:var(--verde-claro);border-left:3px solid var(--verde-esc);border-radius:0 8px 8px 0}
.p-destaque p{font-family:var(--f-tit);font-size:var(--t-bloco);line-height:1.55;font-weight:600;color:var(--verde-escuro);margin:0}

/* ---- HERO comum ---- */
.p-hero{position:relative;padding:0;overflow:hidden}
.p-hero .capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero-txt h1{color:inherit}

/* ---- INICIATIVA comum ---- */
.p-ini{display:grid;gap:var(--s6)}
.p-ini-foto{margin:0}
.p-ini-foto img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}

/* ---- LOGOS comum ---- */
.p-logos ul{list-style:none;margin:0;padding:0;display:grid;align-items:center;gap:var(--s5)}
.p-logos img{max-width:100%;height:auto;display:block;margin:0 auto;max-height:62px;object-fit:contain}

/* ---- PESQUISA comum ---- */
.p-sub{font-family:var(--f-tit);font-size:var(--t-bloco);font-weight:700;color:var(--titulo);margin:0 0 var(--s5)}
.p-perguntas{list-style:none;margin:0;padding:0}
.p-perguntas p{font-size:var(--t-corpo-s);line-height:1.68;margin:0;color:var(--texto)}
.p-perguntas .num{font-family:var(--f-tit);font-weight:700;line-height:1}

/* ======================= LAYOUT A - editorial guiado ======================= */
.pa .p-hero{min-height:clamp(400px,36vw,500px);display:flex;align-items:flex-end;background:#0d2016}
.pa .p-hero .capa{opacity:.5}
.pa .p-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,15,.25) 0%,rgba(9,22,15,.82) 100%)}
.pa .p-hero .container{position:relative;z-index:2;padding-top:var(--s8);padding-bottom:var(--s7)}
.pa .p-hero-txt{max-width:65%;color:#fff}
.pa .p-hero-txt h1{color:#fff}
.pa .p-hero-txt .lead{color:rgba(255,255,255,.9)}
.pa .p-intro{background:var(--creme-2)}
.pa .p-intro .p-texto{column-count:2;column-gap:var(--s7)}
.pa .p-intro .p-texto p{break-inside:avoid}
.pa .p-ini{grid-template-columns:7fr 5fr;align-items:start}
.pa .p-ini-txt h2{position:sticky;top:20px}
.pa .p-logos{background:var(--creme);padding-top:var(--s6);padding-bottom:var(--s6)}
.pa .p-logos ul{grid-template-columns:repeat(6,1fr)}
.pa .p-logos img{filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s}
.pa .p-logos li:hover img{filter:none;opacity:1}
.pa .p-perguntas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s7)}
.pa .p-perguntas li{display:grid;grid-template-columns:52px 1fr;gap:var(--s3);align-items:start}
.pa .p-perguntas .num{font-size:1.6rem;color:transparent;-webkit-text-stroke:1px var(--verde-esc)}

/* ======================= LAYOUT B - faixas alternadas ======================= */
.pb .p-hero{background:var(--verde-topo);min-height:0;padding:var(--s8) 0 var(--s7)}
.pb .p-hero .capa{display:none}
.pb .p-hero-txt{max-width:70%;color:#fff}
.pb .p-hero-txt h1{color:#fff}
.pb .p-hero-txt .lead{color:rgba(255,255,255,.88)}
.pb .p-faixa-foto{padding:0;height:clamp(220px,26vw,360px)}
.pb .p-faixa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pb .p-intro{background:#fff}
.pb .p-intro .p-texto{max-width:900px}
.pb .p-destaque{background:var(--verde-escuro);border:0;border-radius:10px;padding:var(--s5) var(--s6)}
.pb .p-destaque p{color:#fff}
.pb .p-ini-sec{background:var(--creme-2)}
.pb .p-ini{grid-template-columns:5fr 7fr}
.pb .p-ini-foto{order:-1}
.pb .p-logos{background:#fff}
.pb .p-logos ul{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.pb .p-logos li{border:1px solid var(--linha);border-radius:10px;padding:var(--s4);min-height:118px;display:flex;align-items:center;justify-content:center}
.pb .p-pesquisa{background:var(--verde-claro)}
.pb .p-perguntas{display:grid;gap:var(--s3)}
.pb .p-perguntas li{display:grid;grid-template-columns:46px 1fr;gap:var(--s4);align-items:center;background:#fff;border-radius:10px;padding:var(--s4) var(--s5)}
.pb .p-perguntas .num{width:36px;height:36px;border-radius:50%;background:var(--verde-esc);color:#fff;font-size:.78rem;display:flex;align-items:center;justify-content:center}

/* ======================= LAYOUT C - indice lateral ======================= */
.pc .p-hero{padding:0;min-height:0}
.pc .p-hero-grade{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(360px,32vw,460px)}
.pc .p-hero-txt{background:var(--creme-2);display:flex;flex-direction:column;justify-content:center;padding:var(--s7) var(--s7) var(--s7) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))}
.pc .p-hero-foto{position:relative;overflow:hidden}
.pc .p-hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc .p-corpo{display:grid;grid-template-columns:230px 1fr;gap:var(--s8)}
.pc .p-indice{display:block;position:sticky;top:24px;align-self:start}
.pc .p-indice ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--linha-2)}
.pc .p-indice a{display:block;padding:10px 0 10px var(--s3);font-size:var(--t-rotulo);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--texto-sec);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:color .25s,border-color .25s}
.pc .p-indice a:hover,.pc .p-indice a:focus-visible{color:var(--verde-esc);border-left-color:var(--verde-esc)}
.pc .p-blocos section{padding:0 0 var(--s8)}
.pc .p-blocos section:first-child{padding-top:var(--s8)}
.pc .p-blocos .container{max-width:none;padding:0}
.pc .p-ini{grid-template-columns:1fr}
.pc .p-ini-foto img{max-height:340px}
.pc .p-logos ul{grid-template-columns:repeat(6,1fr);gap:0}
.pc .p-logos li{padding:var(--s3) var(--s4);border-right:1px solid var(--linha)}
.pc .p-logos li:last-child{border-right:0}
.pc .p-perguntas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.pc .p-perguntas li{border:1px solid var(--linha);border-radius:10px;padding:var(--s5);background:#fff}
.pc .p-perguntas .num{display:block;font-size:var(--t-rotulo);letter-spacing:.14em;color:var(--verde-esc);margin-bottom:var(--s2)}

/* ======================= LAYOUT D - revista assimetrica ======================= */
.pd .p-hero{min-height:clamp(460px,44vw,600px);display:flex;align-items:flex-end;background:#0d2016}
.pd .p-hero .capa{opacity:.62}
.pd .p-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,15,.1) 40%,rgba(9,22,15,.78) 100%)}
.pd .p-hero .container{position:relative;z-index:2;padding-bottom:0}
.pd .p-hero-txt{max-width:65%;color:#fff;transform:translateY(calc(var(--s7) * -1))}
.pd .p-hero-txt h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.9rem)}
.pd .p-cartao{background:#fff;border-radius:10px;padding:var(--s5) var(--s6);max-width:760px;margin:calc(var(--s6) * -1) 0 0;position:relative;z-index:3;box-shadow:0 18px 46px rgba(13,32,22,.14)}
.pd .p-cartao .lead{color:var(--texto);margin:0}
.pd .p-intro{padding-top:var(--s7)}
.pd .p-intro .p-texto{max-width:72%;margin-left:auto}
.pd .p-destaque{background:transparent;border:0;border-top:2px solid var(--verde);border-radius:0;padding:var(--s5) 0 0;margin-top:var(--s7)}
.pd .p-destaque p{font-size:clamp(1.04rem,1.5vw,1.22rem);line-height:1.48;color:var(--titulo);font-weight:700;letter-spacing:-.022em}
.pd .p-ini{grid-template-columns:6fr 5fr;align-items:center}
.pd .p-ini-foto img{aspect-ratio:4/5;border-radius:10px}
.pd .p-logos{background:var(--creme);padding-top:var(--s6);padding-bottom:var(--s6)}
.pd .p-logos ul{grid-template-columns:repeat(6,1fr)}
.pd .p-perguntas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.pd .p-perguntas li{border-top:1px solid var(--linha-2);padding-top:var(--s3)}
.pd .p-perguntas .num{display:block;font-size:var(--t-rotulo);letter-spacing:.14em;color:var(--verde-esc);margin-bottom:var(--s2)}
.pd .p-perguntas p{font-size:var(--t-corpo-xs);line-height:1.62}

/* ---- indice escondido fora do layout C ---- */
.p-indice{display:none}

/* ============ responsivo ============ */
@media(max-width:1000px){
.pa .p-intro .p-texto{column-count:1}
.pa .p-ini,.pb .p-ini,.pd .p-ini{grid-template-columns:1fr}
.pb .p-ini-foto{order:0}
.pa .p-hero-txt,.pb .p-hero-txt,.pd .p-hero-txt{max-width:100%}
.pc .p-hero-grade{grid-template-columns:1fr}
.pc .p-hero-foto{min-height:260px}
.pc .p-hero-txt{padding:var(--s7) var(--gutter)}
.pc .p-corpo{grid-template-columns:1fr;gap:var(--s5)}
.pc .p-indice{position:static}
.pc .p-indice ul{display:flex;flex-wrap:wrap;gap:var(--s3);border-left:0;border-bottom:1px solid var(--linha-2);padding-bottom:var(--s3)}
.pc .p-indice a{border-left:0;padding:0}
.pd .p-intro .p-texto{max-width:100%}
.pd .p-perguntas{grid-template-columns:repeat(2,1fr)}
.pa .p-logos ul,.pd .p-logos ul,.pc .p-logos ul{grid-template-columns:repeat(3,1fr)}
.pc .p-logos li{border-right:0}
}
@media(max-width:660px){
.proj section{padding:var(--s7) 0}
.pa .p-perguntas,.pc .p-perguntas,.pd .p-perguntas{grid-template-columns:1fr}
.pb .p-logos ul,.pa .p-logos ul,.pd .p-logos ul,.pc .p-logos ul{grid-template-columns:repeat(2,1fr)}
.pd .p-hero-txt{transform:none}
.pd .p-cartao{margin-top:var(--s4);padding:var(--s4)}
.pa .p-perguntas li{grid-template-columns:44px 1fr}
}

/* ---- ajustes pos-revisao ---- */
.proj section[id]{scroll-margin-top:112px}
.pa .p-perguntas .num{font-size:1.28rem;color:var(--verde-esc);-webkit-text-stroke:0;opacity:.9}
.pc .p-indice{top:112px}
.p-ini-foto img{max-width:100%}

/* indice-contraste */
.pc .p-indice a{color:var(--texto)}

/* ===== ajustes 12/09 - hero centralizado, bloco iniciativa equilibrado, respiro menor ===== */

/* 1. HERO: titulo centralizado e texto em 100% da largura */
.pa .p-hero-txt{max-width:100%;text-align:center}
.pa .p-hero-txt .risca{margin-left:auto;margin-right:auto}
.pa .p-hero-txt .lead{max-width:100%;margin-left:auto;margin-right:auto}
.pa .p-hero .container{padding-top:var(--s7);padding-bottom:var(--s6)}
.pa .p-hero{min-height:clamp(360px,32vw,450px)}

/* 2. INICIATIVA: foto acompanha a altura do texto, sem sobra */
.pa .p-ini{align-items:stretch}
.pa .p-ini-txt h2{position:static}
.pa .p-ini-foto{display:flex}
.pa .p-ini-foto img{height:100%;min-height:340px;object-fit:cover}

/* 3. respiro entre secoes */
.proj section{padding:var(--s7) 0}
.pa .p-logos{padding-top:var(--s5);padding-bottom:var(--s5)}
.p-destaque{margin-top:var(--s5)}

/* foto do bloco INICIATIVA acompanha exatamente a altura do texto */
.pa .p-ini-foto{position:relative;min-height:340px;display:block}
.pa .p-ini-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
@media(max-width:1000px){
.pa .p-ini-foto{position:relative;min-height:0;aspect-ratio:4/3}
.pa .p-ini-foto img{position:absolute}
}

/* ===== bloco A PESQUISA com foto de fundo (igual ao site oficial) ===== */
.pa .p-pesquisa{position:relative;background-color:#31221C;background-image:var(--foto-pesq);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-attachment:fixed;isolation:isolate}
.pa .p-pesquisa::before{content:'';position:absolute;inset:0;background:#31221C;opacity:.87;z-index:-1}
.pa .p-pesquisa .container{position:relative;z-index:1}
.pa .p-pesquisa h2{color:#fff}
.pa .p-pesquisa .risca{background:#fff}
.pa .p-pesquisa .p-sub{color:#fff}
.pa .p-pesquisa .p-perguntas p{color:rgba(255,255,255,.93)}
.pa .p-pesquisa .p-perguntas .num{color:var(--verde);-webkit-text-stroke:0;opacity:1}
@media(max-width:900px){
.pa .p-pesquisa{background-attachment:scroll}
}

/* faixa de logos com fundo branco */
.pa .p-logos{background:#fff}

/* ===== espacamento padrao: todo bloco usa --bloco-y ===== */
.proj section{padding:var(--bloco-y) 0}
.pa .p-logos{padding-top:var(--bloco-y);padding-bottom:var(--bloco-y)}
.pb .p-faixa-foto,.pc .p-hero,.pd .p-hero,.pa .p-hero,.pb .p-hero{padding-top:0;padding-bottom:0}
.pc .p-blocos section{padding:0 0 var(--bloco-y)}
.pc .p-blocos section:first-child{padding-top:var(--bloco-y)}

/* banner: texto centralizado tambem na vertical, com respiro igual em cima e embaixo */
.pa .p-hero{align-items:center}
.pa .p-hero .container{padding-top:var(--bloco-y);padding-bottom:var(--bloco-y)}

/* ===== PADRAO DO SITE: texto abaixo do titulo no banner ocupa 80% da largura no desktop ===== */
.proj .p-hero-txt .lead,.proj .p-cartao .lead{max-width:80%;margin-left:auto;margin-right:auto}
@media(max-width:1000px){
.proj .p-hero-txt .lead,.proj .p-cartao .lead{max-width:100%}
}

/* ===== faixa de logos: grupo centralizado, sem esticar ate as bordas =====
   Os PNGs tem margens internas diferentes; esticando cada um numa celula de
   grade, as pontas encostavam na borda da coluna e a assimetria dos arquivos
   ficava visivel. Em flex centralizado o grupo fica optica e matematicamente
   no meio. */
.pa .p-logos ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s4) clamp(24px,3.2vw,52px);grid-template-columns:none}
.pa .p-logos li{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.pa .p-logos img{width:auto;max-width:150px;max-height:54px;object-fit:contain;margin:0}

/* logos: SEMPRE em uma unica linha no desktop */
@media(min-width:1001px){
.pa .p-logos ul{flex-wrap:nowrap}
.pa .p-logos li{flex:0 0 auto}
.pa .p-logos img{max-width:150px}
}
@media(max-width:1000px){
.pa .p-logos ul{flex-wrap:wrap}
}

/* logos: no desktop os itens podem encolher para caber sempre em uma linha */
@media(min-width:1001px){
.pa .p-logos ul{flex-wrap:nowrap;gap:clamp(18px,2.6vw,52px)}
.pa .p-logos li{flex:0 1 auto;min-width:0}
.pa .p-logos img{width:150px;max-width:100%;height:auto;max-height:54px;object-fit:contain}
}

/* ===== faixa de logos em 100% da largura da pagina, logos maiores ===== */
.pa .p-logos .container{max-width:none;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}
@media(min-width:1001px){
.pa .p-logos ul{flex-wrap:nowrap;justify-content:space-between;gap:clamp(16px,2.4vw,44px)}
.pa .p-logos li{flex:1 1 0;min-width:0;max-width:300px}
.pa .p-logos img{width:100%;max-width:100%;height:auto;max-height:92px;object-fit:contain}
}
@media(max-width:1000px){
.pa .p-logos ul{flex-wrap:wrap;justify-content:center;gap:var(--s4) clamp(24px,4vw,48px)}
.pa .p-logos li{flex:0 0 auto;max-width:none}
.pa .p-logos img{width:auto;max-width:170px;max-height:64px}
}

/* ===== CORRECAO: logos ocupam 100% da LARGURA DA PAGINA (a mesma coluna de
   conteudo do resto do site), nao a tela inteira. Preenchem de ponta a ponta
   dessa coluna, o maior tamanho possivel sem estourar. ===== */
.pa .p-logos .container{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter)}
@media(min-width:1001px){
.pa .p-logos ul{flex-wrap:nowrap;justify-content:space-between;gap:clamp(6px,1vw,18px)}
.pa .p-logos li{flex:1 1 0;min-width:0;max-width:none}
.pa .p-logos img{width:100%;max-width:100%;height:auto;max-height:80px;object-fit:contain}
}

/* ===== revelar ao rolar ===== */
.proj .rev{opacity:0;transform:translateY(20px);will-change:opacity,transform;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.proj .rev-vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .proj .rev{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ===== banner um pouco mais baixo ===== */
.pa .p-hero{min-height:clamp(310px,26vw,380px)}
.pd .p-hero{min-height:clamp(400px,37vw,510px)}
.pc .p-hero-grade{min-height:clamp(310px,27vw,390px)}

/* ===== parallax do banner: a foto ganha 32% de altura extra, com -16% no topo.
   Essa folga e o que permite deslizar sem abrir buraco. A classe tem-parallax
   e posta pelo JS: sem JS a foto fica do tamanho normal, cobrindo o banner. ===== */
.proj.tem-parallax .p-hero .capa{height:132%;top:-16%;will-change:transform}
@media(max-width:700px){
.proj.tem-parallax .p-hero .capa{height:100%;top:0;transform:none !important}
}
@media(prefers-reduced-motion:reduce){
.proj.tem-parallax .p-hero .capa{height:100%;top:0;transform:none !important}
}

/* links de post temporariamente desligados (_links_off.php) */
a[data-off]{cursor:default}
a[data-off]:hover{color:inherit;background-size:0 2px;opacity:1;transform:none}
a[data-off] .capa,a[data-off] img{transform:none !important}
/* ---- 05/10/2026 (observações do cliente) ---- */
/* largura total da página (pedido do Geiber 05/10/2026): texto do banner, introdução e destaque ocupam a largura do container, numa coluna só */
.pa .p-hero-txt .lead{max-width:none}
.pa .p-intro .p-texto{display:block;column-count:1;columns:auto;max-width:none}
.pa .p-intro .p-texto p+p{margin-top:1.1em}
.pa .p-intro .p-destaque{max-width:none}
/* logos nas versões originais (fundo branco) */
.pa .p-logos{background:#fff}
.pa .p-logos img,.pa .p-logos li:hover img{filter:none;opacity:1}
/* ---- 05/10/2026 — Quem somos (O projeto, Equipe, Manifesto): linhas com a mesma quantidade de caracteres ----
   texto justificado com hifenização em português (lang=pt-BR); no banner, a última linha fica centralizada */
main.pa .p-intro p, main.pa .p-ini-sec p, main.pa .p-destaque p, main.pa .p-pesq p,
main.pa.eq p, main.pa.man p{text-align:justify;-webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}
main.pa.eq .p-hero-txt .lead, main.pa.man .p-hero-txt .lead, main.pa:has(.p-intro) .p-hero-txt .lead{text-align:center;text-align-last:auto;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual}
/* ===== 15/10/2026 — espaco igual acima e abaixo da faixa de logos (84px), pedido do Geiber. Antes: 168px (fim do bloco anterior + topo das logos) ===== */
main.proj .p-ini-sec + .p-logos, main.proj .p-intro + .p-logos{padding-top:0!important}
main.proj .p-logos + .eq-sec:not(.alt){padding-top:0!important}
