/* home-v5 (09/10/2026): ajustes pedidos por Beto sobre a home v4 aprovada. Tudo que muda o visual mora aqui, por cima de estilo.css.
   1. Botões: um padrão só para a home inteira (a matéria do botão do BCios, escolhida por Beto em 09/10 no estudo botoes-v5/, versão P),
      com a luz da borda seguindo a mão e pouco balanço (js/v5.js).
   2. Cabeçalho fixo desde a entrada (marca à esquerda, som e menu em ícone à direita) e o painel do menu.
   3. Card do Ato II, fecho e citação do Ato IV mais legíveis; rótulo "Casos contados" maior.
   4. Rodapé: frase de Beto e ícones à esquerda, colunas à direita, conjunto centrado. */


:root{
  --l5:#ff6400; --r5:#ff0063; --p5:#8a3dff; --a5:#384fe1; --c5:#2e82d4;
  --cheio5:linear-gradient(100deg, var(--l5) 0%, var(--r5) 52%, var(--p5) 100%);
  --fundo-bt5:#07070f;
}

/* ---------- 1. botões ---------- */
/* 09/10: Beto escolheu a versão P do estudo (botoes-v5/, rodada 4): a matéria do botão do BCios (protótipo 09 do Codex, 20/09),
   nas cores da marca. Vidro escuro e opaco, linha de luz no topo, sombra por dentro embaixo; dentro, uma cor viva (.sup, plasma
   laranja, rosa, roxo e azul) quase apagada parada, que acende sob a mão; a luz da borda (.halo) acende no ponto mais perto do mouse
   e vai atrás dele. O corpo não se mexe: o balanço fazia a letra parecer tremer (Beto, 09/10). Os dois spans moram em cada botão,
   postos por js/v5.js. */
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link){
  position:relative; isolation:isolate; overflow:visible;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:58px; padding:0 30px; margin-top:0;
  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; text-decoration:none; text-transform:none; letter-spacing:.005em; white-space:nowrap;
  font:600 16px/1 'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  cursor:pointer; animation:none;
  transition:background .42s ease, border-color .42s ease, box-shadow .62s ease, color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link)::before, body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link)::after{content:none; display:none}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link) .seta{display:inline-block; color:#fff; font-family:'PT Mono',ui-monospace,monospace; font-size:16px; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
/* principais: um pouco mais claros, com um fio de luz quente por baixo */
body :is(.a1-botao.principal, .port-btn.primario, .caso-link, .cit-link, .epi-botao, .porta[data-som="sim"]){
  color:#fff; border-color:rgba(255,255,255,.29); 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);
}
/* a cor viva por dentro */
.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,.55) 20%, rgba(138,61,255,.7) 34%, rgba(255,0,99,.74) 49%, rgba(255,100,0,.6) 61%, rgba(255,255,255,.5) 70%, rgba(46,130,212,.5) 82%, 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}
/* 09/10 (Beto: "falta algo pra diferenciar um e outro no sentido cor"): o secundário fica frio (roxo e azul), o principal quente
   (laranja e rosa), e o principal já vem um pouco mais aceso parado */
.sup5::before{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%)}
body :is(.a1-botao.principal, .port-btn.primario, .caso-link, .cit-link, .epi-botao, .porta[data-som="sim"]) .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%)}
body :is(.a1-botao.principal, .port-btn.primario, .caso-link, .cit-link, .epi-botao, .porta[data-som="sim"]){border-color:rgba(255,170,120,.44)}
body :is(.a1-botao.principal, .port-btn.primario, .caso-link, .cit-link, .epi-botao, .porta[data-som="sim"]):is(:hover, :focus-visible) .sup5::before{opacity:.72}
@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)}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link):is(:hover, :focus-visible) .sup5::before{opacity:.64; filter:blur(12px) saturate(1.7)}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link):is(:hover, :focus-visible) .sup5::after{opacity:1; transform:scale(1)}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link):is(:hover, :focus-visible){
  color:#fff; 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);
}
body :is(.a1-botao.principal, .port-btn.primario, .caso-link, .cit-link, .epi-botao, .porta[data-som="sim"]):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)}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link):is(:hover, :focus-visible) .seta{transform:translateX(5px)}
body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link):focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
body .port-btn[data-acao="embaralha"]:hover .seta{transform:rotate(90deg)}
/* 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%)}
body .epi-botao{min-height:64px; padding:0 36px; font-size:17px}
body .cartao-link{min-height:46px; padding:0 22px; font-size:14px; align-self:flex-start}
body .porta{min-height:52px}
body .port-btn{pointer-events:none}
body .port-coluna.ativo .port-btn{pointer-events:auto}
@media (max-width:760px){
  body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .porta){min-height:50px; padding:0 20px; font-size:15px}
  body .cartao-link{align-self:center}
}
@media (prefers-reduced-motion:reduce){
  body :is(.a1-botao, .port-btn, .caso-link, .cit-link, .botao8, .epi-botao, .porta, .cartao-link){transition:none}
  .sup5::before{animation:none}
}

/* ---------- 2. cabeçalho e menu ---------- */
.a1-canto{display:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
#cab5{position:fixed; left:0; right:0; top:0; z-index:19; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) clamp(16px,3.4vw,48px) 14px;
  background:linear-gradient(rgba(0,0,10,.55), rgba(0,0,10,0)); pointer-events:none}
#cab5 > *{pointer-events:auto}
.cab5-marca{display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; min-height:44px}
/* 09/10 (Beto): a marca original no topo, a Prancheta 14 (capacete, Beto Canuto, Business Creative), recortada no desenho, sem redesenho */
.cab5-marca img.cab5-logo{width:auto; height:40px; display:block}
@media (max-width:760px){ .cab5-marca img.cab5-logo{height:32px} }
.cab5-marca .mono{font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.cab5-marca i{font-style:normal; color:rgba(255,255,255,.55)}
.cab5-acoes{display:flex; align-items:center; gap:10px}
#cab5 #botao-som, #cab5 #botao-play{position:static; padding:10px 12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(216,216,222,.8); background:none; border:0; cursor:pointer}
#cab5 #botao-som:hover, #cab5 #botao-play:hover{color:#fff}
.cab5-menu{position:relative; width:48px; height:48px; border-radius:50%; border:1.5px solid transparent; cursor:pointer;
  border:1px solid rgba(255,255,255,.26); background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -14px rgba(0,0,0,.85);   /* 09/10: vidro, como os botões */
  display:grid; place-content:center; gap:6px; transition:box-shadow .3s, background .3s, translate .35s cubic-bezier(.2,.8,.2,1)}
.cab5-menu:hover, .cab5-menu:focus-visible{background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)); border-color:rgba(255,255,255,.45); translate:0 2px; outline:none}
.cab5-menu:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.cab5-traco{display:block; width:18px; height:1.6px; border-radius:2px; background:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s}
.cab5-traco + .cab5-traco{width:12px; justify-self:end}
.cab5-menu:hover .cab5-traco + .cab5-traco{width:18px}
.cab5-menu[aria-expanded="true"] .cab5-traco{transform:translateY(3.8px) rotate(45deg)}
.cab5-menu[aria-expanded="true"] .cab5-traco + .cab5-traco{width:18px; transform:translateY(-3.8px) rotate(-45deg)}
@media (max-width:760px){ .cab5-marca i{display:none} #cab5 #botao-som, #cab5 #botao-play{padding:10px 6px} }
/* home-v6: com o botão de pausar ao lado do som, os dois ficam numa linha só no celular */
#cab5 #botao-som, #cab5 #botao-play{white-space:nowrap}
@media (max-width:420px){ .cab5-acoes{gap:2px} #cab5 #botao-som, #cab5 #botao-play{padding:10px 4px; letter-spacing:.08em; font-size:10px} }

#menu5{position:fixed; inset:0; z-index:18; background:#00000a; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .35s ease}
#menu5.aberto{opacity:1}
.menu5-luz{position:fixed; inset:-20%; pointer-events:none; opacity:.55; filter:blur(60px);
  background:radial-gradient(40% 35% at 18% 80%, rgba(255,100,0,.55), transparent 70%), radial-gradient(35% 30% at 45% 95%, rgba(255,0,99,.5), transparent 70%),
             radial-gradient(35% 35% at 75% 85%, rgba(138,61,255,.45), transparent 70%), radial-gradient(30% 30% at 95% 60%, rgba(56,79,225,.4), transparent 70%);
  animation:luz5 18s ease-in-out infinite alternate}
@keyframes luz5{to{transform:translate3d(-4%, -3%, 0) rotate(4deg) scale(1.08)}}
.menu5-in{position:relative; min-height:100%; max-width:1280px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center;
  padding:calc(110px + env(safe-area-inset-top, 0px)) clamp(16px,5vw,80px) calc(48px + env(safe-area-inset-bottom, 0px))}
.menu5-nav{display:flex; flex-direction:column}
.menu5-nav a{display:flex; align-items:baseline; gap:18px; color:#fff; text-decoration:none; text-transform:uppercase;
  font-family:var(--font-tensao); font-weight:650; font-size:calc(clamp(3rem,7vw,6.2rem) * var(--tallica-escala)); line-height:1.42; word-spacing:var(--tallica-palavra);
  transition:color .25s, transform .45s cubic-bezier(.2,.8,.2,1)}
.menu5-nav a:focus-visible{outline:none}
/* 09/10: o degradê do hover mora só no nome (.menu5-t); antes pintava também o número na posição antiga dele e o número parecia sair do lugar */
.menu5-t{display:inline-block; transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.menu5-nav a:is(:hover, :focus-visible) .menu5-t{background:var(--cheio5); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; translate:10px 0}
.menu5-n{font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.45); position:relative; top:-.6em; flex:none}
.menu5-lado{display:flex; flex-direction:column; gap:22px}
.menu5-rot{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0}
.menu5-sol{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid rgba(255,255,255,.12)}
.menu5-sol a{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none; transition:padding .3s, color .2s}
.menu5-sol strong{font:600 17px/1.2 var(--font-estrutura)}
.menu5-sol span{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.menu5-sol a:hover, .menu5-sol a:focus-visible{padding-left:10px; outline:none}
.menu5-sol a:hover span{color:var(--l5)}
.menu5-acoes{display:flex; flex-wrap:wrap; gap:12px}
#menu5 .a1-botao{pointer-events:auto}
/* entrada em cascata */
#menu5 :is(.menu5-nav a, .menu5-lado > *){opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
#menu5.aberto :is(.menu5-nav a, .menu5-lado > *){opacity:1; transform:none}
#menu5.aberto .menu5-nav a:nth-child(2){transition-delay:.05s} #menu5.aberto .menu5-nav a:nth-child(3){transition-delay:.1s} #menu5.aberto .menu5-nav a:nth-child(4){transition-delay:.15s}
#menu5.aberto .menu5-lado > *:nth-child(1){transition-delay:.12s} #menu5.aberto .menu5-lado > *:nth-child(2){transition-delay:.18s} #menu5.aberto .menu5-lado > *:nth-child(3){transition-delay:.24s} #menu5.aberto .menu5-lado > *:nth-child(4){transition-delay:.3s}
#menu5.aberto .menu5-nav a:hover{transition-delay:0s}
@media (max-width:860px){
  .menu5-in{grid-template-columns:minmax(0,1fr); align-items:start; gap:36px; padding-top:calc(96px + env(safe-area-inset-top, 0px))}
}
@media (prefers-reduced-motion:reduce){ .menu5-luz{animation:none} #menu5, #menu5 *{transition:none!important} }

/* ícones das redes (menu e rodapé) */
.icones5{list-style:none; margin:0; padding:0; display:flex; gap:10px}
.icones5 a{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#fff; border:1.5px solid transparent;
  background:linear-gradient(#07070f,#07070f) padding-box, linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) border-box; transition:background .3s, box-shadow .3s, translate .4s cubic-bezier(.2,.8,.2,1)}
.icones5 svg{width:20px; height:20px; display:block}
.icones5 a:hover, .icones5 a:focus-visible{background:linear-gradient(180deg, rgba(255,140,60,.4), rgba(255,100,0,.14)) padding-box, linear-gradient(rgba(255,190,130,.8), rgba(255,190,130,.8)) border-box; box-shadow:inset 0 1px 0 rgba(255,210,170,.45), 0 0 28px -8px rgba(255,100,0,.55); translate:0 2px; outline:none}   /* 09/10: vidro laranja, como o botão principal */

/* ---------- 3. legibilidade ---------- */
/* o card e o fecho do Ato II ficam acima das linhas de tela velha (que apagavam o texto); o grão continua por cima */
#um, #fecho{z-index:4}
.um-l{display:block}
.um-apoio{color:#fff}
.fecho-frase{color:#fff; text-shadow:0 2px 30px rgba(0,0,10,.6)}
.fecho-aviso{color:#fff; font-size:clamp(1rem,1.3vw,1.18rem); font-family:var(--font-estrutura); font-weight:600}

/* citação do Ato IV: a chamada vem antes e prepara a frase */
.traj-citacao{gap:clamp(18px,2.4vw,28px)}
.cit-apoio{display:flex; align-items:center; gap:14px; max-width:none; margin:0; color:#fff; font-family:var(--font-estrutura); font-weight:600;
  font-size:clamp(1.02rem,1.45vw,1.3rem); line-height:1.35; text-wrap:balance}
.cit-apoio::before{content:""; flex:0 0 clamp(28px,4vw,56px); height:2px; border-radius:2px; background:var(--cheio5)}
body .cit-link{border-bottom:0; padding-bottom:0}

/* "Casos contados" deixa de ser etiqueta e vira título de seção */
.casos-rotulo{font-family:var(--font-tensao); font-weight:650; text-transform:uppercase; letter-spacing:0; color:#fff;
  font-size:calc(clamp(2.4rem,4.4vw,4.2rem) * var(--tallica-escala)); line-height:1.4; word-spacing:var(--tallica-palavra); top:calc(7vh + 40px)}

/* ---------- 4. rodapé ---------- */
.epi-rodape .in{max-width:1180px; margin-inline:auto; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start; justify-items:stretch; text-align:left; column-gap:clamp(40px,7vw,120px); row-gap:48px}
.rod5-esq{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.rod5-esq .epi-assinatura{margin:0; max-width:16ch; text-align:left}
.epi-rodape .cols-rodape{max-width:none; justify-items:end; text-align:right}
.epi-rodape .col-rodape{justify-items:end}
.epi-rodape .legal{grid-column:1/-1; text-align:center}
@media (max-width:760px){
  .epi-rodape .in{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}
  .rod5-esq{align-items:center}
  .rod5-esq .epi-assinatura{text-align:center}
  .epi-rodape .cols-rodape, .epi-rodape .col-rodape{justify-items:center; text-align:center}
}

/* ---------- 5. fonte dos títulos (escolha de Beto em 09/10): Monument Normal Black nos títulos, Monument Condensed Black no card do Ato II ----------
   As variáveis da Tallica continuam com o mesmo nome (todas as regras de título passam por elas), com os valores da Monument:
   a Monument é larga e baixa, então a escala cai e a entrelinha fecha; o acento não sobe como na Tallica. */
@font-face{font-family:'Monument Normal';src:url('fonts/PPMonumentNormal-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Monument Condensed';src:url('fonts/PPMonumentCondensed-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
  --font-tensao:'Monument Normal','Arial Black',sans-serif;
  --tallica-escala:.52; --tallica-lh:1.12; --tallica-lh-bloco:1.14; --tallica-palavra:.02em;
}
/* os cards de marca do Ato III continuam variando de família: o "f-tensao" deles segue na Tallica */
.f-tensao{font-family:'Tallica','Arial Narrow',sans-serif}
.um-frase{font-family:'Monument Condensed','Arial Narrow',sans-serif; color:#fff; font-size:calc(clamp(2.2rem,4.6vw,3.6rem) * .66); line-height:1.06; letter-spacing:0; word-spacing:.02em; padding-top:0}
.um-l + .um-l{margin-top:.12em}

/* Ato II: a frase do inimigo antes do mar de iguais */
#internet{position:absolute; left:50%; top:50%; z-index:4; margin:0; width:min(1100px, calc(100vw - 32px)); transform:translate(-50%,-50%);
  text-align:center; font-family:var(--font-tensao); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:calc(clamp(2.6rem, 6.2vw, 7rem) * var(--tallica-escala)); line-height:var(--tallica-lh-bloco); word-spacing:var(--tallica-palavra);
  text-shadow:0 4px 40px rgba(0,0,10,.75); opacity:0; pointer-events:none}
.int-l{display:block}

/* card VOCÊ com a frase embaixo */
#voce{flex-direction:column; gap:14px; padding:24px}
#voce p:first-child{font-size:calc(clamp(4.2rem, 9vw, 6.4rem) * .62); line-height:1; padding-top:0}
#voce .voce-sub{font-family:var(--font-estrutura); font-weight:600; text-transform:none; color:#fff; font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.3; text-align:center; max-width:15ch; letter-spacing:0; padding:0}
/* hero: na Monument o título precisa de mais corpo que a escala geral */
.a1-tese{font-size:clamp(2.3rem, 4.2vw, 5.6rem); line-height:1.08; padding-top:0; letter-spacing:0}   /* 09/10: Beto pediu título maior (era clamp(2rem, 3.4vw, 4.4rem)) */
.a1-hero{width:min(56vw, 60rem)}
.a1-tese .a1-linha{white-space:nowrap}   /* as três linhas da tese ficam como foram escritas */
@media (max-width:760px){ .a1-tese{font-size:clamp(1.6rem, 7.4vw, 2.2rem)} }
/* casos: o título fica embaixo do cabeçalho e o caso desce um pouco para não encostar nele */
.casos-rotulo{top:calc(78px + env(safe-area-inset-top, 0px))}
.caso7{top:calc(50% + 44px)}
.epi-rodape .in{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr)}
.epi-rodape .cols-rodape{grid-template-columns:repeat(4,minmax(max-content,auto)); justify-content:end; column-gap:clamp(28px,3.4vw,56px)}
@media (max-width:1100px){ .epi-rodape .cols-rodape{grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch} }
#fim{top:auto; bottom:24px}

/* ---------- home-v5, 09/10 (retorno de Beto) ---------- */
/* aurora reserva: entra só quando o WebGL falta ou cai (js/ato3.js, Aurora.reserva); o canvas nunca mostra branco por trás */
#aurora{background:var(--campo-lente)}
.aurora-css{position:absolute; inset:0; pointer-events:none; --sobe:1;
  background:
    radial-gradient(120% 70% at 30% 100%, rgba(255,100,0,.85), transparent 60%),
    radial-gradient(110% 65% at 72% 100%, rgba(255,0,99,.7), transparent 62%),
    radial-gradient(140% 80% at 50% 110%, rgba(85,0,160,.75), transparent 70%),
    linear-gradient(to top, rgba(56,79,225,.35), transparent 75%);
  transform:translateY(calc((1 - var(--sobe)) * 100%)); will-change:transform}
/* nenhuma palavra sozinha na última linha: títulos equilibram, textos corridos evitam a viúva */
:is(h1, h2, h3, h4, blockquote, .a1-tese, .um-frase, .sinal-frase, .lugar h3, .lugares-entrada, .voce-sub, #internet, .sinal p, .epi-frase) {text-wrap:balance}
:is(p, li, figcaption, .lugar p) {text-wrap:pretty}
/* Ato VI: letras da fórmula e do parágrafo maiores (Beto, 09/10) */
.eco-coluna{width:min(42vw, 700px)}
.eco-formula{font-size:calc(clamp(2.6rem, 4.5vw, 4.9rem) * var(--tallica-escala))}
.eco-lead{font-size:clamp(1.12rem, 1.5vw, 1.42rem); max-width:min(44ch, 34vw)}
@media (max-width:759px){ .eco-coluna{width:auto} .eco-formula{font-size:calc(2.05rem * var(--tallica-escala))} .eco-lead{font-size:1.02rem; max-width:none} }

/* 09/10: a transparência do hero vai em cada botão (js/ato1.js), para o vidro desfocar o que está atrás */
.a1-botoes{opacity:1}
.a1-botoes > .a1-botao{opacity:0}

/* 09/10: o botão do menu e os ícones das redes ganham a mesma matéria dos botões (versão P), no tom frio do secundário; js/v5.js põe
   neles a cor de dentro e a luz da borda. Sem descida nem movimento do corpo. */
body :is(.cab5-menu, .icones5 a){
  position:relative; isolation:isolate; overflow:visible; animation:none;
  border:1px solid rgba(255,255,255,.16); 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 -12px 22px rgba(0,0,10,.22);
  transition:background .42s ease, border-color .42s ease, box-shadow .62s ease;
}
body :is(.cab5-menu, .icones5 a):is(:hover, :focus-visible){
  translate:none; 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 -12px 24px rgba(0,0,10,.25), 0 12px 32px rgba(0,0,10,.24);
}
body :is(.cab5-menu, .icones5 a):focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
body :is(.cab5-menu, .icones5 a):is(:hover, :focus-visible) .sup5::before{opacity:.64; filter:blur(12px) saturate(1.7)}
body :is(.cab5-menu, .icones5 a):is(:hover, :focus-visible) .sup5::after{opacity:1; transform:scale(1)}
.cab5-traco, .icones5 svg{position:relative; z-index:1}

/* ---------- 6. home-v7 (25/10, Beto): sem tela de entrada; "Ligar o som" pisca no cabeçalho até o primeiro clique ---------- */
#cab5 #botao-som.pisca{color:#fff; animation:pisca7 1.4s ease-in-out infinite}
#cab5 #botao-som.pisca::before{content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; vertical-align:1px;
  background:var(--l5); box-shadow:0 0 10px 2px rgba(255,100,0,.55)}
@keyframes pisca7{0%,100%{opacity:1} 50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ #cab5 #botao-som.pisca{animation:none} }

/* home-v7 (25/10, Beto): filtro por categoria no portfólio inteiro (js/ato7.js).
   home-v8 (25/10, Beto: "os botões do portfólio não estão no padrão da home"): filtro, Fechar e as setas da peça aberta ganham a
   matéria dos botões da home (bloco 1); a categoria escolhida fica com a cor quente do botão principal. */
.todo-topo{gap:16px 24px; flex-wrap:wrap}
.todo-filtro{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; flex:1 1 auto}
body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar){
  position:relative; isolation:isolate; overflow:visible;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:0 20px; margin:0;
  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; text-decoration:none; text-transform:none; letter-spacing:.005em; white-space:nowrap;
  font:600 14px/1 'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .42s ease, border-color .42s ease, box-shadow .62s ease, color .25s ease;
}
body :is(.caixa-ant, .caixa-prox){min-width:44px; padding:0 16px; font-family:'PT Mono',ui-monospace,monospace; font-size:16px}
body .todo-filtro button[aria-pressed="true"]{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)}
body .todo-filtro button[aria-pressed="true"] .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%)}
body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar):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)}
body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar):is(:hover, :focus-visible) .sup5::before{opacity:.64; filter:blur(12px) saturate(1.7)}
body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar):is(:hover, :focus-visible) .sup5::after{opacity:1; transform:scale(1)}
body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar):focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
@media (max-width:759px){ .todo-filtro{order:3; flex-basis:100%; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 6px} .todo-filtro button{flex:none} }
@media (prefers-reduced-motion:reduce){ body :is(.todo-filtro button, .todo-fechar, .caixa-ant, .caixa-prox, .caixa-fechar){transition:none} }