/* Fita Branca — estilos
   Pensado para o público 50+: corpo 19px, botões com no mínimo 58px,
   alvo de toque nunca abaixo de 52px, contraste alto. */

:root{
  --fs: 19px;
  --bg:#F7F2E8; --bg2:#EFE6D3; --card:#FFFCF6; --card2:#FBF5E9;
  --tx:#2B1D10; --tx2:#6B5640; --tx3:#97826A;
  --ouro:#B98A2E; --ouro2:#D9B25E; --ouro3:#F3E3BC; --ouroTx:#7A5A18;
  --rosa:#B5566B; --verde:#4F7A4A;
  --borda:#E4D6BC; --sombra:0 2px 10px rgba(80,55,20,.08), 0 1px 2px rgba(80,55,20,.06);
  --btn-grad:linear-gradient(180deg,#D9AE52 0%,#BE8D2F 100%);
  --btn-tx:#2A1A06;
  --hero:linear-gradient(180deg,#3A2410 0%,#6E4A1E 55%,#F7EAD0 100%);
  --nav:80px;
  --r:18px;
  color-scheme: light;
}
:root[data-theme="escuro"]{
  --bg:#140D07; --bg2:#1D1309; --card:#22170C; --card2:#2A1C0E;
  --tx:#F3E6CC; --tx2:#CDB892; --tx3:#9C8665;
  --ouro:#D9B25E; --ouro2:#E8C77C; --ouro3:#3A2A12; --ouroTx:#F0D594;
  --borda:#3E2C16; --sombra:0 2px 12px rgba(0,0,0,.35);
  --btn-grad:linear-gradient(180deg,#E3BC67 0%,#C79A3E 100%);
  --hero:linear-gradient(180deg,#0B0704 0%,#3A2410 60%,#22170C 100%);
  color-scheme: dark;
}
:root[data-letra="1"]{ --fs:21px }
:root[data-letra="2"]{ --fs:24px }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--ouroTx)}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.15;margin:0}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda);display:flex;align-items:center;justify-content:center;padding:10px 96px;min-height:58px}
.topo .marca{text-align:center;cursor:pointer}
.topo .marca b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.15rem;letter-spacing:.02em}
.topo .marca small{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.topo .tema{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:1px solid var(--borda);background:var(--card);border-radius:99px;padding:6px 12px;font-size:.72rem;font-weight:700;min-height:40px;cursor:pointer}
.aviso-faixa{display:block;width:100%;max-width:560px;margin:0 auto;background:var(--ouro3);color:var(--ouroTx);text-align:center;font-size:.78rem;padding:10px 12px;border:0;cursor:pointer}

/* ---------- layout ---------- */
main{max-width:560px;margin:0 auto;padding:16px 16px calc(var(--nav) + 40px)}
.tela{animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.voltar{background:none;border:0;color:var(--tx2);font-weight:700;padding:8px 0;min-height:48px;cursor:pointer;font-size:.9rem}
.t1{font-size:2rem;text-align:center;margin:6px 0 2px}
.sub{text-align:center;color:var(--tx2);font-size:.86rem;margin:0 0 18px}
.rotulo{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ouroTx);margin:22px 0 10px}
.centro{text-align:center}
.muted{color:var(--tx2)}
.peq{font-size:.82rem}
.espaco{height:14px}
p{margin:0 0 .9em}

/* ---------- cartões ---------- */
.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--r);padding:18px;box-shadow:var(--sombra);margin-bottom:12px}
.card.ouro{background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);border-color:var(--ouro2)}
.card h3{font-size:1.35rem;margin-bottom:6px}
.bloco{margin-bottom:18px}
.bloco .ic{font-size:1.2rem;margin-right:6px}
.bloco .lab{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ouroTx);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.citacao{font-family:"Cormorant Garamond",serif;font-size:1.3rem;line-height:1.35;font-style:italic}
.oracao-txt{font-size:1.02rem;line-height:1.7;white-space:pre-line}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:58px;border:0;border-radius:16px;background:var(--btn-grad);color:var(--btn-tx);font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 3px 0 #8A6420, 0 6px 16px rgba(150,105,30,.25);text-decoration:none;padding:12px 18px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8A6420}
.btn.sec{background:var(--card);color:var(--tx);border:1.5px solid var(--borda);box-shadow:none}
.btn.leve{background:var(--ouro3);color:var(--ouroTx);box-shadow:none}
.btn.peq{min-height:48px;font-size:.88rem;width:auto;padding:8px 16px}
.btns{display:grid;gap:10px;margin-top:14px}
.btns.dois{grid-template-columns:1fr 1fr}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--ouro3);color:var(--ouroTx);border-radius:99px;padding:6px 14px;font-size:.76rem;font-weight:700;border:0;min-height:36px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ouvir{display:flex;align-items:center;gap:12px;width:100%;background:var(--card2);border:1.5px dashed var(--ouro2);border-radius:16px;padding:12px 14px;cursor:pointer;min-height:58px;text-align:left;margin-bottom:16px}
.ouvir .bola{width:42px;height:42px;border-radius:50%;background:var(--btn-grad);display:grid;place-items:center;font-size:1.1rem;flex:none}
.ouvir b{display:block;font-size:.95rem}
.ouvir small{color:var(--tx2);font-size:.74rem}

/* ---------- listas ---------- */
.lista{display:grid;gap:10px}
.item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:14px 16px;min-height:66px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--sombra)}
.item .emo{font-size:1.5rem;width:40px;text-align:center;flex:none}
.item .num{width:34px;height:34px;border-radius:50%;background:var(--ouro3);color:var(--ouroTx);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.item .txt{flex:1;min-width:0}
.item .txt b{display:block;font-size:1rem;line-height:1.3}
.item .txt small{display:block;color:var(--tx2);font-size:.78rem;line-height:1.35;margin-top:2px}
.item .seta{color:var(--tx3);font-size:1.3rem}
.item.feito{opacity:.62}
.item.feito .txt b{text-decoration:line-through}
.item.ativo{border-color:var(--ouro);background:var(--card2)}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quad{background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--sombra)}
.quad .emo{font-size:1.6rem}
.quad b{font-size:.82rem;line-height:1.2}

/* ---------- hoje ---------- */
.saud{text-align:center;margin:6px 0 2px;font-family:"Cormorant Garamond",serif;font-size:1.55rem}
.diaN{text-align:center;color:var(--tx2);font-size:.82rem;margin-bottom:14px}
.bencao{text-align:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.12rem;color:var(--tx2);margin:0 8px 16px}
.hero{border-radius:22px;overflow:hidden;border:1px solid var(--ouro2);background:var(--card);box-shadow:0 8px 28px rgba(110,74,30,.18);margin-bottom:18px}
.hero .img{height:190px;background:var(--hero);position:relative;display:grid;place-items:center}
.hero .img.foto{background-size:cover;background-position:center center}
.hero .img.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,var(--card) 100%)}
.hero .corpo{padding:4px 18px 18px;text-align:center;position:relative}
.hero .eyebrow{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);font-weight:800}
.hero .grande{font-family:"Nunito Sans",sans-serif;font-weight:900;font-size:2.4rem;letter-spacing:.03em;margin:4px 0 0;line-height:1}
.hero .peq2{color:var(--tx2);font-size:.9rem;margin:4px 0 10px}
.barra{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--btn-grad);border-radius:99px;transition:width .5s}
.passos-topo{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 8px}
.passos-topo .rotulo{margin:0}

/* ---------- jornada / mapa ---------- */
.fases{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.fase-n{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:10px 6px;text-align:center}
.fase-n b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.8rem;line-height:1}
.fase-n small{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.dias{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dia-q{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:10px 4px;text-align:center;cursor:pointer;min-height:70px}
.dia-q small{display:block;font-size:.62rem;color:var(--tx3);font-weight:800}
.dia-q b{display:block;font-size:.72rem;letter-spacing:.04em}
.dia-q.ok{background:var(--ouro3);border-color:var(--ouro2)}
.dia-q.hoje{border:2px solid var(--ouro)}
.dia-q.trava{opacity:.45}

/* ---------- altar ---------- */
.velas{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.vela{text-align:center;padding:8px 0;border-radius:14px;background:var(--card);border:1px solid var(--borda)}
.vela .ch{font-size:1.7rem;filter:grayscale(1);opacity:.35;display:block}
.vela.acesa .ch{filter:none;opacity:1;animation:chama 2.2s ease-in-out infinite}
.vela b{display:block;font-size:.9rem}.vela small{font-size:.6rem;color:var(--tx3)}
@keyframes chama{0%,100%{transform:scale(1)}50%{transform:scale(1.07) rotate(-2deg)}}

/* ---------- terço ---------- */
.contas{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:14px 0}
.conta{width:22px;height:22px;border-radius:50%;background:var(--bg2);border:2px solid var(--borda)}
.conta.g{width:30px;height:30px}
.conta.ok{background:var(--ouro2);border-color:var(--ouro)}
.conta.at{background:var(--ouro);border-color:var(--ouroTx);transform:scale(1.15)}
.reza-box{min-height:220px}

/* ---------- formulários ---------- */
.campo{width:100%;min-height:58px;border:1.5px solid var(--borda);border-radius:14px;background:var(--card);padding:14px 16px;font-size:1rem;margin-bottom:10px}
textarea.campo{min-height:120px;resize:vertical}
.campo:focus{outline:3px solid var(--ouro3);border-color:var(--ouro)}
.busca{position:sticky;top:64px;z-index:5}

/* ---------- nav ---------- */
nav.baixo{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--borda);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
nav.baixo .in{display:grid;grid-template-columns:repeat(7,1fr);width:100%;max-width:640px}
nav.baixo button{background:none;border:0;min-height:var(--nav);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.6rem;font-weight:700;color:var(--tx2);cursor:pointer;padding:6px 0}
nav.baixo button span{font-size:1.3rem;line-height:1}
nav.baixo button.on{color:var(--ouroTx)}
nav.baixo button.on span{transform:scale(1.12)}

/* ---------- player ---------- */
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + 10px + env(safe-area-inset-bottom));z-index:31;width:min(528px,calc(100% - 24px));background:#2A1A0B;color:#F3E3BC;border-radius:16px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.player .t{flex:1;font-size:.84rem;line-height:1.25}
.player small{display:block;opacity:.7;font-size:.7rem}
.player button{background:#C9A24A;color:#2A1A06;border:0;border-radius:12px;min-height:46px;padding:0 14px;font-weight:800;cursor:pointer}

/* ---------- tour ---------- */
.tour{min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px}
.pontos{display:flex;gap:6px;margin-bottom:26px}
.pontos i{width:7px;height:7px;border-radius:99px;background:var(--borda)}
.pontos i.on{width:22px;background:var(--ouro)}
.tour .emo{font-size:3.2rem;margin-bottom:10px}
.tour h2{font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:1.45rem;margin-bottom:12px}
.tour p{color:var(--tx2);max-width:380px}
.tour .rodape{margin-top:auto;width:100%;padding-top:30px}
.pular{position:absolute;right:16px;top:74px;background:var(--card);border:1px solid var(--borda);border-radius:99px;padding:6px 12px;font-size:.74rem;min-height:38px;cursor:pointer}

/* ---------- modal / toast ---------- */
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);background:#2A1A0B;color:#F3E3BC;padding:12px 18px;border-radius:14px;z-index:60;font-weight:700;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:entra .25s}
.fundo{position:fixed;inset:0;background:rgba(20,12,4,.55);z-index:50;display:grid;place-items:end center;padding:16px}
.modal{background:var(--card);border-radius:22px;padding:22px;width:min(520px,100%);max-height:86vh;overflow:auto;animation:entra .25s}

/* ---------- mural ---------- */
.pedido{background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:14px;margin-bottom:10px}
.pedido .cab{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pedido .av{width:40px;height:40px;border-radius:50%;background:var(--ouro3);display:grid;place-items:center;overflow:hidden;flex:none}
.pedido .av img{width:100%;height:100%;object-fit:cover}
.pedido .rez{margin-top:8px}

/* ---------- certificado ---------- */
canvas.cert{width:100%;height:auto;border-radius:14px;box-shadow:var(--sombra);display:block}

.trava-tela{text-align:center;padding:30px 10px}
.trava-tela .emo{font-size:3rem}
.selo{display:inline-block;background:var(--verde);color:#fff;border-radius:99px;padding:3px 10px;font-size:.66rem;font-weight:800;letter-spacing:.08em}
.oferta{border:1.5px solid var(--ouro2)}
.oferta .preco{font-weight:900;color:var(--ouroTx)}
hr{border:0;border-top:1px solid var(--borda);margin:20px 0}
.faq b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ouroTx);margin-bottom:4px}
.verso{border-left:3px solid var(--ouro2);padding:2px 0 2px 12px;margin:12px 0}
.verso .v{font-size:.66rem;font-weight:800;color:var(--ouroTx);letter-spacing:.1em}
.verso .tx{font-family:"Cormorant Garamond",serif;font-size:1.18rem;font-style:italic;line-height:1.35;margin:2px 0 6px}
.letra{display:flex;gap:6px;justify-content:flex-end;margin-bottom:-6px}
.letra button{min-width:44px;min-height:40px;border-radius:10px;border:1px solid var(--borda);background:var(--card);font-weight:800;cursor:pointer}
.letra button.on{background:var(--ouro3);border-color:var(--ouro2)}
@media (max-width:380px){ .hero .grande{font-size:2rem} nav.baixo button{font-size:.55rem} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }