/* Novena das 9 Palavras — estilos
   Tamanhos herdados do app da Vó Keiko (validados no celular do público 55+):
   corpo 19px, botão min-height 60px, nav 64px, alvo de toque nunca abaixo de 52px.
   Paleta: a mesma do checkout e do banner (#0C0704 / #C9A24A). */

:root{--menu:92px; --sup12:#1D1208; --t13:#F0DCAE; --sup1:#2A1A0B; --sup2:#1A1006; --borda1:#4A3418; --t9:#A89170; --borda2:#3A2814; --t7:#E0C583; --borda3:#241809; --sup2c:#1B1108; --t1:#EDDFC2; --verde3:#23330F; --verde1b:#16200A; --sup15:#33230F; --sup14:#22160A; --tinta:#1A1004; --sup13b:#1E1408; --t8:#A8946F; --t10:#6B5D46; --no1b:#2B1410; --no1a:#1A0D08; --no2b:#2B2410; --no2a:#1A1608; --no3b:#2B1018; --no3a:#1A080D; --no4b:#101F2B; --no4a:#08131A; --no5b:#1B2B10; --no5a:#0F1A08; --no6b:#2B1F10; --no6a:#1A1308; --no7b:#101B2B; --no7a:#08111A; --no8b:#1A102B; --no8a:#0F081A; --no9a:#1A1508; --fundo2:#0F0904; --sup3c:#160D05; --verde2:#1A2410; --verde1:#141A0B; --sup14b:#211607; --sup2d:#241505; --sup4:#241708; --sup8:#2F1E0B; --sup5:#1C1108; --sup3:#150D06; --t4:#CDBB99; --sup3b:#150D05; --t2:#F2E6C9; --sup1b:#2A1A08; --borda4:#5A421C; --sup6b:#2E1D08; --fundo3:#120B05; --sup2b:#1F1409; --sup10:#231607; --sup11:#180E05; --borda5:#402C13; --sup8b:#2A1D06; --t3b:#3A3120; --t6:#E6D6B4; --fundo2b:#0F0903; --sup13:#1E1308; --verde4:#1E3A22; --verm1:#3A1E1E; --sup9:#3A2610; --t12:#8A7A5E; --sup6:#2E1C09; --sup7:#1C1106;
  --bg:#0C0704; --bg2:#140C05; --card:#170E06; --linha:#2E2013;
  --ouro:#C9A24A; --ouro-cl:#F0CD7A; --ouro-esc:#8A6B24;
  --texto:#E6DBC6; --texto2:#C9B48E; --branco:#F6E4B6;
  --fs:1;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:calc(20.5px * var(--fs));line-height:1.6;color:var(--texto);
  -webkit-font-smoothing:antialiased;padding-bottom:calc(var(--menu) + 30px)}
.serif,h1,h2,.tt{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;line-height:1.16}
.wrap{max-width:560px;margin:0 auto}

/* cabeçalho */
.top{background:linear-gradient(180deg,var(--sup12),var(--bg2));padding:12px 16px;text-align:center;
  border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20}
.top .t{font-family:'Cormorant Garamond',Georgia,serif;color:var(--t13);font-size:.85em;font-weight:600;line-height:1.15}
.top .s{color:var(--texto2);font-size:.52em;letter-spacing:1.6px;text-transform:uppercase;margin-top:3px}

main{padding:16px 15px 0}

/* voltar */
.voltar{display:inline-flex;align-items:center;gap:7px;min-height:52px;padding:10px 18px;margin-bottom:12px;
  background:var(--card);border:1px solid var(--linha);border-radius:11px;color:var(--ouro-cl);
  font-size:.82em;font-weight:700;text-decoration:none}
.voltar:active{transform:scale(.97)}

/* hero do dia */
.fase{color:var(--ouro);font-size:.55em;letter-spacing:2.2px;font-weight:800;text-transform:uppercase;text-align:center;margin-bottom:9px}
.hero{background:linear-gradient(165deg,var(--sup1),var(--sup2));border:1px solid var(--borda1);border-radius:17px;
  padding:20px 16px;text-align:center}
.hero .dia{color:var(--t9);font-size:.68em;font-weight:700}
.hero .tt{color:var(--branco);font-size:1.65em;font-weight:600;line-height:1.13;margin:8px 0 10px}
.hero .pal{color:var(--branco);font-weight:700;line-height:1.02;margin:6px 0 2px;letter-spacing:1px;
  /* encolhe sozinha: DESATAI cabe, mas SUSTENTAI com letra aumentada estourava a borda */
  font-size:clamp(1.5rem,10.5vw,2.5em);word-break:normal;overflow-wrap:break-word;hyphens:none;
  max-width:100%;padding:0 4px;box-sizing:border-box}
.hero .sub{color:var(--t9);font-size:.76em;margin-bottom:14px}
.dur{display:inline-block;background:var(--borda2);color:var(--t7);font-size:.6em;font-weight:700;
  padding:6px 13px;border-radius:20px;margin-bottom:15px}

/* botões */
.btg{display:block;width:100%;border:none;background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004;
  font-family:inherit;font-size:.92em;font-weight:800;padding:19px;border-radius:12px;text-align:center;
  text-decoration:none;box-shadow:0 5px 0 #7D5C1C;min-height:60px;cursor:pointer}
.btg:active{transform:translateY(3px);box-shadow:0 2px 0 #7D5C1C}
.btg.ghost{background:transparent;border:1px solid var(--linha);color:var(--texto2);box-shadow:none;font-weight:700}
.btg.ghost:active{transform:scale(.98)}

/* progresso */
.prog{margin-top:18px}
.prog .lb{display:flex;justify-content:space-between;color:var(--texto2);font-size:.64em;margin-bottom:8px}
.prog .lb b{color:#E2CF9F}
.dots{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.dot{aspect-ratio:1;border-radius:50%;background:var(--borda3)}
.dot.f{background:var(--ouro)}
.dot.h{background:var(--branco);box-shadow:0 0 0 2px #6B4D1E}

/* caixas */
.box{margin-top:15px;background:var(--card);border:1px solid var(--linha);border-radius:13px;padding:15px 14px}
.box .h{color:var(--ouro);font-size:.55px;font-size:.55em;letter-spacing:1.7px;font-weight:800;text-transform:uppercase;margin-bottom:7px}
.box .p{color:#D3C5AC;font-size:.82em;line-height:1.5}
.box.dash{border-style:dashed;border-color:#5A3F1C;background:var(--bg2)}

/* linhas de atalho */
.linha{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--borda3);
  color:var(--texto);text-decoration:none;min-height:60px}
.linha .ic{width:36px;height:36px;border-radius:50%;background:var(--sup1);display:flex;align-items:center;
  justify-content:center;font-size:.85em;flex:0 0 auto}
.linha .tx{font-size:.84em;font-weight:600;flex:1}
.linha .tx small{display:block;color:var(--texto2);font-size:.80em;font-weight:400;margin-top:1px}
.linha .go{color:var(--ouro);font-size:1em}

/* grade de nós */
.pergunta{color:var(--branco);font-size:1.45em;font-weight:600;text-align:center;line-height:1.2;margin-bottom:5px}
.psub{color:var(--texto2);font-size:.72em;text-align:center;margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nob{background:var(--sup2c);border:1px solid var(--borda1);border-radius:14px;padding:16px 8px;text-align:center;
  min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--t1);font-size:.80em;font-weight:700;text-decoration:none}
.nob:active{transform:scale(.97)}
.nob .e{font-size:1.5em}

/* oração */
.chip{display:inline-block;background:var(--sup1);color:#D0AA5E;font-size:.55em;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;padding:6px 11px;border-radius:20px;margin-bottom:9px}
.ortt{color:var(--branco);font-size:1.32em;font-weight:600;line-height:1.2;margin-bottom:4px}
.info{background:var(--card);border-left:3px solid var(--ouro);border-radius:0 10px 10px 0;padding:12px 13px;margin:12px 0}
.info .h{color:var(--ouro);font-size:.52em;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;margin-bottom:4px}
.info .p{color:#D3C5AC;font-size:.80em;line-height:1.5}
.texto{color:var(--texto);font-size:1.02em;line-height:1.75;font-family:'Cormorant Garamond',Georgia,serif;
  white-space:pre-wrap;margin:16px 0}
.texto b,.texto strong{color:var(--ouro-cl)}
.acoes{display:flex;gap:9px;margin:14px 0}
.acoes button{flex:1;min-height:62px;background:var(--card);border:1px solid var(--linha);border-radius:11px;
  color:var(--ouro-cl);font-family:inherit;font-size:.76em;font-weight:700;cursor:pointer;padding:10px 6px}
.acoes button:active{transform:scale(.97)}

/* sessão guiada */
.passo{color:var(--texto2);font-size:.6em;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;text-align:center;margin-bottom:10px}
.contador{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.contador span{width:16px;height:16px;border-radius:50%;background:var(--borda3)}
.contador span.f{background:var(--ouro)}

/* campo de texto */
textarea{width:100%;min-height:110px;background:var(--bg2);border:1px solid var(--borda2);border-radius:12px;
  padding:13px;color:var(--texto);font-family:inherit;font-size:.8em;line-height:1.55;resize:vertical}
textarea:focus{outline:none;border-color:var(--ouro)}

/* loja */
.lib{background:linear-gradient(160deg,var(--verde3),var(--verde1b));border:1px solid #4D6B22;border-radius:15px;
  padding:14px;display:flex;gap:12px;align-items:center;margin-bottom:15px}
.lib .th{width:56px;height:56px;border-radius:11px;background:#2C4012;display:flex;align-items:center;
  justify-content:center;font-size:1.2em;flex:0 0 auto}
.lib .bd{color:#A8D16A;font-size:.5em;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.lib .tt2{color:#E7F0D6;font-size:.76em;font-weight:700;line-height:1.2;margin-top:2px}
.lib .ss{color:#94A97A;font-size:.6em;margin-top:2px}
.stt{color:var(--ouro);font-size:.55em;letter-spacing:1.8px;font-weight:800;text-transform:uppercase;margin:4px 0 10px}
.item{background:var(--card);border:1px solid var(--sup15);border-radius:14px;padding:12px;display:flex;gap:11px;
  align-items:center;margin-bottom:9px}
.item .th{width:54px;height:54px;border-radius:10px;background:linear-gradient(160deg,var(--borda2),var(--sup14));
  display:flex;align-items:center;justify-content:center;font-size:1.1em;flex:0 0 auto}
.item .tx{flex:1}
.item .tt3{color:#DDCDAE;font-size:.72em;font-weight:700;line-height:1.2}
.item .ss{color:#877656;font-size:.6em;margin-top:2px;line-height:1.3}
.item .bt{background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta);font-size:.62em;font-weight:800;
  padding:11px 14px;border-radius:9px;flex:0 0 auto;text-decoration:none;min-height:44px;display:flex;align-items:center}

/* mapa de fases */
.fbox{margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--sup13b)}
.fbox .fh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fbox .fn{color:var(--ouro-cl);font-size:.68em;font-weight:800;letter-spacing:.4px}
.fbox .fn.off{color:var(--texto2)}
.fbox .fd{color:#7D6E55;font-size:.6em}
.fbox .fl{color:var(--texto2);font-size:.68em;line-height:1.45;margin-top:6px}
.bar{height:8px;border-radius:5px;background:var(--borda3);overflow:hidden;margin:7px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#A87F2A,#E6C273)}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;border-top:1px solid var(--linha);
  background:var(--bg2);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;text-align:center;padding:9px 1px 11px;color:var(--t8);font-size:.56em;font-weight:600;
  text-decoration:none;min-height:64px}
.nav a .i{display:block;font-size:1.7em;margin-bottom:2px}
.nav a.on{color:var(--ouro-cl)}

/* diversos */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--sup1);color:var(--branco);
  border:1px solid var(--borda1);padding:13px 18px;border-radius:11px;font-size:.72em;z-index:60;max-width:88%;text-align:center}
.loading{text-align:center;color:var(--texto2);padding:60px 20px;font-size:.8em}
.vazio{text-align:center;color:var(--texto2);padding:34px 16px;font-size:.75em;line-height:1.6}
.fim{text-align:center;padding:22px 0 6px}
.fim .ck{width:70px;height:70px;border-radius:50%;background:linear-gradient(160deg,#D8AC52,#A87F2A);
  color:var(--tinta);font-size:1.6em;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.fim .t1{color:var(--branco);font-size:1.6em;font-weight:600;line-height:1.15;font-family:'Cormorant Garamond',Georgia,serif}
.fim .t2{color:var(--texto2);font-size:.74em;margin-top:8px;line-height:1.45}
.sep{height:1px;background:var(--linha);margin:20px 0}
.rodape{text-align:center;color:var(--t10);font-size:.6em;padding:24px 16px 10px;line-height:1.6}

@media (max-width:360px){ body{font-size:calc(17.5px * var(--fs))} }
@media print{ .nav,.top,.acoes,.btg,.voltar{display:none!important} body{background:#fff;color:#000} .texto{color:#000} }

/* ---------- boas-vindas (tour) ---------- */
.tour{padding:8px 0 30px;text-align:center}
.tour-img{height:230px;border-radius:18px;background-size:cover;background-position:center;
  border:1px solid #4A3418;margin-bottom:20px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.tour-t{font-family:'Cormorant Garamond',Georgia,serif;color:var(--branco);font-size:2em;font-weight:600;line-height:1.12;margin-bottom:12px}
.tour-p{color:var(--texto);font-size:.88em;line-height:1.65;margin-bottom:20px}
.tour-p b{color:var(--ouro-cl)}
.tour-l{text-align:left;margin-bottom:20px}
.tour-l .tl{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--sup13b);
  color:var(--texto);font-size:.80em;line-height:1.5}
.tour-l .tl span{font-size:1.45em;flex:0 0 auto;width:32px;text-align:center}
.tour-l .tl b{color:var(--ouro-cl)}
.tour-d{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
.tour-d i{width:9px;height:9px;border-radius:50%;background:var(--borda2);display:block}
.tour-d i.on{background:var(--ouro);width:26px;border-radius:5px}

/* ---------- hero com foto ---------- */
.hero.comfoto{position:relative;overflow:hidden;border-color:#6B4D1E}
.hero.comfoto::before{content:"";position:absolute;inset:0;background:url('img/hero.jpg') center/cover;
  opacity:.30;filter:saturate(1.1)}
.hero.comfoto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,7,4,.45) 0%,rgba(12,7,4,.82) 62%,rgba(12,7,4,.95) 100%)}
.hero.comfoto > *{position:relative;z-index:2}

/* ---------- trilha de passos (substitui "passo X de Y") ---------- */
.trilha{display:flex;gap:5px;margin:0 0 16px}
.trilha i{flex:1;height:5px;border-radius:3px;background:var(--borda3);display:block}
.trilha i.ok{background:var(--ouro-esc)}
.trilha i.ag{background:var(--ouro-cl)}
.passo{color:var(--ouro-cl);font-size:.62em;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  text-align:center;margin-bottom:9px}

/* ---------- capa nas coleções e nos nós ---------- */
.linha .ic.foto{background-size:cover;background-position:center;border:1px solid var(--borda1)}
.nob{position:relative;overflow:hidden}
.nob.c1{background:linear-gradient(160deg,var(--no1b),var(--no1a))}
.nob.c2{background:linear-gradient(160deg,var(--no2b),var(--no2a))}
.nob.c3{background:linear-gradient(160deg,var(--no3b),var(--no3a))}
.nob.c4{background:linear-gradient(160deg,var(--no4b),var(--no4a))}
.nob.c5{background:linear-gradient(160deg,var(--no5b),var(--no5a))}
.nob.c6{background:linear-gradient(160deg,var(--no6b),var(--no6a))}
.nob.c7{background:linear-gradient(160deg,var(--no7b),var(--no7a))}
.nob.c8{background:linear-gradient(160deg,var(--no8b),var(--no8a))}
.nob.c9{background:linear-gradient(160deg,var(--no2b),var(--no9a))}

/* amostra de letra no tour */
.amostra{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:20px 16px;
  font-family:'Cormorant Garamond',Georgia,serif;color:var(--texto);font-size:1.05em;line-height:1.7;
  text-align:center;margin-bottom:14px}

/* ---------- certificado ---------- */
.certbox{margin:8px 0 16px;border:1px solid var(--borda1);border-radius:15px;overflow:hidden;background:var(--fundo2);min-height:200px}
.certbox canvas{width:100%;display:block}

/* ---------- loja com bullets ---------- */
.item2{background:var(--card);border:1px solid var(--sup15);border-radius:15px;padding:14px;margin-bottom:12px}
.item2 .ih{display:flex;gap:12px;align-items:center}
.item2 .th{width:54px;height:54px;border-radius:11px;background:linear-gradient(160deg,var(--borda2),var(--sup14));
  display:flex;align-items:center;justify-content:center;font-size:1.15em;flex:0 0 auto}
.item2 .tt3{color:var(--t1);font-size:.82em;font-weight:700;line-height:1.2}
.item2 .ss{color:#95815F;font-size:.66em;margin-top:2px}
.bul{list-style:none;margin:12px 0 13px;padding:0}
.bul li{color:#D3C5AC;font-size:.72em;line-height:1.5;padding:5px 0 5px 22px;position:relative}
.bul li::before{content:"✦";position:absolute;left:2px;top:5px;color:var(--ouro);font-size:.85em}
.bt2{display:block;text-align:center;background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004;
  font-size:.76em;font-weight:800;padding:14px;border-radius:11px;text-decoration:none;min-height:54px;
  box-shadow:0 4px 0 #7D5C1C}
.bt2.off{background:#2A1A0B;color:#8F7D60;box-shadow:none;border:1px solid #3A2814}


/* ---------- Maria: botão flutuante e painel ---------- */
.chatbtn{position:fixed;right:14px;bottom:88px;z-index:40;display:flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta);border:none;border-radius:30px;
  padding:13px 18px 13px 14px;font-family:inherit;font-size:.72em;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 3px rgba(201,162,74,.18);min-height:56px}
.chatbtn:active{transform:scale(.96)}
.chatbtn .cb-i{width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--ouro-cl);
  display:flex;align-items:center;justify-content:center;font-size:.9em}

.chat{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg2);
  border-top:1px solid var(--borda1);border-radius:20px 20px 0 0;display:flex;flex-direction:column;
  max-height:82vh;box-shadow:0 -12px 40px rgba(0,0,0,.7)}
.ch-top{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;
  border-bottom:1px solid var(--linha)}
.ch-top b{color:var(--ouro-cl);font-size:.85em;display:block}
.ch-top small{color:var(--texto2);font-size:.6em;display:block;margin-top:2px}
.ch-x{background:var(--sup1);border:1px solid var(--linha);color:var(--texto2);width:44px;height:44px;
  border-radius:50%;font-size:.85em;cursor:pointer}
.ch-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;min-height:180px}
.bl{max-width:88%;padding:13px 15px;border-radius:16px;font-size:.78em;line-height:1.55;white-space:normal}
.bl.m{background:var(--card);border:1px solid var(--linha);color:var(--texto);align-self:flex-start;border-bottom-left-radius:5px}
.bl.m b{color:var(--ouro-cl)}
.bl.u{background:linear-gradient(180deg,var(--borda2),var(--sup1));border:1px solid var(--borda1);color:var(--t1);
  align-self:flex-end;border-bottom-right-radius:5px}
.bl.acao2{background:none;border:none;padding:0;max-width:100%;align-self:stretch}
.ch-chips{display:flex;gap:8px;overflow-x:auto;padding:0 14px 12px;scrollbar-width:none}
.ch-chips::-webkit-scrollbar{display:none}
.ch-chips button{flex:0 0 auto;background:var(--card);border:1px solid var(--borda2);color:var(--ouro-cl);
  border-radius:20px;padding:11px 15px;font-family:inherit;font-size:.66em;font-weight:600;cursor:pointer;min-height:46px}
.ch-in{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--linha);
  padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.ch-in input{flex:1;background:var(--bg2);border:1px solid var(--borda2);border-radius:12px;padding:14px;
  color:var(--texto);font-family:inherit;font-size:.78em;min-height:54px}
.ch-in input:focus{outline:none;border-color:var(--ouro)}
.ch-in button{background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta);border:none;border-radius:12px;
  padding:0 20px;font-family:inherit;font-size:.74em;font-weight:800;cursor:pointer;min-height:54px}

/* CORREÇÃO: o atributo hidden precisa vencer o display:flex das classes.
   Sem isto, o painel do chat continua na tela depois de fechado e cobre o botão. */
[hidden]{display:none!important}


/* ---------- página do bônus ---------- */
a.item2{display:block;text-decoration:none;color:inherit}
a.item2 .go{color:var(--ouro);font-size:1.1em;margin-left:auto}
.item2 .ih{align-items:center}
.bcapa{height:150px;border-radius:16px;border:1px solid var(--borda1);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--sup1),var(--sup3c));position:relative;overflow:hidden}
.bcapa::before{content:"";position:absolute;inset:0;background:url('img/hero.jpg') center/cover;opacity:.22}
.bcapa .be{font-size:3.4em;position:relative;z-index:2;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.bul.big li{font-size:.82em;padding:8px 0 8px 24px}
.preco{text-align:center;color:var(--ouro-cl);font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2em;font-weight:700;margin:18px 0 12px}




/* ---------- ACOLHIDA (primeira abertura) ----------
   A imagem não tem borda nem canto: ela nasce do topo e morre no fundo,
   como um afresco. O véu é um degradê em três paradas, e não em duas,
   porque com duas o rosto dela some antes da hora. */
.tour.capa{padding:0 0 34px;text-align:center}
.tour-img.cheia{height:52vh;min-height:330px;max-height:460px;margin:-16px -15px 0;border:none;border-radius:0;
  background-size:cover;background-position:center 22%;position:relative;box-shadow:none}
.tour-img.cheia .veu{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(12,7,4,.30) 0%,
    rgba(12,7,4,.10) 34%,
    rgba(12,7,4,.72) 78%,
    rgba(12,7,4,1) 100%)}
.tour.capa .kicker{margin-top:-34px;position:relative;z-index:2;
  font-family:'Inter',sans-serif;font-size:.55em;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--ouro);font-weight:700}
.tour.capa .tour-t{position:relative;z-index:2;margin-top:8px;font-size:2.35em;letter-spacing:.5px}
.filete{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 18px;width:180px}
.filete i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.75),transparent)}
.filete span{color:var(--ouro);font-size:.7em}
.tour.capa .tour-p{padding:0 6px;color:#C9BCA2;font-size:.82em;line-height:1.68;margin-bottom:24px}

/* campo de nome: sem caixa, só uma linha de ouro por baixo */
.campo-nome{width:100%;background:transparent;border:none;border-bottom:1px solid var(--borda1);border-radius:0;
  padding:14px 4px;color:var(--branco);font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5em;text-align:center;min-height:60px;margin-bottom:8px;transition:border-color .2s}
.campo-nome:focus{outline:none;border-bottom-color:var(--ouro-cl)}
.campo-nome::placeholder{color:var(--t10);font-style:italic;font-size:.72em}
.tour-nota{color:var(--t10);font-size:.6em;letter-spacing:.3px;margin-bottom:26px}

/* saudação na home */
.saud{color:var(--ouro-cl);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2em;
  text-align:center;margin-bottom:12px;letter-spacing:.3px}


/* ---------- instalar na tela do celular ---------- */
.inst{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:15px 16px;margin-bottom:12px;text-align:left}
.inst.ok{display:flex;align-items:center;gap:12px;border-color:#4D6B22;background:linear-gradient(160deg,var(--verde2),var(--verde1))}
.inst.ok .ib{width:38px;height:38px;border-radius:50%;background:#2C4012;color:#A8D16A;display:flex;
  align-items:center;justify-content:center;font-size:.9em;flex:0 0 auto}
.inst.ok .it{color:#C9D9AE;font-size:.78em;font-weight:600}
.ih2{color:var(--ouro-cl);font-size:.76em;font-weight:800;letter-spacing:.4px;margin-bottom:10px;
  display:flex;align-items:center;gap:8px}
.ih2 .ic2{font-size:1.15em}
.ipassos{margin:0;padding:0;list-style:none;counter-reset:ip}
.ipassos li{counter-increment:ip;position:relative;padding:9px 0 9px 36px;color:var(--texto);
  font-size:.76em;line-height:1.5;border-bottom:1px solid var(--sup14b)}
.ipassos li:last-child{border-bottom:none}
.ipassos li::before{content:counter(ip);position:absolute;left:0;top:8px;width:24px;height:24px;
  border-radius:50%;background:var(--borda2);color:var(--ouro-cl);font-size:.78em;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.ipassos li b{color:var(--ouro-cl)}
/* cartoes de PASSOS de instalar: bloco. Sem isso herdavam display:flex do
   banner .inst (topo da Home) e a coluna dos passos ficava espremida. */
.inst.pasos{display:block;text-align:left}
.inst.pasos .ih2{margin-bottom:8px}
.inst.pasos .art{width:100%;max-width:230px;margin:2px auto 12px}
.inst.pasos .ipassos li{font-size:.8em;padding-left:38px}

.instcard{display:flex;align-items:center;gap:12px;margin-top:16px;padding:15px 14px;text-decoration:none;
  background:linear-gradient(160deg,var(--sup2d),var(--card));border:1px solid var(--borda1);border-radius:14px}
.instcard:active{transform:scale(.985)}
.instcard .icf{width:44px;height:44px;border-radius:11px;background:var(--borda2);display:flex;align-items:center;
  justify-content:center;font-size:1.15em;flex:0 0 auto}
.instcard .itf{flex:1}
.instcard .itf b{display:block;color:var(--t1);font-size:.78em;line-height:1.25}
.instcard .itf small{display:block;color:#95815F;font-size:.66em;margin-top:3px;line-height:1.4}


/* desenho dos passos de instalação */
svg.art{display:block;width:100%;max-width:280px;height:auto;margin:4px auto 14px;
  border-radius:10px;background:var(--fundo2);border:1px solid var(--sup1)}

/* ---------- a oração com tratamento de página impressa ---------- */
.oracao-bloco{margin:22px 0 4px}
.oracao-bloco .filete{width:150px;margin:0 auto}
.oracao-bloco .texto{text-align:center;font-size:1.14em;line-height:1.95;letter-spacing:.2px;
  color:#E8DCC4;margin:20px auto;max-width:24em}
.oracao-bloco .amem{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--ouro-cl);font-size:1.34em;letter-spacing:2.5px;margin:2px 0 20px}



/* ---------- o Ouvir, agora acima da oracao ---------- */
.ouvir-top{display:flex;align-items:center;gap:13px;width:100%;margin:16px 0 6px;padding:15px 16px;
  background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda1);border-radius:14px;
  font-family:inherit;text-align:left;cursor:pointer;min-height:66px}
.ouvir-top:active{transform:scale(.985)}
.ouvir-top .oi{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#D8AC52,#BD8F34);
  color:var(--tinta);display:flex;align-items:center;justify-content:center;font-size:1.05em;flex:0 0 auto}
.ouvir-top .ot{color:var(--ouro-cl);font-size:.8em;font-weight:700;line-height:1.2}
.ouvir-top .ot small{display:block;color:var(--texto2);font-size:.82em;font-weight:400;margin-top:3px}

/* ---------- convite a por musica, na abertura do dia ---------- */
.musica-cta{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:14px;
  background:var(--card);border:1px dashed var(--borda1);border-radius:13px;font-family:inherit;text-align:left;cursor:pointer}
.musica-cta span{font-size:1.4em;flex:0 0 auto}
.musica-cta b{color:#DDCDAE;font-size:.76em;font-weight:700;line-height:1.25}
.musica-cta small{display:block;color:var(--texto2);font-size:.85em;font-weight:400;margin-top:3px}

/* ---------- barra do tocador, fixa acima do menu ---------- */
body.com-musica{padding-bottom:calc(var(--menu) + 122px)}
body.com-musica .chatbtn{bottom:calc(var(--menu) + 104px)}
.cant.tocando .cant-capa{border-color:var(--ouro-cl);box-shadow:0 0 0 2px rgba(201,162,74,.35)}
.cant.tocando .cant-tx b::after{content:" \00b7 tocando";color:var(--ouro)}


/* ---------- convite do aviso diario ---------- */
.aviso-cta{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 4px;padding:15px 16px 15px 15px;border-radius:14px;
  background:linear-gradient(160deg,var(--sup4),var(--card));border:1px solid var(--borda1)}
.aviso-cta .ai{width:44px;height:44px;border-radius:50%;background:var(--sup8);border:1px solid var(--borda1);
  display:flex;align-items:center;justify-content:center;font-size:1.15em;flex:0 0 auto}
.aviso-cta .at{flex:1;min-width:150px}
.aviso-cta .at b{display:block;color:var(--ouro-cl);font-size:.8em;line-height:1.25}
.aviso-cta .at small{display:block;color:var(--texto2);font-size:.72em;line-height:1.4;margin-top:4px}
.aviso-cta .ab{flex:1 0 100%;margin-top:4px;min-height:56px;border-radius:11px;border:none;
  background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004;font-family:inherit;
  font-size:.82em;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center}
.aviso-cta .ax{position:absolute;top:7px;right:7px;width:34px;height:34px;border-radius:50%;
  background:none;border:none;color:var(--t10);font-size:.75em;cursor:pointer}


/* ---------- a acao do dia, grudada no rodape ---------- */
.acao-fixa{position:sticky;bottom:calc(var(--menu) + 14px);z-index:22;
  margin:18px -15px 0;padding:14px 15px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(12,7,4,0),var(--bg) 22%);}
.acao-fixa .btg{margin:0}
/* o padding de baixo ja e o --menu; nao repetir a faixa aqui */
/* enquanto ela reza, o Conversar sai da frente: a unica acao ali e continuar */
body.rezando .chatbtn{display:none!important}
.chatbtn{bottom:calc(var(--menu) + 18px)}

.pfix-volta{display:block;color:var(--ouro-cl);font-size:.62em;font-weight:700;margin-top:4px;
  text-decoration:underline;text-underline-offset:3px}
.pfix-volta:not([hidden]) ~ .pfix-so{display:none}

/* CONVERSAR DESLIGADO (a pedido do Iago, 02/09).
   O codigo do chat continua inteiro no app.js: so a porta de entrada esta
   fechada. Pra religar, apague as duas linhas abaixo e nada mais. */
.chatbtn{display:none!important}
.chat{display:none!important}


/* ---------- frequencias: cada faixa diz o que faz ---------- */
.gsub{color:var(--texto2);font-size:.62em;margin:-4px 0 12px;letter-spacing:.3px}
.faixa{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;cursor:pointer;
  margin-bottom:13px;padding:15px 15px 15px 14px;border-radius:14px;font-family:inherit;
  background:linear-gradient(160deg,var(--sup5),var(--sup3));border:1px solid var(--borda2)}
.faixa:active{transform:scale(.99)}
.faixa.tocando{border-color:var(--ouro-cl);box-shadow:0 0 0 2px rgba(201,162,74,.28)}
.fx-play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.05em;background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta)}
.fx-tx{flex:1;min-width:0}
.fx-tx b{display:block;color:var(--ouro-cl);font-size:.82em;line-height:1.25}
.fx-s{display:block;color:var(--t4);font-size:.68em;line-height:1.45;margin-top:6px}
.fx-q{display:block;color:var(--texto2);font-size:.66em;line-height:1.45;margin-top:5px}
.fx-q i{color:var(--ouro);font-style:normal;font-weight:700}
.fx-d{display:block;color:#7A6A50;font-size:.6em;margin-top:6px;letter-spacing:.4px;text-transform:uppercase}

/* a barra abre GRANDE no YouTube, porque ali ela precisa acertar o play dele */
body.musica-grande{padding-bottom:calc(var(--menu) + 300px)}

/* ---------- barra do tocador ----------
   Duas linhas: em cima o nome e o PARAR; embaixo o tocador. Assim o botao de
   parar tem largura de verdade e nao disputa espaco com os controles. */
.pfix{position:fixed;left:0;right:0;bottom:var(--menu);z-index:35;
  padding:11px 12px 12px;background:linear-gradient(180deg,var(--sup14),var(--sup3b));
  border-top:2px solid var(--ouro);box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.pfix-topo{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.pfix-tx{flex:1;min-width:0}
.pfix-tx b{display:block;color:var(--t2);font-size:.76em;font-weight:700;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pfix-tx small{display:block;color:var(--ouro);font-size:.6em;margin-top:3px;letter-spacing:1.2px;text-transform:uppercase}
.pfix-volta{display:block;color:var(--ouro-cl);font-size:.64em;font-weight:700;margin-top:4px;
  text-decoration:underline;text-underline-offset:3px}
.pfix-volta:not([hidden]) ~ .pfix-so{display:none}

/* o PARAR: claro sobre escuro, com a palavra do lado do X, e alto o bastante
   pra dedo grosso acertar sem mirar */
.pfix-x{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:56px;
  padding:0 20px 0 16px;border-radius:28px;cursor:pointer;font-family:inherit;
  background:var(--t2);border:2px solid #FFF6E0;color:var(--sup1b);
  font-size:.78em;font-weight:800;letter-spacing:.3px;
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pfix-x:active{transform:scale(.96)}
.px-i{font-size:1.05em;line-height:1}
.px-t{white-space:nowrap}

.pfix-video:empty{display:none}
.pfix-video iframe{width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--borda2);
  border-radius:10px;display:block}
.pfix-audio{width:100%;height:46px;display:block}
body.musica-grande{padding-bottom:calc(var(--menu) + 330px)}


/* ---------- parábolas ---------- */
.linha.destaque{background:linear-gradient(160deg,var(--sup1),var(--sup2));border-color:var(--borda4)}
.parab{display:flex;align-items:center;gap:13px;margin-bottom:12px;padding:11px 12px 11px 11px;
  border-radius:14px;background:linear-gradient(160deg,var(--sup5),var(--sup3));border:1px solid var(--borda2);
  text-decoration:none}
.parab:active{transform:scale(.99)}
.pb-img{flex:0 0 auto;width:66px;height:82px;border-radius:8px;background:var(--borda3) center/cover;
  border:1px solid var(--borda1);filter:sepia(.25) brightness(1.05)}
.pb-tx{flex:1;min-width:0}
.pb-tx b{display:block;color:var(--ouro-cl);font-size:.82em;line-height:1.25}
.pb-tx small{display:block;color:var(--t4);font-size:.68em;font-style:italic;margin-top:4px}
.pb-tx i{display:block;color:var(--texto2);font-size:.62em;font-style:normal;margin-top:5px;letter-spacing:.6px}

/* a prancha: sangra até a borda da tela, como página de livro */
.pb-prancha{margin:14px -18px 0;background:#0F0904;padding:14px 18px;
  border-top:1px solid #2A1C0A;border-bottom:1px solid #2A1C0A}
.pb-prancha img{display:block;width:100%;height:auto;border:1px solid #4A3418;border-radius:3px;
  background:#F4EEDF}
.pb-cab{text-align:center;margin:18px 0 4px}
.pb-n{font-size:.6em;letter-spacing:2.6px;text-transform:uppercase;color:var(--ouro)}
.pb-t{font-family:var(--serif,Georgia,serif);font-size:1.5em;line-height:1.15;color:var(--branco,var(--t2));margin-top:6px}
.pb-leg{font-size:.78em;font-style:italic;color:#C6A860;margin-top:6px}
.pb-ref{text-align:center;font-size:.62em;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--texto2);margin:2px 0 16px}
.pb-p{margin:0 0 14px;line-height:1.62}
.pb-bloco{margin:16px 0;padding:14px 15px;border-radius:13px;border-left:3px solid var(--ouro)}
.pb-bloco.nota{background:var(--card);border-left-color:#8A6524}
.pb-bloco.voce{background:linear-gradient(160deg,var(--sup4),var(--card));border-left-color:var(--ouro-cl)}
.pb-bloco .h{font-size:.6em;letter-spacing:2px;text-transform:uppercase;color:var(--ouro);margin-bottom:7px}
.pb-bloco .p{line-height:1.6}


/* ---------- modo livro: o PDF trazido pra tela, mas refluível ---------- */
.pb-livro{margin:14px -15px 0;padding:0 0 22px}
.pb-livro.papel{background:#FAF5E9;color:#2C2418;padding:0 18px 26px;
  border-top:2px solid #B08A3C;border-bottom:2px solid #B08A3C;
  box-shadow:inset 0 0 60px rgba(150,120,60,.08)}
.pb-livro.papel .pb-prancha{margin:0 -18px 0;background:#F2EBD9;border-color:#DFCFA8;padding:16px 18px}
.pb-livro.papel .pb-prancha img{border:1px solid #C9B586;background:#FFFDF6}
.pb-livro.papel .pb-n{color:#A07A2E}
.pb-livro.papel .pb-t{font-family:'Cinzel',Georgia,serif;color:#1F3159;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:1.28em}
.pb-livro.papel .pb-leg{color:#A07A2E}
.pb-livro.papel .pb-ref{color:#8A7855}
.pb-livro.papel .pb-p{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.16em;
  line-height:1.58;color:#2C2418;text-align:justify;hyphens:auto}
.pb-livro.papel .pb-p i,.pb-livro.papel .pb-p em{color:#6B4E1C}
.pb-livro.papel .pb-p b{color:#1F3159}
.pb-livro.papel .pb-bloco{border-radius:0;padding:13px 15px}
.pb-livro.papel .pb-bloco.nota{background:#F2EAD5;border-left-color:#B08A3C}
.pb-livro.papel .pb-bloco.voce{background:#EEEAF2;border-left-color:#1F3159}
.pb-livro.papel .pb-bloco .h{color:#8A5A1E}
.pb-livro.papel .pb-bloco.voce .h{color:#1F3159}
.pb-livro.papel .pb-bloco .p{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.14em;line-height:1.55;color:#2C2418}

/* a capitular, como no livro impresso */
.pb-livro.papel .pb-p.abre::first-letter{font-family:'Cinzel',Georgia,serif;font-size:2.7em;
  line-height:.86;float:left;margin:6px 8px 0 0;color:#1F3159;font-weight:700}

/* o filete com a cruz, separando o cabecalho do texto */
.pb-livro.papel .pb-ref::after{content:"";display:block;width:54%;height:1px;margin:13px auto 0;
  background:linear-gradient(90deg,transparent,#C9AE72 22%,#C9AE72 78%,transparent)}


/* ---------- oração em modo livro ----------
   Verso centrado, entrelinha larga: e assim que missal imprime oracao.
   Justificar com capitular, como nas parabolas, ficaria errado aqui. */
.pb-livro.papel .oracao-bloco{margin:6px 0 0}
.pb-livro.papel .oracao-bloco .texto{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.3em;line-height:1.85;color:#2C2418;letter-spacing:.1px}
.pb-livro.papel .oracao-bloco .texto b{color:#1F3159}
.pb-livro.papel .oracao-bloco .texto i,
.pb-livro.papel .oracao-bloco .texto em{color:#6B4E1C}
.pb-livro.papel .oracao-bloco .amem{font-family:'Cinzel',Georgia,serif;color:#A07A2E;
  letter-spacing:2px;font-weight:600}
.pb-livro.papel .filete i{background:linear-gradient(90deg,transparent,#C9AE72,transparent)}
.pb-livro.papel .filete span{color:#B08A3C}

/* o "Ouvir" acompanha o papel, senao fica um bloco escuro no meio da pagina */
.pb-livro.papel .ouvir-top,
.papel-fora .ouvir-top{background:linear-gradient(160deg,#F2EAD5,#EDE3CA);border-color:#D8C79E}
.papel-fora .ouvir-top .oi{background:linear-gradient(180deg,#C9AE72,#A88535);color:#2C2418}
.papel-fora .ouvir-top .ot{color:#1F3159}
.papel-fora .ouvir-top .ot small{color:#7A6A4E}


/* ---------- a fita de música dentro da oração ---------- */
.fita{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 2px;padding:12px 14px;
  border-radius:13px;font-family:inherit;text-align:left;cursor:pointer;min-height:58px;
  background:var(--card);border:1px dashed var(--borda1)}
.fita.on{background:linear-gradient(160deg,var(--sup1),var(--sup2));border-style:solid;border-color:var(--ouro)}
.fita:active{transform:scale(.99)}
.fita .fi{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1em;background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta)}
.fita .ft b{display:block;color:var(--ouro-cl);font-size:.76em;line-height:1.25}
.fita .ft small{display:block;color:var(--texto2);font-size:.68em;margin-top:3px}
.papel-fora .fita{background:#F2EAD5;border-color:#C9AE72}
.papel-fora .fita.on{background:#EDE3CA;border-color:#A07A2E}
.papel-fora .fita .ft b{color:#1F3159}
.papel-fora .fita .ft small{color:#7A6A4E}
.papel-fora .fita .fi{background:linear-gradient(180deg,#C9AE72,#A88535);color:#2C2418}


/* ---------- a sequência: vela acesa, não troféu ---------- */
.seq{display:flex;align-items:center;gap:13px;margin:0 0 8px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(160deg,var(--sup4),var(--card));border:1px solid var(--borda1)}
.seq.arisco{border-color:var(--ouro);background:linear-gradient(160deg,var(--sup6b),var(--sup2))}
.seq-n{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#0F0904;border:1px solid #5A421C}
.seq-n b{color:var(--ouro-cl);font-size:1.05em;line-height:1}
.seq-n small{color:var(--texto2);font-size:.5em;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.seq-tx b{display:block;color:var(--ouro-cl);font-size:.78em;line-height:1.25}
.seq-tx small{display:block;color:var(--texto2);font-size:.68em;margin-top:3px;line-height:1.4}
.velas{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;padding:0 2px}
.vela{width:9px;height:14px;border-radius:3px 3px 2px 2px;background:#241809;border:1px solid #3A2814}
.vela.on{background:linear-gradient(180deg,#F0CD7A,#BD8F34);border-color:#8A6524;
  box-shadow:0 0 6px rgba(240,205,122,.45)}

/* ---------- a pergunta do dia ---------- */
.perg{margin:16px 0 4px;padding:15px 14px;border-radius:15px;
  background:linear-gradient(160deg,var(--sup5),var(--sup3));border:1px solid var(--borda2)}
.pq{text-align:center;color:var(--ouro-cl);font-size:.86em;font-weight:700;margin-bottom:13px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pno{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:74px;padding:9px 6px;border-radius:12px;background:var(--borda3);border:1px solid var(--borda1);
  color:#DDCDAE;font-family:inherit;font-size:.68em;font-weight:600;line-height:1.2;
  text-align:center;cursor:pointer}
.pno:active{transform:scale(.97)}
.pno span{font-size:1.5em;line-height:1}
.pno:last-child:nth-child(odd){grid-column:1 / -1}

/* ---------- a tela do dia concluído ---------- */
.feito{text-align:center;padding:26px 0 6px}
.fe-selo{width:78px;height:78px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.9em;color:#1A1004;
  background:linear-gradient(180deg,#F0CD7A,#BD8F34);box-shadow:0 8px 26px rgba(201,162,74,.3)}
.fe-t{font-size:1.34em;color:var(--branco,var(--t2));line-height:1.2}
.fe-s{color:var(--ouro);font-size:.76em;margin-top:7px;letter-spacing:.4px}
.feito .velas{justify-content:center;margin-top:16px}


/* ---------- salmos ---------- */
.pno i{display:block;font-style:normal;font-size:.82em;color:var(--texto2);margin-top:3px;font-weight:400}
a.pno{text-decoration:none}
.sal-t{font-size:1.18em!important;text-transform:none!important;letter-spacing:0!important}
.sal-stt{margin:22px 0 12px;text-align:center}
.pb-livro.papel .sal-stt{color:#A07A2E}

/* o versículo e a explicação, lado a lado na vertical: a citação em itálico
   com filete dourado, a explicação em texto normal. É o par que faz o
   material valer, então precisa ficar claro qual é qual. */
.sv{margin:0 0 16px;padding-left:13px;border-left:2px solid #D8C79E}
.sv-n{font-family:'Cinzel',Georgia,serif;font-size:.62em;letter-spacing:2px;color:#A07A2E;margin-bottom:5px}
.sv-x{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.18em;line-height:1.5;
  font-style:italic;color:#1F3159;margin-bottom:6px}
.sv-e{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.06em;line-height:1.5;color:#4A4032}
.acoes a.btg{display:inline-flex;align-items:center;justify-content:center;width:auto;flex:1}


/* ---------- o dossiê do nó ---------- */
.no-cab{text-align:center;margin:6px 0 4px}
.no-e{font-size:2.6em;line-height:1;margin-bottom:6px}
/* as duas linhas que viraram aba própria saem da tela de Orações */
.linha.xxx-tirar{display:none}


/* ---------- a resposta do dia, já com o conteúdo ---------- */
.perg.respondida{padding:13px 12px 12px}
.pr-cab{display:flex;align-items:center;gap:11px;margin-bottom:11px;padding:0 2px}
.pr-e{font-size:1.7em;line-height:1}
.pr-t{flex:1;min-width:0}
.pr-t b{display:block;color:var(--ouro-cl);font-size:.8em;line-height:1.2}
.pr-t small{display:block;color:var(--texto2);font-size:.66em;margin-top:3px}
.pr-x{flex:0 0 auto;min-height:38px;padding:0 13px;border-radius:19px;background:none;
  border:1px solid var(--borda1);color:var(--texto2);font-family:inherit;font-size:.62em;cursor:pointer}
.pr-item{display:flex;align-items:center;gap:11px;padding:12px 12px 12px 11px;margin-bottom:8px;
  border-radius:12px;background:var(--card);border:1px solid var(--borda2);text-decoration:none}
.pr-item.forte{background:linear-gradient(160deg,var(--sup1),var(--sup2));border-color:var(--borda4)}
.pr-item:active{transform:scale(.99)}
.pi-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--borda3);border:1px solid var(--borda1);color:var(--ouro-cl);font-size:.78em}
.pi-tx{flex:1;min-width:0}
.pi-tx b{display:block;color:var(--t1);font-size:.76em;line-height:1.25}
.pi-tx small{display:block;color:var(--texto2);font-size:.64em;margin-top:3px;line-height:1.35}
.pr-mais{display:block;text-align:center;padding:11px 0 3px;color:var(--ouro);
  font-size:.68em;font-weight:700;text-decoration:none}


/* ---------- continuar de onde parou ---------- */
.retomar{display:flex;align-items:center;gap:11px;margin:14px 0 6px;padding:13px 14px;
  border-radius:14px;text-decoration:none;
  background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda4)}
.retomar:active{transform:scale(.99)}
.rt-tx{flex:1;min-width:0}
.rt-tx b{display:block;color:var(--ouro-cl);font-size:.78em;line-height:1.25}
.rt-tx small{display:block;color:var(--texto2);font-size:.66em;margin-top:3px}
.barra{height:5px;border-radius:3px;background:var(--borda3);overflow:hidden;margin:0 2px 14px}
.barra i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#BD8F34,var(--ouro-cl))}
.linha.lido .tx,.parab.lido .pb-tx b{opacity:.62}
.linha.lido .go{color:var(--ouro)}
.parab.lido{border-color:var(--borda1);opacity:.86}


/* ---------- o tour ---------- */
.tour2{position:relative;min-height:74vh;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:52px 4px 0}
.t2-pular{position:absolute;top:0;right:0;min-height:44px;padding:0 14px;border-radius:22px;
  background:none;border:1px solid var(--borda2);color:var(--texto2);font-family:inherit;
  font-size:.66em;cursor:pointer}
.t2-pontos{display:flex;gap:7px;margin-bottom:26px}
.t2-pontos span{width:7px;height:7px;border-radius:50%;background:var(--borda2)}
.t2-pontos span.on{background:var(--ouro);width:20px;border-radius:4px}
.t2-e{font-size:3.4em;line-height:1;margin-bottom:20px}
.t2-t{font-size:1.4em;color:var(--branco,var(--t2));line-height:1.2;margin-bottom:14px}
.t2-p{color:var(--t4);font-size:.86em;line-height:1.62;max-width:330px}
.t2-p b{color:var(--ouro-cl)}
.t2-b{margin-top:18px;padding:8px 15px;border-radius:20px;background:var(--borda3);
  border:1px solid var(--borda1);color:var(--texto2);font-size:.68em}
.t2-b b{color:var(--ouro-cl)}
.t2-pe{margin-top:auto;width:100%;padding:26px 0 8px;display:flex;flex-direction:column;gap:10px}


/* ---------- o mapa dos 30 dias ---------- */
.mp-topo{display:flex;align-items:center;gap:14px;margin:14px 0 22px;padding:14px;
  border-radius:15px;background:linear-gradient(160deg,var(--sup4),var(--card));border:1px solid var(--borda1)}
.mp-num{flex:0 0 auto;text-align:center;min-width:56px}
.mp-num b{display:block;color:var(--ouro-cl);font-size:1.6em;line-height:1}
.mp-num small{display:block;color:var(--texto2);font-size:.58em;letter-spacing:1px;
  text-transform:uppercase;margin-top:3px}
.mp-bar{flex:1;height:9px;border-radius:5px;background:var(--fundo2);overflow:hidden;border:1px solid var(--borda2)}
.mp-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#BD8F34,#F0CD7A)}

.mp-fase{display:flex;align-items:baseline;gap:9px;margin:20px 2px 9px}
.mp-fase b{color:var(--ouro);font-size:.66em;letter-spacing:2px;text-transform:uppercase}
.mp-fase small{color:var(--texto2);font-size:.6em}



/* ---------- o plano do dia ---------- */
.pl-cab{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.pl-cab b{color:var(--ouro);font-size:.66em;letter-spacing:2px;text-transform:uppercase}
.pl-cab small{color:var(--texto2);font-size:.64em}
.pl{display:flex;flex-direction:column;gap:8px}
.pl-i{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:14px 13px;border-radius:13px;text-decoration:none;font-family:inherit;
  background:var(--card);border:1px solid var(--borda2);min-height:66px}
.pl-i:active{transform:scale(.99)}
.pl-i.pri{background:linear-gradient(160deg,var(--sup1),var(--sup2));border-color:var(--borda4)}
.pl-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.8em;font-weight:700;
  background:var(--borda3);border:1px solid var(--borda1);color:var(--texto2)}
.pl-tx{flex:1;min-width:0}
.pl-tx b{display:block;color:var(--t1);font-size:.86em;line-height:1.2;font-weight:800}
.pl-tx small{display:block;color:var(--texto2);font-size:.66em;margin-top:3px}
.pl-i.ok{opacity:.72}
.pl-i.ok .pl-n{background:linear-gradient(180deg,#D8AC52,#BD8F34);border-color:#8A6524;color:#1A1004}
.pl-i.ok .pl-tx b{text-decoration:line-through;text-decoration-color:var(--t10)}
.pl-fim{margin-top:14px;padding:14px;border-radius:13px;text-align:center;
  background:linear-gradient(160deg,var(--sup4),var(--card));border:1px solid var(--ouro);
  color:var(--ouro-cl);font-size:.76em}
.hero.ok{opacity:.9}

/* botão verde: o mesmo verde do checkout, para a ação que abre a coleção
   inteira. Fica distinto do dourado, que é o botão de rezar. */
.btg.verde{background:linear-gradient(180deg,#3A9668,#2A7350);color:#FFF;
  box-shadow:0 5px 0 #1D5238;border:none;font-weight:800}
.btg.verde:active{transform:translateY(3px);box-shadow:0 2px 0 #1D5238}


/* ---------- vela guardada e marcos ---------- */
.seq-g{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:16px;
  background:var(--fundo2);border:1px solid var(--ouro);font-size:.8em}
.seq-g span{color:var(--ouro-cl);font-size:.8em;font-weight:800}
.vaviso{margin:0 0 10px;padding:12px 14px;border-radius:13px;font-size:.72em;line-height:1.5;
  background:var(--card);border:1px solid var(--borda1);color:var(--t4)}
.vaviso b{color:var(--ouro-cl)}
.vaviso.ganho{background:linear-gradient(160deg,var(--sup1),var(--card));border-color:var(--ouro)}
.prox-marco{text-align:center;color:var(--texto2);font-size:.64em;margin:-6px 0 16px}
.prox-marco b{color:var(--ouro)}
.fe-marco{margin:14px auto 4px;max-width:290px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(160deg,var(--sup6b),var(--sup2));border:1px solid var(--ouro)}
.fe-marco b{display:block;color:var(--ouro-cl);font-size:.92em}
.fe-marco small{display:block;color:var(--t4);font-size:.72em;margin-top:4px}


/* ---------- a jornada: o caminho que serpenteia ---------- */
.jn-fase{display:flex;align-items:center;gap:11px;margin:26px 0 6px;padding:11px 13px;
  border-radius:13px;background:var(--card);border:1px solid var(--borda2)}
.jn-fase.completa{background:linear-gradient(160deg,var(--sup1),var(--sup2));border-color:var(--borda4)}
.jf-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.74em;font-weight:700;background:var(--borda3);
  border:1px solid var(--borda1);color:var(--texto2)}
.jn-fase.completa .jf-n{background:linear-gradient(180deg,#D8AC52,#BD8F34);color:var(--tinta);border-color:#8A6524}
.jf-t{flex:1;min-width:0}
.jf-t b{display:block;color:var(--ouro-cl);font-size:.76em}
.jf-t small{display:block;color:var(--texto2);font-size:.62em;margin-top:3px;line-height:1.35}
.jf-c{flex:0 0 auto;color:var(--texto2);font-size:.66em}

.jornada{position:relative;padding:8px 0 2px}
/* a linha do caminho, atrás dos passos */
.jornada::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-1px);background:repeating-linear-gradient(180deg,var(--borda2) 0 7px,transparent 7px 14px)}
.jn-linha{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:7px 0}
.jn-linha.p0{transform:translateX(-27%)}
.jn-linha.p2{transform:translateX(27%)}
.jn-p{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;background:var(--sup5);border:2px solid var(--borda2);
  box-shadow:0 4px 0 var(--fundo3)}
.jn-p:active{transform:translateY(3px);box-shadow:0 1px 0 var(--fundo3)}
.jp-n{font-size:.88em;font-weight:800;color:var(--t10)}
.jn-p.feito{background:linear-gradient(180deg,var(--sup6b),var(--sup2b));border-color:var(--borda4);box-shadow:0 4px 0 var(--sup3)}
.jn-p.feito .jp-n{color:var(--ouro-cl)}
.jn-p.agora{background:linear-gradient(180deg,#F0CD7A,#BD8F34);border-color:#F6E4B6;
  box-shadow:0 5px 0 #7D5C1C;animation:pulsa-p 2.6s ease-in-out infinite}
.jn-p.agora .jp-n{color:#1A1004;font-size:1.05em}
@keyframes pulsa-p{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.jn-p.agora{animation:none}}
.jn-p.marco{border-style:double;border-width:4px}
.jn-t{font-size:.54em;color:#7A6A50;letter-spacing:.4px;text-align:center;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jn-p.feito ~ .jn-t{color:#A08A62}
.jn-mk{font-size:.56em;color:var(--ouro);margin-top:2px;letter-spacing:.3px}


/* ---------- o convite para a próxima novena ---------- */
.nn{margin:24px 0 0;padding:22px 16px 18px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,var(--sup6b),var(--card));border:1px solid var(--ouro)}
.nn-e{font-size:2.4em;line-height:1;margin-bottom:12px}
.nn-t{font-size:1.3em;color:var(--branco,var(--t2));line-height:1.2;margin-bottom:12px}
.nn-p{color:var(--t4);font-size:.78em;line-height:1.6;margin-bottom:16px}
.nn-p b{color:var(--ouro-cl)}
.nn .campo{margin-bottom:14px}


/* ---------- o terço ---------- */
.tc-cab{text-align:center;margin:8px 0 12px}
.tc-cab b{display:block;color:var(--ouro-cl);font-size:1.05em}
.tc-cab small{display:block;color:var(--texto2);font-size:.66em;margin-top:4px}
.pb-livro.tc{margin-top:0;padding-top:20px}
.tc-dez{text-align:center;font-size:.62em;letter-spacing:2px;text-transform:uppercase;
  color:#A07A2E;margin-bottom:8px}
.contas{display:flex;justify-content:center;gap:9px;margin:18px 0}
.conta{width:13px;height:13px;border-radius:50%;background:#241809;border:1px solid #4A3418}
.conta.feita{background:linear-gradient(180deg,#D8AC52,#BD8F34);border-color:#8A6524}
.conta.agora{background:#F0CD7A;border-color:#F6E4B6;transform:scale(1.35);
  box-shadow:0 0 0 3px rgba(240,205,122,.25)}


/* ---------- a régua de letra, sempre à vista ---------- */
.regua{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:10px 0 2px}
.regua span{color:var(--texto2);font-size:.62em;letter-spacing:1.4px;text-transform:uppercase;margin-right:2px}
.regua button{width:44px;height:44px;border-radius:50%;background:var(--borda3);border:1px solid var(--borda1);
  color:var(--ouro-cl);font-family:inherit;cursor:pointer;line-height:1}
.regua button:first-of-type{font-size:.72em}
.regua button:last-of-type{font-size:1.05em}
.papel-fora .regua button{background:#F2EAD5;border-color:#C9AE72;color:#1F3159}
.papel-fora .regua span{color:#8A7855}

/* ---------- a intenção, enquanto ela reza ---------- */
.intencao{margin:12px 0 0;padding:13px 15px;border-radius:13px;
  background:var(--card);border:1px dashed var(--borda4);color:var(--t1);font-size:.8em;line-height:1.5;
  font-style:italic}
.intencao small{display:block;font-style:normal;color:var(--ouro);font-size:.72em;
  letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px}
.papel-fora .intencao{background:#F2EAD5;border-color:#C9AE72;color:#2C2418}
.papel-fora .intencao small{color:#A07A2E}

/* A régua GRUDA no topo enquanto ela lê. Estava no meio da página, a 1500px
   do topo: "sempre visível" só vale se ela não precisar procurar. */
.regua{position:sticky;top:0;z-index:24;padding:9px 10px 9px 0;margin:0 -15px 2px;
  padding-right:15px;backdrop-filter:blur(6px)}
.regua{background:linear-gradient(180deg,rgba(12,7,4,.96),rgba(12,7,4,.72))}
.papel-fora .regua{background:linear-gradient(180deg,rgba(250,245,233,.97),rgba(250,245,233,.75))}


/* ---------- as próximas festas ---------- */
.festa{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--borda3)}
.fs-d{flex:0 0 auto;width:46px;text-align:center}
.fs-d b{display:block;color:var(--ouro-cl);font-size:1.05em;line-height:1}
.fs-d small{display:block;color:var(--texto2);font-size:.56em;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.fs-t{flex:1;min-width:0}
.fs-t b{display:block;color:var(--t1);font-size:.78em;line-height:1.25}
.fs-t small{display:block;color:var(--texto2);font-size:.64em;margin-top:3px;line-height:1.35}


/* ---------- a vitrine: capa de livro, não linha de lista ---------- */
.vitrine{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
.cap{display:block;text-decoration:none;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--sup5),var(--sup3));border:1px solid var(--borda2)}
.cap:active{transform:scale(.98)}
.cap-img{display:block;width:100%;height:104px;background:#241809 center/cover;
  border-bottom:1px solid #3A2814;filter:sepia(.22) brightness(1.06)}
.cap-tx{display:block;padding:11px 11px 13px}
.cap-tx b{display:block;color:var(--ouro-cl);font-size:.76em;line-height:1.25}
.cap-tx small{display:block;color:var(--texto2);font-size:.63em;margin-top:4px;line-height:1.35}


/* cinco abas: o rótulo aperta um pouco para não quebrar em duas linhas */
.nav a{font-size:.52em;letter-spacing:-.1px;padding-left:0;padding-right:0}
.nav a .i{font-size:1.55em}

/* a terceira linha da capa: o progresso, discreto e dourado */
.cap-tx small{min-height:0}
.cap-tx i{display:block;font-style:normal;color:var(--ouro);font-size:.58em;margin-top:6px;
  letter-spacing:.5px;text-transform:uppercase}
.cap-img{height:96px}


/* Estante: quando são poucos títulos, cartão largo lê melhor do que dois
   apertados. A capa cresce e o texto ganha linha inteira. */
.vitrine.larga{grid-template-columns:1fr}
.vitrine.larga .cap-img{height:150px}
.vitrine.larga .cap-tx{padding:13px 14px 15px}
.vitrine.larga .cap-tx b{font-size:.9em}
.vitrine.larga .cap-tx small{font-size:.7em}


/* voz tocando: o botão fica aceso, para ela achar onde parar */
.ouvir-top.on{border-color:var(--ouro);border-style:solid}
.ouvir-top.on .oi{animation:pulsaOuvir 1.6s ease-in-out infinite}
@keyframes pulsaOuvir{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}


/* O momento do dia manda na ordem. Sem isto a lista era só numeração. */
.pl-mom{display:flex;align-items:center;gap:9px;margin:20px 0 7px;padding:9px 12px;
  border-radius:11px;background:linear-gradient(100deg,rgba(201,162,74,.17),rgba(201,162,74,.03));
  border-left:3px solid var(--ouro)}
.pl-mom:first-child{margin-top:2px}
/* o item do gesto era <button> e saía com a fonte do navegador, menor
   que a dos vizinhos <a>. Era o desalinho que aparecia no print. */
.pl-i{font:inherit}
/* o santo é aviso, não dever: faixa fina, sem número e sem check */
.fx-santo{display:flex;align-items:center;gap:10px;margin:18px 0 -4px;padding:11px 13px;
  border-radius:12px;background:linear-gradient(160deg,var(--sup10),var(--sup11));
  border:1px solid var(--borda5);text-decoration:none}
.fx-santo b{flex:1;color:var(--ouro-cl);font-size:.72em;font-weight:600}
.fx-santo .go{color:var(--ouro);font-size:.9em}


/* ---------- O CARTÃO DO DIA ----------
   Papel, não tela: fundo creme, filete duplo dourado e uma fita no topo.
   É o formato dos cartões impressos de devoção, que este público lê desde
   criança, e onde os quatro blocos ficam visíveis de uma olhada só. */
.cartao{position:relative;margin:14px 0 6px;padding:16px 15px 18px;border-radius:16px;
  background:linear-gradient(168deg,#F5EEDC,#EDE3C9 60%,#E7DBBC);
  border:1px solid #C6AF79;box-shadow:0 2px 0 #B99F63 inset,0 10px 26px rgba(0,0,0,.35)}
.cartao::before{content:"";position:absolute;inset:6px;border-radius:11px;
  border:1px solid rgba(169,138,74,.5);pointer-events:none}
.ct-fita{position:relative;margin:-6px auto 12px;width:fit-content;max-width:92%;
  padding:6px 20px;border-radius:4px;text-align:center;
  background:linear-gradient(180deg,#D8B564,#B7913F);color:var(--sup8b);
  font-size:.62em;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  box-shadow:0 2px 5px rgba(0,0,0,.25)}
.ct-t{text-align:center;color:#1F3159;font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;line-height:1.05;font-size:clamp(1.5rem,9vw,2.15em);
  word-break:break-word;hyphens:auto}
.ct-sub{text-align:center;color:#7A6540;font-size:.72em;margin-top:4px;font-style:italic}
.ct-img{height:170px;margin:13px 0 4px;border-radius:9px;background:#DED2B4 center/cover;
  border:1px solid #C6AF79;filter:sepia(.16)}
.ct-bl{margin-top:11px;padding:11px 13px;border-radius:9px;
  background:rgba(255,252,243,.72);border:1px solid #DCCDA8}
.ct-bl>b{display:flex;align-items:center;gap:7px;color:#1F3159;
  font-size:.63em;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.ct-bl>b i{font-style:normal;font-size:1.35em;line-height:1}
.ct-bl p{margin:6px 0 0;color:var(--t3b);font-size:.78em;line-height:1.55}
.ct-bl p em{color:#6B5730}
.ct-bl.acao{background:rgba(216,181,100,.17);border-color:#C6AF79}
.ct-pe{margin-top:13px;text-align:center;color:#8A7550;font-size:.66em;letter-spacing:.4px}
/* o **negrito** dentro do texto é nome de santo, não rótulo de bloco */
.ct-bl p b,.ct-bl p strong{color:#1F3159;font-weight:700;text-transform:none;letter-spacing:0}

/* O momento manda na ordem do dia, então tem tamanho de título, não de
   legenda. Antes era a menor letra da tela, do tamanho de rodapé. */
.pl-mom>i{font-style:normal;font-size:1.25em;line-height:1}
.pl-mom>b{color:var(--ouro-cl);font-size:.76em;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.pl-mom>small{margin-left:auto;color:var(--texto2);font-size:.64em;font-style:italic;text-align:right}


/* Três alturas no item: o VERBO, o assunto e o detalhe. Antes eram duas,
   e o verbo não existia: o item da tarde era só o nome de uma parábola,
   e ela não sabia se aquilo era para ler, ouvir ou rezar. */
.pl-i{align-items:flex-start;padding-top:13px;padding-bottom:13px}
.pl-i .pl-n{margin-top:1px}
.pl-top{display:flex;align-items:baseline;gap:8px}
.pl-top b{flex:1;min-width:0}
.pl-top em{flex:0 0 auto;font-style:normal;color:var(--ouro);font-size:.6em;
  font-weight:700;letter-spacing:.4px;padding:3px 7px;border-radius:20px;
  background:rgba(201,162,74,.14);border:1px solid rgba(201,162,74,.3);white-space:nowrap}
.pl-oq{display:block;color:var(--t6);font-size:.76em;line-height:1.3;margin-top:3px}
.pl-i .go{align-self:center}
.pl-i.ok .pl-oq{color:var(--texto2)}
.pl-i.ok .pl-top em{opacity:.55}


/* A troca de duração: discreta de propósito. O padrão continua sendo o
   terço, e isto é a saída de quem senão pularia a noite inteira. */
.pl-troca{display:block;width:100%;margin:-2px 0 0;padding:9px 12px 10px;
  background:none;border:none;text-align:left;cursor:pointer;
  color:var(--ouro);font-size:.66em;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(201,162,74,.4)}
.pl-troca:active{opacity:.6}


/* ---------- O PRODUTO COMO OBJETO ----------
   Seis capas em leque. Ela vem do tempo em que se comprava livro vendo o
   livro, e um emoji não dá nenhuma noção do que chega. */
.leque{position:relative;display:flex;justify-content:center;align-items:flex-end;
  height:190px;padding:14px 6px 0;overflow:hidden}
.leque .lq{width:96px;height:auto;margin:0 -26px;border-radius:4px;
  border:1px solid rgba(0,0,0,.35);box-shadow:0 8px 20px rgba(0,0,0,.45);
  transform-origin:bottom center}
.prod{display:block;text-decoration:none;margin-top:12px;border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,var(--sup14),var(--card));border:1px solid var(--borda1)}
.prod:active{transform:scale(.99)}
.pr-tx{padding:4px 15px 16px}
.pr-t{color:var(--ouro-cl);font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5em;font-weight:700;line-height:1.1;text-align:center}
.pr-s{color:var(--texto2);font-size:.68em;text-align:center;margin:5px 0 12px}
/* as seis capas em grade, na página do produto */
.grade6{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.g6 img{width:100%;border-radius:5px;border:1px solid var(--borda2);display:block}
.g6 span{display:block;color:var(--texto2);font-size:.6em;margin-top:5px;line-height:1.3}
.g6 span b{color:var(--ouro)}
/* a página de amostra, em tamanho de leitura */
.amostra{width:100%;border-radius:9px;border:1px solid var(--borda2);display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}


/* Capa única, para produto que não tem coleção. A sombra dá volume de
   objeto, que é o que o emoji não dava. */
.capaunica{display:flex;justify-content:center;padding:16px 0 6px}
.capaunica img{width:172px;border-radius:6px;border:1px solid rgba(0,0,0,.4);
  box-shadow:0 12px 28px rgba(0,0,0,.5)}


/* ---------- O ALTAR ----------
   Velas em fila, acesas ou não. A acesa tem chama que oscila; a apagada é
   só o pavio. As grandes (9, 30, 365) são mais altas. Nada aqui zera. */
.altar{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px 10px;
  margin:18px 0 20px;padding:22px 10px 16px;border-radius:16px;
  background:linear-gradient(180deg,var(--sup2),var(--fundo2b));border:1px solid var(--borda2)}
.vl{display:flex;flex-direction:column;align-items:center;text-decoration:none;width:54px;opacity:.38}
.vl.on{opacity:1}
.vl-c{display:block;width:16px;height:44px;border-radius:3px 3px 2px 2px;
  background:linear-gradient(180deg,#F1E4C2,#D9C79A);box-shadow:inset -3px 0 6px rgba(0,0,0,.18)}
.vl.g .vl-c{height:66px;width:20px}
.vl-ch{display:block;width:10px;height:14px;border-radius:50% 50% 45% 45%;margin-bottom:-2px;
  background:radial-gradient(ellipse at 50% 70%,#FFF4C2 0,#F6B233 45%,rgba(230,120,20,0) 75%);
  opacity:0;transform:scale(.6)}
.vl.on .vl-ch{opacity:1;animation:chama 1.3s ease-in-out infinite alternate}
@keyframes chama{from{transform:scale(.92) translateY(0)}to{transform:scale(1.08) translateY(-1px)}}
.vl b{color:var(--ouro-cl);font-size:.78em;margin-top:7px}
.vl small{color:var(--texto2);font-size:.58em;margin-top:1px}
.jn-mk{text-decoration:none}


/* O cartão trancado: existe para ela ver que tem mais. O cadeado e o
   "faltam N dias" dizem tudo sem abrir nada. */
.trancado{display:flex;align-items:flex-start;gap:12px;margin:18px 0 6px;padding:14px 14px 15px;
  border-radius:13px;text-decoration:none;
  background:linear-gradient(160deg,var(--sup13),var(--sup3));border:1px dashed var(--borda4)}
.trancado:active{transform:scale(.99)}
.tr-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.15em;background:var(--sup1);border:1px solid var(--borda1)}
.tr-tx b{display:block;color:var(--ouro-cl);font-size:.82em}
.tr-tx small{display:block;color:var(--texto2);font-size:.68em;margin-top:3px;line-height:1.35}
.tr-tx i{display:block;color:var(--ouro);font-size:.62em;font-style:normal;margin-top:6px;
  letter-spacing:.3px;text-transform:uppercase}


/* ---------- A PERGUNTA DO DIA ----------
   Três botões grandes, um toque, e a resposta abre embaixo. Depois de
   responder os botões travam: ela não fica tentando até acertar, porque o
   objetivo é ler a explicação, não ganhar. */
.quiz{margin:22px 0 10px;padding:16px 15px 14px;border-radius:14px;
  background:linear-gradient(160deg,var(--sup13),var(--sup3));border:1px solid var(--borda1)}
.qz-cab{color:var(--ouro);font-size:.62em;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.qz-p{color:var(--t1);font-size:.9em;font-weight:600;line-height:1.35;margin-bottom:12px}
.qz-o{display:block;width:100%;margin:0 0 8px;padding:13px 14px;border-radius:11px;text-align:left;
  background:var(--sup1);border:1px solid var(--borda4);color:var(--t1);font:inherit;font-size:.82em;line-height:1.3;cursor:pointer}
.qz-o:active{transform:scale(.99)}
.qz-o.ok{background:var(--verde4);border-color:#3E8A4A;color:#DFF5E3}
.qz-o.ok::before{content:"\2713  "}
.qz-o.nao{background:var(--verm1);border-color:#8A3E3E;color:#F5DFDF;text-decoration:line-through}
.qz-o.off{opacity:.45}
.qz-o[disabled]{cursor:default}
.qz-r{margin-top:10px;padding:12px 13px;border-radius:10px;background:rgba(201,162,74,.1);
  border-left:3px solid var(--ouro);color:var(--t1);font-size:.8em;line-height:1.5}
.qz-r b{color:var(--ouro-cl)}
.quiz.errado .qz-r b{color:#F0B0B0}


/* o dia futuro na trilha: cadeado, sem link, sem cursor de mão */
.jn-p.depois{cursor:default;opacity:.55}
.jn-p.depois .jp-n{font-size:.85em}


/* o 365 em número grande no cartão trancado */
.tr-num{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:12px;background:linear-gradient(180deg,#2A1A0B,#1A1006);
  border:1px solid #5A421C}
.tr-num b{color:var(--ouro-cl);font-size:1.45em;font-weight:800;line-height:1;letter-spacing:-.5px}
.tr-num small{color:var(--ouro);font-size:.58em;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
/* ---------- O MAPA DAS TRÊS CAMADAS ----------
   9 · 30 · 365, com a etapa atual acesa. Uma olhada e ela sabe o tamanho
   do que recebeu e onde está. */
.camadas{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 18px}
.cm{flex:1;max-width:108px;display:flex;flex-direction:column;align-items:center;padding:11px 6px 10px;
  border-radius:12px;background:var(--sup3);border:1px solid var(--borda2);opacity:.5}
.cm b{color:var(--ouro-cl);font-size:1.35em;font-weight:800;line-height:1;letter-spacing:-.5px}
.cm small{color:var(--texto2);font-size:.56em;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.cm i{color:var(--texto2);font-size:.6em;font-style:normal;margin-top:5px;text-align:center;line-height:1.2}
.cm.feita{opacity:.85;border-color:var(--borda4)}
.cm.feita b::after{content:" \2713";color:#8FBF7A;font-size:.6em}
.cm.agora{opacity:1;background:linear-gradient(160deg,#2A1A0B,#1A1006);border-color:var(--ouro);
  box-shadow:0 0 0 2px rgba(201,162,74,.18)}
.cm.agora i{color:var(--ouro-cl)}
.cm-seta{color:var(--borda4);font-size:1.2em;flex:0 0 auto}


/* ---------- CAPAS EM CSS ----------
   Para as coleções que não têm capa raster: gravura de fundo, véu escuro
   embaixo, título do volume. Mesma medida do leque da loja. */
.lq.lqc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  width:96px;height:128px;background-size:cover;background-position:center;
  border-radius:4px 7px 7px 4px;overflow:hidden;filter:sepia(.18) brightness(.82) contrast(1.08)}
.lq.lqc::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,12,4,.22) 0%,rgba(20,12,4,.58) 45%,rgba(20,12,4,.96) 100%)}
.lq.lqc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0))}
.lq.lqc b,.lq.lqc i{position:relative;z-index:1;display:block;text-align:center;padding:0 6px}
.lq.lqc b{color:#F0CD7A;font-family:"Cormorant Garamond",Georgia,serif;font-size:.86em;font-weight:700;line-height:1}
.lq.lqc i{color:#E6DBC6;font-size:.56em;font-style:normal;margin:3px 0 9px;letter-spacing:.3px}
.pr-d{color:var(--texto2);font-size:.72em;text-align:center;line-height:1.4;margin:0 4px 12px}

/* ---------- O BANNER DE INSTALAR ----------
   No topo da Hoje, dourado, com o motivo escrito. Some ao instalar. */
.inst{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:13px 13px 12px;
  border-radius:13px;background:linear-gradient(160deg,#2E1E0A,var(--sup13));border:1px solid var(--ouro)}
.in-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.2em;background:linear-gradient(180deg,#D8AC52,#BD8F34)}
.in-tx b{display:block;color:var(--ouro-cl);font-size:.84em;line-height:1.25}
.in-tx small{display:block;color:var(--texto);font-size:.7em;margin-top:4px;line-height:1.4}
.in-bt{display:flex;gap:8px;margin-top:10px;align-items:center}
.in-ok{flex:1;text-align:center;padding:10px 12px;border-radius:9px;text-decoration:none;
  background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004;font-size:.74em;font-weight:800}
.in-nao{background:none;border:none;color:var(--texto2);font:inherit;font-size:.7em;padding:8px 6px;cursor:pointer;text-decoration:underline}

/* legibilidade para 65 anos: nenhum rótulo abaixo de 12px */
.cap-tx small,.linha .tx small,.pl-tx small,.psub,.pr-s,.g6 span,.tile .s{font-size:max(.72em,12px)}


/* ---------- O PEDIDO DO AVISO ----------
   Uma caixa só, no topo da Hoje e no fim do dia rezado. Muda de frase a
   cada "depois". Borda de ouro: é a coisa mais importante da tela. */
.avpd{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  padding:15px 16px;border-radius:14px;background:linear-gradient(160deg,var(--sup1b),var(--card));
  border:1px solid var(--ouro);box-shadow:0 0 0 2px rgba(201,162,74,.14)}
.avpd .av-ic{width:44px;height:44px;border-radius:50%;background:var(--sup9);border:1px solid var(--borda4);
  display:flex;align-items:center;justify-content:center;font-size:1.2em;flex:0 0 auto}
.avpd .av-tx{flex:1;min-width:150px;padding-right:22px}
.avpd .av-tx b{display:block;color:var(--ouro-cl);font-size:.86em;line-height:1.25}
.avpd .av-tx small{display:block;color:var(--texto2);font-size:.74em;line-height:1.4;margin-top:4px}
.avpd .av-bt{flex:1 0 100%;margin-top:4px;min-height:58px;border-radius:11px;border:none;
  background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004;font-family:inherit;
  font-size:.86em;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center}
.avpd .av-x{position:absolute;top:7px;right:7px;width:34px;height:34px;border-radius:50%;
  background:none;border:none;color:var(--t12);font-size:.8em;cursor:pointer}
.avpd .av-nao{flex:1 0 100%;min-height:44px;background:none;border:none;color:var(--texto2);
  font-family:inherit;font-size:.76em;cursor:pointer}
.avpd.grande{margin:16px 0 18px}
/* a faixa do bom dia, com a imagem em miniatura */
.fx-bd{margin-top:14px}
.bd-mini{width:40px;height:40px;border-radius:9px;background-size:cover;background-position:center top;
  flex:0 0 auto;border:1px solid #5A421C}
.bd-img{margin:12px 0 14px;border-radius:14px;overflow:hidden;border:1px solid #402C13}
.bd-img img{display:block;width:100%;height:auto}
.rodape a{color:var(--ouro);text-decoration:underline}


/* ---------- A JORNADA DO DIA ----------
   Cada passo é um nó ligado ao seguinte. O atual está aceso e pulsa; os
   feitos ficam dourados com ✓; a barra mostra quanto falta. */
.pl-bar{height:10px;border-radius:5px;background:var(--fundo2);overflow:hidden;border:1px solid var(--borda2);margin:-2px 2px 12px}
.pl-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#BD8F34,#F0CD7A);transition:width .4s}
.pl{position:relative}
.pl::before{content:"";position:absolute;left:31px;top:24px;bottom:24px;width:2px;background:var(--borda2);z-index:0}
.pl-i,.pl-mom,.pl-troca{position:relative;z-index:1}
.pl-i.depois{opacity:.8}
.pl-i.agora{border-color:var(--ouro);background:linear-gradient(160deg,var(--sup6),var(--sup7));
  box-shadow:0 0 0 2px rgba(201,162,74,.18),0 8px 22px rgba(0,0,0,.4)}
.pl-i.agora .pl-n{background:linear-gradient(180deg,#F0CD7A,#BD8F34);border-color:#F6E4B6;color:#1A1004;animation:pulsa 1.8s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(240,205,122,.5)}50%{box-shadow:0 0 0 8px rgba(240,205,122,0)}}
.pl-ag{flex:0 0 auto;font-size:.56em;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#1A1004;
  background:linear-gradient(180deg,#F0CD7A,#BD8F34);border-radius:9px;padding:3px 7px;margin-left:6px}
.pl-fim.estrela{background:linear-gradient(160deg,var(--sup6),var(--sup7));border:1px solid var(--ouro)}
.pl-fim.estrela b{display:block;color:var(--ouro-cl);font-size:1.05em}
.pl-fim.estrela small{display:block;color:var(--texto2);margin-top:5px;font-size:.78em;line-height:1.4}
.jn-p{position:relative}
.jp-e{position:absolute;top:-8px;right:-8px;font-size:.72em;font-style:normal;filter:drop-shadow(0 1px 1px #000)}
.btg.prox small{display:block;font-size:.58em;letter-spacing:1.5px;text-transform:uppercase;opacity:.75;margin-bottom:2px}
/* ---------- O LEITOR ---------- */
.lv-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 2px 8px}
.lv-cab b{color:var(--ouro-cl);font-size:.86em}
.lv-cab small{flex:0 0 auto;color:var(--texto2);font-size:.7em}
.lv-pag{border-radius:12px;overflow:hidden;border:1px solid var(--borda2);background:#fff;min-height:220px}
.lv-pag img{display:block;width:100%;height:auto}
.lv-nav{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:14px;position:sticky;bottom:calc(var(--menu) + 10px);z-index:20}
.lv-nav .btg{margin:0;min-height:58px}
.bi-ficha{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 14px}
.bi-ficha span{background:rgba(120,90,40,.12);border-radius:9px;padding:9px 11px;font-size:.8em;line-height:1.3}
.bi-ficha b{display:block;font-size:.6em;letter-spacing:1.2px;text-transform:uppercase;opacity:.7;margin-bottom:2px}
/* ---------- A ESTANTE: capas inteiras, sem corte ---------- */
.estante{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:12px}
.lvc{display:block;text-decoration:none}
.lvc-img{display:block;aspect-ratio:3/4;border-radius:10px;background:#241809 center top/cover;
  box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07)}
.lvc:active .lvc-img{transform:scale(.98)}
.lvc b{display:block;color:var(--ouro-cl);font-size:.78em;line-height:1.25;margin-top:9px}
.lvc small{display:block;color:var(--texto2);font-size:.64em;line-height:1.35;margin-top:3px}
.lvc i{display:block;font-style:normal;color:var(--ouro);font-size:.6em;margin-top:5px}
/* ---------- OS 365 BONS DIAS ---------- */
.bd-lista{display:flex;flex-direction:column;gap:6px}
.bd-i{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;background:var(--card);border:1px solid var(--linha);text-decoration:none}
.bd-i b{flex:1;color:var(--t1);font-size:.8em;font-weight:600;line-height:1.25}
.bd-i .bd-n{flex:0 0 auto;min-width:46px;text-align:center;color:var(--texto2);font-size:.62em;font-weight:700}
.bd-i.feito .bd-n{color:var(--ouro)}
.bd-i.agora{border-color:var(--ouro);background:linear-gradient(160deg,var(--sup6),var(--sup7))}
.bd-i.agora b{color:var(--ouro-cl)}
.bd-i.depois{opacity:.5}
.bd-i .go{color:var(--ouro);font-size:.9em}
/* a Rezar no molde da Ler: vários botões num cartão; capas pelo alto, para não cortar cabeça */
.prod.rz .bt2+.bt2{margin-top:8px}
.lq.lqc{background-position:center top}


/* ---------- A HOJE GUIADA: uma coisa por vez ---------- */
.hj-linha{color:var(--texto2);font-size:.7em;text-align:center;margin:-4px 0 14px;letter-spacing:.3px}
.hero.agora{border-color:var(--ouro);box-shadow:0 0 0 2px rgba(201,162,74,.16),0 10px 26px rgba(0,0,0,.45)}
.hero .dia{text-transform:uppercase;letter-spacing:1.4px;font-size:.58em}
.hero .tt{font-family:inherit}
/* a jornada em linhas curtas */
.jd{display:flex;flex-direction:column;gap:6px;position:relative}
.jd::before{content:"";position:absolute;left:29px;top:22px;bottom:22px;width:2px;background:var(--borda2)}
.jd-i{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px 11px 10px;border-radius:12px;
  background:var(--card);border:1px solid var(--linha);text-align:left;text-decoration:none;font:inherit;cursor:pointer;color:inherit}
.jd-i:active{transform:scale(.99)}
.jd-n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sup2);border:2px solid var(--borda1);color:var(--t12);font-size:.82em;font-weight:800}
.jd-ic{flex:0 0 auto;font-size:1.05em;font-style:normal}
.jd-i b{flex:1;min-width:0;color:var(--t1);font-size:.86em;font-weight:700;line-height:1.2}
.jd-i em{flex:0 0 auto;font-style:normal;color:var(--texto2);font-size:.64em}
.jd-i.ok{opacity:.7}
.jd-i.ok .jd-n{background:linear-gradient(180deg,#D8AC52,#BD8F34);border-color:#8A6524;color:#1A1004}
.jd-i.ok b{text-decoration:line-through;text-decoration-color:var(--t10)}
.jd-i.agora{border-color:var(--ouro);background:linear-gradient(160deg,var(--sup6),var(--sup7))}
.jd-i.agora .jd-n{background:linear-gradient(180deg,#F0CD7A,#BD8F34);border-color:#F6E4B6;color:#1A1004;animation:pulsa 1.8s ease-in-out infinite}
.jd-i.agora b{color:var(--ouro-cl)}
.jd-i.depois{opacity:.85}


/* ---------- TEMA CLARO ----------
   Gerado por gerar-tema.js. O escuro é o de sempre; aqui só os valores
   das variáveis para quem escolheu o claro (Ajuda, ou o sol no topo). */
[data-tema="claro"]{--bg:#F7F2E8; --bg2:#F1EADB; --card:#FFFDF8; --linha:#E3D7BF; --ouro:#8A6524; --ouro-cl:#6B4E14; --ouro-esc:#B08A3C; --texto:#2A1A0B; --texto2:#5F5040; --branco:#1A1004; --tinta:#1A1004; --sup12:#FFFDF8; --t13:#3A2A18; --sup1:#FFFFFF; --sup2:#F6EFE0; --borda1:#DCCBA8; --t9:#6B5A42; --borda2:#E3D7BF; --t7:#6B4E14; --borda3:#E6DBC6; --sup2c:#F6EFE0; --t1:#2A1A0B; --verde3:#D5E8BE; --verde1b:#EEF5E4; --sup15:#F1E7D3; --sup14:#F8F1E3; --sup13b:#FBF6EA; --t8:#6B5A42; --t10:#9A8A70; --no1b:#F3DED8; --no1a:#FBF0EC; --no2b:#EDE6D2; --no2a:#F8F4E8; --no3b:#F2DDE4; --no3a:#FAEEF1; --no4b:#DAE8F1; --no4a:#EAF3F8; --no5b:#DFEDD3; --no5a:#EEF6E8; --no6b:#EEE3CE; --no6a:#F7F1E4; --no7b:#DAE4F1; --no7a:#EAF0F8; --no8b:#E2DBF2; --no8a:#F0ECF8; --no9a:#F7F3E6; --fundo2:#E9DFC9; --sup3c:#F3EBDA; --verde2:#E1EED3; --verde1:#EEF5E4; --sup14b:#F8F1E3; --sup2d:#F6EFE0; --sup4:#F6EFE0; --sup8:#FFF3D6; --sup5:#F3EBDA; --sup3:#F3EBDA; --t4:#5A4A32; --sup3b:#F3EBDA; --t2:#2A1A0B; --sup1b:#FFFFFF; --borda4:#CDB98F; --sup6b:#FFF8E6; --fundo3:#E3D7BF; --sup2b:#F6EFE0; --sup10:#FFF8E6; --sup11:#F6EFE0; --borda5:#E3D7BF; --sup8b:#FFF3D6; --t3b:#3A2A18; --t6:#3A2A18; --fundo2b:#E9DFC9; --sup13:#FBF6EA; --verde4:#DDF0E0; --verm1:#F6DEDE; --sup9:#F1E3C4; --t12:#8A7A60; --sup6:#FFF8E6; --sup7:#F8F1E1}
[data-tema="claro"] body{background:var(--bg)}
[data-tema="claro"] .hero.comfoto::after{background:linear-gradient(180deg,rgba(255,251,242,.80),rgba(255,251,242,.94))}
[data-tema="claro"] .hero .tt,[data-tema="claro"] .hero .pal{color:#1A1004;text-shadow:none}
[data-tema="claro"] .hero .sub,[data-tema="claro"] .hero .dia{color:#5F5040}
[data-tema="claro"] .nav{background:#FFFDF8;border-top-color:#E3D7BF}
[data-tema="claro"] .toast{background:#2A1A0B;color:#F6E4B6}
[data-tema="claro"] .dur{background:#F1E3C4;color:#6B4E14}
[data-tema="claro"] .pl-bar,[data-tema="claro"] .mp-bar{background:#E9DFC9;border-color:#DCCBA8}
[data-tema="claro"] .oracao-bloco .texto,[data-tema="claro"] .box .p{color:#2A1A0B}
[data-tema="claro"] img,[data-tema="claro"] .lvc-img,[data-tema="claro"] .cap-img{filter:none}
[data-tema="claro"] .acao-fixa{background:linear-gradient(180deg,rgba(247,242,232,0),rgba(247,242,232,.96) 35%)}
[data-tema="claro"] .regua{background:rgba(247,242,232,.94)}
[data-tema="claro"] .cartao,[data-tema="claro"] .hero.agora,[data-tema="claro"] .pl-i.agora,[data-tema="claro"] .pfix-x{box-shadow:0 6px 18px rgba(80,60,20,.14)}
[data-tema="claro"] .chatbtn{box-shadow:0 6px 18px rgba(80,60,20,.25)}
[data-tema="claro"] .bt2.off{background:#F1E7D3;color:#6B4E14;border:1px solid #DCCBA8}
[data-tema="claro"] .btg.ghost{background:#FFFDF8;color:#6B4E14;border:1px solid #DCCBA8;box-shadow:0 4px 0 #DCCBA8}


/* ---------- o sol/lua do cabeçalho e a escolha na Ajuda ---------- */
.top{position:sticky}
.tema-bt{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--linha);font-size:1.1em;line-height:1;cursor:pointer;color:var(--texto)}
.tema-bt:active{transform:translateY(-50%) scale(.95)}
.tema-esc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tema-op{min-height:64px;border-radius:12px;border:2px solid var(--linha);background:var(--card);color:var(--texto);
  font:inherit;font-size:.9em;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tema-op span{font-size:1.3em}
.tema-op.on{border-color:var(--ouro);background:linear-gradient(180deg,#D8AC52,#BD8F34);color:#1A1004}


/* ---------- PRECISO DE: gravura, serifa, fio dourado ---------- */
.nos{display:flex;flex-direction:column;margin-top:14px}
.no-i{display:flex;align-items:center;gap:14px;padding:13px 6px 13px 4px;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--texto)}
.no-i:last-child{border-bottom:none}
.no-i:active{opacity:.85}
.no-g{flex:0 0 auto;display:block;width:62px;height:62px;border-radius:50%;background:#241809 center/cover;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ouro),0 6px 14px rgba(0,0,0,.25)}
.no-g.grande{width:96px;height:96px;margin:6px auto 12px}
.no-t{flex:1;min-width:0}
.no-t b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.22em;line-height:1.1;color:var(--branco);letter-spacing:.2px}
.no-t small{display:block;color:var(--texto2);font-size:.66em;margin-top:3px;letter-spacing:.3px}
.no-i .go{color:var(--ouro);font-size:1.15em}
/* ---------- a folga da barra do iPhone ----------
   O app usa a barra translúcida (viewport-fit=cover): sem esta folga o
   cabeçalho fica DEBAIXO do relógio e da bateria no app instalado. */
.top{padding-top:calc(12px + env(safe-area-inset-top))}
.tema-bt{top:auto;bottom:9px;transform:none}
.tema-bt:active{transform:scale(.95)}

/* o botão do tema fala: estado com palavra, na linha do título, sem cobrir o subtítulo */
.tema-bt{width:auto;height:30px;padding:0 11px;border-radius:15px;font-size:.6em;font-weight:800;letter-spacing:.3px;
  top:calc(env(safe-area-inset-top) + 9px);bottom:auto;transform:none;white-space:nowrap}
.tema-bt:active{transform:scale(.96)}
.top{padding-left:84px;padding-right:84px}
.top .s{white-space:normal}


/* ---------- A FAIXA E A PORTA DOS AVISOS ---------- */
.faixa-av{display:flex;align-items:center;justify-content:center;gap:6px;margin:-16px -15px 14px;padding:10px 14px;
  background:var(--sup9);color:var(--ouro-cl);font-size:.72em;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--borda4);text-align:center;line-height:1.3}
.faixa-av b{font-weight:800}
.porta{text-align:center;padding:10px 2px 20px}
.pt-ic{font-size:2.6em;line-height:1;margin:6px 0 10px}
.porta h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55em;line-height:1.15;color:var(--branco);margin:0 0 12px}
.porta p{color:var(--texto2);font-size:.88em;line-height:1.5;margin:0 0 12px}
.porta ul{list-style:none;margin:0 0 14px;padding:0;text-align:left}
.porta li{padding:11px 13px;margin:7px 0;border-radius:11px;background:var(--card);border:1px solid var(--linha);font-size:.88em;color:var(--texto)}
.porta li b{color:var(--ouro-cl)}
.porta .box{text-align:left}
.porta .btg{margin-top:6px}


/* ---------- DORMIR COM MARIA ---------- */
.dm-lista{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.dm-i{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:13px;background:var(--card);border:2px solid var(--linha);
  text-align:left;font:inherit;color:var(--texto);cursor:pointer}
.dm-i.on{border-color:var(--ouro);background:linear-gradient(160deg,var(--sup6),var(--sup7))}
.dm-r{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--borda4)}
.dm-i.on .dm-r{border-color:var(--ouro);background:radial-gradient(circle,var(--ouro) 45%,transparent 50%)}
.dm-tx b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15em;color:var(--branco);line-height:1.1}
.dm-tx small{display:block;color:var(--texto2);font-size:.7em;margin-top:3px;line-height:1.35}
.dm-agora{text-align:center;padding:26px 10px;margin-top:14px;border-radius:16px;background:var(--card);border:1px solid var(--linha)}
.dm-t{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5em;color:var(--branco)}
.dm-n{font-size:1.05em;color:var(--ouro-cl);margin:10px 0;font-weight:700}
.dm-s{color:var(--texto2);font-size:.8em;line-height:1.45;margin:8px 0 18px}

/* a dica do fone, onde ela ouve */
.fone{margin:10px 0 4px;padding:10px 13px;border-radius:11px;background:var(--sup9);border:1px solid var(--borda4);color:var(--texto);font-size:.8em;line-height:1.4;text-align:center}
.fone b{color:var(--ouro-cl)}


/* ---------- A DESATADORA EM CIMA DO TÍTULO ----------
   A faixa da pintura (halo, rosto, mãos no nó) no alto do cartão de agora
   e das telas principais, desmanchando no fundo. Texto nunca por cima
   da imagem: ele fica abaixo, onde o idoso lê. */
.hero.comfoto{padding-top:160px}
.hero.comfoto::before{inset:auto;top:0;left:0;right:0;height:176px;background:url("img/desatadora-faixa.jpg") center 30%/cover;opacity:1;filter:none}
.hero.comfoto::after{inset:auto;top:0;left:0;right:0;height:176px;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,var(--sup1) 100%)}
[data-tema="claro"] .hero.comfoto::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,#FFFFFF 100%)}
.vinheta{position:relative;height:120px;margin:-16px -15px 10px;background:url("img/desatadora-faixa.jpg") center 26%/cover}
.vinheta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,var(--bg) 100%)}
.voltar + .vinheta{margin-top:10px}

/* o subtítulo usa a largura toda: o botão do tema fica na linha do título, não colide */
.top .s{margin-left:-70px;margin-right:-70px}
.top{padding-left:70px;padding-right:70px}


/* ---------- TESOUROS (a loja) ----------
   A aba com nome que dá vontade de tocar, a bolinha vermelha enquanto o
   tesouro da semana não foi visto, e os cartões pagos no meio do conteúdo
   grátis, com o cadeado que diz o preço. Cores por variável: vale nos dois
   temas. */
.nav a{position:relative}
.nav a .bol{position:absolute;top:6px;left:calc(50% + 8px);width:11px;height:11px;border-radius:50%;background:#D8452F;border:2px solid var(--bg2);box-shadow:0 0 0 1px rgba(216,69,47,.35)}
.pq{color:var(--texto2);font-size:.76em;text-align:center;line-height:1.45;margin:0 6px 12px}
.pq b{color:var(--ouro-cl);font-weight:700}
.trow{display:flex;align-items:center;gap:13px;padding:12px 12px 12px 11px;margin-top:10px;border-radius:14px;text-decoration:none;
  background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda1)}
.trow:active{transform:scale(.99)}
.trow img{width:56px;height:74px;object-fit:cover;object-position:top;border-radius:5px;border:1px solid var(--borda2);flex:0 0 auto;display:block}
.trow .tx{flex:1;min-width:0}
.trow .tx b{display:block;color:var(--ouro-cl);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.08em;font-weight:700;line-height:1.12}
.trow .tx small{display:block;color:var(--texto2);font-size:.66em;line-height:1.35;margin-top:4px}
.trow .pr{flex:0 0 auto;color:var(--ouro);font-size:.72em;font-weight:800;white-space:nowrap}
.lvc.pago .lvc-img{position:relative}
.lvc.pago .lvc-img::after{content:"🔒";position:absolute;right:7px;top:7px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.85em;background:rgba(0,0,0,.6);border:1px solid rgba(240,205,122,.5)}
.trancado.tes{border-style:solid;border-color:var(--borda4);align-items:center}
.trancado.tes .tr-img{flex:0 0 auto;width:48px;height:64px;border-radius:4px;object-fit:cover;object-position:top;border:1px solid var(--borda2);display:block}
.reservado{margin-top:14px;padding:16px 15px 15px;border-radius:14px;text-align:center;
  background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--ouro)}
.reservado b{display:block;color:var(--ouro-cl);font-size:1em;margin-bottom:6px}
.reservado small{display:block;color:var(--texto2);font-size:.76em;line-height:1.45}
.reservado a{display:inline-block;margin-top:11px;color:var(--ouro);font-weight:800;font-size:.8em;text-decoration:none}
.hero.ok .btg.ghost{margin-top:9px}

/* No claro (que é o padrão), o bege de texto #D3C5AC some no fundo branco:
   bullets do que vem dentro, o texto do gesto, e o cartão verde do "já é
   seu". Erro antigo que só apareceu quando a loja voltou ao menu. */
[data-tema="claro"] .bul li,[data-tema="claro"] .info .p{color:#2A1A0B}
[data-tema="claro"] .lib .tt2{color:#1E3A10}
[data-tema="claro"] .lib .bd{color:#3F7A1E}
[data-tema="claro"] .lib .ss{color:#4E6B32}

/* os três tesouros iguais: cartão com a linha e o botão; a marca da semana em cima do título */
.tcard{margin-top:12px;border-radius:14px;background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda1);padding:0 12px 12px}
.tcard .trow{margin-top:0;border:none;background:none;border-radius:0;padding:13px 0 9px}
.tcard .bt2{margin-top:2px}
.trow .tag{display:block;font-style:normal;color:var(--ouro);font-size:.58em;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:4px}

/* O Mural dos Nós */
.mrl-cont{background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda1);border-radius:14px;padding:16px 14px;text-align:center;color:var(--texto2);font-size:.84em;line-height:1.4}
.mrl-cont b{display:block;color:var(--ouro-cl);font-size:2.5em;font-weight:800;line-height:1;letter-spacing:-1px;margin-bottom:3px}
.mrl-cont small{display:block;color:var(--texto2);font-size:.82em;margin-top:7px;opacity:.9}
.mrl-form{margin-top:14px;background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:14px}
.mrl-form .h{color:var(--ouro);font-size:.56em;letter-spacing:1.7px;font-weight:800;text-transform:uppercase;margin-bottom:9px}
.mrl-form textarea{min-height:66px;margin-bottom:2px}
.mrl-dica{color:var(--texto2);font-size:.72em;margin-top:8px;line-height:1.45}
.mrl-erro{color:#E39C9C;font-size:.78em;margin-top:9px}
.mrl-carreg{color:var(--texto2);text-align:center;padding:26px 0;font-size:.85em}
.mrl-i{padding:14px 0;border-bottom:1px solid var(--borda3)}
.mrl-it{font-size:.88em;line-height:1.5;color:var(--texto)}
.mrl-no{color:var(--ouro-cl);font-weight:700;margin-right:6px}
.mrl-no::after{content:"\00b7";margin-left:6px;color:var(--texto2);font-weight:400}
.mrl-b{display:flex;align-items:center;gap:12px;margin-top:10px}
.mrl-r{border:1px solid var(--ouro-esc);background:transparent;color:var(--ouro-cl);font-family:inherit;font-size:.80em;font-weight:700;padding:9px 15px;border-radius:22px;cursor:pointer;white-space:nowrap}
.mrl-r:active{transform:scale(.97)}
.mrl-r.fez{border-color:var(--linha);color:var(--texto2);opacity:.7}
.mrl-c{color:var(--texto2);font-size:.78em;font-variant-numeric:tabular-nums}
.mrl-c::before{content:"\1F64F  "}
.mrl-entrada{margin-bottom:6px}
/* mural: avatar + identidade (foto e nome opcionais) */
.mrl-i{display:flex;gap:12px;align-items:flex-start}
.mrl-body{flex:1;min-width:0}
.mrl-av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid var(--borda1);background:var(--sup1);display:flex;align-items:center;justify-content:center;margin-top:2px}
.mrl-av img{width:100%;height:100%;object-fit:cover;display:block}
.mrl-av-txt{color:var(--ouro-cl);font-weight:800;font-size:1.1em;font-family:'Cormorant Garamond',Georgia,serif}
.mrl-id{display:flex;gap:12px;align-items:center;margin-bottom:11px}
.mrl-foto-b{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:1px dashed var(--borda1);background:var(--sup1);padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mrl-foto-b img{width:100%;height:100%;object-fit:cover;display:block}
.mrl-foto-ph{font-size:1.35em;opacity:.85}
.mrl-id-c{flex:1;min-width:0}
.mrl-nome-in{width:100%;background:var(--sup2);border:1px solid var(--linha);border-radius:9px;color:var(--texto);font-family:inherit;font-size:.92em;padding:10px 12px}
.mrl-nome-in::placeholder{color:var(--texto2);opacity:.7}
.mrl-id-n{color:var(--texto2);font-size:.72em;margin-top:5px;line-height:1.45}
.mrl-link{background:none;border:none;color:var(--ouro-cl);font:inherit;font-size:1em;text-decoration:underline;cursor:pointer;padding:0}
/* alerta bem visível de nome faltando (onboarding e mural) */
.campo-erro{border-color:#E39C9C !important;box-shadow:0 0 0 3px rgba(227,156,156,.28)}
.nome-aviso{color:#F2B8B8;font-weight:800;font-size:.92em;margin-top:9px;text-align:center;background:rgba(200,60,60,.16);border:1px solid rgba(227,156,156,.55);border-radius:9px;padding:10px 12px;line-height:1.35}

/* A bênção da manhã */
.bencao{margin-top:4px;background:linear-gradient(160deg,var(--sup1),var(--sup2));border:1px solid var(--borda1);border-radius:14px;padding:15px 16px;margin-bottom:12px}
.bencao .bh{color:var(--ouro);font-size:.56em;letter-spacing:1.4px;font-weight:800;text-transform:uppercase;margin-bottom:7px}
.bencao .bt{color:var(--texto);font-size:1.04em;line-height:1.5;font-weight:600}