/* Rótulos das seções em pílula com a árvore da marca (o mesmo padrão de "Músicas"), centralizados e um pouco maiores.
   Vem por último para desfazer ajustes antigos que tinham trocado a pílula por fios. */
.ajuda.has-mural p.eyebrow,.checkin.ci2 p.eyebrow,.reflexoes p.eyebrow,.metodo p.eyebrow,.discos p.eyebrow{
  display:flex;align-items:center;gap:10px;width:fit-content;margin:0 auto 20px !important;padding:9px 18px 9px 12px;
  border:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:999px;background:none;
  font:600 clamp(13px,1vw,14.5px) var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
.ajuda.has-mural p.eyebrow::before,.checkin.ci2 p.eyebrow::before,.reflexoes p.eyebrow::before,.metodo p.eyebrow::before,.discos p.eyebrow::before{
  content:'';display:block;width:20px;height:20px;flex:none;opacity:1;border:0;background:currentColor;
  -webkit-mask:url(assets/simbolo-arvore-creme.webp) center/contain no-repeat;mask:url(assets/simbolo-arvore-creme.webp) center/contain no-repeat}
.ajuda.has-mural p.eyebrow::after,.checkin.ci2 p.eyebrow::after{content:none;display:none}
.ajuda.has-mural p.eyebrow,.checkin.ci2 p.eyebrow{color:#5b2a86}

/* ---------- textos centrais: Abordagem, Músicas e Biblioteca ---------- */
.metodo .metodo-head{text-align:center;max-width:860px;margin-left:auto;margin-right:auto}
.metodo .metodo-head h2{margin-left:auto;margin-right:auto;max-width:18ch}
.metodo .metodo-head .lede{margin-left:auto;margin-right:auto;max-width:56ch}

.discos > .wrap > h2,.discos > .wrap > .lede{text-align:center;margin-left:auto;margin-right:auto}
.discos > .wrap > h2{max-width:16ch}
.discos > .wrap > .lede{max-width:58ch}

/* Biblioteca: cabeçalho no centro; a ficha do livro desce para baixo da estante, também no centro */
.reflexoes .estante-head{text-align:center}
.reflexoes .estante-head h2{margin-left:auto;margin-right:auto}
.reflexoes .estante-head .lede{margin-left:auto;margin-right:auto;max-width:52ch}
.bib2 .estante{grid-template-columns:1fr;justify-items:center;gap:clamp(8px,1.5vw,18px);margin-top:clamp(12px,2vw,24px)}
.bib2 .estante-scene{order:1;width:min(980px,100%)}
.bib2 .estante-info{order:2;width:min(640px,100%);text-align:center;padding:0}
.bib2 .estante-info::before{left:50%;top:auto;bottom:auto;width:60px;height:3px;transform:translate(-50%,-14px)}
.bib2 .ei-top{justify-content:center}
.bib2 .ei-title{margin-left:auto;margin-right:auto;max-width:22ch;font-size:clamp(1.5rem,2.4vw,2.1rem)}
.bib2 .ei-dek{margin-left:auto;margin-right:auto;max-width:48ch}
.bib2 .ei-actions{justify-content:center}
.bib2 .ei-hint{text-align:center}
.reflexoes.is-pin > .wrap{padding-block:clamp(70px,9vh,96px) 16px}
@media (min-width:900px){ .bib2 .estante-scene.is-photo{aspect-ratio:2/1;width:min(860px,100%)} }   /* corta a parte escura de baixo: cabe tudo numa tela */
/* Biblioteca: tudo cabe numa tela (a seção fica presa enquanto a pessoa troca de livro) */
.bib2 .estante{display:flex;flex-direction:column;align-items:center;width:auto;max-width:100%}
@media (min-width:900px){
  .bib2 .estante-scene.is-photo{width:min(760px,100%)}
  .bib2 .estante-info{width:min(600px,100%)}
  .bib2 .ei-hint{display:none}
  .bib2 .ei-top{margin-bottom:8px}
  .bib2 .ei-title{margin:6px auto 8px;font-size:clamp(1.35rem,2vw,1.8rem)}
  .bib2 .ei-dek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px}
  .bib2 .ei-actions{margin-top:14px}
  .reflexoes .estante-head .lede{margin-top:10px}
}
@media (min-width:900px){
  .bib2 .estante-scene.is-photo{width:min(680px,100%)}
  .reflexoes.is-pin > .wrap{padding-block:clamp(60px,8vh,84px) 10px}
}
@media (min-width:900px){ .reflexoes.bib2.is-pin > .wrap{padding-block:clamp(60px,7vh,72px) 12px} }

/* Biblioteca lapidada: a estante se ajusta à ALTURA da tela (notebook 768px também cabe inteiro, com o título visível) */
@media (min-width:900px){
  .bib2 .estante-scene.is-photo{width:clamp(400px,calc((100svh - 520px) * 2),720px) !important;max-width:100%}
  .reflexoes.bib2 .estante-head h2{font-size:clamp(2rem,min(4vw,6.4svh),3.4rem);line-height:1.02}
  .reflexoes.bib2 .estante-head .lede{margin-top:8px;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.5}
  .reflexoes.bib2 p.eyebrow{margin-bottom:12px !important}
  .bib2 .estante{margin-top:4px;gap:6px}
  .bib2 .ei-title{margin:4px auto 6px;font-size:clamp(1.3rem,min(2vw,3.6svh),1.8rem)}
  .bib2 .ei-actions{margin-top:10px}
}
@media (min-width:900px) and (max-height:820px){ .bib2 .ei-dek{-webkit-line-clamp:1} }

/* ---------- botões do site em pílula (o mesmo desenho do botão de "Encontre o que te faz") ---------- */
.btn{border-radius:999px !important;padding:16px 30px}
.btn-primary{box-shadow:0 14px 32px -16px rgba(29,20,36,.55)}
.btn-primary:hover{box-shadow:0 20px 40px -16px rgba(29,20,36,.6)}
button[type=submit]{border-radius:999px}

/* ---------- botões "borda de luz" (escolha da Rafaella): uma luz âmbar percorre a borda devagar, sem piscar ---------- */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn,.enc-btn,.pc-wa{position:relative;isolation:isolate}
.btn::before,.enc-btn::before,.pc-wa::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang),rgba(245,158,11,0) 0deg,#f59e0b 40deg,#ffd38a 70deg,rgba(245,158,11,0) 120deg,rgba(245,158,11,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:btnLuz 4.5s linear infinite}
@keyframes btnLuz{to{--ang:360deg}}
/* principal: roxo profundo com texto claro (a luz âmbar contorna) */
.btn-primary,.enc-btn,.pc-wa{background:#2a1238 !important;color:#fff7ea !important;border:0 !important;box-shadow:0 16px 34px -18px rgba(42,18,56,.7) !important}
.btn-primary:hover,.enc-btn:hover,.pc-wa:hover{background:#3a1850 !important;transform:translateY(-2px)}
/* secundário: transparente; a luz segue a cor do texto */
.btn-ghost{background:transparent !important;border:1px solid color-mix(in srgb,currentColor 22%,transparent) !important;opacity:1}
.btn-ghost::before{background:conic-gradient(from var(--ang),transparent 0deg,currentColor 50deg,transparent 110deg,transparent 360deg)}
.btn:focus-visible,.enc-btn:focus-visible,.pc-wa:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .btn::before,.enc-btn::before,.pc-wa::before{animation:none;background:linear-gradient(#f59e0b,#f59e0b)} .btn-ghost::before{background:linear-gradient(currentColor,currentColor);opacity:.35} }

/* ---------- Sobre mim: a foto de perfil sozinha, como uma foto impressa (escolha da Rafaella: sombra preta) ----------
   Sai o bloco roxo deslocado atrás e o véu roxo por cima (davam cara artificial). As fotos da trajetória continuam embaixo. */
.sobre .portrait-frame{display:none !important}
.sobre .portrait-wrap{max-width:380px}
.sobre .portrait{aspect-ratio:auto;padding:14px 14px 48px;border-radius:3px;background:#fffdf8;overflow:visible;
  transform:rotate(-2.5deg);box-shadow:0 30px 50px -24px rgba(20,12,16,.62),0 3px 8px rgba(20,12,16,.16);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sobre .portrait:hover{transform:rotate(-1deg) translateY(-4px)}
.sobre .portrait::after{display:none}
.sobre .portrait img{display:block;aspect-ratio:4/5;height:auto;border-radius:1px;filter:none}
@media (max-width:860px){ .sobre .portrait-wrap{max-width:290px;margin:0 auto 12px} }
@media (prefers-reduced-motion:reduce){ .sobre .portrait{transition:none} }

/* botão principal: laranja, com a luz em roxo contornando por fora (pedido da Rafaella) */
.btn-primary,.enc-btn,.pc-wa{background:#f59e0b !important;color:#1d1424 !important;box-shadow:0 0 0 1px rgba(82,17,128,.25),0 16px 34px -16px rgba(150,80,0,.55),0 0 26px -6px rgba(140,60,200,.45) !important}
.btn-primary:hover,.enc-btn:hover,.pc-wa:hover{background:#fbb13a !important}
.btn-primary::before,.enc-btn::before,.pc-wa::before{inset:-3px;padding:2px;
  background:conic-gradient(from var(--ang),rgba(130,50,200,0) 0deg,#8b3fd1 40deg,#d4a6ff 70deg,rgba(130,50,200,0) 120deg,rgba(130,50,200,0) 360deg)}
@media (prefers-reduced-motion:reduce){ .btn-primary::before,.enc-btn::before,.pc-wa::before{background:linear-gradient(#8b3fd1,#8b3fd1)} }
/* escrita branca em todos os botões laranja (pedido da Rafaella); uma sombra leve no texto ajuda a leitura sobre o laranja */
.btn-primary,.enc-btn,.pc-wa,.nav-cta,.mm-cta,.cv-ir,.dk-rail-tocar,.plq-perto{color:#fff !important;text-shadow:0 1px 2px rgba(110,50,0,.45)}
/* hero: os dois botões ficam laranja com escrita branca e a mesma luz roxa por fora */
.hf .hf-cta .btn-ghost{background:#f59e0b !important;color:#fff !important;border:0 !important;text-shadow:0 1px 2px rgba(110,50,0,.45);box-shadow:0 0 0 1px rgba(82,17,128,.25),0 16px 34px -16px rgba(150,80,0,.55),0 0 26px -6px rgba(140,60,200,.45) !important}
.hf .hf-cta .btn-ghost:hover{background:#fbb13a !important}
.hf .hf-cta .btn-ghost::before{inset:-3px;padding:2px;opacity:1;background:conic-gradient(from var(--ang),rgba(130,50,200,0) 0deg,#8b3fd1 40deg,#d4a6ff 70deg,rgba(130,50,200,0) 120deg,rgba(130,50,200,0) 360deg)}