/* Páginas internas no padrão da home v6 (pedido de Beto em 25/10/2026: logo, títulos e botões iguais aos da home).
   Mora por cima de visor.css (cópia do aprovado de 07/10), que segue intacto. Tudo vem de v5.css da home:
   1. Marca: o logotipo horizontal (Prancheta 14) no lugar do capacete com o nome em Tallica.
   2. Títulos: Monument Normal Black com a escala e a entrelinha da home (v5.css, bloco 5).
   3. Botões: a matéria do BCios (v5.css, bloco 1), com a luz da borda seguindo a mão (js/botoes.js). */

/* ---------- 1. marca ---------- */
.marca img.marca-logo{width:auto; height:40px; display:block}
@media (max-width:760px){ .marca img.marca-logo{height:32px} }

/* ---------- 2. títulos ---------- */
@font-face{font-family:'Monument Normal';src:url('fonts/PPMonumentNormal-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
  --f-tensao:'Monument Normal','Arial Black',sans-serif;
  --tallica-escala:.52; --tallica-lh:1.12; --tallica-palavra:.02em;
}
.titulo, .painel-menu nav a, .par .palavra, .capa-palavra, .post h2, .post h3, .assinatura{font-weight:900; letter-spacing:0}
.titulo.mega{line-height:1.08}
.painel-menu nav a{line-height:1.2; padding-block:14px}
.capa-palavra, .post h2, .post h3{line-height:1.15}
.assinatura{line-height:1.14; padding-top:0}

/* ---------- 3. botões ---------- */
.btn{
  position:relative; isolation:isolate; overflow:visible;
  justify-content:center; min-height:58px; padding:0 30px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(0,0,10,.32);
  -webkit-backdrop-filter:blur(16px) saturate(135%); backdrop-filter:blur(16px) saturate(135%);
  box-shadow:inset 0 1px rgba(255,255,255,.14), inset 0 -16px 30px rgba(0,0,10,.22);
  color:#fff; white-space:nowrap; letter-spacing:.005em;
  font:600 16px/1 var(--f-estrutura);
  -webkit-tap-highlight-color:transparent;
  transition:background .42s ease, border-color .42s ease, box-shadow .62s ease, color .25s ease;
}
.btn .seta{color:#fff; font-size:16px; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn.primario{border-color:rgba(255,170,120,.44); background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.28), inset 0 -22px 38px rgba(0,0,10,.22), 0 12px 42px rgba(255,0,99,.06)}
.btn:is(:hover, :focus-visible){outline:none; border-color:rgba(255,255,255,.38); background:rgba(10,7,24,.44);
  box-shadow:inset 0 1px rgba(255,255,255,.28), inset 0 -18px 34px rgba(0,0,10,.25), 0 16px 44px rgba(0,0,10,.24)}
.btn.primario:is(:hover, :focus-visible){border-color:rgba(255,205,180,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.29), inset 0 -18px 34px rgba(0,0,10,.25), 0 0 30px rgba(255,100,0,.12)}
.btn:is(:hover, :focus-visible) .seta{transform:translateX(5px)}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.btn:active{background:rgba(10,7,24,.6)}
.btn.pequeno{min-height:44px; padding:0 22px; font-size:15px}
@media (max-width:760px){ .btn{min-height:50px; padding:0 20px; font-size:15px} }

/* a cor viva por dentro: fria no secundário, quente e um pouco mais acesa no principal */
.sup5{position:absolute; z-index:-1; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none}
.sup5::before{content:""; position:absolute; inset:-80%; border-radius:44%;
  background:conic-gradient(from 30deg, transparent 0 12%, rgba(56,79,225,.6) 22%, rgba(138,61,255,.72) 38%, rgba(46,130,212,.55) 54%, rgba(255,255,255,.4) 66%, rgba(85,0,160,.55) 80%, transparent 94%);
  filter:blur(17px) saturate(1.45); mix-blend-mode:screen; opacity:.22; transform:translate(-7%,5%) rotate(-12deg);
  animation:vida5 10s ease-in-out infinite alternate;
  transition:opacity .5s ease, filter .7s ease}
.btn.primario .sup5::before{animation-duration:11.2s; animation-direction:alternate-reverse; opacity:.48;
  background:conic-gradient(from 30deg, transparent 0 12%, rgba(255,150,0,.6) 20%, rgba(255,100,0,.78) 34%, rgba(255,0,99,.74) 50%, rgba(255,244,219,.45) 64%, rgba(255,60,40,.6) 80%, transparent 94%)}
@keyframes vida5{0%{transform:translate(-9%,5%) rotate(-12deg) scale(.95)} 48%{transform:translate(8%,-7%) rotate(70deg) scale(1.08)} 100%{transform:translate(-2%,8%) rotate(155deg) scale(1)}}
.sup5::after{content:""; position:absolute; left:calc(var(--lx,.5)*100% - 55px); top:calc(var(--ly,.3)*100% - 55px); width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,219,.24), rgba(255,0,99,.08) 34%, transparent 68%); opacity:0; transform:scale(.45); transition:opacity .26s ease, transform .7s cubic-bezier(.16,1,.3,1)}
.btn:is(:hover, :focus-visible) .sup5::before{opacity:.64; filter:blur(12px) saturate(1.7)}
.btn.primario:is(:hover, :focus-visible) .sup5::before{opacity:.72}
.btn:is(:hover, :focus-visible) .sup5::after{opacity:1; transform:scale(1)}

/* a luz da borda que segue a mão */
.halo5{--bo:0; --go:0; --hx:50%; --hy:50%; position:absolute; z-index:1; inset:-1px; border-radius:inherit; pointer-events:none; isolation:isolate}
.halo5 i{position:absolute; border-radius:inherit; pointer-events:none}
.halo5 .malha5{inset:0; opacity:var(--bo);
  -webkit-mask-image:radial-gradient(circle 50px at var(--hx) var(--hy), #000 0 24%, rgba(0,0,0,.86) 52%, rgba(0,0,0,.35) 76%, transparent 100%);
  mask-image:radial-gradient(circle 50px at var(--hx) var(--hy), #000 0 24%, rgba(0,0,0,.86) 52%, rgba(0,0,0,.35) 76%, transparent 100%)}
.halo5 .malha5::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.15px;
  background:radial-gradient(at 80% 55%, #8a3dff 0, transparent 50%), radial-gradient(at 69% 34%, #ff0063 0, transparent 50%), radial-gradient(at 8% 6%, #ff6400 0, transparent 50%), radial-gradient(at 41% 38%, #8a3dff 0, transparent 50%), radial-gradient(at 86% 85%, #ff0063 0, transparent 50%), radial-gradient(at 82% 18%, #ff9600 0, transparent 50%), radial-gradient(at 51% 4%, #ff0063 0, transparent 50%), linear-gradient(#ff6400 0 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.halo5 .luz5{inset:-40px; z-index:-1; opacity:var(--go); mix-blend-mode:plus-lighter;
  -webkit-mask-image:radial-gradient(circle 62px at calc(var(--hx) + 40px) calc(var(--hy) + 40px), #000 0 16%, rgba(0,0,0,.92) 36%, rgba(0,0,0,.56) 62%, rgba(0,0,0,.18) 82%, transparent 100%);
  mask-image:radial-gradient(circle 62px at calc(var(--hx) + 40px) calc(var(--hy) + 40px), #000 0 16%, rgba(0,0,0,.92) 36%, rgba(0,0,0,.56) 62%, rgba(0,0,0,.18) 82%, transparent 100%)}
.halo5 .luz5::before{content:""; position:absolute; inset:40px; border-radius:inherit;
  box-shadow:inset 0 0 0 1px hsl(30 90% 78%), inset 0 0 3px hsl(30 90% 78%/50%), inset 0 0 6px hsl(30 90% 78%/40%), inset 0 0 15px hsl(30 90% 78%/30%), inset 0 0 25px 2px hsl(30 90% 78%/20%), 0 0 3px hsl(30 90% 78%/50%), 0 0 6px hsl(30 90% 78%/40%), 0 0 15px hsl(30 90% 78%/30%), 0 0 25px 2px hsl(30 90% 78%/20%), 0 0 50px 2px hsl(30 90% 78%/10%)}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .sup5::before{animation:none}
}