/* A Grande Árvore do Cristianismo — estilos do palco.
   O palco tem 1400x800 fixos; a página o coloca dentro de um contêiner rolável. */
:root{
  --papel:#F5EFE3; --tinta:#2E2417; --casca:#5E442A;
  --bat:#1D4ED8; --pent:#C4562A; --adv:#3C7A6B; --ort:#7A6A4A;
}
*{box-sizing:border-box;margin:0;padding:0}


.stage{position:relative;width:1400px;height:800px;background:
   radial-gradient(120% 90% at 50% 0%,#FBF7EE,#F1E9DA 62%,#E8DFCC 100%);
   overflow:hidden}
.stage svg{position:absolute;inset:0;width:1400px;height:800px}

/* rótulos genéricos */
.lb,.tpill,.den,.era{position:absolute;transform:translate(-50%,-50%);z-index:5;text-align:center}

/* tronco */
.lb.tronco{color:#F6EEDF;width:212px}
.lb.tronco b{display:block;font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1.15;
   text-shadow:0 1px 3px rgba(0,0,0,.55)}
.lb.tronco span{display:block;font-size:11px;color:#D9C9AC;margin-top:3px;
   text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lb.tronco.sm b{font-size:12.5px}
.lb.tronco.sm span{font-size:10.5px}
.lb.jesus b{font-size:27px;font-weight:900;letter-spacing:.03em;color:#FFF6E4;
   text-shadow:0 2px 6px rgba(0,0,0,.6)}

/* raiz judaica */
.lb.jud b{display:block;font-size:26px;font-weight:900;letter-spacing:.05em;color:#F0DFBE;
   text-shadow:0 2px 5px rgba(0,0,0,.55)}
.lb.jud span{display:block;font-size:12px;color:#C3AC83;margin-top:4px;letter-spacing:.1em}
.lb.tiny{font-size:11.5px;color:#C0A87E;font-weight:600;letter-spacing:.04em;font-style:italic}

/* solas */
.lb.sola{font-size:11.5px;font-weight:800;color:#EBD9AF;letter-spacing:.1em;line-height:1.35;
   text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* pílulas de marco */
.tpill{background:#3E2E1B;border-radius:8px;padding:8px 16px;
   box-shadow:0 4px 14px rgba(46,36,23,.32);border:1.5px solid #6B5334;white-space:nowrap}
.tpill b{display:block;font-size:14px;font-weight:800;color:#FBF3E2;letter-spacing:.02em;line-height:1.2}
.tpill span{display:block;font-size:10.5px;color:#C4AC85;margin-top:2px;letter-spacing:.03em}
.tpill.cisma{background:#4A3620;border-color:#8A6A3E}
.tpill.cisma b{font-size:14.5px}
.tpill.cat{background:#4A3E2A;border-color:#8A7A52}
.tpill.ref{background:#5A3418;border-color:#B07A34}
.tpill.ref b{font-size:15px;color:#FFE6BE}
.tpill.sol{background:#6B4A16;border-color:#C9932E}
.tpill.sol b{color:#FFDf9E;font-size:14.5px;letter-spacing:.1em}
.tpill.hist{background:#16325E;border-color:var(--bat)}
.tpill.hist b{color:#CFE0FF}
.tpill.hist span{color:#8FAEDD}
.tpill.adv{background:#1C463C;border-color:var(--adv)}
.tpill.adv b{color:#C6EDE3}
.tpill.pent{background:#5A2814;border-color:var(--pent)}
.tpill.pent b{color:#FFD6C2}

/* denominações (folhas nomeadas) */
.den{transform:translate(0,-50%);background:rgba(255,252,245,.94);border:1px solid #D8CDB6;
   border-radius:6px;padding:5px 11px;font-size:12.5px;font-weight:700;color:#3A2E1C;
   white-space:nowrap;box-shadow:0 2px 7px rgba(46,36,23,.18);text-align:left}
.den i{font-style:normal;font-weight:500;color:#8A7A5E;font-size:11px}
.den.hit{background:var(--bat);border-color:#0F3AAE;color:#fff;
   box-shadow:0 0 0 4px rgba(29,78,216,.22),0 3px 10px rgba(15,58,174,.4)}
.den.hit i{color:#BFD3FF;font-weight:700}

/* apagados */
.dim{opacity:.34}
/* a folhagem apagada é decidida no servidor, por tradição escolhida */
svg .tw-bat{stroke:#1D4ED8}

.era{font-size:10px;letter-spacing:.2em;color:#A79A82;font-weight:700}

/* plaquinhas legíveis no tronco */
.lb.tronco{background:rgba(38,27,15,.74);border:1px solid rgba(140,110,70,.5);
   border-radius:9px;padding:7px 13px;width:auto;max-width:224px}
.lb.jesus{background:none;border:0;padding:0}
.lb.tronco.sm{max-width:210px}

/* apagados: visíveis, porém em segundo plano */
.dim{opacity:.55}

.den.dim{opacity:.6}

/* pílulas apagadas continuam legíveis */
.tpill.dim{opacity:.72}
.tpill.ort{background:#3A3226;border-color:#6E6250}
.tpill.ort b{color:#E4DCCB}

/* trilha do "seu caminho" */
svg .trilha{filter:drop-shadow(0 0 5px rgba(37,99,235,.75))}

/* ---- neopentecostalismo: galho próprio, filho do pentecostal ---- */
.tpill.neo{background:#3A1D6B;border-color:#7C3AED}
.tpill.neo b{color:#D8C7FF}
svg .g-neo{opacity:1}

/* ---- quando a própria caixa é a doutrina, ela recebe o destaque ---- */
.tpill.hit{box-shadow:0 0 0 3px rgba(37,99,235,.55),0 4px 16px rgba(37,99,235,.4)}
.tpill.hit:after{content:"você está aqui";position:absolute;left:50%;top:calc(100% + 7px);
  transform:translateX(-50%);background:#2563EB;color:#fff;font-size:9.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:5px;white-space:nowrap}
.tpill{position:absolute}

/* a data na etiqueta da doutrina */
.den i{font-style:normal;font-weight:500;color:#8A7A5E;font-size:11px}

/* ---- as caixas viraram links ---- */
.stage a{text-decoration:none;cursor:pointer;transition:transform .12s,filter .12s}
.stage a.tpill:hover{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.2)}
.stage a.den:hover{transform:translate(0,-50%) scale(1.05);filter:brightness(1.06)}
.stage a.lb:hover{filter:brightness(1.35)}
.stage a.tpill:hover,.stage a.den:hover{z-index:9}
/* dica de que dá para clicar */
.stage a.tpill::before{content:"";position:absolute;inset:-4px;border-radius:11px;
  border:1.5px dashed transparent;transition:border-color .12s}
.stage a.tpill:hover::before{border-color:rgba(255,255,255,.35)}

/* --------------------------------------------------- caber na tela
   A árvore tem 1400x800 fixos, e os rótulos são HTML posicionado em
   pixel. Escalar o palco INTEIRO mantém desenho e rótulo juntos, e
   as caixas continuam clicáveis. Sem isso, numa tela de 1280 seis
   doutrinas ficam do lado de fora.
   Sem JavaScript vira rolagem lateral — ninguém fica sem ver. */
.palco-caixa{overflow-x:auto;overflow-y:hidden}
.palco-caixa.coube{overflow:hidden}
.palco-caixa.coube .stage{transform-origin:top left;transform:scale(var(--z,1))}

/* --------------------------- profundidade do ramo protestante */
/* Quanto mais fundo na genealogia, mais discreta a caixa. É como o
   olho entende que metodismo saiu de dentro do anglicanismo, e não
   ao lado dele. */
.den.n1{font-size:12.5px;padding:5px 11px}
.den.n2{font-size:12px;padding:4px 10px;opacity:.96}

/* "Protestantismo histórico" é ETIQUETA do grupo, não galho. Por isso
   não tem cara de caixa: é um dizer por cima, sem moldura. */
.etq{position:absolute;transform:translate(0,-50%);z-index:5;text-align:left;
  line-height:1.25;max-width:230px}
.etq i{display:block;font-style:italic;font-size:10.5px;color:#8A7A5E;font-weight:500}
.etq b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:#6E5A38}
.etq:hover b{color:#3A2C18;text-decoration:underline}
.etq.dim{opacity:.5}

/* As Ortodoxas Orientais — a divisão de 451.
   Mesma cor da caixa ortodoxa e da católica de propósito: são a mesma
   camada da árvore, e nenhuma é mais importante que a outra. */
.tpill.oor{background:#3A3226;border-color:#6E6250}

/* =====================================================================
   A DESCIDA — a árvore no celular
   =====================================================================
   O desenho tem 4.175 elementos de folhagem e nasceu para 1.400 pontos
   de largura. Num telefone de 375 ele vira miniatura ilegível ou coisa
   que se arrasta com dois dedos — as duas saídas são computador
   espremido.

   Então no celular ele SAI, e entra uma coluna de cartões na ordem em
   que a fé desceu. De cima para baixo é como um telefone se lê, e é o
   mesmo gesto de rolar.

   ⚠️ Uma das duas está sempre escondida. Não é desperdício: é a mesma
   verdade contada do jeito de cada tela.
   ===================================================================== */
.descida{display:none}

@media (max-width:700px){
  .painel-arvore{display:none}          /* o desenho não vai para o telefone */

  .descida{display:block;max-width:640px;margin:20px auto 0;padding:0 16px}
  .ds-cab{margin-bottom:14px}
  .ds-cab > b{display:block;font-size:11px;letter-spacing:.14em;color:var(--dourado)}
  .ds-cab > span{display:block;margin-top:3px;font-size:12.5px;color:var(--tx3)}

  /* a linha da esquerda é o fio da descendência: ela continua contando
     a história depois que o degrau para de andar */
  .ds-lista{position:relative;padding-left:14px}
  .ds-lista::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;
    width:1px;background:var(--linha2)}

  .ds-item{position:relative;display:block;margin-bottom:7px;
    padding:11px 13px;min-height:56px;
    background:var(--surf);border:1px solid var(--linha);
    border-left:3px solid var(--c,var(--linha2));border-radius:0 9px 9px 0;
    text-decoration:none;transition:border-color .15s}
  /* o degrau para no terceiro: dez níveis num telefone de 375 pontos
     comeriam 140 só de espaço vazio à esquerda */
  .ds-item.n1{margin-left:12px}
  .ds-item.n2{margin-left:24px}
  .ds-item.n3{margin-left:36px}

  .ds-item > b{display:block;font-size:15px;color:var(--tx);font-weight:600;line-height:1.35}
  .ds-item > s{display:block;text-decoration:none;margin-top:2px;
    font-size:11.5px;color:var(--tx3);line-height:1.45}
  .ds-item > .ds-de{display:block;font-style:normal;margin-bottom:3px;
    font-size:10.5px;color:var(--tx3);letter-spacing:.02em}
  .ds-item > .ds-de::before{content:'↳ ';color:var(--c,var(--tx3))}

  .ds-item.aceso{background:var(--surf2);border-color:var(--c)}
  .ds-item.aceso > b{color:var(--c)}
  /* quando a pessoa escolheu uma tradição, o que está fora do caminho
     dela some de vista — mas continua clicável, porque continua sendo
     verdade. Apagar não é esconder. */
  .ds-item.apagado{opacity:.42}

  .ds-nota{margin:16px 0 0;font-size:11.5px;line-height:1.6;color:var(--tx3)}
  .ds-nota b{color:var(--tx2)}
  .ds-nota a{color:var(--tx2);text-decoration:underline}
}

/* No papel vale o desenho, que é o que cabe numa folha larga. */
@media print{ .descida{display:none!important} }