/* Fé na Prática — claro, bege e dourado */

:root{
  /* marca */
  --ouro:        #b08d3f;
  --ouro-claro:  #d4b877;
  --ouro-suave:  #f6efdf;

  /* base */
  --fundo:       #fbf7f0;   /* bege papel */
  --fundo-2:     #f4ece0;   /* bege mais quente */
  --cartao:      #ffffff;
  --texto:       #3a3226;   /* marrom escuro, mais suave que preto */
  --texto-suave: #8a7d68;
  --borda:       #ebe0cd;

  /* cor do tempo litúrgico — usada só em detalhes, o dourado é a marca */
  --tempo:       #2f7d4f;

  --sombra:  0 1px 2px rgba(120,95,45,.05), 0 10px 30px rgba(120,95,45,.06);
  --sombra-2:0 4px 24px rgba(120,95,45,.12);
  --raio: 16px;
  --largura: 700px;
}

/* tema escuro, ativado só quando a pessoa escolhe em Eu › Ajustes */
:root[data-tema="escuro"]{
  --fundo:#191710; --fundo-2:#211e15; --cartao:#221f17;
  --texto:#f1ece1; --texto-suave:#a9a08c; --borda:#332f23;
  --ouro:#d2b46e; --ouro-claro:#e0c98f; --ouro-suave:#2a2418;
  --sombra:0 1px 3px rgba(0,0,0,.45);
  --sombra-2:0 6px 26px rgba(0,0,0,.5);
}
:root[data-tema="escuro"] body{background-image:none}
:root[data-tema="escuro"] header.topo,
:root[data-tema="escuro"] nav.abas{background:rgba(34,31,23,.96)}
:root[data-tema="escuro"] .bloco.palavra{background:linear-gradient(180deg,#262218,#221f17)}
:root[data-tema="escuro"] .caixa-prompt{color:#e8e0cf}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fundo);
  background-image:
    radial-gradient(1100px 420px at 50% -160px, #fffdf8 0%, rgba(255,253,248,0) 70%);
  color:var(--texto);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:19px;
  line-height:1.68;
}

.container{max-width:var(--largura);margin:0 auto;padding:0 20px}

/* ---------- topo ---------- */
header.topo{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:50;
}
.topo-interno{
  max-width:var(--largura);margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.marca{
  font-weight:700;font-size:1.12rem;color:var(--texto);
  text-decoration:none;display:flex;align-items:center;gap:9px;letter-spacing:.01em;
}
.marca .chama{
  color:var(--ouro);font-size:1.25rem;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(176,141,63,.35));
}
nav.menu{display:flex;gap:2px;flex-wrap:wrap}
nav.menu a{
  color:var(--texto-suave);text-decoration:none;font-size:.84rem;
  padding:7px 11px;border-radius:9px;font-family:system-ui,sans-serif;
  transition:background .15s,color .15s;
}
nav.menu a:hover{background:var(--ouro-suave);color:var(--ouro)}
nav.menu a.ativo{background:var(--ouro);color:#fff}

/* ---------- barra inferior (celular) ---------- */
nav.abas{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--borda);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,1fr);
}
nav.abas a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;color:var(--texto-suave);
  font-family:system-ui,sans-serif;font-size:.64rem;letter-spacing:.02em;
  padding:6px 2px;border-radius:10px;
}
nav.abas a .ico{font-size:1.28rem;line-height:1;filter:grayscale(1);opacity:.55}
nav.abas a.ativo{color:var(--ouro);font-weight:700}
nav.abas a.ativo .ico{filter:none;opacity:1}

/* botão flutuante do Conselheiro */
.fab{
  position:fixed;right:16px;z-index:75;bottom:calc(78px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(145deg,var(--ouro-claro),var(--ouro));color:#fff;
  text-decoration:none;padding:12px 17px;border-radius:99px;
  font-family:system-ui,sans-serif;font-size:.85rem;font-weight:700;
  box-shadow:0 6px 20px rgba(176,141,63,.42);
}
.fab:active{transform:scale(.97)}

@media (max-width:760px){
  nav.menu{display:none}
  nav.abas{display:grid}
  body{padding-bottom:82px}
  .zap{bottom:calc(140px + env(safe-area-inset-bottom))}
}
@media (min-width:761px){
  .fab{bottom:22px}
}

/* faixa do tempo litúrgico — discreta, cor sutil */
.faixa-lit{
  text-align:center;padding:9px 20px;font-size:.76rem;
  font-family:system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texto-suave);background:var(--fundo-2);
  border-bottom:1px solid var(--borda);
}
.faixa-lit .selo{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--tempo);margin-right:8px;vertical-align:middle;
}

/* ---------- títulos ---------- */
main{padding:34px 0 70px}
.saudacao{
  margin:0 0 5px;font-size:1.85rem;line-height:1.22;font-weight:600;letter-spacing:-.01em;
}
.data{
  color:var(--texto-suave);font-size:.85rem;margin:0 0 26px;
  font-family:system-ui,sans-serif;text-transform:capitalize;
}

/* filete dourado decorativo */
.filete{
  height:1px;border:0;margin:34px 0;
  background:linear-gradient(90deg,transparent,var(--ouro-claro),transparent);
}

/* ---------- blocos ---------- */
.bloco{
  background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio);padding:24px 26px;margin-bottom:16px;
  box-shadow:var(--sombra);
}
.bloco h2{
  margin:0 0 13px;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro);font-family:system-ui,sans-serif;font-weight:700;
}
.bloco p{margin:0 0 12px}
.bloco p:last-child{margin-bottom:0}

/* bloco de destaque da Palavra */
.bloco.palavra{
  background:linear-gradient(180deg,#fffdf8,#fdf8ee);
  border-color:var(--ouro-claro);
  box-shadow:var(--sombra-2);
}
.versiculo{font-size:1.28rem;line-height:1.6;font-style:italic;margin-bottom:12px}
.referencia{
  font-family:system-ui,sans-serif;font-size:.84rem;font-weight:700;
  color:var(--ouro);font-style:normal;letter-spacing:.02em;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--ouro);color:#fff;border:0;cursor:pointer;
  padding:13px 22px;border-radius:11px;font-size:.94rem;font-weight:600;
  font-family:system-ui,sans-serif;text-decoration:none;
  box-shadow:0 2px 8px rgba(176,141,63,.25);
  transition:opacity .15s,transform .06s,box-shadow .15s;
}
.btn:hover{opacity:.92;box-shadow:0 4px 14px rgba(176,141,63,.32)}
.btn:active{transform:scale(.985)}
.btn.secundario{
  background:transparent;color:var(--ouro);
  border:1.5px solid var(--ouro-claro);box-shadow:none;
}
.btn.feito{background:var(--texto-suave);box-shadow:none;cursor:default}
.btn.largo{width:100%}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}

/* ---------- vídeo ---------- */
.video{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:12px;background:#1a150c;margin-top:6px;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- cards ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra);text-decoration:none;color:var(--texto);
  display:block;transition:transform .14s,box-shadow .14s,border-color .14s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--ouro-claro)}
.card h3{margin:0 0 6px;font-size:1.06rem}
.card .meta{color:var(--texto-suave);font-size:.82rem;font-family:system-ui,sans-serif;margin:0}

.modulo{margin-bottom:34px}
.modulo > h2{font-size:1.32rem;margin:0 0 4px;font-weight:600}
.modulo > .meta{color:var(--texto-suave);font-size:.86rem;font-family:system-ui,sans-serif;margin:0 0 14px}
.lista-aulas{list-style:none;padding:0;margin:0}
.lista-aulas li{border-bottom:1px solid var(--borda)}
.lista-aulas li:last-child{border-bottom:0}
.lista-aulas a{display:flex;align-items:center;gap:14px;padding:15px 4px;text-decoration:none;color:var(--texto)}
.lista-aulas a:hover{color:var(--ouro)}
.marcador{
  flex:0 0 26px;height:26px;border-radius:50%;border:2px solid var(--borda);
  display:grid;place-items:center;font-size:.75rem;color:var(--ouro);
}
.marcador.ok{background:var(--ouro);border-color:var(--ouro);color:#fff}
.titulo-aula{flex:1}
.dur{color:var(--texto-suave);font-size:.8rem;font-family:system-ui,sans-serif}

/* ---------- progresso ---------- */
.barra{height:7px;background:var(--fundo-2);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.barra > span{
  display:block;height:100%;border-radius:99px;transition:width .4s;
  background:linear-gradient(90deg,var(--ouro-claro),var(--ouro));
}

/* ---------- calendário ---------- */
.cal-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-topo h3{margin:0;font-size:1.05rem;text-transform:capitalize;font-weight:600}
.cal-nav{
  background:var(--fundo-2);border:1px solid var(--borda);color:var(--texto);
  cursor:pointer;border-radius:9px;padding:6px 13px;font-size:1rem;line-height:1;
}
.cal-nav:hover{border-color:var(--ouro-claro);color:var(--ouro)}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dia-semana{
  text-align:center;font-size:.66rem;color:var(--texto-suave);
  font-family:system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;padding-bottom:7px;
}
.cal-cel{
  aspect-ratio:1;border:1px solid var(--borda);border-radius:10px;background:var(--cartao);
  color:var(--texto);cursor:pointer;font-family:system-ui,sans-serif;font-size:.85rem;
  display:grid;place-items:center;position:relative;padding:0;transition:all .12s;
}
.cal-cel:hover{border-color:var(--ouro);color:var(--ouro)}
.cal-cel.vazio{border:0;background:none;cursor:default}
.cal-cel.hoje{
  background:var(--ouro);color:#fff;border-color:var(--ouro);font-weight:700;
  box-shadow:0 2px 10px rgba(176,141,63,.35);
}
.cal-cel.futuro{opacity:.3;cursor:not-allowed;background:none}
.cal-cel .ponto{
  position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--ouro);
}
.cal-cel.hoje .ponto{background:#fff}
.cal-legenda{
  margin-top:14px;font-size:.78rem;color:var(--texto-suave);
  font-family:system-ui,sans-serif;
}

/* ---------- prompt ---------- */
.caixa-prompt{
  background:var(--ouro-suave);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.62;white-space:pre-wrap;
  max-height:340px;overflow-y:auto;color:#4a4030;
}
.passos{counter-reset:p;list-style:none;padding:0}
.passos li{counter-increment:p;position:relative;padding-left:46px;margin-bottom:18px}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(145deg,var(--ouro-claro),var(--ouro));color:#fff;
  display:grid;place-items:center;font-family:system-ui,sans-serif;
  font-size:.85rem;font-weight:700;
}
.exemplo{
  background:var(--fundo);border:1px dashed var(--ouro-claro);border-radius:11px;
  padding:12px 16px;margin-bottom:9px;font-style:italic;font-size:.95rem;
}
.exemplo:hover{background:var(--ouro-suave)}
.aviso{
  border-left:3px solid var(--ouro);background:var(--ouro-suave);
  padding:14px 18px;border-radius:0 11px 11px 0;font-size:.92rem;
}

/* ---------- constância / rodapé ---------- */
.constancia{
  text-align:center;color:var(--texto-suave);font-size:.9rem;
  font-family:system-ui,sans-serif;padding:24px 0 6px;
}
footer{
  border-top:1px solid var(--borda);margin-top:44px;padding:32px 0 64px;
  text-align:center;color:var(--texto-suave);font-size:.81rem;
  font-family:system-ui,sans-serif;background:var(--fundo-2);
}
footer a{color:var(--ouro)}
footer p{margin:0 0 7px}
.zap{
  position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.2);text-decoration:none;font-size:1.5rem;z-index:60;
}
.oculto{display:none !important}

/* ---------- destaque (Manual e Aulas na home) ---------- */
.destaque{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:16px;
}
.destaque a{
  position:relative;overflow:hidden;text-decoration:none;color:#fff;
  border-radius:var(--raio);padding:24px 22px;min-height:132px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(150deg,#6b5a3a,#3f3524);
  box-shadow:var(--sombra-2);transition:transform .14s;
}
.destaque a:active{transform:scale(.99)}
.destaque a.ouro{background:linear-gradient(150deg,#d0ae62,#a97f2e)}
.destaque .selo-d{
  font-family:system-ui,sans-serif;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.85;margin-bottom:6px;
}
.destaque h3{margin:0 0 4px;font-size:1.22rem;line-height:1.25}
.destaque p{margin:0;font-size:.84rem;opacity:.9;font-family:system-ui,sans-serif}
.destaque .emoji{position:absolute;top:16px;right:18px;font-size:1.7rem;opacity:.55}

/* ---------- abas internas (pílulas) ---------- */
.pilulas{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch}
.pilulas button{
  flex:0 0 auto;background:var(--cartao);border:1px solid var(--borda);color:var(--texto-suave);
  padding:9px 16px;border-radius:99px;cursor:pointer;
  font-family:system-ui,sans-serif;font-size:.85rem;white-space:nowrap;
}
.pilulas button.ativo{background:var(--ouro);border-color:var(--ouro);color:#fff;font-weight:600}

/* ---------- sanfona (liturgia, orações, exame) ---------- */
.sanfona{border-bottom:1px solid var(--borda)}
.sanfona:last-child{border-bottom:0}
.sanfona > summary{
  cursor:pointer;padding:15px 2px;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:12px;font-size:1.02rem;
}
.sanfona > summary::-webkit-details-marker{display:none}
.sanfona > summary::after{content:'+';color:var(--ouro);font-size:1.3rem;line-height:1}
.sanfona[open] > summary::after{content:'–'}
.sanfona > summary:hover{color:var(--ouro)}
.sanfona .corpo{padding:2px 2px 18px;white-space:pre-line}

/* ---------- setas de dia ---------- */
.nav-dia{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.nav-dia button{
  background:var(--cartao);border:1px solid var(--borda);color:var(--texto);
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;flex:0 0 auto;
}
.nav-dia button:hover:not(:disabled){border-color:var(--ouro);color:var(--ouro)}
.nav-dia button:disabled{opacity:.3;cursor:not-allowed}

/* ---------- terço ---------- */
.terco-topo{text-align:center;margin-bottom:18px}
.terco-mist{font-size:1.15rem;font-weight:600;margin:0 0 4px}
.contas{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.conta{
  width:19px;height:19px;border-radius:50%;border:2px solid var(--borda);background:var(--cartao);
}
.conta.feita{background:var(--ouro);border-color:var(--ouro)}
.conta.atual{border-color:var(--ouro);box-shadow:0 0 0 4px var(--ouro-suave)}
.terco-texto{
  background:var(--ouro-suave);border-radius:var(--raio);padding:20px;
  font-style:italic;white-space:pre-line;min-height:120px;
}
.terco-passo{
  text-align:center;font-family:system-ui,sans-serif;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:10px;
}

/* ---------- exame de consciência ---------- */
.item-exame{
  display:flex;align-items:flex-start;gap:12px;padding:12px 2px;
  border-bottom:1px solid var(--borda);cursor:pointer;
}
.item-exame:last-child{border-bottom:0}
.item-exame .cx{
  flex:0 0 22px;height:22px;border-radius:6px;border:2px solid var(--borda);
  display:grid;place-items:center;font-size:.72rem;color:#fff;margin-top:4px;
}
.item-exame.marcado .cx{background:var(--ouro);border-color:var(--ouro)}
.item-exame.marcado span:last-child{color:var(--texto-suave)}

/* ---------- humor ---------- */
.humor{display:flex;gap:8px;justify-content:space-between}
.humor button{
  flex:1;background:var(--cartao);border:1px solid var(--borda);border-radius:12px;
  padding:12px 4px;cursor:pointer;font-size:1.5rem;line-height:1;
}
.humor button.ativo{border-color:var(--ouro);background:var(--ouro-suave)}

/* ---------- ajustes ---------- */
.linha-ajuste{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--borda);
}
.linha-ajuste:last-child{border-bottom:0}
.linha-ajuste .rot{font-size:.98rem}
.grupo-btn{display:flex;gap:6px}
.grupo-btn button{
  background:var(--cartao);border:1px solid var(--borda);color:var(--texto);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-family:system-ui,sans-serif;font-size:.85rem;
}
.grupo-btn button.ativo{background:var(--ouro);border-color:var(--ouro);color:#fff}

/* ---------- números da caminhada ---------- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.numero{
  background:var(--fundo-2);border-radius:12px;padding:16px;text-align:center;
}
.numero b{display:block;font-size:1.7rem;color:var(--ouro);line-height:1.1}
.numero span{font-size:.76rem;color:var(--texto-suave);font-family:system-ui,sans-serif}

input[type=email]{
  padding:13px 15px;border:1px solid var(--borda);border-radius:11px;
  background:var(--cartao);color:var(--texto);font-size:.95rem;font-family:system-ui,sans-serif;
}
input[type=email]:focus{outline:2px solid var(--ouro-claro);outline-offset:1px}

@media (max-width:520px){
  body{font-size:18px}
  .saudacao{font-size:1.55rem}
  .bloco{padding:20px}
  nav.menu a{padding:6px 8px;font-size:.8rem}
}