:root{
  --papel:#F6F1E7;
  --papel-fundo:#EFE8D8;
  --tinta:#241C13;
  --tinta-suave:#5C5040;
  --oxblood:#6B1E2B;
  --oxblood-claro:#8A2C3A;
  --ouro:#A9843F;
  --muted:#8A7B63;
  --linha:#DCD2BC;
  --display:'Marcellus', serif;
  --corpo:'EB Garamond', Georgia, serif;
  --util:'Archivo', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:19px;
  line-height:1.65;
  /* textura sutil de papel */
  background-image:radial-gradient(rgba(160,138,80,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
img{max-width:100%;display:block}
a{color:var(--oxblood);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,5vw,48px);
  border-bottom:1px solid var(--linha);
}
.marca{display:flex;align-items:center;gap:10px;color:var(--tinta)}
.marca:hover{text-decoration:none}
.marca-cruz{color:var(--oxblood);font-size:18px}
.marca-nome{font-family:var(--display);font-size:20px;letter-spacing:.02em}
.topo nav{display:flex;gap:22px;font-family:var(--util);font-size:13px;
  text-transform:uppercase;letter-spacing:.14em}
.topo nav a{color:var(--tinta-suave)}

/* ---------- eyebrow / rótulos ---------- */
.eyebrow{
  font-family:var(--util);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--oxblood);
  margin:0 0 6px;
}
.eyebrow.centro{text-align:center}

main{max-width:720px;margin:0 auto;padding:clamp(28px,6vw,64px) clamp(18px,5vw,32px)}

/* ---------- página do missal ---------- */
.missal{
  background:var(--papel);
  border:1px solid var(--linha);
  /* fio de ouro interno */
  box-shadow:inset 0 0 0 1px transparent, inset 0 0 0 4px var(--papel), inset 0 0 0 5px rgba(169,132,63,.35);
  padding:clamp(28px,6vw,56px);
}
.missal-cabeca{text-align:center;margin-bottom:26px}
.missal-data{font-family:var(--util);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0}
.missal-figura{margin:0 0 30px}
.missal-figura img{
  width:100%;border-radius:2px;
  filter:sepia(.12) contrast(1.02);
  box-shadow:0 12px 30px rgba(36,28,19,.16);
}

/* versículo iluminado */
.versiculo{
  position:relative;margin:0 0 34px;padding:8px 0 8px 4px;
  font-size:1.28em;font-style:italic;line-height:1.5;color:var(--tinta);
  text-align:left;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding-top:22px;padding-bottom:22px;
}
.versiculo .drop{
  float:left;font-family:var(--display);font-style:normal;
  font-size:3.2em;line-height:.8;color:var(--oxblood);
  margin:6px 12px 0 0;
}
.versiculo cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:var(--util);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxblood);
}

.missal-titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7em,5vw,2.3em);line-height:1.15;
  text-align:center;margin:0 0 30px;letter-spacing:.01em;
}

/* player "ouvir" */
.ouvir{
  text-align:center;margin:0 0 34px;padding:22px;
  background:var(--papel-fundo);border-radius:4px;
}
.ouvir-rotulo{font-family:var(--util);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oxblood);margin:0 0 12px}
.ouvir audio{width:100%;max-width:420px}

.missal-texto p{margin:0 0 1.15em;text-align:justify;hyphens:auto}
.missal-texto p:first-of-type::first-letter{
  font-family:var(--display);font-size:1.15em;color:var(--oxblood);
}
.assinatura{margin-top:28px;text-align:right;font-style:italic;color:var(--tinta-suave)}
.voltar{display:inline-block;margin-top:30px;font-family:var(--util);
  font-size:13px;letter-spacing:.08em}

/* ---------- recentes ---------- */
.recentes{margin-top:56px}
.recentes ul{list-style:none;padding:0;margin:18px 0 0}
.recentes li{border-bottom:1px solid var(--linha)}
.recentes li a{display:flex;flex-direction:column;gap:2px;padding:14px 2px;color:var(--tinta)}
.recentes li a:hover{text-decoration:none;background:rgba(169,132,63,.06)}
.recentes-data{font-family:var(--util);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.recentes-titulo{font-size:1.05em}
.ver-tudo{display:inline-block;margin-top:22px;font-family:var(--util);font-size:13px;letter-spacing:.06em}

/* ---------- arquivo / busca ---------- */
.arquivo-titulo{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9em,6vw,2.6em);margin:0 0 26px;text-align:center}
.busca{display:flex;gap:10px;margin:0 auto 34px;max-width:560px}
.busca input{flex:1;padding:13px 16px;border:1px solid var(--linha);
  background:#fff;border-radius:3px;font-family:var(--corpo);font-size:16px}
.busca input:focus{outline:2px solid var(--oxblood);outline-offset:1px;border-color:transparent}
.busca button{padding:13px 22px;border:none;background:var(--oxblood);color:#fff;
  font-family:var(--util);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:3px;cursor:pointer}
.busca button:hover{background:var(--oxblood-claro)}

.lista-resultados{list-style:none;padding:0;margin:0}
.lista-resultados li{border-bottom:1px solid var(--linha)}
.lista-resultados li a{display:block;padding:18px 2px;color:var(--tinta)}
.lista-resultados li a:hover{text-decoration:none;background:rgba(169,132,63,.06)}
.res-topo{display:flex;gap:14px;align-items:baseline;margin-bottom:4px}
.res-data{font-family:var(--util);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.res-ref{font-family:var(--util);font-size:11px;color:var(--oxblood);letter-spacing:.08em}
.res-titulo{display:block;font-size:1.12em;line-height:1.3}
.res-santo{display:block;font-size:.9em;color:var(--tinta-suave);font-style:italic}
.sem-resultado{text-align:center;color:var(--tinta-suave);font-style:italic;padding:40px 0}

/* ---------- vazio / login ---------- */
.vazio,.login{text-align:center;padding:60px 0}
.vazio-cruz,.login-cruz{font-size:34px;color:var(--oxblood);margin:0 0 14px}
.login-form{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:24px auto 0}
.login-form input{padding:13px 16px;border:1px solid var(--linha);border-radius:3px;
  font-family:var(--corpo);font-size:16px;text-align:center}
.login-form button{padding:13px;border:none;background:var(--oxblood);color:#fff;
  font-family:var(--util);letter-spacing:.1em;text-transform:uppercase;border-radius:3px;cursor:pointer}

/* ---------- avisos ---------- */
.avisos{max-width:720px;margin:16px auto 0;padding:0 20px}
.aviso{padding:12px 16px;border-radius:3px;font-size:15px;margin-bottom:8px}
.aviso-ok{background:#e8efe2;color:#3a5230;border:1px solid #c4d6b6}
.aviso-erro{background:#f3e2e2;color:var(--oxblood);border:1px solid #e0bcbc}

/* ---------- admin ---------- */
.admin{max-width:100%}
.admin-cabeca{display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;flex-wrap:wrap;margin-bottom:26px}
.admin-acoes{display:flex;gap:10px}
.btn{display:inline-block;padding:11px 18px;border:1px solid var(--linha);
  border-radius:3px;font-family:var(--util);font-size:13px;letter-spacing:.06em;
  color:var(--tinta);background:#fff;cursor:pointer}
.btn:hover{text-decoration:none;border-color:var(--oxblood)}
.btn-primario{background:var(--oxblood);color:#fff;border-color:var(--oxblood)}
.btn-primario:hover{background:var(--oxblood-claro)}
.btn-primario[disabled]{opacity:.5;cursor:not-allowed}
.btn-voz{border-color:var(--ouro);color:var(--oxblood)}

.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th{font-family:var(--util);font-size:11px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);text-align:left;padding:10px 8px;
  border-bottom:2px solid var(--linha)}
.tabela td{padding:12px 8px;border-bottom:1px solid var(--linha);vertical-align:middle}
.td-data{white-space:nowrap;font-family:var(--util);font-size:13px}
.td-acoes{display:flex;gap:12px;align-items:center;font-family:var(--util);font-size:13px}
.td-acoes form{margin:0}
.tag{font-family:var(--util);font-size:10px;background:var(--papel-fundo);
  padding:2px 6px;border-radius:2px;color:var(--tinta-suave);letter-spacing:.08em}
.link-perigo{background:none;border:none;color:var(--oxblood);cursor:pointer;
  font-family:var(--util);font-size:13px;padding:0}
.ponto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.ponto.ok{background:#4c7a3a}
.ponto.off{background:#c9bfa8}
.ponto.proc{background:var(--ouro);animation:pulsa 1.2s infinite}
@keyframes pulsa{50%{opacity:.35}}

/* formulário */
.form-entrada{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-family:var(--util);font-size:13px;font-weight:600;letter-spacing:.04em}
.campo input[type=text],.campo input[type=date],.campo textarea{
  padding:11px 14px;border:1px solid var(--linha);border-radius:3px;
  font-family:var(--corpo);font-size:16px;background:#fff}
.campo textarea{resize:vertical;line-height:1.55}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--oxblood);outline-offset:1px;border-color:transparent}
.dica{font-family:var(--util);font-weight:400;font-size:12px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:10px;font-family:var(--util);font-size:14px}
.checks label{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-rodape{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* estúdio de voz */
.corpus{margin:22px 0}
.corpus-num{font-size:1.05em;margin-bottom:10px}
.corpus-num strong{font-family:var(--display);color:var(--oxblood);font-size:1.3em}
.barra{height:8px;background:var(--papel-fundo);border-radius:6px;overflow:hidden}
.barra-cheia{height:100%;background:linear-gradient(90deg,var(--oxblood),var(--ouro))}
.voz-estado{margin:20px 0;font-family:var(--util);font-size:14px}
.bloco-voz{margin:28px 0;padding:22px;background:#fff;border:1px solid var(--linha);border-radius:4px}
.bloco-tit{font-family:var(--display);font-weight:400;font-size:1.3em;margin:0 0 6px}
.bloco-voz textarea{width:100%;padding:12px 14px;border:1px solid var(--linha);
  border-radius:3px;font-family:var(--corpo);font-size:16px;margin:12px 0;resize:vertical}

/* ---------- rodapé ---------- */
.rodape{text-align:center;padding:40px 20px 48px;border-top:1px solid var(--linha);margin-top:60px}
.rodape-cruz{color:var(--oxblood);font-size:16px}
.rodape p{font-style:italic;color:var(--tinta-suave);max-width:440px;margin:10px auto 0;font-size:15px}
.rodape-adm{display:inline-block;margin-top:14px;color:var(--linha);font-size:20px}

@media(max-width:560px){
  body{font-size:18px}
  .topo{flex-direction:column;gap:12px}
  .admin-cabeca{flex-direction:column;align-items:stretch}
  .td-acoes{flex-direction:column;gap:6px;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}