/* estudo.click — tema compartilhado de todos os estudos
   Paleta e sensacao visual herdadas do Atlas de Formacao Espirita. */

:root{
  --navy:#102a56; --navy2:#28496e; --text:#2d3d51; --muted:#6e7b8c;
  --line:#dce5ee; --bg:#f4f7fa; --card:#fff;
  --gold:#c09115; --gold-soft:#fff9e8; --gold-b:#c79b1a;

  /* cores por area de estudo */
  --a-ia:#2f6f8f;        --a-ia-soft:#eaf5fa;
  --a-espirita:#3b7e57;  --a-espirita-soft:#eef8f1;
  --a-evangelhos:#895fb4;--a-evangelhos-soft:#f8f2ff;
  --a-biblia:#c99242;    --a-biblia-soft:#fff8ed;
  --a-imoveis:#a86a3d;   --a-imoveis-soft:#fdf3ea;
  --a-saude:#5d8a3a;     --a-saude-soft:#f2f8ec;
  --a-bem:#b05a72;       --a-bem-soft:#fdf1f5;
  --a-animais:#2f8f86;   --a-animais-soft:#eaf7f5;
  --a-tec:#405f83;       --a-tec-soft:#f1f5fb;
  --a-filosofia:#745bb0; --a-filosofia-soft:#f5f1ff;
  --a-historia:#c79b1a;  --a-historia-soft:#fff9e8;
  --a-outros:#77a7d5;    --a-outros-soft:#edf6ff;

  --shadow:0 10px 28px rgba(16,42,86,.055);
  --shadow-lg:0 18px 44px rgba(16,42,86,.10);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--navy)}
button,input{font:inherit}
img{max-width:100%}

/* ---------- capa / hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(199,155,26,.16), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(59,126,87,.10), transparent 38%),
    linear-gradient(#fff,#f7fbfe);
  border-bottom:1px solid var(--line);
}
.hero:after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(16,42,86,.055) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
          mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.hero-in{position:relative; z-index:1; max-width:1180px; margin:auto; padding:64px 18px 44px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:30px; align-items:center}
.hero-txt{min-width:0}
.hero-art{width:330px; height:auto; justify-self:end; filter:drop-shadow(0 16px 32px rgba(16,42,86,.10))}
.eyebrow{color:#b28514; font-size:12px; font-weight:950; letter-spacing:.14em; text-transform:uppercase}
.hero h1{
  color:var(--navy); font-size:clamp(42px,8vw,88px); line-height:.98;
  letter-spacing:-.05em; margin:8px 0 14px;
}
.hero h1 .dot{color:var(--gold)}
.assinatura{
  display:flex; align-items:center; gap:13px;
  margin:2px 0 20px; color:var(--muted); font-size:13.5px; font-weight:700;
}
.assinatura-txt{display:flex; flex-direction:column; line-height:1.35}
.assinatura b{color:var(--navy2); font-weight:900; font-size:15px}
.assinatura small{color:var(--muted); font-size:12px; font-weight:600; opacity:.85}

/* retrato redondo — entra sozinho quando existir /assets/foto.jpg */
.retrato{
  width:66px; height:66px; flex:0 0 66px; border-radius:50%; object-fit:cover;
  background:#fff; border:3px solid #fff;
  box-shadow:0 0 0 2px var(--gold), 0 10px 22px rgba(16,42,86,.14);
}
.retrato.vazio{
  display:grid; place-items:center; color:#fff; font-size:17px; font-weight:900;
  letter-spacing:.06em; background:linear-gradient(150deg,var(--navy2),var(--navy));
  box-shadow:0 0 0 2px var(--gold), 0 10px 22px rgba(16,42,86,.14);
  cursor:default;
}
.lead{max-width:820px; color:var(--muted); font-size:clamp(16px,2vw,21px); margin:0}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:30px}
.stat{background:#ffffffd9; border:1px solid var(--line); border-radius:14px; padding:13px}
.stat b{display:block; color:var(--navy); font-size:22px; letter-spacing:-.02em}
.stat span{font-size:12px; color:var(--muted)}

/* ---------- barra fixa ---------- */
.sticky{
  position:sticky; top:0; z-index:60; background:#fffffff5;
  backdrop-filter:blur(13px); border-bottom:1px solid var(--line);
  box-shadow:0 3px 16px rgba(16,42,86,.04);
}
.tool{max-width:1180px; margin:auto; padding:9px 12px; display:flex; gap:8px; align-items:center}
.search{position:relative; flex:1}
.search:before{content:"⌕"; position:absolute; left:14px; top:5px; font-size:22px; color:#758397}
.search input{
  width:100%; border:1px solid #cbd8e3; border-radius:999px;
  padding:10px 13px 10px 38px; color:var(--navy); outline:none; background:#fff;
}
.search input:focus{border-color:#7ca7d0; box-shadow:0 0 0 3px rgba(124,167,208,.18)}
.btn{
  border:1px solid #cbd8e3; border-radius:999px; background:#fff; color:var(--navy);
  padding:9px 13px; font-size:12px; font-weight:850; cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.btn:hover{background:#f4f8fc}
.filters{max-width:1180px; margin:auto; padding:0 12px 9px; white-space:nowrap; overflow-x:auto}
.chip{
  border:1px solid #d4dfe9; border-radius:999px; background:#fff; color:var(--navy);
  padding:6px 11px; margin-right:4px; font-size:12px; font-weight:850; cursor:pointer;
}
.chip.active{background:var(--navy); border-color:var(--navy); color:#fff}

/* ---------- grade de estudos ---------- */
main{max-width:1180px; margin:auto; padding:28px 14px 90px}
.sec-title{color:var(--navy); font-size:13px; font-weight:950; text-transform:uppercase; letter-spacing:.1em; margin:0 0 14px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.study{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-top:4px solid var(--ac,var(--a-outros));
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease;
}
.study:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.study .top{padding:18px 19px 14px; flex:1}
.study .ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-size:23px; background:var(--acs,var(--a-outros-soft)); border:1px solid var(--ac,var(--a-outros));
  margin-bottom:12px;
}
.study h2{color:var(--navy); font-size:21px; line-height:1.18; margin:0 0 7px; letter-spacing:-.02em}
.study p{margin:0; color:var(--muted); font-size:14px}
.study .foot{
  border-top:1px solid #e9eef3; padding:10px 19px; display:flex;
  justify-content:space-between; align-items:center; gap:8px; background:#fcfdff;
}
.badge{
  border:1px solid var(--ac,var(--a-outros)); background:var(--acs,var(--a-outros-soft));
  color:var(--navy); border-radius:999px; padding:4px 9px; font-size:10.5px; font-weight:850;
}
.when{color:var(--muted); font-size:11px; font-weight:800}

.nores{
  display:none; background:#fff; border:1px solid var(--line); border-radius:13px;
  padding:22px; text-align:center; color:var(--muted); max-width:800px; margin:10px auto;
}
.empty{
  background:#fff; border:1px dashed #c9d6e2; border-radius:var(--radius);
  padding:34px 22px; text-align:center; color:var(--muted);
}
.empty b{display:block; color:var(--navy); font-size:19px; margin-bottom:6px}

/* ---------- areas ---------- */
.areas{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:40px}
.area{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--ac);
  border-radius:12px; padding:12px 13px;
}
.area b{display:block; color:var(--navy); font-size:13px}
.area span{font-size:11.5px; color:var(--muted)}

.note{
  margin-top:32px; background:var(--gold-soft); border-left:4px solid var(--gold-b);
  border-radius:0 12px 12px 0; padding:14px 16px; font-size:13.5px;
}
.note b{color:var(--navy)}

footer{border-top:1px solid var(--line); background:#fff}
.foot-in{max-width:1180px; margin:auto; padding:24px 16px; color:var(--muted); font-size:12.5px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- pagina de estudo (conteudo) ---------- */
.study-page{max-width:900px; margin:auto; padding:28px 16px 90px}
.study-page h2{color:var(--navy); font-size:clamp(24px,4vw,34px); letter-spacing:-.03em; margin:34px 0 10px}
.study-page h3{color:var(--navy2); font-size:19px; margin:24px 0 8px}
.study-page p{margin:0 0 14px}
.study-page ul,.study-page ol{margin:0 0 14px; padding-left:22px}
.study-page li{margin:5px 0}
.study-page blockquote{
  margin:0 0 16px; border-left:4px solid #8ba9c5; background:#f7faff;
  border-radius:0 10px 10px 0; padding:12px 15px; color:var(--navy2);
}
.study-page .destaque{
  background:var(--gold-soft); border:1px solid #ebddac; border-radius:12px;
  padding:13px 15px; margin:0 0 16px;
}
.study-page .box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px; margin:0 0 18px;
}
.study-page table{width:100%; border-collapse:collapse; background:#fff; font-size:14px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 18px}
.study-page th{background:#f1f5fb; color:var(--navy); text-align:left; padding:10px 12px; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em}
.study-page td{padding:10px 12px; border-top:1px solid var(--line)}
.crumb{max-width:900px; margin:auto; padding:14px 16px 0; font-size:12px; font-weight:800; color:var(--muted)}
.crumb a{color:var(--navy); text-decoration:none}
.crumb a:hover{text-decoration:underline}

.back{
  position:fixed; right:12px; bottom:12px; width:44px; height:44px;
  border:1px solid #cbd8e3; border-radius:50%; background:#fff; color:var(--navy);
  box-shadow:var(--shadow); cursor:pointer; z-index:40;
}
.hidden{display:none!important}

/* ---------- linha do tempo vertical ---------- */
.tempo{list-style:none; margin:0; padding:0 0 0 6px; position:relative}
.tempo:before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:#d6e1eb}
.tempo li{position:relative; padding:0 0 20px 26px}
.tempo li:last-child{padding-bottom:0}
.tempo li:before{
  content:""; position:absolute; left:-1px; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--tc,var(--a-outros)); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--tc,var(--a-outros));
}
.tempo .quando{
  display:inline-block; color:var(--tc,var(--navy)); font-size:12.5px; font-weight:950;
  letter-spacing:.02em; text-transform:uppercase; margin-bottom:3px;
}
.tempo .oque b{display:block; color:var(--navy); font-size:16.5px; letter-spacing:-.02em; margin-bottom:4px}
.tempo .oque p{margin:0; font-size:14px; color:var(--text)}
.tempo .oque p + p{margin-top:7px}

/* barra de proporcao — mostrar quanto de um todo cada fatia ocupa */
.barra{display:flex; height:44px; border-radius:11px; overflow:hidden; border:1px solid var(--line); margin:0 0 10px}
.barra div{
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:900;
  overflow:hidden; white-space:nowrap; min-width:2px;
}
.barra-leg{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 16px; font-size:12.5px; font-weight:800}
.barra-leg span{display:flex; align-items:center; gap:6px; color:var(--muted)}
.barra-leg i{width:12px; height:12px; border-radius:3px; display:inline-block; flex:0 0 12px}

/* ---------- sequencia de conceitos encadeados ---------- */
.conceitos{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 6px}
.conceito{
  position:relative; background:#fff; border:1px solid var(--line);
  border-top:4px solid var(--cc,var(--a-outros)); border-radius:14px;
  padding:14px 15px 15px; box-shadow:var(--shadow);
}
.conceito .num{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:var(--ccs,var(--a-outros-soft)); border:1px solid var(--cc,var(--a-outros));
  color:var(--navy); font-size:12px; font-weight:900; margin-bottom:9px;
}
.conceito b{display:block; color:var(--navy); font-size:17px; letter-spacing:-.02em; margin-bottom:5px}
.conceito span{display:block; color:var(--muted); font-size:13px; line-height:1.45}
.conceito:not(:last-child):after{
  content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  color:#a9bacb; font-size:16px; font-weight:900; z-index:2;
}

/* diagrama inline (svg desenhado na propria pagina) */
.diagrama{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 14px 10px; margin:0 0 16px; overflow-x:auto;
}
.diagrama svg{display:block; width:100%; min-width:520px; height:auto}
.diagrama figcaption{
  margin:10px 4px 2px; color:var(--muted); font-size:12.5px; font-weight:700; text-align:center;
}

/* tabela de faixas / grandezas */
.faixa{color:var(--navy); font-weight:900; white-space:nowrap}

/* ---------- arvore genealogica ---------- */
.tree, .tree ul{list-style:none; margin:0; padding:0}
.tree{overflow-x:auto}
.tree ul{margin-left:7px; padding-left:19px; border-left:2px solid #d6e1eb}
/* a partir do 6o nivel a arvore recua menos, senao os netos ficam sem largura */
.tree ul ul ul ul ul ul{margin-left:3px; padding-left:13px}
.tree li{position:relative; margin:7px 0; min-width:230px}
.tree ul > li:before{
  content:""; position:absolute; left:-19px; top:22px; width:15px; height:2px; background:#d6e1eb;
}
.tree ul ul ul ul ul ul > li:before{left:-13px; width:9px}
.tree details{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--nc,var(--a-outros));
  border-radius:12px; box-shadow:var(--shadow);
}
.tree summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:11px 14px; flex-wrap:wrap;
}
.tree summary::-webkit-details-marker{display:none}
.tree summary:hover{background:#f7fafd; border-radius:8px}
.n-ico{
  width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:grid; place-items:center;
  font-size:17px; background:var(--ncs,var(--a-outros-soft)); border:1px solid var(--nc,var(--a-outros));
}
.n-nome{color:var(--navy); font-weight:900; font-size:16px; letter-spacing:-.015em}
.n-sub{color:var(--muted); font-size:12.5px; font-weight:700}
.n-tag{
  margin-left:auto; border:1px solid var(--nc,var(--a-outros)); background:var(--ncs,var(--a-outros-soft));
  color:var(--navy); border-radius:999px; padding:3px 9px; font-size:10px; font-weight:850; white-space:nowrap;
}
.tree details[open] > summary{border-bottom:1px solid #eef2f7}
.tree summary:after{
  content:"+"; order:99; color:#7d8b9c; font-weight:900; font-size:17px; line-height:1;
}
.tree details[open] > summary:after{content:"–"}
.tree summary.leaf:after{content:""}
.n-info{padding:11px 14px 13px; font-size:13.5px; color:var(--text)}
.n-info p{margin:0 0 8px}
.n-info p:last-child{margin:0}
.n-info .ref{color:var(--muted); font-size:11.5px; font-weight:800}
.n-info .obs{
  background:var(--gold-soft); border-left:3px solid var(--gold-b); border-radius:0 8px 8px 0;
  padding:8px 11px; margin:8px 0 0; font-size:12.5px;
}
.tree .hit > summary{background:#fff7e2}

/* linha reta de reis / geracoes */
.linhagem{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px}
.ger{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--nc,var(--a-outros));
  border-radius:10px; padding:8px 11px; min-width:104px;
}
.ger b{display:block; color:var(--navy); font-size:13px}
.ger span{color:var(--muted); font-size:11px}

/* ---------- responsivo ---------- */
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{width:230px; justify-self:center; margin-top:8px}
}
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .areas{grid-template-columns:repeat(2,1fr)}
  .conceitos{grid-template-columns:repeat(2,1fr)}
  .conceito:nth-child(2):after{content:none}
}
@media(max-width:700px){
  .hero-in{padding:44px 15px 32px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  main{padding:22px 12px 80px}
  .search input{font-size:16px}
  .conceitos{grid-template-columns:1fr}
  .conceito:after{content:none!important}
  .tree ul{margin-left:2px; padding-left:13px}
  .tree ul ul ul ul ul ul{margin-left:0; padding-left:9px}
  .tree ul > li:before{left:-13px; width:10px}
  .tree ul ul ul ul ul ul > li:before{left:-9px; width:6px}
  .n-tag{margin-left:0; order:98}
  .study-page .box{padding:16px 14px}
}
@media(max-width:430px){
  .stats{grid-template-columns:1fr}
  .areas{grid-template-columns:1fr}
}

@media print{
  .sticky,.back,footer,.hero:after{display:none!important}
  body{background:#fff}
  .box,.study-page .box{box-shadow:none}
}