/* ================= PAGINA MANIFESTO - 4 layouts =================
   IDENTIDADE PRESERVADA: nenhum tamanho de fonte novo.
   Titulo = --t-hero (igual O Projeto e Equipe)
   Frase de abertura e fecho = --t-secao
   Corpo = --t-corpo (17px/1.72 da home)
   Numeracao e rotulos = --t-rotulo
   Familias = --f-tit (Montserrat) e --f-txt (Rubik)
   Espacamento = --bloco-y ; filete verde = .risca */

.man .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.man h1{font-family:var(--f-tit);font-weight:700;font-size:var(--t-hero);letter-spacing:-.022em;line-height:1.18;text-transform:uppercase;margin:0}
.man p{margin:0 0 var(--s5)}
.man p:last-child{margin-bottom:0}
.man-lead p{font-family:var(--f-tit);font-size:var(--t-secao);font-weight:600;letter-spacing:-.022em;line-height:1.42;color:var(--titulo)}
.man-corpo p{font-size:var(--t-corpo);line-height:1.78;font-weight:300;color:var(--texto)}
.man-fecho p{font-family:var(--f-tit);font-weight:600;letter-spacing:-.022em;line-height:1.42}
.man-foto{margin:0;overflow:hidden}
.man-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sangra{width:100%;margin-left:0;max-width:none}

/* ======================= A - MANIFESTO TIPOGRAFICO ======================= */
.ma .p-hero{min-height:clamp(310px,26vw,380px)}
.ma .p-hero .capa{opacity:.38}
.ma .man-abertura{background:var(--creme-2);padding:var(--bloco-y) 0}
.ma .man-lead{max-width:56ch;margin:0 auto;text-align:center}
.ma .man-foto{margin-top:var(--bloco-y);height:clamp(220px,26vw,380px)}
.ma .man-corpo{padding:var(--bloco-y) 0;background:#fff}
.ma .man-corpo .container{max-width:70ch}
.ma .man-fecho{background:var(--verde-escuro);padding:var(--bloco-y) 0}
.ma .man-fecho .container{max-width:60ch;text-align:center}
.ma .man-fecho p{font-size:var(--t-secao);color:#fff}

/* ======================= B - OP-ED DE JORNAL ======================= */
.mb .p-hero{min-height:0;background:#fff;padding:var(--bloco-y) 0 var(--s5);align-items:flex-start}
.mb .p-hero .capa{display:none}
.mb .p-hero::after{display:none}
.mb .p-hero-txt{max-width:100%;text-align:left;border-top:3px solid var(--titulo);border-bottom:1px solid var(--linha-2);padding:var(--s4) 0}
.mb .p-hero-txt h1{color:var(--titulo)}
.mb .p-hero-txt .risca{display:none}
.mb .man-abertura{padding:0 0 var(--bloco-y)}
.mb .man-foto{height:clamp(240px,30vw,440px);margin-bottom:var(--s6)}
.mb .man-lead p{max-width:34ch;float:left;margin:0 var(--s6) var(--s4) 0}
.mb .man-corpo{padding:0 0 var(--bloco-y)}
.mb .man-corpo .container{column-count:2;column-gap:var(--s7);column-rule:1px solid var(--linha)}
.mb .man-corpo p{break-inside:avoid}
.mb .man-fecho{padding:0 0 var(--bloco-y)}
.mb .man-fecho .container{border:2px solid var(--titulo);padding:var(--s5) var(--s6)}
.mb .man-fecho p{font-size:var(--t-bloco);color:var(--titulo)}

/* ======================= C - DOCUMENTO ASSINADO ======================= */
.mc{background:var(--verde-escuro)}
.mc .p-hero{display:none}
.mc .man-folha{background:#fff;max-width:940px;margin:var(--bloco-y) auto;
  box-shadow:0 30px 80px rgba(9,22,15,.38);border-radius:4px;overflow:hidden;position:relative;z-index:2}
.mc .man-topo{padding:var(--bloco-y) clamp(28px,5vw,72px) var(--s5)}
.mc .man-topo h1{color:var(--titulo);max-width:22ch}
.mc .man-topo .risca{display:block;width:54px;height:2px;background:var(--verde);margin-top:var(--s4)}
.mc .man-foto{height:clamp(200px,22vw,320px)}
.mc .man-abertura,.mc .man-corpo,.mc .man-fecho{padding:0 clamp(28px,5vw,72px);background:transparent}
.mc .man-abertura{padding-top:var(--s6)}
.mc .man-abertura .container,.mc .man-corpo .container,.mc .man-fecho .container{max-width:none;padding:0}
.mc .man-corpo{counter-reset:par;padding-top:var(--s6)}
.mc .man-corpo p{position:relative;padding-left:64px}
.mc .man-corpo p::before{counter-increment:par;content:counter(par,decimal-leading-zero);
  position:absolute;left:0;top:.4em;font-family:var(--f-tit);font-size:var(--t-rotulo);
  letter-spacing:.14em;font-weight:700;color:var(--verde-esc)}
.mc .man-fecho{padding-top:var(--s5);padding-bottom:var(--bloco-y)}
.mc .man-fecho .container{border-top:2px solid var(--linha-2);padding-top:var(--s5)}
.mc .man-fecho p{font-size:var(--t-bloco);color:var(--titulo)}

/* ======================= D - DECLARACOES EM FAIXAS ======================= */
.md .p-hero{min-height:clamp(310px,26vw,380px)}
.md .p-hero .capa{opacity:.45}
.md .man-abertura{background:var(--verde-claro);padding:var(--bloco-y) 0}
.md .man-lead{max-width:64ch;margin:0 auto}
.md .man-lead p{color:var(--verde-escuro)}
.md .man-foto{height:clamp(200px,24vw,340px);margin-top:var(--bloco-y)}
.md .man-corpo{padding:0}
.md .man-corpo .container{max-width:none;padding:0}
.md .man-corpo p{margin:0;padding:var(--s7) max(var(--gutter),calc((100vw - 74ch)/2))}
.md .man-corpo p:nth-child(odd){background:#fff}
.md .man-corpo p:nth-child(even){background:var(--creme-2)}
.md .man-fecho{background:var(--verde-escuro);padding:var(--bloco-y) 0}
.md .man-fecho .container{max-width:62ch;text-align:center}
.md .man-fecho p{font-size:var(--t-secao);color:#fff}

/* ================= responsivo ================= */
@media(max-width:900px){
.mb .man-lead p{float:none;max-width:100%;margin-right:0}
.mb .man-corpo .container{column-count:1}
.mc .man-folha{margin-left:var(--gutter);margin-right:var(--gutter)}
.mc .man-corpo p{padding-left:46px}
.md .man-corpo p{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* ===== correcao de medida =====
   A abertura tem 962 caracteres e o fecho 399 - longos demais para o corpo
   de titulo (--t-secao). Passam a usar --t-bloco (1.04rem), que ja existe na
   escala do site: Montserrat 600, destacado do corpo pela familia e pelo peso,
   nao pelo tamanho. Texto alinhado a esquerda, que e legivel em bloco longo. */
.man-lead p{font-size:var(--t-bloco);line-height:1.64}
.ma .man-lead{max-width:66ch;text-align:left}
.ma .man-fecho .container{max-width:66ch;text-align:left}
.ma .man-fecho p{font-size:var(--t-bloco);line-height:1.64}
.md .man-lead{max-width:66ch}
.md .man-fecho .container{max-width:66ch;text-align:left}
.md .man-fecho p{font-size:var(--t-bloco);line-height:1.64}

/* texto de apoio abaixo do titulo: segue a regra do site (80% no desktop) */
.mb .p-hero-txt .lead{color:var(--texto);max-width:80%;margin-left:0}
.mc .man-topo .lead{font-size:var(--t-corpo);line-height:1.7;font-weight:300;color:var(--texto);margin:var(--s4) 0 0;max-width:62ch}

/* a foto de sangria e filha direta da secao, que ja ocupa a largura toda:
   100% resolve. Usar 100vw incluia a barra de rolagem e criava rolagem horizontal. */
.man .sangra{width:100%;margin-left:0;max-width:none}

/* ===== LAYOUT A APROVADO: foto ao lado do texto no bloco logo abaixo do
   header, com a mesma altura do texto; e todo o texto seguinte ocupando
   100% da largura da pagina. ===== */
.ma .man-duo{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:stretch}
.ma .man-duo > *{min-width:0}
.ma .man-lead{max-width:none;text-align:left;margin:0;display:flex;flex-direction:column;justify-content:center}
.ma .man-foto{position:relative;min-height:0;height:auto;margin:0;border-radius:10px;overflow:hidden}
.ma .man-foto img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}

/* texto do corpo e do fecho na largura inteira da pagina */
.ma .man-corpo .container{max-width:var(--container)}
.ma .man-fecho .container{max-width:var(--container);text-align:left}

@media(max-width:900px){
.ma .man-duo{grid-template-columns:1fr}
.ma .man-foto{aspect-ratio:16/9}
}

/* ================= 4 VERSOES DO BLOCO DE ABERTURA =================
   Mesmas fontes, mesmos tamanhos, mesmo espacamento. Muda so o arranjo. */

/* --- 1: foto em faixa larga por cima, texto em duas colunas embaixo --- */
.ab1 .man-duo{grid-template-columns:1fr;gap:var(--s6)}
.ab1 .man-foto{order:-1;aspect-ratio:21/8}
.ab1 .man-lead{column-count:2;column-gap:var(--s7);display:block}
.ab1 .man-lead p{break-inside:avoid-column}

/* --- 2: foto grande a esquerda, texto a direita centralizado --- */
.ab2 .man-duo{grid-template-columns:6fr 6fr;gap:var(--s7);align-items:center}
.ab2 .man-foto{order:-1;aspect-ratio:4/3;position:relative;height:auto}
.ab2 .man-lead{justify-content:center}
.ab2 .man-lead::before{content:'';display:block;width:54px;height:2px;background:var(--verde);margin-bottom:var(--s4)}

/* --- 3: texto em duas colunas, foto vertical alta ao lado --- */
.ab3 .man-duo{grid-template-columns:8fr 4fr;gap:var(--s7);align-items:stretch}
.ab3 .man-lead{column-count:2;column-gap:var(--s6);display:block}
.ab3 .man-lead p{break-inside:avoid-column}
.ab3 .man-foto{position:relative;min-height:0}

/* --- 4: foto em faixa larga e o texto num cartao branco sobreposto --- */
.ab4 .man-duo{display:block;position:relative}
.ab4 .man-foto{position:relative;aspect-ratio:21/8;height:auto;border-radius:10px;margin:0}
.ab4 .man-lead{background:#fff;max-width:86%;margin:calc(var(--s7) * -1) auto 0;padding:var(--s6) var(--s7);
  position:relative;z-index:2;border-radius:10px;box-shadow:0 20px 48px rgba(13,32,22,.13);display:block}

@media(max-width:900px){
.ab1 .man-lead,.ab3 .man-lead{column-count:1}
.ab2 .man-duo,.ab3 .man-duo{grid-template-columns:1fr}
.ab2 .man-foto,.ab3 .man-foto{aspect-ratio:16/9}
.ab4 .man-lead{max-width:100%;margin-top:var(--s4);padding:var(--s5) var(--s4);box-shadow:none}
.ab4 .man-foto{aspect-ratio:16/9}
}

/* ===== bloco de fecho com foto de fundo =====
   Mesma logica do bloco A PESQUISA do O Projeto: foto + veu escuro por cima,
   texto branco. O veu garante a leitura em qualquer foto que entre no lugar. */
.man-fecho{position:relative;background-color:var(--verde-escuro);
  background-image:var(--foto-fecho);background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;background-attachment:fixed;isolation:isolate}
.man-fecho::before{content:'';position:absolute;inset:0;background:var(--verde-escuro);opacity:.88;z-index:-1}
.man-fecho .container{position:relative;z-index:1}
.man-fecho p{color:#fff}
@media(max-width:900px){ .man-fecho{background-attachment:scroll} }

/* o atalho "background:" dos layouts A e D zerava a imagem de fundo;
   aqui a regra volta com a mesma especificidade */
.ma .man-fecho,.md .man-fecho{
  background-color:var(--verde-escuro);
  background-image:var(--foto-fecho);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  background-attachment:fixed;position:relative;isolation:isolate}
.ma .man-fecho::before,.md .man-fecho::before{content:'';position:absolute;inset:0;background:var(--verde-escuro);opacity:.88;z-index:-1}
@media(max-width:900px){ .ma .man-fecho,.md .man-fecho{background-attachment:scroll} }

/* abertura 4: a foto vem antes no visual, o cartao sobe por cima dela.
   No HTML o texto vem primeiro, entao a ordem e invertida no flex. */
.ab4 .man-duo{display:flex;flex-direction:column;position:relative}
.ab4 .man-foto{order:-1}
.ab4 .man-lead{order:1}
@media(max-width:900px){ .ab4 .man-duo{display:flex} }

/* ===== ABERTURA 2 APROVADA =====
   sem o filete verde acima do texto + zoom suave na foto ao passar o mouse */
.ab2 .man-lead::before{display:none}

.ma .man-foto{overflow:hidden}
.ma .man-foto img{transform:scale(1);transition:transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform}
.ma .man-foto:hover img,.ma .man-foto:focus-within img{transform:scale(1.09)}
@media(prefers-reduced-motion:reduce){
.ma .man-foto img{transition:none}
.ma .man-foto:hover img{transform:none}
}