/*
Theme Name: Evandro Caitano
Theme URI: https://evandrocaitano.com
Author: Túlio Botega
Description: Tema sob medida do site de posicionamento de Evandro Caitano. One page + blog. Conteúdo por ACF, sem construtor visual.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: evandro-caitano
*/


/* ============================================================
   VERSÃO A: credencial e presença
   Túlio Botega para GM Executive Voice · 24/08/2026

   Copy final aprovado pelo cliente (Evandro_Site_Copy_Final_FECHADO.pdf).
   Caminho do pauloganime.com.br + template Consultant (BRIX).
   Densidade por presença física e credencial verificável.
   Valores medidos na pesquisa: padding 112px constante,
   containers 1200/720, grid 3x368/gap24, 5 superfícies,
   3 seções escuras, textura de grade 42px a 3.5%.
   ============================================================ */

:root{
  /* 5 superfícies, contra as 2 da v1 */
  --papel:    #F6F5F2;
  --papel-2:  #ECEBE6;
  --card:     #FFFFFF;
  --tinta:    #101114;
  --tinta-2:  #191A1F;

  /* 4 níveis de tinta, contra 1 da v1 */
  --ink-900:  #101114;
  --ink-700:  #2A2C31;
  --ink-500:  #5C6068;
  --bronze:   #8A6A3B;
  --bronze-t: #6B5129;

  --linha:    rgba(16,17,20,.12);
  --linha-2:  rgba(16,17,20,.07);

  --max-w:     1200px;
  --content-w: 720px;
  --respiro:   clamp(4rem, 7vw, 7rem);   /* 64 a 112px, constante por seção */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px }
body{
  margin:0; background:var(--papel); color:var(--ink-700);
  font-family:var(--sans); font-size:1rem; line-height:1.625;  /* rem, não px: px ignora a escala de fonte do sistema */
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit }

.env{ width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:24px }
@media(min-width:768px){ .env{ padding-inline:48px } }
@media(min-width:1024px){ .env{ padding-inline:80px } }
/* Medida de leitura SEM centralizar: o contêiner segue em 1200px, então a
   borda esquerda é a mesma em todas as seções. Centralizar a coluna fazia
   a âncora saltar 240px na troca de seção. */
.env--estreito > *{ max-width:var(--content-w); margin-inline:0 }

section{ padding-block:var(--respiro) }
/* scroll-margin-top removido: somava com o scroll-padding-top:88px do html
   e as âncoras paravam 160px abaixo do topo. Um dos dois basta. */
section.comprimida{ padding-block:48px; border-block:1px solid var(--linha) }

/* ---------- tipografia: razão display/corpo 4.25:1 ---------- */
.display{
  font-family:var(--serif); font-weight:300; margin:0;
  line-height:1.08; letter-spacing:-.025em; color:var(--ink-900);
  overflow-wrap:break-word;
}
h1.display{ font-size:clamp(2rem, 3.55vw, 3.05rem) }  /* headline aprovada tem 81 caracteres: escala menor para caber em 4 linhas */
h2.display{ font-size:clamp(1.75rem, 3.2vw, 2.5rem); line-height:1.15; letter-spacing:-.02em }
h3{ font-family:var(--sans); font-weight:600; font-size:1.5rem; line-height:1.33; letter-spacing:-.015em; margin:0; color:var(--ink-900) }

.olho{
  font-size:.75rem; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--bronze-t); display:flex; align-items:center; gap:12px; margin:0 0 20px;
}
.olho::before{ content:""; width:64px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--bronze),#B08A50) }
.olho b{ font-weight:600; font-variant-numeric:tabular-nums }

p{ margin:0 0 1.15em }
.lead{ font-family:var(--serif); font-weight:300; font-size:1.25rem; line-height:1.4; color:var(--ink-900) }
.apoio{ font-size:.875rem; color:var(--ink-500) }

/* ---------- textura: maior ganho por linha de CSS ---------- */
.textura{
  background-color:var(--papel-2);
  background-image:
    linear-gradient(90deg, rgba(16,17,20,.035) 0 1px, transparent 1px),
    linear-gradient(0deg,  rgba(16,17,20,.03)  0 1px, transparent 1px),
    radial-gradient(circle at 18% 8%,  rgba(138,106,59,.11), transparent 340px),
    radial-gradient(circle at 85% 18%, rgba(16,17,20,.06),  transparent 306px);
  background-size:42px 42px, 42px 42px, auto, auto;
}

/* ---------- seções escuras: 3 de 12 ---------- */
.escura{ background:var(--tinta); color:rgba(246,245,242,.75) }
.escura .display,.escura h3{ color:#F6F5F2 }
.escura .olho{ color:rgba(246,245,242,.55) }
.escura .apoio{ color:rgba(246,245,242,.55) }
.escura--grad{ background:linear-gradient(135deg,#191A1F,#101114 58%,#241C10) }
.escura .card{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08) }
.escura .card h3{ color:#F6F5F2 }
.escura .num__valor{ color:#F6F5F2 }
.escura .num__rot{ color:rgba(246,245,242,.55) }

/* ---------- header fixo 72px ---------- */
.topo{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:100;
  display:flex; align-items:center;
  background:transparent; transition:background-color 300ms ease, border-color 300ms ease;
  border-bottom:1px solid transparent;
}
.topo.solido{ background:rgba(246,245,242,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--linha) }
.topo .env{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.topo__marca{ font-family:var(--serif); font-size:1.05rem; font-weight:400; color:#F6F5F2; transition:color 300ms; text-decoration:none; white-space:nowrap }
.topo.solido .topo__marca{ color:var(--ink-900) }
.topo__nav{ display:none; gap:28px }
@media(min-width:900px){ .topo__nav{ display:flex } }
.topo__nav a{
  font-size:.8rem; font-weight:500; letter-spacing:.02em; text-decoration:none;
  color:rgba(246,245,242,.72); transition:color 300ms;
}
.topo.solido .topo__nav a{ color:var(--ink-500) }

.bt{
  display:inline-flex; align-items:center; gap:9px;
  font:600 .82rem/1 var(--sans); letter-spacing:.01em;
  padding:14px 22px; border-radius:100px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:all 300ms ease;
}
.bt--cheio{ background:var(--bronze); color:#fff }
.bt--linha{ border-color:rgba(246,245,242,.35); color:#F6F5F2 }
.topo .bt{ padding:11px 18px; font-size:.78rem }

/* ---------- 01 HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-block:120px 64px; background:var(--tinta); overflow:hidden;
}
/* Recorte sem fundo: o sujeito senta direto no #101114 da seção, então
   não há retângulo, não há fundo de caixa e o scrim sobre a foto perdeu
   a função (ele existia para dar legibilidade de texto sobre a imagem). */
.hero__foto{
  position:absolute; bottom:0; top:auto;
  /* Ancorada no CONTÊINER, não na borda da janela: presa à janela, ela se
     afastava do texto quanto mais larga a tela, abrindo um vazio no meio. */
  right:calc(max(0px, (100% - var(--max-w)) / 2) - 29px);  /* 45px à direita da posição anterior */
  height:88%; width:auto; max-width:42%;  /* aspect-ratio saiu: com height e max-width vinculantes ele não era honrado e a caixa ficava com o dobro da altura da imagem */
  display:flex; align-items:flex-end;
  /* dissolve os últimos 8% para o sujeito não ser cortado a régua pela borda */
  -webkit-mask-image:linear-gradient(#000 88%,transparent 100%);
          mask-image:linear-gradient(#000 88%,transparent 100%);
}
/* z-index para a foto pintar ACIMA do placeholder absoluto.
   Se ela falhar, o onerror a esconde e o placeholder reaparece. */
.hero__foto picture{ display:contents }
.hero__foto img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:bottom center }
.hero__ph{
  display:none;  /* só aparece se a imagem falhar: atrás de um PNG transparente ele vazaria */
  position:absolute; inset:0; place-items:center; padding:24px;
  border:1px dashed rgba(246,245,242,.16); border-radius:8px;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(246,245,242,.035) 11px 22px);
}
.hero__ph span{ font-size:.72rem; line-height:1.55; text-align:center; color:rgba(246,245,242,.45); max-width:26ch }
.hero__ph b{ display:block; font-weight:600; color:rgba(246,245,242,.8); margin-bottom:5px; font-size:.78rem }
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 62%, rgba(138,106,59,.09), transparent 62%),
    linear-gradient(#101114 0%,transparent 18%,transparent 78%,rgba(16,17,20,.5) 100%);
}
/* No mobile a foto ocupa a largura inteira e o scrim vira vertical:
   uma tira de 52% numa tela de 360px não é retrato, é ruído. */
@media(max-width:767px){
  /* No celular o retrato deixa de ser um bloco abaixo do texto e vira
     presença de fundo: ancorado embaixo à direita, sangrando um pouco pela
     borda, com máscara diagonal que o dissolve na direção do texto. Some o
     padding de 372px que existia só para reservar espaço a ele. */
  .hero{ align-items:flex-start; min-height:auto; padding-block:82px 72px }
  .hero__foto{
    left:auto; right:-9%; bottom:0; top:auto; transform:none;
    width:86%; height:auto; max-width:none; aspect-ratio:863/1247;
    opacity:.30; z-index:0; pointer-events:none;
    -webkit-mask-image:linear-gradient(to top left, #000 22%, rgba(0,0,0,.42) 58%, transparent 86%);
            mask-image:linear-gradient(to top left, #000 22%, rgba(0,0,0,.42) 58%, transparent 86%);
  }
  /* o véu vertical existia para a composição antiga e agora só suja */
  .hero__scrim{ display:none }
  .hero__col{ position:relative; z-index:2 }
}
.hero__grade{ position:relative; z-index:2 }
/* O teto de 46% serve à tela larga. Entre 768 e 1099 ele derrubava a coluna
   de 719px para 309px, dobrando as linhas da headline com 117px de vazio ao
   lado. Três faixas em vez de uma. */
.hero__col{ max-width:none }
@media(min-width:768px) and (max-width:1099px){ .hero__col{ max-width:min(640px, 56%) } }
@media(min-width:1100px){ .hero__col{ max-width:min(640px, 46%) } }  /* nunca alcança a faixa do retrato */
.hero__cargo{
  font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(246,245,242,.62); margin:0 0 20px;
}
.hero h1{ color:#F6F5F2; margin-bottom:22px }
.hero__frase{ font-family:var(--serif); font-weight:300; font-size:1.22rem; line-height:1.45; color:rgba(246,245,242,.82); max-width:38ch; margin:0 0 32px }

/* a lista de credenciais dentro da dobra: o gesto central desta versão */
.cred{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:9px }
.cred li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.9rem; line-height:1.45; color:rgba(246,245,242,.78);
}
.cred svg{ flex:none; margin-top:3px; color:var(--bronze) }
.cred b{ color:#F6F5F2; font-weight:600 }
.hero__acoes{ display:flex; gap:12px; flex-wrap:wrap }

/* ---------- 02 FAIXA DE NÚMEROS ---------- */
.nums{ display:grid; grid-template-columns:1fr; gap:32px }
@media(min-width:768px){ .nums{ grid-template-columns:repeat(3,1fr); gap:16px } }
.num{ text-align:left }
.num__valor{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4.4vw,3.4rem);
  line-height:1; letter-spacing:-.03em; color:var(--ink-900); display:block;
  font-variant-numeric:tabular-nums;
}
.num__rot{ display:block; margin-top:10px; font-size:.85rem; line-height:1.45; color:var(--ink-500); max-width:26ch }

/* ---------- cards: o que faltava na v1 ---------- */
.grade-3{ display:grid; grid-template-columns:1fr; gap:24px }
/* 3 colunas só a partir de 1100px: abaixo disso a medida cai para 16
   caracteres por linha. Entre 760 e 1099 vão 2 colunas com o terceiro
   ocupando a faixa inteira, o que resolve o órfão sem espremer o texto. */
@media(min-width:760px) and (max-width:1099px){
  .grade-3{ grid-template-columns:repeat(2,1fr) }
  .grade-3 > :last-child:nth-child(3){ grid-column:1/-1 }
}
@media(min-width:1100px){ .grade-3{ grid-template-columns:repeat(3,1fr) } }
.grade-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
@media(min-width:900px){ .grade-4{ grid-template-columns:repeat(4,1fr) } }
.grade-assim{ display:grid; grid-template-columns:1fr; gap:40px }
@media(min-width:900px){ .grade-assim{ grid-template-columns:628fr 419fr; gap:68px; align-items:start } }

.card{
  background:linear-gradient(145deg,#FFFFFF,#F5F5F2);
  border:1px solid var(--linha); border-radius:12px; padding:32px;
  transition:transform 300ms ease, box-shadow 300ms ease;
}
.card__ico{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:rgba(138,106,59,.1); color:var(--bronze); margin-bottom:20px;
}
.escura .card__ico{ background:rgba(201,162,39,.14); color:#D8B26A }
.card h3{ margin-bottom:10px; font-size:1.18rem }
.card p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-500) }
.escura .card p{ color:rgba(246,245,242,.62) }

/* ---------- linha do tempo ---------- */
.tl{ display:grid; gap:0; margin-top:16px }
.tl__item{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:26px 0; border-top:1px solid var(--linha);
}
@media(min-width:800px){
  .tl__item{ grid-template-columns:180px 1fr 1fr; gap:32px; align-items:baseline }
}
.tl__ano{ font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--bronze-t); font-variant-numeric:tabular-nums }
.tl__cargo{ font-weight:600; color:var(--ink-900); font-size:1.02rem }
.tl__onde{ display:block; font-weight:400; font-size:.85rem; color:var(--ink-500); margin-top:3px }
.tl__desc{ font-size:.9rem; line-height:1.6; color:var(--ink-500); margin:0 }

/* ---------- marcas: linha de texto, nunca grade vazia ---------- */
.marcas{ display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center }
.marcas span{
  font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:400;
  color:var(--ink-500); letter-spacing:.01em;
}

/* ---------- mídia: estante, não faixa de logo ---------- */
.midia{ display:grid; gap:20px }
.midia__item{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:26px 0; border-top:1px solid var(--linha); text-decoration:none;
  transition:padding-left 300ms ease;
}
.midia__veic{ font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-t) }
.midia__tit{ font-family:var(--serif); font-weight:400; font-size:clamp(1.1rem,2vw,1.42rem); line-height:1.3; color:var(--ink-900) }

/* ---------- manifesto ---------- */
.manif p{ font-family:var(--serif); font-weight:300; font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.5; color:#F6F5F2; margin:0 0 1.1em }
.manif p:last-child{ margin:0 }

/* ---------- contato ---------- */
.form{ display:grid; gap:16px; margin-top:8px }
/* Responde ao contêiner e não ao viewport: a 900px a coluna do formulário
   tem 294px e dois campos lado a lado davam 139px cada. */
.form__par{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.form label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,245,242,.6); margin-bottom:8px }
.form input,.form textarea{
  width:100%; font:inherit; font-size:16px; color:#F6F5F2;  /* nunca abaixo de 16px: o iOS amplia a tela ao focar */
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:6px; padding:14px 16px;
}
.form textarea{ min-height:110px; resize:vertical }
.form input:focus,.form textarea:focus{ outline:2px solid var(--bronze); outline-offset:1px; border-color:transparent }
.reforco{ font-size:.85rem; color:rgba(246,245,242,.55); margin-top:16px }

/* ---------- rodapé ---------- */
.rodape{ background:#0A0B0D; color:rgba(246,245,242,.55); padding-block:52px; font-size:.88rem }
.rodape .env{ display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:center }
.rodape a{ color:rgba(246,245,242,.8); text-decoration:none; border-bottom:1px solid rgba(246,245,242,.22) }
.rodape ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; flex-wrap:wrap }

/* ---------- nota de produção, só em ?revisao=1 ---------- */
.nota{ display:none }
body.revisao .nota{
  display:block; font-size:.82rem; line-height:1.6; color:#7C2D18;
  background:#FBEDE8; border-left:3px solid #B4472E; border-radius:0 4px 4px 0;
  padding:12px 16px; margin:22px 0; max-width:70ch;
}
body.revisao .escura .nota{ color:#FFD9CC; background:rgba(180,71,46,.16) }
.nota b{ font-weight:600 }

/* ---------- revelação ---------- */
/* Estado padrão é VISÍVEL; a animação é opt-in de quem tem JS. Sem isso,
   a página inteira dependia de JavaScript para aparecer. */
.reveal{ opacity:1; transform:none }
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease }
.reveal.dentro{ opacity:1; transform:none }

/* Foco autoral: o teclado recebia só o anel padrão do navegador. */
:where(a,button,summary):focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px }
.escura :where(a,button,summary):focus-visible{ outline-color:#D8B26A }
.midia__item:focus-visible{ padding-left:8px }

/* ---------- ajustes de mobile ----------
   Este bloco fica no FIM da folha de propósito: a media query antiga estava
   declarada antes de .hero__col e perdia por ordem de cascata. */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,::before,::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* .js .reveal tem peso 2 e media query não soma especificidade: sem o
     .js aqui, esta regra perdia e a rede de segurança só existia no JS. */
  .js .reveal{ opacity:1; transform:none; transition:none }
}

/* ---------- seção de negócio: número grande + texto curto ---------- */
/* As fotos vieram horizontais (grupos de sócios/time), então em vez de um
   slot vertical na lateral elas entram como faixa larga ao fim da seção:
   mostra o grupo inteiro sem decepar ninguém e cumpre o "foto forte". */
.neg{ display:grid; grid-template-columns:1fr; gap:44px }
@media(min-width:960px){ .neg{ grid-template-columns:1fr; gap:44px; max-width:760px } }
.neg__foto{ margin:52px 0 0; border-radius:14px; overflow:hidden;
  border:1px solid var(--linha); aspect-ratio:3/2; background:var(--papel-2) }
.escura .neg__foto{ border-color:rgba(246,245,242,.14) }
.neg__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.neg__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; margin-top:38px }
.neg__stat b{ display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1; letter-spacing:-.03em;
  color:var(--ink-900); font-variant-numeric:tabular-nums }
.escura .neg__stat b{ color:#F6F5F2 }
.neg__stat span{ display:block; margin-top:9px; font-size:.85rem; line-height:1.45; color:var(--ink-500) }
.escura .neg__stat span{ color:rgba(246,245,242,.6) }
/* .ph estava sendo usada no HTML e nunca existiu na folha: no claro o
   placeholder ficava sem caixa nenhuma, 381px de vazio com texto solto. */
.ph{
  position:relative; background:var(--papel-2); border:1px solid var(--linha);
  display:grid; place-items:center; padding:24px; overflow:hidden;
}
.ph::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(16,17,20,.035) 11px 22px);
  pointer-events:none }
.ph span{ position:relative; z-index:1; font-size:.76rem; line-height:1.55; text-align:center;
  color:var(--ink-500); max-width:30ch }
.ph b{ display:block; font-weight:600; color:var(--ink-700); margin-bottom:5px; font-size:.82rem }
.escura .ph span{ color:rgba(246,245,242,.55) }
.escura .ph b{ color:rgba(246,245,242,.85) }
.escura .ph::after{ background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(246,245,242,.04) 11px 22px) }
.neg__ph{ aspect-ratio:3/4; border-radius:12px }
.escura .neg__ph{ background:rgba(246,245,242,.05); border-color:rgba(246,245,242,.16) }
.neg__papel{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze-t); margin:0 0 12px }
.escura .neg__papel{ color:#D8B26A }
.neg__fecho{ margin-top:34px; padding-top:26px; border-top:1px solid var(--linha);
  font-family:var(--serif); font-weight:300; font-size:clamp(1.1rem,2vw,1.32rem);
  line-height:1.45; color:var(--ink-900); max-width:52ch }
.escura .neg__fecho{ border-top-color:rgba(246,245,242,.18); color:#F6F5F2 }
.selos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }
.selo{ font-size:.76rem; font-weight:500; padding:9px 15px; border-radius:100px;
  border:1px solid var(--linha); color:var(--ink-500); background:var(--card) }

/* ---------- Harvard / OPM: formação executiva ----------
   Regra de marca que vale desde agosto: menção textual, sem escudo, sem
   crimson institucional. O peso vem da tipografia e dos números, não de
   vestir a marca de outra instituição. */
.hbs__eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#D8B26A; margin:0 0 18px }
.hbs__nums{ display:grid; grid-template-columns:1fr; gap:36px 40px; margin-top:52px;
  padding-top:44px; border-top:1px solid rgba(246,245,242,.16) }
@media(min-width:720px){ .hbs__nums{ grid-template-columns:repeat(3,1fr) } }
.hbs__num b{ display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; letter-spacing:-.03em; color:#F6F5F2;
  font-variant-numeric:tabular-nums }
.hbs__num span{ display:block; margin-top:12px; font-size:.9rem; line-height:1.5;
  color:rgba(246,245,242,.6); max-width:24ch }

/* ---------- frase-fio condutor ---------- */
.fio blockquote{ font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,3.1rem); line-height:1.16; letter-spacing:-.025em;
  color:#F6F5F2; margin:0; max-width:20ch }

/* ---------- critérios numerados ---------- */
.crit{ display:grid; gap:0; margin-top:12px }
.crit__item{ display:grid; grid-template-columns:1fr; gap:12px; padding:34px 0;
  border-top:1px solid var(--linha) }
@media(min-width:860px){ .crit__item{ grid-template-columns:72px 1fr 1fr; gap:44px; align-items:start } }
.crit__n{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3vw,2.4rem);
  line-height:1; color:var(--bronze); font-variant-numeric:tabular-nums }
.crit__t{ font-weight:600; font-size:1.06rem; line-height:1.35; color:var(--ink-900) }
.crit__d{ margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-500) }

/* ================================================================
   AJUSTES DE MOBILE, NO FIM ABSOLUTO DA FOLHA
   Duas vezes seguidas eu perdi regra de mobile por ordem de cascata:
   ela estava declarada antes das regras que precisava sobrescrever.
   Daqui em diante, todo override de celular entra AQUI.
   ================================================================ */
@media(max-width:767px){
  .hero__col{ max-width:none }   /* o teto de 46% existe para dar folga ao retrato no desktop; aqui espremia a headline em 150px */

  /* A dobra real do Safari em iPhone é 635 a 660px, não 812. Sem isto o CTA
     primário caía 6px abaixo dela em iPhone X, 11 Pro, 12 mini e SE. */
  .hero__cargo{ margin-bottom:14px }
  .hero h1{ margin-bottom:16px }
  .hero__frase{ margin-bottom:22px }
  .cred{ margin-bottom:24px; gap:7px }
  /* os dois botões empilham em 375 e custam 98px; o secundário só rola para
     uma seção logo abaixo, então sai para o CTA primário caber na dobra */
  .hero__acoes .bt--linha{ display:none }

  /* Órfãs de uma palavra em 5 dos 8 títulos. Custo zero de altura. */
  h1.display, h2.display{ text-wrap:balance }

  /* Placeholder de produção: numa coluna única ele cai DEPOIS do fecho da
     seção e vira 560px de rabo vazio, duas vezes. Volta quando houver foto. */
  .neg__ph{ display:none }

  /* A coluna lateral de #sobre repete 16 palavras seguidas do parágrafo que
     termina 58px acima. No desktop é destaque lateral; empilhada é eco. */
  #sobre .grade-assim > :last-child{ display:none }

  /* Valor ao lado do rótulo: empilhado, os três números custavam 0,65 tela. */
  .num{ display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:baseline }
  .num__valor{ font-size:2rem }
  .num__rot{ margin-top:0; max-width:none }

  /* Card numa coluna única não separa nada e cobra 32px de cada lado. */
  #outros .card{ background:none; border:0; border-top:1px solid var(--linha);
                 border-radius:0; padding:26px 0 }
  #outros .card:hover{ transform:none; box-shadow:none }
  #outros .card__ico{ display:none }
}

@media(max-width:380px){
  /* marca + calha + botão somavam 335px numa caixa de 327px */
  .topo .bt{ padding:10px 14px; font-size:.72rem }
}

/* ---- toque: realce próprio e estado :active, porque hover não existe no dedo ---- */
:where(a,button){ -webkit-tap-highlight-color:transparent }
.bt{ transition:transform 120ms ease, background 300ms ease, border-color 300ms ease }
.bt:active{ transform:scale(.97) }
.bt--cheio:active{ background:#75592F }
.bt--linha:active{ background:rgba(255,255,255,.12) }
.rodape a:active{ color:#F6F5F2 }

/* ---- hover só onde existe ponteiro fino ---- */
@media (hover:hover) and (pointer:fine){
  .bt--cheio:hover{ background:#75592F; transform:translateY(-2px) }
  .bt--linha:hover{ border-color:#F6F5F2; background:rgba(255,255,255,.06) }
  .topo__nav a:hover{ color:var(--bronze) }
  .card:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(16,17,20,.12) }
  .rodape a:hover{ color:#F6F5F2 }
}

/* ---- alvos de toque: rodapé tinha 18px de altura ---- */
.rodape ul{ gap:8px }
.rodape a{ display:inline-block; padding:13px 10px; border-bottom:none }
.rodape a:hover,.rodape a:focus-visible{ color:#F6F5F2 }
.bt{ padding:15px 22px }
.topo .bt{ padding:13px 18px }

/* ---- Chrome Android: puxar para baixo no topo recarregava a página ---- */
html{ overscroll-behavior-y:contain }

/* ---- andaime de produção não precisa de peso 700 ---- */
.neg__ph b{ font-weight:600 }

/* ---- telefone deitado: 393px de altura não comporta um retrato de 330px
        mais 482px de padding. O hero chegava a 3,13 telas. ---- */
@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:0; padding-block:88px 40px; align-items:flex-start }
  .hero__foto{ display:none }
  .hero__col{ max-width:none }
  .hero__frase{ margin-bottom:20px }
  /* deitado sobra largura e falta altura: as credenciais vão a duas colunas */
  .cred{ margin-bottom:22px; gap:6px 28px; grid-template-columns:1fr 1fr }
}

/* ---- cabeçalho em tela estreita: marca + calha + botão pediam 384px ---- */
@media (max-width:420px){
  .topo__marca{ font-size:.95rem }
  .topo .bt{ padding:14px 14px; font-size:.74rem }
  .topo .env{ gap:12px }
}
@media (max-width:340px){
  .topo__marca{ display:none }   /* o nome reaparece no hero logo abaixo */
}

/* ---- #7: o transform que centraliza a foto no celular cria contexto de
        empilhamento, prendendo o z-index da imagem lá dentro. O scrim,
        que é irmão, passava por cima e escurecia o retrato até 55%. ---- */
.hero__scrim{ z-index:0 }

/* ---- #3: alvos de toque no mínimo ---- */
.bt{ min-height:44px }
.topo__nav a{ display:inline-flex; align-items:center; min-height:44px }
.topo__marca{ display:inline-flex; align-items:center; min-height:44px }

/* ---- #8: dois negócios, duas colunas. A regra de três deixaria célula vazia ---- */
.grade-2{ grid-template-columns:1fr }
@media(min-width:760px){ .grade-2{ grid-template-columns:repeat(2,1fr) } }

/* ---- #11: medida de leitura passava de 75 caracteres acima de 600px ---- */
.tl__desc, .crit__d, .midia .apoio{ max-width:68ch }
#sobre .lead, #sobre p{ max-width:62ch }
.card p{ max-width:60ch }

/* ---- #16 e #17: tetos de desktop que só faziam mal na coluna única ---- */
@media(max-width:767px){
  .num__rot{ max-width:none }
}
@media(max-width:360px){
  .neg__stats{ grid-template-columns:1fr }
}

/* ---- #15: transition:all animava largura e padding do botão ---- */
.bt{ transition:background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 120ms ease }

/* ---- Tablet em retrato, 768 a 1099: o hero em 100vh com a foto travada em
        42% de largura deixava 444px de caixa vazia. Aqui a altura vem do
        conteúdo e a foto é dimensionada pela largura, não pela altura. ---- */
@media(min-width:768px) and (max-width:1099px){
  .hero{ min-height:auto; padding-block:132px 72px }
  .hero__foto{ height:auto; width:38%; max-width:none; aspect-ratio:863/1247;
               right:calc(max(0px,(100% - var(--max-w)) / 2) + 24px) }
  .hero__foto img{ height:100% }
}

/* ============================================================
   AJUSTES DO WORDPRESS
   Pequenas regras que só existem por causa da marcação que o WP
   e o editor geram. Não alteram o design do protótipo.
   ============================================================ */
.topo__nav{ list-style:none; margin:0; padding:0 }
.topo__nav li{ list-style:none }
.quem-texto p, .hbs-texto p{ margin:0 0 1.15em }
.quem-texto p:last-child, .hbs-texto p:last-child{ margin:0 }
.admin-bar .topo{ top:32px }
@media(max-width:782px){ .admin-bar .topo{ top:46px } }
.evc-aviso{ margin-top:16px; font-size:.85rem; color:rgba(246,245,242,.6) }


/* ============================================================
   BLOG: listagem (home.php) e post (single.php)
   Só o que não existe na base da one page. Base compartilhada
   (tokens, .env, .topo, .bt, .olho, .textura, .display) não repete.
   ============================================================ */


/* ============================================================
   BLOG DA VERSÃO A: listagem
   Mesmos tokens da one page. Nada de identidade nova.
   ============================================================ */
:root{
  --papel:#F6F5F2; --papel-2:#ECEBE6; --card:#FFFFFF;
  --tinta:#101114; --tinta-2:#191A1F;
  --ink-900:#101114; --ink-700:#2A2C31; --ink-500:#5C6068;
  --bronze:#8A6A3B; --bronze-t:#6B5129;
  --linha:rgba(16,17,20,.12);
  --max-w:1200px; --content-w:720px;
  --goteira:clamp(24px,5vw,80px);
  --respiro:clamp(4rem,7vw,7rem);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.env--estreito > *{ max-width:var(--content-w); margin-inline:0 }


.display{ font-family:var(--serif); font-weight:300; margin:0;
  line-height:1.08; letter-spacing:-.025em; color:var(--ink-900) }


.textura{ background-color:var(--papel-2);
  background-image:
    linear-gradient(90deg,rgba(16,17,20,.035) 0 1px,transparent 1px),
    linear-gradient(0deg,rgba(16,17,20,.03) 0 1px,transparent 1px),
    radial-gradient(circle at 18% 8%,rgba(138,106,59,.11),transparent 340px),
    radial-gradient(circle at 85% 18%,rgba(16,17,20,.06),transparent 306px);
  background-size:42px 42px,42px 42px,auto,auto }


/* ---------- cabeçalho, idêntico ao da one page ---------- */
.topo{ position:fixed; inset:0 0 auto 0; height:auto; min-height:72px; z-index:100;
  display:flex; align-items:center; background:rgba(246,245,242,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linha) }

@media(min-width:900px){ .topo__nav{ display:flex } }

.topo__nav a:hover,.topo__nav a[aria-current]{ color:var(--bronze) }

.bt--cheio:hover{ background:#75592F; transform:translateY(-2px) }


/* ---------- 01 CAPA: o último texto ocupa a primeira dobra ----------
   Mesmo registro do hero da Versão A: fundo escuro, imagem sangrando à
   direita com scrim, coluna de texto à esquerda na âncora de sempre. */
.capa{
  position:relative; min-height:88vh; display:flex; align-items:center;
  padding-block:132px 64px; background:var(--tinta); overflow:hidden;
}

.capa__img{ position:absolute; right:0; top:0; bottom:0; width:46%; background:#16181D; overflow:hidden }

.capa__img::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(246,245,242,.04) 11px 22px) }

.capa__img span{ position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  font-size:.74rem; line-height:1.55; text-align:center; color:rgba(246,245,242,.42); max-width:none }

.capa__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,#101114 0%,rgba(16,17,20,.94) 30%,rgba(16,17,20,.4) 58%,transparent 80%),
    linear-gradient(#101114 0%,transparent 20%,transparent 74%,rgba(16,17,20,.55) 100%) }

.capa__col{ position:relative; z-index:2; max-width:min(620px,48%) }
  /* folga contra a imagem, como na Versão A */
.capa .olho{ color:rgba(246,245,242,.55) }

.capa .olho::before{ background:linear-gradient(90deg,var(--bronze),#B08A50) }

.capa__meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.72rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#C9A24A; margin-bottom:20px }

.capa__meta span:not(:first-child){ color:rgba(246,245,242,.5); font-weight:500 }

.capa h1{ color:#F6F5F2; max-width:15ch; margin-bottom:24px }

.capa__res{ font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem,2.2vw,1.38rem);
  line-height:1.5; color:rgba(246,245,242,.8); max-width:46ch; margin:0 0 34px }


@media(max-width:820px){
  /* a seção vira coluna: sem isso a imagem, que deixa de ser absoluta,
     virava um item de flex em linha e encolhia para uma tira ao lado do texto */
  .capa{ min-height:auto; padding-block:96px 56px; flex-direction:column; align-items:stretch }
  .capa__img{ position:relative; width:100%; height:220px; flex:none; order:-1;
              margin:0 0 32px; border-radius:0 }
  .capa__col{ max-width:none }
  .capa__scrim{ display:none }
}


/* ---------- filtro de editoria ---------- */
.eds{ display:flex; flex-wrap:wrap; gap:10px }

.ed{ font-size:.78rem; font-weight:500; text-decoration:none; padding:9px 16px;
  border:1px solid var(--linha); border-radius:100px; color:var(--ink-500);
  transition:all 250ms ease; background:var(--card) }

.ed:hover{ border-color:var(--bronze); color:var(--bronze-t) }

.ed[aria-current]{ background:var(--tinta); border-color:var(--tinta); color:var(--papel) }


/* ---------- estante ---------- */
.estante{ display:grid; gap:0; margin-top:8px }

.item{ display:grid; grid-template-columns:1fr; gap:8px; padding:34px 0;
  border-top:1px solid var(--linha); text-decoration:none; transition:padding-left 300ms ease }

@media(min-width:860px){ .item{ grid-template-columns:172px 1fr; gap:44px; align-items:baseline } }

.item:hover,.item:focus-visible{ padding-left:8px }

.item__meta{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-t) }

.item__meta b{ display:block; font-weight:500; color:var(--ink-500); margin-top:5px; letter-spacing:.06em }

.item__tit{ font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.28; color:var(--ink-900) }

.item__res{ display:block; margin-top:10px; font-size:.92rem; line-height:1.6; color:var(--ink-500); max-width:58ch }

.item__ler{ display:inline-block; margin-top:14px; font-size:.78rem; font-weight:600;
  letter-spacing:.04em; color:var(--bronze-t) }

.item:hover .item__ler{ color:var(--bronze) }


.paginacao{ display:flex; justify-content:center; gap:10px; margin-top:56px }

.paginacao a,.paginacao span{ min-width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--linha); border-radius:8px; font-size:.85rem; text-decoration:none;
  color:var(--ink-500); background:var(--card) }

.paginacao [aria-current]{ background:var(--tinta); border-color:var(--tinta); color:var(--papel) }


/* ---------- assinatura da newsletter ---------- */
.assine{ background:var(--tinta); color:rgba(246,245,242,.75) }

.assine h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.15; letter-spacing:-.02em; color:#F6F5F2; margin:0 0 16px; max-width:20ch }

.assine .olho{ color:rgba(246,245,242,.55) }

.assine form{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; max-width:520px }

.assine input{ flex:1 1 240px; font:inherit; font-size:.95rem; color:#F6F5F2;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.42);
  border-radius:100px; padding:14px 20px }

.assine input:focus{ outline:2px solid var(--bronze); outline-offset:1px; border-color:transparent }

.assine p{ font-size:.85rem; color:rgba(246,245,242,.55); margin:16px 0 0 }


.rodape{ background:#0A0B0D; color:rgba(246,245,242,.55); padding-block:52px; font-size:.88rem }


.nota{ display:none }

body.revisao .assine .nota{ color:#FFD9CC; background:rgba(180,71,46,.16) }


:where(a,button):focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px }

.assine :where(a,button,input):focus-visible{ outline-color:#D8B26A }


.reveal{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,::before,::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
}

/* ============================================================
   BLOG DA VERSÃO A: post
   Coluna de leitura de 720px, mesma âncora esquerda da one page.
   ============================================================ */
:root{
  --papel:#F6F5F2; --papel-2:#ECEBE6; --card:#FFFFFF;
  --tinta:#101114; --tinta-2:#191A1F;
  --ink-900:#101114; --ink-700:#2A2C31; --ink-500:#5C6068;
  --bronze:#8A6A3B; --bronze-t:#6B5129;
  --linha:rgba(16,17,20,.12);
  --max-w:1200px; --content-w:720px;
  --goteira:clamp(24px,5vw,80px);
  --respiro:clamp(4rem,7vw,7rem);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}


/* ---------- cabeçalho ---------- */
.topo{ position:fixed; inset:0 0 auto 0; height:auto; min-height:72px; z-index:100;
  display:flex; align-items:center; background:rgba(246,245,242,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linha) }

@media(min-width:900px){ .topo__nav{ display:flex } }


/* ---------- barra de progresso de leitura ---------- */
.progresso{ position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--bronze),#B08A50); z-index:101; transition:width 120ms linear }


/* ---------- cabeçalho do post ---------- */
.cab{ padding-block:calc(72px + var(--respiro)) 0 }

.volta{ display:inline-block; font-size:.8rem; color:var(--ink-500); text-decoration:none; margin-bottom:32px }

.volta:hover{ color:var(--bronze-t) }

.meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.72rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-t); margin-bottom:22px }

.meta span:not(:first-child){ color:var(--ink-500); font-weight:500 }

h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.1; letter-spacing:-.025em; margin:0 0 26px; color:var(--ink-900); max-width:19ch }

.lede{ font-family:var(--serif); font-weight:300; font-size:clamp(1.2rem,2.3vw,1.48rem);
  line-height:1.5; color:var(--ink-900); margin:0; max-width:52ch }


.assina{ display:flex; align-items:center; gap:15px; margin-top:40px;
  padding-top:26px; border-top:1px solid var(--linha); max-width:52ch }

.assina__foto{ width:48px; height:48px; border-radius:999px; flex:none; overflow:hidden;
  background:var(--papel-2); filter:grayscale(1) }

.assina__foto img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block }

.assina__nome{ margin:0; font-weight:600; font-size:.92rem; color:var(--ink-900) }

.assina__cargo{ margin:2px 0 0; font-size:.8rem; color:var(--ink-500) }


.artigo-capa{ aspect-ratio:16/9; margin-block:clamp(32px,4vw,48px) 0; border-radius:12px;
  overflow:hidden; position:relative; background:var(--papel-2); border:1px solid var(--linha);
  display:grid; place-items:center; padding:24px }

.artigo-capa::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(16,17,20,.035) 11px 22px) }

.artigo-capa span{ position:relative; z-index:1; font-size:.76rem; text-align:center;
  color:var(--ink-500); max-width:30ch; line-height:1.55 }


/* ---------- corpo ---------- */
article{ padding-block:clamp(40px,5vw,60px) 0 }

article p{ margin:0 0 1.5em; max-width:58ch }
  /* 58ch ≈ 70 caracteres reais por linha */
article h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.45rem,2.8vw,1.95rem);
  line-height:1.22; letter-spacing:-.015em; margin:2.4em 0 .7em; color:var(--ink-900); max-width:24ch }

blockquote{ margin:2.4em 0; padding:0 0 0 28px; border-left:2px solid var(--bronze);
  font-family:var(--serif); font-weight:300; font-size:clamp(1.25rem,2.6vw,1.62rem);
  line-height:1.4; color:var(--ink-900); max-width:26ch }

article strong{ font-weight:600; color:var(--ink-900) }


.fim{ margin-top:clamp(48px,6vw,72px); padding-top:32px; border-top:1px solid var(--linha) }

.fim p{ font-size:.92rem; color:var(--ink-500); max-width:56ch }


/* ---------- relacionados ---------- */
.rel{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:8px }

@media(min-width:820px){ .rel{ grid-template-columns:repeat(2,1fr) } }

.rel a{ background:linear-gradient(145deg,#FFFFFF,#F5F5F2); border:1px solid var(--linha);
  border-radius:12px; padding:28px; text-decoration:none;
  transition:transform 300ms ease, box-shadow 300ms ease }

.rel a:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(16,17,20,.12) }

.rel__meta{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze-t); display:block; margin-bottom:12px }

.rel__tit{ font-family:var(--serif); font-weight:400; font-size:1.22rem; line-height:1.28;
  color:var(--ink-900); display:block }


/* ---------- chamada final ---------- */
.assine{ background:var(--tinta); color:rgba(246,245,242,.75) }


@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,::before,::after{ transition-duration:.01ms !important }
}


/* ============================================================
   CORREÇÃO DE CABEÇALHO  (autoridade final da folha)
   Os blocos de blog anexados acima duplicaram ".topo" com fundo
   creme fixo, o que apagava os links sobre o hero escuro da home.
   Regra unica: base transparente na home (hero escuro); solido e
   legivel ao rolar (.solido) e em toda pagina de fundo claro
   (post, 404, paginas), via body:not(.home).
   ============================================================ */
.topo{ background:transparent; border-bottom-color:transparent }
.topo.solido,
body:not(.home) .topo{
  background:rgba(246,245,242,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--linha);
}
.topo.solido .topo__marca,
body:not(.home) .topo__marca{ color:var(--ink-900) }
.topo.solido .topo__nav a,
body:not(.home) .topo__nav a{ color:var(--ink-500) }