/* =====================================================================
   pigr-home-cor.css — camada de cor de contraste (dourado) da página inicial
   Carregar DEPOIS de pigr-home.css. Não muda conteúdo nem os cartões do topo.
   Peso: ~3 KB de CSS + 1 foto de fundo no topo (19 KB no celular, 35 KB no computador)
   ===================================================================== */
:root{
  --ouro:#ffc93c;        /* sobre azul escuro (contraste 11:1 com az-950) */
  --ouro-600:#f5b000;    /* fundos de selo/etiqueta (texto em az-950) */
  --ouro-700:#8a5d00;    /* texto dourado sobre branco (AA 5.9:1) */
  --ouro-50:#fff7df;     /* fundo suave */
  --tex-rede:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M30 40 L112 70 L190 30 M112 70 L96 150 L30 40 M96 150 L182 168 L190 30 M96 150 L40 200 M182 168 L220 120 M0 120 L30 40' opacity='.55'/%3E%3Cg fill='%23fff' stroke='none'%3E%3Ccircle cx='30' cy='34' r='4.5'/%3E%3Cpath d='M22 48a8 7 0 0 1 16 0z'/%3E%3Ccircle cx='112' cy='63' r='5.5'/%3E%3Cpath d='M102 80a10 8.5 0 0 1 20 0z'/%3E%3Ccircle cx='190' cy='24' r='4.5'/%3E%3Cpath d='M182 38a8 7 0 0 1 16 0z'/%3E%3Ccircle cx='96' cy='143' r='4.5'/%3E%3Cpath d='M88 157a8 7 0 0 1 16 0z'/%3E%3Ccircle cx='182' cy='162' r='4'/%3E%3Cpath d='M175 175a7 6 0 0 1 14 0z'/%3E%3Ccircle cx='40' cy='200' r='3'/%3E%3Ccircle cx='220' cy='120' r='3'/%3E%3Ccircle cx='0' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --tex-traco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12C70 4 160 2 296 8' stroke='%23ffc93c' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- 1. HERO: foto de culto sob o azul + textura "rede de pessoas" ----------
   Dois recortes da mesma foto, um por tamanho de tela (o navegador baixa só um):
   • img/home/fundo-cel.jpg (800x486, ~19 KB): banda e mãos levantadas, sem a letra do telão
     -> celular e tablet (até 999px), atrás do título;
   • img/home/fundo-pc.jpg (1600x900, ~35 KB): palco e público, bordas fundidas no azul
     -> computador (1000px+), com o cartão de cadastro ao lado.
   --azul-foto: quanto o azul cobre a foto (1 = some; .6 = foto bem aparente).
   Os dois arquivos são pré-carregados no <head> do registrar (link rel=preload com media). */
.hm-hero{
  --azul-foto:.70;
  background:
    linear-gradient(180deg,rgba(11,95,217,calc(var(--azul-foto) + .04)) 0%,rgba(10,76,184,var(--azul-foto)) 200px,rgba(10,76,184,.96) 430px,var(--az-700) 470px,var(--az-900) 100%),
    url("../img/home/fundo-cel.jpg") 50% 0/auto 470px no-repeat,
    var(--az-700);
}
@media (min-width:600px) and (max-width:999px){
  .hm-hero{background:
    linear-gradient(180deg,rgba(11,95,217,calc(var(--azul-foto) + .06)) 0%,rgba(10,76,184,calc(var(--azul-foto) + .04)) 240px,rgba(10,76,184,.96) 520px,var(--az-700) 560px,var(--az-900) 100%),
    url("../img/home/fundo-cel.jpg") 50% 0/cover no-repeat,
    var(--az-700);
    background-size:auto,100% auto,auto}
}
@media (min-width:1000px){
  .hm-hero{background:
    linear-gradient(90deg,rgba(5,22,56,.45) 0%,rgba(5,22,56,.15) 40%,rgba(5,22,56,0) 60%),
    linear-gradient(160deg,rgba(11,95,217,var(--azul-foto)) 0%,rgba(10,76,184,var(--azul-foto)) 50%,rgba(10,39,102,calc(var(--azul-foto) + .1)) 100%),
    url("../img/home/fundo-pc.jpg") 70% 0/cover no-repeat,
    #0a3caa}
}
.hm-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /*background:var(--tex-rede) 0 0/220px 220px repeat;opacity:.13;*/
  -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 80%);
          mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 80%);
}
.hm-hero h1 span{
  display:block;width:max-content;max-width:100%;padding-bottom:.12em;
  background:var(--tex-traco) left bottom/100% .26em no-repeat;
}
.hm-selo b{background:var(--ouro);color:var(--az-950)}
.hm-hero-prova svg{color:var(--ouro)}

/* ---------- 2. Faixa de confiança ---------- */
.hm-faixa{box-shadow:inset 0 2px 0 var(--ouro-600)}
.hm-faixa svg{color:var(--ouro)}

/* ---------- 3. Rótulos das seções ("Perfil da igreja", "Planos"...) ---------- */
.hm-sobre{display:inline-flex;align-items:center;gap:8px}
.hm-sobre::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--ouro-600);flex-shrink:0}

/* ---------- 4. Recursos: cartão Comunidades ---------- */
.hm-rec--com{/*position:relative;*/overflow:hidden}
.hm-rec--com::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--tex-rede) 0 0/180px 180px repeat;opacity:.07}
.hm-rec--com > :not(.hm-etq){position:relative;z-index:1}
.hm-rec--com .hm-etq{z-index:2}
.hm-rec--com .hm-etq{background:var(--ouro);color:var(--az-950)}

/* ---------- 5. Como começar: números ---------- */
.hm-passos li::before{background:var(--ouro);color:var(--az-950)}

/* ---------- 6. Planos: fita e preço do destaque ---------- */
.hm-plano-fita{background:var(--ouro);color:var(--az-950);box-shadow:0 4px 12px rgba(245,176,0,.35)}

/* ---------- 7. Connect: arte de fundo (carteirinhas + app) + detalhes dourados ----------
   <picture class="hm-connect-arte"> no registrar, com loading="lazy":
   • img/home/connect-cel.jpg (800x800, ~45 KB) -> até 1199px (embaixo do texto até 899px; na coluna da direita de 900 a 1199px)
   • img/home/connect-pc.jpg (1600x900, ~64 KB) -> 1200px+, arte à direita com a altura da seção
   Só baixa quando a seção chega perto e baixa uma vez. Ao carregar, a seção ganha .hm-foto-ok:
   a carteirinha em HTML some (a arte já tem as carteirinhas) mantendo o espaço dela.
   Se a imagem não carregar, fica o visual de antes (marinho + textura + carteirinha HTML). */
.hm-connect::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--tex-rede) 0 0/240px 240px repeat;opacity:.05}
.hm-connect .hm-wrap{z-index:1}
.hm-connect-arte{position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}
.hm-connect-arte img{display:block;width:min(100%,620px);height:auto;margin:0 auto}
.hm-connect.hm-foto-ok{background:linear-gradient(180deg,#001a55 0%,#012270 55%);padding-bottom:0}
.hm-connect.hm-foto-ok .hm-connect-arte{opacity:1}
.hm-connect.hm-foto-ok::before,.hm-connect.hm-foto-ok::after{display:none}
.hm-connect.hm-foto-ok .hm-cart-palco{visibility:hidden;height:calc(min(100vw,620px) - 24px);padding:0}
@media (min-width:900px){
  .hm-connect.hm-foto-ok{background:#012270;padding-bottom:96px}
  .hm-connect.hm-foto-ok::after{display:block;opacity:.04}
  .hm-connect.hm-foto-ok .hm-cart-palco{height:auto;min-height:420px}
}
/* 900–1199px: duas colunas estreitas -> arte quadrada (já esfumada) na coluna da direita */
@media (min-width:900px) and (max-width:1199px){
  .hm-connect-arte{top:0;left:50%;display:flex;align-items:center;justify-content:center;padding:0 20px}
  .hm-connect-arte img{width:min(100%,520px)}
}
/* 1200px+: arte inteira com a altura da seção, encostada à direita; a borda esquerda
   já vem fundida no #012270, então em tela larga o que sobra é a mesma cor */
@media (min-width:1200px){
  .hm-connect-arte{top:0}
  .hm-connect-arte img{position:absolute;right:0;top:0;width:auto;height:100%;max-width:none;margin:0}
  .hm-connect-arte::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,20,70,.55) 0%,rgba(0,20,70,.25) 38%,rgba(0,20,70,0) 55%)}
}
@media (prefers-reduced-motion:reduce){.hm-connect-arte{transition:none}}
.hm-connect-logo span{color:var(--ouro)}
.hm-connect-lista svg{color:var(--ouro)}
.hm-connect .hm-sobre{color:var(--ouro)}

/* ---------- 8. Chamada final ---------- */
.hm-final::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--tex-rede) 0 0/200px 200px repeat;opacity:.1}
.hm-final h2 span{color:var(--ouro)}
.hm-final-site i{box-shadow:0 0 0 3px var(--ouro)}

/* ---------- 9. Rodapé ---------- */
.hm-rodape{box-shadow:inset 0 3px 0 var(--ouro-600)}
.hm-rodape a:hover{color:var(--ouro)}

/* ---------- 10. Foco visível dourado (acessibilidade em fundo azul) ---------- */
.hm-hero a:focus-visible,.hm-hero button:focus-visible,
.hm-connect a:focus-visible,.hm-final a:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}

/* Telas pequenas: textura mais discreta (menos ruído atrás do texto) */
@media (max-width:599px){.hm-hero::before{opacity:.1;background-size:170px 170px}}
@media (forced-colors:active){.hm-hero::before,.hm-rec--com::after{display:none}}
/* Economia de dados ligada no celular: fica só o azul */
@media (prefers-reduced-data:reduce){.hm-hero{background:linear-gradient(160deg,var(--az-600) 0%,var(--az-700) 45%,var(--az-900) 100%)}}