/* ═══════════════════════════════════════════════════════════
   MINISTÉRIO HOMENS DE ORAÇÃO
   Tipografia derivada do logo (traço branco sobre preto); cor,
   inteira, medida no banner já com o duotone aplicado.
   ═══════════════════════════════════════════════════════════ */

/* ── 0. FONTES ─────────────────────────────────────────────
   As duas famílias moram aqui dentro (assets/fonts/), e não mais
   no servidor do Google. Três coisas mudam com isso:

   1. some a corrente de espera. Antes o navegador precisava resolver
      dois domínios novos (fonts.googleapis.com e fonts.gstatic.com),
      abrir duas conexões seguras, baixar uma folha de estilo e só
      então descobrir o endereço do arquivo da fonte. Agora o arquivo
      é pedido junto com a página, na mesma conexão que já está aberta.
   2. os arquivos encolheram 43%. O Fraunces vem do Google com quatro
      eixos variáveis (opsz, wght, SOFT e WONK); a página fixa SOFT em
      0 e WONK em 1 e nunca mexe neles, então esses dois foram travados
      dentro do próprio arquivo. O eixo wght foi limitado a 400..800,
      que é a faixa que o site usa. O desenho não mudou: o desvio máximo
      medido foi de meio milésimo do quadratino, invisível a olho nu.
   3. o itálico do Schibsted Grotesk saiu: o itálico da página é sempre
      o do Fraunces (--f-escrita).

   Para atualizar as fontes um dia, o roteiro está no LEIA-ME.
   ─────────────────────────────────────────────────────────── */

/* Fraunces — display, manchetes e citações */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Schibsted Grotesk — texto corrido, menu, botões e etiquetas */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/schibsted-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/schibsted-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* cor: medida no banner como ele aparece na tela, ou seja, depois do
     duotone. O filtro reduz a fotografia a uma família só (matiz 38°),
     do quase-preto da nuvem à areia da luz do sol. É essa rampa que a
     interface usa inteira, e é por isso que nada aqui destoa da foto. */
  --breu:       #100F0B;   /* base: um degrau abaixo da sombra da foto */
  --noite:      #171712;   /* superfície elevada: a sombra da foto     */
  --pedra:      #201C13;   /* cartões                                  */
  --terra:      #453A24;   /* filetes e bordas                         */
  --terra-10:   #302819;
  --ouro:       #C19F63;   /* a luz do banner: ações, marcadores       */
  --ouro-claro: #E9C078;   /* alta-luz do duotone: texto de destaque   */
  --papel:      #F6ECE1;   /* texto principal                          */
  --cinza:      #A99C86;   /* texto secundário                         */
  --cinza-esc:  #7E735F;

  /* duotone das fotografias. O --duo-claro é o mesmo valor do --ouro-claro,
     e não por acaso: ele é o teto da rampa acima, o ponto mais claro que a
     multiplicação do duotone consegue produzir numa foto. */
  --duo-escuro: #101C26;
  --duo-claro:  #E9C078;

  /* tratamento do mapa: escurece o embed do Google para o tom da página.
     O sepia entrou junto com a paleta quente: sem ele o mapa ficava frio
     no meio de uma página inteira de matiz 38° */
  --mapa-tratamento: invert(92%) hue-rotate(180deg) sepia(.35) saturate(.7) contrast(.92) brightness(.94);

  /* tipografia: duas famílias, e nenhuma delas é o grotesco genérico do
     lockup antigo. Antes eram quatro (Archivo, Archivo, Newsreader, DM Mono).

     display  Fraunces, serifado de contraste alto. O monograma é um H de
              duas vigas em I, e viga em I é serifa: o tipo repete o capitel
              do traço em vez de brigar com ele. Serve também as citações,
              no itálico; foi ele que aposentou o Newsreader.
     texto    Schibsted Grotesk, grotesco de jornal: altura-x alta, formas
              quentes, feito para ser lido em corpo pequeno. É o texto
              corrido, os botões, o menu e as etiquetas.

     O DM Mono saiu inteiro. Fonte de código dá um sotaque técnico que não
     tem nada a ver com um ministério, e era ele que deixava botão e etiqueta
     com cara de terminal. O registro de etiqueta continua existindo, só que
     agora ele é feito de caixa alta, entreletra e peso, e não de uma terceira
     família. Por isso --f-dado sobrevive apontando para a mesma pilha: marca
     onde esse registro é usado e mantém o ponto único de troca. */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-texto:   "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-escrita: "Fraunces", Georgia, "Times New Roman", serif;
  --f-dado:    var(--f-texto);

  /* medidas */
  --shell:     78rem;
  --shell-pad: clamp(1.25rem, 5vw, 3rem);
  --altura-cab: 4.5rem;
  --r:         2px;   /* raio quase reto: ecoa o traço do logo */

  --transicao: 260ms cubic-bezier(.22,.61,.36,1);

  /* movimento do menu do celular. A curva é mais "solta" que a geral: sai
     rápido e frena longo, que é como um painel pesado se comporta. Abrir e
     fechar têm tempos diferentes de propósito — abrir é um gesto que se
     assiste, fechar é um que se quer imediato. */
  --menu-curva: cubic-bezier(.32,.72,0,1);
  --menu-abre:  400ms;
  --menu-fecha: 200ms;
}

/* ── 2. RESET ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:dark;
}

body{
  background:var(--breu);
  color:var(--papel);
  font-family:var(--f-texto);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.7;
  font-weight:400;
  /* o Fraunces é variável no eixo opsz: sem isto o corpo de 17px receberia
     o desenho da manchete (hastes finíssimas) e a manchete, o do corpo */
  font-optical-sizing:auto;
  /* os outros dois eixos do Fraunces, ditos uma vez só:
       SOFT 0  serifa em bisel, sem arredondar as pontas: é o que dá peso à
               manchete e faz o tipo rimar com o capitel da viga do monograma;
       WONK 1  liga as formas alternativas (o "g" de cauda aberta, o itálico
               cursivo das citações): é daqui que vem o caráter que faltava.
     Herda para a página inteira em vez de ser repetido regra a regra: eixo
     que a fonte não tem é simplesmente ignorado, então o Schibsted Grotesk
     atravessa esta linha sem efeito nenhum. E como wght não está na lista,
     os font-weight adiante continuam valendo normalmente. */
  font-variation-settings:"SOFT" 0, "WONK" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-wrap:break-word;   /* palavras longas nunca estouram o contêiner */
}

/* toque: sem atraso de duplo-toque e realce próprio no lugar do azul padrão */
a,button,[role="tab"],summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgb(193 159 99 / .22);
}

img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }

/* [hidden] precisa vencer os display:flex/grid declarados adiante */
[hidden]{ display:none !important; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
strong,b{ font-weight:700; }

:focus-visible{
  outline:2px solid var(--ouro-claro);
  outline-offset:3px;
  border-radius:var(--r);
}

::selection{ background:var(--ouro); color:#141109; }

/* ── 3. TIPOGRAFIA ─────────────────────────────────────── */
/* o serifado pede menos aperto que o grotesco de antes: as serifas já
   fecham o vão entre as letras, e o -.022em de outrora as encavalava */
.h2{
  font-family:var(--f-display);
  font-size:clamp(1.95rem, 1.1rem + 4.1vw, 4rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.012em;
  text-wrap:balance;
}

.lead{
  font-size:clamp(1.06rem, 1rem + .45vw, 1.28rem);
  line-height:1.62;
  color:var(--cinza);
  max-width:52ch;
}

p{ text-wrap:pretty; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--f-dado);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ouro-claro);
  margin-bottom:1.4rem;
}

/* viga em I: motivo estrutural do monograma */
.beam{
  position:relative;
  flex:none;
  width:.7rem;
  height:1.05rem;
}
.beam::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:2px; transform:translateX(-50%);
  background:currentColor;
}
.beam::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:currentColor;
  box-shadow:0 calc(1.05rem - 2px) 0 currentColor;
}
.beam--sm{ width:.55rem; height:.78rem; }
.beam--sm::after{ box-shadow:0 calc(.78rem - 2px) 0 currentColor; }

/* ── 4. UTILITÁRIOS ────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.7rem 1.1rem;
  background:var(--ouro); color:#141109;
  font-family:var(--f-dado); font-weight:500; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform var(--transicao);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* botões */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--papel);
  --btn-bd:var(--terra);
  /* z-index:0 cria contexto de empilhamento: o preenchimento (::after,
     z-index:-1) fica acima do fundo do botão e abaixo do texto, que é
     um nó de texto e por isso não poderia ser empilhado por conta própria. */
  position:relative;
  z-index:0;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.95rem 1.7rem;
  min-height:3rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r);
  font-family:var(--f-dado);
  font-size:.8rem;
  /* o rótulo do botão é o texto mais isolado da página, sem vizinhos que
     lhe deem escala, e agora sem a bengala da largura fixa do mono. 600
     devolve a firmeza que a caixa alta pequena perde no grotesco. */
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-align:center;
  overflow:hidden;
  transition:color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:var(--ouro-claro);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform var(--transicao);
}
.btn:hover::after,.btn:focus-visible::after{ transform:scaleY(1); }
.btn:hover,.btn:focus-visible{ color:#141109; border-color:var(--ouro-claro); }

/* o peso do rótulo já vem do .btn: repetir aqui só criaria dois lugares
   para mudar a mesma coisa */
.btn--solid{ --btn-bg:var(--ouro); --btn-fg:#141109; --btn-bd:var(--ouro); }
.btn--ghost{ --btn-bd:#5D4F31; }
.btn--sm{ padding:.6rem 1.1rem; min-height:2.5rem; font-size:.72rem; }

/* duotone das fotografias: sombra azul-crepúsculo, alta-luz dourada */
.duo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--duo-escuro);
}
.duo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(.84);
}
.duo::before,.duo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.duo::before{ background:var(--duo-escuro); mix-blend-mode:lighten; }
.duo::after{  background:var(--duo-claro);  mix-blend-mode:multiply; }

.duo--suave img{ filter:grayscale(.6) contrast(1.02) brightness(.9); }
.duo--suave::before{ opacity:.72; }
.duo--suave::after{ opacity:.62; }

.framed{ border:1px solid var(--terra); border-radius:var(--r); }

/* revelação ao rolar */
.js [data-reveal]{
  opacity:0;
  transform:translateY(1.15rem);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--atraso,0ms);
}
.js [data-reveal].is-visivel{ opacity:1; transform:none; }

/* ── 5. CABEÇALHO ──────────────────────────────────────── */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  min-height:var(--altura-cab);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--transicao), border-color var(--transicao), backdrop-filter var(--transicao);
}
.site-header.is-fixo{
  background:rgb(16 15 11 / .88);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--terra-10);
}

.site-header__inner{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  /* o env() sustenta o recorte da tela no celular deitado: sem ele a marca
     desapareceria por baixo da faixa do aparelho */
  padding-inline:
    max(var(--shell-pad), env(safe-area-inset-left))
    max(var(--shell-pad), env(safe-area-inset-right));
  display:flex; align-items:center; gap:1.5rem;
}

/* A MARCA: componente único, usado no cabeçalho e no rodapé.
   Do lockup só entra o monograma: o nome é composto aqui, em Fraunces, e não
   mais colado como imagem. Ganha-se nitidez em qualquer densidade de tela,
   texto selecionável e lido em voz alta, e o rodapé deixa de baixar um PNG
   de 900px só para escrever três palavras.
   A escala inteira pende de --marca-icone: o rodapé só troca essa medida. */
.brand{
  --marca-icone:2.1rem;
  position:relative; z-index:2;
  display:flex; align-items:center;
  gap:calc(var(--marca-icone) * .36);
  margin-inline-end:auto;
}
.brand__mark{ width:auto; height:var(--marca-icone); flex:none; }
/* o nome nunca quebra em duas linhas: ele encolhe pela --marca-icone */
.brand__text{ display:flex; flex-direction:column; line-height:1; white-space:nowrap; }
.brand__pre{
  font-family:var(--f-dado); font-weight:500;
  font-size:calc(var(--marca-icone) * .285);
  letter-spacing:.24em; text-transform:uppercase; color:var(--cinza-esc);
}
/* caixa alta serifada quer o contrário do aperto da manchete: sem um sopro
   de entreletra as serifas se tocam e o nome vira um bloco só */
.brand__name{
  font-family:var(--f-display);
  font-size:calc(var(--marca-icone) * .44);
  font-weight:700;
  letter-spacing:.045em; text-transform:uppercase;
  margin-top:calc(var(--marca-icone) * .13);
}

.nav__list{ display:flex; align-items:center; gap:1.65rem; }
.nav__list a{
  position:relative;
  font-family:var(--f-dado); font-weight:500;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cinza);
  padding-block:.4rem;
  transition:color var(--transicao);
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ouro-claro);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transicao);
}
.nav__list a:hover,.nav__list a:focus-visible,.nav__list a.is-ativo{ color:var(--papel); }
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list a.is-ativo::after{ transform:scaleX(1); }

.menu-toggle{ position:relative; z-index:2; display:none; align-items:center; gap:.6rem; padding:.6rem 0; }
.menu-toggle__label{
  font-family:var(--f-dado); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--papel);
}
.menu-toggle__bars{ display:block; width:1.4rem; flex:none; }
.menu-toggle__bars i{
  display:block; height:1.5px; background:var(--papel);
  /* translate e rotate separados (e não um transform só) para que o X se
     desmonte em dois tempos: primeiro desgira, depois as barras se afastam.
     Ao montar, a ordem se inverte — ver o bloco do celular mais abaixo. */
  translate:0 0;
  rotate:0deg;
  transition:rotate    170ms var(--menu-curva),
             translate 190ms var(--menu-curva) 110ms,
             opacity   var(--transicao);
}
.menu-toggle__bars i:first-child{ margin-bottom:.34rem; }

/* ── 6. HERO ───────────────────────────────────────────── */
.hero{
  position:relative;
  /* banner de tela cheia: a fotografia ocupa toda a altura da janela.
     o vh fica de reserva para navegadores sem suporte a svh. */
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:calc(var(--altura-cab) + 3rem) 0;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
/* o <picture> é inline por padrão: sem display:block o height:100% do <img>
   não resolve e o object-fit/object-position não têm efeito nenhum */
.hero__media picture{ display:block; height:100%; }
/* o recorte desce para manter o homem em oração dentro do quadro,
   e não só o céu */
.hero__media img{ width:100%; height:100%; object-position:center 78%; }
/* em tela larga o quadro é mais "esticado" que a foto: sobra recorte só na
   vertical, e o object-position horizontal não move mais o homem. A saída é
   alargar a caixa da imagem além do hero: o excedente escapa pela direita,
   o homem escorrega para lá e a esquerda continua preenchida.
   O max-width:none é obrigatório: o reset lá em cima (img{max-width:100%})
   anularia a largura maior sem deixar rastro.
   O limite de proporção não é enfeite: em janela alta demais (tablet em pé,
   a partir de ~1.25× mais alta que larga) o recorte já é lateral e o mesmo
   alargamento empurraria o homem para fora da tela. */
@media (min-width:761px) and (min-aspect-ratio:4/5){
  .hero__media img{ width:137%; max-width:none; }
}

/* com o banner em tela cheia, um degradê único escureceria a foto inteira:
   o véu é ancorado no canto inferior esquerdo, exatamente onde a manchete
   vive, e solta o céu e o homem em oração do lado direito. */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(102% 100% at 0% 62%,
      rgb(16 15 11 / .93) 0%,
      rgb(16 15 11 / .82) 26%,
      rgb(16 15 11 / .5)  48%,
      rgb(16 15 11 / .16) 70%,
      rgb(16 15 11 / 0)   90%),
    /* base: assenta a manchete e costura o hero com a seção seguinte */
    linear-gradient(to top,
      rgb(16 15 11 / .92) 0%, rgb(16 15 11 / .5) 12%, rgb(16 15 11 / 0) 36%),
    /* topo: mantém o cabeçalho legível quando o céu abre */
    linear-gradient(to bottom,
      rgb(16 15 11 / .74) 0%, rgb(16 15 11 / .3) 12%, rgb(16 15 11 / 0) 30%);
}

/* a manchete sobe para a faixa central-baixa do quadro: o vão do rodapé é o
   que a empurra para cima, mantendo o alinhamento pela base do bloco */
.hero__inner{ position:relative; z-index:2; padding-block:0 clamp(6rem,33vh,18rem); }
/* em telas baixas (notebook 13"/14") o mesmo 52vh encostaria a manchete no
   cabeçalho: aqui ela desce e devolve o respiro do topo */
@media (max-height:820px){
  .hero__inner{ padding-block:0 clamp(4rem,24vh,11rem); }
}

.hero__title{
  font-family:var(--f-display);
  /* o homem em oração ocupa a faixa dos 50% aos 75% da largura e, como não há
     recorte horizontal em telas largas, ele não sai do lugar: quem cede é o
     tipo. O teto de 4.9rem mantém a linha mais longa ("ORAÇÃO É A") terminando
     antes da mão erguida, deixando texto e figura em campos separados. */
  font-size:clamp(2.7rem, 7.6vw, 7.5rem);
  font-weight:800;
  /* no grotesco de antes cabia .85 e -.03em. O serifado tem serifa saindo do
     pé do R e do E: com a mesma entrelinha as linhas se tocariam, e com o
     mesmo aperto as serifas se sobreporiam. Ambos recuam. */
  line-height:.9;
  letter-spacing:-.014em;
  /* mesmo motivo do remate do manifesto: sem isto "ORAÇÃO É A" fecha e o
     "É" encosta no "A" */
  word-spacing:.1em;
  text-transform:uppercase;
  /* a manchete é o único conteúdo do hero: o espaçamento vem do inner */
  margin-bottom:0;
  /* seguro de leitura para o trecho que cruza o céu claro; o raio é curto
     para não ser cortado pela máscara de overflow das linhas */
  text-shadow:0 .02em .16em rgb(16 15 11 / .55);
}
/* O recorte da animação cortaria o til de ORAÇÃO e o acento de VITÓRIA:
   o padding amplia a máscara e a margem negativa devolve o entrelinhamento.
   A folga de baixo subiu junto com a troca de tipo: a cedilha do Ç no
   Fraunces desce bem mais que a do grotesco anterior. */
.hero__title .line{
  display:block; overflow:hidden;
  padding-block:.24em .18em;
  margin-block:-.24em -.18em;
}
.hero__title .line > span{ display:block; }
/* A manchete sobe sozinha, pela própria folha de estilo. Antes ela ficava
   escondida esperando o main.js baixar, rodar e pôr a classe .is-pronto no
   banner — e como em tela larga a manchete é o maior elemento da primeira
   tela, a velocidade da página passava a depender de um arquivo que não tem
   nada a ver com ela. Agora o texto começa a subir assim que a linha existe.
   O desenho é o mesmo: mesma distância, mesma curva, mesma escada de tempo. */
.js .hero__title .line > span{
  animation:manchete-sobe 1.05s cubic-bezier(.16,.84,.3,1) both;
}
.js .hero__title .line:nth-child(2) > span{ animation-delay:.1s; }
.js .hero__title .line:nth-child(3) > span{ animation-delay:.2s; }
@keyframes manchete-sobe{
  from{ transform:translateY(105%); }
  to  { transform:none; }
}
.hero__title-accent{ color:var(--ouro-claro); }

/* ── 7. SEÇÕES (base) ──────────────────────────────────── */
.section{
  position:relative;
  padding-block:clamp(4.5rem,9.5vw,8.5rem);
  scroll-margin-top:calc(var(--altura-cab) + 1.25rem);
}

/* ── 7b. CONVITE ───────────────────────────────────────── */
/* faixa curta logo abaixo do banner: só o convite, a data do próximo
   encontro e as duas ações. A contagem regressiva mora na seção do Monte. */
.section--convite-topo{
  padding-block:clamp(3.2rem,7vw,5.5rem);
  background:var(--noite);
  border-block:1px solid var(--terra-10);
}
.convocacao{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2.2rem,5vw,4rem);
  align-items:center;
}
.convocacao .h2{ margin-bottom:1.3rem; }

.convocacao__quando{
  padding-inline-start:clamp(1rem,2.2vw,1.5rem);
  border-inline-start:2px solid var(--ouro);
}
.convocacao__proximo{ display:flex; flex-direction:column; gap:.4rem; }
.convocacao__proximo-rotulo{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cinza-esc);
}
.convocacao__proximo-data{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem);
  font-weight:700;
  line-height:1.2; letter-spacing:-.015em;
  color:var(--papel);
}
/* o Intl devolve o dia da semana em minúsculas ("sexta-feira, 22 de agosto") */
.convocacao__proximo-data::first-letter{ text-transform:uppercase; }

/* cronômetro sem moldura: só os números, alinhados à data.
   O seletor carrega o .convocacao de propósito: sem ele, o .contagem
   da seção do Monte (declarado depois) devolveria o filete e o respiro. */
.convocacao .contagem--nu{ margin-top:1.1rem; padding-top:0; border-top:0; }
.contagem--nu .contagem__grade{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.1rem,3vw,2.1rem);
}
.contagem--nu .contagem__bloco{
  align-items:flex-start; gap:.2rem;
  padding:0;
  background:none; border:0;
}
.contagem--nu .contagem__num{
  font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);
  letter-spacing:-.02em;
}
.contagem--nu .contagem__agora{ margin-top:.85rem; }

/* ── 8. O CHAMADO ──────────────────────────────────────── */
/* ── 7c. O LUGAR ───────────────────────────────────────── */
/* faixa de mapa de ponta a ponta: sem .shell, sem título e sem respiro:
   o mapa é a seção inteira, emendando as duas seções vizinhas */
.section--lugar{
  scroll-margin-top:var(--altura-cab);
  background:var(--pedra);
  border-block:1px solid var(--terra-10);
}
.lugar__quadro{
  height:clamp(17rem,42vh,28rem);
  background:var(--pedra);
}
.lugar__mapa{
  display:block;
  width:100%; height:100%;
  border:0;
  /* apague esta linha para ver o mapa com as cores originais do Google */
  filter:var(--mapa-tratamento);
}
/* sem JavaScript o quadro que espera o endereço não tem serventia: quem
   aparece é o mapa do <noscript>, que já vem com o src escrito */
html:not(.js) .lugar__mapa[data-mapa]{ display:none; }

/* ── 8. O CHAMADO ──────────────────────────────────────── */
.section--chamado{ background:var(--breu); }
.chamado__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
/* entrelinha um pouco mais fechada que a do corpo (1,7) e medida mais curta:
   nesta coluna larga o 1,7 espalhava as linhas a ponto de o parágrafo perder
   o bloco. O vão entre parágrafos continua maior que o vão entre linhas, que
   é o que faz um separar do outro. */
.chamado__texto p{
  color:var(--cinza);
  line-height:1.58;
  margin-bottom:1rem;
  max-width:54ch;
}
.chamado__texto .h2{ margin-bottom:1.9rem; }
.chamado__texto strong{ color:var(--papel); }

.dialogo{
  margin-block:2.4rem;
  padding-inline-start:clamp(1.1rem,2.5vw,1.75rem);
  border-inline-start:1px solid var(--terra);
}
.dialogo__pergunta p{
  font-family:var(--f-escrita);
  font-style:italic;
  font-size:clamp(1.4rem,1rem + 2.1vw,2.15rem);
  line-height:1.25;
  color:var(--papel);
  margin-bottom:1.5rem;
  max-width:none;
}
.dialogo__resposta{ display:flex; flex-direction:column; gap:.55rem; }
.dialogo__intro{
  font-family:var(--f-dado); font-weight:500; font-size:.74rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cinza-esc);
}
/* especificidade elevada: vence o `.chamado__texto strong` declarado acima */
.dialogo .dialogo__palavra{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,1rem + 2.6vw,2.6rem);
  font-weight:800;
  line-height:1; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--ouro-claro);
}

.chamado__texto .chamado__fecho{ color:var(--papel); font-size:1.1rem; line-height:1.6; }

/* a segunda coluna do grid ficou de propósito vazia: é por ela que a foto da
   capa continua aparecendo enquanto a história é lida (ver .capa-longa) */

/* ── 9. PROPÓSITO: a escada que sobe ─────────────────── */
.section--proposito{ background:var(--noite); border-block:1px solid var(--terra-10); }
/* a abertura desta página lê na mesma régua de "o chamado" (item 8): mesma
   medida de 54ch, mesma entrelinha de 1,58 e o mesmo vão de 1rem entre os dois
   parágrafos. Antes o primeiro vinha no corpo cheio do .lead (20px/1,62) numa
   linha de 651px e o segundo caía para 15,7px numa cor mais apagada — dois
   registros diferentes, e o par se soltava um do outro. Agora o degrau entre
   eles é só de corpo (17,6 → 17px), e o destaque vem do <strong>, como lá. */
.proposito__topo > *{ max-width:54ch; }
.proposito__topo .h2{ margin-bottom:1.6rem; }
.proposito__topo .lead{
  font-size:1.1rem;
  line-height:1.58;
  max-width:54ch;
}
.proposito__nota{
  margin-top:1rem; max-width:54ch;
  color:var(--cinza);
  /* inherit, não 1rem: o corpo do site é um clamp (17px no desktop, 16,04px no
     celular) e é dele que os parágrafos de "o chamado" saem. Com 1rem fixo
     esta linha ficava sempre um pixel abaixo da régua da outra página. */
  font-size:inherit;
  line-height:1.58;
}
.proposito__nota strong{ color:var(--papel); }

/* o vão de entrada acompanha o do .dialogo em "o chamado" (2,4rem): o
   clamp de 4,5rem abria 72px entre a leitura e o primeiro degrau, e a escada
   parecia outra seção. Os degraus também se aproximam entre si. */
.escada{
  margin-top:clamp(2rem,3.2vw,2.8rem);
  display:flex; flex-direction:column; gap:clamp(.75rem,1.5vw,1.15rem);
  /* o teto desce de 2,1rem para 1,78rem: no topo da escada isto leva o último
     degrau de 51px para ~43px, a mesma escala do "HOMENS DE ORAÇÃO" da página
     do chamado (41,6px). Acima disso a linha era o maior tipo do site depois
     do banner, e ainda quebrava em duas. */
  --base:clamp(1.1rem,.5rem + 2.3vw,1.78rem);
}
.escada__degrau{
  display:flex; align-items:baseline; gap:clamp(.85rem,2vw,1.4rem);
  --atraso:calc(var(--i) * 120ms);
}
.escada__marca{
  flex:none;
  width:2px;
  height:calc(var(--base) * (1 + var(--i) * .26) * .95);
  background:linear-gradient(to bottom,var(--terra),var(--ouro));
  transform:translateY(.15em);
}
.escada__texto{
  font-family:var(--f-display);
  font-size:calc(var(--base) * (1 + var(--i) * .26));
  font-weight:600;
  line-height:1.16; letter-spacing:-.018em;
  color:var(--cinza);
  text-wrap:balance;
}
.escada__texto em{ font-style:normal; color:var(--papel); }
.escada__texto b{ font-weight:800; color:var(--papel); }
.escada__degrau:nth-child(2) .escada__texto{ color:#C6BCA8; }
.escada__degrau:nth-child(3) .escada__texto{ color:var(--papel); }
.escada__degrau:nth-child(3) .escada__texto b{ color:var(--ouro-claro); }

/* ── 10. MANIFESTO: a escada que desce ────────────────── */
.section--manifesto{ background:var(--breu); }
/* o .shell centraliza o que sobra da largura: limitar a leitura no próprio
   .shell empurrava o bloco para o meio da tela. O limite passa para os filhos,
   então a coluna nasce na mesma margem esquerda das outras seções. */
.manifesto__shell{ max-width:var(--shell); }
.manifesto__shell > *{ max-width:64rem; }
.manifesto__titulo{ margin-bottom:clamp(2.2rem,5vw,3.4rem); }

.descida{ display:flex; flex-direction:column; gap:clamp(.55rem,1.4vw,.95rem); }
.descida li{
  display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.1rem);
  margin-inline-start:calc(var(--i) * clamp(3px,1.05vw,26px));
  font-family:var(--f-display);
  font-size:clamp(1.22rem,.75rem + 1.95vw,2.05rem);
  font-weight:600;
  line-height:1.16; letter-spacing:-.015em;
  color:var(--papel);
  --atraso:calc(var(--i) * 65ms);
}
.descida li .beam{ color:var(--ouro); }
.descida li:nth-child(n+6){ color:#DBD3C4; }
.descida li:nth-child(n+8){ color:#C1B7A2; }

.manifesto__remate{
  margin-top:clamp(2.8rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--terra);
  font-family:var(--f-display);
  font-size:clamp(1.6rem,.9rem + 3.1vw,3.15rem);
  font-weight:800;
  line-height:1.1; letter-spacing:-.012em;
  /* o aperto negativo encolhe o espaço da palavra junto com as letras: em
     caixa alta serifada e pesada isso cola "DE SER" numa palavra só, e o
     word-spacing devolve o vão sem afrouxar a entreletra */
  word-spacing:.1em;
  text-transform:uppercase;
  color:#8C826D;
  text-wrap:balance;
}
.manifesto__remate strong{ color:var(--ouro-claro); font-weight:800; }

/* ── 11. ORAÇÃO NO MONTE ───────────────────────────────── */
.section--monte{
  overflow:hidden;
  padding-block:clamp(5rem,11vw,9.5rem);
  background:var(--breu);
}
.monte__media{ position:absolute; inset:0; z-index:0; }
.monte__media img{ width:100%; height:100%; }
.monte__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgb(16 15 11 / .78) 0%, rgb(16 15 11 / .5) 45%, rgb(16 15 11 / .9) 100%);
}
.monte__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.monte__cabeca .h2{ margin-bottom:1.4rem; }

.monte__painel{
  background:rgb(23 23 18 / .82);
  backdrop-filter:blur(10px);
  border:1px solid var(--terra);
  border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.4rem);
}

/* "Onde" ocupa a linha inteira enquanto houver só duas colunas */
.ficha{ display:grid; grid-template-columns:auto auto; gap:1.25rem 2rem; }
.ficha__item:nth-child(3){ grid-column:1 / -1; }
@media (min-width:761px){
  .ficha{ grid-template-columns:auto auto minmax(0,1fr); }
  .ficha__item:nth-child(3){ grid-column:auto; }
}
.ficha__item dt{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cinza-esc);
  margin-bottom:.4rem;
}
.ficha__item dd{
  font-family:var(--f-display);
  font-size:1.02rem; font-weight:700;
  line-height:1.3; color:var(--papel);
}
.ficha__sub{
  display:block; margin-top:.25rem;
  font-family:var(--f-dado); font-size:.72rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
  text-transform:none;
}

.contagem{
  margin-top:1.9rem; padding-top:1.7rem;
  border-top:1px solid var(--terra-10);
}
.contagem__rotulo{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cinza-esc);
  margin-bottom:1rem;
}
.contagem__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.contagem__bloco{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.85rem .35rem;
  background:rgb(69 58 36 / .28);
  border:1px solid var(--terra-10);
  border-radius:var(--r);
}
/* a contagem era o único lugar onde o mono trabalhava de verdade: os dígitos
   não dançavam a cada segundo. O tabular-nums faz o mesmo serviço no grotesco
   (largura fixa por algarismo) e o peso maior segura o corpo grande. */
.contagem__num{
  font-family:var(--f-dado); font-weight:600;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.35rem);
  line-height:1; color:var(--ouro-claro);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.contagem__uni{
  font-family:var(--f-dado); font-weight:500; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza-esc);
}
.contagem__agora{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem;
  font-family:var(--f-dado); font-weight:500; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ouro-claro);
}
.contagem__pulso{
  flex:none; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ouro);
  animation:pulsa 1.9s ease-in-out infinite;
}
@keyframes pulsa{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.78); } }

.monte__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.monte__acoes .btn{ flex:1 1 12rem; }
.monte__obs{
  margin-top:1rem;
  font-size:.82rem; line-height:1.5; color:var(--cinza-esc);
}

/* ── 12. ORAÇÃO DO DIA ─────────────────────────────────── */
.section--dia{ background:var(--noite); border-block:1px solid var(--terra-10); }

/* A oração de hoje não é mais um cartão pousado sobre a página: era a única
   seção do site em que a leitura vinha dentro de uma caixa, com moldura,
   barra de ouro e mais duas caixas por dentro. Agora ela é o texto da
   página, como a história em "o chamado" — quem separa os blocos é o
   espaço, um filete e a mudança de corpo, não a borda.
   A medida é a mesma da oração na capa (40rem ≈ as 44ch do chapéu), então
   os filetes terminam onde o parágrafo de cima termina, e ainda sobra a
   direita por onde a foto continua aparecendo (ver .capa-longa--dia). */
.dia{ max-width:40rem; }

/* Os dois blocos têm a mesma feitura: filete, rótulo e conteúdo, os três
   nascendo na margem da manchete. Antes cada um recuava de um jeito — o
   foco jogava o texto para depois do rótulo, o versículo empurrava tudo
   para dentro do filete lateral — e a coluna ficava com três começos
   diferentes. É a repetição que organiza; o itálico é que diz qual é qual. */
.dia__bloco{
  padding-top:clamp(1.25rem,2.4vw,1.6rem);
  border-top:1px solid var(--terra-10);
}
.dia__bloco + .dia__bloco{ margin-top:clamp(1.9rem,3.4vw,2.5rem); }
/* o rótulo cede a entreletra larga do .eyebrow de seção: aqui ele abre um
   bloco dentro da leitura, não uma seção da página */
.dia__rotulo{
  gap:.6rem;
  margin-bottom:.9rem;
  font-size:.7rem; letter-spacing:.16em;
  color:var(--ouro);
}
.dia__foco{
  font-size:1.02rem; line-height:1.6; color:var(--papel);
  max-width:52ch;
}

/* A Palavra de hoje. O painel escavado saiu e o filete lateral com ele: o
   que marca o versículo é o serifado em itálico, a única voz assim na
   página. Em cima vem a data — é o dia que ela marca —, embaixo o livro,
   o capítulo e a tradução. */
.dia__fala p{
  font-family:var(--f-escrita); font-style:italic;
  font-size:clamp(1.18rem,1rem + 1.05vw,1.6rem);
  line-height:1.42; letter-spacing:-.006em;
  color:var(--papel);
  max-width:40ch;
  text-wrap:pretty;
}
.dia__pe{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem;
  margin-top:1.05rem;
  font-family:var(--f-dado); font-weight:600; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.dia__ref{ font-style:normal; color:var(--ouro-claro); }
/* um traço curto separa a referência da tradução: não precisa de mais
   uma cor nem de um "·" solto no meio da caixa alta */
.dia__fonte{
  position:relative; padding-inline-start:1rem;
  font-weight:500; letter-spacing:.08em; color:var(--cinza-esc);
}
.dia__fonte::before{
  content:""; position:absolute; inset-inline-start:0; top:50%;
  width:.55rem; height:1px; background:var(--terra);
}

/* ── 12b. AS AÇÕES DO DIA ──────────────────────────────── */
/* sem filete: o botão não é um terceiro bloco de leitura, é o que se faz
   depois de ler os dois */
.dia__acoes{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(2rem,3.6vw,2.6rem);
}

/* ── 12c. OS DIAS QUE JÁ PASSARAM ──────────────────────── */
.section--anteriores{ background:var(--noite); border-block:1px solid var(--terra-10); }
.anteriores__cabeca{ margin-bottom:clamp(2.2rem,5vw,3.2rem); }
.anteriores__cabeca .h2{ margin-bottom:1.4rem; }
.rastro{ max-width:62rem; }

/* uma trilha, e não uma pilha de cartões: a linha vertical amarra os dias
   uns aos outros e o ponto marca onde cada Palavra caiu */
.rastro__lista{ border-inline-start:1px solid var(--terra-10); }
.rastro__item{
  position:relative;
  display:grid;
  gap:.5rem;
  padding:1.3rem 0 1.4rem clamp(1.15rem,3vw,2.1rem);
}
.rastro__item + .rastro__item{ border-top:1px solid var(--terra-10); }
.rastro__item::before{
  content:"";
  position:absolute; inset-inline-start:0; top:1.85rem;
  width:7px; height:7px; margin-inline-start:-4px;
  background:var(--noite);
  border:1px solid var(--terra);
  border-radius:50%;
}
/* o primeiro da lista é ontem: o mais perto de hoje, e o único aceso */
.rastro__item:first-child::before{
  background:var(--ouro); border-color:var(--ouro);
  box-shadow:0 0 0 4px rgb(193 159 99 / .14);
}
.rastro__data{
  font-family:var(--f-dado); font-weight:600; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza-esc);
  font-variant-numeric:tabular-nums;
}
.rastro__verso p{
  font-family:var(--f-escrita); font-style:italic;
  font-size:clamp(1.02rem,1rem + .35vw,1.16rem);
  line-height:1.55; color:#D5CCBC;
  max-width:52ch;
  text-wrap:pretty;
}
.rastro__ref{
  font-style:normal;
  font-family:var(--f-dado); font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ouro-claro);
}
.rastro__mais{ margin-top:1.7rem; }

/* da largura de um tablet em diante a data vira coluna e sai da frente do
   versículo: a leitura corre inteira pelo mesmo lado */
@media (min-width:48rem){
  .rastro__item{
    grid-template-columns:9.5rem minmax(0,1fr);
    column-gap:clamp(1.5rem,4vw,3rem);
    align-items:baseline;
  }
  .rastro__verso{ grid-column:2; grid-row:1; }
  .rastro__ref{ grid-column:2; }
  /* alinhada pela base, a data desce um pouco: o ponto desce com ela */
  .rastro__item::before{ top:2.1rem; }
}

/* ── 14. CHAMADA FINAL ─────────────────────────────────── */
.section--convite{ overflow:hidden; padding-block:clamp(5rem,11vw,9rem); }
.convite__media{ position:absolute; inset:0; z-index:0; }
.convite__media img{ width:100%; height:100%; }
.convite__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,  rgb(16 15 11 / .95) 0%, rgb(16 15 11 / .86) 42%, rgb(16 15 11 / .5) 100%),
    linear-gradient(to bottom, rgb(16 15 11 / .5) 0%, rgb(16 15 11 / .2) 40%, rgb(16 15 11 / .8) 100%);
}
/* mantém a margem da .shell (alinhada às demais seções) e limita só a
   largura de leitura: o degradê deste bloco escurece pela esquerda */
.convite__inner{ position:relative; z-index:2; }
.convite__inner > *{ max-width:44rem; }
.convite__titulo{ margin-bottom:1.4rem; }
.convite__linha{
  font-family:var(--f-escrita); font-style:italic;
  font-size:clamp(1.2rem,1rem + .95vw,1.6rem);
  line-height:1.45; color:var(--ouro-claro);
  margin-bottom:2rem;
  max-width:32ch;
}
.convite__lista{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.2rem;
}
.convite__lista li{
  padding:.5rem .95rem;
  border:1px solid var(--terra);
  border-radius:var(--r);
  background:rgb(23 23 18 / .55);
  font-family:var(--f-dado); font-weight:500; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}
.convite__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ── 15. RODAPÉ ────────────────────────────────────────── */
/* dois fins possíveis. Na capa, o rodapé é de assinatura: só as redes, sem uma
   palavra escrita — navegação, endereço e horário já foram ditos acima, e
   repeti-los aqui só alongava o fim. Nas páginas internas, quem fecha é o
   convite ao Monte, no lugar das redes. Sem ornamento: fecha liso. */
.rodape{
  position:relative;
  overflow:hidden;
  background:var(--noite);
  border-top:1px solid var(--terra-10);
  padding-block:clamp(2.4rem,5vw,3.4rem);
}
/* os ícones ficam declarados uma vez e são chamados por <use> */
.rodape__sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.rodape__redes{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:.85rem;
}
/* quadrado quase reto, como todo alvo do site (--r). O nome da rede vive só
   no aria-label: quem enxerga reconhece o ícone, quem navega por leitor de
   tela continua ouvindo "WhatsApp" */
.rodape__rede{
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem;
  color:var(--cinza);
  background:rgb(69 58 36 / .28);
  border:1px solid var(--terra-10);
  border-radius:var(--r);
  transition:color var(--transicao), background-color var(--transicao),
             border-color var(--transicao), transform var(--transicao);
}
.rodape__rede svg{ width:1.15rem; height:1.15rem; fill:currentColor; }
.rodape__rede:hover,.rodape__rede:focus-visible{
  color:#141109;
  background:var(--ouro-claro);
  border-color:var(--ouro-claro);
  transform:translateY(-2px);
}

/* rodapé das páginas internas: a convocação fecha a leitura. Mantém o fundo e
   o respiro que a faixa tinha quando ainda morava dentro do <main> */
.rodape--convite{
  background:var(--breu);
  padding-block:clamp(3.2rem,7vw,5.5rem);
}

/* ── 16b. MODO ORAÇÃO ─────────────────────────────────
   A tela inteira sai de cena e sobram a oração e o relógio. O véu é
   quase opaco de propósito: o que estava atrás não deve competir. */
.modo-oracao{
  position:fixed; inset:0; z-index:150;
  display:flex; justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(.9rem,3vw,2rem);
  background:rgb(16 15 11 / .96);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity var(--transicao);
}
.modo-oracao.esta-visivel{ opacity:1; }

/* margin:auto centra a coluna sem cortar o topo quando o cartão passa
   da altura da janela, que é o que align-items:center faria */
.modo-oracao__cartao{
  width:100%; max-width:44rem;
  margin-block:auto;
  display:flex; flex-direction:column; gap:clamp(1.2rem,3vw,1.7rem);
  padding:clamp(1.3rem,3.5vw,2.4rem);
  background:
    linear-gradient(150deg, rgb(69 58 36 / .34) 0%, rgb(32 28 19 / .55) 46%, rgb(32 28 19 / .55) 100%);
  border:1px solid var(--terra);
  border-radius:var(--r);
  transform:translateY(1.2rem);
  transition:transform var(--transicao);
}
.modo-oracao.esta-visivel .modo-oracao__cartao{ transform:none; }
/* o cartão recebe o foco só para levar o leitor de tela para dentro:
   o anel de foco aqui não diria nada a quem enxerga */
.modo-oracao__cartao:focus{ outline:none; }

.modo-oracao__topo{ display:flex; align-items:center; gap:1rem; }
.modo-oracao__selo{
  margin-inline-end:auto;
  font-family:var(--f-dado); font-weight:500; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-claro);
}

.modo-oracao__relogio{
  position:relative;
  display:grid; place-items:center;
  width:3.6rem; height:3.6rem; flex:none;
  color:var(--ouro);
}
.modo-oracao__anel{ position:absolute; inset:0; width:100%; height:100%; }
/* o arco anda no mesmo passo do relógio (o JS conta de 250 em 250ms) */
.modo-oracao__anel circle + circle{ transition:stroke-dashoffset 250ms linear; }
.modo-oracao__tempo{
  font-family:var(--f-dado); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--papel);
  font-variant-numeric:tabular-nums;
}
.modo-oracao.esta-completo .modo-oracao__relogio{ color:var(--ouro-claro); }
.modo-oracao.esta-completo .modo-oracao__tempo{ color:var(--ouro-claro); }

.modo-oracao__fechar{
  display:grid; place-items:center;
  width:2.6rem; height:2.6rem; flex:none;
  margin-inline-end:-.4rem;
  border:1px solid transparent;
  border-radius:var(--r);
  color:var(--cinza);
  transition:color var(--transicao), border-color var(--transicao);
}
.modo-oracao__fechar:hover,.modo-oracao__fechar:focus-visible{
  color:var(--papel); border-color:var(--terra);
}

.modo-oracao__corpo{ display:flex; flex-direction:column; gap:1.1rem; }
.modo-oracao__tema{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,1.05rem + 2.4vw,2.5rem);
  font-weight:800; line-height:1.06; letter-spacing:-.022em;
  color:var(--papel); text-wrap:balance;
}
.modo-oracao__texto{
  font-family:var(--f-escrita);
  font-size:clamp(1.1rem,1rem + .6vw,1.32rem);
  line-height:1.62; color:#D5CCBC;
}
.modo-oracao__foco{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem 1.1rem;
  background:rgb(193 159 99 / .07);
  border:1px solid rgb(193 159 99 / .22);
  border-radius:var(--r);
  font-size:.96rem; line-height:1.5;
}
.modo-oracao__foco .beam{ color:var(--ouro); margin-top:.28rem; }
.modo-oracao__foco b{ color:var(--ouro-claro); }
.modo-oracao__verso{ padding-top:1.1rem; border-top:1px solid var(--terra); }
.modo-oracao__verso blockquote p{
  font-family:var(--f-escrita); font-style:italic;
  font-size:clamp(1.04rem,1rem + .5vw,1.22rem);
  line-height:1.58; color:var(--papel);
  margin-bottom:.7rem;
}
.modo-oracao__verso cite{
  font-style:normal;
  font-family:var(--f-dado); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ouro-claro);
}

.modo-oracao__pe{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.9rem;
  padding-top:1.2rem;
  border-top:1px solid var(--terra);
}
.modo-oracao__tempos{ display:flex; gap:.4rem; }
.modo-oracao__min{
  padding:.55rem .85rem;
  min-height:2.5rem;
  border:1px solid var(--terra-10);
  border-radius:var(--r);
  font-family:var(--f-dado); font-weight:600; font-size:.72rem;
  letter-spacing:.06em; color:var(--cinza-esc);
  transition:color var(--transicao), border-color var(--transicao);
}
.modo-oracao__min:hover{ color:var(--papel); border-color:var(--terra); }
.modo-oracao__min[aria-pressed="true"]{ color:var(--ouro-claro); border-color:var(--ouro); }
.modo-oracao__acoes{ display:flex; flex-wrap:wrap; gap:.6rem; }

body.modo-aberto{ overflow:hidden; }
/* no iOS o overflow do body sozinho não segura a página atrás do véu */
html:has(body.modo-aberto){ overflow:hidden; }

/* ── 16b2. RECADO CURTO ────────────────────────────────── */
.recado{
  position:fixed; z-index:160;
  left:50%; bottom:1.5rem;
  max-width:min(30rem, calc(100vw - 2rem));
  padding:.8rem 1.25rem;
  background:var(--pedra);
  border:1px solid var(--terra);
  border-radius:var(--r);
  box-shadow:0 1rem 2.5rem rgb(0 0 0 / .5);
  font-family:var(--f-dado); font-size:.82rem; line-height:1.45;
  color:var(--papel); text-align:center;
  opacity:0; pointer-events:none;
  transform:translate(-50%,.9rem);
  transition:opacity var(--transicao), transform var(--transicao);
}
.recado.esta-visivel{ opacity:1; transform:translate(-50%,0); }

/* ── 16. BARRA FIXA (celular) ──────────────────────────── */
.barra-movel{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  display:none; align-items:center; gap:.85rem;
  padding:.95rem var(--shell-pad) calc(.95rem + env(safe-area-inset-bottom));
  background:rgb(16 15 11 / .95);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--terra);
  transform:translateY(110%);
  transition:transform var(--transicao);
}
.barra-movel.is-visivel{ transform:none; }
.barra-movel__info{ display:flex; flex-direction:column; gap:.24rem; min-width:0; }
.barra-movel__quando{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cinza-esc);
}
/* a contagem é o que a pessoa lê de relance: sobe de corpo e de peso e
   passa a ser o primeiro nível da barra, não uma legenda do rótulo */
.barra-movel__count{
  font-family:var(--f-dado); font-weight:600; font-size:1.06rem;
  line-height:1.25; color:var(--ouro-claro);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* "Ativar lembrete" é um rótulo longo: o botão ganha altura de alvo cheia
   (3rem, como os botões do corpo) e desiste da caixa larga do .btn--sm */
.barra-movel .btn{
  flex:none; margin-inline-start:auto;
  min-height:3rem; padding:.7rem 1.15rem;
  font-size:.72rem; letter-spacing:.09em;
}

/* ── 16c. BOTÃO FLUTUANTE DO WHATSAPP ──────────────────── */
/* Fica preso ao canto inferior direito em todas as páginas. Recolhido é
   só o círculo; no ponteiro do mouse a etiqueta desliza para o lado.
   O ouro é o mesmo das ações do site; o desenho do ícone já entrega
   de qual aplicativo se trata. */
.zap{
  position:fixed; z-index:95;
  right:clamp(.9rem, 2.2vw, 1.6rem);
  bottom:calc(clamp(.9rem, 2.2vw, 1.6rem) + env(safe-area-inset-bottom));
  display:flex; align-items:center;
  border-radius:999px;
  color:#141109;
  background:var(--ouro);
  box-shadow:0 14px 34px rgb(0 0 0 / .5), 0 1px 0 rgb(255 255 255 / .18) inset;
  transition:background-color var(--transicao), transform var(--transicao),
             box-shadow var(--transicao);
}
.zap:hover,.zap:focus-visible{
  background:var(--ouro-claro);
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgb(0 0 0 / .58), 0 1px 0 rgb(255 255 255 / .22) inset;
}
.zap:active{ transform:translateY(0); }

.zap__icone{
  position:relative;
  flex:none;
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
}
.zap__icone svg{ width:1.7rem; height:1.7rem; fill:currentColor; }
/* halo que respira: chama o olho sem mexer no botão */
.zap__icone::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgb(193 159 99 / .5);
  animation:zap-pulso 2.8s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
@keyframes zap-pulso{
  0%        { box-shadow:0 0 0 0    rgb(193 159 99 / .5); }
  70%, 100% { box-shadow:0 0 0 .9rem rgb(193 159 99 / 0); }
}

.zap__rotulo{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  font-family:var(--f-dado); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:max-width var(--transicao), opacity var(--transicao),
             padding-inline-start var(--transicao);
}
/* a etiqueta só existe onde há ponteiro: no toque ela nunca abriria */
@media (hover:hover) and (pointer:fine){
  .zap:hover .zap__rotulo,
  .zap:focus-visible .zap__rotulo{
    max-width:14rem;
    opacity:1;
    padding-inline-start:1.25rem;
  }
}

/* A primeira tela é só o banner: nada flutua por cima da fotografia.
   O botão entra junto com a barra fixa, quando o banner já saiu de cena
   (a classe é posta pelo main.js). O estado escondido usa translate/scale
   (propriedades próprias, que não brigam com o transform do :hover).
   Sem JS a regra não vale e o botão fica visível desde o início. */
.js .zap{
  opacity:0; visibility:hidden; pointer-events:none;
  translate:0 .85rem; scale:.86;
  transition:opacity var(--transicao), translate var(--transicao),
             scale var(--transicao), visibility 0s linear var(--transicao),
             background-color var(--transicao), transform var(--transicao),
             box-shadow var(--transicao);
}
.js body.passou-capa .zap{
  opacity:1; visibility:visible; pointer-events:auto;
  translate:0; scale:1;
  transition:opacity var(--transicao), translate var(--transicao),
             scale var(--transicao), visibility 0s,
             background-color var(--transicao), transform var(--transicao),
             box-shadow var(--transicao);
}
/* o halo só pulsa quando o botão está em cena */
.js .zap .zap__icone::before{ animation:none; }
.js body.passou-capa .zap .zap__icone::before{
  animation:zap-pulso 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}

/* com o menu de tela cheia aberto o botão não pode ficar por cima */
body.menu-aberto .zap{ display:none; }

/* ── 16d. PÁGINAS INTERNAS: capa ──────────────────────── */
/* Quatro assuntos saíram da página principal e ganharam página própria.
   A capa repete o gesto do banner (foto em duotone + véu), porém baixa:
   ela apresenta o assunto e entrega a leitura logo abaixo. */
.pagina-capa{
  position:relative;
  overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:clamp(19rem,52vh,29rem);
  /* o pé fecha curto de propósito: o texto da capa e o primeiro parágrafo da
     leitura são a mesma frase em dois blocos. Somado ao respiro da seção
     seguinte, o 4,5rem de antes abria quase 190px de vão ali — a leitura
     parecia começar numa página nova. */
  padding-block:calc(var(--altura-cab) + clamp(2.6rem,5.5vw,4.2rem)) clamp(1.6rem,3vw,2.4rem);
}
.pagina-capa__media{ position:absolute; inset:0; z-index:0; }
/* o <picture> é inline por padrão: sem display:block o height:100% do <img>
   não resolve e o object-fit não tem efeito nenhum */
.pagina-capa__media picture{ display:block; height:100%; }
.pagina-capa__media img{ width:100%; height:100%; object-position:center 58%; }
.pagina-capa__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,  rgb(16 15 11 / .95) 0%, rgb(16 15 11 / .84) 48%, rgb(16 15 11 / .42) 100%),
    linear-gradient(to bottom, rgb(16 15 11 / .84) 0%, rgb(16 15 11 / .32) 36%, rgb(16 15 11 / .92) 100%);
}
/* mantém a margem da .shell (alinhada às seções) e limita só a leitura */
.pagina-capa__inner{ position:relative; z-index:2; }
.pagina-capa__inner > *{ max-width:46rem; }

.pagina-capa__titulo{
  font-family:var(--f-display);
  font-size:clamp(2.25rem,1.2rem + 4.4vw,4.4rem);
  font-weight:800;
  line-height:.97; letter-spacing:-.026em;
  text-wrap:balance;
  text-shadow:0 .02em .16em rgb(16 15 11 / .5);
}
/* O subtítulo da capa é um chapéu de leitura, não texto corrido: sai do
   grotesco e volta para a serifa da manchete, num peso bem abaixo dela.
   Mesma família em pesos distantes (800 / 400) dá hierarquia sem precisar de
   uma terceira fonte, e o opsz do Fraunces já engrossa a haste sozinho neste
   corpo menor — é o que segura a linha sobre a foto. A entrelinha fecha
   junto: o 1,62 do .lead é medida de parágrafo longo, e aqui são duas ou
   três linhas. */
.pagina-capa__lead{
  margin-top:1.1rem;
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.12rem, 1rem + .7vw, 1.5rem);
  line-height:1.4;
  letter-spacing:-.005em;
  max-width:40ch;
  text-wrap:balance;
  text-shadow:0 .02em .14em rgb(16 15 11 / .45);
}

/* A capa do versículo do dia não apresenta o assunto: ela é a oração de hoje.
   Manchete e chapéu cedem um pouco do corpo da capa padrão, que foi medido
   para uma frase fixa de duas ou três linhas — aqui o texto muda todo dia e
   o mais longo da lista tem quase o dobro. */
.pagina-capa__titulo--dia{ font-size:clamp(2.05rem,1.15rem + 3.6vw,3.7rem); }
/* e o chapéu deixa de ser chapéu: é a oração inteira, um parágrafo de quatro
   ou cinco linhas. Ganha medida e entrelinha de parágrafo, e o balance sai —
   ele é para títulos curtos, não para um bloco deste tamanho. */
.pagina-capa__lead--dia{
  max-width:44ch;
  line-height:1.5;
  text-wrap:pretty;
}

/* trilha "Início / assunto" */
.migalhas{ margin-bottom:1.1rem; }
.migalhas ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem;
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza-esc);
}
.migalhas li{ display:flex; align-items:center; gap:.4rem .65rem; }
.migalhas li + li::before{ content:"/"; color:var(--terra); }
.migalhas a{ color:var(--cinza); transition:color var(--transicao); }
.migalhas a:hover,.migalhas a:focus-visible{ color:var(--ouro-claro); }
.migalhas [aria-current="page"]{ color:var(--ouro-claro); }

/* a página aberta fica marcada no menu */
.nav__list a[aria-current="page"]{ color:var(--papel); }
.nav__list a[aria-current="page"]::after{ transform:scaleX(1); }

/* a primeira seção depois da capa não precisa do respiro cheio: a capa já
   abriu a página, e o que vem abaixo é a continuação da leitura, não um
   assunto novo. O pé continua largo — ali sim muda de assunto. */
.pagina-capa + .section{ padding-block:clamp(2rem,4vw,3.2rem) clamp(3.6rem,7.5vw,6.5rem); }

/* ── 16d-bis. CAPA LONGA (o chamado, o propósito) ─────── */
/* Variante da capa em que a fotografia não termina no fim do banner: o quadro
   embrulha a capa e a seção seguinte, e a mesma foto desce por trás do texto
   até se apagar no véu, pouco antes do fim da leitura. Quem carrega a imagem
   é o quadro — as duas seções ficam por cima, transparentes.
   Os tokens acertam o quadro em cada página, e as camadas do véu ficam
   guardadas em variáveis porque o pé tem duas versões: uma para quando a foto
   atravessa o quadro inteiro e outra para quando ela é cortada antes do fim. */
.capa-longa{
  position:relative;
  overflow:hidden;
  /* o véu tem de ser da cor da seção que a foto atravessa, senão a emenda
     aparece justamente onde a fotografia acaba */
  --veu:16 15 11;      /* breu */
  --veu-direita:.30;   /* véu que sobra na direita, onde a foto respira */
  --veu-pe:34rem;      /* de que altura o pé fecha: a rampa inteira acompanha */
  --foto-h:clamp(26rem,64vh,34rem);  /* altura da foto quando ela é cortada */
  --foto-w:100%;       /* largura da foto: acima de 100% ela sai pela direita */

  /* as verticais usam medida fixa (rem) em vez de porcentagem: assim o desenho
     não muda quando o texto cresce ou encolhe. E todas precisam zerar numa
     parada explícita — sem ela a última cor segue valendo até o outro extremo
     e o véu do pé apagaria a foto inteira. */
  --veu-lado:linear-gradient(to right,
    rgb(var(--veu) / .94) 0%,
    rgb(var(--veu) / .82) 44%,
    rgb(var(--veu) / var(--veu-direita)) 100%);
  --veu-topo:linear-gradient(to bottom,   /* peso sob o cabeçalho */
    rgb(var(--veu) / .80) 0,
    rgb(var(--veu) / .16) 15rem,
    rgb(var(--veu) / 0)   26rem);
  --veu-fundo:linear-gradient(to top,     /* foto inteira: fecha no fim do quadro */
    rgb(var(--veu) / 1)   0,
    rgb(var(--veu) / .92) calc(var(--veu-pe) * .2),
    rgb(var(--veu) / .40) calc(var(--veu-pe) * .58),
    rgb(var(--veu) / 0)   var(--veu-pe));
  --veu-corte:linear-gradient(to bottom,  /* foto cortada: fecha onde ela acaba */
    rgb(var(--veu) / .78) 0,
    rgb(var(--veu) / .18) calc(var(--foto-h) * .38),
    rgb(var(--veu) / .70) calc(var(--foto-h) * .82),
    rgb(var(--veu) / 1)   var(--foto-h));

  background:rgb(var(--veu));
}
.capa-longa__media{ position:absolute; inset:0; z-index:0; }
/* o <picture> é inline por padrão: sem display:block o height:100% do <img>
   não resolve e o object-fit não tem efeito nenhum */
.capa-longa__media picture{ display:block; height:100%; }
/* quando --foto-w passa de 100% a imagem fica mais larga que o quadro e sobra
   pela direita, que o .duo corta: o que se vê é o pedaço esquerdo dela, e o
   motivo da foto escorrega para a direita junto. É o único jeito de deslocá-lo
   nestas capas — num quadro mais largo que a proporção da foto o object-fit já
   encosta nas duas laterais e o object-position horizontal não tem folga.
   É a mesma saída do hero, item 6, inclusive no max-width:none obrigatório:
   sem ele o reset lá em cima (img{max-width:100%}) anula a largura maior sem
   deixar rastro — a foto continua igual e parece que a regra não pegou. */
.capa-longa__media img{
  width:var(--foto-w); max-width:none;
  height:100%; object-position:center 46%;
}

.capa-longa__scrim{
  position:absolute; inset:0; z-index:1;
  background:var(--veu-lado), var(--veu-topo), var(--veu-fundo);
}

/* quando a foto não atravessa o quadro todo ela para em --foto-h e o véu fecha
   em cor cheia exatamente ali, senão a borda de baixo da imagem apareceria.
   O --veu-topo sai: o --veu-corte já começa escuro e faz o peso do cabeçalho. */
.capa-longa--parcial .capa-longa__media{ bottom:auto; height:var(--foto-h); }
.capa-longa--parcial .capa-longa__scrim{ background:var(--veu-lado), var(--veu-corte); }

/* o conteúdo das duas seções sobe acima do véu; a seção perde o fundo próprio,
   senão ele taparia a foto */
.capa-longa > .pagina-capa,
.capa-longa > .section{ z-index:2; }
.capa-longa .section--chamado{ background:transparent; }

/* No propósito a foto é cortada em vez de atravessar o quadro inteiro, e o
   motivo é o enquadramento: esticada na altura toda, a imagem 3:2 cabe inteira
   e o homem escorrega para o meio da página, longe da manchete que ele
   acompanha. Cortada, o recorte do banner segue o mesmo — a foto só desce um
   pedaço dentro do propósito e se apaga ali.
   A leitura aqui ocupa a largura inteira (a escada chega perto da margem
   direita), então o véu também fecha mais de lado do que em "o chamado".
   A cor é a noite, fundo próprio da seção, e os filetes dela saem: a foto agora
   atravessa a emenda que eles marcavam.
   A foto ainda é alargada para tirar a mulher de baixo da manchete: no
   enquadramento cheio ela abre os braços no meio do quadro, e a mão esquerda
   dela caía sobre o fim do título e do texto de abertura. */
.capa-longa--proposito{
  --veu:23 23 18;
  --veu-direita:.55;
  --foto-h:clamp(30rem,62vw,56rem);
  --foto-w:133%;
}
.capa-longa .section--proposito{ background:transparent; border-block:0; }

/* A foto daqui era a maos-oracao, que é retrato (2:3). Num quadro largo o
   object-fit precisa escalar a imagem pela largura, e de uma foto em pé isso
   deixa à vista só uma faixa ampliada: a mão virava uma mancha enorme, sem
   escala nenhuma. Não é ajuste de véu nem de altura — é a proporção da foto.
   Por isso a página passou a usar a maos-sol, 3:2 como as outras duas, com a
   silhueta inteira no enquadre.
   Só o filete de cima sai: o de baixo continua separando esta seção da
   seguinte, que é a única das três que muda de cor (breu) ao fim do quadro. */
.capa-longa--dia{
  --veu:23 23 18;
  --veu-direita:.40;
  --foto-h:clamp(30rem,62vw,56rem);
}

/* E aqui a foto não ocupa a largura toda do quadro: é um painel encostado à
   direita, que se apaga para a esquerda numa máscara. Nas outras duas o motivo
   sai de baixo do texto alargando a imagem (--foto-w), mas alargar amplia
   junto — e ampliar é justamente o que esta página não podia. Encolhendo o
   quadro em vez da imagem, as mãos escorregam para a direita e ainda ficam um
   pouco menores: o object-fit passa a escalar pela altura.
   A máscara é o que dispensa uma borda: sem ela o painel teria um corte reto
   no meio da tela. */
.capa-longa--dia .capa-longa__media{
  left:auto; width:54%;
  /* a máscara demora a abrir de propósito: o trecho transparente do começo é
     o que mantém a foto fora da linha do texto de apoio, que é o mais comprido
     da capa. Só depois dele o degradê sobe. */
  -webkit-mask-image:linear-gradient(to right,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) 20%, #000 55%);
          mask-image:linear-gradient(to right,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0) 20%, #000 55%);
}
/* o recorte encosta as mãos na borda direita: é o limite: dali em diante o que
   sai do quadro é a mão, não o fundo */
.capa-longa--dia .capa-longa__media img{ object-position:24% center; }

.capa-longa .section--dia{ background:transparent; border-block-start:0; }
/* e aqui a emenda fecha mais que nas outras internas: a capa entregou a
   oração inteira e o que vem abaixo é a continuação dela — o foco do dia e
   a Palavra —, não um assunto novo que peça o respiro cheio */
.capa-longa--dia .pagina-capa + .section{ padding-block-start:clamp(1.2rem,2.4vw,2rem); }

/* ── 16e. CONVOCAÇÃO: o convite que fecha as páginas ──── */
/* mora no rodapé das páginas internas (.rodape--convite), item 15 */
.convocar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.8rem,4vw,3.5rem);
  align-items:center;
}
.convocar .h2{ margin-bottom:1.1rem; }
.convocar__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ── 16f. COMO USAR (versículo do dia) ──────────────────── */
.section--como{ background:var(--breu); }

/* ── 16g. CONTINUE: atalhos entre as páginas ──────────── */
.section--adiante{ background:var(--noite); border-block:1px solid var(--terra-10); }
.adiante__cabeca{ margin-bottom:clamp(2rem,4.5vw,3rem); max-width:44rem; }
.adiante__cabeca .h2{ margin-bottom:0; }

/* auto-fit e não auto-fill: com três cartões a linha é preenchida por
   inteiro, sem deixar uma coluna fantasma na direita */
.adiante{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.7rem;
}
.adiante__cartao{
  /* a terceira faixa (1fr) empurra a seta para a base: os cartões terminam
     alinhados mesmo com resumos de alturas diferentes */
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:.5rem;
  height:100%;
  padding:1.45rem 1.5rem 1.3rem;
  background:var(--pedra);
  border:1px solid var(--terra-10);
  border-radius:var(--r);
  transition:background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.adiante__cartao:hover,.adiante__cartao:focus-visible{
  background:var(--terra-10);
  border-color:var(--terra);
  transform:translateY(-2px);
}
.adiante__num{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.2em; color:var(--ouro);
}
.adiante__nome{
  font-family:var(--f-display);
  font-size:1.22rem; font-weight:700;
  line-height:1.15; letter-spacing:-.012em; color:var(--papel);
}
.adiante__resumo{ font-size:.92rem; line-height:1.55; color:var(--cinza); }
.adiante__seta{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.55rem;
  font-family:var(--f-dado); font-weight:500; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cinza-esc);
  transition:color var(--transicao);
}
.adiante__seta::after{ content:"→"; transition:transform var(--transicao); }
.adiante__cartao:hover .adiante__seta,
.adiante__cartao:focus-visible .adiante__seta{ color:var(--ouro-claro); }
.adiante__cartao:hover .adiante__seta::after{ transform:translateX(3px); }

/* ── 16h. CARTÃO DE LINKS (links.html) ─────────────────────
   A página que mora na bio do Instagram. É a única do site sem
   cabeçalho fixo e sem menu, e isso é regra, não esquecimento:
   quem chega aqui veio de um toque e sai no toque seguinte, então
   cada linha da página precisa ser um destino. Uma coluna só, da
   largura de um polegar, centrada também no desktop.

   Nada aqui é peça nova por capricho. Os destinos herdam o fundo de
   pedra sobre breu, o filete de --terra-10 e o realce dourado no
   toque que os cartões do "continue lendo" (item 16g) já usavam;
   a contagem regressiva é a mesma do Monte (item 11), com os
   mesmos data-*, e por isso acerta o horário sem uma linha nova
   de JavaScript.

   A faixa da marca é branca — a única superfície clara do site.
   Ela existe para o logo aparecer como logo, do jeito que aparece
   num papel, e é ela que dá a esta página a cara de cartão de
   visita que a página inicial não precisa ter.
   ─────────────────────────────────────────────────────────── */

/* o sprite dos ícones abre o documento e não se vê: os desenhos ficam
   declarados uma vez e são chamados por <use> ao longo da página */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* a coluna: as faixas da página são largas de ponta a ponta, e é esta
   medida interna que segura a leitura */
.cartao__coluna{
  width:100%;
  max-width:31rem;
  margin-inline:auto;
  padding-inline:clamp(1.15rem,4.5vw,1.75rem);
}

/* ── o topo: a faixa branca, o medalhão e o nome ── */
.cartao__topo{
  /* --selo é o diâmetro do medalhão, que monta a cavalo na borda da faixa
     branca: metade dele fica no branco e metade no breu. A conta aparece
     duas vezes (no respiro de baixo da faixa e na margem negativa do
     medalhão) e é por isso que ela mora aqui, num lugar só. */
  --selo:clamp(6.6rem,26vw,7.8rem);
  text-align:center;
}

.cartao__marca{
  background:#fff;
  /* o respiro de baixo abre espaço para a metade de cima do medalhão */
  padding-block:clamp(1.7rem,5.5vw,2.4rem) calc(var(--selo) * .5 + clamp(.9rem,2.6vw,1.35rem));
}
/* o logo do ministério é um desenho de traço branco, e não existe uma versão
   escura dele. O brightness(0) leva o traço a preto sem pedir um segundo
   arquivo ao servidor — e a transparência do PNG atravessa o filtro intacta,
   então o que sobra é o traço, sem moldura. */
.cartao__logo{
  width:clamp(11.5rem,56vw,16rem);
  height:auto;
  margin-inline:auto;
  filter:brightness(0);
}

/* o medalhão: o monograma num disco de breu. Ele não precisa de anel nem de
   sombra para se destacar — metade dele cai no branco da faixa, onde o próprio
   disco escuro é o contraste, e a outra metade cai no breu da página, onde o
   filete de --terra desenha a borda. */
.cartao__selo{
  display:grid; place-items:center;
  width:var(--selo); height:var(--selo);
  margin:calc(var(--selo) * -.5) auto 0;
  background:var(--breu);
  border:1px solid var(--terra);
  border-radius:50%;
}
.cartao__selo img{ width:52%; height:auto; }

.cartao__cabeca{ padding-block:clamp(1.55rem,4.5vw,2.1rem) clamp(2rem,6vw,2.8rem); }

.cartao__nome{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,1.05rem + 2.3vw,2.2rem);
  font-weight:800;
  line-height:1.04; letter-spacing:-.015em;
  text-wrap:balance;
}
/* ── o temporizador do próximo encontro ──
   Abre o cartão, logo abaixo do medalhão, porque é a única informação da
   página que muda sozinha: quem chega pelo link da bio quer saber quando é a
   próxima antes de qualquer outra coisa. A data e os números vêm do main.js
   pelos data-*, os mesmos da página inicial. */
.cartao__timer-rotulo{
  font-family:var(--f-dado); font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cinza-esc);
}
.cartao__timer-data{
  margin-top:.4rem;
  font-family:var(--f-display);
  font-size:clamp(1.1rem,1rem + .65vw,1.35rem);
  font-weight:700;
  line-height:1.2; letter-spacing:-.015em; color:var(--papel);
}
/* o Intl devolve o dia da semana em minúsculas ("sexta-feira, 22 de agosto") */
.cartao__timer-data::first-letter{ text-transform:uppercase; }
/* O cronômetro entra na variante sem moldura (item 7b): numa página que é,
   ela toda, uma pilha de caixas, mais quatro caixinhas viravam ruído — e o
   que importa aqui é a data, não a contagem. Da variante de lá mudam três
   coisas: a coluna é centrada (no convite da capa ela é alinhada à
   esquerda), o filete de cima sai (quem divide já é a borda do bloco) e os
   números encolhem, porque não abrem uma seção inteira: eles são a última
   linha de um cabeçalho. */
.cartao__timer .contagem{ margin-top:1.05rem; padding-top:0; border-top:0; }
.cartao__timer .contagem__grade{
  justify-content:center;
  gap:clamp(1.2rem,5.5vw,2rem);
}
.cartao__timer .contagem__bloco{ align-items:center; gap:.14rem; }
.cartao__timer .contagem__num{
  font-size:clamp(1.45rem,1.1rem + 1.4vw,1.85rem);
  letter-spacing:-.01em;
}
.cartao__timer .contagem__uni{ font-size:.58rem; letter-spacing:.14em; }
.cartao__timer .contagem__agora{ justify-content:center; }
.cartao__timer .btn{ margin-top:1.15rem; }
/* o sininho do lembrete. O respiro entre ele e o rótulo já vem do gap do
   .btn (item 4), que sempre esperou por um ícone; o que falta é só o corpo
   do desenho, um tico menor que o dos quadradinhos porque aqui ele divide a
   linha com a caixa alta em vez de morar sozinho. */
.cartao__timer .btn svg{
  width:1.05rem; height:1.05rem;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── os destinos, um por linha ── */
.cartao__corpo{ padding-bottom:clamp(2.2rem,6vw,3rem); }
.atalhos{ display:flex; flex-direction:column; gap:.55rem; }
.atalho{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.95rem;
  padding:.9rem 1rem;
  background:var(--pedra);
  border:1px solid var(--terra-10);
  border-radius:var(--r);
  transition:background-color var(--transicao), border-color var(--transicao);
}
.atalho__icone{
  display:grid; place-items:center;
  width:2.6rem; height:2.6rem;
  color:var(--ouro);
  background:rgb(69 58 36 / .32);
  border:1px solid var(--terra-10);
  border-radius:var(--r);
  transition:color var(--transicao), background-color var(--transicao),
             border-color var(--transicao);
}
/* o traço é o padrão porque a maioria destes ícones é desenho de linha, do
   mesmo peso dos filetes da página. As marcas das redes, que são desenhos
   cheios, pedem o --marca abaixo. */
.atalho__icone svg{
  width:1.35rem; height:1.35rem;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.atalho__icone--marca svg{ fill:currentColor; stroke:none; }
/* o monograma do cartão do site: desenho cheio, como as marcas das redes, e
   um tico maior que os outros ícones — o traço dele é fino e vazado, e no
   mesmo corpo dos demais pesaria menos que eles. */
.atalho__icone--logo svg{
  width:1.55rem; height:1.55rem;
  fill:currentColor; stroke:none;
}
/* a coluna do meio. O min-width:0 é o que deixa um nome comprido quebrar
   em duas linhas em vez de esticar o cartão para fora da coluna */
.atalho__texto{ min-width:0; }
.atalho__nome{
  display:block;
  font-family:var(--f-display);
  font-size:1.06rem; font-weight:700;
  line-height:1.2; letter-spacing:-.012em; color:var(--papel);
}
.atalho__resumo{ display:block; margin-top:.15rem; font-size:.82rem; line-height:1.45; color:var(--cinza); }
.atalho__seta{
  font-size:1rem; color:var(--cinza-esc);
  transition:color var(--transicao), transform var(--transicao);
}
.atalho__seta::after{ content:"→"; }
.atalho:hover,.atalho:focus-visible{
  background:var(--terra-10);
  border-color:var(--terra);
}
.atalho:hover .atalho__icone,
.atalho:focus-visible .atalho__icone{
  color:#141109;
  background:var(--ouro-claro);
  border-color:var(--ouro-claro);
}
.atalho:hover .atalho__seta,
.atalho:focus-visible .atalho__seta{ color:var(--ouro-claro); }
.atalho:hover .atalho__seta{ transform:translateX(3px); }

/* ── o pé ── */
.cartao__pe{
  padding-block:clamp(1.8rem,5vw,2.4rem) clamp(2.4rem,7vw,3.4rem);
  border-top:1px solid var(--terra-10);
  text-align:center;
}
.cartao__pe p{ font-size:.78rem; line-height:1.65; color:var(--cinza-esc); }
.cartao__pe a{ color:var(--cinza); transition:color var(--transicao); }
.cartao__pe a:hover,.cartao__pe a:focus-visible{ color:var(--ouro-claro); }

/* celular muito estreito: o ícone dos destinos encolhe para o resumo não
   virar três linhas */
@media (max-width:360px){
  .atalho{ gap:.75rem; padding:.8rem .85rem; }
  .atalho__icone{ width:2.3rem; height:2.3rem; }
  .atalho__icone svg{ width:1.2rem; height:1.2rem; }
  .atalho__icone--logo svg{ width:1.38rem; height:1.38rem; }
}

/* ═══════════ 17. RESPONSIVO ═══════════════════════════ */

/* desktop médio */
@media (max-width:1080px){
  .nav__list{ gap:1.15rem; }
  .nav__list a{ font-size:.7rem; }
}

/* tablet */
@media (max-width:900px){
  /* aqui a foto passa a ser recortada pelas laterais e o homem escorrega para
     a direita, devolvendo largura ao tipo */
  .hero__title{ font-size:clamp(2.7rem, 8vw, 5.2rem); }
  /* já no tablet em pé o alargamento da foto está desligado (ele empurraria o
     homem para fora), então o braço erguido volta a avançar sobre a coluna do
     texto: o tipo recua o suficiente para não encostar nele */
  @media (max-aspect-ratio:4/5){
    .hero__title{ font-size:clamp(2.4rem, 6.2vw, 4.6rem); }
  }
  .chamado__grid{ grid-template-columns:1fr; }
  /* no celular toda capa longa corta a foto, como o propósito já faz no
     desktop: sem a coluna vazia ao lado o texto passaria por cima dela, e num
     quadro estreito e muito alto o object-fit comeria as laterais até o homem
     sair do enquadre. O véu do lado sai junto: ele existe para abrir uma
     direita que aqui não há. Sem ele a vertical carrega a leitura sozinha, e
     por isso a rampa fecha antes — o topo do quadro fica para a foto e a
     manchete assenta numa base já escura, como no hero.
     A dobradinha .capa-longa .capa-longa__scrim iguala a especificidade da
     regra do --parcial, que é quem manda no desktop. */
  .capa-longa{
    /* a foto volta à largura do quadro: aqui o texto ocupa tudo e não há para
       onde deslocar o motivo — alargar só cortaria metade dele */
    --foto-w:100%;
    --veu-corte:linear-gradient(to bottom,
      rgb(var(--veu) / .74) 0,
      rgb(var(--veu) / .22) calc(var(--foto-h) * .30),
      rgb(var(--veu) / .60) calc(var(--foto-h) * .62),
      rgb(var(--veu) / .88) calc(var(--foto-h) * .86),
      rgb(var(--veu) / 1)   var(--foto-h));
  }
  .capa-longa .capa-longa__media{ bottom:auto; height:var(--foto-h); }
  .capa-longa .capa-longa__scrim{ background:var(--veu-corte); }
  /* o painel do versículo do dia também desfaz: numa tela estreita não sobra
     coluna livre ao lado, e a foto volta a ocupar o quadro inteiro */
  .capa-longa--dia .capa-longa__media{
    left:0; width:auto;
    -webkit-mask-image:none; mask-image:none;
  }
  .capa-longa--dia .capa-longa__media img{ object-position:center 46%; }
  .monte__inner{ grid-template-columns:1fr; }
  .convocacao{ grid-template-columns:1fr; }
  .convocar{ grid-template-columns:1fr; }
}

/* celular */
@media (max-width:760px){
  /* a barra é bem mais alta que no desenho anterior (3,85rem): com o botão
     de menu em 44px de alvo de toque, aquela altura deixava só uns 8px de
     respiro em cima e embaixo e a marca ficava espremida contra as bordas.
     Em 5,5rem o toque tem folga larga, a marca respira e o cabeçalho ganha
     o peso que a serifa do nome pede. Tudo o que depende da altura — o
     recuo do hero, o painel do menu — pende deste token. */
  :root{ --altura-cab:5.5rem; }

  body{ padding-bottom:0; }
  /* folga do fim da página igual à altura da barra, senão ela cobre a
     última linha do rodapé; o env acompanha a faixa do iPhone */
  body.tem-barra{ padding-bottom:calc(4.9rem + env(safe-area-inset-bottom)); }

  /* uma medida só: o ícone encolhe e o nome e a linha de cima vão junto.
     Num aparelho de 360px a marca e o botão dividem a barra sem se tocar.
     O align-self estende o alvo de toque à altura inteira da barra. */
  .brand{ --marca-icone:2.15rem; align-self:stretch; }

  /* a fileira ocupa a barra inteira: é isso que dá altura ao alvo de toque
     da marca, que sem o min-height pararia na altura do próprio tipo */
  .site-header__inner{ gap:1rem; min-height:var(--altura-cab); }

  /* o alvo de toque cresce sem que o rótulo saia do lugar: o que aumenta é
     o preenchimento, e a margem negativa devolve o alinhamento óptico com
     a margem da página */
  .menu-toggle{
    display:flex;
    min-height:3rem;
    padding:.6rem .75rem;
    margin-inline-end:-.75rem;
    border-radius:var(--r);
  }
  .menu-toggle__label{ font-size:.78rem; }
  .menu-toggle__bars{ width:1.55rem; }
  .menu-toggle__bars i{ height:2px; }
  /* enquanto o dedo está em cima, o botão responde */
  .menu-toggle:active{ background:rgb(246 236 225 / .08); }

  /* com o painel aberto o cabeçalho abre mão do próprio fundo: a barra
     e o menu passam a ser uma superfície só, sem o filete no meio */
  body.menu-aberto .site-header{
    background:transparent; backdrop-filter:none;
    border-bottom-color:transparent;
  }

  /* menu em painel de tela cheia */
  .nav{
    position:fixed; inset:0; z-index:1;
    /* a lista assenta abaixo do cabeçalho e desce a partir dali. Centrar
       verticalmente (align-items:center, ou margin-block:auto) parece melhor
       na tela alta, mas quando a lista passa da altura da janela — celular
       deitado, tela de 320px, tipo aumentado no sistema — o excedente sai
       por cima, atrás do cabeçalho, e a rolagem não alcança: o primeiro
       item fica inacessível. Alinhado ao topo isso não acontece nunca. */
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;  /* a rolagem do painel não vaza para a página */
    padding:calc(var(--altura-cab) + 1.25rem)
            max(var(--shell-pad), env(safe-area-inset-right))
            calc(2.5rem + env(safe-area-inset-bottom))
            max(var(--shell-pad), env(safe-area-inset-left));
    background:var(--breu);
    opacity:0; visibility:hidden;
    /* ao fechar, a visibilidade só muda depois do esmaecimento; ao abrir,
       muda na hora, senão o foco no primeiro link seria ignorado. */
    transition:opacity var(--menu-fecha) var(--menu-curva),
               visibility 0s linear var(--menu-fecha);
  }
  /* o brilho quente do canto superior direito não chega junto com a
     superfície: ele acende depois, e é o que faz o painel parecer ganhar
     profundidade em vez de simplesmente aparecer */
  .nav::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 70% at 100% 0%, rgb(69 58 36 / .5), transparent 60%);
    pointer-events:none;
    opacity:0;
    transition:opacity var(--menu-fecha) var(--menu-curva);
  }
  body.menu-aberto .nav{
    opacity:1; visibility:visible;
    transition:opacity var(--menu-abre) var(--menu-curva), visibility 0s;
  }
  body.menu-aberto .nav::before{
    opacity:1;
    transition:opacity 700ms var(--menu-curva) 120ms;
  }
  .nav__list{
    position:relative;
    display:block;   /* o flex do desktop não serve à pilha do painel */
    width:100%;
  }
  .nav__list li{
    width:100%; border-bottom:1px solid var(--terra-10);
    /* os itens não aparecem todos de uma vez: entram de cima para baixo e
       um pouco da esquerda, no rastro do painel — o mesmo caminho que o
       dedo faz ao descer a lista. Ao fechar, saem juntos e sem espera. */
    opacity:0;
    /* translate3d, e não translate: manda a linha para a placa de vídeo e
       tira a animação do caminho do desenho da página */
    transform:translate3d(-.7rem,.85rem,0);
    transition:opacity   150ms var(--menu-curva),
               transform 150ms var(--menu-curva);
  }
  .nav__list li:last-child{ border-bottom:0; }
  /* a escada pende do --i escrito no HTML (style="--i:0"), como na descida
     do manifesto: vale para quantos itens o menu tiver, sem uma regra por
     linha. Item novo sem --i entra junto com o primeiro, e não some. */
  body.menu-aberto .nav__list li{
    opacity:1;
    transform:none;
    transition:opacity   var(--menu-abre) var(--menu-curva) calc(80ms + var(--i,0) * 58ms),
               transform var(--menu-abre) var(--menu-curva) calc(80ms + var(--i,0) * 58ms);
  }
  .nav__list a{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem;
    padding-block:1.15rem;
    font-family:var(--f-display);
    font-size:clamp(1.45rem, 6.4vw, 1.85rem); font-weight:700;
    letter-spacing:-.012em; text-transform:none;
    color:var(--papel);
  }
  /* no toque não existe passar o mouse: a seta fica sempre à vista, discreta,
     dizendo que a linha inteira é um destino. No item que já é a página
     aberta ela vira marcador: não há para onde ir. */
  .nav__list a::after{
    content:"→";
    position:static; width:auto; height:auto;
    background:none; transform:none;
    font-family:var(--f-texto); font-size:1.1rem; font-weight:400;
    color:var(--cinza-esc);
    transition:transform var(--transicao), color var(--transicao);
  }
  .nav__list a:active::after{ transform:translateX(3px); color:var(--ouro-claro); }
  .nav__list a.is-ativo,
  .nav__list a[aria-current="page"]{ color:var(--ouro-claro); }
  .nav__list a[aria-current="page"]::after{ content:"•"; color:var(--ouro); }
  body.menu-aberto{ overflow:hidden; }
  /* no iOS o overflow do body sozinho não segura a página atrás do painel */
  html:has(body.menu-aberto){ overflow:hidden; }
  /* montando o X: as barras primeiro se encontram no meio e só então giram.
     Fechando, a regra base do botão (item 5) faz o contrário. */
  body.menu-aberto .menu-toggle__bars i{
    transition:translate 190ms var(--menu-curva),
               rotate    210ms var(--menu-curva) 130ms;
  }
  body.menu-aberto .menu-toggle__bars i:first-child{ translate:0  .42rem; rotate: 45deg; }
  body.menu-aberto .menu-toggle__bars i:last-child{  translate:0 -.42rem; rotate:-45deg; }

  .hero{ min-height:100vh; min-height:100svh; }
  /* no retrato o homem sai do caminho: a manchete volta a ocupar a largura toda */
  .hero__title{ font-size:clamp(2.7rem, 10.5vw, 5.5rem); }
  /* no retrato a manchete atravessa a largura toda: o véu deixa de ser um
     canto e vira uma base alta, com o topo do quadro livre para a foto */
  .hero__scrim{
    background:
      linear-gradient(to top,
        rgb(16 15 11 / .95) 0%,
        rgb(16 15 11 / .9)  18%,
        rgb(16 15 11 / .74) 34%,
        rgb(16 15 11 / .4)  52%,
        rgb(16 15 11 / .12) 70%,
        rgb(16 15 11 / 0)   86%),
      linear-gradient(to bottom,
        rgb(16 15 11 / .7) 0%, rgb(16 15 11 / .26) 14%, rgb(16 15 11 / 0) 32%);
  }
  .hero__inner{ padding-block:0 clamp(5rem,28vh,12rem); }

  /* ── BANNER NO RETRATO ───────────────────────────────────
     A fotografia é 3:2 e a tela do celular em pé é quase 1:2. Em tela
     cheia o object-fit:cover guardava só a faixa central da foto (≈31%
     da largura): o homem em oração ficava partido pela borda direita e
     o resto era nuvem sem leitura, com a manchete por cima da figura.
     Aqui a foto passa a ocupar a parte de cima da tela (um quadro
     perto de 4:5, onde a silhueta cabe inteira) e a manchete desce
     para a faixa escura de baixo, cada uma no seu campo. O banner
     continua ocupando a tela toda: quem muda é a divisão interna. */
  @media (orientation:portrait){
    .hero__media,
    .hero__scrim{ inset:0 0 auto 0; height:66svh; }

    /* o homem vive entre os 50% e os 71% da largura da foto: o recorte
       em 70% traz a silhueta inteira para dentro do quadro, encostada à
       direita, com o pôr do sol abrindo à esquerda */
    .hero__media img{
      object-position:70% center;
      /* no quadro menor o escurecimento do duotone apagava justamente a
         luz que desenha a silhueta: a foto recupera brilho */
      filter:grayscale(1) contrast(1.1) brightness(.95);
    }

    .hero__scrim{
      background:
        /* topo: mantém o cabeçalho legível quando o céu abre */
        linear-gradient(to bottom,
          rgb(16 15 11 / .72) 0%, rgb(16 15 11 / .24) 15%, rgb(16 15 11 / 0) 34%),
        /* base: a foto derrete no fundo da página: a emenda some */
        linear-gradient(to top,
          var(--breu) 0%, rgb(16 15 11 / .93) 9%, rgb(16 15 11 / .6) 23%,
          rgb(16 15 11 / .16) 42%, rgb(16 15 11 / 0) 58%);
    }

    /* a manchete assenta no meio da faixa escura, com folga embaixo */
    .hero__inner{ padding-block:0 clamp(4rem,12vh,6rem); }
  }

  .escada__degrau{ align-items:flex-start; }
  .descida li{ gap:.65rem; }

  /* no retrato a capa das páginas internas segue o hero: o véu vira uma
     base alta e o topo do quadro fica livre para a foto */
  .pagina-capa{ min-height:clamp(17rem,44vh,24rem); }
  .pagina-capa__scrim{
    background:
      linear-gradient(to top,
        rgb(16 15 11 / .95) 0%,
        rgb(16 15 11 / .88) 26%,
        rgb(16 15 11 / .66) 46%,
        rgb(16 15 11 / .3)  68%,
        rgb(16 15 11 / .06) 88%),
      linear-gradient(to bottom,
        rgb(16 15 11 / .72) 0%, rgb(16 15 11 / .28) 16%, rgb(16 15 11 / 0) 34%);
  }

  /* ── "O CHAMADO" NO CELULAR ──────────────────────────────
     No retrato a foto e a leitura estavam disputando o mesmo espaço: a
     fotografia parava no meio do primeiro parágrafo e o texto lia por cima
     do vulto — nem a foto aparecia inteira, nem o texto assentava no escuro.
     Aqui cada um ganha o seu campo, como o banner já faz na capa: a foto
     ocupa a faixa de cima da tela, a manchete assenta no pé dela sobre uma
     base escura, e a história começa exatamente onde a foto acaba, no breu.
     Vale só para esta página (o propósito e o versículo do dia têm o seu
     próprio enquadramento) e só daqui para baixo — o desktop não muda. */
  .capa-longa--chamado{
    /* a faixa cresce e passa a medir pela tela, não pelo tipo. O svh conta a
       altura visível do celular, sem o pulo da barra do navegador; a linha de
       cima é a reserva para quem ainda não entende svh. O teto em rem impede
       que a capa engula a tela inteira num aparelho alto. */
    --foto-h:clamp(22rem, 70vh, 36rem);
    --foto-h:clamp(22rem, 70svh, 36rem);

    /* o véu do corte fica com duas tarefas: pesar o topo, para o cabeçalho
       ler sobre o céu, e fechar em cor cheia onde a foto termina. O miolo
       abre bem mais que antes — é ali que o vulto aparece. O escuro da
       manchete saiu daqui: virou uma base presa ao pé da capa (::after), que
       acompanha o texto por mais linhas que ele venha a ter. */
    --veu-corte:linear-gradient(to bottom,
      rgb(var(--veu) / .80) 0,
      rgb(var(--veu) / .40) calc(var(--foto-h) * .16),
      rgb(var(--veu) / .18) calc(var(--foto-h) * .30),
      rgb(var(--veu) / .26) calc(var(--foto-h) * .55),
      rgb(var(--veu) / .48) calc(var(--foto-h) * .75),
      rgb(var(--veu) / .82) calc(var(--foto-h) * .90),
      rgb(var(--veu) / 1)   var(--foto-h));
  }

  /* o recorte pelo meio guardava só os punhos, e ainda cortava a mão na borda
     direita. Empurrado para cá, o vulto inteiro entra no quadro — mãos, braço
     e o perfil no alto — e o pôr do sol abre à esquerda dele.
     O brilho sobe um pouco pelo mesmo motivo do banner no retrato: num quadro
     mais estreito o escurecimento do duotone come justamente a luz que
     desenha a silhueta. */
  .capa-longa--chamado .capa-longa__media img{
    object-position:75% center;
    filter:grayscale(1) contrast(1.1) brightness(.95);
  }

  /* a capa passa a medir o mesmo que a faixa da foto: a manchete assenta no
     pé da fotografia e a leitura começa onde ela termina. É esta linha que
     faz um não atrapalhar o outro. Se o título quebrar em mais linhas do que
     cabe, a capa cresce e o excedente já nasce sobre o breu — nunca sobre a
     emenda. */
  .capa-longa--chamado .pagina-capa{
    min-height:var(--foto-h);
    padding-block-end:clamp(1.9rem,5.5vw,2.8rem);
  }

  /* a base escura da manchete. Presa ao pé da capa, ela sobe com o texto em
     vez de parar numa altura fixa: é o que segura a leitura no aparelho
     estreito, onde o título quebra em mais linhas, sem apagar a foto no
     aparelho largo, onde ele quebra em menos. */
  .capa-longa--chamado .pagina-capa::after{
    content:"";
    position:absolute; inset:auto 0 0; z-index:1;
    height:min(76%, 28rem);
    background:linear-gradient(to top,
      rgb(var(--veu) / .97) 0%,
      rgb(var(--veu) / .94) 26%,
      rgb(var(--veu) / .82) 48%,
      rgb(var(--veu) / .58) 68%,
      rgb(var(--veu) / .24) 86%,
      rgb(var(--veu) / 0)   100%);
    pointer-events:none;
  }

  /* a história agora abre no breu, sem foto por trás: ganha o respiro que a
     emenda pedia e uma entrelinha de leitura no celular — a 1,58 foi medida
     na coluna larga do desktop, e aqui a linha é bem mais curta. */
  .capa-longa--chamado .pagina-capa + .section{ padding-block-start:2.6rem; }
  .capa-longa--chamado .chamado__texto p{
    line-height:1.65;
    margin-bottom:1.15rem;
    text-wrap:pretty;   /* evita a última linha com uma palavra só */
  }

  /* ── "NOSSO PROPÓSITO" NO CELULAR ────────────────────────
     Mesmo problema do chamado, resolvido ao contrário — e o motivo é o
     enquadramento desta foto. Lá o vulto vive na metade de cima do quadro, e
     por isso a manchete pôde assentar no pé da imagem. Aqui o homem ajoelhado
     ocupa a metade de baixo, bem no meio: qualquer texto posto sobre o pé da
     foto cai justamente em cima dele — era o que acontecia, com os braços
     erguidos sumindo atrás do título e o alto da tela ocupado só por céu.
     Então no retrato a fotografia deixa de ser um fundo e vira um bloco: ela
     toma o alto da tela inteira, com a silhueta inteira dentro, e o texto
     começa logo abaixo, no escuro cheio. Um não passa mais por cima do outro.
     Só no celular: no desktop a foto continua correndo por trás da leitura. */
  .capa-longa--proposito{
    /* a faixa mede pela tela (svh não pula quando a barra do navegador some).
       Ela é mais baixa que a do chamado, e de propósito: aqui o texto não mora
       dentro dela, vem depois — e é este quadro mais largo que mantém o vulto
       inteiro no enquadre, com os braços abertos sem tocar as bordas. */
    --foto-h:clamp(19rem, 56vh, 28rem);
    --foto-h:clamp(19rem, 56svh, 28rem);

    /* o véu abre bem mais no miolo, que é onde a silhueta aparece, e fecha em
       cor cheia no fim da faixa, onde a leitura começa. O peso do topo é o que
       sustenta o cabeçalho sobre o céu. Como o texto não fica mais sobre a
       foto, não há base escura aqui — o escuro da manchete é o próprio fundo
       da página. */
    --veu-corte:linear-gradient(to bottom,
      rgb(var(--veu) / .80) 0,
      rgb(var(--veu) / .42) calc(var(--foto-h) * .14),
      rgb(var(--veu) / .20) calc(var(--foto-h) * .28),
      rgb(var(--veu) / .22) calc(var(--foto-h) * .58),
      rgb(var(--veu) / .46) calc(var(--foto-h) * .78),
      rgb(var(--veu) / .86) calc(var(--foto-h) * .92),
      rgb(var(--veu) / 1)   var(--foto-h));
  }

  /* o vulto fica um pouco à direita do meio, com o clarão do poente atrás
     dele e a nuvem escura abrindo à esquerda */
  .capa-longa--proposito .capa-longa__media img{
    object-position:58% center;
    filter:grayscale(1) contrast(1.1) brightness(.95);
  }

  /* a capa deixa de ser uma faixa por cima da foto: o recuo do alto reserva a
     altura dela inteira e o texto começa meio passo antes do fim, onde o véu
     já fechou — o suficiente para a manchete nascer colada na fotografia, sem
     nenhuma linha por cima do vulto. O min-height sai: quem dá altura agora é
     a foto mais o texto, e é isso que mantém tudo encaixado quando o título
     quebra em mais linhas. */
  .capa-longa--proposito .pagina-capa{
    min-height:0;
    padding-block:calc(var(--foto-h) - .5rem) clamp(1.9rem,5.5vw,2.8rem);
  }

  /* a leitura abre logo abaixo, no mesmo respiro do chamado, e com a
     entrelinha de celular: a 1,58 foi medida na coluna larga do desktop */
  .capa-longa--proposito .pagina-capa + .section{ padding-block-start:2.6rem; }
  .capa-longa--proposito .proposito__topo .lead,
  .capa-longa--proposito .proposito__nota{
    line-height:1.65;
    text-wrap:pretty;   /* evita a última linha com uma palavra só */
  }

  /* ── "ORAÇÃO DO DIA" NO CELULAR ──────────────────────────
     Aqui a foto some por completo no retrato: as mãos em concha nascem a um
     sexto do alto do quadro e descem até o pé dele, bem no meio — e a capa
     desta página é a mais comprida das três, porque ela não apresenta um
     assunto, ela é a oração inteira. O texto cobria a fotografia de ponta a
     ponta, e o sol entre as mãos, que é o motivo da imagem, ficava atrás do
     terceiro parágrafo.
     A saída é a do propósito, e por um motivo a mais: o que está escrito na
     capa muda todo dia. Com a foto virando bloco no alto da tela e o texto
     começando abaixo dela, uma oração de quatro linhas e uma de oito nascem
     igualmente encaixadas — a fotografia não depende mais do tamanho do
     texto, nem o texto do lugar onde a foto termina.
     Só no celular: no desktop a foto continua sendo o painel da direita. */
  .capa-longa--dia{
    /* mais baixa que a das outras duas: a oração é o conteúdo da página e
       precisa caber na tela junto com a imagem. Neste quadro as mãos entram
       inteiras, com folga dos dois lados, e o sol fica no meio. */
    --foto-h:clamp(18rem, 52vh, 26rem);
    --foto-h:clamp(18rem, 52svh, 26rem);

    /* o miolo abre quase de todo — é onde o sol e as mãos aparecem — e o véu
       fecha em cor cheia no fim da faixa, onde a oração começa. O peso do topo
       é o que sustenta o cabeçalho sobre o céu claro. */
    --veu-corte:linear-gradient(to bottom,
      rgb(var(--veu) / .78) 0,
      rgb(var(--veu) / .38) calc(var(--foto-h) * .14),
      rgb(var(--veu) / .16) calc(var(--foto-h) * .30),
      rgb(var(--veu) / .20) calc(var(--foto-h) * .58),
      rgb(var(--veu) / .46) calc(var(--foto-h) * .78),
      rgb(var(--veu) / .86) calc(var(--foto-h) * .92),
      rgb(var(--veu) / 1)   var(--foto-h));
  }

  /* o recorte continua no meio (as mãos são o centro da foto): o que muda é o
     brilho, pelo mesmo motivo do banner no retrato — num quadro menor o
     escurecimento do duotone apagava justamente o sol entre os dedos */
  .capa-longa--dia .capa-longa__media img{
    filter:grayscale(1) contrast(1.1) brightness(.95);
  }

  /* como no propósito: o recuo do alto reserva a faixa da foto inteira e a
     oração começa meio passo antes do fim dela, onde o véu já fechou. Sem
     min-height, a capa mede a foto mais o texto — é o que mantém tudo
     encaixado quando a oração do dia é mais comprida que esta. */
  .capa-longa--dia .pagina-capa{
    min-height:0;
    padding-block:calc(var(--foto-h) - .5rem) clamp(1.6rem,4.5vw,2.4rem);
  }

  /* a oração ganha a entrelinha de leitura no celular: a 1,5 foi medida no
     desktop, onde a linha tem quase o dobro de largura */
  .capa-longa--dia .pagina-capa__lead--dia{ line-height:1.58; }

  /* o vão até "hoje" continua curto de propósito (o que vem abaixo é a
     continuação da oração, não um assunto novo), mas agora ele é o único
     respiro entre os dois blocos: a emenda que a foto marcava saiu */
  .capa-longa--dia .pagina-capa + .section{ padding-block-start:1.9rem; }
  .capa-longa--dia .dia__foco{
    line-height:1.65;
    text-wrap:pretty;   /* evita a última linha com uma palavra só */
  }

  .contagem__grade{ gap:.45rem; }
  .contagem__bloco{ padding:.7rem .2rem; }
  .monte__acoes .btn,
  .convocar__acoes .btn,
  .convite__acoes .btn{ flex:1 1 100%; }
  .convocar__acoes{ width:100%; }

  /* no celular cada ação ocupa a linha inteira: alvo de toque largo e
     uma ordem de leitura só, de cima para baixo */
  .dia__acoes .btn{ flex:1 1 100%; }
  .rastro__mais{ width:100%; }

  .modo-oracao__pe{ flex-direction:column; align-items:stretch; }
  .modo-oracao__tempos .modo-oracao__min{ flex:1 1 0; }
  .modo-oracao__acoes .btn{ flex:1 1 100%; }

  /* o recado sobe para não cobrir a barra fixa */
  body.tem-barra .recado{ bottom:calc(6.2rem + env(safe-area-inset-bottom)); }

  .barra-movel{ display:flex; }

  /* o botão sobe para não cobrir a barra fixa (≈4,9rem de altura) */
  body.tem-barra .zap{
    bottom:calc(5.65rem + env(safe-area-inset-bottom));
  }
  .zap{ right:1rem; }
  .zap__icone{ width:3.25rem; height:3.25rem; }
  .zap__icone svg{ width:1.6rem; height:1.6rem; }

  /* alvo de toque no mínimo confortável (≈48px), sem apertar a fileira */
  .rodape__rede{ width:3rem; height:3rem; }
}

@media (max-width:400px){
  /* tela de 400px ou menos: a marca e o botão dividem ~320px de barra.
     Os dois cedem um pouco para que o nome do ministério continue inteiro
     numa linha só, que é o que ele precisa ser. */
  .brand{ --marca-icone:1.95rem; }
  .site-header__inner{ gap:.7rem; }
  .menu-toggle{ gap:.45rem; padding-inline:.6rem; margin-inline-end:-.6rem; }
  .menu-toggle__label{ font-size:.72rem; letter-spacing:.09em; }
  .menu-toggle__bars{ width:1.4rem; }

  .contagem__uni{ font-size:.55rem; letter-spacing:.1em; }

  /* tela estreita: "Ativar lembrete" e a contagem disputam a mesma linha.
     Os dois cedem um pouco, e a barra encosta nas bordas para devolver o
     que a margem da .shell estava tomando. A altura do botão não muda:
     é ela que garante o alvo de toque. */
  .barra-movel{
    gap:.65rem;
    padding-inline:1rem;
  }
  .barra-movel__quando{ font-size:.62rem; letter-spacing:.1em; }
  .barra-movel__count{ font-size:.98rem; }
  .barra-movel .btn{ padding-inline:.85rem; font-size:.67rem; letter-spacing:.06em; }
}

/* aparelhos de 320px: a marca em tamanho cheio e a palavra "Menu" não cabem
   mais lado a lado sem se tocarem. Entre encolher o nome do ministério e
   dispensar a palavra, dispensa-se a palavra: as duas barras já dizem o que
   o botão faz. O rótulo continua no HTML, só que agora apenas para o leitor
   de tela — é ele que dá nome ao botão, e o JS segue trocando Menu/Fechar. */
@media (max-width:350px){
  .menu-toggle{
    gap:0; min-width:3rem;
    justify-content:flex-end;
    padding-inline:.5rem; margin-inline-end:-.5rem;
  }
  .menu-toggle__label{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

/* ═══════════ 18. MOVIMENTO REDUZIDO ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    /* zerar a duração não bastava: as esperas continuavam de pé, e a escada
       do menu ainda levava um quarto de segundo para se completar. Quem pede
       menos movimento quer as coisas no lugar, e não depressa. */
    animation-delay:0s !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js .hero__title .line > span{ opacity:1; transform:none; }
  .barra-movel{ transform:none; }
  .barra-movel:not(.is-visivel){ display:none; }

  /* o modo oração e o recado aparecem inteiros, no lugar */
  .modo-oracao__cartao{ transform:none; }
  .recado{ transform:translate(-50%,0); }
}

/* ═══════════ 19. IMPRESSÃO ════════════════════════════ */
@media print{
  .site-header,.barra-movel,.zap,.hero__media,.hero__scrim,
  .monte__media,.monte__scrim,.convite__media,.convite__scrim,
  .pagina-capa__media,.pagina-capa__scrim,
  .capa-longa__media,.capa-longa__scrim,
  .modo-oracao,.recado,.rastro__mais,.dia__acoes,
  .section--adiante,.lugar__quadro{ display:none !important; }
  /* a base escura da manchete no celular (item 17) não vale no papel, e a
     capa volta a medir pelo texto: as regras de lá são mais específicas que
     esta, e num papel estreito o @media do celular também vale */
  .capa-longa--chamado .pagina-capa::after{ display:none !important; }
  .pagina-capa,
  .capa-longa--chamado .pagina-capa,
  .capa-longa--proposito .pagina-capa,
  .capa-longa--dia .pagina-capa{ min-height:0; padding-block:0 1.5rem; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; }
}