/* Páginas internas de betocanuto.com no Visor sóbrio (teste de 07/10/2026).
   Base: prototipo/modelo.html (Visor aprovado em 28/09) + rodapé da home v3 aprovada.
   Profundidade e movimento pedidos por Beto em 28/09: revelação na rolagem com a curva revelar,
   grão fino no campo, foto viva na abertura do Sobre, linha de leitura nos textos. Nada decorativo. */

@font-face{font-family:'Tallica';src:url('fonts/tallica-vf.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal Text';src:url('fonts/neue-montreal-text-book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal Text';src:url('fonts/neue-montreal-text-book-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('fonts/neue-montreal-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PT Mono';src:url('fonts/pt-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --campo:#00000a; --superficie:#05050f; --superficie-alta:#0b0b18;
  --core:#ff6400; --core-rgb:255,100,0; --camada-rgb:56,79,225;
  --grad:linear-gradient(92deg,#18feb5 0%,#2e82d4 18%,#384fe1 32%,#5500a0 48%,#ff0063 64%,#ff6400 82%,#ffff3c 100%);
  --texto:#fff; --texto-2:rgba(255,255,255,.72); --texto-3:rgba(255,255,255,.5); --texto-4:rgba(255,255,255,.34);
  --fio:rgba(255,255,255,.14); --fio-forte:rgba(255,255,255,.3);
  --hover:rgba(255,255,255,.07); --press:rgba(255,255,255,.14); --foco:rgba(255,100,0,.9);
  --revelar:cubic-bezier(.2,.9,.1,1); --enfase:cubic-bezier(.2,0,0,1);
  --t-toque:120ms; --t-rapido:200ms; --t-longo:720ms;
  --f-tensao:'Tallica','Arial Narrow',sans-serif;
  --f-estrutura:'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --f-leitura:'PP Neue Montreal Text','PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --f-mono:'PT Mono',ui-monospace,Consolas,monospace;
  --lateral:clamp(16px,4vw,48px);
  /* Tallica: maiúscula mede 1,35 em, acento até 1,7 em (regras de 28/09) */
  --tallica-escala:.74; --tallica-lh:1.7; --tallica-palavra:.3em;
  --secao:clamp(72px,10vw,140px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--campo); scroll-padding-top:84px}
body{margin:0; background:var(--campo); color:var(--texto); font-family:var(--f-leitura); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-synthesis:none; text-rendering:optimizeLegibility; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--foco); outline-offset:3px; border-radius:2px}
p,h1,h2,h3,figure,blockquote{margin:0}
.in{width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--lateral)}
.pular{position:absolute; left:-999px; top:8px; z-index:60; background:var(--campo); padding:10px 16px; border:1px solid var(--core)}
.pular:focus{left:16px}

/* grão fino do campo: o mesmo papel do #grao da home, parado e sem custo */
.grao{position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- tipografia por função --- */
.kicker,.rotulo{font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3); font-weight:400}
.titulo{font-family:var(--f-tensao); font-weight:600; text-transform:uppercase; font-size:calc(clamp(2.5rem,5.4vw,4.75rem) * var(--tallica-escala)); line-height:var(--tallica-lh); letter-spacing:-.01em; text-wrap:balance; word-spacing:var(--tallica-palavra)}
.titulo.mega{font-size:calc(clamp(3rem,7.6vw,7.25rem) * var(--tallica-escala)); letter-spacing:-.02em; line-height:1.82}
.titulo.medio{font-size:calc(clamp(2rem,3.6vw,3.25rem) * var(--tallica-escala))}
.hl{color:var(--core)}
.forte{font-family:var(--f-estrutura); font-weight:600; color:var(--texto)}
.lead{font-size:clamp(1.125rem,1.6vw,1.3125rem); line-height:1.55; color:var(--texto-2); max-width:58ch}
.corpo{display:grid; gap:18px; max-width:62ch; color:var(--texto-2)}
.destaque{font-family:var(--f-estrutura); font-weight:600; font-size:clamp(1.25rem,2.2vw,1.625rem); line-height:1.35; max-width:40ch; text-wrap:balance}

/* --- controles: pílula, estado por luz --- */
.acoes{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:12px 22px; border-radius:999px;
  border:1px solid var(--fio-forte); background:transparent; color:var(--texto); text-decoration:none; cursor:pointer;
  font:600 15px/1.2 var(--f-estrutura); letter-spacing:.01em;
  transition:background-color var(--t-toque) var(--enfase), border-color var(--t-toque) var(--enfase)}
.btn:hover{background:var(--hover); border-color:var(--texto-3)}
.btn:active{background:var(--press)}
.btn .seta{color:var(--core); font-family:var(--f-mono); transition:transform var(--t-rapido) var(--enfase)}
.btn:hover .seta{transform:translateX(3px)}
.btn.primario{border-color:var(--core); background:rgba(var(--core-rgb),.1)}
.btn.primario:hover{background:rgba(var(--core-rgb),.18)}
.btn.pequeno{min-height:40px; padding:8px 18px; font-size:14px}
.linha-zap{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--texto-3)}

/* --- matriz: o fio desenha a tabela --- */
.matriz{display:grid; gap:1px; background:var(--fio); border:1px solid var(--fio); margin:0; padding:0; list-style:none}
.matriz > *{background:var(--campo)}
.setas{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.setas li{display:grid; grid-template-columns:20px 1fr; gap:8px; color:var(--texto-2)}
.setas li::before{content:"→"; color:var(--core); font-family:var(--f-mono)}
.lista-matriz{counter-reset:item}
.lista-matriz li{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px 22px; color:var(--texto-2); transition:background-color var(--t-toque)}
.lista-matriz li:hover{background:var(--superficie-alta)}
.lista-matriz li::before{counter-increment:item; content:counter(item,decimal-leading-zero); font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--core); padding-top:4px}

/* --- cabeçalho fixo: o único blur do sistema --- */
.topo{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--fio); background:rgba(0,0,10,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.topo-in{max-width:1180px; margin-inline:auto; padding:12px var(--lateral); display:flex; align-items:center; gap:28px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.marca img{width:20px; height:auto}
.marca span{font-family:var(--f-tensao); font-weight:600; font-size:calc(24px * var(--tallica-escala)); line-height:1.7; text-transform:uppercase; letter-spacing:.01em; padding-top:2px; word-spacing:var(--tallica-palavra)}
.menu{display:flex; align-items:center; gap:26px; margin-left:auto}
.menu > a,.menu summary{font:600 14px var(--f-estrutura); color:var(--texto-3); text-decoration:none; padding-block:10px; cursor:pointer; transition:color var(--t-toque); list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu > a:hover,.menu summary:hover,.menu .atual,.menu details[open] summary{color:var(--texto)}
.menu .atual{box-shadow:inset 0 -1px 0 var(--core)}
.menu details{position:relative}
.menu summary::after{content:"↓"; font-family:var(--f-mono); color:var(--core); margin-left:6px; font-size:12px}
.submenu{position:absolute; top:calc(100% + 13px); left:-20px; min-width:260px; display:grid; background:var(--superficie); border:1px solid var(--fio); padding:8px 0}
.submenu a{display:grid; gap:2px; padding:10px 20px; text-decoration:none; transition:background-color var(--t-toque)}
.submenu a:hover,.submenu a.atual{background:var(--superficie-alta)}
.submenu strong{font:600 14px var(--f-estrutura); color:var(--texto)}
.submenu span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3)}
.submenu a.atual span{color:var(--core)}
.topo-acoes{display:flex; gap:10px}
.abre-menu{display:none; margin-left:auto; min-height:44px; padding:0 4px; background:none; border:0; color:var(--texto); font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer}
.painel-menu{position:fixed; inset:0; z-index:39; background:var(--campo); padding:96px var(--lateral) 40px; display:flex; flex-direction:column; gap:36px; overflow-y:auto}
.painel-menu nav{display:grid}
.painel-menu nav a{font-family:var(--f-tensao); font-weight:600; font-size:calc(clamp(2.2rem,9vw,3.2rem) * var(--tallica-escala)); line-height:1.7; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--fio); padding-block:6px; word-spacing:var(--tallica-palavra)}
.painel-menu nav a.sub{font-family:var(--f-estrutura); font-size:17px; text-transform:none; line-height:1.4; padding:12px 0 12px 18px; color:var(--texto-2)}
.painel-menu nav a.atual{color:var(--core)}
.painel-acoes{display:flex; flex-direction:column; gap:12px; align-items:flex-start}

/* --- seções --- */
.secao{padding-block:var(--secao); border-bottom:1px solid var(--fio); position:relative}
.cabeca{display:grid; gap:22px; max-width:62rem}
.duas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,96px); align-items:start}
.col{display:grid; gap:24px; align-content:start; min-width:0}

/* abertura de página (soluções, Toró de Pitaco, privacidade) */
.abre{position:relative; overflow:hidden; border-bottom:1px solid var(--fio); padding:clamp(72px,11vw,160px) 0 clamp(56px,8vw,112px)}
.abre .in{position:relative; z-index:1; display:grid; gap:28px}
.abre-luz{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(40% 60% at 88% 120%, rgba(var(--camada-rgb),.5), transparent 70%), radial-gradient(26% 40% at 100% 100%, rgba(var(--core-rgb),.16), transparent 70%)}

/* fórmula do Ecossistema: as cinco soluções, a página atual acesa */
.formula{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--fio); border:1px solid var(--fio); list-style:none; margin:0; padding:0}
.formula li{background:var(--campo)}
.formula a{display:grid; gap:6px; padding:16px 18px; text-decoration:none; height:100%; transition:background-color var(--t-toque)}
.formula a:hover{background:var(--superficie-alta)}
.formula strong{font:600 15px var(--f-estrutura)}
.formula span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3)}
.formula .atual a{background:rgba(var(--core-rgb),.08); box-shadow:inset 0 2px 0 var(--core)}
.formula .atual span{color:var(--core)}

/* bloco "em breve" */
.em-breve{display:flex; gap:14px; align-items:center; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3)}
.em-breve::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--core); box-shadow:0 0 12px 3px rgba(var(--core-rgb),.45); animation:respira 4.6s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.45} 42%{opacity:1}}

/* chamada final */
.chamada{text-align:center; padding-block:clamp(88px,12vw,160px)}
.chamada .in{display:grid; gap:24px; justify-items:center}
.chamada .capacete{width:46px; height:auto; margin-bottom:8px}
.chamada .lead{margin-inline:auto}

/* --- SOBRE · abertura com a foto viva --- */
.vivo{position:relative; min-height:clamp(640px,92vh,980px); border-bottom:1px solid var(--fio); overflow:hidden; display:flex; align-items:center}
.vivo-palco{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y}
.vivo-estatico{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 30%; opacity:0; transition:opacity 1.2s var(--revelar)}
.vivo.sem-gl .vivo-estatico{opacity:1}
.vivo-sombra{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,10,.92) 0%, rgba(0,0,10,.72) 30%, rgba(0,0,10,0) 56%), linear-gradient(0deg, rgba(0,0,10,1) 0%, rgba(0,0,10,0) 22%)}
.vivo .in{position:relative; z-index:2; display:grid; gap:26px; padding-block:clamp(72px,10vw,120px)}
.vivo .texto{max-width:min(560px,48%); display:grid; gap:26px}
.vivo .lead{font-size:clamp(1.0625rem,1.4vw,1.1875rem)}
.vivo-dica{position:absolute; right:var(--lateral); bottom:28px; z-index:2; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-4); transition:opacity .8s}
.ponto-luz{position:fixed; left:0; top:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; box-shadow:0 0 14px 4px rgba(var(--core-rgb),.45); pointer-events:none; z-index:45; opacity:0; transition:opacity .4s}
@media (hover:none){.ponto-luz{display:none}}

/* foto grande de fundo que se dissolve no campo */
.com-fundo{position:relative; overflow:hidden}
.fundo-foto{position:absolute; top:0; right:0; height:100%; width:min(56%,860px); object-fit:cover; object-position:50% 22%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%), linear-gradient(to top,transparent 0,#000 22%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 42%), linear-gradient(to top,transparent 0,#000 22%); mask-composite:intersect}
.com-fundo.esq .fundo-foto{right:auto; left:0;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 42%), linear-gradient(to top,transparent 0,#000 22%);
  mask-image:linear-gradient(to left,transparent 0,#000 42%), linear-gradient(to top,transparent 0,#000 22%)}
.com-fundo .in{position:relative; z-index:1}
.texto-sobre-foto{max-width:min(620px,52%)}
.com-fundo.esq .texto-sobre-foto{margin-left:auto}
.frase-cliente{border-left:2px solid var(--core); padding:6px 0 6px 22px; max-width:46ch}
.frase-cliente blockquote{font-family:var(--f-estrutura); font-weight:600; font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.35; color:var(--texto)}
.frase-cliente figcaption{margin-top:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3)}

/* Business Creative: as duas metades */
.par{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--fio); border:1px solid var(--fio)}
.par > div{background:var(--campo); padding:clamp(22px,3vw,36px); display:grid; gap:10px; align-content:start}
.par .palavra{font-family:var(--f-tensao); font-weight:600; text-transform:uppercase; font-size:calc(clamp(2rem,3.4vw,3rem) * var(--tallica-escala)); line-height:var(--tallica-lh); word-spacing:var(--tallica-palavra)}
.par .palavra.cor{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* soluções de Beto, em linhas */
.solucoes-beto li{grid-template-columns:44px minmax(0,1fr)}
.solucoes-beto .nome{display:block; font:600 1.0625rem/1.3 var(--f-estrutura); color:var(--texto); margin-bottom:4px}

/* --- TORÓ DE PITACO --- */
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
.post{display:flex; flex-direction:column; gap:16px; padding:clamp(22px,2.4vw,30px); text-decoration:none; transition:background-color var(--t-toque)}
.post:hover{background:var(--superficie-alta)}
.capa{position:relative; aspect-ratio:16/9; overflow:hidden; background:radial-gradient(70% 90% at 80% 110%, rgba(var(--camada-rgb),.55), transparent 70%), var(--superficie); border:1px solid var(--fio); display:grid; place-items:center}
.capa::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad); transform:scaleX(.18); transform-origin:left; transition:transform var(--t-longo) var(--revelar)}
.post:hover .capa::after{transform:scaleX(1)}
.capa-palavra{font-family:var(--f-tensao); font-weight:600; text-transform:uppercase; font-size:calc(clamp(1.8rem,2.6vw,2.4rem) * var(--tallica-escala)); line-height:1.5; color:rgba(255,255,255,.88); word-spacing:var(--tallica-palavra)}
.post .chave{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--core); display:flex; gap:10px}
.post .chave span:last-child{color:var(--texto-3)}
.post h2,.post h3{font-family:var(--f-tensao); font-weight:600; text-transform:uppercase; font-size:calc(clamp(1.7rem,2.2vw,2.1rem) * var(--tallica-escala)); line-height:1.65; word-spacing:var(--tallica-palavra); text-wrap:balance}
.post p{color:var(--texto-2)}
.post .ler{margin-top:auto; font:600 15px var(--f-estrutura); display:inline-flex; gap:10px}
.post .ler span{color:var(--core); font-family:var(--f-mono); transition:transform var(--t-rapido) var(--enfase)}
.post:hover .ler span{transform:translateX(3px)}

/* --- TEXTO (artigo) --- */
.progresso{position:fixed; left:0; top:0; height:2px; width:100%; z-index:41; background:var(--grad); transform:scaleX(0); transform-origin:left; pointer-events:none}
.artigo-topo{padding:clamp(64px,9vw,128px) 0 clamp(40px,5vw,64px); border-bottom:1px solid var(--fio); position:relative; overflow:hidden}
.artigo-topo .in{display:grid; gap:28px; max-width:980px; position:relative; z-index:1}
.artigo-topo .titulo{font-size:calc(clamp(2.4rem,5.2vw,4.6rem) * var(--tallica-escala))}
.assina{display:flex; gap:14px; align-items:center}
.assina img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 22%; background:var(--superficie)}
.assina p{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); line-height:1.6}
.assina strong{display:block; font:600 14px var(--f-estrutura); letter-spacing:0; text-transform:none; color:var(--texto)}
.leitura{max-width:720px; margin-inline:auto; padding:clamp(48px,7vw,88px) var(--lateral) clamp(64px,8vw,104px); font-size:clamp(1.0625rem,1.3vw,1.1875rem); line-height:1.7; color:var(--texto-2)}
.leitura > * + *{margin-top:1.15em}
.leitura .abertura{font-size:1.18em; line-height:1.55; color:var(--texto)}
.leitura h2{font-family:var(--f-estrutura); font-weight:600; font-size:clamp(1.375rem,2.2vw,1.75rem); line-height:1.3; color:var(--texto); margin-top:2.2em; text-wrap:balance}
.leitura h2::before{content:attr(data-n); display:block; font-family:var(--f-mono); font-weight:400; font-size:11px; letter-spacing:.18em; color:var(--core); margin-bottom:12px}
.leitura .setas{margin-block:1.4em; gap:14px}
.leitura .setas li{grid-template-columns:24px 1fr}
.leitura strong{font-family:var(--f-estrutura); font-weight:600; color:var(--texto)}
.leitura .fecho{margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--fio); font-family:var(--f-estrutura); font-weight:600; font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.4; color:var(--texto); text-wrap:pretty}
.caixa-chamada{margin-top:2.4em; padding:clamp(24px,3vw,36px); border:1px solid var(--fio); background:radial-gradient(60% 120% at 100% 100%, rgba(var(--core-rgb),.1), transparent 70%), var(--superficie); display:grid; gap:20px}
.caixa-chamada p{color:var(--texto); font-size:1.0625rem}
.leia-tambem{border-top:1px solid var(--fio); padding-block:clamp(56px,7vw,96px)}
.leia-tambem .posts{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px}

/* --- PRIVACIDADE --- */
.legal-texto h2::before{display:none}
.legal-texto h2{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.pendente{color:var(--core); background:rgba(var(--core-rgb),.12); border:1px dashed rgba(var(--core-rgb),.6); padding:0 .3em; font-family:var(--f-mono); font-size:.86em}

/* --- rodapé (o mesmo da home v3 aprovada) --- */
.rodape{position:relative; background:var(--campo); padding:clamp(64px,8vw,104px) var(--lateral) 32px}
.rodape::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--grad)}
.rodape .in{display:grid; gap:40px; max-width:1280px; justify-items:center; text-align:center; padding:0}
.rod-kicker{font-family:var(--f-mono); color:var(--texto-3); font-size:11px; letter-spacing:.16em}
.assinatura{font-family:var(--f-tensao); font-weight:600; text-transform:uppercase; font-size:calc(clamp(2rem,4vw,3.5rem) * var(--tallica-escala)); line-height:1.7; max-width:24ch; text-wrap:balance; word-spacing:var(--tallica-palavra); padding-top:.2em; margin-inline:auto}
.cols-rodape{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; width:100%; max-width:980px; justify-items:center}
.col-rodape{display:grid; gap:12px; align-content:start; justify-items:center}
.col-rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.col-rodape a{display:inline-block; padding-block:6px; color:var(--texto-2); font-size:15.5px; text-decoration:none; transition:color .2s}
.col-rodape a:hover,.col-rodape a.atual{color:#fff}
.col-rodape a.atual{box-shadow:inset 0 -1px 0 var(--core)}
.legal{width:100%; padding-top:22px; border-top:1px solid var(--fio); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--texto-4)}

/* --- revelação na rolagem: curva revelar, um tempo só --- */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity var(--t-longo) var(--revelar), transform var(--t-longo) var(--revelar); transition-delay:var(--rv-atraso,0ms)}
.js .rv.visto{opacity:1; transform:none}
.js .rv-linha{transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--revelar)}
.js .rv-linha.visto{transform:scaleX(1)}
body{animation:entra .6s var(--revelar) both}
@keyframes entra{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none; transition:none}
  .js .rv-linha{transform:none; transition:none}
  body{animation:none}
  .em-breve::before{animation:none; opacity:1}
}

/* --- telas menores --- */
@media (max-width:1040px){
  .menu,.topo-acoes{display:none}
  .abre-menu{display:block}
  .posts{grid-template-columns:1fr 1fr}
  .formula{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formula li:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .duas,.par,.posts,.leia-tambem .posts{grid-template-columns:minmax(0,1fr)}
  .cols-rodape{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px}
  .rodape .in{gap:32px}
  .texto-sobre-foto,.com-fundo.esq .texto-sobre-foto{max-width:none; margin:0}
  .com-fundo{padding-top:0}
  .fundo-foto,.com-fundo.esq .fundo-foto{position:relative; width:100%; height:auto; aspect-ratio:4/4.2; margin-bottom:-18%;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 40%); mask-image:linear-gradient(to top,transparent 0,#000 40%)}
  .com-fundo .secao-in{padding-top:0}
  /* foto viva no celular: cabeça e ombros em cima, texto embaixo sobre o peito escurecido */
  .vivo{min-height:0; display:block}
  .vivo-palco,.vivo-estatico{position:relative; height:min(72vh,560px)}
  .vivo-estatico{position:absolute; top:0; height:min(72vh,560px); object-position:50% 20%}
  .vivo-sombra{background:linear-gradient(0deg, rgba(0,0,10,1) calc(100% - min(72vh,560px) + 0px), rgba(0,0,10,0) calc(100% - min(72vh,560px) + 38%))}
  .vivo .in{margin-top:-120px; padding-top:0; padding-bottom:64px}
  .vivo .texto{max-width:none}
  .vivo-dica{display:none}
}