/* =============================================================
   Ministério Esperança 3.0 · folha de estilo do site
   -------------------------------------------------------------
   Índice
    01. Fontes
    02. Tokens
    03. Base e tipografia
    04. Estrutura e utilitários
    05. Ornamentos (folha, foto, citação, listas)
    06. Barra de progresso, cabeçalho e menu
    07. Botões
    08. Abertura (capa)
    09. Quem somos
    10. Propósito e valores
    11. Frentes de atuação
    12. Trajetória
    13. Agenda
    14. Equipe
    15. Galeria: álbuns e foto ampliada
    16. Seja voluntário
    17. Rodapé
    18. Diálogos
    19. Revelação ao rolar
    20. Tela de entrar
    21. Telas menores e movimento reduzido

   Regras herdadas do 2.0: cor sempre por token de :root, nunca valor
   solto; classes em português. O modo de edição mora em editor.css.

   Efeitos de rolagem (docs/06): o site.js escreve --p (0 a 1, o quanto
   o elemento já passou pela tela) em cada [data-progresso] e --rolagem
   (0 a 1, a página inteira) no <html>. O CSS só lê essas variáveis.
   ============================================================= */

/* 01. Fontes ------------------------------------------------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fontes/fraunces-latin.069cb90e11a3.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-latin.260c81a4759b.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+2212, U+FEFF, U+FFFD;
}

/* 02. Tokens ------------------------------------------------- */

:root {
  color-scheme: light;

  /* Verdes tirados do logotipo (os mesmos do 2.0). --verde é a cor da marca. */
  --verde-900: #1e2c1c;
  --verde-800: #2a3f27;
  --verde-700: #375232;
  --verde-600: #4e7549;
  --verde: #4e7549;
  --verde-500: #628c5b;
  --verde-400: #86aa7d;
  --verde-300: #b0c8a8;
  --verde-200: #d5e2cf;
  --verde-100: #ecf2e8;

  --papel: #f8f5ed;
  --papel-quente: #f2ece0;
  --areia: #e6decb;
  --branco: #fffdf8;

  --tinta: #1f241c;
  --tinta-media: #545f4f;
  --tinta-fraca: #86907f;

  --ambar: #b8823f;
  --ambar-escuro: #8f6427;
  --ambar-claro: #e3c493;
  --ambar-fraco: #f4e9d6;
  --ambar-luz: #fff3d6;

  /* Cancelado, na agenda. */
  --terra: #a4533d;
  --terra-fraco: #f5e1da;

  /* Cor de cada frente, na ordem em que aparecem (repete de 3 em 3). */
  --frente-1: #4e7549;
  --frente-2: #b8823f;
  --frente-3: #5c7f8a;

  --veu: rgba(20, 30, 18, 0.6);

  /* Grão de papel: ruído desenhado em SVG, sem requisição. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --largura: 1180px;
  --largura-texto: 64ch;
  --margem: clamp(1.15rem, 5vw, 3.5rem);
  --respiro: clamp(4.5rem, 10vw, 8.5rem);

  --raio: 14px;
  --raio-g: 26px;
  /* A moldura-folha: dois cantos redondos opostos, como a folha do logotipo. */
  --raio-folha: clamp(3rem, 9vw, 7.5rem) var(--raio-g) clamp(3rem, 9vw, 7.5rem) var(--raio-g);
  --raio-folha-espelho: var(--raio-g) clamp(3rem, 9vw, 7.5rem) var(--raio-g) clamp(3rem, 9vw, 7.5rem);
  /* Cada seção é uma "folha" que sobe por cima da anterior. */
  --raio-secao: clamp(1.75rem, 5vw, 4.5rem);

  --sombra-p: 0 1px 2px rgba(31, 36, 28, 0.05), 0 4px 12px -6px rgba(31, 36, 28, 0.1);
  --sombra-m: 0 2px 6px rgba(31, 36, 28, 0.05), 0 14px 34px -18px rgba(31, 36, 28, 0.24);
  --sombra-g: 0 4px 12px rgba(31, 36, 28, 0.06), 0 30px 60px -28px rgba(31, 36, 28, 0.3);

  --curva: cubic-bezier(0.22, 0.68, 0, 1);
  --curva-suave: cubic-bezier(0.33, 1, 0.68, 1);
  --cabecalho: 78px;
}

/* 03. Base e tipografia -------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: sem isso a âncora para atrás dele. */
  scroll-padding-top: calc(var(--cabecalho) - 1px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--verde-900);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  color: var(--verde-900);
}
h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.6rem);
}
h2 {
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.05rem);
}
h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
}
h4 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

a {
  color: var(--verde-700);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
}

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

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

em {
  font-style: italic;
}

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--verde-200);
  color: var(--verde-900);
}

/* 04. Estrutura e utilitários -------------------------------- */

.shell {
  width: min(100% - var(--margem) * 2, var(--largura));
  margin-inline: auto;
}

.secao {
  position: relative;
  padding-block: var(--respiro);
  background: var(--papel);
  /* clip, e não hidden: hidden quebraria o "sticky" das frentes. */
  overflow-x: clip;
  isolation: isolate;
}
/* O grão fica por cima do fundo e por baixo do conteúdo (z-index -1 dentro
   do isolate). Nas seções escuras, invertido, vira um brilho leve. */
.secao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grao);
  opacity: 0.22;
  pointer-events: none;
}
:is(.secao--capa, .secao--proposito, .secao--participe)::before {
  filter: invert(1);
  opacity: 0.12;
}
.secao + .secao {
  margin-top: calc(var(--raio-secao) * -1);
  padding-top: calc(var(--respiro) + var(--raio-secao) * 0.5);
  border-radius: var(--raio-secao) var(--raio-secao) 0 0;
  box-shadow: 0 -24px 48px -36px rgba(20, 30, 18, 0.35);
}

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-600);
  margin-bottom: 1.1rem;
}
.rotulo::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.55;
}
/* O fio do rótulo se desenha quando o bloco aparece. */
.js .rotulo::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--curva) 0.25s;
}
.js .visivel .rotulo::before,
dialog .rotulo::before {
  transform: none;
}

.titulo-secao {
  max-width: 22ch;
}
.titulo-secao--centro {
  margin-inline: auto;
  text-align: center;
}

.apoio {
  max-width: var(--largura-texto);
  color: var(--tinta-media);
  font-size: 1.08em;
}
.apoio--centro {
  margin-inline: auto;
  text-align: center;
}

.cabecalho-secao {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cabecalho-secao--centro {
  text-align: center;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  background: var(--verde-800);
  color: var(--branco);
  padding: 0.7rem 1.1rem;
  border-radius: var(--raio);
  transform: translateY(-160%);
  transition: transform 0.2s var(--curva);
}
.pular:focus {
  transform: none;
}

/* Seções escuras: texto claro. */
.secao--proposito,
.secao--participe {
  color: var(--verde-100);
}
.secao--proposito :is(h2, h3, h4),
.secao--participe :is(h2, h3),
.secao--proposito strong,
.secao--participe strong {
  color: var(--branco);
}
.secao--proposito .rotulo,
.secao--participe .rotulo {
  color: var(--verde-300);
}
.secao--proposito .apoio,
.secao--participe .apoio {
  color: var(--verde-200);
}

/* 05. Ornamentos --------------------------------------------- */

.folha {
  border-radius: var(--raio-folha);
}

/* Folhas soltas: decoração da capa e do convite, cada uma subindo numa
   velocidade (--v) conforme a rolagem, além do balanço contínuo. */
.folha-solta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--t);
  aspect-ratio: 1;
  border-radius: 0 72% 0 72%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--verde-400) 45%, transparent),
    color-mix(in srgb, var(--verde-600) 12%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--verde-300) 28%, transparent);
  translate: calc(var(--cx, 0) * var(--v) * 0.12px) calc(var(--p, 0) * var(--v) * -1px + var(--cy, 0) * var(--v) * 0.12px);
  transform: rotate(var(--r));
  animation: balancar 11s ease-in-out infinite alternate;
  transition: translate 0.9s var(--curva-suave);
}
.folha-solta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 49%,
    color-mix(in srgb, var(--branco) 30%, transparent) 50%,
    transparent 51%
  );
}
@keyframes balancar {
  to {
    transform: rotate(calc(var(--r) + 14deg)) translateY(-18px);
  }
}

/* Lugar de foto. Vazio, mostra a marca sobre o verde, com um brilho que
   passa: parece intenção, não falta. */
.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--verde-100);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto--vazia {
  min-height: 12rem;
  background: radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--branco) 22%, transparent), transparent 55%),
    linear-gradient(150deg, var(--cor-foto, var(--verde-600)), var(--verde-900));
}
.foto--vazia::before {
  content: "";
  position: absolute;
  inset: 26%;
  background: url("../marca/marca.0884db16a3db.png") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.18;
}
.foto--vazia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--branco) 14%, transparent) 50%, transparent 65%);
  translate: -100% 0;
  animation: brilho 6s ease-in-out infinite;
}
@keyframes brilho {
  60%,
  100% {
    translate: 100% 0;
  }
}

.citacao {
  margin: 2.2rem 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ambar);
}
.citacao p {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--verde-800);
  margin-bottom: 0.55rem;
}
.citacao cite {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-escuro);
}
.citacao--pequena p {
  font-size: 1.05rem;
}
.secao--proposito .citacao p {
  color: var(--verde-100);
}
.secao--proposito .citacao cite {
  color: var(--ambar-claro);
}

/* Lista com folhinha no lugar da bolinha. */
.lista-folhas {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}
.lista-folhas li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.65rem;
}
.lista-folhas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0 70% 0 70%;
  background: var(--verde-500);
}
.secao--proposito .lista-folhas li::before,
.lista-folhas--clara li::before {
  background: var(--ambar-claro);
}
/* Lista sem nenhum item (uma frente sem destaques) não deixa buraco. */
.lista-folhas:empty,
.frente__destaques:empty {
  display: none;
}

/* Brilho que segue o mouse ([data-brilho]; o site.js escreve --mx e --my). */
[data-brilho] {
  position: relative;
}
[data-brilho]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--ambar-claro) 28%, transparent),
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--curva);
}
[data-brilho]:hover::after {
  opacity: 1;
}

/* Inclinação 3D ([data-inclinar]; o site.js gira pelo "rotate"). A
   perspectiva fica no pai, para não brigar com o transform da revelação. */
[data-inclinar] {
  transition: rotate 0.5s var(--curva);
}
.sobre,
.valores__grade,
.ajudas__grade,
.albuns {
  perspective: 1100px;
}

/* Aspas grandes em todo versículo. */
.citacao {
  position: relative;
}
.citacao::before {
  content: "\201C";
  position: absolute;
  top: -2.7rem;
  left: -0.4rem;
  font-family: var(--serif);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--ambar);
  opacity: 0.22;
  pointer-events: none;
}

/* 06. Barra de progresso, cabeçalho e menu ------------------- */

.progresso {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  height: 3px;
  background: linear-gradient(90deg, var(--verde-400), var(--ambar));
  transform-origin: left;
  transform: scaleX(var(--rolagem, 0));
}

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--cabecalho);
  display: flex;
  align-items: center;
  color: var(--branco);
  transition: height 0.35s var(--curva), color 0.35s var(--curva);
}
.cabecalho::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--areia) 80%, transparent);
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}
.cabecalho.rolou {
  height: 64px;
  color: var(--tinta);
}
.cabecalho.rolou::before {
  opacity: 1;
}

.cabecalho__shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: min(100% - var(--margem) * 1.2, calc(var(--largura) + 120px));
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}
.marca__logo {
  width: 42px;
  background: none;
  overflow: visible;
  transition: width 0.35s var(--curva);
}
.marca__logo img {
  height: auto;
  object-fit: contain;
  transition: filter 0.35s var(--curva);
}
.cabecalho:not(.rolou) .marca__logo img {
  filter: brightness(0) invert(1);
}
.cabecalho.rolou .marca__logo {
  width: 34px;
}
.marca__nome {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.marca__nome b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marca__nome span {
  font-size: 0.64rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 500;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
}
.nav a {
  position: relative;
  font-size: 0.93rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  padding-block: 0.35rem;
  white-space: nowrap;
  opacity: 0.86;
  transition: opacity 0.25s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--curva);
}
.nav a:hover,
.nav a[aria-current] {
  opacity: 1;
}
.nav a:hover::after,
.nav a[aria-current]::after {
  transform: scaleX(1);
}
/* O botão em destaque vem sempre por último, seja qual for a ordem das seções. */
.nav .nav__destaque {
  order: 1;
  transition: translate 0.35s var(--curva), background 0.35s, color 0.35s;
  padding: 0.55rem 1.2rem;
  border-radius: 100px;
  background: var(--branco);
  color: var(--verde-900);
  font-weight: 600;
  opacity: 1;
}
.nav .nav__destaque::after {
  display: none;
}
.cabecalho.rolou .nav__destaque {
  background: var(--verde-700);
  color: var(--branco);
}

.cabecalho__botao {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.sanduiche,
.sanduiche::before,
.sanduiche::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--curva), background 0.2s;
}
.sanduiche {
  position: relative;
}
.sanduiche::before,
.sanduiche::after {
  content: "";
  position: absolute;
  left: 0;
}
.sanduiche::before {
  top: -6px;
}
.sanduiche::after {
  top: 6px;
}
.aberto .sanduiche {
  background: transparent;
}
.aberto .sanduiche::before {
  transform: translateY(6px) rotate(45deg);
}
.aberto .sanduiche::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* 07. Botões ------------------------------------------------- */

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-start;
}

.botao {
  --bg: var(--verde-700);
  --fg: var(--branco);
  --sobe: var(--verde-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva), border-color 0.3s var(--curva),
    translate 0.35s var(--curva);
}
/* O preenchimento que sobe de baixo no hover. */
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sobe);
  transform: translateY(101%);
  transition: transform 0.45s var(--curva);
}
.botao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-m);
}
.botao:hover::before {
  transform: none;
}
.botao svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.35s var(--curva);
}
.botao:hover svg {
  transform: translateX(3px);
}

.botao--claro {
  --bg: var(--branco);
  --fg: var(--verde-900);
  --sobe: var(--verde-100);
}
.botao--fantasma {
  --bg: transparent;
  --fg: var(--branco);
  --sobe: color-mix(in srgb, var(--branco) 16%, transparent);
  border-color: color-mix(in srgb, var(--branco) 40%, transparent);
}
.botao--vazado {
  --bg: transparent;
  --fg: var(--verde-800);
  border-color: color-mix(in srgb, var(--verde-600) 38%, transparent);
}
.botao--vazado:hover {
  --fg: var(--branco);
}
.botao--grande {
  padding: 1.1rem 2.1rem;
  font-size: 1.02rem;
}
.botao--pulso {
  animation: pulso 2.8s ease-out infinite;
}
@keyframes pulso {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--branco) 45%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 20px color-mix(in srgb, var(--branco) 0%, transparent);
  }
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--cor, var(--verde-700)) 78%, var(--tinta));
  cursor: pointer;
}
.link-seta svg {
  width: 17px;
  height: 17px;
  transition: transform 0.35s var(--curva);
}
.link-seta:hover svg {
  transform: translateX(4px);
}

/* 08. Abertura (capa) ---------------------------------------- */

.secao--capa {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: calc(var(--cabecalho) + 3rem) calc(var(--raio-secao) + clamp(3.5rem, 9vh, 6rem));
  color: var(--branco);
  background: radial-gradient(120% 80% at 88% 8%, color-mix(in srgb, var(--verde-500) 70%, transparent) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--ambar) 32%, transparent) 0%, transparent 60%),
    var(--verde-900);
  isolation: isolate;
  overflow: clip;
}

.capa__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.capa__marca {
  position: absolute;
  right: -7vw;
  bottom: -10vh;
  width: min(64vw, 760px);
  opacity: 0.07;
  filter: brightness(0) invert(1);
  rotate: calc(var(--p, 0) * 26deg);
  scale: calc(1 + var(--p, 0) * 0.25);
  translate: calc(var(--cx, 0) * -36px) calc(var(--cy, 0) * -36px);
  transition: translate 1.2s var(--curva-suave);
}

/* Sementes de luz subindo, cada uma no seu ritmo (--d) e começando num
   ponto diferente do caminho (atraso negativo --a). */
.semente {
  position: absolute;
  left: var(--x);
  bottom: -2%;
  width: var(--t);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ambar-claro);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--ambar-claro) 55%, transparent);
  opacity: 0;
  animation: semear var(--d) linear infinite;
  animation-delay: calc(var(--a) * -1);
}
@keyframes semear {
  10% {
    opacity: 0.75;
  }
  50% {
    transform: translate(18px, -55vh);
  }
  85% {
    opacity: 0.45;
  }
  100% {
    transform: translate(-12px, -105vh);
    opacity: 0;
  }
}

/* Com foto, a capa vira foto com véu; sem foto, fica o verde com folhas. */
.capa__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.capa__foto.foto--vazia {
  display: none;
}
.capa__foto img {
  scale: calc(1.04 + var(--p, 0) * 0.14);
  animation: aproximar 24s var(--curva-suave) backwards;
}
.capa__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--veu) 0%, transparent 38%, var(--veu) 76%, var(--verde-900) 100%),
    linear-gradient(100deg, var(--veu) 0%, transparent 65%);
}
@keyframes aproximar {
  from {
    scale: 1.16;
  }
}

.capa__conteudo {
  max-width: 760px;
  translate: 0 calc(var(--p, 0) * -110px);
  opacity: calc(1 - var(--p, 0) * 1.5);
  filter: blur(calc(var(--p, 0) * 6px));
}
.capa__etiqueta {
  display: inline-block;
  margin: 0;
  padding: 0.45rem 1.05rem;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--branco) 24%, transparent);
  background: color-mix(in srgb, var(--branco) 8%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-100);
  animation: aparecer 1s var(--curva) 0.1s backwards;
}
.secao--capa h1 {
  margin: 1.3rem 0 1.4rem;
  font-size: clamp(2.8rem, 1.5rem + 5.6vw, 5.8rem);
  line-height: 1.02;
  color: var(--branco);
}
/* "recomeçar": dourado com um reflexo que passa devagar. */
.secao--capa h1 em {
  padding-right: 0.06em;
  color: transparent;
  background: linear-gradient(100deg, var(--ambar-claro) 30%, var(--ambar-luz) 48%, var(--ambar-claro) 66%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: reluzir 7s ease-in-out 1.6s infinite;
}
@keyframes reluzir {
  50% {
    background-position: 0 0;
  }
}
/* Cada linha do título sobe de baixo, uma depois da outra. */
.linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.linha > span {
  display: block;
  animation: subir 1.1s var(--curva) backwards;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.2s);
}
.capa__texto {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--verde-100);
  animation: aparecer 1s var(--curva) 0.55s backwards;
}
.secao--capa .botoes {
  margin-top: 2.1rem;
  animation: aparecer 1s var(--curva) 0.75s backwards;
}
.secao--capa .botao {
  --bg: transparent;
  --fg: var(--branco);
  --sobe: color-mix(in srgb, var(--branco) 16%, transparent);
  border-color: color-mix(in srgb, var(--branco) 40%, transparent);
}
.secao--capa .botoes__item:first-child .botao {
  --bg: var(--branco);
  --fg: var(--verde-900);
  --sobe: var(--ambar-claro);
  border-color: transparent;
}

.capa__rolar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--raio-secao) + 0.4rem);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--verde-200);
  opacity: calc(1 - var(--p, 0) * 5);
}
.capa__rolar::after {
  content: "";
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--verde-200), transparent);
  animation: escorrer 2.2s var(--curva-suave) infinite;
}
@keyframes escorrer {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes subir {
  from {
    transform: translateY(105%);
    opacity: 0;
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* 09. Quem somos --------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.sobre__texto > div > p {
  color: var(--tinta-media);
  text-align: justify;
  hyphens: auto;
}
.sobre__visual {
  position: relative;
}
.sobre__moldura .foto {
  aspect-ratio: 4 / 5;
}
/* Paralaxe dentro da moldura: a foto corre mais devagar que a página. */
.sobre__moldura .foto img {
  scale: 1.18;
  translate: 0 calc((var(--p, 0.5) - 0.5) * -90px);
}
.sobre__selo {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -0.5rem);
  bottom: 2.2rem;
  width: 9.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  padding: 1rem;
  text-align: center;
  background: var(--ambar);
  color: var(--branco);
  box-shadow: var(--sombra-g);
}
.sobre__selo::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--ambar) 70%, transparent);
  animation: girar 26s linear infinite;
}
.sobre__selo strong {
  display: block;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--branco);
}
.sobre__selo span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.25;
}
.sobre__selo::after {
  content: "";
  position: absolute;
  top: -14px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ambar-claro);
  box-shadow: 0 0 10px 2px var(--ambar-claro);
  transform-origin: 5px calc(4.75rem + 14px);
  animation: girar 10s linear infinite;
}
@keyframes girar {
  to {
    rotate: 360deg;
  }
}

/* 10. Propósito e valores ------------------------------------ */

.secao--proposito {
  background: var(--verde-800);
}

/* A faixa de palavras corre para o lado conforme a rolagem. O conteúdo
   vem duas vezes, e -50% é exatamente uma volta. */
.faixa {
  overflow: clip;
  margin: -1rem 0 clamp(3rem, 7vw, 5.5rem);
}
.faixa__trilho {
  display: flex;
  width: max-content;
  translate: calc(var(--p, 0) * -50%) 0;
}
.faixa__trilho > span {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 500;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--verde-300) 60%, transparent);
}
.faixa__trilho > span::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 0 70% 0 70%;
  background: var(--ambar);
}
/* A segunda fileira, menor, corre no sentido contrário. */
.faixa__trilho--volta {
  margin-top: 0.3rem;
  translate: calc(-50% + var(--p, 0) * 50%) 0;
}
.faixa__trilho--volta > span {
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  -webkit-text-stroke-color: color-mix(in srgb, var(--ambar-claro) 45%, transparent);
}
.faixa__trilho--volta > span::after {
  background: var(--verde-400);
}

.proposito {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.proposito__missao {
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--raio-folha);
  background: color-mix(in srgb, var(--branco) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-300) 22%, transparent);
}
.proposito__missao > p {
  color: var(--verde-200);
}

.valores {
  margin-top: var(--respiro);
}
.valores__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.valor {
  position: relative;
  padding: 1.9rem 1.7rem;
  border-radius: var(--raio-g);
  background: color-mix(in srgb, var(--branco) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-300) 18%, transparent);
  transition: translate 0.45s var(--curva), background 0.45s, border-color 0.45s;
}
.valor:hover {
  translate: 0 -6px;
  background: color-mix(in srgb, var(--branco) 9%, transparent);
  border-color: color-mix(in srgb, var(--ambar-claro) 55%, transparent);
}
.valor__folha {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 1.2rem;
  border-radius: 0 70% 0 70%;
  background: linear-gradient(135deg, var(--ambar-claro), var(--ambar));
  transition: rotate 0.6s var(--curva);
}
.valor:hover .valor__folha {
  rotate: 90deg;
}
/* A folhinha brota quando o cartão aparece. */
.js .valor .valor__folha {
  scale: 0;
  rotate: -120deg;
  transition: scale 0.8s var(--curva), rotate 0.8s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms + 0.35s);
}
.js .valor.visivel .valor__folha {
  scale: 1;
  rotate: 0deg;
}
.js .valor.visivel:hover .valor__folha {
  rotate: 90deg;
  transition-delay: 0s;
}
.valor h3 {
  font-size: 1.28rem;
}
.valor p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--verde-200);
}

/* 11. Frentes de atuação ------------------------------------- */

.secao--frentes {
  background: var(--papel-quente);
}
.frentes__lista {
  display: grid;
  gap: clamp(1.5rem, 5vh, 3.5rem);
}

.frente {
  --cor: var(--frente-1);
  --cor-foto: var(--cor);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  border-radius: var(--raio-g);
  border-top: 6px solid var(--cor);
  background: var(--branco);
  box-shadow: var(--sombra-g);
  position: relative;
  scale: calc(1 - var(--coberto, 0) * 0.05);
  transform-origin: 50% 0;
}
/* --coberto: quanto o próximo cartão já subiu por cima deste (site.js). */
.frente::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: var(--verde-900);
  opacity: calc(var(--coberto, 0) * 0.3);
  pointer-events: none;
}
.frente__visual .foto img {
  transition: scale 1.2s var(--curva);
}
.frente:hover .frente__visual .foto img {
  scale: 1.05;
}
.frente:nth-child(3n + 2) {
  --cor: var(--frente-2);
}
.frente:nth-child(3n + 3) {
  --cor: var(--frente-3);
}
.frente:nth-child(even) .frente__visual {
  order: -1;
}
.frente:nth-child(even) .folha {
  border-radius: var(--raio-folha-espelho);
}

/* As frentes se empilham: cada cartão para no topo e o próximo sobe por
   cima. Só em tela grande e alta o bastante para caber um cartão inteiro. */
@media (min-width: 900px) and (min-height: 700px) {
  .frente {
    position: sticky;
    top: calc(64px + 1.25rem + var(--n, 0) * 1.4rem);
    min-height: min(72vh, 620px);
  }
}

.frente__titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
}
.frente__resumo {
  color: var(--tinta-media);
  text-align: justify;
  hyphens: auto;
}
.frente__destaques {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.frente__destaques li {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.15rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cor) 10%, var(--branco));
}
.frente__destaques strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.1;
  color: color-mix(in srgb, var(--cor) 80%, var(--tinta));
}
.frente__destaques span {
  font-size: 0.8rem;
  color: var(--tinta-media);
}
.frente .citacao {
  border-color: var(--cor);
}
.frente .citacao cite {
  color: color-mix(in srgb, var(--cor) 75%, var(--tinta));
}
.frente__visual .foto {
  aspect-ratio: 1 / 1.05;
}

.bloco + .bloco {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--areia);
}
.bloco h4 {
  color: var(--verde-800);
}
.bloco > p {
  color: var(--tinta-media);
}
.bloco__fecho {
  margin-top: 1.2rem;
}

/* 12. Trajetória --------------------------------------------- */

.linha-tempo {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
}
.linha-tempo__trilho {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--areia);
}
/* O trilho se enche de cima para baixo conforme a leitura avança. */
.linha-tempo__trilho::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--verde-500), var(--ambar));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
/* A ponta do trilho: um ponto de luz que desce com a leitura. */
.linha-tempo__trilho::before {
  content: "";
  position: absolute;
  top: calc(var(--p, 0) * 100%);
  left: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ambar) 22%, transparent),
    0 0 22px 4px color-mix(in srgb, var(--ambar) 50%, transparent);
  opacity: min(var(--p, 0) * 20, 1);
}
.linha-tempo__marcos {
  display: grid;
  gap: clamp(3rem, 9vh, 6rem);
}
.marco {
  position: relative;
  width: calc(50% - 3rem);
}
.marco:nth-child(odd) {
  --de: translateX(-56px);
}
.marco:nth-child(even) {
  --de: translateX(56px);
  margin-left: auto;
}
.marco__ponto {
  position: absolute;
  top: 1.1rem;
  right: calc(-3rem - 0.6rem);
  width: 1.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--verde-400);
  background: var(--papel);
  transition: background 0.6s var(--curva) 0.3s, box-shadow 0.6s var(--curva) 0.3s;
}
.marco:nth-child(even) .marco__ponto {
  right: auto;
  left: calc(-3rem - 0.6rem);
}
/* Quando o marco aparece, o ponto solta duas ondas. */
.marco__ponto::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--verde-500);
  opacity: 0;
}
.marco.visivel .marco__ponto::after {
  animation: onda 1.8s var(--curva-suave) 0.45s 2;
}
@keyframes onda {
  from {
    scale: 1;
    opacity: 0.8;
  }
  to {
    scale: 3.4;
    opacity: 0;
  }
}
.marco.visivel .marco__ponto {
  background: var(--verde-600);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--verde-400) 28%, transparent);
}
/* O ano entra só no contorno e se preenche da esquerda para a direita. */
.marco__ano {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 6rem);
  font-weight: 600;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--verde-500);
  background: linear-gradient(var(--verde-700), var(--verde-700)) left / 0% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 1.4s var(--curva) 0.35s;
}
.marco.visivel .marco__ano {
  background-size: 100% 100%;
}
.marco__corpo {
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  border-radius: var(--raio-g);
  border: 1px solid color-mix(in srgb, var(--areia) 70%, transparent);
  background: var(--branco);
  box-shadow: var(--sombra-m);
}
.marco__corpo p:last-child {
  margin-bottom: 0;
}
.marco__corpo p {
  color: var(--tinta-media);
  text-align: justify;
  hyphens: auto;
}

/* 13. Agenda ------------------------------------------------- */

.secao--agenda {
  background: var(--papel-quente);
}
.agenda__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 1rem;
}
.encontro {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  border-radius: var(--raio-g);
  border: 1px solid color-mix(in srgb, var(--areia) 70%, transparent);
  background: var(--branco);
  box-shadow: var(--sombra-p);
  transition: translate 0.35s var(--curva), box-shadow 0.35s var(--curva);
}
.encontro:hover {
  translate: 0 -3px;
  box-shadow: var(--sombra-m);
}
.encontro__data {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 20px 20px 20px 6px;
  background: var(--verde-700);
  color: var(--branco);
  text-align: center;
  line-height: 1;
}
.encontro__data strong {
  font-family: var(--serif);
  font-size: 2.05rem;
  color: inherit;
}
.encontro__data span {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* A data vira como folhinha de calendário quando o cartão aparece. */
.js .encontro.visivel .encontro__data {
  animation: virar 0.9s var(--curva) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 0.2s);
}
@keyframes virar {
  from {
    transform: perspective(420px) rotateY(-90deg);
    opacity: 0;
  }
}
.encontro h3 {
  margin: 0.4rem 0 0.4rem;
  font-size: 1.14rem;
  line-height: 1.25;
}
.encontro p {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  color: var(--tinta-media);
}
.encontro__etiqueta {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
  background: var(--ambar-fraco);
  color: var(--ambar-escuro);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
p.encontro__hora {
  font-weight: 600;
  color: var(--verde-700);
}
.encontro--passado {
  opacity: 0.8;
}
.encontro--passado .encontro__data {
  background: var(--areia);
  color: var(--tinta-media);
}
.encontro--passado .encontro__etiqueta {
  background: var(--verde-100);
  color: var(--verde-700);
}
.encontro--andamento .encontro__data {
  background: var(--verde-500);
}
.encontro--andamento .encontro__etiqueta {
  background: var(--verde-100);
  color: var(--verde-700);
}
.encontro--cancelado .encontro__data {
  background: var(--terra);
}
.encontro--cancelado .encontro__etiqueta {
  background: var(--terra-fraco);
  color: var(--terra);
}
/* O próximo encontro: primeiro da lista, largo, com o "faltam N dias". */
.encontro--destaque {
  order: -1;
  border: 1.5px solid color-mix(in srgb, var(--ambar) 55%, transparent);
  background: linear-gradient(120deg, var(--branco) 55%, var(--ambar-fraco));
  box-shadow: var(--sombra-g);
}
.encontro--destaque .encontro__data {
  background: var(--ambar);
}
.encontro--destaque h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
}
@media (min-width: 900px) {
  .encontro--destaque {
    grid-column: 1 / -1;
    grid-template-columns: 6.5rem 1fr;
    padding: 1.6rem;
  }
}
p.encontro__proximo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar-escuro);
}
.encontro__proximo span {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ambar);
  animation: batida 1.8s ease-out infinite;
}
@keyframes batida {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ambar) 60%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--ambar) 0%, transparent);
  }
}
/* Os que já passaram ficam atrás do botão (sem JavaScript, aparecem). */
.js .encontro--passado {
  display: none;
}
.js .agenda--tudo .encontro--passado {
  display: grid;
}
.agenda__anteriores {
  margin-top: 2rem;
}

/* 14. Equipe ------------------------------------------------- */

.equipe__grupos {
  max-width: 900px;
  margin-inline: auto;
}
.grupo {
  position: relative;
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.5rem;
  margin-inline: -0.9rem;
  padding: 1.5rem 0.9rem;
  border-radius: var(--raio);
  transition: background 0.45s var(--curva);
}
.grupo:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ambar-fraco) 80%, transparent), transparent 85%);
}
/* A linha de cada grupo se desenha quando ele aparece. */
.grupo::after {
  content: "";
  position: absolute;
  inset: auto 0.9rem 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ambar), var(--areia) 45%);
  transform-origin: left;
}
.js .grupo::after {
  transform: scaleX(0);
  transition: transform 1.2s var(--curva) calc(var(--i, 0) * 90ms + 0.2s);
}
.js .grupo.visivel::after {
  transform: none;
}
.grupo__funcao::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.55rem;
  border-radius: 0 70% 0 70%;
  background: var(--ambar);
}
.equipe__grupos {
  border-top: 1px solid var(--areia);
}
.grupo__funcao {
  margin: 0.45rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-escuro);
}
.grupo__nomes {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--verde-900);
}

/* 15. Galeria: álbuns e foto ampliada ----------------------- */

.secao--galeria {
  background: var(--papel-quente);
}
.albuns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.2rem);
}

/* A capa do álbum, com duas folhas atrás que abrem em leque no hover. */
.album__capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  isolation: isolate;
}
.album__capa::before,
.album__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--raio-g);
  background: var(--areia);
  box-shadow: var(--sombra-p);
  rotate: -4deg;
  transition: rotate 0.55s var(--curva), translate 0.55s var(--curva);
}
.album__capa::after {
  background: var(--verde-200);
  rotate: 3deg;
}
.album__capa:hover::before {
  rotate: -9deg;
  translate: -12px 0;
}
.album__capa:hover::after {
  rotate: 8deg;
  translate: 12px 0;
}
.album__moldura {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-m);
}
.album__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--curva);
}
.album__capa:hover img {
  scale: 1.06;
}
.album__qtd {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--verde-900) 75%, transparent);
  backdrop-filter: blur(4px);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 600;
}
.album__texto {
  margin-top: 1.3rem;
}
.album__texto h3 {
  margin-bottom: 0.35rem;
  font-size: 1.3rem;
}
.album__texto p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--tinta-media);
}

/* A janela do álbum aberto. */
.album__janela {
  width: min(100% - 2rem, 1120px);
  background: var(--papel);
}
.album__janela-corpo {
  position: relative;
  padding: clamp(1.6rem, 4vw, 3rem);
}
.album__janela h3 {
  padding-right: 3rem;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}
.album__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.album__miniatura {
  display: block;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--verde-100);
  cursor: zoom-in;
}
.album__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--curva);
}
.album__miniatura:hover img {
  scale: 1.08;
}
/* As miniaturas entram em sequência quando o álbum abre. */
.album__janela[open] .album__miniatura {
  animation: aparecer 0.6s var(--curva) backwards;
  animation-delay: calc(min(var(--k, 0), 12) * 45ms + 0.1s);
}

/* A foto ampliada, por cima do álbum, passando de uma em uma. */
.ampliada {
  width: min(100% - 2rem, 1100px);
  background: var(--verde-900);
}
.ampliada__corpo {
  position: relative;
  padding: 3.4rem 1rem 1rem;
}
/* Foto + legenda + contador cabem na altura da janela, sem rolagem. */
.ampliada img {
  width: 100%;
  max-height: calc(min(88vh, 920px) - 10rem);
  object-fit: contain;
  border-radius: var(--raio);
}
.ampliada__legenda {
  margin: 0.9rem 0 0;
  color: var(--verde-100);
  text-align: center;
}
.ampliada__legenda:empty {
  display: none;
}
/* O contador fica embaixo; as setas, sobre as laterais da foto. */
.ampliada__nav {
  margin-top: 0.6rem;
  color: var(--verde-200);
  font-size: 0.85rem;
  text-align: center;
}
.ampliada__nav[hidden] {
  display: none;
}
.ampliada__nav button {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--branco) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--verde-900) 60%, transparent);
  backdrop-filter: blur(4px);
  color: var(--branco);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.ampliada__nav button:first-child {
  left: 1.6rem;
}
.ampliada__nav button:last-child {
  right: 1.6rem;
}
.ampliada__nav button:hover {
  background: color-mix(in srgb, var(--verde-700) 85%, transparent);
}

/* 16. Seja voluntário ---------------------------------------- */

.secao--participe {
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--verde-500) 45%, transparent), transparent 60%),
    linear-gradient(165deg, var(--verde-700), var(--verde-900) 70%);
}
.participe__fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
/* Duas luzes grandes que vagueiam devagar (só "translate": não pesa). */
.aurora {
  position: absolute;
  top: -25%;
  left: -15%;
  width: 60vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--verde-400) 32%, transparent), transparent 65%);
  animation: vagar 26s ease-in-out infinite alternate;
}
.aurora--2 {
  top: auto;
  right: -20%;
  bottom: -35%;
  left: auto;
  background: radial-gradient(circle, color-mix(in srgb, var(--ambar) 24%, transparent), transparent 65%);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}
@keyframes vagar {
  to {
    translate: 18vmax 12vmax;
  }
}
.participe {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.participe__chamada .botao {
  margin-top: 1.2rem;
}
.participe__funcoes {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: var(--raio-folha-espelho);
  background: color-mix(in srgb, var(--branco) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-300) 24%, transparent);
}
.lista-folhas--clara li {
  color: var(--verde-100);
}

.ajudas {
  position: relative;
  margin-top: var(--respiro);
}
.ajudas__titulo {
  text-align: center;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  margin-bottom: 2.2rem;
}
.ajudas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}
.ajuda {
  padding: 1.9rem 1.7rem;
  border-radius: var(--raio-g);
  background: var(--papel);
  color: var(--tinta);
  transition: translate 0.45s var(--curva), rotate 0.45s var(--curva), box-shadow 0.45s;
}
.ajuda:hover {
  translate: 0 -6px;
  box-shadow: var(--sombra-g);
}
.ajuda h4 {
  color: var(--verde-800);
}
.ajuda p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--tinta-media);
}

.contato {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.contato__bloco {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--raio-g);
  border: 1px solid color-mix(in srgb, var(--verde-300) 26%, transparent);
}
.contato__bloco p {
  color: var(--verde-200);
}

/* 17. Rodapé ------------------------------------------------- */

.rodape {
  position: relative;
  overflow: clip;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  background: var(--verde-900);
  color: var(--verde-200);
  font-size: 0.93rem;
}/* O nome do ministério, gigante e só no contorno, deslizando com a rolagem. */
.rodape__marca-d-agua {
  position: absolute;
  left: 0;
  bottom: -0.2em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--verde-300) 16%, transparent);
  translate: calc(var(--p, 0) * -20%) 0;
  pointer-events: none;
  user-select: none;
}
.rodape__grade,
.rodape__base {
  position: relative;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.rodape__marca img {
  width: 52px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.rodape__nome {
  margin: 0.8rem 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--branco);
}
.rodape__titulo {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-300);
}
.rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rodape li {
  margin-bottom: 0.45rem;
}
.rodape a {
  color: var(--verde-100);
  text-decoration-color: color-mix(in srgb, var(--verde-300) 40%, transparent);
}
.rodape a:hover {
  color: var(--branco);
}
.rodape address {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  font-style: normal;
}
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--verde-300) 18%, transparent);
  font-size: 0.8rem;
  color: var(--verde-300);
}
.rodape__base p {
  margin: 0;
}

/* 18. Diálogos ----------------------------------------------- */

dialog {
  max-width: none;
  max-height: min(88vh, 920px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--raio-g);
  color: inherit;
  box-shadow: var(--sombra-g);
}
dialog::backdrop {
  background: var(--veu);
  backdrop-filter: blur(6px);
}
dialog[open] {
  animation: abrir 0.45s var(--curva);
}
@keyframes abrir {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}
.frente__mais {
  width: min(100% - 2rem, 760px);
  background: var(--papel);
}
.frente__mais-corpo {
  position: relative;
  padding: clamp(1.6rem, 4vw, 3rem);
}
.frente__mais h3 {
  padding-right: 3rem;
}
.fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--verde-100);
  color: var(--verde-900);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: rotate 0.35s var(--curva);
}
.fechar:hover {
  rotate: 90deg;
}

/* 19. Revelação ao rolar ------------------------------------- */

/* Só esconde se houver JavaScript para mostrar de novo. --de é de onde o
   bloco vem; --i (posto pelo site.js nos filhos de [data-escalonar])
   atrasa um pouco cada vizinho, para entrarem em sequência. */
[data-revelar] {
  --de: translateY(40px);
}
[data-revelar="esquerda"] {
  --de: translateX(-56px);
}
[data-revelar="direita"] {
  --de: translateX(56px);
}
[data-revelar="zoom"] {
  --de: scale(0.88);
}
[data-revelar="desfoque"] {
  --de: translateY(16px);
}
.js [data-revelar] {
  opacity: 0;
  transform: var(--de);
  transition: opacity 0.9s var(--curva), transform 1s var(--curva), filter 1s var(--curva), clip-path 1.2s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-revelar="desfoque"] {
  filter: blur(12px);
}
/* Cortina: a foto se descobre de baixo para cima. */
.js [data-revelar="cortina"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
}
.js [data-revelar].visivel {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Só a cortina recorta: em qualquer outro bloco o recorte cortaria as
   sombras e o brilho dos botões. */
.js [data-revelar="cortina"].visivel {
  clip-path: inset(0 0 0 0);
}

/* Títulos palavra por palavra (o site.js parte o título em .palavra). */
.js .palavra {
  display: inline-block;
  opacity: 0;
  translate: 0 0.55em;
  rotate: 6deg;
  transform-origin: left bottom;
  transition: opacity 0.7s var(--curva), translate 0.9s var(--curva), rotate 0.9s var(--curva);
  transition-delay: calc(var(--w, 0) * 60ms + 0.15s);
}
.js .visivel .palavra {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

/* Voltar ao topo: o anel dourado mostra quanto da página já foi lido. */
.topo {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: var(--branco);
  background: radial-gradient(closest-side, var(--verde-700) 80%, transparent 83%),
    conic-gradient(var(--ambar) calc(var(--rolagem, 0) * 1turn), color-mix(in srgb, var(--verde-200) 45%, transparent) 0);
  box-shadow: var(--sombra-m), 0 0 0 1px color-mix(in srgb, var(--branco) 25%, transparent);
  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition: opacity 0.4s var(--curva), translate 0.4s var(--curva);
}
.topo--visivel {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.topo svg {
  width: 1.2rem;
  height: 1.2rem;
  transition: translate 0.3s var(--curva);
}
.topo:hover svg {
  translate: 0 -3px;
}

/* 20. Tela de entrar ----------------------------------------- */

.entrar {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--verde-500) 50%, transparent), transparent 60%),
    var(--verde-900);
}
.entrar__cartao {
  width: min(100%, 420px);
  padding: clamp(2rem, 6vw, 3rem);
  border-radius: var(--raio-folha);
  background: var(--papel);
  box-shadow: var(--sombra-g);
  animation: aparecer 0.8s var(--curva);
}
.entrar__cartao h1 {
  margin: 1.2rem 0 0.5rem;
  font-size: 2.2rem;
}
.entrar__cartao form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.entrar__cartao label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--verde-800);
}
.entrar__cartao input {
  padding: 0.85rem 1rem;
  border: 1px solid var(--areia);
  border-radius: var(--raio);
  background: var(--branco);
  font: inherit;
  font-weight: 400;
}
.entrar__erro {
  padding: 0.8rem 1rem;
  border-radius: var(--raio);
  background: var(--terra-fraco);
  color: var(--terra);
  font-weight: 600;
}
.entrar__voltar {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.9rem;
}

/* 21. Telas menores e movimento reduzido --------------------- */

@media (max-width: 1020px) {
  .cabecalho__botao {
    display: grid;
  }
  .nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3rem;
    padding: 6rem var(--margem) 3rem;
    background: var(--verde-900);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--curva), visibility 0.4s;
  }
  .aberto .nav {
    opacity: 1;
    visibility: visible;
  }
  .nav a {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 7vw, 2.7rem);
    color: var(--branco);
    opacity: 0;
    translate: 0 22px;
    transition: translate 0.55s var(--curva), opacity 0.55s var(--curva);
    transition-delay: calc(var(--n, 0) * 60ms + 0.1s);
  }
  .aberto .nav a {
    opacity: 1;
    translate: 0 0;
  }
  .nav .nav__destaque,
  .cabecalho.rolou .nav__destaque {
    margin-top: 1rem;
    font-family: var(--sans);
    font-size: 1.1rem;
    background: var(--branco);
    color: var(--verde-900);
  }
  .cabecalho.aberto {
    color: var(--branco);
  }
  .cabecalho.aberto::before {
    opacity: 0;
  }
  .cabecalho.aberto .marca__logo img {
    filter: brightness(0) invert(1);
  }
}

@media (max-width: 900px) {
  .valores__grade {
    grid-template-columns: repeat(2, 1fr);
  }
  .sobre,
  .proposito,
  .participe,
  .contato,
  .frente {
    grid-template-columns: 1fr;
  }
  .sobre__visual {
    max-width: 480px;
  }
  .frente:nth-child(even) .frente__visual {
    order: 0;
  }
  .frente__visual .foto {
    aspect-ratio: 16 / 11;
  }
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }
  .rodape__marca {
    grid-column: 1 / -1;
  }

  /* Trajetória numa coluna, com o trilho à esquerda. */
  .linha-tempo__trilho {
    left: 0.6rem;
  }
  .marco:nth-child(odd),
  .marco:nth-child(even) {
    width: auto;
    margin-left: 2.8rem;
    --de: translateX(40px);
  }
  .marco__ponto,
  .marco:nth-child(even) .marco__ponto {
    left: calc(-2.8rem + 0.6rem - 0.6rem);
    right: auto;
  }
}

@media (max-width: 600px) {
  :root {
    --cabecalho: 68px;
  }
  .valores__grade {
    grid-template-columns: 1fr;
  }
  .capa__rolar {
    display: none;
  }
  .grupo {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .encontro {
    grid-template-columns: 4.4rem 1fr;
    gap: 1rem;
  }
  .rodape__grade {
    grid-template-columns: 1fr;
  }
  .marca__nome span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  html {
    scroll-behavior: auto;
  }
  .js [data-revelar] {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
  .linha-tempo__trilho::after {
    transform: none;
  }
  .semente,
  .linha-tempo__trilho::before {
    display: none;
  }
  .js .rotulo::before,
  .js .grupo::after {
    transform: none;
  }
  .js .valor .valor__folha {
    scale: 1;
    rotate: 0deg;
  }
  .capa__conteudo {
    filter: none;
  }
}