/* =========================================================
   Associação Nossa Senhora Passa na Frente — estilos
   Cores tiradas do logotipo: azul do manto, dourado da estrela.
   ========================================================= */

:root{
  --noite:   #0E2647;   /* azul profundo (fundos escuros) */
  --manto:   #1B4E8F;   /* azul do logotipo */
  --azul:    #497AB1;   /* azul claro do logotipo */
  --ceu:     #EAF0F8;   /* azul muito claro (seções) */
  --ouro:    #D7B44E;   /* dourado do logotipo */
  --ouro-esc:#9C7A1E;   /* dourado legível sobre branco */
  --branco:  #FFFFFF;
  --tinta:   #1A2638;   /* texto principal */
  --suave:   #4C5B70;   /* texto secundário */
  --linha:   #D6DFEB;

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans:  "Alegreya Sans", "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --raio: 14px;
  --arco: 999px 999px var(--raio) var(--raio); /* formato de arco (janela de capela) */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--branco);color:var(--tinta);font-family:var(--sans);font-size:1.125rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:var(--manto)}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0;color:var(--noite);font-weight:700}
h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.01em;margin-bottom:.5em}
h3{font-size:1.35rem;margin-bottom:.4em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
figure{margin:0}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ouro);color:var(--noite);padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.centro{text-align:center}
.lead{font-size:1.28rem;line-height:1.55;color:var(--tinta)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);font-weight:700;font-size:1.05rem;text-decoration:none;padding:.85em 1.5em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:.55em 1.1em;font-size:.98rem}
.btn--ouro{background:var(--ouro);color:var(--noite)}
.btn--ouro:hover{background:#E6C566}
.btn--linha{border-color:rgba(255,255,255,.55);color:#fff}
.btn--linha:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--azul{background:var(--manto);color:#fff}
.btn--azul:hover{background:var(--noite)}
.btn--linha-azul{border-color:var(--manto);color:var(--manto)}
.btn--linha-azul:hover{background:var(--manto);color:#fff}
.btn--cheio{width:100%}

/* ---------- selos ---------- */
.selo{display:inline-block;font-weight:700;font-size:.95rem;padding:.3em .9em;border-radius:999px;background:rgba(215,180,78,.18);color:var(--ouro);margin-bottom:1rem;border:1px solid rgba(215,180,78,.45)}
.selo--azul{background:var(--branco);color:var(--manto);border-color:var(--linha)}
.selo--passado{background:#EEF1F5;color:var(--suave);border-color:var(--linha)}

/* ---------- estrela (símbolo do logotipo) ---------- */
.estrela{fill:var(--ouro)}

/* ---------- formato arco ---------- */
.arco{border-radius:var(--arco);overflow:hidden;background:var(--ceu)}
.arco img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo{position:sticky;top:0;z-index:50;background:rgba(14,38,71,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.marca img{width:52px;height:52px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 2px var(--ouro)}
.marca__nome{font-family:var(--serif);font-size:.98rem;line-height:1.15;color:rgba(255,255,255,.85)}
.marca__nome strong{font-size:1.18rem;color:#fff;font-weight:800}
.menu{display:flex;align-items:center;gap:26px}
.menu a:not(.btn){color:rgba(255,255,255,.88);text-decoration:none;font-weight:500;font-size:1.02rem;position:relative;padding:4px 0}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--ouro);transition:right .25s}
.menu a:not(.btn):hover{color:#fff}
.menu a:not(.btn):hover::after,.menu a.ativo::after{right:0}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--noite) 0%,#143867 62%,var(--manto) 100%);color:#fff;padding:72px 0 0}
.hero__luz{position:absolute;width:900px;right:-220px;top:-260px;pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero__local{color:var(--ouro);font-weight:700;font-size:1.05rem;margin-bottom:1.1rem}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;max-width:14ch}
.hero__sub{font-size:1.25rem;color:rgba(255,255,255,.84);max-width:34em;margin:1.4rem 0 2rem}
.hero__acoes{display:flex;flex-wrap:wrap;gap:14px}

.hero__fotos{position:relative;height:560px}
.arco--grande{position:absolute;right:0;top:0;width:74%;height:100%;border:6px solid rgba(215,180,78,.9);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.arco--pequeno{position:absolute;left:-2%;bottom:-36px;width:40%;aspect-ratio:3/4;border:6px solid var(--noite);box-shadow:0 20px 40px -10px rgba(0,0,0,.45)}
.estrela--hero{position:absolute;width:86px;right:62%;top:4%;z-index:2;filter:drop-shadow(0 0 18px rgba(215,180,78,.6))}

.fatos{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:64px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.fatos div{padding:26px 22px 30px 0}
.fatos div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.fatos dt{color:var(--ouro);font-size:.95rem;font-weight:700;margin-bottom:.25rem}
.fatos dd{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.3;color:#fff}

/* animação de entrada (uma só, no carregamento) */
@media (prefers-reduced-motion:no-preference){
  .hero__texto>*{opacity:0;transform:translateY(14px);animation:sobe .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero__texto>*:nth-child(2){animation-delay:.08s}
  .hero__texto>*:nth-child(3){animation-delay:.16s}
  .hero__texto>*:nth-child(4){animation-delay:.24s}
  .arco--grande{opacity:0;animation:revela 1s .15s cubic-bezier(.2,.7,.2,1) forwards}
  .arco--pequeno{opacity:0;animation:revela 1s .35s cubic-bezier(.2,.7,.2,1) forwards}
  .estrela--hero{opacity:0;animation:brilha 1.2s .7s ease-out forwards}
}
@keyframes sobe{to{opacity:1;transform:none}}
@keyframes revela{from{opacity:0;clip-path:inset(100% 0 0 0 round 999px 999px 14px 14px)}to{opacity:1;clip-path:inset(0 0 0 0 round 999px 999px 14px 14px)}}
@keyframes brilha{0%{opacity:0;transform:scale(.4) rotate(-40deg)}100%{opacity:1;transform:none}}

/* =========================================================
   SEÇÕES GERAIS
   ========================================================= */
.secao{padding:104px 0}
.secao--ceu{background:var(--ceu)}
.cabeca{max-width:46rem;margin-bottom:48px}
.cabeca p{color:var(--suave);font-size:1.2rem}
.cabeca--claro h2{color:#fff}
.cabeca--claro p{color:rgba(255,255,255,.8)}

/* Quem somos */
.duas{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.duas__texto p:not(.lead){color:var(--suave);max-width:38em}
.arco--retrato{aspect-ratio:6/7;border:6px solid var(--ceu);outline:1px solid var(--ouro);outline-offset:8px}

/* Missão, visão e valores */
.mvv{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:28px;margin-top:40px}
.mvv__item{background:#fff;border-radius:var(--raio);padding:36px 32px;border-top:4px solid var(--ouro)}
.mvv__item h3{font-size:1.7rem;color:var(--manto)}
.mvv__item p{color:var(--suave);margin:0}
.estrela--mini{width:26px;margin-bottom:14px}
.valores{list-style:none;color:var(--suave)}
.valores li{padding:.45em 0;border-bottom:1px solid var(--linha);line-height:1.45}
.valores li:last-child{border-bottom:0}
.valores strong{color:var(--tinta)}

/* Áreas */
.areas{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linha);border-left:1px solid var(--linha)}
.areas li{padding:34px 30px 30px;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.areas svg{width:46px;height:46px;fill:none;stroke:var(--manto);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.areas p{color:var(--suave);margin:0}

/* =========================================================
   CIDADANIA KIDS (destaque)
   ========================================================= */
.kids{background:var(--noite);color:#fff;padding:112px 0;position:relative;overflow:hidden}
.kids::before{content:"";position:absolute;inset:auto -10% -40% auto;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(73,122,177,.35),transparent 70%);pointer-events:none}
.kids .wrap{position:relative}
.kids h2{color:#fff;font-size:clamp(2.8rem,6.5vw,5.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.25em}
.kids h3{color:#fff}
.kids__topo{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end;margin-bottom:56px}
.kids__lead{font-size:1.3rem;color:rgba(255,255,255,.84);max-width:32em;margin:0}
.termo{margin:0;border:1px solid rgba(215,180,78,.5);border-radius:var(--raio);padding:8px 26px}
.termo div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.termo div:last-child{border-bottom:0}
.termo dt{color:var(--ouro);font-weight:700;flex-shrink:0}
.termo dd{margin:0;text-align:right;font-family:var(--serif);font-size:1.1rem}

.mosaico{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:260px 260px;gap:18px}
.mosaico figure{overflow:hidden;border-radius:var(--raio)}
.mosaico img{width:100%;height:100%;object-fit:cover}
.mosaico .m1{grid-row:1/3;border-radius:var(--arco)}
.mosaico .m2{grid-column:2/4}

.kids__base{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.kids__texto p{color:rgba(255,255,255,.82);margin-bottom:1.6em}
.checks{list-style:none}
.checks li{position:relative;padding:.7em 0 .7em 38px;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.15rem}
.checks li::before{content:"";position:absolute;left:0;top:.95em;width:20px;height:20px;background:var(--ouro);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 L56 38 L85 15 L62 44 L100 50 L62 56 L85 85 L56 62 L50 100 L44 62 L15 85 L38 56 L0 50 L38 44 L15 15 L44 38 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 L56 38 L85 15 L62 44 L100 50 L62 56 L85 85 L56 62 L50 100 L44 62 L15 85 L38 56 L0 50 L38 44 L15 15 L44 38 Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* =========================================================
   PROJETOS
   ========================================================= */
.projetos{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px}
.projeto .arco{aspect-ratio:4/3.4;margin-bottom:22px}
.projeto p{color:var(--suave);margin:0}

/* =========================================================
   PRÓXIMA AÇÃO
   ========================================================= */
.acao{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.acao__flyer{display:block;border-radius:var(--raio);overflow:hidden;box-shadow:0 24px 50px -24px rgba(14,38,71,.45);transform:rotate(-1.5deg);transition:transform .3s}
.acao__flyer:hover{transform:rotate(0)}
.acao__info{margin:0 0 28px;display:grid;gap:14px}
.acao__info div{display:grid;grid-template-columns:90px 1fr;gap:12px}
.acao__info dt{font-weight:700;color:var(--manto)}
.acao__info dd{margin:0}
.programa{list-style:none;margin:0 0 22px;display:grid;gap:8px}
.programa li{display:flex;gap:16px;align-items:baseline;background:#fff;border-radius:10px;padding:12px 18px}
.programa time{font-family:var(--serif);font-weight:800;color:var(--manto);font-size:1.15rem;min-width:62px}
.nota{color:var(--suave);font-size:1rem}
.acao__botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* =========================================================
   ETAPAS (sequência real: do planejamento à finalização)
   ========================================================= */
.etapas{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.etapas li:not(:last-child)::after{content:"";position:absolute;top:27px;left:68px;right:-12px;height:2px;background:linear-gradient(90deg,var(--ouro),rgba(73,122,177,.5))}
.etapas li{position:relative}
.etapas__n{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--noite);color:var(--ouro);font-family:var(--serif);font-weight:800;font-size:1.45rem;margin-bottom:20px;box-shadow:0 0 0 6px #fff}
.etapas p{color:var(--suave);font-size:1.05rem;margin:0}

/* =========================================================
   PARCERIAS
   ========================================================= */
.parcerias{background:linear-gradient(160deg,var(--manto),var(--noite));padding:104px 0;color:#fff}
.rede{display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:28px}
.rede__grupo{border-top:2px solid var(--ouro);padding-top:22px}
.rede__grupo h3{color:var(--ouro);font-size:1.25rem;margin-bottom:14px}
.rede__grupo ul{list-style:none}
.rede__grupo li{font-family:var(--serif);font-size:1.2rem;padding:.45em 0;border-bottom:1px solid rgba(255,255,255,.12)}

/* =========================================================
   DADOS INSTITUCIONAIS
   ========================================================= */
.transp{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.transp p{color:var(--suave)}
.transp .btn{margin-top:10px}
.ficha{margin:0;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.ficha div{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:16px 24px;border-bottom:1px solid var(--linha)}
.ficha div:nth-child(odd){background:#F7F9FC}
.ficha div:last-child{border-bottom:0}
.ficha dt{font-weight:700;color:var(--manto)}
.ficha dd{margin:0}

/* =========================================================
   CONTATO
   ========================================================= */
.contato{background:var(--ceu);padding:104px 0}
.contato__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contato__texto p{color:var(--suave);font-size:1.2rem;max-width:30em}
.canais{list-style:none;display:grid;gap:12px;margin-top:28px;max-width:360px}
.canais a{display:flex;align-items:center;gap:14px;background:#fff;padding:14px 18px;border-radius:12px;text-decoration:none;color:var(--tinta);font-weight:700;border:1px solid var(--linha);transition:border-color .2s}
.canais a:hover{border-color:var(--manto)}
.canais svg{width:24px;height:24px;fill:none;stroke:var(--manto);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form{background:#fff;border-radius:var(--raio);padding:36px;box-shadow:0 20px 50px -30px rgba(14,38,71,.35);border-top:4px solid var(--ouro)}
.form label{display:block;font-weight:700;margin:0 0 6px;font-size:1rem}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--tinta);padding:12px 14px;border:1.5px solid var(--linha);border-radius:10px;background:#fff;margin-bottom:18px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--manto);box-shadow:0 0 0 3px rgba(27,78,143,.15)}
.form textarea{resize:vertical}
.form__erro{color:#A3261C;font-weight:700;margin:-6px 0 14px}
.form__nota{color:var(--suave);font-size:.95rem;text-align:center;margin:12px 0 0}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{background:var(--noite);color:rgba(255,255,255,.78);padding:64px 0 40px}
.rodape__in{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.rodape__marca{display:flex;gap:18px;align-items:center}
.rodape__marca img{width:84px;height:84px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 2px var(--ouro)}
.rodape__marca p{margin:0;line-height:1.5}
.rodape__marca strong{color:#fff;font-family:var(--serif);font-size:1.2rem}
.rodape__nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-content:center}
.rodape__nav a{color:rgba(255,255,255,.85);text-decoration:none}
.rodape__nav a:hover{color:var(--ouro)}
.rodape__fim{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;margin:8px 0 0;font-size:.98rem}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .menu{gap:18px}
  .menu a:not(.btn){font-size:.96rem}
  .etapas{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .etapas li::after{display:none}
}
@media (max-width:960px){
  .menu-btn{display:block}
  .menu{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--noite);padding:8px 24px 24px;border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .menu.aberto{transform:none;opacity:1;visibility:visible}
  .menu a:not(.btn){padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.1rem}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:18px}
  .hero__in,.duas,.kids__topo,.kids__base,.acao,.transp,.contato__in{grid-template-columns:1fr}
  .hero__in{gap:40px}
  .hero__fotos{height:460px;max-width:520px;width:100%;margin:0 auto}
  .fatos{grid-template-columns:1fr 1fr}
  .fatos div:nth-child(3){padding-left:0;border-left:0}
  .fatos div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .mvv{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr 1fr}
  .projetos{grid-template-columns:1fr 1fr}
  .rede{grid-template-columns:1fr 1fr}
  .rede__grupo:last-child{grid-column:1/-1}
  .arco--retrato{max-width:440px}
  .acao__flyer{max-width:440px}
}
@media (max-width:640px){
  body{font-size:1.06rem}
  .wrap{padding:0 16px}
  .secao,.parcerias,.contato{padding:72px 0}
  .kids{padding:80px 0}
  .marca__nome{font-size:.85rem}
  .marca__nome strong{font-size:1.02rem}
  .marca img{width:44px;height:44px}
  .hero{padding-top:48px}
  .hero__fotos{height:380px}
  .estrela--hero{width:60px}
  .arco--pequeno{left:0;bottom:-20px}
  .fatos{grid-template-columns:1fr}
  .fatos div,.fatos div+div{padding:18px 0;border-left:0}
  .fatos div+div{border-top:1px solid rgba(255,255,255,.16)}
  .areas,.projetos,.rede,.etapas{grid-template-columns:1fr}
  .rede__grupo:last-child{grid-column:auto}
  .mosaico{grid-template-columns:1fr 1fr;grid-template-rows:220px 150px 150px}
  .mosaico .m1{grid-row:1/2;grid-column:1/3}
  .mosaico .m2{grid-column:1/3}
  .termo div{flex-direction:column;gap:2px}
  .termo dd{text-align:left}
  .ficha div{grid-template-columns:1fr;gap:2px}
  .acao__info div{grid-template-columns:1fr;gap:2px}
  .form{padding:26px 20px}
  .rodape__in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}


/* ---------- atividades regulares (faixa de "chips") ---------- */
.regulares{margin-top:56px;border-top:2px solid var(--ouro);padding-top:28px}
.regulares h3{font-size:1.3rem;margin-bottom:16px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.2;color:var(--manto);background:var(--ceu);border:1px solid var(--linha);border-radius:999px;padding:.45em 1.1em}
.regulares__nota{color:var(--suave);font-size:1.02rem;margin:18px 0 0;max-width:46em}
.rodape__fim a{color:rgba(255,255,255,.9)}
.rodape__fim a:hover{color:var(--ouro)}