/* ==========================================================================
   Páginas públicas (/protocolo, /autenticar, /protocolo-casamento, /habilitacao,
   /inscricao-catequese, /protocolo-catequese) — identidade da /bio (11/2026):
   fundo marrom-escuro com a foto de São José e da Matriz esmaecida no topo,
   logo branca (celular: monograma à direita com o nome à esquerda; computador:
   logo completa centralizada), cards de vidro escuro, campos escuros e botão
   principal dourado. Só aparência: textos, nomes dos campos, ordem, validação e
   scripts continuam iguais. Carregado depois do <style> de cada página.
   ========================================================================== */
:root{
  color-scheme:dark;
  --acc:#E2C58F;--acc2:#EBD3A6;--ink:#FFFFFF;--grey:rgba(255,255,255,.7);--grey2:rgba(255,255,255,.52);--line:rgba(255,255,255,.12);
  --bg:#15110E;--campo:rgba(255,255,255,.07);--verde:#1f8f4e;
  --r-card:26px;--r-mid:18px;--r-ctl:12px;
  --vidro:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.055) 55%,rgba(255,255,255,.09) 100%);
  --vidro-borda:rgba(255,255,255,.17);--blur:saturate(160%) blur(24px);
  --sh:0 14px 40px rgba(0,0,0,.35);
  --anel:0 0 0 4px rgba(226,197,143,.22);
  --disp:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --txt:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace
}

/* --------------------------------------------------------------- base */
html{background:#1D1711!important;scroll-padding-top:calc(24px + env(safe-area-inset-top));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;min-height:100%}
body{position:relative;margin:0;min-height:100vh;min-height:100dvh;font-family:var(--txt)!important;font-size:16px;line-height:1.47;letter-spacing:-.011em;color:var(--ink)!important;-webkit-tap-highlight-color:transparent;
  background:var(--bg)!important}
body::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(360px + env(safe-area-inset-top));z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,17,14,.6) 0%,rgba(21,17,14,.82) 55%,#15110E 100%),var(--sj-topo) center 18%/cover no-repeat}
body>*{position:relative;z-index:1}
a{color:var(--acc)}
p{line-height:1.5}
main{max-width:640px;margin:6px auto 0;padding:0 max(16px,env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* --------------------------------------------------------------- cabeçalho: logo branca */
body>header,header.pub-top{position:relative;z-index:2;display:block;max-width:672px;margin:0 auto;min-height:0;
  padding:calc(38px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 26px max(22px,env(safe-area-inset-left));
  background:transparent!important;color:var(--ink);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.pub-top a{text-decoration:none;color:inherit}
.pub-top img{filter:none!important;opacity:1}
.pub-marca-cel{display:flex;justify-content:flex-end;align-items:center;gap:10px;opacity:.92}
.pub-marca-cel .nm{height:40px!important;width:auto;display:block}
.pub-marca-cel .mono{width:42px!important;height:auto!important;display:block}
.pub-marca-full{display:none}
@media (min-width:760px){
  body>header,header.pub-top{padding:calc(48px + env(safe-area-inset-top)) 24px 34px;text-align:center}
  .pub-marca-cel{display:none}
  .pub-marca-full{display:inline-block}
  .pub-marca-full img{width:250px!important;height:auto!important;display:block;margin:0 auto}
  body::before{height:420px;background-position:center 30%}
}

/* --------------------------------------------------------------- títulos */
h1,h2{font-family:var(--disp)!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-.025em!important}
h1,.card h1,.card>h2{font-size:24px;line-height:1.15;font-weight:700!important;margin:0 0 8px}
.card>h1:first-child,.card>h2:first-child{margin-top:0}
.intro{margin:14px 0 16px;padding:0 4px}
.intro h1{font-size:30px!important;line-height:1.08;letter-spacing:-.035em!important;margin:0 0 6px}
.intro p{color:var(--grey);font-size:15px;margin:0}
h2,.card form h2{font-size:17px;line-height:1.25;letter-spacing:-.015em!important;text-transform:none;margin:24px 0 4px;color:var(--acc)!important}
.card form h2+label{margin-top:8px}
.dica{color:var(--grey)!important;font-size:14px;line-height:1.45}
.passo-t{font:600 12.5px/1.3 var(--txt);letter-spacing:.12em;text-transform:uppercase;color:var(--grey2)!important;margin:0 0 10px}
.passo-t b{color:var(--acc);font-weight:600}
p,li,dd,td{color:inherit}
small{color:var(--grey2)}
b,strong{color:var(--ink)}

/* --------------------------------------------------------------- cards de vidro */
.card{position:relative;border:0!important;border-radius:var(--r-card)!important;padding:24px!important;margin:0 0 16px;color:var(--ink);
  background:var(--vidro)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 0 0 1px var(--vidro-borda),inset 0 1px 0 rgba(255,255,255,.3),var(--sh)!important}
.card.sucesso,.card.ok{box-shadow:inset 0 0 0 1.5px rgba(48,209,88,.5),var(--sh)!important}
.card.nok{box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.55),var(--sh)!important}
.card>p:first-child{margin-top:0}.card>p:last-child,.card>form>p:last-child{margin-bottom:0}
.card p{color:rgba(255,255,255,.88)}
.bloco{border:0!important;border-radius:16px!important;background:rgba(255,255,255,.06)!important;padding:14px 16px!important;margin:10px 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bloco h3{font:600 17px/1.25 var(--disp)!important;letter-spacing:-.015em!important;text-transform:none!important;color:var(--ink)!important;margin:0 0 6px!important}
.bloco p{color:var(--grey);font-size:14.5px}

/* --------------------------------------------------------------- campos escuros */
label{color:var(--grey)!important;font-size:14px;line-height:1.35;margin:14px 0 0}
label[hidden]{display:none}
label small{color:var(--grey2)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea{
  -webkit-appearance:none;appearance:none;display:block;width:100%;box-sizing:border-box;min-height:46px;margin-top:6px;padding:10px 14px;
  font:400 16px/1.3 var(--txt)!important;color:var(--ink)!important;background:var(--campo)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--r-ctl)!important;
  box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s}
textarea{min-height:96px;resize:vertical;line-height:1.4!important}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):focus,select:focus,textarea:focus{outline:none!important;background:rgba(255,255,255,.1)!important;border-color:var(--acc)!important;box-shadow:var(--anel)}
input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #2a221b inset!important;caret-color:#fff}
::placeholder{color:rgba(255,255,255,.38);opacity:1}
select option{background:#221B15;color:#fff}
input[type=date],input[type=time],input[type=month]{min-width:0;-webkit-appearance:none}
input::-webkit-date-and-time-value{text-align:left;min-height:1.3em}
input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;filter:invert(1)}
select{padding-right:42px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E2C58F' d='M7.4 9.6 12 14.2l4.6-4.6 1.4 1.4-6 6-6-6z'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:18px!important}
input[type=file]{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:7px 8px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--r-ctl);background:var(--campo)!important;font:400 14px/1.3 var(--txt);color:var(--grey)}
input[type=file]::file-selector-button{margin:0 10px 0 0;padding:8px 14px;border:0;border-radius:980px;background:var(--acc);color:#15110E;font:600 14px/1 var(--txt);cursor:pointer}
input[type=file]::-webkit-file-upload-button{margin:0 10px 0 0;padding:8px 14px;border:0;border-radius:980px;background:var(--acc);color:#15110E;font:600 14px/1 var(--txt);cursor:pointer}
input[type=file]:focus{outline:none;box-shadow:var(--anel)}
label>.campo-data-env{margin-top:6px}
.campo-data-env>input{margin-top:0!important}
.cal-btn,.cal-btn:hover{right:6px;width:34px!important;height:34px!important;min-height:0!important;padding:0!important;color:var(--acc)!important;background:transparent!important;box-shadow:none!important}
@media (hover:hover){.cal-btn:hover{background:rgba(226,197,143,.12)!important}}
label.chk,.opcoes label{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:13px 14px;border:0!important;border-radius:14px!important;
  background:rgba(255,255,255,.06)!important;color:var(--ink)!important;font-size:15px;line-height:1.4;cursor:pointer;transition:background .15s,box-shadow .15s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.opcoes{display:grid;gap:8px;margin-top:8px}.opcoes label{margin:0;align-items:center}
.opcoes small{display:block;color:var(--grey);font-size:13px;margin-top:1px}
label.chk input[type=checkbox],.opcoes input[type=radio],.opcoes input[type=checkbox]{flex:none;width:22px;height:22px;margin:1px 0 0;transform:none;accent-color:var(--acc)}
.opcoes input[type=radio]{margin:0}
label.chk:has(input:checked),.opcoes label:has(input:checked){background:rgba(226,197,143,.12)!important;box-shadow:inset 0 0 0 2px var(--acc)!important}
label.chk:has(input:focus-visible),.opcoes label:has(input:focus-visible){box-shadow:var(--anel)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
.g2{gap:0 12px}

/* --------------------------------------------------------------- botões em pílula: principal dourado */
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;width:auto;padding:10px 24px;border:0;border-radius:980px;
  font:600 16px/1.2 var(--txt);letter-spacing:-.01em;color:#15110E!important;background:var(--acc)!important;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 26px rgba(226,197,143,.16);transition:background .2s,transform .12s,box-shadow .2s;-webkit-user-select:none;user-select:none}
.btn:active,button:active{transform:scale(.97)}
.btn:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(226,197,143,.35)}
.btn.sec,button.sec{background:rgba(255,255,255,.1)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.btn.wa{background:var(--verde)!important;color:#fff!important;box-shadow:0 10px 26px rgba(31,143,78,.2)}.btn.m{background:var(--acc)!important}
.btn svg{width:20px;height:20px;flex:none}
button.leve{min-height:40px;padding:8px 14px;background:transparent!important;color:var(--acc)!important;text-decoration:none;font-size:15px!important;font-weight:500;box-shadow:none}
button:disabled{background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.4)!important;cursor:not-allowed;transform:none;box-shadow:none}
@media (hover:hover){
  .btn:hover,button:hover{background:var(--acc2)!important}
  .btn.sec:hover,button.sec:hover{background:rgba(255,255,255,.16)!important}
  .btn.wa:hover{background:#1a7a43!important}
  button.leve:hover{background:rgba(226,197,143,.1)!important}
  button:disabled:hover{background:rgba(255,255,255,.1)!important}
}
.cal-ios button{color:inherit!important;background:none!important;box-shadow:none!important;min-height:0}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:22px 0 4px}
.nav button{flex:0 1 auto;min-width:140px;width:auto}
.nav button.sec{flex:0 1 auto;min-width:120px}
.nav+p{margin-top:8px}
.consulta{display:flex;gap:8px;align-items:stretch;margin-top:12px}
.consulta input{flex:1 1 0;min-width:0;margin:0!important;font:600 18px/1.2 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.consulta button{flex:none;width:auto}
.consulta+.erro{margin-top:12px}
.card>form>input[name=c]{flex:1 1 220px;margin:0 0 4px;text-align:center;font:600 18px/1.2 var(--mono)!important;letter-spacing:.08em}
@media (max-width:560px){
  .card>.btn,.card>p>.btn,.card>p>button,.card>form>p>button,.card>form>p>.btn,.card>form:not(.consulta)>button,.pergunta-padre .btn,.aviso .btn,.ajuda .btn,.pix p>button{width:100%}
  .nav{justify-content:stretch}.nav button,.nav button.sec{flex:1 1 0;min-width:0}
  .nav button.sec{flex:0 0 38%}
  .consulta input{font-size:17px!important;letter-spacing:.06em}
}

/* --------------------------------------------------------------- avisos */
.erro,.okm,.aviso{margin:12px 0;padding:12px 14px;border:0!important;border-radius:14px!important;font-size:14px;line-height:1.45}
.erro{background:rgba(255,69,58,.14)!important;color:#FFB8B2!important;box-shadow:inset 0 0 0 1px rgba(255,69,58,.3)}
.okm{background:rgba(48,209,88,.13)!important;color:#A6E9B9!important;box-shadow:inset 0 0 0 1px rgba(48,209,88,.28)}
.aviso{background:rgba(226,197,143,.1)!important;color:#F1DFBC!important;box-shadow:inset 0 0 0 1.5px rgba(226,197,143,.55)}
.aviso p{margin:6px 0;color:inherit}.aviso p:first-child{margin-top:0}.aviso p:last-child{margin-bottom:0}
.aviso .btn{margin-top:4px}
.anx{color:#A6E9B9!important;font-size:13.5px;margin:6px 0 0}

/* --------------------------------------------------------------- protocolo: código, selo e lista */
.cod{display:block;margin:12px 0 10px;padding:14px 16px;border-radius:16px;background:rgba(226,197,143,.1);
  font:700 28px/1.15 var(--mono)!important;letter-spacing:.12em;text-align:center;color:var(--acc)!important;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(226,197,143,.25)}
.cod+p{text-align:center;margin:0 0 6px}
.selo{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:980px!important;font:600 13.5px/1.2 var(--txt);letter-spacing:-.005em;background:rgba(226,197,143,.14)!important;color:var(--acc)!important;box-shadow:inset 0 0 0 1px rgba(226,197,143,.45)}
.selo.ok,.selo.valida{background:rgba(48,209,88,.14)!important;color:#A6E9B9!important;box-shadow:inset 0 0 0 1px rgba(48,209,88,.35)}
.selo.invalida{background:rgba(255,69,58,.14)!important;color:#FFB8B2!important;box-shadow:inset 0 0 0 1px rgba(255,69,58,.35)}
dl,dl.res{display:grid;grid-template-columns:auto 1fr;gap:0;margin:14px 0;font-size:15px}
dl dt{color:var(--grey)!important;font-size:14px;padding:9px 16px 9px 0;border-top:1px solid var(--line)}
dl dd{margin:0;padding:9px 0;border-top:1px solid var(--line);font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
dl dt:first-of-type,dl dt:first-of-type+dd{border-top:0;padding-top:0}
dl dd small{color:var(--grey2);font-weight:400}
.progresso{display:flex;gap:5px;margin:0 0 16px}
.progresso span{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14)!important;transition:background .25s}
.progresso span.on{background:var(--acc)!important}

/* --------------------------------------------------------------- linha do tempo da inscrição (crisma) */
.tl{margin:16px 0 18px}
.tl::before{background:rgba(255,255,255,.18)!important}
.tl .c{border:0!important;background:#251E18!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .2s,box-shadow .2s}
.tl .c svg{fill:rgba(255,255,255,.5)!important}
.tl .s.feito .c{background:#2B231B!important;box-shadow:inset 0 0 0 1.5px var(--acc)}
.tl .s.feito .c svg{fill:var(--acc)!important}
.tl .s.atual .c{background:var(--acc)!important;box-shadow:0 0 0 3px rgba(21,17,14,.9),0 6px 16px rgba(226,197,143,.3)}
.tl .s.atual .c svg{fill:#15110E!important}
.tl small{font-size:10px;color:var(--grey2)!important}
.tl .s.atual small{color:var(--acc)!important}

/* --------------------------------------------------------------- pergunta inicial (casamento) */
.pergunta-padre{margin:18px 0 6px;padding:18px;border-radius:18px;background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pergunta-padre .pp-q{margin:0 0 14px;font-size:16px;line-height:1.4}
.pergunta-padre .pp-bt{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.pergunta-padre .pp-bt .btn{flex:1 1 160px}
#pedido.aviso{margin-top:16px}

/* --------------------------------------------------------------- pix, ajuda, rodapé */
.pix img{border:0!important;border-radius:16px!important;padding:8px!important;background:#fff!important;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.pix textarea{font:13px/1.4 var(--mono)!important;height:84px;min-height:0}
.ajuda{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
footer{text-align:center;color:rgba(255,255,255,.55)!important;font-size:12.5px;line-height:1.6;padding:8px 16px max(30px,calc(16px + env(safe-area-inset-bottom)))!important}
footer b{color:rgba(255,255,255,.8)!important}
footer a{color:inherit}

/* --------------------------------------------------------------- sem suporte a vidro / menos movimento */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card{background:#241D17!important}}
@media (prefers-reduced-motion:reduce){.btn,button,.card,.tl .c,.progresso span{transition:none}}
/* 05/11/2026 — cabeçalho só com o monograma, como na /bio (68px, opacidade 55%, canto superior direito) */
body>header.pub-top{display:flex!important;justify-content:flex-end;text-align:right;padding:calc(24px + env(safe-area-inset-top)) 22px 14px!important}
.pub-top .pub-mono{display:block;margin:10px 10px 0 0}
.pub-top .pub-mono img{width:68px!important;height:auto!important;display:block;opacity:.55!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))!important}
@media (min-width:700px){body>header.pub-top{padding:calc(32px + env(safe-area-inset-top)) 24px 18px!important}}
/* 05/11/2026 — tela inteira no iPhone: html, body e barras do Safari na mesma cor do fundo (sem faixa ao rolar) */
html{background:#15110E!important;min-height:100%}
body{min-height:100vh;min-height:100lvh}