/* ============================================================
   INPRÓS v2 — componentes das PÁGINAS INTERNAS (paginas.css)
   Carregue depois de base.css. A página usa <html class="sem-js pagina">.

   Capítulos: cada seção diz a sua cor em data-fundo:
   - noite : transparente; o fundo é o da cena (noite) e as partículas
             aparecem (data-cena="forma@ancora:preset" diz a figura);
   - papel : opaco, tinta sobre papel (13.5:1);
   - azul  : opaco, Novembro Azul (branco 5.9:1).
   Sem WebGL, sem JS ou com movimento reduzido, tudo fica sobre
   fundo liso e completo (o <html> já é noite).

   Componentes: hero de página (migalha, título que se constrói),
   texto editorial, reconhecimentos (selos), fio da trajetória
   (vertical), tira de fotos, canais de contato, bloco PIX grande,
   links de página e posições das âncoras da cena.
   ============================================================ */

/* ---------- sem JS o cabeçalho não fica fixo (sem o tema por seção, ele cobriria o papel) ---------- */
html.pagina.sem-js .topo {
  position: absolute;
}

/* ---------- âncoras da cena (onde cada figura é desenhada) ---------- */
.pagina [data-ancora="ceu"] {
  left: 0;
  width: 100%;
  top: 80vh;
  height: 16vh;
}
.pagina [data-ancora="heroi"] {
  left: 53vw;
  width: 41vw;
  top: 13vh;
  height: 76vh;
}
.pagina [data-ancora="mapa"] {
  left: 56vw;
  width: 38vw;
  top: 16vh;
  height: 70vh;
}
.pagina [data-ancora="final"] {
  left: 58vw;
  width: 36vw;
  top: 14vh;
  height: 74vh;
}
.pagina [data-ancora="baixo"] {
  left: 0;
  width: 100%;
  top: 84vh;
  height: 11vh;
}
.pagina [data-ancora="rodape"] {
  left: 0;
  width: 100%;
  top: 78vh;
  height: 20vh;
}
/* sem WebGL: a marca em imagem, com a cor da luz */
.pagina .marca-estatica {
  position: fixed;
  z-index: var(--z-cena);
  height: 70vh;
  width: auto;
  right: 10vw;
  top: 15vh;
  opacity: 0.18;
  filter: invert(62%) sepia(40%) saturate(600%) hue-rotate(175deg);
  pointer-events: none;
}

/* ---------- capítulos ---------- */
.cap {
  position: relative;
}
[data-fundo="papel"] {
  --foco: #0b3d7a;
  background: var(--papel);
  color: var(--tinta);
}
[data-fundo="papel"] a,
[data-fundo="papel"] .link-seta {
  color: var(--tinta-link);
}
[data-fundo="papel"] a:hover {
  color: var(--tinta);
}
[data-fundo="azul"] {
  background: var(--novembro);
  color: var(--branco);
}
[data-fundo="azul"] a,
[data-fundo="azul"] .link-seta {
  color: var(--branco);
}
/* quando o capítulo claro encosta no escuro, a borda é um arco que sobe */
.cap--arco {
  border-radius: clamp(28px, 5vw, 80px) clamp(28px, 5vw, 80px) 0 0;
  margin-top: calc(-1 * clamp(28px, 5vw, 80px));
}
.cap--arco-baixo {
  border-radius: 0 0 clamp(28px, 5vw, 80px) clamp(28px, 5vw, 80px);
}

/* ============================================================
   Hero de página
   ============================================================ */
.pag-heroi {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--topo-h) + 6vh);
  padding-bottom: clamp(64px, 12vh, 140px);
}
.pag-heroi__corpo {
  display: grid;
  gap: clamp(18px, 3vh, 30px);
  justify-items: start;
}
.migalha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--branco-2);
}
.migalha li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.migalha li + li::before {
  content: "/";
  color: var(--branco-2);
  opacity: 0.7;
}
.migalha a {
  color: var(--branco);
  text-decoration: none;
  padding-block: 8px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 100% 1px no-repeat;
}
.migalha a:hover {
  color: var(--luz);
}
.migalha [aria-current] {
  color: var(--luz);
}
.pag-titulo {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(4.6rem, 1.4rem + 11.6vw, 15.5rem);
  line-height: 0.94; /* ≥ 0.94: o acento do Ó de INPRÓS não encosta na linha de cima */
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 7.6em;
}
.pag-titulo--longo {
  font-size: clamp(3.8rem, 1rem + 9vw, 12.5rem);
  max-width: 6.2em;
}
.pag-heroi__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--branco-2);
  max-width: 34ch;
}
.pag-heroi .acoes {
  margin-top: 6px;
}
.pag-rolar {
  position: absolute;
  right: var(--gutter);
  bottom: 26px;
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--branco-2);
}
.cinema .pag-rolar {
  display: flex;
}
.pag-rolar i {
  width: 1.5px;
  height: 34px;
  background: linear-gradient(var(--luz), transparent);
  animation: pag-rolar 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes pag-rolar {
  0% {
    transform: scaleY(0);
  }
  55% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
/* título que se constrói: cada letra numa máscara própria */
.pag-titulo .letra {
  display: inline-block;
  will-change: transform;
}
.pag-titulo .linha-split {
  overflow: clip;
  /* em cima: acentos (Ó); embaixo: descendentes (g, p, q, ç) */
  padding-block: 0.17em 0.24em;
  margin-block: -0.17em -0.24em;
}

/* ============================================================
   Texto editorial (papel) e reconhecimentos
   ============================================================ */
.pag-papel {
  padding-block: clamp(80px, 16vh, 190px) clamp(80px, 15vh, 180px);
}
/* o símbolo da marca acompanha a leitura, fixo à esquerda do texto */
.editorial-grade {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(24px, 4vw, 72px);
}
.editorial__lado {
  position: relative;
}
.editorial__marca {
  position: sticky;
  top: 24vh;
  display: block;
  width: clamp(64px, 7.4vw, 128px);
  height: auto;
  aspect-ratio: 288 / 422;
  margin-left: auto;
  color: var(--tinta);
}
.editorial {
  font-size: clamp(1.35rem, 0.9rem + 1.3vw, 2.2rem);
  line-height: 1.42;
  font-weight: 400;
  max-width: 38ch;
  text-wrap: pretty;
}
.editorial strong,
.pag-paragrafo strong {
  font-weight: 700;
}
.pag-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: clamp(28px, 5vh, 48px);
}
.reconhecimento {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: center;
  margin-top: clamp(72px, 14vh, 160px);
  padding-top: clamp(36px, 6vh, 64px);
  border-top: 1px solid rgba(8, 34, 58, 0.2);
}
.reconhecimento__selos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}
.reconhecimento__selo {
  width: clamp(132px, 13vw, 190px);
  height: auto;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(8, 34, 58, 0.18);
  transform: rotate(-7deg);
}
.reconhecimento__nfg {
  width: clamp(120px, 11vw, 168px);
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 12px 34px rgba(8, 34, 58, 0.12);
}
.reconhecimento__texto {
  font-size: var(--t-lead);
  line-height: 1.58;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ============================================================
   Texto sobre a noite, com a figura da cena ao lado
   ============================================================ */
.pag-texto {
  padding-block: clamp(96px, 18vh, 210px);
}
.pag-texto__coluna {
  max-width: 600px;
  display: grid;
  gap: clamp(26px, 4vh, 40px);
}
.pag-paragrafo {
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.6;
  color: var(--branco);
  text-wrap: pretty;
}
.pag-paragrafo strong {
  color: var(--luz-forte);
}
.pag-paragrafo + .pag-paragrafo {
  padding-top: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--linha);
}
.pag-texto .link-seta {
  justify-self: start;
}

/* ============================================================
   Fio da trajetória (vertical): a linha se desenha com a rolagem,
   os anos em contorno se preenchem ao passar pelo meio da tela
   ============================================================ */
.trajeto {
  padding-block: clamp(96px, 16vh, 190px) clamp(80px, 14vh, 160px);
  overflow-x: clip;
}
.trajeto__cab .h2 {
  max-width: 6.2em;
}
.trajeto__sub {
  margin-top: 22px;
  max-width: 30ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--branco-azul);
}
.fio {
  --fio-x: 6px;
  position: relative;
  margin-top: clamp(56px, 10vh, 120px);
}
.fio::before,
.fio__progresso {
  content: "";
  position: absolute;
  left: var(--fio-x);
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(243, 247, 250, 0.32);
}
.fio__progresso {
  width: 2px;
  margin-left: -0.25px;
  background: var(--branco);
  transform-origin: top;
  transform: scaleY(1);
}
.fio__marco,
.fio__peca {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px clamp(32px, 5vw, 96px);
  padding: clamp(34px, 6vh, 72px) 0 clamp(34px, 6vh, 72px) calc(var(--fio-x) + clamp(28px, 4vw, 56px));
}
.fio__marco::before {
  /* ponto sobre o fio */
  content: "";
  position: absolute;
  left: calc(var(--fio-x) - 5px);
  /* no meio da altura do ano (o ponto usa o mesmo font-size do ano para medir em em) */
  top: calc(clamp(34px, 6vh, 72px) + 0.41em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--novembro);
  border: 2px solid var(--branco);
  font-size: clamp(4.6rem, 1.6rem + 8.6vw, 13.5rem);
}
.fio__marco--chave::before {
  background: var(--branco);
  box-shadow: 0 0 0 6px rgba(243, 247, 250, 0.22);
}
.fio__ano {
  position: relative;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(4.6rem, 1.6rem + 8.6vw, 13.5rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}
.fio__cheio {
  display: none;
}
.fio__texto {
  align-self: center;
  max-width: 52ch;
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--branco);
}
.fio__texto p + p {
  margin-top: 0.9em;
}
.fio__marco--chave .fio__texto {
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.3rem);
}
/* com movimento: ano em contorno que se preenche */
.cinema .fio__contorno {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--branco);
}
.cinema .fio__cheio {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--branco);
  clip-path: inset(0 100% 0 0);
}
.cinema .fio__progresso {
  transform: scaleY(0);
}
/* peças de arquivo entre os marcos, como documentos sobre a mesa */
.fio__peca figure {
  grid-column: 2;
  width: min(100%, 460px);
}
.fio__peca--esq figure {
  grid-column: 1;
  justify-self: end;
}
.fio__peca .arquivo__ver {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
  box-shadow: 0 30px 80px rgba(2, 20, 50, 0.45);
  transform: rotate(var(--giro, -2deg));
  transition: transform 0.8s var(--ease);
}
.fio__peca .arquivo__ver:hover {
  transform: rotate(0deg) scale(1.02);
}
.fio__peca img {
  width: 100%;
}
.fio__peca figcaption {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--branco);
}

/* ============================================================
   Tira de fotos reais (originais de 420 px: nenhuma passa de 420 px)
   ============================================================ */
.tira-sec {
  padding-block: clamp(96px, 16vh, 180px) clamp(64px, 10vh, 120px);
}
.tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 420px));
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: start;
}
.tira .foto:nth-child(3n + 2) {
  margin-top: 9vh;
}
.tira .foto:nth-child(3n) {
  margin-top: 4vh;
}
.foto {
  position: relative;
}
.foto__ver {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--noite-2);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
}
.foto__ver img {
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease);
}
.foto__ver:hover img {
  transform: scale(1.04);
}
.foto__legenda {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - 20px);
  padding: 7px 12px 6px 10px;
  background: var(--noite);
  border-radius: 0 3px 0 3px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.85rem + 0.45vw, 1.35rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--branco);
  pointer-events: none;
}
.tira-sec .pag-links {
  justify-content: center;
  margin-top: clamp(48px, 9vh, 96px);
}
.tira-sec .link-seta {
  color: var(--luz);
}

/* ============================================================
   Contato: canais gigantes
   ============================================================ */
.canais-sec {
  padding-block: clamp(40px, 8vh, 96px) clamp(80px, 12vh, 150px);
}
.canais {
  border-top: 1px solid var(--linha-forte);
}
.canal {
  border-bottom: 1px solid var(--linha-forte);
}
.canal__link,
.canal__fixo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) minmax(0, 10fr) auto;
  align-items: center;
  gap: 8px clamp(18px, 3vw, 48px);
  padding: clamp(22px, 4.2vh, 44px) clamp(8px, 1.4vw, 22px);
  color: var(--branco);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
}
.canal__link::before {
  /* preenchimento que sobe ao apontar */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--luz);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease);
}
.canal__link:hover,
.canal__link:focus-visible {
  color: var(--noite);
}
.canal__link:hover::before,
.canal__link:focus-visible::before {
  transform: scaleY(1);
}
.canal__link:focus-visible {
  /* o fundo vira luz: o anel de foco passa a ser da cor da noite (contraste 9:1) */
  outline: 3px solid var(--noite);
  outline-offset: -8px;
  border-radius: 0;
}
.canal__rotulo {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--branco-2);
  transition: color 0.4s;
}
.canal__link:hover .canal__rotulo,
.canal__link:focus-visible .canal__rotulo {
  color: var(--noite);
}
.canal__valor {
  white-space: nowrap;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2rem, 0.55rem + 6.2vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  transition: font-weight 0.6s var(--ease);
}
.canal__valor--email {
  font-size: clamp(1.7rem, 0.3rem + 6vw, 7.4rem);
  overflow-wrap: normal;
}
.canal__link:hover .canal__valor {
  font-weight: 900;
}
.canal__seta {
  position: relative;
  width: clamp(44px, 4vw, 64px);
  height: clamp(44px, 4vw, 64px);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: transform 0.6s var(--ease);
}
.canal__seta::before,
.canal__seta::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.canal__seta::before {
  left: 28%;
  right: 28%;
  top: 50%;
  height: 1.5px;
}
.canal__seta::after {
  right: 28%;
  top: 50%;
  width: 11px;
  height: 11px;
  background: none;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(1px, -50%) rotate(45deg);
  transform-origin: 70% 30%;
}
.canal__link:hover .canal__seta {
  transform: rotate(-45deg);
}
.canal__fixo .canal__valor {
  color: var(--branco);
}

/* ============================================================
   PIX grande (Contato)
   ============================================================ */
.doacao {
  padding-block: clamp(96px, 16vh, 190px);
  overflow: clip;
}
/* o símbolo gigante, em branco a 9%, gira devagar com a rolagem (decorativo) */
.doacao__marca {
  position: absolute;
  right: -3vw;
  top: 50%;
  width: auto;
  height: 118%;
  aspect-ratio: 288 / 422;
  color: rgba(243, 247, 250, 0.09);
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}
.doacao__grade {
  position: relative;
}
.doacao__grade {
  display: grid;
  gap: clamp(28px, 5vh, 48px);
  justify-items: start;
}
.doacao .h2 {
  max-width: 7em;
}
.doacao__chave {
  container-type: inline-size; /* a chave mede a largura disponível */
  display: grid;
  gap: 10px;
  width: 100%;
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid rgba(243, 247, 250, 0.4);
}
.doacao__rotulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--branco-azul);
}
.doacao__digitos {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  /* a chave tem ~7,4 em de largura: 13cqi garante que cabe numa linha só, de 360 px a 1920 px */
  font-size: min(12.5rem, 13cqi);
  line-height: 0.9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
  white-space: nowrap;
  /* faixa de luz que atravessa os dígitos quando a chave é copiada */
  background: linear-gradient(100deg, var(--branco) 40%, #b4dcf7 50%, var(--branco) 60%) 160% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.pix--copiado .doacao__digitos {
  -webkit-text-fill-color: transparent;
  animation: pix-luz 1.2s var(--ease) 1;
}
@keyframes pix-luz {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}
.doacao .acoes {
  margin-top: 6px;
}
.doacao .pix__aviso {
  color: var(--branco);
  min-height: 1.6em;
}
.doacao .btn--linha {
  border-color: rgba(243, 247, 250, 0.6);
  background: rgba(3, 17, 32, 0.18);
}
.doacao.pix--destaque .doacao__chave {
  border-top-color: var(--branco);
}

/* ============================================================
   Junte-se nas páginas (bloco comum: base.css)
   ============================================================ */
.pagina .apoiar .contato__whats {
  margin-top: 22px;
}

/* ============================================================
   Celular
   ============================================================ */
@media (max-width: 899px) {
  .pagina [data-ancora="heroi"] {
    left: 12vw;
    width: 76vw;
    top: calc(var(--topo-h) + 2vh);
    height: 38vh;
  }
  .pagina [data-ancora="mapa"] {
    left: 8vw;
    width: 84vw;
    top: calc(var(--topo-h) + 2vh);
    height: 36vh;
  }
  .pagina [data-ancora="final"] {
    left: 20vw;
    width: 60vw;
    top: calc(var(--topo-h) + 2vh);
    height: 34vh;
  }
  .pagina [data-ancora="baixo"] {
    top: 86vh;
    height: 9vh;
  }
  .pagina .marca-estatica {
    height: 32vh;
    right: 50%;
    transform: translateX(50%);
    top: calc(var(--topo-h) + 3vh);
  }
  .cena-ok .pag-heroi,
  .pagina:not(.sem-cena):not(.sem-js) .pag-heroi {
    padding-top: calc(var(--topo-h) + 42vh);
    align-items: flex-start;
  }
  .pag-heroi {
    padding-bottom: 72px;
  }
  .pag-rolar {
    display: none !important;
  }
  .reconhecimento {
    grid-template-columns: 1fr;
  }
  .editorial-grade {
    grid-template-columns: 1fr;
  }
  .editorial__marca {
    position: static;
    width: 46px;
    margin: 0;
  }
  .doacao__marca {
    height: 70%;
    top: auto;
    bottom: -6%;
    transform: rotate(-8deg);
  }
  .reconhecimento__selos {
    justify-content: flex-start;
    order: 2;
  }
  /* o mapa fica no alto da tela; o texto passa por baixo dele */
  .cena-ok .pag-texto--mapa {
    padding-top: calc(var(--topo-h) + 44vh);
  }
  .fio {
    --fio-x: 4px;
  }
  .fio__marco,
  .fio__peca {
    grid-template-columns: minmax(0, 1fr);
    padding-left: calc(var(--fio-x) + 26px);
  }
  .fio__ano,
  .fio__marco::before {
    font-size: clamp(3.8rem, 24vw, 6.4rem);
  }
  .fio__peca figure,
  .fio__peca--esq figure {
    grid-column: 1;
    justify-self: start;
  }
  .tira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tira .foto:nth-child(n) {
    margin-top: 0;
  }
  .tira .foto:nth-child(2n) {
    margin-top: 5vh;
  }
  /* no celular a legenda sai de cima da foto (as longas cobriam a imagem) e fica embaixo */
  .foto__legenda {
    position: static;
    display: block;
    max-width: none;
    margin-top: 6px;
    padding: 0;
    background: none;
    font-size: 0.95rem;
    line-height: 1.15;
  }
  .canal__link,
  .canal__fixo {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 4px;
  }
  .canal__rotulo {
    grid-column: 1 / -1;
  }
  .cena-ok .pagina .apoiar,
  .pagina.cena-ok .apoiar {
    padding-top: calc(var(--topo-h) + 40vh);
  }
}

@media (max-width: 560px) {
  .pag-heroi .acoes,
  .doacao .acoes {
    width: 100%;
  }
  .pag-heroi .acoes .btn,
  .doacao .acoes .btn {
    width: 100%;
  }
  .canal__seta {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pag-rolar {
    display: none !important;
  }
}

/* notebooks (as regras gerais estão em base.css; o título de página fica aqui porque
   paginas.css carrega depois e precisa vencer a regra base de .pag-titulo) */
@media (min-width: 900px) and (max-width: 1700px) {
  .pag-titulo {
    font-size: clamp(4rem, 1rem + 9vw, 12.5rem);
  }
  .pag-titulo--longo {
    font-size: clamp(3.4rem, 0.8rem + 7vw, 10rem);
  }
  .pag-heroi {
    padding-bottom: clamp(48px, 9vh, 110px);
  }
}
@media (min-width: 900px) and (max-height: 820px) {
  .pag-titulo {
    font-size: min(clamp(4rem, 1rem + 9vw, 12.5rem), 20vh);
  }
  .pag-titulo--longo {
    font-size: min(clamp(3.4rem, 0.8rem + 7vw, 10rem), 15vh);
  }
}

/* celular deitado (paisagem, até 520 px de altura): com o arranjo de pé, a figura ocupava
   o alto da tela e o título (até 120 px) ficava abaixo da dobra. Aqui o hero volta ao
   arranjo do desktop (texto à esquerda, figura à direita) e o título é limitado pela altura.
   O blog fica como está (o rio corre por cima da tela inteira). */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .pagina .ancoras [data-ancora="heroi"],
  .pagina .ancoras [data-ancora="mapa"],
  .pagina .ancoras [data-ancora="pilares"],
  .pagina .ancoras [data-ancora="trio"] {
    left: 58vw;
    width: 36vw;
    top: calc(var(--topo-h) + 2vh);
    height: calc(94vh - var(--topo-h));
  }
  .pagina .marca-estatica {
    height: 66vh;
    right: 10vw;
    transform: none;
    top: calc(var(--topo-h) + 4vh);
  }
  .cena-ok .pag-heroi:not(.blog-heroi),
  .pagina:not(.sem-cena):not(.sem-js) .pag-heroi:not(.blog-heroi),
  .pag-heroi:not(.blog-heroi) {
    padding-top: calc(var(--topo-h) + 4vh);
    align-items: flex-end;
  }
  .pag-heroi__corpo {
    padding-right: 40vw; /* a coluna da figura */
  }
  .pag-heroi .pag-heroi__corpo .pag-titulo {
    font-size: 20vh;
    max-width: 100%;
  }
  .pag-heroi .pag-heroi__corpo .pag-titulo--longo {
    font-size: 14vh;
  }
  .pag-heroi .pag-heroi__corpo .pa-titulo {
    font-size: min(clamp(2.9rem, 0.9rem + 5.3vw, 6.9rem), 13vh); /* título de 4 linhas */
  }
  /* texto que passa sob o mapa: fica na coluna da esquerda, sem o respiro de cima */
  .cena-ok .pag-texto--mapa {
    padding-top: clamp(96px, 18vh, 210px);
    padding-right: 40vw;
  }
}