/* ==========================================================================
   PAAPS BRASIL : folha de estilo única do site
   Calibrada com a Mallu em 02/08/2026.
   Hierarquia de cor: bege > marrom > amarelo > oliva > terracota > roxo.
   Fontes locais, nunca Google Fonts.
   ========================================================================== */

/* ----- 1. FONTES LOCAIS -------------------------------------------------- */

@font-face{
  font-family:'League Spartan';src:url('../fontes/LeagueSpartan-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'League Spartan';src:url('../fontes/LeagueSpartan-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'League Spartan';src:url('../fontes/LeagueSpartan-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'League Spartan';src:url('../fontes/LeagueSpartan-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'League Spartan';src:url('../fontes/LeagueSpartan-ExtraBold.ttf') format('truetype');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nimbus Sans';src:url('../fontes/NimbusSanL-Reg.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nimbus Sans';src:url('../fontes/NimbusSanL-Bol.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Evermore';src:url('../fontes/Evermore.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ----- 2. TOKENS --------------------------------------------------------- */

:root{
  /* Hierarquia de cor calibrada 02/08/2026 */
  --bege:#f5f1e1;          /* 1. dominante, o papel */
  --marrom:#442309;        /* 2. a tinta, seções escuras */
  --amarelo:#f7c31c;       /* 3. palavra-chave, destaque pontual */
  --oliva:#aea349;         /* 4. cor chapada, detalhe, fundo discreto */
  --terracota:#cb4710;     /* 5. raro */
  --roxo:#bcb6f2;          /* 6. quase nunca */
  --bege-rosa:#bbada2;     /* neutro de apoio */
  --branco:#fff;

  --tinta-70:rgba(68,35,9,.70);
  --tinta-55:rgba(68,35,9,.55);
  --tinta-40:rgba(68,35,9,.40);

  --titulo:'League Spartan',Helvetica,Arial,sans-serif;
  --corpo:'Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --logo:'Evermore','League Spartan',serif;

  --raio:4px;
  --max:1200px;
  --gutter:clamp(22px,5vw,56px);
  --secao:clamp(72px,10vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- 3. RESET E BASE --------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

body{
  font-family:var(--corpo);font-weight:400;font-size:1rem;line-height:1.7;letter-spacing:0;
  color:var(--marrom);background:var(--bege);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Grão de impressão. O PAAPS é orgânico, não digital puro. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--amarelo);color:var(--marrom)}

:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.container--largo{max-width:1440px}
.secao{padding-block:var(--secao)}
/* âncoras não podem parar embaixo do menu fixo */
section[id]{scroll-margin-top:clamp(72px,9vw,96px)}
.secao--marrom{background:var(--marrom);color:var(--bege)}
.secao--oliva{background:var(--oliva);color:var(--branco)}
.secao--branca{background:var(--branco)}

.pular{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--marrom);color:var(--bege);padding:14px 22px;font-family:var(--titulo);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
}
.pular:focus{left:12px;top:12px}

/* ----- 4. TIPOGRAFIA ----------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--titulo);font-weight:700;line-height:1.04;letter-spacing:-.005em;
  text-transform:uppercase;text-wrap:balance}

h1{font-size:clamp(2.5rem,6.4vw,5.4rem)}
h2{font-size:clamp(1.9rem,4vw,3.35rem);margin-bottom:.6em}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.01em;margin-bottom:.5em}
h4{font-size:1rem;letter-spacing:.05em;margin-bottom:.4em}

p{max-width:62ch;text-wrap:pretty}
p + p{margin-top:1.05em}

.lead{font-size:clamp(1.12rem,1.55vw,1.4rem);line-height:1.6;max-width:46ch}
.lead--largo{max-width:60ch}

.olho{ /* palavra-chave em Evermore, uso raro e pontual */
  font-family:var(--logo);text-transform:none;letter-spacing:.01em;
}

/* Subtítulo do hero: League Spartan caixa alta, mas ABAIXO do título e em corpo
   de leitura. Não é chapéu: chapéu é acima, miúdo e espaçado. */
/* Centralizado e maior: ganha peso de posicionamento, não de legenda. */
.hero__sub{
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.85rem);line-height:1.2;letter-spacing:0;
  color:var(--amarelo);margin:.9em auto 0;max-width:30ch;text-align:center;
}
/* A oferta, sozinha, sem botão. */
.hero__oferta{
  font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.6;
  color:rgba(245,241,225,.9);max-width:52ch;margin:1.5em auto 0;text-align:center;
}
/* Chamada do bloco 2, logo abaixo do título. */
.meia__chamada{
  font-size:clamp(1rem,1.25vw,1.15rem);color:var(--tinta-70);margin-top:-.2em;
}

/* Grifo: a frase inteira em amarelo com uma palavra sublinhada. */
.grifo{color:var(--amarelo);font-weight:700}
.grifo u{text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.07em}
/* nunca quebra no meio: a frase é uma unidade */
.grifo--linha{display:inline-block;white-space:nowrap}
@media (max-width:520px){.grifo--linha{white-space:normal}}

.chave{color:var(--amarelo);font-weight:700}
.secao--marrom .chave{color:var(--amarelo)}
.chave--oliva{color:var(--oliva);font-weight:700}

/* Título rotativo do hero: .girante é a faixa que mostra uma frase por vez,
   como um tambor girando. O JS (site.js, bloco "Girante do hero") troca o
   texto e liga as classes --sai/--entra; esta CSS só anima a transição entre
   os dois estados, nunca decide qual frase é a vez.
   A caixa é alta o bastante pra 2 linhas: a frase rotativa herda o mesmo
   tamanho de fonte da linha 1 e, se não couber numa linha só (ex.: "DAS
   TERAPEUTAS OCUPACIONAIS"), quebra igual à linha 1 já quebra hoje — nunca
   força uma linha só encolhendo a letra, isso é o que cortava a palavra
   na borda em telas médias. */
.girante{display:block;overflow:hidden;height:2.3em;perspective:600px}
.girante__atual{
  display:inline-block;color:var(--amarelo);font-weight:700;
  transform-origin:50% 50%;
  transform:rotateX(0deg) translateY(0);opacity:1;
  transition:transform .42s cubic-bezier(.5,0,.2,1),opacity .3s ease;
  backface-visibility:hidden;
}
.girante__atual--sai{transform:rotateX(80deg) translateY(-14%);opacity:0}
.girante__atual--entra{transform:rotateX(-80deg) translateY(14%);opacity:0}
.girante--sem-transicao .girante__atual{transition:none}
@media (prefers-reduced-motion:reduce){.girante__atual{transition:none}}

/* ┌──────────────────────────────────────────────────────────────────────┐
   │ PROIBIDO: chapéu / eyebrow / label-secao                             │
   │                                                                      │
   │ Não criar linha curta em CAIXA ALTA com tracking largo acima do      │
   │ título para dizer de que seção se trata. É a assinatura visual mais  │
   │ reconhecível de site gerado por IA, e a Mallu recusou em 02/08/2026. │
   │                                                                      │
   │ A função de localizar o leitor NÃO sumiu: ela migrou para .trilha,   │
   │ a barra de capítulos na lateral direita, que mostra em que seção a   │
   │ pessoa está enquanto ela desce. Ver seção 5b desta folha.            │
   │                                                                      │
   │ Se um bloco precisa de um rótulo, ele vira um h3 de verdade, na      │
   │ escala normal de título, ou o texto se reescreve sem precisar dele.  │
   └──────────────────────────────────────────────────────────────────────┘ */

.fonte-dado{
  font-size:.78rem;line-height:1.5;color:var(--tinta-55);max-width:70ch;margin-top:2.2em;
}
.secao--marrom .fonte-dado{color:rgba(245,241,225,.55)}

/* ----- 5. NAVEGAÇÃO ------------------------------------------------------ */

/* Fixo, não sticky: assim a foto do hero começa no topo absoluto da tela e o
   menu flutua por cima dela, sem barra nenhuma. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(245,241,225,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(174,163,73,.28);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
/* Sobre foto escura o menu não tem barra: só as palavras, em branco, sobre a imagem. */
.topo--sobre-foto{
  background:transparent;border-bottom-color:transparent;color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.topo--sobre-foto .menu a{color:#fff}
.topo--sobre-foto .menu a:hover{border-bottom-color:var(--amarelo)}
.topo--sobre-foto .menu a[aria-current="page"]{border-bottom-color:#fff}
.topo--sobre-foto .menu__botao{color:#fff}
/* O logo troca de arquivo conforme o fundo, sem recriar nada. */
.topo__logo{height:34px;width:auto;display:block}
.topo__logo--claro{display:none}
.topo--sobre-foto .topo__logo--escuro{display:none}
.topo--sobre-foto .topo__logo--claro{display:block}
.topo__nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1440px;margin:0 auto;padding:9px var(--gutter);
}
/* O item de duas linhas é o mais alto da barra; sem tirar o respiro dele mesmo,
   a barra inteira crescia 30px em todas as páginas. */
.menu__dupla{padding-block:0}
.marca{font-family:var(--logo);font-size:1.6rem;line-height:1;letter-spacing:.01em;color:var(--marrom)}
.marca span{color:var(--amarelo)}

.menu{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);list-style:none}
.menu a{
  font-family:var(--titulo);font-size:.78rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding-block:6px;border-bottom:2px solid transparent;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.menu a:hover{border-bottom-color:var(--amarelo)}
.menu a[aria-current="page"]{border-bottom-color:var(--marrom)}
/* O único item do menu em duas linhas, com o "+" no meio: sem isso o nome
   ocupa quase metade da barra e desequilibra os outros três. */
/* Entrelinha apertada de propósito: solto, este item sozinho levantava a barra
   de 64px para 96px em TODAS as páginas. */
.menu__dupla{
  display:inline-flex;flex-direction:column;align-items:center;
  text-align:center;line-height:1.05;
}
.mais--menu{display:block;font-size:1.05em;line-height:.7;margin:.1em 0 .12em}

.menu__botao{
  display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--marrom);
}
.menu__botao svg{display:block}

/* ----- 5b. TRILHA : a barra de capítulos da página ----------------------- */
/* Substitui o chapéu proibido. Fica colada na direita, de cima a baixo, com
   um traço por seção, na altura proporcional ao tamanho real da seção. Ao
   descer, o traço da seção atual se preenche e o nome dela aparece ao lado.
   Sem JavaScript ela não aparece: é enriquecimento, não estrutura.          */

.trilha{
  position:fixed;right:clamp(12px,1.5vw,26px);top:50%;transform:translateY(-50%);
  z-index:820;display:none;color:var(--marrom);
}
.js .trilha{display:block}
@media (max-width:960px){.js .trilha{display:none}}

.trilha ol{
  list-style:none;display:flex;flex-direction:column;gap:7px;
  height:min(64svh,600px);margin:0;padding:0;
}
.trilha li{flex:1 1 0;display:flex;min-height:14px}

.trilha a{
  position:relative;display:flex;align-items:stretch;justify-content:flex-end;
  width:34px;padding-left:24px;text-decoration:none;
}
/* o traço */
.trilha__b{
  position:relative;width:4px;border-radius:2px;overflow:hidden;
  background:currentColor;opacity:.38;
  transition:opacity .25s var(--ease),width .25s var(--ease);
  /* halo suave, para o traço não sumir sobre foto movimentada */
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 1px 6px rgba(0,0,0,.22);
}
.trilha--claro .trilha__b{box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 1px 8px rgba(0,0,0,.4)}
.trilha a:hover .trilha__b,
.trilha a:focus-visible .trilha__b{opacity:.7;width:6px}
/* o preenchimento de progresso, controlado pelo JS via --p */
.trilha__b::after{
  content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--p,0) * 100%);
  background:var(--amarelo);
}
.trilha li[aria-current="true"] .trilha__b{opacity:1;width:6px}

/* o nome do capítulo, à esquerda do traço */
.trilha__t{
  position:absolute;right:16px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;pointer-events:none;
  background:var(--marrom);color:var(--bege);
  font-family:var(--corpo);font-size:.8rem;line-height:1;letter-spacing:0;
  padding:9px 14px;border-radius:var(--raio);
  opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease);
  box-shadow:0 6px 22px rgba(68,35,9,.24);
}
.trilha a:hover .trilha__t,
.trilha a:focus-visible .trilha__t,
.trilha--falando li[aria-current="true"] .trilha__t{opacity:1;transform:translateY(-50%)}

/* Sobre foto escura o traço precisa clarear para continuar visível. */
.trilha--claro{color:var(--bege)}
.trilha--claro .trilha__t{background:var(--bege);color:var(--marrom)}

/* ----- 6. BOTÕES --------------------------------------------------------- */

.btn{
  display:inline-block;padding:16px 30px;border-radius:var(--raio);border:2px solid transparent;
  font-family:var(--titulo);font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;
  transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--marrom{background:var(--marrom);color:var(--bege)}
.btn--marrom:hover{background:color-mix(in srgb,var(--marrom) 84%, #000)}
.btn--amarelo{background:var(--amarelo);color:var(--marrom)}
.btn--bege{background:var(--bege);color:var(--marrom)}
.btn--linha{border-color:currentColor}
.btn--linha:hover{background:var(--marrom);color:var(--bege);border-color:var(--marrom)}
.sobre-foto .btn--linha{color:var(--bege)}
.sobre-foto .btn--linha:hover{background:var(--bege);color:var(--marrom);border-color:var(--bege)}

/* ----- 7. FOTO DE TELA CHEIA COM TEXTO POR CIMA -------------------------- */
/* Regra da Mallu: foto tela cheia, texto League Spartan CAPS bege (ou marrom
   se a foto for clara), sobre preto com 70% de transparência, leve.          */

.sobre-foto{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(520px,86svh,900px);overflow:hidden;
}
.sobre-foto--media{min-height:clamp(420px,62svh,660px)}
/* Hero de página interna: tela cheia de verdade. Com os 86svh do padrão sempre
   sobrava uma faixa da seção seguinte aparecendo por baixo, e a foto nunca
   chegava a ocupar a tela inteira. */
.sobre-foto--cheia{min-height:100svh}
.sobre-foto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.sobre-foto::after{ /* o preto a 70%, esse é o valor calibrado */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.58) 46%,rgba(0,0,0,.78) 100%);
}
.sobre-foto--uniforme::after{background:rgba(0,0,0,.70)}
.sobre-foto__c{
  position:relative;width:100%;max-width:var(--max);margin:0 auto;
  /* o topo já reserva a altura do menu fixo, que flutua por cima da foto */
  padding:clamp(112px,13vw,160px) var(--gutter) clamp(72px,9vw,104px);color:var(--bege);
}
/* O título fica onde está. O que muda é a distribuição: texto em cima, dados
   lá embaixo, na faixa da água e do barco, e imagem respirando no meio. */
.sobre-foto--alto{min-height:min(1560px,212svh)}
.sobre-foto--alto .sobre-foto__c{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:min(1560px,212svh);
}
/* Os dados ficam juntos e compactos, na faixa da água e do barco. O recuo de
   baixo é generoso de propósito: sobe o bloco para a altura das pernas da
   agente, para os dados não ficarem espremidos na borda da imagem. */
/* Os três dados precisam de ar entre eles por dois motivos: espremidos ficam
   ilegíveis, e o cartão de prova nasce em cima do próprio dado, crescendo para
   cima e para baixo. Sem essa folga, um cartão encostaria no dado vizinho.
   O recuo de baixo encolhe na mesma medida em que a folga cresce, para o bloco
   descer em vez de subir: o hero de cima fica limpo, sem dado nenhum. */
.sobre-foto--alto .prova{row-gap:clamp(88px,11vh,148px)}
.sobre-foto--alto .sobre-foto__c{padding-bottom:clamp(104px,16vh,208px)}
.sobre-foto--alto .hero__texto{flex:0 0 auto}
.sobre-foto--alto .prova{margin-top:0;flex:0 0 auto}
/* O bloco das duas frases desgruda do título principal. */
.sobre-foto--alto .hero__sub{margin-top:2.1em}

.sobre-foto h1,.sobre-foto h2{color:var(--bege);max-width:20ch}
/* No hero o título divide a tela com a faixa de prova: escala própria. */
.sobre-foto h1{font-size:clamp(2rem,4.3vw,3.7rem);max-width:23ch}
.sobre-foto p{color:rgba(245,241,225,.9)}
.sobre-foto .rotulo{color:var(--amarelo)}

/* Variante para foto CLARA: texto marrom, véu bege no lugar do preto */
.sobre-foto--clara::after{
  background:linear-gradient(180deg,rgba(245,241,225,.34) 0%,rgba(245,241,225,.76) 100%);
}
.sobre-foto--clara .sobre-foto__c,
.sobre-foto--clara h1,.sobre-foto--clara h2{color:var(--marrom)}
.sobre-foto--clara p{color:var(--tinta-70)}
.sobre-foto--clara .rotulo{color:var(--marrom)}

/* Variante para foto com SOBRE-TOM MARROM: o véu vira a própria cor da marca.
   O véu preto dessatura a foto e devolve o cinza que a grade tirou; no marrom
   a foto segura o tom. Mesmo contraste de texto, mesma opacidade. */
.sobre-foto--veu-marrom::after{
  background:linear-gradient(180deg,
    rgba(46,23,7,.34) 0%,rgba(46,23,7,.56) 46%,rgba(46,23,7,.80) 100%);
}

/* Hero da home: a agente está na direita da foto e o texto ocupa a esquerda.
   Quando a tela estreita, o corte fecha em cima dela e precisa de mais
   deslocamento para ela não sair do quadro. */
#hero .sobre-foto__img{object-position:66% center}
@media (max-width:900px){ #hero .sobre-foto__img{object-position:74% 38%} }

/* Hero de Treinamentos: em telas largas sobrava uma faixa de parede lisa no
   canto esquerdo. Desloca o corte para a direita, mantendo a roda de pessoas
   centralizada no quadro. */
#hero-treino .sobre-foto__img{object-position:62% center}

/* Tela dividida de Treinamentos: letra estava fina demais para o corpo desta
   seção especificamente (não é mudança global do site). */
#diferenciais .lista{font-weight:500}
#diferenciais .lista li{line-height:1.6}

/* Tags de modalidade dos cartões de Formato. Fica ABAIXO do título de
   propósito: caixa alta acima do título é o "chapéu" de IA que está banido
   neste site (ver feedback_chapeu_eyebrow_proibido). */
.cartao__tag{
  display:block;margin-top:6px;margin-bottom:.7em;
  font-family:var(--corpo);font-size:.8rem;font-weight:700;color:var(--oliva);
}

/* Botão "Falar sobre a demanda da minha equipe": hover amarelo só aqui,
   o .btn--marrom:hover padrão (escurece) continua valendo no resto do site. */
#btn-demanda-equipe:hover,#btn-demanda-equipe:focus-visible{
  background:var(--amarelo);color:var(--marrom)
}

/* Legenda no TOPO da foto, sobre a madeira, em vez do canto inferior direito
   padrão: pedido específico para a foto dos post-its, para não cortar sobre
   as pessoas. Reserva a altura do menu fixo antes de começar. */
.sobre-foto .legenda--topo{
  top:clamp(84px,10vw,104px);bottom:auto;
}

/* Foto de "Experiências impactantes": estava pegando parede e teto vazios
   demais. Desce o corte para mostrar mais o corpo das pessoas. */
#experiencias-impactantes .sobre-foto__img{object-position:center 78%}

/* Título um pouco mais abaixo, para pousar perto do horizonte da foto das
   montanhas. */
#cadastro-treinamentos{padding-top:clamp(150px,20vw,230px)}

/* Faixa bege simples entre as duas fotos (post-its e montanhas): o degradê
   escuro tentando emendar as duas ficou ruim, ela pediu separação lisa. */
.faixa-bege{background:var(--bege);height:clamp(28px,4vw,56px)}

/* Urgências : lista da seção "A gente organiza", mesmo tratamento de peso
   de fonte que já existe em Treinamentos (escopado, não é mudança global). */
#resposta-local .lista{font-weight:500}

/* ----- 8g4. A LINHA DO TEMPO HORIZONTAL (5 tempos, Urgências) ------------ */
/* Mesmo espírito da trilha vertical dos entregáveis (Como Atuamos), só
   deitada: uma estrada que sobe e desce entre os pontos em vez de serpentear
   de lado a lado. O `d` também é calculado pelo script a partir da posição
   real de cada ponto. Sem script, a linha amarela aparece inteira. */
.trilha-tempos{position:relative;padding:34px 0 6px}
.trilha-tempos__svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0;
}
.trilha-tempos__base{stroke:rgba(68,35,9,.18);stroke-width:2;stroke-linecap:round;fill:none}
.trilha-tempos__luz{stroke:var(--amarelo);stroke-width:3;stroke-linecap:round;fill:none}

.tempos{
  list-style:none;display:flex;justify-content:space-between;gap:10px;
  position:relative;z-index:1;
}
.tempo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;flex:1;min-width:0}
.tempo__n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--bege);border:2px solid rgba(68,35,9,.22);color:var(--marrom);
  font-family:var(--titulo);font-weight:800;font-size:.9rem;
  transition:background .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),color .35s var(--ease);
}
.tempo__t{
  display:block;font-family:var(--corpo);font-weight:700;font-size:.84rem;line-height:1.35;
  color:var(--marrom);max-width:11ch;
}
.js .tempo__n{background:var(--bege)}
.js .tempo.aceso .tempo__n{
  background:var(--amarelo);border-color:var(--amarelo);transform:scale(1.18);
}
@media (max-width:600px){
  .tempos{gap:4px}
  .tempo__t{font-size:.74rem;max-width:8ch}
  .tempo__n{width:28px;height:28px;font-size:.78rem}
  /* Zigue-zague só no celular: número e texto trocam de lado a cada item
     (2 e 4 invertem), abrindo mais espaço horizontal pra cada rótulo. A
     trilha (JS) lê a posição real de cada bolinha, então a curva acompanha
     o zigue-zague sozinha, sem precisar mexer no script. */
  .tempo:nth-child(even){flex-direction:column-reverse}
}

/* ----- 8. LEGENDA DE FOTO : OBRIGATÓRIA EM TODA FOTO -------------------- */

figure{margin:0}
.legenda{
  font-family:var(--corpo);font-size:.72rem;line-height:1.45;letter-spacing:.01em;
  color:var(--tinta-55);margin-top:10px;max-width:52ch;
}
.legenda b{font-weight:700;color:var(--marrom)}
.legenda--clara{color:rgba(245,241,225,.62)}
.legenda--clara b{color:rgba(245,241,225,.9)}
.legenda--pendente::after{
  content:" Referência a confirmar.";font-style:italic;opacity:.8;
}
/* Legenda dentro de foto de tela cheia: canto inferior, discreta */
.sobre-foto .legenda{
  position:absolute;right:var(--gutter);bottom:14px;margin:0;text-align:right;
  color:rgba(245,241,225,.55);font-size:.68rem;max-width:38ch;
}
.sobre-foto--clara .legenda{color:var(--tinta-55)}

/* ----- 8b. FAIXA DE PROVA (fecha o hero) --------------------------------- */
/* Estática por princípio: os números estão escritos no HTML e não dependem
   de JavaScript nenhum para aparecer.                                        */

/* Duas metades exatas da largura, com respiro largo entre elas.
   Sem divisória: o que separa os dados do texto acima é só o espaço. */
.prova{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(38px,5vw,68px) clamp(40px,6vw,90px);
  margin-top:clamp(48px,6.5vw,84px);
}
.sobre-foto--clara .prova{border-top-color:rgba(68,35,9,.22)}

/* ----- 8b2. DADO COM PROVA : número, frase e fonte no hover -------------- */
/* Regra dura da Mallu: o número e a linha de baixo se sustentam sozinhos.
   O hover aprofunda e prova, nunca completa. No toque abre e fecha por clique.
   Por teclado abre com Tab mais Enter. Nunca fecha por tempo.                */

/* O dado é uma folha de papel: a frente é o número, o verso é a prova.
   Passando o mouse por perto, a folha vira e a prova toma o lugar do dado,
   ali mesmo, sem abrir nada fora da tela. Tirando o mouse, ela desvira.     */

/* Sem a propriedade `perspective` aqui: ela criava contexto de empilhamento e
   prendia o cartão embaixo dos dados vizinhos. A perspectiva vive dentro do
   transform de cada face, como função, e faz o mesmo efeito sem prender nada.  */
/* Sem max-width: o dado ocupa a metade inteira da tela, que é a largura que
   você aprovou. (Havia um `max-width:32ch` aqui que nunca chegou a valer, por
   causa de um seletor quebrado logo acima; ao consertar o seletor ele passou a
   valer e estreitou tudo.) */
.dado{position:relative}
/* O dado que está sendo lido sobe na pilha inteiro, então o cartão dele passa
   por cima de qualquer vizinho, venha antes ou depois no código. */
.dado:hover,.dado:focus-visible,.dado.aberto{z-index:60}

.dado__folha{position:static}
/* Não dá para confiar só em backface-visibility: o backdrop-filter do verso
   desliga o 3D do próprio elemento e ele reaparecia em repouso. A troca de
   face é feita por opacidade, que é determinística; a rotação segue dando o
   movimento da folha virando por cima. */
.dado__frente,.dado__prova{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* PADRÃO DE POSIÇÃO: o cartão nasce EM CIMA DO PRÓPRIO DADO, cobrindo ele.
   Como o dado desaparece na virada, o lugar já está livre: o cartão ocupa o
   espaço dele e cresce para os dois lados, para cima e para baixo, a partir do
   meio. Nada de viajar para o topo da imagem, nada de pular de canto: o cartão
   sempre aparece onde o olho já estava. */
.dado__prova{
  position:absolute;left:0;top:50%;
  transform:translateY(-50%) perspective(2600px) rotateX(180deg);
  transform-origin:center center;
  opacity:0;visibility:hidden;
  transition:transform .58s cubic-bezier(.3,1.06,.4,1),
             opacity .2s var(--ease) 0s,visibility 0s linear .2s;
}
.dado__frente{
  transform:perspective(2600px) rotateX(0);transform-origin:center bottom;
  transition:transform .58s cubic-bezier(.3,1.06,.4,1),opacity .2s var(--ease) .26s;
}
.dado:hover .dado__prova,
.dado:focus-visible .dado__prova,
.dado.aberto .dado__prova{
  transform:translateY(-50%) perspective(2600px) rotateX(0);
  opacity:1;visibility:visible;
  transition:transform .58s cubic-bezier(.3,1.06,.4,1),
             opacity .22s var(--ease) .26s,visibility 0s linear .26s;
}
.dado:hover .dado__frente,
.dado:focus-visible .dado__frente,
.dado.aberto .dado__frente{
  transform:perspective(2600px) rotateX(-180deg);
  opacity:0;transition:transform .58s cubic-bezier(.3,1.06,.4,1),opacity .18s var(--ease) .16s;
}
.dado__frente{transition:opacity .2s var(--ease) .26s}
.dado:hover .dado__prova,
.dado:focus-visible .dado__prova,
.dado.aberto .dado__prova{
  opacity:1;visibility:visible;
  transition:opacity .22s var(--ease) .26s,visibility 0s linear .26s;
}
.dado:hover .dado__frente,
.dado:focus-visible .dado__frente,
.dado.aberto .dado__frente{opacity:0;transition:opacity .18s var(--ease) .16s}

/* :focus-visible, nunca :focus-within. Com :focus-within, clicar no dado dava
   foco nele e a folha ficava travada virada depois que o mouse ia embora.
   :focus-visible só casa em navegação por teclado, que é quem de fato precisa. */
/* a virada agora vive em cada face, logo acima */

.dado__n{
  display:block;font-family:var(--titulo);font-weight:800;line-height:1;
  font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--amarelo);letter-spacing:-.01em;
}
.dado__l{display:block;margin-top:10px;font-size:.95rem;line-height:1.5}
.sobre-foto .dado__l{color:rgba(245,241,225,.94)}
.dado:focus{outline:none}
.dado:focus-visible{outline:3px solid var(--amarelo);outline-offset:10px;border-radius:2px}

/* O verso: vidro de verdade. Quase sem tinta por cima, o escurecimento vem do
   próprio filtro, então a foto continua viva por trás, só desfocada.
   Largura curta de propósito: o cartão fica quase quadrado, nunca uma faixa
   comprida cobrindo a imagem.                                                */
.dado__prova{
  /* Exatamente a largura do dado que ele cobre: o cartão veste o lugar dele em
     vez de virar uma faixa comprida atravessando a foto. */
  width:100%;
  border-radius:var(--raio);padding:22px 24px;
  background:rgba(28,14,3,.10);
  backdrop-filter:blur(26px) saturate(150%) brightness(.62);
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(.62);
  border:0;                              /* sem borda: fica mais limpo */
  color:#fff;font-size:1rem;line-height:1.62;
  text-align:left;                       /* justificado abria buracos */
}
/* Se o navegador não tiver backdrop-filter, o vidro vira tinta, senão some. */
@supports not (backdrop-filter: blur(1px)){
  .dado__prova{background:rgba(28,14,3,.88)}
  .dado--claro .dado__prova{background:rgba(245,241,225,.96)}
}
.dado__prova .forte{color:var(--terracota);font-weight:700}
.dado--claro .dado__prova{
  background:rgba(245,241,225,.14);border:0;color:var(--marrom);
  backdrop-filter:blur(24px) saturate(140%) brightness(1.14);
  -webkit-backdrop-filter:blur(24px) saturate(140%) brightness(1.14);
}
.dado--claro .dado__prova .dado__fonte{color:var(--tinta-55)}

/* O gradiente: a frase vem primeiro, depois as três proporções. */
.grad{list-style:none;display:grid;gap:7px;margin:14px 0 0}
.grad li{font-size:.95rem;line-height:1.35;color:rgba(245,241,225,.94)}
.grad li u{text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:.06em}
.grad__n{
  font-family:var(--titulo);font-weight:800;color:var(--amarelo);
  font-size:clamp(1.35rem,2.2vw,1.85rem);margin-right:.4em;
}
.dado__l--topo{margin-top:0;font-weight:700;font-size:clamp(1rem,1.35vw,1.18rem)}

/* O destaque dentro da linha do dado. */
.dado__forte{font-weight:700;color:#fff}
.dado__forte .grifo u{text-decoration-thickness:.07em;text-underline-offset:.16em}

/* Dado largo: ocupa as duas colunas e centraliza. */
.dado--largo{grid-column:1/-1;max-width:none;text-align:center;justify-items:center}
.dado--largo .dado__folha{justify-items:center}
.dado--largo .dado__n{font-size:clamp(2.1rem,4vw,3.4rem)}
.dado--largo .dado__l{max-width:44ch;margin-left:auto;margin-right:auto}
/* O dado largo é centrado, então o cartão dele também nasce centrado nele. */
.dado--largo .dado__prova{
  left:50%;transform:translate(-50%,-50%) perspective(2600px) rotateX(180deg);
  width:min(68ch,100%);text-align:left;
}
.dado--largo:hover .dado__prova,
.dado--largo:focus-visible .dado__prova,
.dado--largo.aberto .dado__prova{
  transform:translate(-50%,-50%) perspective(2600px) rotateX(0);
}

/* O logo no lugar da palavra PAAPS, no mesmo corpo do texto. */
.hero__logo{
  display:inline-block;height:1.32em;width:auto;vertical-align:-.30em;margin-right:.02em;
}

/* Cutucada: o número se mexe de leve, de vez em quando, lembrando que ali tem
   mais coisa. Os três nunca se mexem juntos: cada um entra num tempo.
   Depois que a pessoa toca no dado uma vez, ele para de chamar para sempre.  */
@keyframes cutuca{
  0%,86%,100%{transform:translateY(0) rotate(0)}
  89%{transform:translateY(-6px) rotate(-1.3deg)}
  92%{transform:translateY(0) rotate(.8deg)}
  95%{transform:translateY(-3px) rotate(-.3deg)}
  97.5%{transform:translateY(0) rotate(.2deg)}
}
/* Ciclo de 6s, não mais 11s: quem navega não passa o mouse nas frases por
   conta própria, então a cutucada precisa acontecer com frequência suficiente
   para ser vista antes da pessoa rolar a página. Com 4 dados, cada um entra a
   cada 1,5s: aparecem seguido, mas nunca dois ao mesmo tempo. */
.dado__n,.dado--grad .grad__n{animation:cutuca 6s var(--ease) infinite;transform-origin:left center;display:inline-block}
.dado__n{display:block}
.dado:nth-child(2) .dado__n,.dado:nth-child(2) .grad__n{animation-delay:1.5s}
.dado:nth-child(3) .dado__n{animation-delay:3s}
.dado:nth-child(4) .dado__n{animation-delay:4.5s}
.dado.tocado .dado__n,.dado.tocado .grad__n{animation:none}
.dado:hover .dado__n,.dado:hover .grad__n{animation:none}
@media (prefers-reduced-motion:reduce){.dado__n,.grad__n{animation:none}}
/* Nada de mexer no transform do verso aqui: quem gira é a folha, não a face.
   Zerar a rotação da face desfaz a virada e o verso some. */
/* Fonte sempre na última linha, separada e em corpo menor. */
/* Sem linha separadora: o que separa a fonte do texto é o respiro e o corpo menor. */
.dado__fonte{
  display:block;margin-top:14px;
  font-size:.68rem;line-height:1.45;color:rgba(245,241,225,.72);
  text-align:left;
}
.dado--claro .dado__n{color:var(--marrom)}
.dado--claro .dado__l{color:var(--tinta-70)}

/* Com a folha virando no próprio lugar, nada mais é desenhado fora da seção:
   o problema de a prova abrir fora da tela deixou de existir. */

/* No bloco 2 a frase é negrito e maior, e o número segue mandando em cima. */
.meia__lista .dado__l{
  font-weight:700;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.45;
}
/* ESGOTADOS: caixa alta em League Spartan, sublinhado. */
.esgot{
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.07em;
}

/* Destaque amarelo obrigatório em "o dobro" e afins. */
.forte{color:var(--amarelo);font-weight:700}

/* ----- 8c. CAIXA DE TEXTO SOBRE FOTO ------------------------------------- */
/* O respiro do site não vem de trocar a cor da seção: vem destas caixas.    */

.caixa{
  background:rgba(68,35,9,.9);color:var(--bege);
  border-radius:var(--raio);padding:clamp(28px,3.4vw,48px);
  max-width:52ch;backdrop-filter:blur(2px);
}
.caixa--bege{background:rgba(245,241,225,.96);color:var(--marrom)}
.caixa--bege .rotulo{color:var(--oliva)}
.caixa--oliva{background:var(--oliva);color:var(--branco)}
.caixa--oliva .rotulo{color:rgba(255,255,255,.85)}
.caixa h2,.caixa h3{margin-bottom:.5em}
.caixa--larga{max-width:66ch}

/* Chip de legenda pinado no canto da foto: vira registro, não ilustração. */
.chip{
  position:absolute;left:var(--gutter);bottom:22px;z-index:3;
  display:inline-block;padding:9px 16px;border-radius:var(--raio);
  background:rgba(68,35,9,.88);color:var(--bege);
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
}

/* ----- 8c2. MEIA TELA : texto de um lado, foto sangrando do outro -------- */
/* A foto ocupa metade da tela de verdade, de borda a borda, sem moldura.    */

.meia{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:82svh}
.meia__texto{padding:clamp(48px,7vw,104px) 0}
.meia__texto > *{max-width:min(56ch,100%)}
.meia__texto{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));padding-right:clamp(24px,4vw,64px)}
.meia__foto{position:relative;align-self:stretch;min-height:60svh}
/* O corte é ancorado no rosto de quem atende. Sem isso, o recorte central cai
   na parede entre as duas pessoas e a foto perde completamente o sentido. */
.meia__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 38%}
.meia__foto .legenda{position:absolute;right:14px;bottom:12px;margin:0;text-align:right;
  color:rgba(245,241,225,.72);max-width:34ch;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.meia__lista{display:grid;gap:clamp(26px,3vw,40px);margin-top:clamp(26px,3vw,40px)}

/* ----- 8c2. A PROVA DO BLOCO 2 VAI PARA CIMA DA FOTO --------------------- */
/* Aqui a prova NÃO cobre o dado: a coluna de texto é estreita e o cartão saía
   espremido, embaralhando os dois dados. Ele atravessa para a metade direita e
   pousa centrado sobre a foto, com o mesmo vidro do hero. O dado que você está
   lendo não some: fica levemente apagado, dizendo "a prova ali em cima é minha". */

/* O cartão se ancora na seção inteira, não no dado, para poder cruzar a metade. */
.meia .dado{position:static}
.meia .dado__prova{
  position:absolute;top:50%;left:75%;right:auto;z-index:5;
  width:min(42ch,40vw);
  transform:translate(-50%,-50%) perspective(2600px) rotateX(180deg);
  transform-origin:center center;
}
.meia .dado:hover .dado__prova,
.meia .dado:focus-visible .dado__prova,
.meia .dado.aberto .dado__prova{
  transform:translate(-50%,-50%) perspective(2600px) rotateX(0);
}

/* Vidro escuro, igual ao do hero: aqui o fundo é foto, não bege. */
.meia .dado--claro .dado__prova{
  background:rgba(28,14,3,.10);color:#fff;border:0;
  backdrop-filter:blur(26px) saturate(150%) brightness(.62);
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(.62);
}
.meia .dado--claro .dado__prova .dado__fonte{color:rgba(255,255,255,.66)}
@supports not (backdrop-filter: blur(1px)){
  .meia .dado--claro .dado__prova{background:rgba(28,14,3,.88)}
}

/* A frente não vira nem desaparece: só recua. */
.meia .dado__frente{transform:none;backface-visibility:visible}
.meia .dado:hover .dado__frente,
.meia .dado:focus-visible .dado__frente,
.meia .dado.aberto .dado__frente{
  transform:none;opacity:.42;
  transition:opacity .28s var(--ease);
}

/* ----- 8c3. FOTO INTEIRA : sem corte e sem véu --------------------------- */
/* Regra da Mallu para a foto das mulheres: presente, sem ser cortada e sem ser
   escurecida, sem bloco por cima. A legibilidade vem de sombra no próprio tipo
   e de um degradê curtíssimo só no pé do texto, nunca de um véu na foto toda.  */

.foto-inteira{position:relative;isolation:isolate;background:var(--bege)}
.foto-inteira > img{width:100%;height:auto;display:block}
.foto-inteira__c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding:clamp(44px,7vw,96px) var(--gutter) clamp(52px,7vw,92px);
  color:#fff;
}
/* O degradê pertence à SEÇÃO, não à coluna de texto. Antes ele vivia dentro do
   `.foto-inteira__c`, que é limitado a 1200px e centralizado: em tela larga o
   escurecimento parava na borda da coluna e deixava um corte vertical visível
   no meio da foto, na altura do braço da segunda mulher. Aqui ele atravessa a
   largura inteira e não corta nada. */
.foto-inteira::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,0) 100%);
}
.foto-inteira h2{color:#fff;max-width:22ch;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.foto-inteira .lead{color:rgba(255,255,255,.94);max-width:56ch;margin-top:1em;
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* Crédito de foto: SEMPRE no canto inferior direito, em toda foto do site.
   É o padrão do hero e do bloco 2, e agora vale aqui também. */
.foto-inteira .legenda{
  position:absolute;right:var(--gutter);bottom:14px;z-index:3;margin:0;text-align:right;
  color:rgba(255,255,255,.75);text-shadow:0 1px 8px rgba(0,0,0,.7);max-width:36ch;
}

/* ----- 8d. PORTAS DE PÚBLICO (foto ao centro, cards ladeando) ------------ */

.portas{
  display:grid;grid-template-columns:1fr minmax(240px,.86fr) 1fr;
  gap:clamp(22px,3vw,44px);align-items:center;
}
.portas__foto{position:relative;align-self:stretch;min-height:420px}
.portas__foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--raio)}
.porta{align-self:center}
.porta h3{margin-bottom:.6em}
.porta p{font-size:.98rem}
.porta__n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--amarelo);color:var(--marrom);font-family:var(--titulo);
  font-weight:800;font-size:.9rem;margin-bottom:16px;
}
.porta--b .porta__n{background:var(--oliva);color:var(--branco)}

/* ----- 8e. BLOCO DE FRENTE (foto | texto | cartão com um pedido) --------- */

.frente{
  display:grid;grid-template-columns:.62fr 1.55fr .95fr;
  gap:clamp(22px,3.2vw,52px);align-items:start;
  padding-block:clamp(34px,4vw,56px);
}
.frente + .frente{border-top:1px solid rgba(174,163,73,.34)}
.frente__foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--raio)}
.frente__cartao{
  background:var(--branco);border:1px solid rgba(174,163,73,.34);
  border-radius:var(--raio);padding:clamp(22px,2.4vw,30px);
}
.frente__cartao p{font-size:.92rem;margin-bottom:1.4em}
.frente__cartao .btn{width:100%;text-align:center;padding-inline:18px}

/* ----- 8f. ODS : a fração do que a PAAPS move ---------------------------- */
/* Fundo oliva, excepcionalmente. Os 8 impactados sobem de baixo e acendem;
   os outros 9 ficam apagados, e é o contraste que conta a fração.           */

.ods{background:var(--oliva);color:var(--branco);padding-top:var(--secao)}
.ods__grade{
  /* A grade de ícones ocupa a metade direita DA TELA, não a metade do container:
     dentro do container os ícones ficavam pequenos demais para serem lidos.
     A coluna de texto continua alinhada com o resto do site pela esquerda. */
  display:grid;grid-template-columns:1fr minmax(0,46vw);
  gap:clamp(28px,3.4vw,56px);align-items:center;
  padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));
  padding-right:clamp(20px,2.4vw,40px);
  padding-bottom:var(--secao);
}
/* Os dois textos são igualmente importantes, um logo depois do outro. Nenhum é
   subtítulo, nenhum é complemento, e nenhum leva Helvetica: os dois em League
   Spartan e grandes. O primeiro em caixa alta, o segundo não.                 */
.ods__t1{color:var(--branco);max-width:15ch;margin-bottom:.5em}
.ods h2.ods__t1{font-size:clamp(2.2rem,4.6vw,4rem)}
.ods__t2{
  font-family:var(--titulo);font-weight:700;text-transform:none;
  font-size:clamp(1.5rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.005em;
  color:var(--branco);max-width:19ch;
}
.ods__t2 u{text-decoration:underline;text-underline-offset:.13em;
  text-decoration-thickness:.055em}
/* O subtítulo é o único lugar de Helvetica nesta seção, e não pode ficar miúdo. */
.ods__t3{
  font-family:var(--corpo);font-weight:400;
  font-size:clamp(1.02rem,1.4vw,1.28rem);line-height:1.45;
  color:rgba(255,255,255,.9);margin-top:.7em;max-width:30ch;
}
/* O logo do PAAPS entra no corpo da frase, alinhado pela altura da letra. */
.ods__logo-paaps{
  display:inline-block;height:.78em;width:auto;vertical-align:baseline;
  transform:translateY(.04em);margin-inline:.1em;
}
/* O logo dos ODS entra no lugar da palavra, dentro da frase. Ele vai sobre uma
   placa branca porque o azul da ONU (#069EDB) contra o oliva desta seção dá
   1,18:1 de contraste: sumiria. Sobre branco vai a 3:1, e é assim que o próprio
   manual da marca pede que ele seja aplicado. */
.ods__selo{
  display:inline-block;vertical-align:middle;
  background:var(--branco);border-radius:var(--raio);
  padding:.34em .5em;margin-inline:.12em;
  transform:translateY(-.04em);
}
.ods__logo{display:block;height:1.72em;width:auto}

/* A grade ocupa a metade direita inteira: os 8 impactados em 2 fileiras de 4,
   grandes o bastante para serem lidos. Os 9 restantes vêm menores embaixo. */
.ods__lista{list-style:none;display:grid}
.ods__lista--on{grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.1vw,16px)}
/* Os 9 restantes entram menores, mas inteiros: mesma cor, mesma nitidez, mesma
   cascata. Menor porque o impacto é indireto, nunca porque estão mortos. */
.ods__lista--off{
  grid-template-columns:repeat(5,1fr);gap:clamp(6px,.8vw,11px);
  width:72%;
}
.ods__i{border-radius:3px;overflow:hidden;aspect-ratio:1;
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
.ods__i img{width:100%;height:100%;object-fit:cover;display:block}

/* Os rótulos das duas grades. NÃO são chapéu: não vão acima de título nenhum,
   não são caixa alta e não têm entreletra aberta. Nomeiam a grade logo abaixo. */
.ods__rotulo{
  font-family:var(--titulo);font-weight:700;text-transform:none;letter-spacing:0;
  font-size:clamp(.98rem,1.25vw,1.16rem);color:var(--marrom);
  margin-bottom:clamp(10px,1.2vw,16px);
}
.ods__rotulo--b{margin-top:clamp(22px,2.8vw,40px);color:rgba(68,35,9,.78)}

/* PADRÃO, e o que vale se o script falhar: todos os 17 inteiros e coloridos.
   Nenhuma informação depende de JavaScript para aparecer. */

/* Só quando o script assume é que eles começam recuados e vão surgindo um a um
   conforme a pessoa desce, ficando nítidos. A classe é escrita pelo script. */
.js .ods__lista--cascata .ods__i{opacity:.20;filter:grayscale(1);transform:scale(.93)}
.js .ods__lista--cascata .ods__i.aceso{opacity:1;filter:none;transform:none}

/* ----- 8g. OS TRÊS SERVIÇOS : texto sobre foto, sem caixa separada ------- */
/* A transparência é o recurso: o texto vive dentro da foto, não num bloco
   colado embaixo dela. */

.servicos{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(68,35,9,.2)}
.servico{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:min(78svh,660px);overflow:hidden;color:var(--bege);text-decoration:none;
}
.servico > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s var(--ease)}
.servico::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(28,14,3,.92) 0%,rgba(28,14,3,.74) 44%,rgba(28,14,3,.46) 100%);
  transition:background .4s var(--ease)}
.servico:hover > img{transform:scale(1.04)}
.servico:hover::after{
  background:linear-gradient(to top,rgba(28,14,3,.94) 0%,rgba(28,14,3,.8) 46%,rgba(28,14,3,.55) 100%)}
.servico__c{padding:clamp(28px,3vw,42px);width:100%}
.servico h3{color:var(--bege);font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.7em}
.servico__p{font-size:.95rem;line-height:1.55;color:rgba(245,241,225,.92);max-width:38ch}
.servico__p b{color:var(--amarelo);font-weight:700}
/* O "+" é elemento próprio, no meio, entre os dois nomes. A caixa do título
   encolhe até a linha mais larga, senão o "+" ficaria centrado no vazio do
   cartão em vez de centrado sobre o nome. */
.servico__t--dupla{width:fit-content}
.mais{
  display:block;text-align:center;
  font-size:1.85em;line-height:.92;font-weight:700;
  margin:.08em 0 .02em;
}

/* Os tópicos fecham o cartão: linha de ponta a ponta, texto centrado e num
   corpo que dá para ler de longe. */
.servico__itens{
  font-size:.95rem;line-height:1.65;color:rgba(245,241,225,.8);
  max-width:none;text-align:center;
  margin-top:1.4em;padding-top:1.3em;
  border-top:1px solid rgba(245,241,225,.24);
}
/* Sem o traço horizontal no fim: traço longo está proibido. O que chama é o
   tamanho e o sublinhado, não um risco decorativo. */
.servico__cta{
  display:block;text-align:center;margin-top:1.3em;
  font-family:var(--titulo);font-size:clamp(.98rem,1.15vw,1.12rem);font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;color:var(--amarelo);
  text-decoration:underline;text-underline-offset:.34em;text-decoration-thickness:.085em;
  text-decoration-color:rgba(247,195,28,.55);
  transition:text-decoration-color .25s var(--ease);
}
.servico:hover .servico__cta{text-decoration-color:var(--amarelo)}
.servico__cred{position:absolute;right:14px;top:14px;z-index:2;text-align:right;max-width:26ch;
  color:rgba(245,241,225,.55);margin:0}

/* Rótulo que revela a lista de itens no celular (ver @media 768px). No desktop
   os itens já aparecem sozinhos, então o rótulo nunca chega a existir ali. */
.servico__mais-toggle{
  display:none;margin-top:1.1em;padding:9px 20px;width:fit-content;
  border:1px solid rgba(245,241,225,.4);border-radius:999px;
  font-family:var(--titulo);font-size:.78rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--bege);cursor:pointer;
}
.servico.aberto .servico__mais-toggle{border-color:var(--amarelo);color:var(--amarelo)}

/* Título de linha única: são 43 caracteres, então o corpo é calculado para
   caber na largura da coluna em vez de herdar a escala do hero. Abaixo de
   900px ele volta a quebrar, porque uma linha só ficaria ilegível no celular. */
/* `.sobre-foto h1` já traz escala e largura próprias, então esta regra precisa
   da mesma especificidade para valer. */
/* O corpo sai da largura útil da coluna, não do viewport: entre 1200 e 1440 a
   coluna não muda de tamanho, e uma conta em `vw` encolhia o título à toa.
   Os 43 caracteres ocupam 23,97em, e o divisor 26,1 deixa cerca de 9% de folga. */
.sobre-foto h1.titulo-linha{
  max-width:none;line-height:1.12;
  font-size:min(calc((100vw - 100px) / 26.1), 2.58rem);
}
.titulo-linha u{text-underline-offset:.16em;text-decoration-thickness:.05em}
/* Os h2 de seção são mais curtos que o h1, então o divisor é menor. */
.sobre-foto h2.titulo-linha--h2{
  max-width:none;line-height:1.12;
  font-size:min(calc((100vw - 100px) / 23.2), 2.7rem);
}
@media (max-width:900px){
  .sobre-foto h2.titulo-linha--h2{font-size:clamp(1.45rem,5.4vw,2rem)}
}
@media (max-width:900px){
  .sobre-foto h1.titulo-linha{font-size:clamp(1.5rem,5.6vw,2.1rem)}
}

/* Conteúdo centrado na vertical, em vez de encostado no pé. Sobe o bloco todo
   para o meio da tela, que é onde a frase precisa estar quando a pessoa chega. */
.sobre-foto--centro{align-items:center}

/* Chegada na seção: o véu escurece e o texto se assenta. Nada de deslize longo;
   é um movimento curto, que termina antes de a pessoa terminar de ler a
   primeira linha. Sem script, tudo já está no lugar e visível. */
.js .sobre-foto--entra::after{opacity:.35;transition:opacity 1.1s var(--ease)}
.js .sobre-foto--entra.dentro::after{opacity:1}
.js .sobre-foto--entra .sobre-foto__c > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s cubic-bezier(.2,.8,.3,1);
}
.js .sobre-foto--entra.dentro .sobre-foto__c > *{opacity:1;transform:none}
.js .sobre-foto--entra.dentro .sobre-foto__c > *:nth-child(2){transition-delay:.13s}
.js .sobre-foto--entra.dentro .sobre-foto__c > *:nth-child(3){transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .js .sobre-foto--entra::after{opacity:1}
  .js .sobre-foto--entra .sobre-foto__c > *{opacity:1;transform:none;transition:none}
}

/* ----- 8g1. A FRASE DA EPIDEMIA E A LINHA QUE SE DESENHA ----------------- */
/* League Spartan em peso normal, bege, e o grifo amarelo NÃO existe em repouso:
   ele se desenha da esquerda para a direita conforme a pessoa desce a página.
   O `--p` é escrito pelo script, de 0 a 1, a partir da posição do scroll.     */

/* `.sobre-foto p` deixa o texto a 90% de opacidade; aqui o bege é cheio.
   Centrada e com respiro grande acima: é a frase que fecha a seção. */
.sobre-foto p.epidemia,.epidemia{
  font-family:var(--titulo);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(1.15rem,1.9vw,1.65rem);line-height:1.35;
  color:var(--bege);max-width:36ch;
  margin:clamp(34px,4.2vw,58px) auto 0;text-align:center;
}
.epidemia__caps{text-transform:uppercase}
.epidemia b{font-weight:700;color:var(--bege)}
/* line-height:1 é o que faz o sublinhado colar rente à palavra, não importa
   o line-height do título ao redor (que existe para dar respiro ENTRE
   linhas, um problema diferente e independente deste). */
.risca{position:relative;display:inline-block;white-space:nowrap;line-height:1}
.risca::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.09em;
  background:var(--amarelo);border-radius:2px;
  transform:scaleX(var(--p,0));transform-origin:left center;
}
/* Sem script a linha já está inteira: o grifo é parte da mensagem, não enfeite. */
html:not(.js) .risca::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.risca::after{transform:scaleX(1)}}

/* ----- 8g2. OS DOIS CAMINHOS : duas fotos de tela cheia ------------------ */
/* Mesma gramática dos três serviços da home: a foto é o bloco, o texto vive
   dentro dela, e o que responde ao mouse é a própria foto se aproximando e o
   véu escurecendo. Sem moldura, sem botão, sem cartão.
   Proporção 4:5, que é o retrato do Instagram, e as duas juntas ocupam a
   largura inteira da tela.                                                   */

.duplas{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(68,35,9,.2)}
/* Altura amarrada à tela, não à proporção da foto: em 4:5 as duas caixas
   passavam de 890px e obrigavam a rolar até o fim da imagem para chegar no
   texto. Agora as duas cabem num quadro só de computador, foto e texto juntos. */
.dupla{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  height:min(76svh,760px);overflow:hidden;color:var(--bege);text-decoration:none;
}
.dupla > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s var(--ease)}
/* O corte foge do que não informa: o teto na foto do hospital e o céu na do
   rio. As duas descem o enquadramento para onde estão as pessoas. */
.dupla--a > img{object-position:center 72%}
.dupla--b > img{object-position:center 78%}
.dupla::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(28,14,3,.9) 0%,rgba(28,14,3,.62) 42%,rgba(28,14,3,.28) 100%);
  transition:background .4s var(--ease)}
.dupla:hover > img,.dupla:focus-visible > img{transform:scale(1.04)}
.dupla:hover::after,.dupla:focus-visible::after{
  background:linear-gradient(to top,rgba(28,14,3,.93) 0%,rgba(28,14,3,.7) 46%,rgba(28,14,3,.4) 100%)}
.dupla:focus{outline:none}
.dupla:focus-visible{outline:3px solid var(--amarelo);outline-offset:-6px}

.dupla__c{padding:clamp(30px,3.4vw,56px);width:100%}
.dupla__t{
  color:var(--bege);max-width:14ch;
  font-size:clamp(1.5rem,2.6vw,2.5rem);margin-bottom:.5em;
}
.dupla__p{
  font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.55;
  color:rgba(245,241,225,.92);max-width:34ch;
}
.dupla__cred{position:absolute;right:16px;top:16px;z-index:2;text-align:right;max-width:26ch;
  color:rgba(245,241,225,.55);margin:0}

/* ----- 8g3. A TRILHA DOS ENTREGÁVEIS ------------------------------------ */
/* Um caminho com curvas descendo. O traço fraco desenha o percurso inteiro
   desde o começo; o traço amarelo desce por cima conforme a pessoa rola, e cada
   ponto acende quando a luz passa por ele, trazendo o texto junto.
   O `d` dos dois caminhos é calculado pelo script a partir da posição real de
   cada ponto, porque os textos têm alturas diferentes e um caminho fixo
   desalinharia. Sem script, tudo aparece aceso e legível.                     */

.passos__t{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:clamp(20px,2.4vw,32px)}
.trilha-passos{position:relative}
.trilha-passos__svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:0;
}
.trilha-passos__base{stroke:rgba(68,35,9,.18);stroke-width:2;stroke-linecap:round}
.trilha-passos__luz{stroke:var(--amarelo);stroke-width:3;stroke-linecap:round}

.passos{list-style:none;display:grid;gap:clamp(20px,2.6vw,34px);position:relative;z-index:1}
.passo{
  display:grid;grid-template-columns:64px 1fr;align-items:center;
  min-height:56px;
}
.passo__ponto{
  width:15px;height:15px;border-radius:50%;justify-self:center;
  background:var(--bege);border:2px solid rgba(68,35,9,.22);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease);
}
/* Helvetica, mas em negrito e num corpo que se lê de longe: são os entregáveis,
   a informação mais concreta da página inteira. */
.passo__t{
  font-family:var(--corpo);font-weight:700;
  font-size:clamp(1.12rem,1.45vw,1.34rem);line-height:1.45;
  color:var(--marrom);max-width:46ch;
}
/* Só com script os passos começam recuados, e nunca a ponto de sumir. */
.js .passo__ponto{background:var(--bege)}
.js .passo__t{opacity:.42;transform:translateX(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .passo.aceso .passo__ponto{
  background:var(--amarelo);border-color:var(--amarelo);transform:scale(1.18);
}
.js .passo.aceso .passo__t{opacity:1;transform:none;color:var(--marrom)}
@media (prefers-reduced-motion:reduce){
  .js .passo__t{opacity:1;transform:none}
}
@media (max-width:600px){
  .passo{grid-template-columns:44px 1fr}
}

/* ----- 8h. QUEM CONTRATA ------------------------------------------------- */

.contrata__t{display:flex;align-items:center;gap:.34em;flex-wrap:wrap;max-width:none}
.contrata__logo{height:.86em;width:auto;display:inline-block;transform:translateY(.04em)}
/* Coluna flex: o texto de cada porta tem tamanho diferente, e é o `margin-top:auto`
   do CTA que faz os dois "Começar por aqui" pousarem na mesma linha, em vez de
   flutuarem cada um numa altura. */
.porta-btn{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,3vw,40px);border-radius:var(--raio);
  border:1px solid rgba(174,163,73,.5);background:var(--branco);color:var(--marrom);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
/* Decisão dela em 05/08/2026, revogando o "NUNCA box-shadow" do
   identidade-aplicada.md SÓ para este bloco: a borda de hover sai e entra uma
   sombra de verdade. Três camadas em vez de uma: a rasa cola o objeto na
   superfície, a média dá o corpo e a longa dá a distância. Sombra de uma
   camada só é o que faz o cartão parecer adesivo em vez de objeto. */
.porta-btn:hover,.porta-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 1px 2px rgba(68,35,9,.06),
    0 8px 18px rgba(68,35,9,.09),
    0 24px 48px rgba(68,35,9,.11);
}
.porta-btn svg{width:44px;height:44px;color:var(--oliva);display:block;margin-bottom:18px}
.porta-btn--b svg{color:var(--marrom)}
.porta-btn__t{display:block;font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.1}
.porta-btn__l{display:block;margin-top:.8em;font-size:.95rem;line-height:1.55;color:var(--tinta-70)}
/* `margin-top:auto` empurra o CTA para o pé da caixa: os dois pousam na mesma
   linha mesmo com textos de tamanhos diferentes. O `padding-top` garante o
   respiro mínimo quando os dois textos são curtos. */
/* Corpo e entreletra iguais aos do CTA dos três serviços. Antes eram .78rem em
   caixa alta com entreletra de .08em, que é a receita exata do chapéu banido:
   ele tinha sobrevivido aqui só por estar embaixo do texto em vez de acima. */
.porta-btn__go{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:1.4em;
  font-family:var(--titulo);font-size:clamp(.98rem,1.15vw,1.12rem);font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;color:var(--marrom);
  padding-bottom:5px;
}
/* A linha não existe em repouso: ela se desenha da esquerda para a direita
   quando o mouse entra no bloco inteiro, e desfaz no mesmo caminho ao sair.
   A curva é desacelerada no fim, senão o traço chega batendo na parede. */
/* Cresce por `scaleX` a partir da esquerda, não por `width`: percentual de
   largura não resolvia dentro deste contêiner, e transform ainda é mais leve,
   porque não refaz o layout a cada quadro da animação. */
.porta-btn__go::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--amarelo);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.porta-btn:hover .porta-btn__go::after,
.porta-btn:focus-visible .porta-btn__go::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .porta-btn__go::after{transition:none}
}

/* ----- 8h2. CADASTRO SOBRE A SERRA --------------------------------------- */
/* A foto da serra de Minas, a mesma da assinatura de e-mail, cobre a seção
   inteira, formulário incluso. O véu é marrom e não preto: o preto dessatura a
   paisagem e devolve o cinza que a regra da cor em cor já recusou. */
.cadastro--foto{position:relative;isolation:isolate;overflow:hidden}
.cadastro__fundo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;z-index:-2;
}
.cadastro--foto::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,23,7,.58) 0%,rgba(46,23,7,.74) 100%);
}
.cadastro--foto .form input,.cadastro--foto .form select,
.cadastro--foto .form textarea{
  background:rgba(245,241,225,.94);border-color:rgba(245,241,225,.5);
}
.cadastro--foto .cadastro__lema{max-width:14ch}
/* A pergunta de perfil é obrigatória em TODOS os formulários do site. */
.form__obrig{font-weight:400;text-transform:none;letter-spacing:0;opacity:.72}
.form__dica{
  font-family:var(--corpo);font-size:.86rem;line-height:1.45;
  color:rgba(245,241,225,.78);margin-top:.7em;
}
/* Cartão que é link, no mesmo gesto das portas da home: sem a borda amarela
   bruta em cima, sombra em três camadas mais discreta que a das portas, e a
   borda escurecendo no hover. O CTA ganha a linha que se desenha da esquerda
   para a direita quando o mouse entra no cartão inteiro. */
.cartao--clique{
  display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.cartao--clique:hover,.cartao--clique:focus-visible{
  border-color:var(--marrom);transform:translateY(-2px);
  box-shadow:
    0 1px 2px rgba(68,35,9,.05),
    0 6px 14px rgba(68,35,9,.07),
    0 18px 34px rgba(68,35,9,.08);
}
.cartao--clique:focus{outline:none}
.cartao--clique:focus-visible{outline:3px solid var(--amarelo);outline-offset:4px}
.cartao__go{
  position:relative;display:inline-block;margin-top:auto;padding-top:1.4em;padding-bottom:5px;
  font-family:var(--titulo);font-size:clamp(.98rem,1.15vw,1.12rem);font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;color:var(--marrom);
}
.cartao__go::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--amarelo);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.cartao--clique:hover .cartao__go::after,
.cartao--clique:focus-visible .cartao__go::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.cartao__go::after{transition:none}}

/* ----- 8i. DIFERENCIAIS -------------------------------------------------- */

.dif{display:grid;gap:14px;margin-top:clamp(26px,3vw,40px);max-width:62ch}
.dif__i{font-size:.98rem;line-height:1.55;color:rgba(245,241,225,.9);
  padding-left:20px;border-left:2px solid var(--amarelo)}
.dif__i b{color:var(--bege)}

/* ----- 8j. CIÊNCIA ------------------------------------------------------- */

/* ----- GALERIA DE CAPAS ACADÊMICAS -------------------------------------- */
/* Cada obra é uma capa de trabalho acadêmico: instituição no alto, título ao
   centro, referência ABNT no pé. Passando o mouse, a capa vira NO MESMO LUGAR
   e mostra o que aquela obra sustenta. Duas colunas no computador.          */

.ciencia__intro{
  font-size:1.02rem;line-height:1.6;color:var(--tinta-70);
  max-width:56ch;margin-top:.4em;
}
.ciencia__intro u{
  color:var(--marrom);font-weight:700;
  text-underline-offset:.18em;text-decoration-thickness:.06em;
}
/* A segunda frase do verso é o desdobramento da primeira: entra separada por
   espaço, não por ponto, para as duas não virarem um bloco só de leitura. */
.obra__verso-b{display:block;margin-top:.9em;color:rgba(245,241,225,.82)}
/* Três por fileira. São cinco obras, então a sexta casa fica VAZIA de
   propósito: é o lugar reservado para o blog da PAAPS, que não entra no
   primeiro deploy. Não colocar nada ali, nem moldura, nem aviso. */
.galeria{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.9vw,26px);
  max-width:840px;margin-top:clamp(30px,3.6vw,48px);
}
.obra{
  position:relative;aspect-ratio:1/1.34;
  cursor:default;
}
.obra:focus{outline:none}
.obra:focus-visible{outline:3px solid var(--amarelo);outline-offset:6px;border-radius:2px}

/* As duas faces ocupam a MESMA caixa: a virada acontece no lugar, sem empurrar
   nada e sem abrir painel em outro canto da tela. */
.obra__frente,.obra__verso{
  position:absolute;inset:0;border-radius:var(--raio);
  display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,30px);
  transform-origin:center center;
  transition:transform .6s cubic-bezier(.3,1.06,.4,1),opacity .2s var(--ease);
}
.obra__frente{
  background:var(--branco);border:1px solid rgba(68,35,9,.16);
  color:var(--marrom);
  transform:perspective(2400px) rotateY(0);
}
.obra__verso{
  background:var(--marrom);color:var(--bege);
  transform:perspective(2400px) rotateY(180deg);
  opacity:0;visibility:hidden;
  justify-content:center;
  font-size:.84rem;line-height:1.5;
  transition:transform .6s cubic-bezier(.3,1.06,.4,1),
             opacity .2s var(--ease) 0s,visibility 0s linear .2s;
}
.obra:hover .obra__verso,
.obra:focus-visible .obra__verso,
.obra.aberto .obra__verso{
  transform:perspective(2400px) rotateY(0);
  opacity:1;visibility:visible;
  transition:transform .6s cubic-bezier(.3,1.06,.4,1),
             opacity .22s var(--ease) .26s,visibility 0s linear .26s;
}
.obra:hover .obra__frente,
.obra:focus-visible .obra__frente,
.obra.aberto .obra__frente{
  transform:perspective(2400px) rotateY(-180deg);
  opacity:0;transition:transform .6s cubic-bezier(.3,1.06,.4,1),opacity .18s var(--ease) .18s;
}

/* Anatomia da capa. Um fio fino no alto e no pé, como capa impressa. */
/* A revista ou instituição é crédito, não manchete: entra pequena, no alto. */
.obra__inst{
  font-family:var(--titulo);font-weight:700;font-size:.68rem;line-height:1.3;
  letter-spacing:.01em;color:var(--oliva);
  padding-bottom:.8em;border-bottom:1px solid rgba(68,35,9,.14);
}
/* Título em caixa alta: é como título de artigo científico é grafado. */
.obra__t{
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(.86rem,1.05vw,1rem);line-height:1.18;letter-spacing:0;
  color:var(--marrom);margin:auto 0;text-wrap:balance;
}
.obra__ref{
  font-family:var(--corpo);font-size:.72rem;line-height:1.4;color:var(--tinta-55);
  padding-top:.8em;border-top:1px solid rgba(68,35,9,.14);
}
.obra__ref i{font-style:italic}

@media (prefers-reduced-motion:reduce){
  .obra__frente,.obra__verso{transition:opacity .2s linear}
}

/* Bloco antigo dos dados em texto corrido, ainda usado em outras páginas. */
.ciencia{display:grid;gap:clamp(18px,2.2vw,26px);margin-top:clamp(26px,3vw,42px);max-width:74ch}
.dado--texto{max-width:none}
.dado--texto .dado__l{font-size:1.06rem;line-height:1.6;margin-top:0;color:var(--marrom)}
/* Mesma regra dos outros: o cartão veste o dado que ele cobre. */
.dado--texto .dado__prova{width:100%}

/* ----- 8k. CADASTRO ------------------------------------------------------ */

.cadastro__logo{height:44px;width:auto;display:block}
.cadastro__lema{font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.6rem);color:var(--amarelo);margin-top:.7em;line-height:1.15}
.form__legenda{font-family:var(--titulo);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,241,225,.8);margin-bottom:10px}
.opcoes{display:flex;gap:10px;flex-wrap:wrap}
.opcao{position:relative;flex:1 1 160px}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao span{
  display:block;padding:14px 16px;border-radius:var(--raio);text-align:center;
  border:1px solid rgba(245,241,225,.3);color:var(--bege);
  font-family:var(--titulo);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:all .22s var(--ease);
}
.opcao input:checked + span{background:var(--amarelo);color:var(--marrom);border-color:var(--amarelo)}
.opcao input:focus-visible + span{outline:3px solid var(--amarelo);outline-offset:3px}

/* ----- 8l. EQUIPE -------------------------------------------------------- */

.equipe__t{margin-top:clamp(44px,5vw,72px);margin-bottom:1.2em;color:var(--bege);
  font-size:clamp(1.1rem,1.7vw,1.4rem)}
.equipe{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.pessoa{position:relative;overflow:visible}
.pessoa > img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:grayscale(.25);transition:filter .3s var(--ease)}
.pessoa:hover > img,.pessoa:focus-visible > img{filter:none}
/* Nome + primeira frase do currículo: sempre visíveis em cima da própria
   foto, com degradê para garantir leitura. O texto longo (parágrafos) só
   aparece com o clique, no cartão abaixo. */
.pessoa__legenda{
  position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;
  background:linear-gradient(to top,rgba(46,24,6,.97) 0%,rgba(46,24,6,.86) 42%,rgba(46,24,6,0) 100%);
}
.pessoa__nome{
  display:block;font-family:var(--titulo);font-size:.8rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--bege);line-height:1.2;
}
.pessoa__frase{
  display:block;margin-top:.4em;font-style:italic;font-size:.76rem;
  line-height:1.35;color:rgba(245,241,225,.88);
}
/* O cartão centraliza na TELA, não na foto: as biografias mais longas (a da
   Mallu passa de 800px) são mais altas que boa parte dos celulares, e
   centralizar num ponto fixo da página as cortava por cima e por baixo.
   position:fixed resolve isso de vez, em qualquer scroll, em qualquer bio. */
.pessoa__card{
  position:fixed;left:50%;top:50%;transform:translate(-50%,calc(-50% - 6px));
  z-index:60;width:min(38ch,86vw);max-height:82vh;overflow-y:auto;pointer-events:none;
  background:var(--bege);color:var(--marrom);border-radius:var(--raio);
  padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.pessoa:hover .pessoa__card,.pessoa:focus-within .pessoa__card,.pessoa.aberto .pessoa__card{
  opacity:1;visibility:visible;transform:translate(-50%,-50%);pointer-events:auto}
.pessoa__card p{margin-top:.8em;font-size:.86rem;line-height:1.55;color:var(--tinta-70)}
.pessoa__card p:first-child{margin-top:0}
.pessoa:focus{outline:none}
.pessoa:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

/* ----- 8m. COMUNIDADE : duas esteiras em sentidos opostos ---------------- */

.comunidade{margin-top:clamp(48px,6vw,84px);padding-top:clamp(30px,4vw,48px);
  border-top:1px solid rgba(245,241,225,.16)}
.comunidade__n{font-family:var(--titulo);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.8rem);color:var(--amarelo);line-height:1.2}
.comunidade__s{font-family:var(--corpo);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.98rem;line-height:1.6;color:rgba(245,241,225,.86);max-width:62ch;margin-top:.7em}
.esteira{position:relative;margin-top:clamp(26px,3vw,40px);display:grid;gap:6px;overflow:hidden}
.esteira__fila{display:flex;gap:6px;width:max-content}
.esteira__fila img{height:clamp(110px,13vw,180px);width:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:3px;flex:none}
.esteira__fila--a{animation:corre-esq 46s linear infinite}
.esteira__fila--b{animation:corre-dir 52s linear infinite}
@keyframes corre-esq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes corre-dir{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.esteira:hover .esteira__fila{animation-play-state:paused}
.esteira__cta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:5;
  padding:16px 30px;border-radius:var(--raio);background:var(--amarelo);color:var(--marrom);
  font-family:var(--titulo);font-size:.86rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;box-shadow:0 12px 40px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:all .3s var(--ease);
}
.esteira:hover .esteira__cta,.esteira:focus-within .esteira__cta{
  opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.esteira::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(28,14,3,0);transition:background .3s var(--ease)}
.esteira:hover::after{background:rgba(28,14,3,.45)}

/* ----- 9. GRADES --------------------------------------------------------- */

.duas{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
.duas--topo{align-items:start}
/* Duas opções gêmeas: mesma largura de coluna e mesma altura de caixa. */
.duas--par{grid-template-columns:1fr 1fr;align-items:stretch}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.quatro{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)}

/* ----- 10. NÚMEROS ------------------------------------------------------- */

.numero{font-family:var(--titulo);font-weight:800;font-size:clamp(2.7rem,6vw,4.6rem);
  line-height:.92;letter-spacing:-.02em;color:var(--amarelo);display:block}
.numero--marrom{color:var(--marrom)}
.numero--oliva{color:var(--oliva)}
.numero__legenda{font-size:.9rem;line-height:1.45;margin-top:12px;max-width:26ch;
  color:rgba(245,241,225,.82)}
.secao:not(.secao--marrom) .numero__legenda{color:var(--tinta-70)}

/* ----- 11. CARTÕES ------------------------------------------------------- */

.cartao{
  background:var(--branco);border:1px solid rgba(174,163,73,.3);border-radius:var(--raio);
  padding:clamp(26px,3vw,40px);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cartao:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(68,35,9,.13)}
.cartao--marcado{border-top:5px solid var(--amarelo)}
.cartao--oliva{border-top:5px solid var(--oliva)}
.cartao p{font-size:.96rem}

.lista{list-style:none;display:grid;gap:14px;margin-top:1.4em}
.lista li{position:relative;padding-left:26px;font-size:.98rem;line-height:1.55}
.lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--amarelo);border-radius:50%;
}
.lista--oliva li::before{background:var(--oliva)}

/* ----- 12. IMAGINE : bloco narrativo ------------------------------------ */

.imagine{
  font-family:var(--corpo);font-size:clamp(1.18rem,2.1vw,1.72rem);line-height:1.5;
  max-width:26ch;color:var(--bege);
}
.imagine span{display:block;opacity:0;transform:translateY(14px);
  animation:sobe .8s var(--ease) forwards}
.imagine span:nth-child(1){animation-delay:.05s}
.imagine span:nth-child(2){animation-delay:.28s}
.imagine span:nth-child(3){animation-delay:.51s}
.imagine span:nth-child(4){animation-delay:.74s}
.imagine span:nth-child(5){animation-delay:.97s}
@keyframes sobe{to{opacity:1;transform:none}}

/* ----- 13. FAIXA DE LEMA ------------------------------------------------- */

.faixa{
  background:var(--marrom);color:var(--amarelo);text-align:center;
  padding:clamp(22px,3vw,34px) var(--gutter);
  font-family:var(--titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(.8rem,1.6vw,1.05rem);
}
.faixa--oliva{background:var(--oliva);color:var(--marrom)}

/* ----- 14. FORMULÁRIO ---------------------------------------------------- */

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{font-family:var(--titulo);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:7px;color:rgba(245,241,225,.8)}
.form input,.form select,.form textarea{
  width:100%;padding:15px 16px;border:1px solid rgba(245,241,225,.3);border-radius:var(--raio);
  background:rgba(245,241,225,.07);color:var(--bege);font-size:.97rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{color:rgba(245,241,225,.45)}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--amarelo);background:rgba(245,241,225,.11);outline:none;
}
.form textarea{min-height:110px;resize:vertical}
.form select option{background:var(--marrom);color:var(--bege)}
.form .ajuda{font-size:.76rem;color:rgba(245,241,225,.6);margin-top:-4px}

/* Mensagem que substitui o formulário depois do envio, no lugar exato onde
   ele estava: sobre foto escura nas duas páginas que usam .form--cadastro. */
.form__sucesso{padding:8px 0;color:var(--bege)}
.form__sucesso h3{color:var(--bege);margin-bottom:.5em}
.form__sucesso p{color:rgba(245,241,225,.85)}

/* ----- 15. RODAPÉ -------------------------------------------------------- */

.rodape{background:var(--marrom);color:var(--bege);padding-block:clamp(56px,7vw,84px) 34px}
.rodape__grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.rodape h4{font-size:.7rem;letter-spacing:.18em;color:var(--amarelo);margin-bottom:1.2em}
.rodape ul{list-style:none;display:grid;gap:10px}
.rodape a{font-size:.92rem;opacity:.84;transition:opacity .2s var(--ease)}
.rodape a:hover{opacity:1;color:var(--amarelo)}
.rodape__base{
  margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(245,241,225,.16);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 28px;
}
.rodape__base p{margin:0;font-size:.74rem;line-height:1.6;color:rgba(245,241,225,.6)}
.rodape__privacidade{
  font-size:.74rem;color:rgba(245,241,225,.75);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;flex-shrink:0;
}
.rodape__privacidade:hover{color:var(--amarelo)}

/* Botão circular e discreto : abre a Política de Privacidade em PDF, numa
   aba nova, sem tirar a pessoa do site. Fica no canto inferior esquerdo da
   seção "Sigilo e ética", fora da coluna de texto. */
.privacidade-btn{
  position:absolute;left:20px;bottom:20px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--bege);
  text-decoration:none;font-size:1.15rem;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .2s var(--ease);
}
.privacidade-btn:hover{transform:scale(1.08)}
.mural{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:clamp(34px,4vw,54px)}
.mural img{aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.04);opacity:.72;
  transition:opacity .3s var(--ease)}
.mural img:hover{opacity:1}

/* ----- 16. REVELAÇÃO NO SCROLL ------------------------------------------ */
/* Progressive enhancement: sem JS, tudo já está visível. */

.js .revela{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .revela.visivel{opacity:1;transform:none}
.js .revela--1{transition-delay:.1s}
.js .revela--2{transition-delay:.2s}
.js .revela--3{transition-delay:.3s}

/* Variante "caindo": tópicos da tela dividida de Treinamentos. Vem de cima
   (não de baixo, como o .revela padrão), mais rápida, sem trilha nem SVG.
   Cada <li> observado individualmente já dá a cascata de graça: um acende
   depois do outro conforme a rolagem, sem precisar de delay manual. */
.js .cai{opacity:0;transform:translateY(-14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js .cai.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .cai{opacity:1;transform:none}}

/* ----- 17. RESPONSIVO --------------------------------------------------- */

@media (max-width:960px){
  /* Sem duas metades não existe "metade direita": a prova volta a cobrir o
     próprio dado, e os textos e a grade dos ODS empilham. */
  .meia .dado{position:relative}
  .meia .dado__prova{
    left:0;top:50%;width:100%;
    transform:translateY(-50%) perspective(2600px) rotateX(180deg);
  }
  .meia .dado:hover .dado__prova,
  .meia .dado:focus-visible .dado__prova,
  .meia .dado.aberto .dado__prova{
    transform:translateY(-50%) perspective(2600px) rotateX(0);
  }
  .galeria{grid-template-columns:1fr 1fr;max-width:560px}
  /* A caixa (aspect-ratio) não muda: só a letra encolhe até caber nela.
     A referência é a que mais estoura (tem a citação mais longa), por isso
     leva o maior corte. overflow:hidden é rede de segurança, não a solução. */
  .obra__frente,.obra__verso{padding:11px 11px;overflow:hidden}
  .obra__inst{font-size:.52rem;line-height:1.15;padding-bottom:.4em}
  .obra__t{font-size:.64rem;line-height:1.1}
  .obra__ref{font-size:.47rem;line-height:1.16;padding-top:.4em}
  .obra__verso{font-size:.6rem;line-height:1.3}
  .obra__verso-b{margin-top:.6em}
  .ods__grade{grid-template-columns:1fr;padding-right:var(--gutter);
    padding-left:var(--gutter);gap:clamp(28px,5vw,46px)}
  .ods__lista--off{width:100%}
  .duas{grid-template-columns:1fr}
  .tres{grid-template-columns:repeat(2,1fr)}
  .quatro{grid-template-columns:repeat(2,1fr)}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .portas{grid-template-columns:1fr 1fr}
  .portas__foto{grid-column:1/-1;order:-1;min-height:300px}
  .frente{grid-template-columns:.8fr 1.4fr}
  .frente__cartao{grid-column:1/-1}
}
@media (max-width:768px){
  .menu{
    position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bege);border-bottom:1px solid rgba(174,163,73,.3);
    padding:8px var(--gutter) 26px;display:none;
  }
  .menu.aberto{display:flex}
  .menu li{width:100%}
  .menu a{display:block;padding:15px 0;font-size:1rem;border-bottom:1px solid rgba(174,163,73,.22)}
  /* O painel do menu aberto é sempre bege sólido, mesmo em página com foto
     escura atrás do topo. Sem isso o link herdava o branco de
     .topo--sobre-foto e ficava ilegível em cima do bege. */
  .topo--sobre-foto .menu.aberto a{color:var(--marrom)}
  .topo--sobre-foto .menu.aberto a:hover{border-bottom-color:var(--amarelo)}
  .topo--sobre-foto .menu.aberto a[aria-current="page"]{border-bottom-color:var(--marrom)}
  .menu__botao{display:block}
  .tres,.quatro{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .mural{grid-template-columns:repeat(4,1fr)}
  /* CRÉDITO DE FOTO: uma linha só, no pé da própria foto, em toda foto do site.
     É a regra das peças publicadas, onde o crédito roda a cerca de 6,5px na tela
     do celular. A 9px o crédito mais longo do site (88 caracteres, o do hero)
     fecha em uma linha em 351px, sem mexer em nenhuma palavra.

     O `position:static` que estava aqui era um bug estrutural: `.sobre-foto` é
     flex em linha, então a legenda estática virava uma SEGUNDA COLUNA e roubava
     88px no hero e 147px no milharal, empurrando todo o texto para a esquerda.
     Era a causa real do "o texto não está centralizado na tela". */
  .sobre-foto > .legenda,
  .foto-inteira .legenda,
  .meia__foto .legenda{
    position:absolute;left:0;right:0;bottom:0;top:auto;margin:0;padding:0 10px 9px;
    text-align:left;max-width:none;font-size:8px;line-height:1.35;white-space:nowrap;
  }
  .prova{grid-template-columns:1fr;gap:34px}
  .dado__prova{width:100%}
  .portas,.frente{grid-template-columns:1fr}
  .portas__foto{min-height:260px}
  .frente__foto img{aspect-ratio:16/10}
  .caixa{max-width:none}
  .chip{left:16px;bottom:16px;font-size:.68rem;padding:7px 13px}
  .meia{grid-template-columns:1fr;min-height:0}
  .meia__texto{padding:clamp(40px,8vw,64px) var(--gutter)}
  .meia__foto{min-height:56svh;order:-1}
  /* No celular a folha continua virando, só que o gatilho é o toque.
     Isso funciona SEM JavaScript: tocar num elemento com tabindex dá foco,
     e o :focus-within já vira a folha. Nada aqui pode voltar a esconder a
     prova por display, senão o conteúdo some quando o script falha. */
  /* .82rem dava 13px, miúdo demais para quem lê de óculos. Fica em 15px. */
  .dado__prova{padding:17px 18px;font-size:.94rem;line-height:1.55}

  /* Os três cartões de serviço e os cinco retratos da equipe nunca tiveram
     regra de celular (só receberam a de tablet/desktop, repeat(3,1fr) e
     repeat(5,1fr)): a página inteira estourava a largura da tela e empurrava
     o botão do menu pra fora dela. Ver simulação de UX mobile, 07/08/2026. */
  /* Parágrafo de abertura de Sigilo e Ética: no tamanho padrão do .lead
     ficava grande demais para a coluna estreita do celular. */
  #diferenciais .lead{font-size:.9rem;line-height:1.55;text-align:justify}
  /* Rede (foto das mulheres, Radilson): título e subtítulo centralizados no
     celular, em vez de alinhados à esquerda. */
  .foto-inteira__c{text-align:center}
  .foto-inteira h2{margin-inline:auto}
  .foto-inteira .lead{margin-inline:auto}
  /* ODS: o texto de abertura centralizado, com a figurinha da ONU (que já é
     inline no meio da frase) centralizando junto. A grade dos 17 objetivos
     não muda. */
  .ods__texto{text-align:center}
  .ods__t1,.ods__t2,.ods__t3{margin-inline:auto}
  .servicos{grid-template-columns:1fr}
  .equipe{grid-template-columns:repeat(2,1fr)}
  /* Com 5 pessoas em 2 colunas, a 5ª sobra sozinha na última linha: melhor
     centralizada do que grudada na esquerda. */
  .equipe .pessoa:last-child{grid-column:1/-1;max-width:50%;margin:0 auto}

  /* Cada cartão de serviço era desenhado pra caber 3 lado a lado no desktop
     (min-height quase a tela inteira). Empilhado numa coluna só, essa altura
     virava uma faixa estreitíssima e a foto cortava no centro (às vezes numa
     parede, sem ninguém em quadro). clamp() dá uma altura bem mais baixa,
     mas ainda é min-height: se o texto do cartão aberto precisar de mais
     espaço, o cartão cresce, nunca corta conteúdo. */
  .servico{min-height:clamp(340px,68vw,420px)}
  .servico--cuidado > img{object-position:55% 68%}
  .servico--treinos > img{object-position:68% 42%}
  .servico--urgencias > img{object-position:50% 35%}

  /* A lista densa de itens (separados por "·") só aparece depois do toque no
     rótulo "Ver o que inclui", pelo mesmo mecanismo (classe .aberto) que já
     abre os cartões de dado e de pessoa da equipe. */
  /* Itens sempre visíveis no celular também, igual ao desktop: sem botão
     "Ver o que inclui" a mais, só a CTA que leva à página do serviço. */

  /* ====================================================================
     HERO NO CELULAR : a foto ocupa a primeira tela, os dados caem fora dela
     ====================================================================
     No computador o hero é uma caixa de 1560px com os três dados espalhados
     ao longo da água e do barco. No celular essa mesma caixa fazia a foto
     deitada aparecer em 18% da largura: sumiam o barco, a mãe e as crianças.
     Aqui a foto passa a cobrir exatamente uma tela e os dados descem para o
     marrom, o que devolve o recorte para 35% mesmo com a foto atual.
     Nada disso toca no computador: tudo vive dentro do bloco de 768px.  */

  /* A ALTURA DA FOTO NÍTIDA É O LIMITE DO ZOOM, e sai de uma conta.
     A foto é deitada (2000x1500) e as pessoas ocupam de x=545 (a mão da menina
     de bolinhas) a x=1930 (o cotovelo erguido da agente): 1406px de largura.
     Com object-fit:cover numa caixa de Lpx de largura, a janela visível da
     foto tem L x 1500 / altura. Igualando a 1406: altura = largura x 1,067.
     Daí 106vw: é o zoom máximo em que NINGUÉM é cortado, em qualquer celular.
     Aumentar esse número corta a mão da menina e o braço da agente.
     Medido e conferido recortando a foto em 07/08/2026. */
  #hero{--foto-h:min(106vw,430px);min-height:0;background:var(--marrom)}

  /* O FUNDO É A PRÓPRIA FOTO, desfocada e escurecida, cobrindo o hero inteiro:
     a faixa nítida em cima, o texto e os dados por baixo. Assim nada do hero
     pousa em cor chapada, e a Lei 3 continua valendo (o texto vive dentro da
     imagem) mesmo depois que a foto nítida termina. */
  /* O desfoque NÃO é filtro. `agente-rio-barco-fundo.jpg` é a mesma foto salva
     com 48x36 pixels (2 KB); o navegador estica para a tela inteira e o próprio
     escalonamento produz o borrão, de graça.

     A primeira versão usava `filter:blur(40px)` mais `transform:scale(1.15)`
     numa camada de 375x1462. Isso é caríssimo, e a camada de composição do
     navegador se perdia: a página inteira aparecia deslocada uns 19px para a
     direita e cortada, INCLUSIVE o cabeçalho fixo, com o crédito duplicado.
     Sem filtro e sem transform, o problema não existe. Não reintroduzir. */
  #hero::before{
    content:"";position:absolute;inset:0;z-index:-3;
    background:
      linear-gradient(rgba(28,14,3,.70), rgba(28,14,3,.84)),
      url("../img/gerada/agente-rio-barco-fundo.jpg") center 42%/cover no-repeat;
  }
  #hero .sobre-foto__img{
    height:var(--foto-h);bottom:auto;
    /* 90% na horizontal centra a janela nas pessoas: x de 535 a 1941. */
    object-position:90% center;
  }
  /* O véu vive só na faixa nítida, e só nas pontas: o miolo da foto, onde
     estão os rostos, fica com cor e luz cheias (Lei 5). O escurecimento do pé
     costura a foto nítida com o desfoque que vem embaixo. */
  #hero::after{
    height:var(--foto-h);bottom:auto;
    background:linear-gradient(180deg,
      rgba(28,14,3,.52) 0%,      /* topo: só o bastante para o logo e o menu */
      rgba(28,14,3,0)   26%,
      rgba(28,14,3,0)   64%,     /* o miolo limpo */
      rgba(28,14,3,.80) 100%);   /* o pé, costurando com o desfoque */
  }
  #hero .sobre-foto__c{min-height:0;padding-top:0;padding-bottom:clamp(36px,8vw,56px)}
  #hero .hero__texto{
    min-height:0;display:flex;flex-direction:column;
    padding-top:calc(var(--foto-h) + clamp(26px,6vw,40px));
    padding-bottom:clamp(30px,7vw,44px);
  }
  #hero > .legenda{top:var(--foto-h);bottom:auto;transform:translateY(-100%)}

  /* A ASSINATURA: a linha da Rede desce para o pé da foto e vira o bloco que
     fecha as peças do @paaps.brasil: logo com os pontinhos, descritivo miúdo. */
  #hero h1{order:1}
  #hero .hero__oferta{
    order:2;font-size:1.1875rem;line-height:1.5;max-width:none;margin-top:1.1em;
  }
  #hero .hero__sub{
    order:3;display:flex;flex-direction:column;align-items:center;gap:9px;
    text-align:center;margin:0;padding-top:clamp(30px,7vw,46px);max-width:none;
    font-size:.66rem;letter-spacing:.05em;color:rgba(245,241,225,.88);
  }
  #hero .hero__sub__pt{display:none}   /* os dois pontos ficam órfãos em assinatura */
  #hero .hero__logo{height:40px;width:auto}

  /* OS TRÊS DADOS, já fora da foto, em caixinhas leves sobre o marrom.
     1,3rem a 1,5rem dá 21px em tela de 375px e 20,2px em tela de 360px. Foi
     medido: é o maior corpo em que os três títulos fecham em no máximo duas
     linhas. "Quase 10 em cada 10" fecha em uma. */
  .sobre-foto--alto .prova{row-gap:14px;margin-top:0}
  #hero .prova{
    grid-template-columns:1fr;padding-top:clamp(34px,8vw,52px);padding-bottom:0;
  }
  #hero .prova .dado{
    background:rgba(245,241,225,.055);border:1px solid rgba(245,241,225,.13);
    border-radius:var(--raio);padding:clamp(24px,6vw,32px) 18px;text-align:center;
  }
  #hero .prova .dado__n{font-size:clamp(1.3rem,5.6vw,1.5rem)}
  #hero .prova .dado__l{max-width:34ch;margin-left:auto;margin-right:auto}
  #hero .prova .grad{justify-items:center}

  /* FOTO DE TELA CHEIA (bloco das mulheres): a foto é deitada 3:2 e rendia só
     251px de altura, enquanto o bloco de texto tem 384px. Sobravam 133px
     sangrando para cima, por cima dos dados do bloco anterior. Foto documental
     de terceiro não se regera, então segue o caminho combinado para o acervo do
     Radilson: foto grande, título por cima, cedendo borda. */
  .foto-inteira > img{
    height:clamp(470px,66svh,560px);object-fit:cover;object-position:50% 34%;
  }
  .foto-inteira::after{height:72%}
}
@media (max-width:480px){
  .sobre-foto{min-height:100svh}
  .rodape__grade{grid-template-columns:1fr}
  .mural{grid-template-columns:repeat(3,1fr)}
  /* Rodapé: as 3 colunas empilhadas ficavam altas demais no celular. */
  .rodape{padding-block:32px 24px}
  .rodape__grade{gap:26px}
  .rodape h4{margin-bottom:.8em}
  .rodape ul{gap:7px}
}

@media print{
  .topo,.menu__botao,.form{display:none}
  body{background:#fff;color:#000}
}