/* Missão Nigéria · Convenção Mineira
   Estilos da página única. Cores, tipos e proporções seguem a seção 5 do planejamento. */

/* ---------- Fontes (woff2 reduzido a latim e latim estendido, licença OFL) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fontes/bricolage-grotesque-latim.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fontes/plus-jakarta-sans-latim.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Escala usada na aproximação das fotos */
@property --escala {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ---------- Variáveis ---------- */

:root {
  --creme: #fff4e4;
  --indigo: #2a2356;
  --laranja: #f05a28;
  --amarelo: #ffc233;
  --verde: #008751;
  --branco: #ffffff;

  --fundo: var(--creme);
  --tinta: var(--indigo);
  --foco: var(--indigo);
  --linha-suave: rgb(42 35 86 / 0.18);

  --titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --t-secao: clamp(2.25rem, 1.35rem + 3.7vw, 4rem);
  --t-display: clamp(3.25rem, 1.6rem + 6.6vw, 6rem);
  --t-apoio: clamp(1.375rem, 1.05rem + 1.2vw, 2rem);
  --t-subtitulo: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --t-citacao: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --t-destaque: 1.1875rem;
  --t-texto: 1.125rem;
  --t-navegacao: 1rem;
  --t-rotulo: 0.9375rem;
  --t-legenda: 0.875rem;

  --lateral: clamp(1.25rem, 4.5vw, 3rem);
  --largura: 75rem;
  --altura-cabecalho: 56px;
  --secao-y: clamp(4.5rem, 2.25rem + 7.5vw, 9rem);

  --canto: 10px;
  --canto-grande: 56px;
  --forma: var(--canto) var(--canto-grande) var(--canto) var(--canto);
  --forma-botao: 8px 20px 8px 8px;
  --desloc: clamp(12px, 1.5vw, 22px);

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --meio: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: light;
  scrollbar-color: var(--indigo) var(--creme);
  scroll-padding-top: var(--altura-cabecalho);
}

@media (min-width: 760px) {
  :root {
    --canto-grande: 88px;
  }
}

@media (min-width: 1080px) {
  :root {
    --altura-cabecalho: 64px;
  }
}

@media (min-width: 1280px) {
  :root {
    --canto-grande: 112px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* ---------- Base ---------- */

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--corpo);
  font-weight: 400;
  line-height: 1.6;
  color: var(--indigo);
  background: var(--creme) url("../img/grao.png");
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--laranja);
  overflow-x: clip;
}

body.menu-aberto {
  overflow: hidden;
}

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

h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: var(--t-secao);
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 15ch;
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

button {
  font: inherit;
  color: inherit;
}

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

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

main:focus {
  outline: none;
}

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

.icone {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acao {
  color: var(--laranja);
}

.pular {
  position: fixed;
  left: 1rem;
  top: 0;
  z-index: 100;
  transform: translateY(-150%);
  padding: 0.75rem 1.25rem;
  background: var(--indigo);
  color: var(--creme);
  font-weight: 700;
  border-radius: var(--forma-botao);
  transition: transform 0.2s var(--suave);
}

.pular:focus {
  transform: translateY(0.75rem);
}

/* ---------- Seções e temas ---------- */

.secao {
  position: relative;
  padding-block: var(--secao-y);
  background-color: var(--fundo);
  color: var(--tinta);
}

.secao--indigo {
  --fundo: var(--indigo);
  --tinta: var(--creme);
  --foco: var(--amarelo);
  --linha-suave: rgb(255 244 228 / 0.2);
  background-image: url("../img/grao.png");
}

.secao--laranja {
  --fundo: var(--laranja);
  --tinta: var(--indigo);
  --foco: var(--indigo);
  background-image: url("../img/grao.png");
}

/* Contorno da Nigéria em marca-d'água nas seções índigo */
.secao--indigo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/mapa/nigeria.svg") no-repeat right -6% bottom -14% / min(78vw, 940px) auto;
  opacity: 0.07;
}

.conteiner {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--lateral), var(--largura));
  margin-inline: auto;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--forma-botao);
  font-family: var(--texto);
  font-size: var(--t-destaque);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--suave),
    box-shadow 0.25s var(--suave),
    background-color 0.2s ease,
    color 0.2s ease;
}

.botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgb(42 35 86 / 0.7);
}

.botao:active {
  transform: translateY(0);
  box-shadow: none;
}

.secao--indigo .botao:hover,
.pix .botao:hover {
  box-shadow: none;
}

.botao--principal {
  background-color: var(--laranja);
  color: var(--indigo);
}

.secao--indigo .botao--principal,
.pix .botao--principal {
  background-color: var(--amarelo);
}

.botao--contorno {
  border-color: currentColor;
  color: var(--tinta);
  background: transparent;
}

.botao--contorno-claro {
  border-color: rgb(255 244 228 / 0.55);
  color: var(--creme);
  background: transparent;
}

.botao[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.botao .icone--ok {
  display: none;
}

.botao.copiado {
  background-color: var(--verde);
  border-color: var(--verde);
  color: var(--branco);
}

.botao.copiado .icone--ok {
  display: block;
}

.botao.copiado .icone--copiar {
  display: none;
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--altura-cabecalho);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.cabecalho.solido {
  background: var(--creme) url("../img/grao.png");
  box-shadow:
    0 1px 0 rgb(42 35 86 / 0.1),
    0 12px 24px -20px rgb(42 35 86 / 0.45);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  width: min(100% - 2 * var(--lateral), var(--largura));
  margin-inline: auto;
}

.cabecalho__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: var(--indigo);
  font-size: var(--corpo);
  font-weight: 700;
  cursor: pointer;
}

.cabecalho__menu .icone {
  width: 1.5em;
  height: 1.5em;
  stroke-width: 2.25;
}

.cabecalho__nav {
  display: none;
  position: relative;
}

.cabecalho__nav ul {
  display: flex;
  gap: clamp(1rem, 1.9vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecalho__nav a {
  display: block;
  padding: 0.6rem 0;
  font-size: var(--t-navegacao);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
}

.cabecalho__nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--laranja);
}

.cabecalho__marcador {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 1px;
  height: 3px;
  border-radius: 4px;
  background: var(--laranja);
  opacity: 0;
  transform-origin: left center;
  transition:
    transform 0.5s var(--suave),
    opacity 0.3s ease;
}

.botao--cabecalho {
  min-height: 44px;
  padding: 0.45rem 1.15rem;
}

@media (min-width: 1080px) {
  .cabecalho__nav {
    display: block;
  }

  .cabecalho__menu {
    display: none;
  }
}

/* ---------- Menu no celular ---------- */

.menu-celular {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--lateral) 2.5rem;
  overflow-y: auto;
  background: var(--creme) url("../img/grao.png");
}

.menu-celular[hidden] {
  display: none;
}

.menu-celular__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altura-cabecalho);
  flex: none;
}

.menu-celular__fechar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  font-size: var(--corpo);
  font-weight: 700;
  cursor: pointer;
}

.menu-celular__fechar .icone {
  width: 1.5em;
  height: 1.5em;
}

.menu-celular ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.menu-celular li a {
  display: block;
  padding: 0.35rem 0;
  font-family: var(--titulo);
  font-size: var(--t-secao);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .menu-celular.abrindo li {
    animation: subir 0.55s var(--suave) both;
  }

  .menu-celular.abrindo li:nth-child(2) { animation-delay: 30ms; }
  .menu-celular.abrindo li:nth-child(3) { animation-delay: 60ms; }
  .menu-celular.abrindo li:nth-child(4) { animation-delay: 90ms; }
  .menu-celular.abrindo li:nth-child(5) { animation-delay: 120ms; }
  .menu-celular.abrindo li:nth-child(6) { animation-delay: 150ms; }
  .menu-celular.abrindo li:nth-child(7) { animation-delay: 180ms; }
  .menu-celular.abrindo li:nth-child(8) { animation-delay: 210ms; }
  .menu-celular.abrindo li:nth-child(9) { animation-delay: 240ms; }
}

/* ---------- Fotos: canto orgânico e camada deslocada ---------- */

.foto {
  position: relative;
  margin: 0;
}

.foto picture {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow: hidden;
  border-radius: var(--forma);
  background: rgb(42 35 86 / 0.08);
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(var(--paralaxe, 0px)) scale(var(--escala));
}

.foto--camada::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--forma);
  background: var(--laranja);
  transform: translate(calc(var(--desloc) * -1), var(--desloc));
}

.foto--camada-amarela::before {
  background: var(--amarelo);
}

.foto--alta picture {
  aspect-ratio: 4 / 5;
}

/* ---------- Entradas em tela ---------- */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--suave),
    transform 0.8s var(--suave);
}

.js [data-revelar].visivel {
  opacity: 1;
  transform: none;
}

.js .foto[data-revelar] {
  transform: none;
}

.js .foto[data-revelar] img {
  --escala: 1.06;
  transition: --escala 1.6s var(--suave);
}

.js .foto[data-revelar].visivel img {
  --escala: 1;
}

.js .foto--camada[data-revelar]::before {
  transform: translate(calc(var(--desloc) * -1 + 14px), calc(var(--desloc) - 14px));
  transition: transform 0.7s var(--suave) 0.35s;
}

.js .foto--camada[data-revelar].visivel::before {
  transform: translate(calc(var(--desloc) * -1), var(--desloc));
}

/* ---------- 1. Abertura ---------- */

.abertura {
  padding-top: calc(var(--altura-cabecalho) + clamp(1.25rem, 4vw, 3rem));
}

.abertura__grade {
  display: grid;
  gap: 3rem;
}

.abertura__marca img {
  width: clamp(280px, 100%, 560px);
  height: auto;
}

.abertura__apoio {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0.85rem;
  font-family: var(--titulo);
  font-size: var(--t-apoio);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 21ch;
}

.abertura__resumo {
  max-width: 48ch;
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.abertura__acoes .botao {
  flex: 1 1 auto;
}

.abertura__foto {
  width: min(100% - var(--desloc), 560px);
  margin-left: var(--desloc);
}

@media (min-width: 560px) {
  .abertura__acoes .botao {
    flex: 0 0 auto;
  }
}

@media (min-width: 1080px) {
  .abertura__grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
    min-height: min(calc(100svh - var(--altura-cabecalho) - var(--secao-y) - 2rem), 760px);
  }

  .abertura__foto {
    justify-self: end;
    width: min(100% - var(--desloc), 520px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .abertura__marca img {
    animation: surgir-marca 0.9s var(--suave) both;
  }

  .abertura__apoio {
    animation: subir 0.7s var(--suave) 0.2s both;
  }

  .abertura__resumo {
    animation: subir 0.7s var(--suave) 0.28s both;
  }

  .abertura__acoes {
    animation: subir 0.7s var(--suave) 0.36s both;
  }

  .abertura__foto picture {
    animation: revelar-foto 1s var(--suave) 0.25s both;
  }

  .abertura__foto img {
    animation: aproximar 1.6s var(--suave) 0.25s both;
  }

  .abertura__foto::before {
    animation: camada 0.7s var(--suave) 1s both;
  }
}

@keyframes surgir-marca {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes revelar-foto {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes aproximar {
  from {
    transform: scale(1.06);
  }
}

@keyframes camada {
  from {
    opacity: 0;
    transform: translate(calc(var(--desloc) * -1 + 14px), calc(var(--desloc) - 14px));
  }
}

/* ---------- 2. Vídeo ---------- */

.video__grade {
  display: grid;
  gap: 3rem;
}

.video__texto p {
  max-width: 34ch;
  font-size: var(--t-destaque);
}

.compartilhar {
  position: relative;
  margin-top: 2rem;
}

.compartilhar__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}

.compartilhar__opcoes[hidden] {
  display: none;
}

.compartilhar__opcao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.video__area {
  position: relative;
  margin-left: var(--desloc);
}

.video__player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--forma);
  background: var(--creme);
  color: var(--indigo);
}

.video__area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--forma);
  background: var(--amarelo);
  transform: translate(calc(var(--desloc) * -1), var(--desloc));
}

.video__player.vazio,
.video__area:has(.video__player.vazio)::before {
  aspect-ratio: 1 / 1;
}

.video__em-breve {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--creme) url("../img/grao.png");
  text-align: center;
}

.video__em-breve img {
  width: clamp(200px, 52%, 380px);
  height: auto;
}

.video__em-breve p {
  font-family: var(--titulo);
  font-size: var(--t-citacao);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.video__tocar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--indigo);
  cursor: pointer;
}

.video__tocar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__tocar-rotulo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.4rem;
  border-radius: var(--forma-botao);
  background: var(--amarelo);
  color: var(--indigo);
  font-size: var(--t-destaque);
  font-weight: 700;
  box-shadow: 0 16px 30px -16px rgb(42 35 86 / 0.6);
  transition: transform 0.25s var(--suave);
}

.video__tocar:hover .video__tocar-rotulo {
  transform: translateY(-2px);
}

.video__tocar-rotulo .icone {
  fill: currentColor;
}

.video__player iframe,
.video__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--indigo);
}

.video__mais {
  margin-top: calc(var(--desloc) + 2.5rem);
}

.video__mais h3 {
  font-size: var(--t-subtitulo);
  margin-bottom: 1rem;
}

.video__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video__lista button {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--creme);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.video__lista img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: 8px 24px 8px 8px;
}

@media (min-width: 640px) {
  .video__player.vazio,
  .video__area:has(.video__player.vazio)::before {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1080px) {
  .video__grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 4.5rem;
  }
}

/* ---------- 3. Nós vemos a Nigéria ---------- */

.missao__grade {
  display: grid;
  gap: 2.5rem 5rem;
}

.numero {
  display: flex;
  flex-direction: column;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0.75rem;
  line-height: 1;
}

.numero__antes,
.numero__depois {
  font-family: var(--titulo);
  font-size: var(--t-apoio);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.numero__valor {
  margin: 0.08em 0 0.12em;
  font-family: var(--titulo);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}

.fonte {
  font-size: var(--t-legenda);
  font-weight: 500;
  color: rgb(42 35 86 / 0.82);
}

.citacao {
  margin: 2.25rem 0 0;
  padding: 0;
}

.citacao p {
  font-family: var(--titulo);
  font-size: var(--t-citacao);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.012em;
  max-width: 32ch;
  text-indent: -0.42em;
}

.citacao footer {
  margin-top: 0.85rem;
  font-size: var(--t-rotulo);
  font-weight: 600;
}

.citacao--curta p {
  font-size: var(--t-destaque);
  line-height: 1.35;
}

.foto--faixa {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.foto--faixa picture {
  aspect-ratio: 4 / 3;
}

@media (min-width: 720px) {
  .foto--faixa picture {
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1080px) {
  .missao__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* ---------- 4. A Promessa na Nigéria ---------- */

.igreja {
  padding-top: 0;
}

.igreja__grade {
  display: grid;
  gap: 3rem;
}

.igreja__destaque {
  margin-left: var(--desloc);
}

.igreja__destaque picture {
  aspect-ratio: 990 / 640;
}

.igreja__galeria {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  height: clamp(300px, 80vw, 420px);
}

.igreja__retrato {
  grid-row: span 2;
}

.foto--galeria {
  --canto-grande: 44px;
}

.foto--galeria img {
  object-position: 50% 30%;
}

@media (min-width: 760px) {
  .igreja__galeria {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.14fr) minmax(0, 1.14fr);
    grid-template-rows: minmax(0, 1fr);
    height: clamp(240px, 26vw, 360px);
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
  }

  .igreja__retrato {
    grid-row: auto;
  }
}

@media (min-width: 1080px) {
  .igreja__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 4rem 5rem;
  }

  .igreja__galeria {
    grid-column: 1 / -1;
  }
}

/* ---------- 5. O próximo passo é Lagos ---------- */

.lagos::before {
  display: none;
}

.lagos__grade {
  display: grid;
  gap: 3rem;
}

.lagos__texto {
  order: -1;
}

.lagos__foto {
  margin-left: var(--desloc);
}

.lagos__foto picture {
  aspect-ratio: 4 / 5;
}

.lagos__foto img {
  object-position: 68% 50%;
}

.mapa {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1024 / 838;
  margin-top: 1rem;
}

.mapa__contorno {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mapa__contorno path {
  fill: none;
  stroke: var(--creme);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.mapa__ponto {
  position: absolute;
  left: calc(70 / 1024 * 100%);
  top: calc(641 / 838 * 100%);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--laranja);
}

.mapa__ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--laranja);
  border-radius: 50%;
  opacity: 0;
}

.mapa__rotulo {
  position: absolute;
  left: calc(70 / 1024 * 100% + 12px);
  top: calc(641 / 838 * 100% - 10px);
  transform: translateY(-100%);
  line-height: 1;
  font-family: var(--titulo);
  font-size: var(--t-citacao);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--creme);
}

.js .mapa:not(.desenhado) .mapa__contorno path {
  stroke-dashoffset: 1;
}

.js .mapa:not(.desenhado) .mapa__ponto,
.js .mapa:not(.desenhado) .mapa__rotulo {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .mapa__contorno path {
    transition: stroke-dashoffset 1.2s var(--meio);
  }

  .js .mapa__ponto {
    transition:
      opacity 0.3s ease 1.1s,
      transform 0.5s var(--suave) 1.1s;
  }

  .js .mapa:not(.desenhado) .mapa__ponto {
    transform: scale(0.2);
  }

  .js .mapa__rotulo {
    transition: opacity 0.6s ease 1.25s;
  }

  .mapa.desenhado .mapa__ponto::after {
    animation: pulso 1.5s var(--suave) 1.4s 3;
  }
}

@keyframes pulso {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.4);
  }
}

@media (min-width: 1080px) {
  .lagos__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "foto texto"
      "foto mapa";
    gap: 3rem 5.5rem;
  }

  .lagos__texto {
    grid-area: texto;
    order: 0;
  }

  .lagos__foto {
    grid-area: foto;
    align-self: start;
    position: sticky;
    top: calc(var(--altura-cabecalho) + 2rem);
  }

  .mapa {
    grid-area: mapa;
    margin-top: 0;
  }
}

/* ---------- Linha de ligação entre ver e mover ---------- */

main {
  position: relative;
}

.linha-ligacao {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.linha-ligacao path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.linha-ligacao circle {
  fill: var(--indigo);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.linha-ligacao.completa circle {
  opacity: 1;
}

/* ---------- 6. Minas se move ---------- */

.participe h2 {
  max-width: none;
  font-size: var(--t-display);
  letter-spacing: -0.035em;
}

.participe__apoio {
  font-family: var(--titulo);
  font-size: var(--t-subtitulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 24ch;
}

.verbos {
  display: grid;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.verbo {
  display: grid;
  gap: 1.25rem;
  padding-block: 2.25rem;
  border-top: 1.5px solid rgb(42 35 86 / 0.3);
}

.verbo:last-child {
  padding-bottom: 0;
}

.verbo__palavra {
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.04em;
}

.verbo__palavra span {
  padding-bottom: 0.1em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 5px;
}

.verbo__cartao {
  align-self: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 8px 36px 8px 8px;
  background: var(--creme) url("../img/grao.png");
  color: var(--indigo);
  --foco: var(--indigo);
}

.verbo__cartao p {
  font-size: var(--t-texto);
  font-weight: 500;
}

.verbo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-top: 0.35rem;
  font-weight: 700;
}

.verbo__link .icone {
  transition: transform 0.3s var(--suave);
}

.verbo__link:hover .icone {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
  .js .verbo {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.8s var(--suave),
      transform 0.8s var(--suave);
  }

  .js .verbo:nth-child(2) { transition-delay: 0.12s; }
  .js .verbo:nth-child(3) { transition-delay: 0.24s; }

  .js .verbo__palavra span {
    background-size: 0% 5px;
    transition: background-size 0.9s var(--suave) 0.35s;
  }

  .js .verbo:nth-child(2) .verbo__palavra span { transition-delay: 0.47s; }
  .js .verbo:nth-child(3) .verbo__palavra span { transition-delay: 0.59s; }

  .js .verbos.visivel .verbo {
    opacity: 1;
    transform: none;
  }

  .js .verbos.visivel .verbo__palavra span {
    background-size: 100% 5px;
  }
}

@media (min-width: 900px) {
  .verbo {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
}

/* ---------- 7. Como ofertar ---------- */

.pix {
  --foco: var(--amarelo);
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border-radius: var(--forma);
  background: var(--indigo) url("../img/grao.png");
  color: var(--creme);
  box-shadow: 0 36px 60px -44px rgb(42 35 86 / 0.75);
}

.pix__titulo {
  margin-bottom: 1.75rem;
  font-size: var(--t-subtitulo);
  letter-spacing: -0.02em;
}

.pix__lista {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.pix__item dt {
  font-size: var(--t-rotulo);
  font-weight: 600;
  color: rgb(255 244 228 / 0.8);
}

.pix__item dd {
  margin: 0.15rem 0 0;
  font-size: var(--t-destaque);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pix__item--chave dd {
  font-family: var(--titulo);
  font-size: var(--t-subtitulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--amarelo);
}

.pix.pendente .pix__item dd {
  font-family: var(--texto);
  font-size: var(--t-texto);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--creme);
}

.pix__acoes {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  margin-top: 2rem;
}

.pix__codigo {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  width: 100%;
}

.pix__codigo-rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  color: rgb(255 244 228 / 0.8);
}

.pix__codigo-texto {
  width: 100%;
  max-width: 64ch;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgb(255 244 228 / 0.08);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-legenda);
  line-height: 1.5;
  word-break: break-all;
}

.pix.pendente .pix__copiar {
  display: none;
}

.pix__pendente {
  max-width: 44ch;
  font-size: var(--t-navegacao);
  color: rgb(255 244 228 / 0.85);
}

.pix__aviso {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 244 228 / 0.2);
  font-weight: 600;
  max-width: 56ch;
}

.pix__qr-moldura {
  display: grid;
  place-items: center;
  width: clamp(200px, 60vw, 248px);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 8px 24px 8px 8px;
  background: var(--branco);
  color: var(--indigo);
}

.pix__qr-moldura img {
  width: 100%;
  height: auto;
}

.pix__qr-vazio {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px dashed rgb(42 35 86 / 0.3);
  border-radius: 4px 20px 4px 4px;
  font-weight: 700;
  text-align: center;
}

.pix__qr-legenda {
  margin-top: 0.85rem;
  max-width: 26ch;
  font-size: var(--t-rotulo);
  color: rgb(255 244 228 / 0.85);
}

.frentes {
  display: grid;
  gap: 3rem;
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

.frente {
  padding-top: 1.5rem;
  border-top: 2px solid var(--indigo);
}

.frente h3 {
  margin-bottom: 1rem;
  font-size: var(--t-subtitulo);
  letter-spacing: -0.02em;
}

.frente .citacao {
  margin-top: 1.25rem;
}

.frente__regra {
  font-weight: 600;
}

.ofertar__nota {
  margin-top: 3rem;
  font-weight: 600;
  max-width: 58ch;
}

@media (min-width: 900px) {
  .pix {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 3rem;
  }

  .frentes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* ---------- 8. Alvo ---------- */

.alvo {
  padding-top: 0;
}

.alvo__grade {
  display: grid;
  gap: 2.5rem 5rem;
  padding-top: var(--secao-y);
  border-top: 1.5px solid var(--linha-suave);
}

.alvo__em-definicao {
  font-family: var(--titulo);
  font-size: var(--t-subtitulo);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

.alvo__percentual {
  margin: 0.5rem 0 1rem;
  font-family: var(--titulo);
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--laranja);
  font-variant-numeric: tabular-nums;
}

.alvo__trilho {
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 4px 8px 4px 4px;
  background: rgb(42 35 86 / 0.12);
}

.alvo__preenchimento {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--laranja);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
}

.alvo__valores {
  margin-top: 1rem;
  font-size: var(--t-texto);
  font-variant-numeric: tabular-nums;
}

.alvo__data {
  font-size: var(--t-rotulo);
  font-weight: 500;
  color: rgb(42 35 86 / 0.82);
}

.informativos {
  margin-top: 2rem;
}

.informativos h3 {
  font-size: var(--t-subtitulo);
  margin-bottom: 0.75rem;
}

.informativos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.informativos__lista a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linha-suave);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .alvo__preenchimento {
    transition: transform 1.2s var(--meio);
  }
}

@media (min-width: 1080px) {
  .alvo__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* ---------- 9. Oração ---------- */

.oracao__grade {
  display: grid;
  gap: 2rem 5rem;
}

.pedidos {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.pedidos li {
  position: relative;
  padding: 1.15rem 0 1.15rem 2.1rem;
  border-bottom: 1px solid var(--linha-suave);
  font-family: var(--titulo);
  font-size: var(--t-apoio);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pedidos li:first-child {
  border-top: 1px solid var(--linha-suave);
}

.pedidos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.15rem + 0.6em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amarelo);
}

@media (min-width: 1080px) {
  .oracao__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .oracao h2 {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 2rem);
    align-self: start;
  }
}

/* ---------- 10. Perguntas frequentes ---------- */

.perguntas__grade {
  display: grid;
  gap: 2rem 5rem;
}

.perguntas__lista details {
  border-bottom: 1.5px solid var(--linha-suave);
}

.perguntas__lista details:first-child {
  border-top: 1.5px solid var(--linha-suave);
}

.perguntas__lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.35rem 0;
  font-family: var(--titulo);
  font-size: var(--t-citacao);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.perguntas__lista summary::-webkit-details-marker {
  display: none;
}

.perguntas__lista summary .icone {
  width: 28px;
  height: 28px;
  color: var(--laranja);
  stroke-width: 2.5;
  transition: transform 0.35s var(--suave);
}

.perguntas__lista details[open] summary .icone {
  transform: rotate(45deg);
}

.perguntas__lista details p {
  padding-bottom: 1.5rem;
  margin: 0;
}

@supports (interpolate-size: allow-keywords) {
  .perguntas__lista details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 0.4s var(--suave),
      content-visibility 0.4s allow-discrete;
  }

  .perguntas__lista details[open]::details-content {
    height: auto;
  }
}

@media (min-width: 1080px) {
  .perguntas__grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ---------- 11. Rodapé ---------- */

.rodape {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.rodape__grade {
  display: grid;
  gap: 2.5rem 5rem;
}

.rodape__marca {
  width: clamp(280px, 30vw, 400px);
  height: auto;
}

.rodape__texto p {
  max-width: 52ch;
}

.rodape__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.rodape__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.rodape__creditos {
  margin-top: 1.5rem;
  font-size: var(--t-legenda);
  color: rgb(255 244 228 / 0.82);
}

.rodape__topo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 1rem;
  font-weight: 700;
}

@media (min-width: 900px) {
  .rodape__grade {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }
}

/* ---------- Movimento reduzido ---------- */

@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;
  }

  .js [data-revelar],
  .js .foto[data-revelar] img {
    opacity: 1;
    transform: none;
    --escala: 1;
  }
}