/* estilo.css — as cores, as fontes e as peças da PASCOM. Mexeu aqui, mexeu em todas as telas. */
:root{
  /* Fundo: azul-tinta profundo, tirado do próprio azul da marca. NÃO é preto:
     preto puro com cor vibrante em cima é o visual de qualquer app; o azul-tinta
     amarra o fundo à marca. */
  --noite:#0d1922;
  --noite-alta:#16293a;   /* superfície elevada: o cartão do formulário */
  --poco:#0a141c;         /* fundo dos campos: mais fundo que o cartão */

  /* As três cores da marca, elevadas para viver no escuro */
  --azul:#4fa3e3;         /* estrutura, links, o que é secundário */
  --verde:#9bd255;        /* AÇÃO: confirmar. É o verde de "pas" no logo */
  --ouro:#f2c230;         /* SITUAÇÃO do convite: vagas, prazo, avisos.
                             É a cor do globo com a cruz — o ponto de atenção */

  --texto:#e9f1f7;
  --texto-fraco:#91a9bc;
  --borda:#24394d;
  --perigo:#f07a6e;       /* desmarcar e erro. Não é da marca, e é de propósito:
                             o que dá errado não pode parecer parte do convite.
                             Ajustado de #e4574c (medido) para #f07a6e: o original
                             media 3.70:1 de contraste dentro do cartão (.caixa) —
                             abaixo do mínimo de 4,5:1. Mesmo matiz, mais claro. */
  --raio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='220'><g fill='none' stroke='%234fa3e3' stroke-width='1' opacity='0.5'><path d='M30 40 L120 22 L215 58 L292 30'/><path d='M120 22 L95 120 L215 58'/><path d='M95 120 L188 168 L292 30'/><path d='M30 40 L95 120'/></g><g fill='%23f2c230' opacity='0.85'><circle cx='30' cy='40' r='3.5'/><circle cx='120' cy='22' r='2.5'/><circle cx='215' cy='58' r='3'/><circle cx='292' cy='30' r='2'/><circle cx='95' cy='120' r='3'/><circle cx='188' cy='168' r='2.5'/></g></svg>")
    no-repeat right -96px top -14px;
  background-color:var(--noite);
  background-attachment:fixed;
  color:var(--texto); font-family:'Archivo',system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.55; padding:24px 16px 40px;
  display:flex; justify-content:center; min-height:100vh;
}
.pagina{width:100%; max-width:560px}

/* topo */
.marca{width:150px; height:auto; display:block}
.paroquia-nome{color:var(--texto-fraco); font-size:13px; line-height:1.35; margin-top:10px;
  letter-spacing:.01em}
.topo{margin-bottom:32px}

/* o evento, direto no fundo */
h1{font-size:34px; font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:10px}
h2{font-size:20px; font-weight:700; margin-bottom:14px}
.fraco{color:var(--texto-fraco); font-size:15px}

/* a situação do convite */
.aviso{
  border-left:3px solid var(--ouro); background:rgba(242,194,48,.08);
  color:var(--ouro); font-weight:700; padding:12px 14px; border-radius:0 8px 8px 0;
}
.erro{
  border-left:3px solid var(--perigo); background:rgba(240,122,110,.10);
  color:var(--perigo); font-weight:600; padding:12px 14px; border-radius:0 8px 8px 0;
}

/* a superfície elevada */
.caixa{background:var(--noite-alta); border:1px solid var(--borda);
  border-radius:var(--raio); padding:22px; margin-bottom:18px}

label{display:block; font-weight:500; font-size:15px; margin:16px 0 7px; color:var(--texto)}
.campo{width:100%; padding:14px; font-size:17px; font-family:inherit; color:var(--texto);
  background:var(--poco); border:1px solid var(--borda); border-radius:10px}
.campo::placeholder{color:#6c8298}
.campo:focus{outline:none; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(242,194,48,.22)}

.botao{width:100%; padding:16px; font-size:17px; font-weight:700; font-family:inherit;
  border:0; border-radius:10px; background:var(--verde); color:var(--noite); cursor:pointer}
.botao:hover{filter:brightness(1.08)}
.botao:disabled{opacity:.45; cursor:default}
.botao-fraco{background:transparent; color:var(--azul); border:1px solid var(--borda)}
.botao-fraco:hover{border-color:var(--azul); filter:none}
.botao-perigo{background:var(--perigo); color:var(--noite)} /* texto branco media 3,64:1
  sobre o vermelho claro — trocado por texto escuro (mesmo padrão do .botao), 4,9:1+ */

/* rodapé */
.rodape{display:flex; align-items:center; gap:10px; margin-top:28px; color:var(--texto-fraco);
  font-size:12.5px}
.rodape img{height:34px; width:auto; opacity:.9}

.escondido{display:none !important}

@media (min-width:700px){
  body{padding:40px 24px 56px}
  h1{font-size:42px}
}
@media (max-width:480px){
  body{ background-position:right -130px top -18px; }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}