/* Área restrita · mesma identidade do site da igreja (paleta oficial, sem rosa) */
@font-face{font-family:'Inter';src:url(fonts/inter-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Grith';src:url(fonts/GRITH.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
:root{
  --preto:#000000; --azul-claro:#91B1C7; --azul-escuro:#323E44; --verde:#657149; --bege:#AA9B8C; --branco:#FFFFFF;
  --az-3:color-mix(in srgb,var(--azul-escuro) 70%,var(--preto)); --az-4:color-mix(in srgb,var(--azul-escuro) 85%,var(--preto));
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',system-ui,sans-serif; --display:'Grith','Inter',Impact,'Arial Narrow',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--branco);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
  background:var(--az-3) radial-gradient(ellipse 85% 65% at 50% 45%,var(--azul-escuro) 0%,var(--az-4) 55%,var(--az-3) 100%) fixed}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
.wrap{width:min(1100px,100% - 32px);margin-inline:auto;position:relative;z-index:1}
main{flex:1;padding:28px 0 56px;outline:0}
.pular{position:absolute;left:-999px;top:8px;background:var(--branco);color:var(--preto);padding:10px 16px;border-radius:99px;font-weight:700;z-index:10}
.pular:focus{left:16px}

/* títulos Grith (acentos montados por JS, a fonte não tem acentos) */
.tit{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:1.02;word-spacing:.2em;font-size:clamp(28px,7.4vw,52px)}
.tit.menor{font-size:clamp(22px,5.4vw,32px)}
.pal{white-space:nowrap}
.ac{position:relative;display:inline-block}
.ac::before{content:attr(data-a);position:absolute;left:50%;top:-.34em;transform:translateX(-50%);font-family:'Inter',sans-serif;font-weight:700;font-size:.62em;line-height:1;letter-spacing:0}
.ac.ced::before{content:",";font-family:var(--display);font-weight:400;font-size:.7em;top:auto;bottom:-.17em;left:56%}
.etiqueta{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-claro);font-weight:600}
.apoio{color:var(--azul-claro);max-width:60ch}
.cab{margin-bottom:26px;display:grid;gap:10px}

/* vidro estilo Apple (sem barra colorida na borda) */
.vidro{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%),rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 22px 44px -22px rgba(0,0,0,.65)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vidro{background:var(--az-4)}}

/* topo */
.topo{padding:18px 0 4px}
.topo-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.marca img{height:44px;width:auto}
.menu{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.quem{display:flex;align-items:center;gap:10px;color:var(--azul-claro);font-size:14px}
.quem span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* botões e chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:99px;border:0;cursor:pointer;font:700 15px/1.2 var(--sans);text-decoration:none;
  background:var(--azul-claro);color:var(--preto);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.14);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:scale(.98)}
.btn.sec{background:rgba(0,0,0,.28);color:var(--branco);border:1px solid rgba(255,255,255,.34);box-shadow:none}
.btn.verde{background:var(--verde);color:var(--branco)}
.btn.peq{min-height:40px;padding:8px 16px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.chip{display:inline-flex;align-items:center;min-height:40px;border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:8px 16px;font:600 14px/1.2 var(--sans);background:rgba(0,0,0,.25);color:var(--branco);cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s}
.chip:hover,.chip[aria-current=page]{border-color:var(--azul-claro);background:rgba(145,177,199,.2)}
:focus-visible{outline:3px solid var(--branco);outline-offset:3px}

/* formulários */
.form{display:grid;gap:16px;max-width:520px}
.form.largo{max-width:none}
.campo{display:grid;gap:6px}
.campo label,.campo legend{font-weight:600;font-size:14px}
.campo small{color:var(--azul-claro);font-size:13px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=file],select,textarea{width:100%;min-height:48px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.34);background:rgba(0,0,0,.34);color:var(--branco);font:400 16px/1.4 var(--sans)}
textarea{min-height:120px;resize:vertical}
input[type=file]{padding:10px 12px}
input::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:99px;background:var(--azul-claro);color:var(--preto);font-weight:700;cursor:pointer}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px}
fieldset.campo{border:0;min-width:0}
.marcas{display:flex;flex-wrap:wrap;gap:10px}
.marca-op{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25);cursor:pointer;font-size:15px}
.marca-op input{width:20px;height:20px;accent-color:var(--azul-claro)}
.aviso-form{padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.28);font-size:15px}
.aviso-form.erro{border-color:var(--bege);color:var(--branco)}
.aviso-form.erro::before{content:"Atenção: ";font-weight:700;color:var(--bege)}
.aviso-form.ok::before{content:"Pronto: ";font-weight:700;color:var(--azul-claro)}
.linha-botoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.link{background:none;border:0;color:var(--azul-claro);font:600 15px var(--sans);text-decoration:underline;cursor:pointer;padding:8px 0;text-align:left}

/* login */
.entrada{display:grid;place-items:center;min-height:60vh}
.entrada .vidro{width:min(460px,100%);padding:28px 24px;display:grid;gap:18px}
.entrada img{height:56px;width:auto}

/* grades de cartões */
.grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.cartao{display:grid;gap:10px;align-content:start;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
a.cartao:hover{transform:translateY(-3px)}
.cartao p{color:var(--azul-claro);font-size:15px}
.cartao .seta{font-weight:700;color:var(--branco)}

/* listas de materiais */
.dia-bloco{margin-top:28px;display:grid;gap:14px}
.dia-bloco>h2{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-claro);font-weight:600}
.mat{display:grid;gap:12px}
.mat h3{font-size:19px;line-height:1.3}
.mat p{color:var(--azul-claro);font-size:15px;white-space:pre-line}
.mat .texto{color:var(--branco);font-size:16px;white-space:pre-line}
.selo{display:inline-block;padding:3px 12px;border-radius:99px;font-size:13px;font-weight:700;background:var(--verde);color:var(--branco);justify-self:start}
.selo.neutro{background:rgba(0,0,0,.4);color:var(--branco);border:1px solid rgba(255,255,255,.3)}
.selo.bege{background:var(--bege);color:var(--preto)}
.vazio{color:var(--azul-claro)}
.senha-box{display:grid;gap:12px;margin:0 0 22px}
.senha-box code{display:block;font:700 24px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;padding:12px 16px;border-radius:14px;background:rgba(0,0,0,.45);overflow-wrap:anywhere}
.pessoa{display:grid;gap:12px}
.pessoa h3{font-size:19px;overflow-wrap:anywhere}
.pessoa .email{color:var(--azul-claro);font-size:15px;overflow-wrap:anywhere}
.selos{display:flex;flex-wrap:wrap;gap:8px}
.duas{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.duas{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
.carregando{color:var(--azul-claro);padding:40px 0}

/* rodapé */
.rodape{padding:20px 0 28px;font-size:14px;color:var(--azul-claro)}
.rodape a{text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* páginas de texto (privacidade) */
.texto-legal{display:grid;gap:14px;max-width:760px}
.texto-legal h2{font-size:18px;margin-top:10px}
.texto-legal p{color:var(--branco)}
.texto-legal .apoio{color:var(--azul-claro)}