/* =========================================================================
   Secoes da pagina
   ========================================================================= */

/* ================================ HERO ================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--altura-cabecalho) + var(--e-9)) var(--e-10);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, var(--rosa-100) 0%, transparent 58%),
    radial-gradient(90% 80% at 8% 92%, var(--ouro-100) 0%, transparent 55%),
    var(--papel);
}
.hero__tela {
  position: absolute; inset: 0;
  z-index: var(--z-tela);
  pointer-events: none;
}
.hero__interno {
  position: relative;
  z-index: var(--z-conteudo);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--e-9);
  align-items: center;
  width: 100%;
}
.hero__titulo {
  font-size: var(--texto-4xl);
  margin-bottom: var(--e-5);
}
.hero__titulo em {
  font-style: normal;
  color: var(--cor-acao);
  position: relative;
  white-space: nowrap;
}
.hero__titulo em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.06em;
  height: 0.1em;
  border-radius: var(--raio-total);
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-acao));
  transform: scaleX(0); transform-origin: left;
  animation: sublinhar var(--dur-cinema) var(--ease-saida) 900ms forwards;
}
@keyframes sublinhar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__titulo em::after { animation: none; transform: scaleX(1); }
}

.hero__texto {
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
  line-height: var(--altura-media);
  max-width: 52ch;
  margin-bottom: var(--e-6);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-7); }

.hero__selos { display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center; }
.hero__selo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--texto-xs); color: var(--cor-texto-tenue); }
.hero__selo svg { color: var(--cor-destaque-forte); flex: none; }

/* Colagem de fotos flutuantes com parallax */
.colagem { position: relative; aspect-ratio: 1 / 1.02; }
.colagem__foto {
  position: absolute;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-xl);
  border: 5px solid var(--branco);
  will-change: transform;
}
.colagem__foto img { width: 100%; height: 100%; object-fit: cover; }
.colagem__foto--a { inset: 0 28% 34% 0; z-index: 2; }
.colagem__foto--b { inset: 22% 0 12% 42%; z-index: 3; }
.colagem__foto--c { inset: 64% 46% 0 6%; z-index: 4; }

.colagem__medalha {
  position: absolute; right: 2%; top: 4%;
  z-index: 5;
  display: grid; place-items: center; gap: 2px;
  width: clamp(88px, 11vw, 118px); aspect-ratio: 1;
  border-radius: var(--raio-total);
  background: var(--cor-destaque);
  color: var(--tinta-900);
  box-shadow: var(--sombra-lg);
  text-align: center;
  padding: var(--e-2);
  will-change: transform;
}
.colagem__medalha strong {
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
}
.colagem__medalha span { font-size: 0.6rem; font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; }

.hero__rolar {
  position: absolute; left: 50%; bottom: var(--e-5);
  transform: translateX(-50%);
  z-index: var(--z-conteudo);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  font-size: var(--texto-xs);
  letter-spacing: var(--espaco-letra-olho);
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}
.hero__rolar-trilho {
  width: 2px; height: 42px; border-radius: var(--raio-total);
  background: var(--cor-borda-forte);
  overflow: hidden; position: relative;
}
.hero__rolar-trilho::after {
  content: ""; position: absolute; inset-inline: 0; height: 42%;
  background: var(--cor-acao); border-radius: var(--raio-total);
  animation: descer 1800ms var(--ease-suave) infinite;
}
@keyframes descer {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(240%); }
}
@media (prefers-reduced-motion: reduce) { .hero__rolar-trilho::after { animation: none; } }

@media (max-width: 1040px) {
  .hero__interno { grid-template-columns: 1fr; gap: var(--e-8); }
  .colagem { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero__rolar { display: none; }
}

/* ============================ LETREIRO DE LEMA ============================ */
.faixa-lema {
  padding-block: var(--e-6);
  background: var(--cor-fundo-alt);
  border-block: 1px solid var(--cor-borda);
  overflow: hidden;
}

/* ============================== SOBRE ============================== */
.sobre__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.sobre__midia { position: relative; }
.sobre__midia-principal {
  border-radius: var(--raio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 5;
}
.sobre__midia-principal img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sobre__midia-secundaria {
  position: absolute; right: -8%; bottom: -9%;
  width: 46%;
  border-radius: var(--raio-lg);
  overflow: hidden;
  border: 6px solid var(--branco);
  box-shadow: var(--sombra-xl);
  aspect-ratio: 1;
  will-change: transform;
}
.sobre__midia-secundaria img { width: 100%; height: 100%; object-fit: cover; }
.sobre__citacao {
  margin-top: var(--e-6);
  padding: var(--e-5) var(--e-6);
  border-left: 3px solid var(--cor-destaque);
  background: var(--cor-fundo-alt);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
}
.sobre__citacao p {
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  line-height: var(--altura-media);
  color: var(--cor-texto);
}
.sobre__citacao cite { display: block; margin-top: var(--e-3); font-style: normal; font-size: var(--texto-sm); color: var(--cor-texto-tenue); }

.dados-lista { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
.dados-lista__item { display: flex; gap: var(--e-4); align-items: flex-start; }
.dados-lista__icone {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--raio-md);
  background: var(--rosa-100); color: var(--cor-marca-forte);
}
.dados-lista__titulo { font-weight: var(--peso-forte); font-size: var(--texto-sm); margin-bottom: 2px; }
.dados-lista__texto { font-size: var(--texto-sm); color: var(--cor-texto-suave); line-height: var(--altura-media); }

@media (max-width: 900px) {
  .sobre__grade { grid-template-columns: 1fr; }
  .sobre__midia { max-width: 460px; }
  .sobre__midia-secundaria { right: -4%; width: 42%; }
}

/* ============================== IMPACTO ============================== */
.impacto {
  position: relative;
  overflow: hidden;
}
.impacto__tela { position: absolute; inset: 0; z-index: var(--z-tela); opacity: 0.85; }
.impacto__interno { position: relative; z-index: var(--z-conteudo); }
.impacto__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-4); }
.impacto__nota {
  margin-top: var(--e-7);
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--tinta-300);
  max-width: 62ch; margin-inline: auto;
}

/* ============================== COMO AJUDAR ============================== */
.ajudar__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--e-5); }
.ajuda-cartao { display: flex; flex-direction: column; gap: var(--e-4); height: 100%; }
.ajuda-cartao__icone {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--raio-md);
  background: linear-gradient(140deg, var(--rosa-100), var(--ouro-100));
  color: var(--cor-acao);
  flex: none;
}
.ajuda-cartao h3 { margin: 0; font-size: var(--texto-lg); }
.ajuda-cartao p { color: var(--cor-texto-suave); font-size: var(--texto-sm); line-height: var(--altura-media); flex: 1; }
.ajuda-cartao__passos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.ajuda-cartao__passos li {
  display: flex; gap: var(--e-2); align-items: flex-start;
  font-size: var(--texto-sm); color: var(--cor-texto-suave); margin: 0;
}
.ajuda-cartao__passos li::before {
  content: ""; flex: none; margin-top: 0.55em;
  width: 6px; height: 6px; border-radius: var(--raio-total);
  background: var(--cor-destaque);
}

/* Bloco de doacao / PIX */
.doacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  border-radius: var(--raio-xl);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--brilho-ouro-suave), transparent 62%),
    var(--tinta-900);
  color: var(--papel-2);
  box-shadow: var(--sombra-xl);
}
.doacao h3 { color: var(--papel); font-size: var(--texto-2xl); }
.doacao p { color: var(--tinta-200); }
.doacao__chave {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--raio-md);
  background: var(--sup-vidro);
  border: 1px dashed var(--sup-vidro-borda-forte);
}
.doacao__chave-rotulo { display: block; font-size: var(--texto-xs); letter-spacing: var(--espaco-letra-olho); text-transform: uppercase; color: var(--ouro-300); margin-bottom: 2px; }
.doacao__chave-valor { font-family: var(--fonte-display); font-size: var(--texto-md); font-weight: var(--peso-forte); color: var(--papel); word-break: break-all; }
.doacao__painel {
  background: var(--sup-vidro);
  border: 1px solid var(--sup-vidro-borda);
  border-radius: var(--raio-lg);
  padding: var(--e-6);
}
.doacao__painel h4 { color: var(--papel); font-size: var(--texto-md); margin-bottom: var(--e-4); }
.doacao__valores { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.doacao__valor {
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-sm);
  background: var(--sup-vidro-linha);
  border: 1px solid var(--sup-vidro-borda);
  color: var(--papel);
  font-weight: var(--peso-semi);
  font-size: var(--texto-sm);
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-saida), background-color var(--dur-rapida) var(--ease-padrao);
}
.doacao__valor:hover { background: var(--sup-vidro-ativo); transform: translateY(-2px); }
.doacao__valor[aria-pressed="true"] { background: var(--cor-destaque); color: var(--tinta-900); border-color: var(--cor-destaque); }
.doacao__equivale { margin-top: var(--e-4); font-size: var(--texto-sm); color: var(--ouro-200); min-height: 3em; line-height: var(--altura-media); }

@media (max-width: 860px) { .doacao { grid-template-columns: 1fr; } }

/* ============================== DIRETORIA ============================== */
.diretoria__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-5); }
.pessoa { text-align: center; }
.pessoa__avatar {
  width: 96px; height: 96px; margin: 0 auto var(--e-4);
  display: grid; place-items: center;
  border-radius: var(--raio-total);
  background: linear-gradient(140deg, var(--rosa-200), var(--ouro-200));
  color: var(--cor-marca-forte);
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: var(--peso-forte);
  letter-spacing: 0;
  box-shadow: var(--sombra-md);
}
.pessoa__nome { font-family: var(--fonte-display); font-size: var(--texto-md); font-weight: var(--peso-forte); margin-bottom: 2px; }
.pessoa__cargo { font-size: var(--texto-xs); letter-spacing: var(--espaco-letra-olho); text-transform: uppercase; color: var(--cor-marca); font-weight: var(--peso-semi); }
.pessoa__nota { margin-top: var(--e-3); font-size: var(--texto-sm); color: var(--cor-texto-suave); line-height: var(--altura-media); }

/* ============================== PREVENCAO ============================== */
.prevencao__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.sinais { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.sinais li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  line-height: var(--altura-media);
  margin: 0;
}
.sinais li svg { flex: none; color: var(--cor-acao); margin-top: 2px; }
@media (max-width: 860px) { .prevencao__grade { grid-template-columns: 1fr; } }

/* ============================== CONTATO ============================== */
.contato__grade { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contato__blocos { display: grid; gap: var(--e-5); }
.contato__bloco { display: flex; gap: var(--e-4); align-items: flex-start; }
.contato__bloco-icone {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--raio-md);
  background: var(--rosa-100); color: var(--cor-marca-forte);
}
.contato__bloco-rotulo { font-size: var(--texto-xs); letter-spacing: var(--espaco-letra-olho); text-transform: uppercase; color: var(--cor-texto-tenue); font-weight: var(--peso-semi); margin-bottom: 2px; }
.contato__bloco-valor { font-weight: var(--peso-semi); line-height: var(--altura-media); }
.contato__bloco-valor a { color: var(--cor-texto); text-decoration: none; }
.contato__bloco-valor a:hover { color: var(--cor-acao); text-decoration: underline; }
.formulario { display: grid; gap: var(--e-4); padding: var(--e-7); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-xl); box-shadow: var(--sombra-md); }
.formulario__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
@media (max-width: 620px) { .formulario__dupla { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .contato__grade { grid-template-columns: 1fr; } }

/* ============================== RODAPE ============================== */
.rodape { background: var(--tinta-900); color: var(--tinta-200); padding-block: var(--e-10) var(--e-6); }
.rodape a { color: var(--tinta-200); text-decoration: none; }
.rodape a:hover { color: var(--ouro-300); text-decoration: underline; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-7); }
.rodape__marca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.rodape__marca img { width: 132px; height: auto; }
.rodape__sobre { font-size: var(--texto-sm); line-height: var(--altura-media); max-width: 42ch; color: var(--tinta-300); }
.rodape__titulo { font-family: var(--fonte-display); font-size: var(--texto-sm); font-weight: var(--peso-forte); color: var(--papel); letter-spacing: var(--espaco-letra-olho); text-transform: uppercase; margin-bottom: var(--e-4); }
.rodape__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.rodape__lista li { margin: 0; font-size: var(--texto-sm); }
.rodape__social { display: flex; gap: var(--e-2); margin-top: var(--e-5); }
.rodape__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--raio-md);
  background: var(--sup-vidro);
  border: 1px solid var(--sup-vidro-borda);
  color: var(--papel);
  transition: transform var(--dur-rapida) var(--ease-saida), background-color var(--dur-rapida) var(--ease-padrao);
}
.rodape__social a:hover { background: var(--cor-acao); transform: translateY(-3px); }
.rodape__base {
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid var(--sup-vidro-linha);
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between;
  font-size: var(--texto-xs);
  color: var(--tinta-300);
}

/* ============================== CTA FINAL ============================== */
.chamada-final {
  position: relative;
  padding-block: clamp(4rem, 8vw, 8rem);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, var(--rosa-100), transparent 62%),
    var(--cor-fundo-alt);
}
/* bokeh quente por trás da última chamada — textura real em vez de degradê chapado */
.chamada-final::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/textura/textura-bokeh.jpg") center / cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.chamada-final > * { position: relative; z-index: var(--z-conteudo); }
.chamada-final h2 { font-size: var(--texto-3xl); max-width: 18ch; margin-inline: auto; }
.chamada-final p { max-width: 54ch; margin-inline: auto; color: var(--cor-texto-suave); font-size: var(--texto-md); }
.chamada-final__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-6); }
.chamada-final__marca { width: 92px; height: 92px; margin: 0 auto var(--e-5); }