/* ============================================================
   EFEITOS DE TEXTURA · Global Children's Foundation (27/10/2026)
   Método da skill textura-website-octopus. O "ofício" aqui é a classe de sábado:
   papel de caderno, rabiscos de criança em giz, fita de presente (campanha de Natal).
   Cada efeito liga por uma classe no <html> (script no <head>):
     fx-grao, fx-caderno, fx-rabiscos, fx-material, fx-pesos, fx-marca, fx-faixa, fx-menu
   ?fx=0 mostra o site sem nenhum efeito; ?sem=grao,faixa desliga só os listados.
   Nada aqui flutua: tudo é fundo, forma, tipografia ou movimento.
   ============================================================ */
:root{
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --rabiscos:url("../img/textura/rabiscos.svg");
}

/* ---------- 1. grão fino no site todo ---------- */
.fx-grao body::after{content:"";position:fixed;inset:0;z-index:94;pointer-events:none;background:var(--grao) 0 0/220px 220px;opacity:.06}

/* ---------- 2. papel de caderno pautado nas seções cinza-claro (linhas azuis + margem vermelha) ---------- */
.fx-caderno .secao-alt,.fx-caderno .doar3{
  background-image:
    linear-gradient(90deg, transparent calc(4vw - 1px), rgba(214,58,47,.16) calc(4vw - 1px), rgba(214,58,47,.16) calc(4vw + 1px), transparent calc(4vw + 1px)),
    linear-gradient(rgba(42,68,90,.075) 1px, transparent 1px);
  background-size:100% 100%, 100% 34px}

/* ---------- 3. rabiscos de criança em giz nos cantos das seções brancas ---------- */
.fx-rabiscos :is(#home-historia,#natal-porque,#historia-comeco){
  background-image:var(--rabiscos),var(--rabiscos);
  background-repeat:no-repeat;
  background-size:min(420px,60vw),min(340px,50vw);
  background-position:right -60px top 30px, left -80px bottom -40px}

/* ---------- 4. textura nas faixas azul-escuro (o azul liso vira superfície) ---------- */
.fx-material :is(.escuro,.rodape,.bloco-cor.navy,.mensal,.final,.natal3){background-image:var(--grao);background-size:180px;background-blend-mode:soft-light}
.fx-material .bloco-cor.vermelho,.fx-material .cartao-valor.destaque{background-image:var(--grao);background-size:180px;background-blend-mode:soft-light}

/* ---------- 5. títulos em dois pesos: frase em peso normal, palavra-chave em negrito vermelho ---------- */
.fx-pesos :is(h1,h2):has(.chave){font-weight:500}
.fx-pesos .chave{font-weight:700;color:var(--vermelho)}
.fx-pesos .escuro .chave,.fx-pesos .natal3 .chave{color:#FF8A80}

/* ---------- 6. palavra gigante em contorno atrás dos títulos ---------- */
.fx-marca [data-marca]{position:relative;isolation:isolate}
.fx-marca [data-marca]::before{content:attr(data-marca);position:absolute;z-index:-1;left:-.04em;top:0;transform:translateY(-42%);
  font:700 clamp(4rem,2rem + 7vw,9.5rem)/.9 var(--f-titulo);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  color:var(--fundo-marca,#fff);-webkit-text-stroke:2.5px #DCE3EA;paint-order:stroke fill;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 25%,transparent 95%);mask-image:linear-gradient(#000 25%,transparent 95%)}
.fx-marca .centro[data-marca]::before{left:50%;transform:translate(-50%,-42%)}
.fx-marca .secao-alt [data-marca],.fx-marca .doar3 [data-marca]{--fundo-marca:#F5F7F9}

/* ---------- 8. menu: pontinhos entre os itens e rabisco no cartão da logo ---------- */
@media (min-width:1000px){
  .fx-menu .menu li + li{position:relative}
  .fx-menu .menu li + li::before{content:"";position:absolute;left:-5px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--vermelho);opacity:.5;transform:translateY(-50%)}
}

.fx-caderno .doar3{background-color:var(--fundo-alt)}

/* ---------- 9. faixas azul-escuro com textura no lugar do caderno (intercalam as seções brancas) ---------- */
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras){color:var(--branco);
  background:url("../img/logo/gcaf-simbolo-branco.svg") right -140px top -90px / min(520px,70vw) no-repeat, var(--grao) 0 0/180px, var(--navy-escuro);
  background-blend-mode:soft-light, soft-light, normal}
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras) :is(h2,.sobretitulo,.painel-texto p,.incentivo){color:var(--branco)}
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras) .link-seta{color:var(--branco)}
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras) .nota{color:rgba(255,255,255,.78)}
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras) .chave,.fx-faixas .incentivo b{color:#FF8A80}
.fx-faixas #home-programas .abas-lista button[aria-selected="true"]{background:var(--vermelho)}
.fx-faixas #home-programas .abas-lista button[aria-selected="true"] .aba-num{background:var(--branco);color:var(--vermelho)}
.fx-faixas :is(#home-programas,#natal-valores,#doe-outras) [data-marca]::before{color:var(--navy-escuro);-webkit-text-stroke-color:rgba(255,255,255,.13)}