/* ===================================================================
CONGREGA — folha de estilo única
Tema escuro. A cor de acento (--acc) é trocada por tradição:
o layout .css é o mesmo em /batista e em /pentecostal.
=================================================================== */
:root{
--bg:#0B0D12; --surf:#141922; --surf2:#1C2330; --linha:#232B39;
--tx:#E9ECF1; --tx2:#8A93A3; --tx3:#5C6473;
--dourado:#E8B44C; --acc:#E8B44C; --vivo:#E23B3B; --ok:#3FA9F5;
--raio:10px; --max:1360px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,-apple-system,sans-serif;
font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ---------------------------------------------------------- topo */
/* O cabecalho continua grudando, mas ABAIXO da faixa de obra — senao
um cobre o outro. Quando a faixa sair, e so voltar top:0 aqui. */
.topo{display:flex;align-items:center;gap:26px;padding:14px 28px;
border-bottom:1px solid var(--linha);position:sticky;top:var(--h-obra,38px);z-index:50;
background:rgba(11,13,18,.92);backdrop-filter:blur(8px);flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:9px;flex:none}
.marca i{width:29px;height:29px;border-radius:8px;background:var(--dourado);color:#1A1206;
display:grid;place-items:center;font-size:15px;font-weight:800;font-style:normal}
.marca b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.marca-trad{font-size:14px;font-weight:800;margin-left:2px}
.topo nav{display:flex;gap:20px;font-size:14px;color:var(--tx2);flex-wrap:wrap}
.topo nav a:hover{color:var(--tx)}
.topo-dir{margin-left:auto}
.btn-pill{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700}
.btn-pill.dourado{background:var(--dourado);color:#1A1206}
/* --------------------------------------------------------- botões */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:8px;
font-size:14px;font-weight:700;border:1.5px solid transparent}
.btn.dourado{background:var(--dourado);color:#1A1206}
.btn.acento{background:var(--acc);color:#0B0D12}
.btn.vazado{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.btn.largura{display:flex;justify-content:center;width:100%;margin-top:11px}
/* ----------------------------------------------------------- hero */
.hero{position:relative;min-height:430px;display:flex;align-items:flex-end;overflow:hidden;
padding:40px 28px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-sombra{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(11,13,18,.96) 6%,rgba(11,13,18,.7) 46%,rgba(11,13,18,.2) 100%),
linear-gradient(0deg,var(--bg) 1%,transparent 36%)}
.hero-txt{position:relative;max-width:640px;z-index:2}
.olho{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--acc);font-weight:800;margin-bottom:13px}
.olho::before{content:"";width:24px;height:1.5px;background:currentColor}
.olho.acento{color:var(--acc)}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p{font-size:16px;line-height:1.6;color:#B9C0CB;margin:16px 0 22px;font-weight:300}
.hero-btn{display:flex;gap:11px;flex-wrap:wrap}
.hero-btn.centro{justify-content:center}
.hero-num{position:absolute;right:28px;bottom:40px;display:flex;gap:24px;z-index:2}
.hero-num b{display:block;font-size:24px;font-weight:800}
.hero-num span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
/* -------------------------------------------------------- trilhos */
.trilho{max-width:var(--max);margin:34px auto 0;padding:0 28px}
.trilho-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.trilho-cab i{width:5px;height:20px;border-radius:3px;flex:none;align-self:center}
.trilho-cab h2{font-size:19px;font-weight:800;letter-spacing:-.02em}
.trilho-cab span{font-size:12px;color:var(--tx2)}
.trilho-cab a{margin-left:auto;font-size:12px;color:var(--tx2);font-weight:600}
.trilho-cab a:hover{color:var(--acc)}
.faixa{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.faixa.quebra{flex-wrap:wrap;overflow:visible}
/* ---------------------------------------------------------- cards */
.card{width:210px;flex:none;border-radius:9px;overflow:hidden;background:var(--surf);
border:1px solid var(--linha);transition:transform .15s,border-color .15s}
.card.largo{width:266px}
.card:hover{transform:translateY(-2px);border-color:var(--acc)}
.card-img{height:120px;position:relative;overflow:hidden}
.card.largo .card-img{height:146px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img::after{content:"";position:absolute;inset:0;
background:linear-gradient(transparent 45%,rgba(11,13,18,.8))}
.sem-foto{width:100%;height:100%;background:linear-gradient(135deg,#1C2330,#141922)}
.selo{position:absolute;left:8px;top:8px;font-size:8.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;padding:3px 7px;border-radius:4px;color:#fff;z-index:2}
.verif{position:absolute;right:8px;top:8px;background:var(--ok);color:#fff;font-size:10px;
width:19px;height:19px;border-radius:50%;display:grid;place-items:center;z-index:2}
.vivo{position:absolute;right:8px;top:8px;background:var(--vivo);color:#fff;font-size:8.5px;
font-weight:800;padding:3px 7px;border-radius:4px;display:flex;align-items:center;gap:4px;z-index:2}
.vivo s{width:5px;height:5px;border-radius:50%;background:#fff;text-decoration:none}
.card-txt{padding:10px 11px 12px}
.card-txt b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.card-txt span{display:block;font-size:10.5px;color:var(--tx2);margin-top:4px}
.card-txt .cid{color:var(--tx3)}
/* ------------------------------------------------------ tradições */
.tradicoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.trad{height:96px;border-radius:9px;position:relative;overflow:hidden;padding:11px;
display:flex;flex-direction:column;justify-content:flex-end;transition:transform .15s}
.trad:hover{transform:translateY(-3px)}
.trad::after{content:"";position:absolute;inset:0;
background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 55%)}
.trad i{position:absolute;right:9px;top:8px;font-style:normal;font-size:19px;opacity:.36}
.trad b{font-size:14px;font-weight:800;color:#fff;position:relative;z-index:2}
.trad span{font-size:10px;color:rgba(255,255,255,.8);position:relative;z-index:2;margin-top:2px}
/* --------------------------------------------------- faixa apoio */
.apoio-faixa{max-width:var(--max);margin:38px auto 0;padding:20px 24px;display:flex;gap:20px;
align-items:center;background:linear-gradient(100deg,#1A2130,#141922);
border:1px solid #262E3D;border-radius:12px;flex-wrap:wrap}
.apoio-ic{width:44px;height:44px;border-radius:11px;background:var(--dourado);color:#1A1206;
display:grid;place-items:center;font-size:21px;flex:none}
.apoio-txt{flex:1;min-width:260px}
.apoio-txt b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.apoio-txt p{font-size:12.5px;color:var(--tx2);line-height:1.6}
.apoio-txt p b{display:inline;color:#C6CCD6;font-size:12.5px}
/* ------------------------------------------------------- ambiente */
.bloco-raiz{max-width:var(--max);margin:38px auto 0;padding:24px 26px;border-radius:12px;
background:radial-gradient(120% 140% at 8% 0%,rgba(255,255,255,.05),transparent 58%),
linear-gradient(#161C26,#11161E);border:1px solid #2A3242}
.bloco-raiz h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:18px}
.bloco-raiz-btn{margin-top:18px}
.creio{max-width:var(--max);margin:24px auto 0;padding:0 28px}
.creio h3{font-size:18px;font-weight:800;margin-bottom:10px}
.creio p{font-size:14.5px;color:#B9C0CB;line-height:1.7;max-width:820px}
.creio .nota{font-size:12px;color:var(--tx3);margin-top:10px}
.creio .nota a{color:var(--acc);font-weight:600}
.trocar{max-width:var(--max);margin:30px auto 0;padding:0 28px 10px}
.trocar span{font-size:12px;color:var(--tx2);display:block;margin-bottom:10px}
.trocar-chips{display:flex;gap:8px;flex-wrap:wrap}
.trocar-chips a{border:1.4px solid var(--linha);border-radius:999px;padding:7px 15px;
font-size:12.5px;font-weight:600;color:var(--tx2)}
.trocar-chips a:hover{color:#fff}
/* ---------------------------------------------------------- ficha */
.migalha{max-width:var(--max);margin:0 auto;padding:14px 28px 0;font-size:12px;color:var(--tx2)}
.migalha a{color:var(--acc);font-weight:600}
.ficha-capa{position:relative;height:230px;overflow:hidden;margin-top:10px}
.ficha-capa img{width:100%;height:100%;object-fit:cover}
.capa-sombra{position:absolute;inset:0;
background:linear-gradient(0deg,var(--bg) 2%,rgba(11,13,18,.45) 60%,rgba(11,13,18,.7))}
.ficha-id{max-width:var(--max);margin:-80px auto 0;padding:0 28px;position:relative;z-index:3;
display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.ficha-logo{width:96px;height:96px;border-radius:14px;overflow:hidden;flex:none;
background:var(--surf2);border:2px solid #2B3444}
.ficha-logo img{width:100%;height:100%;object-fit:cover}
.ficha-nome{flex:1;min-width:260px}
.selo-trad{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;padding:4px 9px;border-radius:5px;color:#fff;margin-bottom:9px}
.ficha-nome h1{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.ficha-sub{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--tx2)}
.ficha-sub em{font-style:normal}
.ficha-sub .ok{color:var(--ok);font-weight:600}
.ficha-sub .pend{color:var(--tx3)}
.ficha-acoes{display:flex;gap:9px;flex-wrap:wrap}
.ficha-grid{max-width:var(--max);margin:26px auto 0;padding:0 28px;
display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
.caixa{background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio);
padding:16px 18px 18px;margin-bottom:14px}
.caixa h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);
font-weight:800;margin-bottom:13px}
.caixa .texto{font-size:13.5px;color:#C6CCD6;line-height:1.7}
.caixa .texto b{color:#fff}
.horarios{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hor{background:var(--surf2);border-radius:8px;padding:11px 12px;border-left:2.5px solid var(--acc)}
.hor b{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--acc);margin-bottom:4px}
.hor strong{font-size:18px;font-weight:800;letter-spacing:-.02em}
.hor span{display:block;font-size:10.5px;color:var(--tx2);margin-top:2px}
.marcas{list-style:none;margin-top:10px}
.marcas li{font-size:12.5px;color:#B9C0CB;padding:4px 0 4px 17px;position:relative}
.marcas li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
border-radius:50%;background:var(--acc)}
.cultos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.culto-img{height:82px;border-radius:8px;overflow:hidden;position:relative;margin-bottom:8px}
.culto-img img{width:100%;height:100%;object-fit:cover}
.culto-img::after{content:"";position:absolute;inset:0;background:rgba(11,13,18,.3)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;
border-radius:50%;background:rgba(255,255,255,.94);z-index:2;display:grid;place-items:center}
.play::after{content:"";border-left:9px solid #0B0D12;border-top:6px solid transparent;
border-bottom:6px solid transparent;margin-left:3px}
.culto b{display:block;font-size:12.5px;font-weight:700;line-height:1.3}
.culto span{display:block;font-size:10.5px;color:var(--tx2);margin-top:3px}
.mapa{height:140px;border-radius:8px;position:relative;overflow:hidden;background:#1A2130;
border:1px solid #2A3444}
.mapa-grade{position:absolute;inset:0;
background-image:linear-gradient(#232D3E 1px,transparent 1px),
linear-gradient(90deg,#232D3E 1px,transparent 1px);
background-size:26px 26px}
.mapa-pino{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%) rotate(-45deg);
width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--acc);
box-shadow:0 4px 12px rgba(0,0,0,.5)}
.endereco{font-size:12.5px;color:#C6CCD6;line-height:1.65;margin-top:11px}
.endereco b{color:#fff;font-weight:600}
.tel{font-size:12.5px;color:var(--tx2);margin-top:10px}
.reivindicar{background:linear-gradient(100deg,#2A2011,#1C1810);border-color:#3E3218}
.reivindicar b{display:block;font-size:13.5px;color:var(--dourado);font-weight:800;margin-bottom:6px}
.reivindicar p{font-size:11.5px;color:#9A9282;line-height:1.55}
.lista-mini a{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linha)}
.lista-mini a:last-child{border:0}
.lista-mini img{width:46px;height:34px;object-fit:cover;border-radius:5px;flex:none}
.lista-mini b{display:block;font-size:12px;font-weight:600;line-height:1.25}
.lista-mini span{font-size:10px;color:var(--tx2)}
.corrigir{display:block;font-size:11.5px;color:var(--tx3);text-align:center;padding:8px}
.corrigir:hover{color:var(--acc)}
.link-raiz{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--acc);font-weight:700}
/* -------------------------------------------------- caminho em texto */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumbs span{background:#0E131B;border:1px solid var(--linha);border-radius:7px;padding:7px 11px;
font-size:12px;font-weight:700;color:#D6DCE6}
.crumbs.compacto span{font-size:11px;padding:5px 9px}
.crumbs span i{font-style:normal;font-weight:500;color:var(--tx3);font-size:10.5px;margin-left:5px}
.crumbs span.fim{background:var(--acc);border-color:var(--acc);color:#0B0D12}
.crumbs span.fim i{color:rgba(0,0,0,.55)}
.crumbs em{font-style:normal;color:#4A566B;font-size:12px}
/* --------------------------------------------------------- raízes */
.raiz-topo{max-width:var(--max);margin:0 auto;padding:30px 28px 20px;display:flex;gap:34px;
align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
background:radial-gradient(90% 160% at 20% 0%,rgba(201,147,46,.12),transparent 62%)}
.raiz-topo h1{font-size:clamp(28px,4.4vw,40px);line-height:1.06;font-weight:800;letter-spacing:-.03em}
.raiz-topo h1 em{font-style:normal;color:var(--dourado)}
.raiz-topo>div:first-child{flex:1;min-width:300px}
.raiz-topo p{font-size:14.5px;color:var(--tx2);line-height:1.6;margin-top:12px;max-width:640px}
.legenda{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tx2)}
.legenda b{color:#7FA8FF}
.lg-linha{width:42px;border-top:3.5px dashed #2563EB;display:inline-block}
.seletor{flex:none;background:var(--surf);border:1px solid #2A3242;border-radius:11px;
padding:15px 17px;width:320px;max-width:100%}
.seletor b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--tx2);font-weight:800;margin-bottom:9px}
.seletor select{width:100%;background:#0E131B;border:1.6px solid var(--acc);border-radius:8px;
padding:12px 14px;font-size:15px;font-weight:700;color:#fff;font-family:inherit}
.seletor .dica{font-size:11px;color:var(--tx2);line-height:1.5;margin-top:9px}
.seletor .dica a{color:var(--dourado);font-weight:700}
.aviso-galho{max-width:var(--max);margin:0 auto;padding:14px 20px;
background:#20242E;border:1px solid #333B4B;border-radius:10px;font-size:13px;
color:#B9C0CB;line-height:1.6}
.aviso-galho b{color:#fff;display:block;margin-bottom:3px}
.painel-arvore{max-width:var(--max);margin:16px auto 0;border-radius:14px;overflow:hidden;
border:1px solid #2A3242;background:#F5EFE3}
.painel-cab{background:linear-gradient(#E9DFC9,#DFD3B8);border-bottom:1px solid #C9BB9C;
padding:11px 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.painel-cab b{font-size:15px;font-weight:900;letter-spacing:.08em;color:#3A2C18}
.painel-cab span{font-size:11.5px;color:#7A6845}
.painel-pe{background:#E9DFC9;border-top:1px solid #C9BB9C;padding:9px 20px;display:flex;
align-items:center;gap:18px;font-size:10.5px;color:#6B5A3A;font-weight:600;flex-wrap:wrap}
.painel-pe .sq{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;
font-style:normal}
.painel-pe .obs{margin-left:auto;font-weight:500;font-style:italic;color:#8A7856}
.painel-pe .obs b{font-style:normal;font-weight:800;color:#5A4A2E}
/* o palco tem 1400px fixos; encolhe junto com a tela */
.palco-caixa{overflow-x:auto}
.secao{max-width:var(--max);margin:26px auto 0;padding:0 28px}
.secao-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.secao-cab i{width:5px;height:19px;border-radius:3px;background:var(--dourado);flex:none;align-self:center}
.secao-cab h2{font-size:19px;font-weight:800;letter-spacing:-.02em}
.secao-cab span{font-size:12px;color:var(--tx2)}
.solas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.sola-card{background:var(--surf);border:1px solid #2A3242;border-radius:10px;overflow:hidden}
.sola-card header{background:linear-gradient(#241C10,#181309);border-bottom:1px solid #33291A;
padding:10px 12px}
.sola-card header b{display:block;font-size:14.5px;font-weight:800;color:var(--dourado)}
.sola-card header span{display:block;font-size:10px;color:#9A8A6A;margin-top:2px}
.sola-card p{padding:10px 12px 12px;font-size:11.5px;color:#B9C0CB;line-height:1.55}
.ordem{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap}
.ordem-no{flex:1;min-width:150px;background:#0E131B;border:1px solid #262E3D;border-radius:8px;
padding:11px 12px}
.ordem-no b{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
color:#C9932E;font-weight:800;margin-bottom:5px}
.ordem-no strong{display:block;font-size:13px;font-weight:800}
.ordem em{align-self:center;color:#4A566B;font-style:normal}
.tempo{display:flex;gap:0;position:relative;padding-top:22px;overflow-x:auto}
.tempo::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;
background:linear-gradient(90deg,#C9932E,#4F9A78)}
.marco{flex:1;min-width:104px;position:relative;padding-right:10px}
.marco::after{content:"";position:absolute;left:0;top:-19px;width:11px;height:11px;
border-radius:50%;background:var(--bg);border:2.5px solid #C9932E}
.marco.meu::after{border-color:var(--acc);background:var(--acc);
box-shadow:0 0 0 4px rgba(232,180,76,.24)}
.marco b{display:block;font-size:13px;font-weight:800}
.marco.meu b{color:var(--acc)}
.marco span{display:block;font-size:10.5px;color:#B9C0CB;line-height:1.4;margin-top:3px;font-weight:600}
.marco span i{display:block;font-style:normal;font-weight:400;color:var(--tx3);font-size:9.5px;margin-top:2px}
.cta-final{max-width:var(--max);margin:26px auto 0;padding:18px 22px;display:flex;gap:20px;
align-items:center;background:var(--surf);border:1px solid #2A3242;border-radius:11px;flex-wrap:wrap}
.cta-ic{width:44px;height:44px;border-radius:11px;background:var(--acc);color:#0B0D12;flex:none;
display:grid;place-items:center;font-size:20px}
.cta-final b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.cta-final p{font-size:12.5px;color:var(--tx2)}
.cta-final .btn{margin-left:auto}
.ressalvas{max-width:var(--max);margin:26px auto 0;padding:18px 22px;background:#181410;
border:1px solid #3A2E18;border-radius:11px}
.ressalvas h3{font-size:14px;font-weight:800;color:var(--dourado);margin-bottom:11px}
.ressalvas ul{list-style:none}
.ressalvas li{font-size:12.5px;color:#B0A88F;line-height:1.6;padding:5px 0 5px 16px;position:relative}
.ressalvas li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;
border-radius:50%;background:#8A6A2E}
.ressalvas b{color:#E4D5B4}
/* ------------------------------------------------ páginas simples */
.pagina{max-width:900px;margin:0 auto;padding:40px 28px}
.pagina.centrado{text-align:center;padding-top:70px}
.pagina h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.chamada{font-size:16px;color:var(--tx2);line-height:1.65;margin-top:14px;max-width:680px}
.pagina.centrado .chamada{margin:14px auto 22px}
.aviso-forte{margin:22px 0;padding:16px 18px;background:#1A2130;border:1px solid #2E3849;
border-left:4px solid var(--dourado);border-radius:8px;font-size:13.5px;color:#B9C0CB;line-height:1.65}
.aviso-forte b{display:block;color:#fff;margin-bottom:4px}
.apoio-caixas,.crit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
/* A chave Pix em UMA linha. Quebrada em duas, quem lê perde a conta
de onde termina — e chave de pagamento lida errado é dinheiro indo
para o lugar errado. O tamanho encolhe conforme a caixa aperta, e
se ainda assim não couber, ela rola de lado em vez de quebrar. */
.pix-chave{font-size:12px;color:var(--tx2);line-height:1.8}
.pix-chave > b{display:block;margin-top:4px;color:#fff;
font-family:ui-monospace,Consolas,monospace;
font-size:clamp(10.5px,3.6vw,14px);
white-space:nowrap;overflow-x:auto;letter-spacing:-.01em}
.pix-chave > b::-webkit-scrollbar{height:4px}
.pix-chave > b::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:2px}
.nota{font-size:11.5px;color:var(--tx3);line-height:1.6;margin-top:10px}
.nota code{background:#1C2330;padding:1px 5px;border-radius:4px;font-size:11px}
.formulario{margin-top:24px;display:grid;gap:16px;max-width:560px}
.formulario label{display:grid;gap:7px;font-size:13px;font-weight:600;color:#C6CCD6}
.formulario select,.formulario input,.formulario textarea{background:var(--surf2);
border:1px solid var(--linha);border-radius:8px;padding:11px 13px;color:#fff;
font-family:inherit;font-size:14px;width:100%}
.formulario textarea{resize:vertical}
.formulario button{justify-self:start;cursor:pointer;font-family:inherit}
/* --------------------------------------------------------- rodapé */
.rodape{margin-top:50px;background:#070910;border-top:1px solid var(--linha);padding:34px 28px 22px}
/* Cinco colunas agora: entrou a da conta. O repeat(auto-fit) evita
ter de contar coluna à mão toda vez que uma seção nasce — foi
trocar de quatro para cinco e a grade de largura fixa espremeria
todas. */
.rod-grid{max-width:var(--max);margin:0 auto;display:grid;
grid-template-columns:1.6fr repeat(4,minmax(120px,1fr));gap:30px}
.rod-grid p{font-size:12.5px;color:var(--tx2);line-height:1.7;margin-top:12px}
.rod-grid .aviso{color:var(--tx3);font-size:11.5px}
.rod-grid .aviso b{color:#B9C0CB}
.rod-grid h6{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado);
font-weight:800;margin-bottom:12px}
.rod-grid a{display:block;font-size:12.5px;color:var(--tx2);padding:3px 0}
.rod-grid a:hover{color:#fff}
.rod-fim{max-width:var(--max);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--linha);
display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--tx3);flex-wrap:wrap}
.rod-fim a{color:var(--tx2)}
/* -------------------------------------------------------- celular */
@media (max-width:900px){
.ficha-grid{grid-template-columns:1fr}
.rod-grid{grid-template-columns:1fr 1fr}
.hero-num{position:static;margin-top:22px}
.hero{padding:28px 20px}
.topo{padding:12px 18px;gap:14px}
.topo nav{order:3;width:100%;gap:16px;font-size:13px}
.trilho,.secao,.migalha,.pagina{padding-left:18px;padding-right:18px}
}
@media (max-width:560px){
.rod-grid{grid-template-columns:1fr}
.ficha-id{margin-top:-60px}
.ficha-logo{width:72px;height:72px}
}
/* ================= HOME ================= */
.hero-inicio{min-height:480px}
.hero-inicio h1{font-size:clamp(34px,5.6vw,58px)}
/* o que este site é */
.oque{max-width:var(--max);margin:34px auto 0;padding:0 28px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.oq{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:18px 20px}
.oq i{font-style:normal;font-size:26px;display:block;margin-bottom:10px}
.oq b{display:block;font-size:16px;font-weight:800;margin-bottom:6px}
.oq span{display:block;font-size:13px;color:var(--tx2);line-height:1.6}
/* grade das doutrinas */
.dgrade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px}
.dcard{background:var(--surf);border:1px solid var(--linha);border-radius:12px;overflow:hidden;
border-top:4px solid var(--c);transition:transform .15s,border-color .15s;display:block}
.dcard:hover{transform:translateY(-3px);border-color:var(--c)}
.dcard header{display:flex;align-items:center;gap:11px;padding:15px 17px 10px}
.dcard header i{font-style:normal;font-size:24px;width:40px;height:40px;flex:none;border-radius:10px;
background:var(--c);display:grid;place-items:center}
.dcard header b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.dcard header span{display:block;font-size:11px;color:var(--tx2);margin-top:2px}
.dcard p{padding:0 17px;font-size:12.5px;color:#B9C0CB;line-height:1.6;min-height:60px}
.dcard u{display:block;text-decoration:none;padding:12px 17px 15px;font-size:12px;
font-weight:700;color:var(--c);filter:brightness(1.45)}
/* chamada da árvore */
.chamada-arvore{max-width:var(--max);margin:38px auto 0;padding:28px 30px;border-radius:14px;
background:radial-gradient(110% 150% at 10% 0%,rgba(232,180,76,.13),transparent 60%),
linear-gradient(#161C26,#11161E);border:1px solid #2A3242;
display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center}
.ca-txt h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
margin-bottom:12px}
.ca-txt p{font-size:13.5px;color:var(--tx2);line-height:1.7;margin-bottom:20px}
.ca-mini{display:flex;flex-direction:column;align-items:center;gap:0}
.ca-mini span{background:#0E131B;border:1px solid var(--linha);border-radius:7px;
padding:8px 14px;font-size:12px;font-weight:700;color:#D6DCE6;width:100%;text-align:center}
.ca-mini span.fim{background:var(--dourado);border-color:var(--dourado);color:#1A1206}
.ca-mini em{font-style:normal;color:#4A566B;font-size:12px;line-height:1.5}
@media (max-width:900px){
.chamada-arvore{grid-template-columns:1fr;gap:22px}
.oque,.dgrade{padding-left:0;padding-right:0}
}
/* ================= PÁGINA DE DOUTRINA ================= */
.dt-topo{max-width:940px;margin:0 auto;padding:26px 28px 20px}
.dt-selo{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;padding:5px 12px;border-radius:6px;color:#fff;margin-bottom:14px}
.dt-topo h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.dt-sub{font-size:16px;color:var(--tx2);margin-top:10px;font-weight:300}
.dt-fatos{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
border-top:1px solid var(--linha)}
.dt-fatos b{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--acc);font-weight:800;margin-bottom:4px}
.dt-fatos span{font-size:13.5px;color:#C6CCD6}
.dt-grid{max-width:1180px;margin:24px auto 0;padding:0 28px;
display:grid;grid-template-columns:1.75fr 1fr;gap:26px;align-items:start}
.dt-corpo .bl{margin-bottom:22px}
.dt-corpo .bl u{text-decoration:none;display:block;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--acc);font-weight:800;margin-bottom:8px}
.dt-corpo .bl p{font-size:16px;line-height:1.75;color:#D2D8E1}
.dt-anterior{display:flex;align-items:center;gap:13px;background:var(--surf);
border:1px solid var(--linha);border-left:4px solid var(--c);border-radius:10px;padding:13px 16px}
.dt-anterior:hover{border-color:var(--c)}
.dt-anterior>span{font-size:22px}
.dt-anterior b{display:block;font-size:15px;font-weight:800}
.dt-anterior i{font-style:normal;font-size:11.5px;color:var(--tx2)}
.dt-anterior em{margin-left:auto;font-style:normal;font-size:12px;color:var(--tx2);font-weight:700}
.dt-ressalva{background:#2A2011;border:1px solid #4A3818;border-left:4px solid var(--dourado);
border-radius:10px;padding:16px 18px;margin:26px 0}
.dt-ressalva b{display:block;font-size:13.5px;color:var(--dourado);font-weight:800;margin-bottom:6px}
.dt-ressalva p{font-size:14px;color:#C8BC9E;line-height:1.7}
/* ------------------------------------------- o dia a dia da fe */
/* Costume nao e doutrina: por isso este bloco tem cara propria,
separado dos blocos de crenca, e nunca acima deles. */
.dt-vida{margin:30px 0;padding:20px 22px;background:var(--surf);
border:1px solid var(--linha);border-radius:12px}
.dt-vida>u{text-decoration:none;display:block;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--acc);font-weight:800;margin-bottom:14px}
.vida-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.vida-item{background:var(--surf2);border:1px solid var(--linha);border-radius:9px;padding:14px 15px}
.vida-item b{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.05em;
text-transform:uppercase;color:var(--tx2);font-weight:800;margin-bottom:7px}
.vida-item b span{font-size:15px}
.vida-item p{font-size:14px;line-height:1.7;color:#CBD2DC}
.dt-vida .obs{font-size:11.5px;color:var(--tx3);line-height:1.6;margin-top:14px;font-style:italic}
.dt-sabia{background:#12202A;border:1px solid #1E3A4A;border-left:4px solid var(--ok);
border-radius:10px;padding:16px 18px;margin:26px 0}
.dt-sabia b{display:block;font-size:13.5px;color:var(--ok);font-weight:800;margin-bottom:6px}
.dt-sabia p{font-size:15px;color:#BFD2DE;line-height:1.75}
.dt-fala{margin:26px 0}
.dt-fala u{text-decoration:none;display:block;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--tx2);font-weight:800;margin-bottom:11px}
.chips.fala{display:flex;flex-wrap:wrap;gap:7px}
.chips.fala span{background:transparent;border:1px dashed var(--linha);border-radius:6px;
padding:6px 12px;font-size:13px;color:#A9B2C0;font-weight:600}
.dt-fala .obs{font-size:11.5px;color:var(--tx3);line-height:1.6;margin-top:11px;font-style:italic}
.dt-igrejas{margin-top:30px;padding-top:22px;border-top:2px dashed #2A3242}
.dt-igrejas u{text-decoration:none;display:block;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--tx2);font-weight:800;margin-bottom:12px}
.dt-igrejas .chips{display:flex;flex-wrap:wrap;gap:8px}
.dt-igrejas .chips span{background:var(--surf2);border:1px solid var(--linha);border-radius:999px;
padding:8px 15px;font-size:13px;color:#C6CCD6;font-weight:600}
.dt-igrejas .obs{font-size:11.5px;color:var(--tx3);line-height:1.6;margin-top:12px;font-style:italic}
.dt-lado .caixa h4{margin-bottom:12px}
.dt-trilha{display:flex;flex-direction:column;align-items:stretch}
.dt-trilha a{background:#0E131B;border:1px solid var(--linha);border-left:3px solid var(--c);
border-radius:7px;padding:8px 11px;font-size:12.5px;font-weight:700;color:#D6DCE6}
.dt-trilha a:hover{border-color:var(--c)}
.dt-trilha a i{font-style:normal;font-weight:500;color:var(--tx3);font-size:10.5px;margin-left:6px}
.dt-trilha a.aqui{background:var(--acc);border-color:var(--acc);color:#0B0D12}
.dt-trilha a.aqui i{color:rgba(0,0,0,.55)}
.dt-trilha em{font-style:normal;color:#3E4759;font-size:11px;text-align:center;line-height:1.4}
.dt-filhas{display:flex;flex-direction:column;gap:8px}
.dt-filhas a{display:flex;align-items:center;gap:10px;background:#0E131B;border:1px solid var(--linha);
border-left:3px solid var(--c);border-radius:8px;padding:9px 12px}
.dt-filhas a:hover{border-color:var(--c)}
.dt-filhas span{font-size:18px}
.dt-filhas b{display:block;font-size:13px;font-weight:700}
.dt-filhas i{font-style:normal;font-size:10.5px;color:var(--tx2)}
@media (max-width:900px){ .dt-grid{grid-template-columns:1fr} }
/* Sem JavaScript o seletor vira lista de links. Ninguém fica de fora. */
.seletor-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.seletor-links a{border:1px solid var(--linha);border-radius:6px;padding:5px 10px;
font-size:12.5px;color:var(--tx2);font-weight:600}
.seletor-links a:hover{border-color:var(--acc);color:var(--tx)}
/* QR do Pix: fundo branco sempre, senão o leitor do celular não lê. */
.pix-qr{background:#fff;border-radius:10px;padding:10px;margin:0 auto 14px}
/* A chave aleatória é longa demais para digitar à mão. */
.btn.copiar{display:block;width:100%;margin-top:10px;font-size:13px;padding:9px}
/* ------------------------------------------ carrossel do topo */
/* A faixa é n vezes mais larga que a tela e desliza de lado. Como
é transform, o navegador anima na placa de vídeo e não repinta
a página inteira a cada quadro. */
.hero-carrossel{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-carrossel .faixa{display:flex;height:100%;width:calc(100% * var(--n));
animation:desliza calc((var(--n) - 1) * 6s) infinite}
.hero-carrossel img{flex:none;width:calc(100% / var(--n));height:100%;
object-fit:cover;object-position:center}
/* Movimento de fundo enjoa e atrapalha muita gente. Quem pediu menos
movimento no próprio sistema vê a primeira foto, parada. */
@media (prefers-reduced-motion:reduce){
.hero-carrossel .faixa{animation:none}
}
/* ---------------------------------- a linha do tempo cabe? não cabe */
/* São 19 marcos de 104px: quase o dobro da largura da tela. A rolagem
sempre existiu, mas era MUDA — e rolagem muda é corte: metade da
história ficava escondida sem ninguém desconfiar. Justamente a
metade onde entraram Trento e o Vaticano II.
Agora a borda apaga e uma linha avisa. */
.tempo-jan{position:relative}
.tempo-jan::after{content:"";position:absolute;right:0;top:0;bottom:18px;width:64px;
background:linear-gradient(90deg,rgba(11,13,18,0),var(--bg));pointer-events:none}
.tempo-dica{font-size:11px;color:var(--tx3);margin-top:10px;font-style:italic}
/* -------------------------------------------- os livros da tradição */
/* Cada parágrafo é uma camada da biblioteca, e a separação entre eles
é parte da explicação — por isso respiram mais que texto corrido. */
.dt-livros{margin:26px 0;padding:20px 22px;background:var(--surf);
border:1px solid var(--linha);border-left:4px solid var(--acc);border-radius:12px}
.dt-livros u{text-decoration:none;display:block;font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--acc);font-weight:800;margin-bottom:12px}
.dt-livros p{font-size:15px;line-height:1.75;color:#D2D8E1}
.dt-livros p + p{margin-top:12px;padding-top:12px;border-top:1px dashed var(--linha)}
/* Marcos da raiz judaica na linha do tempo.
A história judaica não parou quando o cristianismo começou — e a
cronologia mostrava exatamente isso, porque não tinha um só marco
judeu depois de Abraão. Agora tem, e com a cor da raiz, para o olho
ver DUAS linhas correndo e não uma substituindo a outra. */
.marco.raiz::after{border-color:#B08A4A;background:#7A5A2E}
.marco.raiz b{color:#C9932E}
/* ===================================================================
O CALENDÁRIO JUDAICO
O judaísmo santifica o tempo, não o lugar — então esta página é,
ela mesma, o argumento: o ano inteiro à vista, com forma e nome.
=================================================================== */
.cal-topo{max-width:820px;margin:34px auto 0;padding:0 28px}
.cal-topo h1{font-size:clamp(30px,4.4vw,46px);font-weight:900;letter-spacing:-.02em;
line-height:1.06;margin:10px 0 14px}
.cal-regras{max-width:1180px;margin:26px auto 0;padding:0 28px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.cal-regra{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:16px 18px}
.cal-regra b{display:block;font-size:14px;font-weight:800;margin-bottom:7px}
.cal-regra span{font-size:13px;line-height:1.65;color:var(--tx2)}
.cal-regra i{font-style:italic;color:#C9B27E}
/* O shabat vem antes de tudo porque Levítico 23 o lista primeiro. */
.cal-shabat{max-width:1180px;margin:22px auto 0;padding:20px 22px;display:flex;gap:18px;
align-items:flex-start;background:#2A2011;border:1px solid #4A3818;
border-left:4px solid var(--dourado);border-radius:12px}
.cal-shabat .cal-sh-ic{font-size:30px;line-height:1;flex:none}
/* só o TÍTULO do bloco é bloco. Os dentro do parágrafo têm de
continuar inline, senão a frase quebra em três pedaços. */
.cal-shabat > div > b{display:block;font-size:16px;color:var(--dourado);font-weight:800;margin-bottom:6px}
.cal-shabat p b{color:#E4D3A8;font-weight:800}
.cal-shabat p{font-size:14.5px;line-height:1.75;color:#C8BC9E}
.cal-legenda{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 18px;font-size:12px;color:var(--tx2)}
.cal-legenda span{display:flex;align-items:center;gap:7px}
.pt{width:9px;height:9px;border-radius:50%;flex:none}
.pt.tora{background:var(--dourado)}
.pt.sabios{background:#3FA9F5}
.pt.jejum{background:#6B7280}
.pt.moderna{background:#0D9488}
.cal-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.cal-mes{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:16px 18px}
.cal-mes.vazio{background:transparent;border-style:dashed}
.cal-mes header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--linha)}
.cal-mes.vazio header{border-bottom:0;margin-bottom:6px}
.cal-mes header b{font-size:18px;font-weight:900;letter-spacing:-.01em}
.cal-mes header i{font-style:normal;font-size:11.5px;color:var(--tx3)}
.cal-mes header u{text-decoration:none;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
color:var(--dourado);font-weight:800;border:1px solid #4A3818;border-radius:999px;padding:3px 9px}
.cal-festas{display:flex;flex-direction:column;gap:12px}
.cal-festa{border-left:3px solid var(--linha);padding-left:12px}
.cal-festa.tora{border-color:var(--dourado)}
.cal-festa.sabios{border-color:#3FA9F5}
.cal-festa.jejum{border-color:#6B7280}
.cal-festa.moderna{border-color:#0D9488}
.cal-festa b{display:flex;align-items:baseline;gap:9px;font-size:14.5px;font-weight:800;margin-bottom:4px}
.cal-dia{font-size:11px;font-weight:700;color:var(--tx3);background:var(--surf2);
border-radius:5px;padding:2px 7px;flex:none}
.cal-festa p{font-size:13px;line-height:1.68;color:#BCC4D0}
.cal-nota{font-size:12px;line-height:1.6;color:var(--tx3);font-style:italic;margin-top:10px}
.cal-fecha{max-width:640px;margin:24px auto 0;text-align:center;font-size:14px;
color:var(--tx2);font-style:italic;line-height:1.7}
.cal-avisos{max-width:1180px;margin:34px auto 0;padding:0 28px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cal-voltar{max-width:1180px;margin:30px auto 60px;padding:0 28px;
display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* o link do calendário, dentro do bloco "no dia a dia" */
.vida-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--acc)}
.vida-link:hover{text-decoration:underline}
/* "Por que não começa em janeiro?" — a pergunta que o próprio dono do
projeto fez ao ver a página. Se ele tropeçou, o visitante tropeça:
por isso a resposta vem ANTES dos meses, e não numa nota lá embaixo. */
.cal-porque{background:var(--surf2);border:1px solid var(--linha);
border-left:4px solid var(--ok);border-radius:12px;padding:18px 20px;margin:0 0 20px}
/* O SELETOR TEM DE SER FILHO DIRETO. Já errei isto duas vezes hoje:
"b:first-child" também casa com o primeiro de dentro de cada
, e a frase quebra em pedaços na tela. */
.cal-porque > b:first-child{display:block;font-size:15px;color:var(--ok);
font-weight:800;margin-bottom:9px}
.cal-porque p b{color:#BBD6EA;font-weight:800}
.cal-porque p{font-size:14px;line-height:1.75;color:#C3CBD6}
.cal-porque p + p{margin-top:9px}
.cal-porque i{color:#9FB4C4}
.cal-pq-nota{font-size:12.5px;color:var(--tx3);border-top:1px dashed var(--linha);
padding-top:10px;margin-top:12px}
/* ------------------------------------- a leitura da Torá por semana */
.cal-intro{max-width:820px;font-size:15px;line-height:1.75;color:#CBD2DC;margin-bottom:20px}
.cal-livros{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cal-livro{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:15px 17px}
.cal-livro header{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.cal-livro header b{font-size:16px;font-weight:900}
.cal-livro header i{font-style:normal;font-size:12px;color:var(--tx3)}
.cal-livro header u{text-decoration:none;margin-left:auto;font-size:10.5px;color:var(--tx3)}
.cal-porcoes{display:flex;flex-wrap:wrap;gap:6px}
.cal-porcoes span,.cal-porcoes a{font-size:12.5px;padding:4px 10px;border-radius:6px;
background:var(--surf2);border:1px solid var(--linha);color:#BCC4D0}
/* as que entram em par duplo ganham a borda tracejada — é o sinal de
que às vezes elas vêm sozinhas e às vezes coladas na vizinha */
.cal-porcoes span.par,.cal-porcoes a.par{border-style:dashed;border-color:#5A6B4A;color:#C4D1B4}
/* a pastilha que virou link leva ao texto da porção; a que continua
é a que ainda não tem texto conferido */
.cal-porcoes a{color:#DDE3EC}
.cal-porcoes a:hover{border-color:#7FAE66;background:#1E2A19;color:#C4D1B4}
.cal-dupla{margin-top:20px;background:#1A2417;border:1px solid #2E3E28;
border-left:4px solid #6B9E55;border-radius:12px;padding:18px 20px}
.cal-dupla > b{display:block;font-size:14.5px;color:#9CC97F;font-weight:800;margin-bottom:9px}
.cal-dupla p{font-size:14px;line-height:1.75;color:#C2CDBA}
.cal-dupla p + p{margin-top:9px}
.cal-pares{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cal-pares span{font-size:12.5px;padding:5px 11px;border-radius:6px;
background:rgba(107,158,85,.12);border:1px dashed #4E6A3E;color:#C4D1B4;font-weight:600}
.cal-pares em{font-style:normal;color:#7FAE66;font-weight:800}
.cal-dupla .cal-nota{border-top:1px dashed #2E3E28;padding-top:10px;margin-top:12px}
/* A data de hoje e as datas do ano corrente.
Só aparecem com JavaScript ligado, e são calculadas no navegador:
num site estático, data escrita na geração estaria velha amanhã.
Sem script, a forma do ano continua inteira — que é o que ensina. */
.cal-hoje{max-width:1180px;margin:20px auto 0;padding:14px 20px;
background:var(--surf2);border:1px solid var(--linha);border-radius:12px;
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cal-hoje b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.cal-hoje span{font-size:14px;color:var(--tx)}
.cal-hoje i{font-style:normal;font-size:15px;font-weight:800;color:var(--dourado)}
.cal-hoje u{text-decoration:none;margin-left:auto;font-size:11.5px;color:var(--tx3);font-style:italic}
.cal-quando{display:block;font-size:11.5px;font-weight:700;color:var(--acc);margin:3px 0 5px}
/* A porção da semana. Calculada no navegador, e conferida por dez
travas em testes/parasha.js — cinco delas âncoras da tradição que
NÃO entraram na construção da conta. */
.cal-parasha{max-width:1180px;margin:12px auto 0;padding:16px 20px;
background:#1A2417;border:1px solid #2E3E28;border-left:4px solid #6B9E55;
border-radius:12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cal-parasha b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7FAE66}
.cal-parasha span{font-size:20px;font-weight:900;color:#C4D1B4;letter-spacing:-.01em}
.cal-parasha i{font-style:normal;font-size:13px;color:#8FA382}
.cal-parasha u{text-decoration:none;margin-left:auto;font-size:11.5px;color:#7FAE66;
border:1px dashed #4E6A3E;border-radius:6px;padding:4px 10px}
/* O trecho da semana, já convertido para a numeração da Almeida.
A Bíblia hebraica e a brasileira não contam os versículos igual em
alguns pontos da Torá — sem converter, o leitor abriria no lugar
errado sem perceber. Ver app/publico/js/torah-trechos.js. */
.cal-trecho{max-width:1180px;margin:10px auto 0;padding:14px 20px;
background:var(--surf2);border:1px solid var(--linha);border-radius:12px;
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cal-trecho b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.cal-trecho span,.cal-trecho a{font-size:16px;font-weight:800;color:var(--tx)}
.cal-trecho :is(span,a) + :is(span,a)::before{content:"·";color:var(--tx3);
margin:0 10px 0 -4px;font-weight:400}
/* o trecho vira link quando o texto daquela porcao ja esta no site */
.cal-trecho a{text-decoration:underline;text-decoration-color:var(--tx3);
text-underline-offset:4px}
.cal-trecho a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.cal-trecho i{font-style:italic;font-size:11.5px;color:var(--tx3);margin-left:auto}
/* =====================================================================
"NO MUNDO {tradição}" — o que aquela tradição lê, ouve e acompanha
=====================================================================
Publicado pelo moderador, no painel local. Aparece SÓ dentro da
página da doutrina — nunca na home, na árvore ou no mapa. O site não
tem página de material: cada mundo tem o dele. Ver app/material.js.
===================================================================== */
.dt-mundo{margin-top:26px;padding:17px 20px;border-radius:var(--raio);
background:var(--surf);border:1px solid var(--linha);
border-left:3px solid var(--acc)}
.dt-mundo > u{display:block;text-decoration:none;font-size:13px;color:var(--acc);
font-weight:600}
.mn-sub{margin:4px 0 13px;font-size:12px;color:var(--tx3)}
.mn-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.mn-item{display:block;padding:11px 13px;border-radius:8px;background:#0C1016;
border:1px solid var(--linha)}
.mn-item:hover{border-color:var(--acc)}
.mn-item > u{display:inline-block;text-decoration:none;font-size:9.5px;letter-spacing:.09em;
text-transform:uppercase;padding:2px 8px;border-radius:4px;margin-bottom:6px;
background:var(--surf2);color:var(--tx2)}
.mn-item > b{display:block;font-size:13.5px;color:var(--tx);font-weight:600;line-height:1.4}
.mn-item > span{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px}
.mn-item > i{display:block;font-style:normal;font-size:11.5px;color:var(--tx2);
margin-top:6px;line-height:1.55}
.dt-mundo .obs{margin-top:12px;font-size:11.5px;color:var(--tx3);line-height:1.6}
.dt-mundo .obs b{color:var(--tx2)}
/* =====================================================================
AS FOTOS DE UMA TRADIÇÃO
=====================================================================
Cadastradas no painel, com a origem do direito declarada. O crédito
sai à vista sempre: foto sem crédito na tela é foto que parece nossa,
e quase nenhuma é. Ver app/painel/fotos.js.
===================================================================== */
.dt-fotos{margin-top:24px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px}
.dt-fotos figure{margin:0;border-radius:var(--raio);overflow:hidden;
background:var(--surf);border:1px solid var(--linha)}
.dt-fotos img{display:block;width:100%;height:190px;object-fit:cover}
.dt-fotos figcaption{padding:10px 13px}
.dt-fotos figcaption b{display:block;font-size:12.5px;color:var(--tx);font-weight:600;
line-height:1.45}
.dt-fotos figcaption span{display:block;font-size:11px;color:var(--tx3);margin-top:3px}
/* =====================================================================
O FORMULÁRIO DE CORREÇÃO — a isca e o aviso
=====================================================================
.isca é o campo que pessoa nenhuma vê e robô preenche. Fica fora da
tela em vez de display:none porque robô bom ignora o que está
escondido — e leitor de tela pula pelo aria-hidden no pai.
===================================================================== */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-erro{margin:0 0 18px;padding:12px 15px;border-radius:var(--raio);
background:#1F1417;border:1px solid #5A3038}
.aviso-erro > b{display:block;font-size:13.5px;color:#E0A0A0;font-weight:600}
.aviso-erro > span{display:block;font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.55}
/* =====================================================================
A FAIXA DE OBRA
=====================================================================
Fica no topo de todas as páginas enquanto o site não estiver inteiro.
Para tirar: apague o bloco .obra em app/paginas/layout.js.
Pisca de leve, e só o nome — o recado com o e-mail fica parado, para
dar tempo de ler. E o piscar PARA para quem pediu menos movimento no
sistema: texto pulsando forte atrapalha quem tem sensibilidade a luz,
e esta faixa existe para avisar, não para incomodar.
===================================================================== */
.obra{display:flex;align-items:center;justify-content:center;gap:10px;
flex-wrap:wrap;text-align:center;
padding:9px 16px;background:#2A1D08;border-bottom:1px solid #5A4318;
font-size:12.5px;line-height:1.5;
/* Gruda no topo e NAO sai da tela, mesmo descendo a pagina. O z-index
e maior que o do cabecalho (50) porque a faixa fica ACIMA dele. */
position:sticky;top:0;z-index:60}
.obra > b{flex:none;font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#0A0C11;background:var(--dourado);
padding:3px 10px;border-radius:20px;
animation:obra-pisca 1.6s ease-in-out infinite}
.obra > span{color:#D9C79A}
.obra a{color:var(--dourado);text-decoration:underline;
text-underline-offset:2px;white-space:nowrap}
.obra a:hover{color:#fff}
@keyframes obra-pisca{
0%,100%{opacity:1}
50%{opacity:.35}
}
@media (prefers-reduced-motion:reduce){
.obra > b{animation:none}
}
@media (max-width:600px){
.obra{font-size:11.5px;padding:8px 12px;gap:7px}
}
/* O convite para levar o capítulo ao caderno de caligrafia. */
.bb-caligrafia{margin:26px 0 8px;padding:16px 18px;border-radius:var(--raio);
background:var(--surf);border:1px solid var(--linha);
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bb-caligrafia > span{font-size:12.5px;color:var(--tx3);line-height:1.55;flex:1;min-width:200px}
/* =====================================================================
AS TRÊS TELAS
=====================================================================
Um HTML, três desenhos. Não é o computador encolhendo: é a barra
saindo de cima e indo para baixo, a coluna virando tela, o passar do
mouse virando toque.
celular até 700 um polegar, uma coluna, barra embaixo
tablet 700–1024 duas mãos, dedo, e a orientação muda tudo
computador 1024+ mouse, teclado, várias colunas
Largura sozinha não basta: um notebook com tela sensível ao toque
tem 1400 pontos e não tem mouse. Por isso as regras de alvo grande
perguntam pelo PONTEIRO, não pela largura.
===================================================================== */
/* ------------------------------------------------- a barra de baixo */
.baixo{display:none}
@media (max-width:700px){
.baixo{
display:grid;grid-template-columns:repeat(4,1fr);
position:fixed;left:0;right:0;bottom:0;z-index:70;
background:rgba(11,13,18,.96);backdrop-filter:blur(10px);
border-top:1px solid var(--linha);
/* a barrinha do iPhone come o rodapé se a gente não reservar */
padding-bottom:env(safe-area-inset-bottom,0)}
.baixo a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
/* 44 pontos é o mínimo para o dedo. Abaixo disso erra o alvo. */
min-height:52px;padding:7px 2px;
color:var(--tx3);text-decoration:none;font-size:10.5px;letter-spacing:.01em;
-webkit-tap-highlight-color:transparent}
.baixo a.aqui{color:var(--dourado)}
.baixo a > svg{flex:none}
/* o conteúdo não pode terminar embaixo da barra */
body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
/* o menu de cima some: quem navega é a barra de baixo */
.topo nav{display:none}
.topo{padding:10px 14px;gap:10px}
.topo-dir{margin-left:auto}
.btn-pill{font-size:12px;padding:7px 13px;min-height:38px}
/* o rodapé vira uma coluna só, e o de links some — está tudo na
barra de baixo. Rodapé de quatro colunas no celular é rolagem
que ninguém lê. */
.rod-grid{grid-template-columns:1fr;gap:22px}
}
/* --------------------------------------------------------- o tablet
Nem celular grande, nem computador pequeno. Em pé: uma coluna, mas
com respiro. Deitado: cabe a lateral. E o dedo continua sendo dedo
nos dois casos. */
@media (min-width:701px) and (max-width:1024px){
.topo{padding:12px 20px}
.topo nav{gap:16px;font-size:13.5px}
.rod-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:701px) and (max-width:1024px) and (orientation:portrait){
/* em pé sobra largura para texto e falta para colunas */
.pagina,.dt-grid{max-width:70ch}
}
/* ------------------------------------------- quem toca, não passa o mouse
A pergunta certa não é "é celular?", é "tem mouse?". Notebook com
tela sensível ao toque tem 1400 pontos e dedo. */
@media (hover:none) and (pointer:coarse){
a,button,select,summary,input[type=checkbox],label.cg-marca{min-height:44px}
.topo nav a,.rodape a{padding:6px 0;display:inline-block}
/* nada de efeito de passar o mouse: no toque ele gruda depois do
clique e fica aceso sem motivo */
.t:hover,.mn-item:hover,.dt-anterior:hover{border-color:var(--linha)}
}
/* a barra de baixo nunca sai no papel */
@media print{ .baixo{display:none!important} body{padding-bottom:0!important} }
/* =====================================================================
AS PÁGINAS DE CONTA — item 8 do medidor
=====================================================================
Elas são PHP, mas vestem a mesma casca do resto do site: o
casca-topo.php é gerado pelo mesmo layout() que faz as 1.284
páginas. Dois cabeçalhos seria garantir que um dia mudam só um.
===================================================================== */
/* Formulário de conta é leitura de uma coluna: mais largo que isso e o
olho perde a linha entre um campo e o seguinte. */
.pagina.estreita{max-width:560px}
.dica-campo{display:block;margin-top:5px;font-size:11.5px;line-height:1.55;
color:var(--tx3);font-weight:400}
.feito-php{display:flex;align-items:center;gap:9px;margin:0 0 18px;
padding:12px 15px;border-radius:var(--raio);
background:var(--ok-bg,#101C16);border:1px solid var(--ok,#4E9268);color:var(--ok-cl,#7FC49A)}
.feito-php > b{font-size:13.5px;font-weight:600}
/* A caixa de apagar a conta é vermelha de propósito: é a única ação
do site que não tem volta, e cor é o aviso que se lê sem ler. */
.caixa.perigo{border-color:#5A3038;background:#1A1114}
.caixa.perigo h4{color:#E0A0A0}
.btn.perigo{background:#8B3A42;border-color:#8B3A42;color:#fff}
.btn.perigo:hover{background:#A04751;border-color:#A04751}
/* -------------------------------------------------- quem está dentro
As 1.284 páginas são arquivos iguais para todo mundo — não dá para
escrever "olá, fulano" dentro delas. Então elas perguntam ao
/eu.php e trocam o botão. Enquanto a resposta não chega, fica o
"entrar": é o certo para quem está de fora, que é a maioria. */
.topo-conta{display:flex;align-items:center;gap:10px}
.topo-conta a{font-size:13px;color:var(--tx2);white-space:nowrap}
.topo-conta a:hover{color:var(--tx)}
.topo-conta .eu{display:none;align-items:center;gap:7px;
padding:5px 11px;border:1px solid var(--linha);border-radius:20px;
font-size:12.5px;color:var(--tx)}
.topo-conta.dentro .eu{display:flex}
.topo-conta.dentro .fora{display:none}
.topo-conta .eu i{width:22px;height:22px;border-radius:50%;flex:none;
background:var(--dourado);color:#1A1206;display:grid;place-items:center;
font-style:normal;font-size:11px;font-weight:700}
@media (max-width:700px){
.topo-conta a{font-size:12px}
.topo-conta .eu{padding:4px 9px}
.pagina.estreita{max-width:none}
}
/* =====================================================================
PAPÉIS — quem responde pelo quê (/papeis.php, só moderador)
=====================================================================
Três informações por linha, e a hierarquia é essa mesma: o NOME é o
que se procura, o PAPEL é o que se confere, o e-mail é o que
identifica quando dois nomes forem parecidos. No celular a linha
empilha, porque e-mail não cabe ao lado de nome em 360px e espremer
os dois deixa os dois ilegíveis.
===================================================================== */
.caixa.boa{border-color:#2C4A38;background:#101A14;padding:13px 15px;
font-size:13.5px;color:#BFD8C8;margin:0 0 18px}
.caixa.boa b{color:#fff}
.lista-papeis{list-style:none;margin:14px 0 0;padding:0;
border-top:1px solid var(--linha)}
.lista-papeis > li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
padding:11px 2px;border-bottom:1px solid var(--linha);align-items:baseline}
.lista-papeis > li > b{font-size:14.5px;color:var(--tx);font-weight:500}
.lista-papeis > li > s{text-decoration:none;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--acc,var(--dourado));white-space:nowrap}
.lista-papeis > li > i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--tx3);
word-break:break-all}
@media (max-width:700px){
.lista-papeis > li{grid-template-columns:1fr}
.lista-papeis > li > s{justify-self:start}
}
/* =====================================================================
AS TELAS DE CONTA, DEPOIS DA REVISÃO DO 🙋 DEFENSOR-DO-USUÁRIO
=====================================================================
Ele leu as sete telas e disse: "o texto é bom; a tela some por baixo
do texto". Os consertos abaixo são todos dele, e cada um tem o nome
da cena que ele descreveu.
===================================================================== */
/* 1 · O LINK DE SOCORRO PRECISA PARECER UM LINK
A regra geral do site é a{text-decoration:none} — certo para menu e
para cartão, porque lá o link é o bloco inteiro. Dentro de texto
corrido é o contrário: sem cor e sem sublinhado, "Esqueci a senha"
vira uma frase morta, e a pessoa conclui que o site não tem como
recuperar senha. Era o caso de TODAS as saídas de emergência da
conta — as únicas portas de quem já está perdido. */
.pagina.estreita .nota a,
.pagina.estreita .chamada a,
.pagina.estreita .caixa .texto a,
.pagina.estreita p a,
.dica-campo a{
color:var(--dourado);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
font-weight:500}
.pagina.estreita .nota a:hover,.pagina.estreita p a:hover{color:#F5CE7E}
/* E a .nota some de tão apagada: 11,5px em #5C6473 dá 3,3:1, abaixo do
mínimo legível. Nestas telas ela sobe para um cinza que se lê. */
.pagina.estreita .nota{font-size:12.5px;color:var(--tx2);line-height:1.65}
/* 2 · O TÍTULO DE CADA BLOCO DA MINHA CONTA
O .caixa h4 nasceu como rótulo decorativo de ficha: 10px, maiúsculo,
espaçado. Aqui ele é a ÚNICA forma de saber em que formulário se
está — e são três formulários de senha empilhados. Maiúscula
espaçada de 10px é o pior formato possível para vista cansada:
some o desenho da palavra e sobra um borrão. */
.pagina.estreita .caixa h4{font-size:13px;letter-spacing:.04em;
text-transform:none;font-weight:700;color:var(--tx)}
/* 3 · A AÇÃO PRINCIPAL, NO CELULAR, OCUPA A LINHA
justify-self:start deixa o botão "Criar conta" como uma pastilha
pequena encostada na esquerda, embaixo de campos de largura total.
No telefone, o polegar procura a faixa inteira. */
@media (max-width:700px){
.formulario button{justify-self:stretch;width:100%;justify-content:center;
min-height:48px;font-size:15px}
}
/* 4 · A LISTA DE ERROS
Herdava 16px branco dentro da caixa vermelha, ficando mais chamativa
que o próprio "Não deu". E o campo com problema não era marcado:
com quatro campos, "esse e-mail não parece um e-mail" obrigava a
adivinhar qual dos quatro. */
.aviso-erro ul{font-size:13.5px;line-height:1.6;color:#E8C2C2}
.formulario label.erro > input,.formulario label.erro > select{
border-color:#8B3A42;background:#1A1114}
.formulario label.erro::after{content:"↑ confira este campo";
font-size:11.5px;font-weight:400;color:#E0A0A0}
/* 5 · O "ENTRAR" DO TOPO ERA O MENOR ALVO DA TELA
min-height não faz nada em elemento inline: o Entrar ficava
com uns 15px de altura de toque, a 10px do botão dourado "Apoie o
portal", que tem 38px. No ônibus, com uma mão só, o dedo acerta o
dourado — e cai numa página de doação, num site que faz questão de
dizer que não recebe dízimo. Quem JÁ entrou tinha 44px; quem ainda
não entrou, não. Estava protegido justamente quem não precisava. */
.topo-conta .fora{display:inline-flex;align-items:center;
padding:9px 14px;border:1px solid var(--linha);border-radius:20px;
min-height:38px;color:var(--tx)}
.topo-conta .fora:hover{border-color:var(--linha2);background:var(--surf)}
@media (hover:none) and (pointer:coarse){
.topo-conta .fora,.topo-conta .eu{min-height:44px}
.topo-dir{gap:12px}
}
/* 6 · MOSTRAR A SENHA
Cinco telas pedem senha de dez sinais, digitada às cegas, com o
teclado do celular tomando meia tela — e o cadastro não tem "repita
a senha". Quem erra uma letra no cadastro só descobre dias depois,
ao receber "e-mail ou senha errados" e jurar que digitou certo.
O olhinho resolve os dois casos, e é mais gentil que um segundo
campo para digitar errado de novo. */
.campo-senha{position:relative;display:block}
.campo-senha > input{padding-right:52px!important}
.campo-senha > button{position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:44px;height:44px;display:grid;place-items:center;
background:none;border:0;padding:0;cursor:pointer;color:var(--tx3);
border-radius:8px}
.campo-senha > button:hover{color:var(--tx)}
.campo-senha > button svg{width:19px;height:19px}
/* 7 · O AVISO DE "DEU CERTO" SAÍA COM BORDA AZUL
O .feito-php usava var(--ok,#4E9268), e --ok está definido lá em
cima como #3FA9F5, que é AZUL. O verde do fundo e o verde do texto
brigavam com uma borda azul, e os dois valores de reserva estavam
mortos. Aqui o verde é escrito, não herdado. */
.feito-php{background:#101C16;border-color:#3D6B50;color:#8FCFA8}
.caixa.boa{border-color:#3D6B50}
/* 8 · A ISCA CONTRA ROBÔ
Fica fora da tela, e não com display:none — robô esperto ignora o
que está escondido por display. O nome do campo mudou de "sobrenome"
para algo que navegador nenhum quer preencher: o Chrome preenchia
"Sobrenome" sozinho na barra de autopreenchimento e o cadastro
sumia em silêncio, mostrando "confira o seu e-mail" sem ter criado
conta nenhuma. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* No celular o topo tem 375px e três coisas querendo caber: a marca, o
"Entrar" e o "Apoie o portal". Elas empilhavam uma sobre a outra, e
o dedo que mirava "Entrar" acertava o dourado — caindo numa página
de doação, num site que faz questão de dizer que não recebe dízimo.
No celular o dourado sai do topo: ele continua no rodapé e na home,
e a navegação de verdade do celular é a barra de baixo. */
@media (max-width:700px){
.topo-dir .btn-pill.dourado{display:none}
.topo-conta .fora{padding:10px 16px}
}
/* O canto direito do topo era display:block, então o "Entrar" e o
"Apoie o portal" empilhavam um em cima do outro e o cabeçalho ficava
com 93px de altura em vez de 64. Deitados lado a lado, cabem. */
.topo-dir{display:flex;align-items:center;gap:12px}
/* =====================================================================
A FILA DE CORREÇÕES (/moderar.php, só moderador)
=====================================================================
Cada linha é alguém que parou para escrever ao site dizendo que a
gente errou sobre a fé dele. Por isso não é tabela: é cartão, com o
texto da pessoa em tamanho de leitura, e não em letra de planilha.
O moderador vai ler isto no celular, entre uma coisa e outra.
===================================================================== */
.fila-filtro{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 20px}
.fila-filtro > a{display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border:1px solid var(--linha);border-radius:20px;
font-size:13px;color:var(--tx2);min-height:38px}
.fila-filtro > a:hover{border-color:var(--linha2);color:var(--tx)}
.fila-filtro > a.aqui{border-color:var(--dourado);color:var(--dourado)}
.fila-filtro > a > b{font-size:12px;color:var(--tx3);font-weight:600}
.fila-filtro > a.aqui > b{color:var(--dourado)}
.corr{background:var(--surf);border:1px solid var(--linha);border-radius:var(--raio);
padding:15px 17px;margin-bottom:14px}
.corr-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.corr-n{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums}
.corr-est{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
padding:3px 9px;border-radius:20px;border:1px solid var(--linha2);color:var(--tx2)}
.corr-est.est-novo{border-color:var(--dourado);color:var(--dourado)}
.corr-est.est-aceita{border-color:#3D6B50;color:#8FCFA8}
.corr-est.est-recusada{border-color:#5A3038;color:#E0A0A0}
.corr-quando{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.corr-onde{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:10px}
.corr-onde > a{font-size:12.5px;color:var(--dourado);text-decoration:underline;
text-underline-offset:3px;word-break:break-all}
.corr-onde > span{font-size:12.5px;color:var(--tx3)}
.corr-onde > s{text-decoration:none;font-size:11px;color:var(--tx3)}
/* O texto de quem escreveu. É o que mais importa no cartão, e por isso
é o maior — 15px, altura de linha de leitura, e não de listagem. */
.corr-texto{font-size:15px;line-height:1.65;color:var(--tx);margin:0 0 10px;
white-space:pre-line}
.corr-quem{font-size:12px;color:var(--tx3);margin:0 0 12px;line-height:1.55}
.corr-quem b{color:var(--tx2)}
.corr-quem a{color:var(--dourado);text-decoration:underline;text-underline-offset:3px}
.corr-decisao{border-left:2px solid var(--linha2);padding:2px 0 2px 11px;margin:0 0 12px;
font-size:12px;color:var(--tx3);border-radius:0}
.corr-decisao b{color:var(--tx2)}
.corr-decisao p{margin:5px 0 0;font-size:13px;color:var(--tx2);line-height:1.6;
white-space:pre-line}
.corr-acao{border-top:1px solid var(--linha);padding-top:12px;display:grid;gap:10px}
.corr-acao textarea{background:var(--surf2);border:1px solid var(--linha);border-radius:8px;
padding:9px 11px;color:#fff;font-family:inherit;font-size:13.5px;width:100%;resize:vertical}
.corr-acao textarea:focus{outline:0;border-color:var(--dourado)}
.corr-botoes{display:flex;flex-wrap:wrap;gap:8px}
.corr-botoes > button{font-size:13px;padding:9px 15px;min-height:42px;cursor:pointer;
font-family:inherit}
@media (max-width:700px){
.corr-botoes{display:grid;grid-template-columns:1fr 1fr}
.corr-quando{margin-left:0;width:100%}
}
/* =====================================================================
O PAINEL DO PASTOR
=====================================================================
Quem usa isto é o pastor Elias: 57 anos, motorista de van a semana
toda, pastor de uma igreja de bairro. Ele abre isto às 22h40, na
cama, no celular, com uns oito minutos de paciência antes de dormir.
Tudo aqui é medido contra esses oito minutos. Por isso:
· cartão grande com UMA informação e UM botão, e não tabela
· o que tem NÚMERO vem primeiro — "4 pessoas esperando você"
· botão de 48px, porque o dedo está cansado
· e a coisa que não tem volta mora no fim de tudo, nunca no menu
===================================================================== */
.pp-igreja{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;margin:20px 0 16px}
.pp-igreja > b{font-size:19px;color:var(--tx);font-weight:600}
.pp-igreja > span{font-size:13px;color:var(--tx3)}
.pp-igreja > s{text-decoration:none;font-size:10.5px;letter-spacing:.09em;
text-transform:uppercase;padding:3px 9px;border-radius:20px;
border:1px solid var(--linha2);color:var(--tx2)}
.pp-igreja > s.no-ar{border-color:#3D6B50;color:#8FCFA8}
.pp-igreja > s.esperando{border-color:var(--dourado);color:var(--dourado)}
.pp-igreja > s.encerrando{border-color:#5A3038;color:#E0A0A0}
/* Os cartões da casa do painel. O primeiro é o que tem gente esperando,
e é o único dourado — se tudo chamar atenção, nada chama. */
.pp-cartoes{display:grid;gap:12px;margin:18px 0}
.pp-cartao{display:block;background:var(--surf);border:1px solid var(--linha);
border-radius:var(--raio);padding:16px 18px;min-height:64px}
.pp-cartao:hover{border-color:var(--linha2)}
.pp-cartao > b{display:block;font-size:16px;color:var(--tx);font-weight:600;
margin-bottom:4px}
.pp-cartao > span{display:block;font-size:13.5px;color:var(--tx3);line-height:1.55}
.pp-cartao.chama{border-color:var(--dourado);background:#191408}
.pp-cartao.chama > b{color:var(--dourado);font-size:18px}
.pp-cartao.chama > span{color:#D9C79A}
/* O passo a passo do cadastro. Três telas, e ele precisa ver onde está
— senão a terceira parece que nunca acaba. */
.pp-passos{display:flex;gap:7px;margin:18px 0 6px}
.pp-passos > i{flex:1;height:4px;border-radius:2px;background:var(--linha);
font-style:normal}
.pp-passos > i.feito{background:var(--dourado)}
.pp-passo-diz{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--tx3);margin:0 0 18px}
/* "Salvo automaticamente." A frase mais importante do painel: é ela que
compra a coragem de escrever cinco linhas sobre a própria fé sabendo
que uma ligação no meio não apaga tudo. */
.pp-salvo{display:flex;align-items:center;gap:7px;font-size:12px;
color:var(--tx3);margin:8px 0 0}
.pp-salvo.agora{color:#8FCFA8}
/* Os dois botões do fim de cada passo. "Terminar depois" NÃO é
secundário escondido: é a saída que faz ele voltar amanhã em vez de
perder o que escreveu e nunca mais abrir. */
.pp-fim{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pp-fim > .btn{min-height:48px;font-size:15px;padding:0 20px;
display:inline-flex;align-items:center;justify-content:center}
@media (max-width:700px){
.pp-fim{display:grid}
.pp-fim > .btn{width:100%}
}
/* A fila de quem pede para entrar. Um cartão por pessoa, com a frase
que ELA escreveu para o pastor lembrar dela — "sou da célula da irmã
Cida". Sem isso ele vê só e-mail, não reconhece ninguém, e a fila
vira uma lista de culpa que ele evita abrir. */
.pp-pessoa{background:var(--surf);border:1px solid var(--linha);
border-radius:var(--raio);padding:15px 17px;margin-bottom:12px}
.pp-pessoa > b{display:block;font-size:16px;color:var(--tx);font-weight:600}
.pp-pessoa > q{display:block;font-style:normal;font-size:14.5px;color:var(--tx2);
line-height:1.6;margin:7px 0 0;quotes:none}
.pp-pessoa > q:before{content:"“"}
.pp-pessoa > q:after{content:"”"}
.pp-pessoa > span{display:block;font-size:12px;color:var(--tx3);margin-top:7px}
.pp-pessoa form{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.pp-pessoa button{min-height:48px;font-size:14.5px;cursor:pointer;font-family:inherit}
/* No celular os dois botões vão EMPILHADOS. "É da casa" e "Não conheço"
lado a lado num aparelho estreito é erro de dedo esperando acontecer,
e o erro aqui é sobre gente da igreja dele. */
@media (max-width:700px){ .pp-pessoa form{grid-template-columns:1fr} }
/* O aviso do que vai SAIR DO AR quando ele publicar outro. Ele publica
o estudo de quarta, na semana seguinte publica outro, e o primeiro
some — e ele escreve dizendo que o site apagou o estudo dele. */
.pp-sai{background:#1A1408;border:1px solid #5C4A1E;border-radius:var(--raio);
padding:13px 15px;margin:14px 0;font-size:13.5px;line-height:1.6;color:#D9C79A}
.pp-sai b{color:var(--dourado)}
/* Encerrar. Vermelho, no fim de tudo, e o botão só acende depois de ele
escrever o nome da igreja — porque quem clica às 23h de uma terça
ruim é outra pessoa às 8h de quarta. */
.pp-encerrar{border:1px solid #5A3038;background:#1A1114;border-radius:var(--raio);
padding:17px 19px;margin-top:40px}
.pp-encerrar > h4{font-size:13px;color:#E0A0A0;margin:0 0 10px;font-weight:700}
.pp-encerrar ol{margin:10px 0;padding-left:18px;font-size:13.5px;line-height:1.7;
color:var(--tx2)}
.pp-encerrar ol b{color:var(--tx)}
.pp-encerrar input[type=text]{width:100%;max-width:340px}
.pp-encerrar button[disabled]{opacity:.4;cursor:not-allowed}
/* "Não é bem isso — quero ver outras" é um botão que envia o
formulário, mas tem de PARECER a saída discreta que é: se ele
parecesse botão, competiria com "Sim, é isso", e a tela viraria uma
escolha entre três coisas igualmente pesadas. */
.como-link{background:none;border:0;padding:0;font:inherit;color:var(--dourado);
text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.como-link:hover{color:#F5CE7E}
/* =====================================================================
O CONVITE PARA INSTALAR
=====================================================================
Uma barra que sobe do rodapé, só no celular e no tablet, e só para
quem ainda não instalou. No computador ela nem é montada — ver
app/publico/js/instalar.js.
Fica ACIMA da barra de baixo (a navegação do polegar), senão uma
taparia a outra. Por isso o bottom conta com a mesma variável.
===================================================================== */
.instalar-barra{
position:fixed;left:12px;right:12px;z-index:70;
flex-wrap:wrap;
bottom:calc(58px + env(safe-area-inset-bottom,0) + 12px);
display:flex;align-items:center;gap:12px;
background:var(--sup2,#141821);border:1px solid var(--linha2,#2A3140);
border-radius:16px;padding:12px 14px;
box-shadow:0 10px 30px rgba(0,0,0,.45);
transform:translateY(140%);opacity:0;
transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s}
.instalar-barra.mostra{transform:translateY(0);opacity:1}
/* No tablet e no computador não há barra de baixo, então a de instalar
desce até a margem — e no computador ela nem aparece, mas a regra
fica para o tablet deitado. */
@media (min-width:701px){
.instalar-barra{left:auto;right:20px;bottom:20px;max-width:400px}
}
.instalar-icone img{display:block;border-radius:10px}
.instalar-texto{flex:1;min-width:130px;display:flex;flex-direction:column;gap:2px}
.instalar-texto b{font-size:14.5px;color:var(--tx,#fff);font-weight:600}
.instalar-texto span{font-size:12.5px;color:var(--tx2,#B9C0CB);line-height:1.5}
.instalar-texto span b{font-size:inherit;color:var(--tx,#fff)}
/* Num celular bem estreito o botão desce para a linha de baixo, e aí
ocupa a largura toda — melhor que ficar espremido ao lado do texto. */
.instalar-sim,.instalar-como{
flex:1 0 auto;min-height:44px;padding:0 16px;border-radius:22px;cursor:pointer;
font:600 14px Inter,system-ui,sans-serif;
background:var(--dourado,#E8B44C);color:#1A1206;border:0}
.instalar-sim:hover,.instalar-como:hover{background:#F5CE7E}
.instalar-nao{
flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;
background:none;border:0;color:var(--tx3,#5C6473);font-size:22px;line-height:1;
display:grid;place-items:center}
.instalar-nao:hover{color:var(--tx,#fff)}
/* Quando vira o passo a passo do iPhone, o texto cresce e o botão sai. */
.instalar-barra.ensinando{align-items:flex-start}
.instalar-barra.ensinando .instalar-texto span{margin-top:3px}