/* Biblioteca Psi Fanuel — identidade alinhada a psifanuel.com.br */
:root{
 --fs:17px;
 --bg:#0f172a;--bg-2:#0b1324;--card:#1e293b;--card-2:#243146;--linha:#334155;--linha-forte:#475569;
 --texto:#f1f5f9;--suave:#a3b1c2;--fraco:#7c8aa0;
 --teal:#2dd4bf;--teal-ink:#0f172a;--teal-suave:rgba(45,212,191,.12);
 --indigo:#a5b4fc;--indigo-bg:#1e1b4b;--barra:#020617;--barra-texto:#cbd5e1;
 --alerta-bg:#3a2410;--alerta:#fdba74;
 --raio:14px;--raio-g:18px;
 --fonte:"Lexend","Segoe UI",system-ui,sans-serif;
 --serif:"Lexend","Segoe UI",system-ui,sans-serif;
}
:root[data-modo="calmo"]{
 --bg:#f6f4ef;--bg-2:#efece4;--card:#fffdf9;--card-2:#f3f0e8;--linha:rgba(30,41,59,.12);--linha-forte:rgba(30,41,59,.24);
 --texto:#1e293b;--suave:#475569;--fraco:#64748b;
 --teal:#0f766e;--teal-ink:#ffffff;--teal-suave:rgba(15,118,110,.09);
 --indigo:#3730a3;--indigo-bg:#e0e7ff;--barra:#e9e5da;--barra-texto:#334155;--alerta-bg:#fff1e0;--alerta:#9a3412;
}
:root[data-modo="contraste"]{
 --bg:#000;--bg-2:#000;--card:#000;--card-2:#000;--linha:#fff;--linha-forte:#fff;
 --texto:#fff;--suave:#fff;--fraco:#fff;--teal:#ffe600;--teal-ink:#000;--teal-suave:rgba(255,230,0,.14);
 --indigo:#ffe600;--indigo-bg:#000;--barra:#000;--barra-texto:#fff;--alerta-bg:#000;--alerta:#ffe600;
}
:root.hiper{--fonte:"Atkinson Hyperlegible",Verdana,sans-serif;--serif:"Atkinson Hyperlegible",Verdana,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--fonte);font-size:var(--fs);line-height:1.7;font-weight:400}
:root.hiper body{letter-spacing:.01em;word-spacing:.06em}
h1,h2,h3{font-family:var(--fonte);color:var(--texto);line-height:1.15;margin:1.6em 0 .45em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,3rem);letter-spacing:-.025em;margin-top:.1em}
h2{font-size:clamp(1.45rem,2.6vw,1.88rem)}h3{font-size:1.25rem}
p{margin:.7em 0}
a{color:var(--teal);text-underline-offset:3px}
strong{font-weight:600;color:var(--texto)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.estreito{max-width:720px}
.pular{position:absolute;left:-999px;top:0}.pular:focus{left:16px;top:8px;z-index:99;background:var(--teal);color:var(--teal-ink);padding:8px 14px;border-radius:10px}

/* Barra de conforto visual */
.conforto{background:var(--barra);color:var(--barra-texto);font-size:13px;border-bottom:1px solid var(--linha)}
.conforto .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:8px;padding-bottom:10px}
.conforto .tit{width:100%;font-size:13px}.conforto .tit b{color:var(--teal);font-weight:600}
.grupo{display:inline-flex;border:1px solid var(--linha-forte);border-radius:10px;overflow:hidden}
.grupo button,.conforto>.wrap>button{font:inherit;font-family:var(--fonte);background:transparent;color:var(--barra-texto);border:0;padding:6px 11px;cursor:pointer;line-height:1.3}
.grupo button+button{border-left:1px solid var(--linha-forte)}
.conforto>.wrap>button{border:1px solid var(--linha-forte);border-radius:10px}
.conforto button[aria-pressed="true"]{background:var(--texto);color:var(--bg);font-weight:600}
.guia{position:fixed;left:0;right:0;pointer-events:none;z-index:90;display:none}
.guia.on{display:block}
.guia-a{top:0;background:rgba(2,6,23,.55)}.guia-b{bottom:0;background:rgba(2,6,23,.55)}

/* Cabeçalho */
header.topo{border-bottom:1px solid var(--linha);background:var(--bg)}
header.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--texto);line-height:1.15}
.marca b{font:600 1.08rem var(--fonte);letter-spacing:-.01em}
.marca span{font-size:.78rem;color:var(--suave)}
nav.menu{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
nav.menu a{color:var(--suave);text-decoration:none;font-size:.92rem;padding:7px 10px;border-radius:10px}
nav.menu a:hover{color:var(--texto);background:var(--card)}
nav.menu a[aria-current]{color:var(--texto);background:var(--card-2)}
nav.menu a.membro{background:var(--teal);color:var(--teal-ink);font-weight:600;margin-left:6px}

/* Hero */
.hero{padding:44px 0 18px}
.hero .assinatura{font-size:.9rem;color:var(--suave);margin:0 0 14px}
.hero .assinatura b{color:var(--teal);font-weight:600}
.hero p.lead{font-size:1.14em;color:var(--suave);max-width:640px}
.hero h1 em{font-style:normal;color:var(--teal)}

/* Percurso: o elemento-assinatura */
.percurso{list-style:none;margin:30px 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.percurso::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:2px;background:linear-gradient(90deg,var(--teal),var(--indigo))}
.percurso li{position:relative;text-align:center;padding:0 6px}
.percurso .no{width:48px;height:48px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--teal);color:var(--teal);font:700 1.05rem var(--fonte);position:relative}
.percurso li:nth-child(n+4) .no{border-color:var(--indigo);color:var(--indigo)}
.percurso b{display:block;font:600 1rem var(--fonte)}
.percurso span{display:block;font-size:.82rem;color:var(--suave);line-height:1.45}
@media(max-width:700px){.percurso{grid-template-columns:1fr;gap:14px}.percurso::before{left:23px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--teal),var(--indigo))}
 .percurso li{display:grid;grid-template-columns:48px 1fr;gap:0 14px;text-align:left;align-items:center}.percurso .no{margin:0;grid-row:span 2}}
a.percurso-link{text-decoration:none;color:inherit}

/* Trilho de etapas dentro da trilha */
.trilho{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha);margin:0 -16px 8px;padding:10px 16px}
.trilho ol{list-style:none;margin:0 auto;padding:0;display:flex;gap:6px;overflow-x:auto;max-width:720px}
.trilho a{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:var(--suave);font-size:.88rem;padding:6px 10px;border-radius:999px;border:1px solid var(--linha)}
.trilho a i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;background:var(--card-2);color:var(--texto)}
.trilho a:hover,.trilho a.atual{color:var(--texto);border-color:var(--teal)}
.trilho a.atual i{background:var(--teal);color:var(--teal-ink)}

/* Áreas e cartões */
.areas{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin:34px 0}
@media(max-width:760px){.areas{grid-template-columns:1fr}}
.area{border-radius:var(--raio-g);padding:28px;background:var(--card);border:1px solid var(--linha);position:relative;overflow:hidden}
.area h2{margin-top:0}
.area p{color:var(--suave)}
.area.recursos{background:radial-gradient(120% 140% at 100% 0%,var(--teal-suave),transparent 55%),var(--card)}
.area.escalas{background:var(--indigo-bg);border-color:transparent}
.area.escalas p{color:var(--texto);opacity:.85}
:root[data-modo="contraste"] .area.escalas{border:1px solid #fff}
.selo{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:999px;background:var(--teal-suave);color:var(--teal)}
.selo.pago{background:var(--indigo-bg);color:var(--indigo)}
:root[data-modo="contraste"] .selo{border:1px solid currentColor}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:18px 0 36px}
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-g);padding:24px 24px 24px 26px;text-decoration:none;color:inherit;display:block;position:relative}
a.card:hover{border-color:var(--linha-forte);background:var(--card-2)}
.card h3{margin:.25em 0 .3em}
.card p{margin:0;color:var(--suave);font-size:.93rem;line-height:1.6}
.card .faixa{position:absolute;left:0;top:20px;width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--teal)}
.card.indigo .faixa{background:var(--indigo)}.card.green .faixa{background:var(--teal)}
h2.grupo-tit{font-size:1.1rem;color:var(--suave);font-weight:500;margin:2em 0 .2em}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:var(--teal-ink);border:1px solid transparent;border-radius:12px;padding:15px 22px;font:600 1rem var(--fonte);text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{filter:brightness(1.07)}
.btn.sec{background:var(--card-2);color:var(--texto);border-color:var(--linha)}
.btn.pequeno{padding:7px 13px;font-size:.86rem;border-radius:10px}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

/* Blocos de conteúdo */
.bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-g);padding:26px;margin:20px 0;scroll-margin-top:72px}
.bloco h2{margin-top:.2em}
.etapa{display:flex;align-items:center;gap:10px;color:var(--suave);font-size:.9rem;margin-bottom:4px}
.etapa i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--teal);color:var(--teal);font:700 .88rem var(--fonte)}
.passos{counter-reset:p;list-style:none;padding:0;margin:14px 0}
.passos li{counter-increment:p;position:relative;padding:10px 0 10px 46px;border-top:1px solid var(--linha)}
.passos li::before{content:counter(p);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:9px;background:var(--teal-suave);color:var(--teal);display:grid;place-items:center;font-weight:700;font-size:.88rem}
.roteiro p{margin:.6em 0}
.pausa{display:inline-block;font-size:.78rem;color:var(--fraco);border:1px solid var(--linha);border-radius:6px;padding:0 7px;margin-right:6px}
details summary{cursor:pointer;color:var(--teal);font-weight:500;margin:8px 0}
audio{width:100%;margin:10px 0}
.sem-audio{font-size:.9rem;color:var(--suave)}
.cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.carta{background:var(--card-2);border:1px solid var(--linha);border-radius:16px;padding:20px;font:400 1rem/1.55 var(--fonte);min-height:108px;display:flex;align-items:center}
.carta.destaque{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-suave)}
.sorteio{margin:10px 0 14px}
.manter{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.manter{grid-template-columns:1fr}}
.manter ul{padding-left:20px;margin:6px 0}.manter h3{margin-top:.4em}

/* Conteúdo trancado */
.trancado{position:relative;overflow:hidden;min-height:340px}
.trancado .veu{filter:blur(6px);user-select:none;pointer-events:none;opacity:.5}
.trancado .cadeado{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(180deg,transparent,var(--card) 58%)}
.cadeado strong{display:block;font-size:1.2rem;margin-bottom:4px}
.cadeado p{color:var(--suave)}

/* Recursos, histórias, fichas */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.filtros button{border:1px solid var(--linha);background:var(--card);color:var(--suave);border-radius:999px;padding:6px 14px;font:500 .88rem var(--fonte);cursor:pointer}
.filtros button.ativo{background:var(--texto);color:var(--bg);border-color:var(--texto)}
input[type=search],input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{width:100%;padding:12px 14px;border:1px solid var(--linha-forte);border-radius:12px;font:inherit;font-family:var(--fonte);background:var(--card);color:var(--texto)}
.recurso{display:flex;flex-direction:column;gap:4px}
.recurso .meta{font-size:.8rem;color:var(--fraco)}
.historia .pergunta{color:var(--indigo);border-left:3px solid var(--indigo);padding-left:14px;margin-top:14px}
.ficha table{width:100%;border-collapse:collapse}
.ficha td{border:1px solid var(--linha-forte);padding:10px;vertical-align:top}
.ficha td.campo{width:42%;font-weight:500;background:var(--card-2)}
.ficha td.resp{height:62px}

/* Escalas */
.item{border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;margin:12px 0;background:var(--card)}
.item legend{font-weight:500;padding:0 4px;display:flex;gap:10px;align-items:flex-start}
.item .num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--indigo-bg);color:var(--indigo);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.opcoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.opcoes label{flex:1 1 140px;border:1px solid var(--linha);border-radius:10px;padding:9px 11px;cursor:pointer;font-size:.9rem;display:flex;gap:8px;align-items:center}
.opcoes input{accent-color:var(--teal)}
.opcoes label:has(input:checked){border-color:var(--teal);background:var(--teal-suave)}
.instrucao{background:var(--card);border-left:3px solid var(--indigo);padding:12px 16px;border-radius:10px}
#resultado{background:var(--card);border:1px solid var(--teal);border-radius:var(--raio-g);padding:24px;margin:24px 0}
#resultado table{border-collapse:collapse;margin:8px 0}
#resultado th{text-align:left;padding:6px 18px 6px 0;color:var(--suave);font-weight:400}
#resultado td{font-weight:600;padding:6px 0}
.alerta{background:var(--alerta-bg);color:var(--alerta);border-radius:12px;padding:14px 16px;font-weight:500;margin-bottom:12px}
.aviso{font-size:.88rem;color:var(--suave)}
.ref{font-size:.82rem;color:var(--fraco);margin-top:26px}

/* Minha trilha */
.lista-trilha{list-style:none;padding:0}
.lista-trilha li{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:10px 12px;margin:8px 0}
.lista-trilha li.feito .tit a{text-decoration:line-through;color:var(--fraco)}
.lista-trilha .tit{flex:1}
.lista-trilha .tipo{font-size:.76rem;color:var(--teal);display:block}
.lista-trilha button{border:1px solid var(--linha);background:transparent;color:var(--texto);border-radius:8px;width:34px;height:34px;cursor:pointer}
.lista-trilha input{accent-color:var(--teal);width:20px;height:20px}
.add-trilha{margin-top:12px}
.add-trilha.ok{background:var(--teal-suave);color:var(--teal);border-color:var(--teal)}

/* Formulários e admin */
.form{max-width:440px}.form label{display:block;margin:14px 0 6px;font-weight:500}
.msg{padding:12px 14px;border-radius:12px;background:var(--teal-suave);color:var(--teal);margin:12px 0}
.msg.erro{background:var(--alerta-bg);color:var(--alerta)}
table.adm{width:100%;border-collapse:collapse;font-size:.9rem}
table.adm th,table.adm td{border-bottom:1px solid var(--linha);padding:9px 8px;text-align:left;vertical-align:top}
.rolar{overflow-x:auto}

/* WhatsApp flutuante e rodapé */
.zap{position:fixed;right:16px;bottom:16px;z-index:50;background:#25d366;color:#06301a;font-weight:600;text-decoration:none;border-radius:999px;padding:12px 18px;font-size:.95rem}
:root[data-modo="contraste"] .zap{background:#ffe600;color:#000}
footer.rodape{margin-top:64px;border-top:1px solid var(--linha);padding:30px 0 80px;font-size:.88rem;color:var(--suave)}
.aviso-crise{font-size:.84rem;margin-top:10px}

@media print{.conforto,header.topo,.trilho,.zap,.btn,.filtros,.sorteio,.add-trilha,.acoes,.nao-imprimir,footer.rodape{display:none!important}
 :root{--bg:#fff;--card:#fff;--card-2:#f5f5f5;--texto:#000;--suave:#333;--linha:#bbb;--linha-forte:#999}
 body{font-size:12pt}.bloco,.card,.item{border-color:#bbb}.so-impressao{display:block!important}}
.so-impressao{display:none}
.rotulo{display:block;font-size:.88rem;color:var(--teal);font-weight:500;margin-bottom:2px}
@media(max-width:640px){.zap{padding:9px 14px;font-size:.84rem;right:12px;bottom:12px}}

/* Leitura longa: artigos, roteiros e histórias */
.leitura p,.roteiro p,.historia p{font-size:1.04em;line-height:1.75;max-width:68ch;color:var(--texto)}
.leitura h2{margin-top:1.4em}
.hero p.lead{font-size:1.12em;line-height:1.65}
.card h3{font-size:1.15rem}
/* Índice editorial das trilhas */
.indice{list-style:none;margin:6px 0 30px;padding:0;border-top:1px solid var(--linha)}
.indice li{border-bottom:1px solid var(--linha)}
.indice a{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:6px 28px;align-items:baseline;padding:18px 4px;text-decoration:none;color:inherit}
.indice a:hover .t{color:var(--teal)}
.indice .t{font:600 1.15rem/1.3 var(--fonte);color:var(--texto)}
.indice .r{color:var(--suave);font-size:.95rem;line-height:1.55}
@media(max-width:640px){.indice a{grid-template-columns:1fr}}
h2.grupo-tit{font:600 .8rem var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:2.4em 0 .4em}