/* ==========================================================================
   Catequese Dom Bosco
   A identidade é a mesma do material impresso: Georgia, espresso e ouro
   sobre creme, filete dourado à esquerda das caixas, floreio como divisória.
   ========================================================================== */

:root {
  --espresso: #5b3a22;
  --ouro: #b28a35;
  --creme: #f7f0e0;
  --papel: #fdfaf3;
  --texto: #3f3a33;
  --discreto: #6e6657;
  --filete: #d8cfbe;

  --medida: 34rem;
  --serif: Georgia, "Times New Roman", Times, serif;

  --passo-1: 0.5rem;
  --passo-2: 1rem;
  --passo-3: 1.75rem;
  --passo-4: 3rem;
  --passo-5: 5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (min-width: 40rem) {
  body {
    font-size: 1.125rem;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--espresso);
  text-decoration-color: var(--ouro);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ouro);
}

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

/* Rótulos em versalete espaçado — vêm direto do impresso ------------------ */

.rotulo {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--discreto);
  margin: 0;
}

.floreio {
  text-align: center;
  color: var(--ouro);
  font-size: 1.5rem;
  margin: var(--passo-4) 0;
  line-height: 1;
}

/* Estrutura ---------------------------------------------------------------- */

.envelope {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--passo-3);
}

main {
  display: block;
  padding-bottom: var(--passo-5);
}

/* Cabeçalho ---------------------------------------------------------------- */

.cabecalho {
  border-bottom: 1px solid var(--filete);
  padding: var(--passo-3) 0;
  margin-bottom: var(--passo-4);
}

.cabecalho__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo-2) var(--passo-3);
  align-items: baseline;
  justify-content: space-between;
}

.cabecalho__marca {
  text-decoration: none;
  color: var(--espresso);
}

.cabecalho__nome {
  font-size: 1.25rem;
  color: var(--espresso);
  margin: 0;
  line-height: 1.2;
}

.cabecalho__lema {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0.35rem 0 0;
}

.navegacao {
  display: flex;
  gap: var(--passo-3);
  font-size: 0.9375rem;
}

.navegacao a {
  text-decoration: none;
  color: var(--discreto);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}

.navegacao a:hover,
.navegacao a[aria-current="page"] {
  color: var(--espresso);
  border-bottom-color: var(--ouro);
}

/* Capa --------------------------------------------------------------------- */

.capa {
  max-width: var(--medida);
  margin-bottom: var(--passo-5);
}

.capa__titulo {
  font-size: clamp(1.9rem, 6vw, 2.75rem);
  line-height: 1.15;
  color: var(--espresso);
  font-weight: normal;
  margin: 0 0 var(--passo-2);
}

.capa__texto {
  color: var(--discreto);
  margin: 0;
}

/* Grade de temas ----------------------------------------------------------- */

.pilar {
  margin-bottom: var(--passo-5);
}

.pilar__cabeca {
  max-width: var(--medida);
  margin-bottom: var(--passo-3);
}

.pilar__nome {
  font-size: 1.625rem;
  color: var(--espresso);
  font-weight: normal;
  margin: 0.25rem 0 var(--passo-1);
}

.pilar__resumo {
  color: var(--discreto);
  font-size: 1rem;
  margin: 0;
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--passo-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 34rem) {
  .grade {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--passo-3);
  }
}

@media (min-width: 56rem) {
  .grade {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quadro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 9.5rem;
  padding: var(--passo-2);
  background: var(--creme);
  border: 1px solid var(--filete);
  border-left: 3px solid var(--ouro);
  text-decoration: none;
  color: var(--espresso);
  transition: border-color 160ms ease, transform 160ms ease;
}

.quadro--imagem {
  background-size: cover;
  background-position: center;
  color: #fff;
  border-left-color: var(--ouro);
}

.quadro--imagem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(48, 30, 18, 0.85) 20%, rgba(48, 30, 18, 0.15));
}

.quadro__nome {
  position: relative;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.3;
  margin: 0;
}

a.quadro:hover {
  border-color: var(--ouro);
  transform: translateY(-2px);
}

.quadro--vazio {
  background: transparent;
  border: 1px dashed var(--filete);
  border-left: 3px solid var(--filete);
  color: var(--discreto);
}

.quadro__breve {
  position: relative;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--discreto);
  margin: 0 0 0.35rem;
}

/* Encontros fora da grade fixa (ancorados no calendário litúrgico) --------- */

.avulsos {
  margin-top: var(--passo-3);
  padding-left: var(--passo-2);
  border-left: 3px solid var(--filete);
}

.avulsos__titulo {
  margin-bottom: var(--passo-1);
}

.avulsos ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.avulsos li {
  margin-bottom: 0.35rem;
}

/* Lista de encontros por data ---------------------------------------------- */

.encontros {
  margin-top: var(--passo-2);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 46rem;
}

.encontros li {
  border-top: 1px solid var(--filete);
}

.encontros li:last-child {
  border-bottom: 1px solid var(--filete);
}

.encontro {
  display: block;
  padding: var(--passo-3) 0;
  text-decoration: none;
  color: inherit;
}

.encontro:hover .encontro__titulo {
  color: var(--ouro);
}

.encontro__data {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 var(--passo-1);
}

.encontro__titulo {
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--espresso);
  font-weight: normal;
  margin: 0 0 var(--passo-1);
  transition: color 160ms ease;
}

.encontro__resumo {
  color: var(--discreto);
  font-size: 1rem;
  margin: 0;
}

/* Artigo ------------------------------------------------------------------- */

.artigo {
  max-width: var(--medida);
}

.artigo__cabeca {
  margin-bottom: var(--passo-4);
}

.artigo__data {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 var(--passo-2);
}

.artigo__titulo {
  font-size: clamp(1.75rem, 5.5vw, 2.375rem);
  line-height: 1.15;
  color: var(--espresso);
  font-weight: normal;
  margin: 0;
}

.artigo__subtitulo {
  font-size: 1.1875rem;
  color: var(--discreto);
  font-style: italic;
  margin: var(--passo-1) 0 0;
}

.artigo h2 {
  font-size: 1.375rem;
  color: var(--espresso);
  font-weight: normal;
  margin: var(--passo-4) 0 var(--passo-2);
}

.artigo h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--discreto);
  font-weight: normal;
  margin: var(--passo-3) 0 var(--passo-1);
}

.artigo p {
  margin: 0 0 var(--passo-2);
}

.artigo ul,
.artigo ol {
  padding-left: 1.15rem;
  margin: 0 0 var(--passo-2);
}

.artigo li {
  margin-bottom: var(--passo-1);
}

.artigo li::marker {
  color: var(--ouro);
}

/* Blocos do material ------------------------------------------------------- */

.caixa,
.oracao,
.semana {
  background: var(--creme);
  border-left: 3px solid var(--ouro);
  padding: var(--passo-2) var(--passo-3);
  margin: var(--passo-3) 0;
}

.caixa__titulo,
.oracao__titulo,
.semana__titulo {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0 0 var(--passo-1);
}

.caixa__corpo > :last-child,
.oracao__corpo > :last-child,
.semana > :last-child {
  margin-bottom: 0;
}

.caixa p,
.oracao p,
.semana p {
  margin: 0 0 var(--passo-1);
}

.oracao__corpo {
  font-style: italic;
  color: var(--espresso);
}

.semana ul {
  padding-left: 1.15rem;
  margin: 0;
}

.semana li::marker {
  color: var(--ouro);
}

/* Leitura ------------------------------------------------------------------ */

.leitura {
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
  padding: var(--passo-3) 0;
  margin: var(--passo-4) 0;
}

.leitura__rotulo {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 var(--passo-1);
}

.leitura__ref {
  color: var(--espresso);
  font-size: 1.0625rem;
  margin: 0 0 var(--passo-2);
}

.leitura__formula,
.leitura__resposta {
  color: var(--discreto);
  font-size: 0.9375rem;
  margin: 0;
}

.leitura__resposta {
  font-style: italic;
  margin-bottom: var(--passo-2);
}

.leitura__texto {
  margin: var(--passo-2) 0;
}

.leitura__texto p {
  margin: 0 0 var(--passo-2);
}

.leitura__texto > :last-child {
  margin-bottom: 0;
}

/* Citação ------------------------------------------------------------------ */

.citacao {
  margin: var(--passo-3) 0;
  padding-left: var(--passo-3);
  border-left: 1px solid var(--filete);
}

.citacao blockquote {
  margin: 0;
  font-style: italic;
  color: var(--espresso);
}

.citacao blockquote p {
  margin: 0 0 var(--passo-1);
}

.citacao figcaption {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--discreto);
}

/* Baixar o material -------------------------------------------------------- */

.baixar {
  display: inline-block;
  margin: var(--passo-3) 0;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--ouro);
  color: var(--espresso);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms ease;
}

.baixar:hover {
  background: var(--creme);
  color: var(--espresso);
}

/* Rodapé ------------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--filete);
  padding: var(--passo-3) 0 var(--passo-4);
  color: var(--discreto);
  font-size: 0.875rem;
}

.rodape__lema {
  color: var(--espresso);
  font-style: italic;
  margin: 0 0 var(--passo-1);
}

.rodape p {
  margin: 0 0 0.35rem;
}

/* Aviso -------------------------------------------------------------------- */

.aviso {
  max-width: var(--medida);
  border: 1px solid var(--filete);
  border-left: 3px solid var(--ouro);
  background: var(--creme);
  padding: var(--passo-2) var(--passo-3);
  margin: var(--passo-4) 0;
  font-size: 1rem;
  color: var(--discreto);
}

.aviso p {
  margin: 0;
}

/* Impressão ---------------------------------------------------------------- */

@media print {
  .cabecalho,
  .navegacao,
  .baixar {
    display: none;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Interface da comunidade e administração */
:root { --espresso:#203d36; --ouro:#94702e; --creme:#f1eee5; --papel:#f8f9f6; --texto:#273e37; --discreto:#63716a; --filete:#dce3db; }
body { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; background:radial-gradient(ellipse at top right,#e7eee4,transparent 55%),var(--papel); }
h1,h2,.capa__titulo,.pilar__nome,.artigo__titulo,.cabecalho__nome { font-family:Georgia,serif; }
.cabecalho { background:#ffffffde; margin-bottom:3rem; padding:1.3rem 0; }
.cabecalho__nome { font-weight:bold; }
.navegacao { flex-wrap:wrap; gap:1.25rem; font-size:.875rem; }
.navegacao a { padding:.5rem 0; }
.capa { max-width:none; padding:3rem; border-radius:24px; background:linear-gradient(120deg,#193e32,#355c49); position:relative; overflow:hidden; box-shadow:0 16px 40px #203d3612; }
.capa::after { content:'✦'; position:absolute; right:3%; top:0; font-size:15rem; color:#ffffff0a; pointer-events:none; }
.capa__titulo { color:#fffaf0; max-width:650px; font-size:clamp(2rem,5vw,3.5rem); }
.capa__texto { color:#e0e8dd; max-width:650px; font-size:1rem; }
.pilar__cabeca { max-width:46rem; }
.pilar__nome { font-size:2rem; }
.quadro { min-height:12rem; border:1px solid var(--filete); border-radius:16px; overflow:hidden; box-shadow:0 6px 18px #203d3608; }
.quadro__nome { font-weight:600; }
.quadro--vazio { background:#ffffff85; border:1px dashed #cad5c9; box-shadow:none; }
.quadro--imagem { color:white; }
.quadro--imagem:hover { color:white; }
.encontros { max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.encontros li,.encontros li:last-child { border:1px solid var(--filete); border-radius:16px; background:white; overflow:hidden; }
.encontro { padding:1.75rem; height:100%; }
.encontro:hover { background:#f3f6ef; }
.artigo { margin:0 auto; max-width:44rem; background:#fff; padding:2.5rem; border:1px solid var(--filete); border-radius:20px; }
.artigo p,.leitura__texto { line-height:1.9; }
.caixa,.oracao,.semana,.aviso { border-radius:0 12px 12px 0; }
.rodape { background:#eef2eb; }
.auth-layout { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:4rem; padding:1rem 0 3rem; }
.auth-intro h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.15; font-weight:normal; margin:1.5rem 0; }
.auth-intro p { color:var(--discreto); }
.pill { display:inline-block; padding:.5rem 1rem; border:1px solid #ccd8c7; border-radius:40px; font-size:.75rem; color:var(--espresso); margin-top:1.5rem; }
.panel { background:white; border:1px solid var(--filete); border-radius:20px; padding:2rem; box-shadow:0 12px 35px #213f3505; }
.panel h1,.dashboard-head h1 { font-size:2.3rem; line-height:1.2; margin:.5rem 0 1rem; }
.panel h2 { margin:.5rem 0 1rem; font-size:1.7rem; }
.muted,small { color:var(--discreto); }
small { font-size:.8rem; }
label { display:block; font-size:.875rem; font-weight:600; margin:1.2rem 0; }
label small { display:block; font-weight:normal; margin-top:.3rem; }
input,select { display:block; width:100%; padding:.85rem 1rem; margin-top:.4rem; background:#fafbf8; border:1px solid #cbd5c8; border-radius:9px; font:inherit; color:var(--texto); }
button,.button { display:inline-block; padding:.85rem 1.3rem; background:var(--espresso); color:white; border:1px solid var(--espresso); border-radius:9px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:#34584b; color:white; }
.auth-layout button { width:100%; }
.secondary { background:white; color:var(--espresso); }
.notice { background:#fff3df; padding:1rem; border-radius:8px; color:#794b14; }
.narrow { max-width:38rem; margin:2rem auto; }
.dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0; }
.stats strong { display:block; font-size:2.5rem; font-family:Georgia,serif; }
.stats span { color:var(--discreto); font-size:.875rem; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.9rem; }
th { font-size:.75rem; color:var(--discreto); text-transform:uppercase; letter-spacing:.05em; }
th,td { padding:1rem .75rem; border-bottom:1px solid var(--filete); }
.badge { display:inline-block; border-radius:20px; padding:.2rem .7rem; font-size:.75rem; white-space:nowrap; }
.active { background:#e5f2e8; color:#245f39; }.pending { background:#fff0d6; color:#795311; }.blocked { background:#fbe6e5; color:#93312a; }
@media(max-width:700px) { .auth-layout { grid-template-columns:1fr; gap:2rem; }.auth-intro h1 {font-size:2.4rem}.stats {grid-template-columns:1fr}.stats .panel {display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem}.dashboard-head {align-items:flex-start;flex-direction:column}.encontros {grid-template-columns:1fr}.capa,.panel,.artigo {padding:1.5rem}.envelope {padding:0 1rem}.cabecalho {margin-bottom:2rem} }
@media print { .artigo {border:0;padding:0}.capa {background:white}.capa__titulo,.capa__texto {color:black} }