/* ============================================================
   Global Children's Foundation · ajustes da v9 (28/10/2026)
   Carrega depois de gcaf.css e efeitos.css. Mesmo conteúdo da
   prévia escolhida (entrega/GCAF-site-completo-2026-10-28-final.html).
   1. QR code do Zelle no lugar do espaço pendente.
   2. Banner da home: mesmo formato escuro e em tela cheia, com fotos
      nítidas alternando no lugar do vídeo, escurecidas só onde fica o
      texto; título menor em dois pesos, sem grifo; segundo botão em
      contorno. O contador (13 / 250 / 40) continua igual.
   ============================================================ */

/* ---------- 1. QR code do Zelle ---------- */
.qr-caixa.qr-pronto{width:min(260px, 72vw);aspect-ratio:auto;border:0;padding:0;background:none}
.qr-caixa.qr-pronto img{display:block;width:100%;height:auto;border-radius:var(--raio-l);box-shadow:var(--sombra-1)}

/* ---------- 2. banner da home ---------- */
.hero-midia{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--navy-escuro)}
.hero-midia img{width:100%;height:100%;object-fit:cover;object-position:65% 40%;animation:hero-respira 14s var(--curva-saida) both}
@keyframes hero-respira{from{transform:scale(1.1)}to{transform:scale(1)}}
/* várias fotos: o texto fica parado e o fundo troca a cada 6 s com fusão lenta
   (usa a troca de fotos do gcaf.js; para com "reduzir movimento") */
.hero-midia.slides img{animation:none}
.hero2::before{background:
  linear-gradient(90deg, rgba(13,22,31,.92) 0%, rgba(13,22,31,.74) 32%, rgba(13,22,31,.22) 64%, rgba(13,22,31,.04) 100%),
  linear-gradient(0deg, rgba(13,22,31,.88) 0%, rgba(13,22,31,0) 36%)}

.hero2 .sobretitulo{font-size:var(--t-s);font-weight:500;color:rgba(255,255,255,.82)}
.hero2 .sobretitulo::before{display:none}
.hero2 h1{font-size:clamp(2.1rem, 1.2rem + 2.6vw, 3.5rem);font-weight:500;line-height:1.08;letter-spacing:-.02em;max-width:22ch;margin-top:var(--e-3)}
.hero2 h1 .risco{font-weight:700}
.hero2 .risco::after{display:none}
.hero2-sub{max-width:50ch;color:rgba(255,255,255,.86)}
.hero2 .acoes{gap:var(--e-4)}
.hero2 .btn-primario{box-shadow:none}
.hero2 .link-play{padding:var(--e-3) var(--e-6);border:2px solid rgba(255,255,255,.5);border-radius:var(--raio-s);font-size:var(--t-s);
  transition:background-color var(--dur-rapida) ease, color var(--dur-rapida) ease, border-color var(--dur-rapida) ease}
.hero2 .link-play .play{display:none}
.hero2 .link-play:hover{background:var(--branco);border-color:var(--branco);color:var(--navy-escuro)}
.hero2 .link-play:focus-visible{outline:3px solid var(--branco);outline-offset:3px}
.hero2 .btn-apoio{color:rgba(255,255,255,.7)}

/* entrada: o texto aparece em sequência (o título já nasce visível) */
@keyframes hero-sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero2-conteudo > :not(h1){animation:hero-sobe .7s var(--curva-saida) backwards}
.hero2-conteudo > :nth-child(3){animation-delay:.1s}
.hero2-conteudo > :nth-child(4){animation-delay:.18s}
.hero2-conteudo > :nth-child(5){animation-delay:.26s}

/* celular: a foto vira uma faixa no topo do banner e o texto fica no azul, sem nada por cima do rosto das crianças */
@media (max-width:759px){
  .hero2{min-height:0}
  .hero2::before{display:none}
  .hero-midia{position:relative;inset:auto;z-index:0;height:min(42vh, 320px)}
  .hero-midia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(13,22,31,0) 50%, var(--navy-escuro) 100%)}
  .hero-midia img{object-position:center 35%}
  .hero2 .hero2-conteudo{padding-top:var(--e-2)}
}

@media (prefers-reduced-motion: reduce){
  .hero-midia img,.hero2-conteudo > *{animation:none}
}

/* ---------- 3. ajustes da v12 (29/10/2026) ---------- */
/* contato nos cartões de "Outras formas de ajudar" */
.formas-contato{margin-top:var(--e-3);font-size:var(--t-s)}
.formas-contato a{color:var(--vermelho-escuro);font-weight:600;text-underline-offset:3px}
/* "Copiar e-mail" não leva a outra página: sem seta */
.btn-primario.copiar::after{content:none}