/* =========================================================
   OffGrid · site v3 (04/10/2026)
   Pensado primeiro no celular (390): caixas, carrossel com snap, nada depende de mouse.
   Paleta travada: asfalto #141414 · tinta #E8E6E1 · amarelo #F2B807.
   Textura do site inteiro no padrão aprovado na Masi: papel do próprio cartaz em telha
   + grão RGBA fixo. Movimento só pelo motor (js/v3/motor.js, GSAP).
   ========================================================= */
:root{
  --asfalto:#141414; --asfalto-2:#1b1b1a; --ferro:#0d0d0c;
  --tinta:#E8E6E1; --tinta-80:rgba(232,230,225,.82); --tinta-60:rgba(232,230,225,.62);
  --amarelo:#F2B807;
  --fio:rgba(232,230,225,.13); --fio-forte:rgba(232,230,225,.26);

  --lado:clamp(16px,4.4vw,64px);
  --util:1440px;

  --t-mega:clamp(2.6rem,10.4vw,9rem);
  --t-titulo:clamp(2.5rem,8.4vw,7.2rem);
  --t-h3:clamp(1.45rem,2.1vw,2.2rem);
  --t-corpo:clamp(1.07rem,1.12vw,1.32rem);
  --t-meta:clamp(.74rem,.78vw,.86rem);

  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sans:"Archivo",system-ui,sans-serif;
  --sai:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; -webkit-text-size-adjust:100%}
body{margin:0; color:var(--tinta); font-family:var(--sans); font-size:var(--t-corpo); line-height:1.55;
  background:var(--asfalto) url("../assets/img/papel-tile.webp") top left/1200px 427px repeat;
  -webkit-font-smoothing:antialiased; overflow-x:clip}
/* grão fixo por cima de tudo (tile RGBA, blend normal: não força composição da página) */
body::after{content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:url("../assets/img/grao.png") 0 0/256px 256px repeat; opacity:.5}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}
::selection{background:var(--amarelo); color:var(--asfalto)}
:focus-visible{outline:2px solid var(--amarelo); outline-offset:3px}
.am{color:var(--amarelo)}
h1,h2,h3,p{margin:0}

/* o que o motor vai revelar nasce escondido (só com JS), senão pisca pronto */
.com-js [data-split], .com-js [data-sobe]{visibility:hidden}
.com-js .pronto[data-split], .com-js .pronto[data-sobe]{visibility:visible}
/* máscara de linha do SplitText não corta acento de caixa alta */
.ln-mask{padding:.16em .06em .08em; margin:-.16em -.06em -.08em}

/* ---------- NAVEGAÇÃO ---------- */
.topo{position:fixed; top:0; left:0; right:0; z-index:60; height:64px; display:flex; align-items:center;
  justify-content:space-between; padding:0 var(--lado); padding-top:env(safe-area-inset-top);
  background:rgba(20,20,20,0); border-bottom:1px solid transparent; transition:background-color .35s, border-color .35s}
.topo.solido{background:rgba(20,20,20,.97); border-bottom-color:var(--fio)}
.topo-marca img{width:46px; height:auto}
.topo-links{display:none}
.topo-menu{display:inline-flex; align-items:center; gap:12px; background:none; border:1px solid var(--fio-forte);
  color:var(--tinta); font:700 .95rem/1 var(--sans); letter-spacing:.02em; padding:11px 14px; cursor:pointer}
.topo-menu i{display:flex; gap:4px; height:16px}
.topo-menu b{width:3px; height:100%; background:currentColor}
.topo-menu[aria-expanded="true"] b:nth-child(2){background:var(--amarelo)}

.menu-cel{position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; padding:96px var(--lado) 40px; overflow:hidden}
.menu-cel[hidden]{display:none}
.menu-barras{position:absolute; inset:0; display:flex}
.menu-barras .folha{flex:1; background:var(--asfalto) repeating-linear-gradient(to right, #1f1f1d 0 6px, transparent 6px 44px)}
.menu-barras .folha.esq{box-shadow:inset -9px 0 0 #2a2a27, inset -12px 0 0 #5c5b57}
.menu-barras .folha.dir{box-shadow:inset 9px 0 0 #2a2a27, inset 12px 0 0 #5c5b57; background-position:22px 0}
.menu-links{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px}
.menu-links a{font:800 clamp(2.1rem,10vw,3rem)/1.12 var(--sans); letter-spacing:-.03em; text-decoration:none; text-transform:uppercase}
.menu-links a.destaque{color:var(--amarelo)}
.menu-pe{position:relative; font:600 1rem/1.3 var(--sans); color:var(--tinta-80)}
.menu-pe em{font-style:normal; color:var(--amarelo)}

@media (min-width:1000px){
  .topo-menu{display:none}
  .topo-links{display:flex; gap:clamp(18px,2.2vw,34px)}
  .topo-links a{position:relative; text-decoration:none; font:600 .95rem/1 var(--sans); letter-spacing:.01em; color:var(--tinta-80); padding:8px 0}
  .topo-links a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--amarelo);
    transform:scaleX(0); transform-origin:left; transition:transform .45s var(--sai)}
  .topo-links a:hover{color:var(--tinta)}
  .topo-links a:hover::after{transform:scaleX(1)}
  .topo-links a.destaque{color:var(--amarelo)}
  .menu-cel{display:none !important}
}

/* ---------- HERO: o cartaz atrás do portão ---------- */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; isolation:isolate;
  --b:11px; --p:44px}   /* barra e período do gradil */
.hero-foto, .hero-foto img{position:absolute; inset:0; width:100%; height:100%}
.hero-foto img{object-fit:cover; object-position:50% 45%; transform-origin:50% 45%}
.com-js .hero-foto img{filter:grayscale(1) brightness(.5) contrast(1.05)}

.portao{position:absolute; inset:0; z-index:2; pointer-events:none}
.portao .folha{position:absolute; top:0; bottom:0; width:50%;
  background-image:repeating-linear-gradient(to right,
    #64635e 0 calc(var(--b)*.14), #34332f calc(var(--b)*.14) calc(var(--b)*.45),
    #1a1a18 calc(var(--b)*.45) calc(var(--b)*.82), #050505 calc(var(--b)*.82) var(--b),
    transparent var(--b) var(--p))}
.portao .folha.esq{left:0; border-right:9px solid #2a2a27; box-shadow:inset -3px 0 0 #6a6964}
.portao .folha.dir{right:0; background-position:calc(var(--p)*.5) 0; border-left:9px solid #2a2a27; box-shadow:inset 3px 0 0 #6a6964}
/* trilhos com a face iluminada em cima */
.portao .folha::before,.portao .folha::after{content:""; position:absolute; left:0; right:0; height:16px;
  background:linear-gradient(to bottom,#55544f,#262624 45%,#0c0c0b); box-shadow:0 5px 10px rgba(0,0,0,.55)}
.portao .folha::before{top:13%}
.portao .folha::after{bottom:15%}
.portao .trinco{position:absolute; left:50%; top:63%; width:58px; height:13px; margin-left:-29px; z-index:3;
  background:linear-gradient(to bottom,#ffd24a,var(--amarelo) 55%,#a87d05); box-shadow:0 3px 7px rgba(0,0,0,.65)}
/* a sombra das barras no cartaz */
.portao-sombra{position:absolute; inset:0; display:flex; filter:blur(5px)}
.portao-sombra span{flex:1; background-image:repeating-linear-gradient(to right, rgba(0,0,0,.58) 0 var(--b), transparent var(--b) var(--p));
  transform:translate(16px,10px)}
.portao-sombra span:last-child{background-position:calc(var(--p)*.5) 0}
.sem-js .portao{display:none}

.hero-txt{position:absolute; left:0; right:0; bottom:max(28px, 6svh); z-index:3; display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:0 var(--lado); text-align:center}
.assinatura{font-weight:700; font-size:clamp(1.35rem,2.5vw,2.4rem); line-height:1.1; letter-spacing:-.02em}
.assinatura em{font-style:normal; color:var(--amarelo); display:inline-block}
.hero-meta{list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--fio-forte); display:grid; grid-template-columns:1fr 1fr;
  gap:8px 26px; font-family:var(--mono); font-size:var(--t-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-80)}
.hero-meta li:last-child{color:var(--amarelo)}
@media (min-width:760px){
  .hero{--b:14px; --p:66px}
  .portao .trinco{top:84%}
  .hero-meta{display:flex; gap:clamp(18px,3vw,48px)}
}

/* ---------- blocos comuns ---------- */
.secao{padding:clamp(88px,13vw,180px) var(--lado) 0; max-width:var(--util); margin:0 auto}
.cab{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; margin-bottom:clamp(40px,6vw,88px)}
.titulo{font-size:var(--t-titulo); font-weight:900; line-height:.92; letter-spacing:-.045em; text-transform:uppercase}
.mega{font-size:var(--t-mega); font-weight:900; line-height:.9; letter-spacing:-.045em; text-transform:uppercase; text-align:center}
.mega > span, .mega .fora-linha{display:block; text-wrap:balance}
.titulo{text-wrap:balance}
.fino{font-weight:200}
.apoio{font-size:var(--t-corpo); color:var(--tinta-80); max-width:46ch; margin-inline:auto; text-align:center}
.so-mouse{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:760px){ .so-mouse{display:inline} .so-toque{display:none} }

/* ---------- QUEM: uma tela por frase ---------- */
.quem{padding:0 var(--lado)}
.cena{position:relative; min-height:86svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px,4vw,56px); padding:clamp(80px,10vw,140px) 0; max-width:var(--util); margin:0 auto}
/* a fita dos seis: seis janelas, cada uma gira como roleta e para numa pessoa */
.fita{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(100%,420px)}
.fita .janela{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ferro)}
.fita .rolo{position:absolute; left:0; top:0; width:100%; will-change:transform}
.fita .rolo img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.fita .janela::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--fio)}
@media (min-width:760px){ .fita{grid-template-columns:repeat(6,1fr); width:min(100%,900px); gap:8px} }

/* FORA DO GRID: as linhas do grid se abrem em volta da palavra */
.cena-fora{overflow:visible}
.linhas-grid{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.linhas-grid path{fill:none; stroke:var(--fio-forte); stroke-width:1.5; vector-effect:non-scaling-stroke}
.cena-fora .mega{position:relative; z-index:1}
.fora{display:inline-block; font-weight:900; transform-origin:50% 60%}

.cartaz-rua{margin:0 auto clamp(40px,6vw,80px); max-width:1240px}
.cartaz-rua img{width:100%}
.cartaz-rua figcaption{margin-top:14px; text-align:center; font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-60)}
@media (max-width:759px){ .cartaz-rua{margin-inline:calc(var(--lado) * -1)} .cartaz-rua img{aspect-ratio:4/5; object-fit:cover; object-position:44% 50%} }

/* ---------- OS SEIS: cada um atrás de um gradil ---------- */
.time{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(var(--lado) * -1); padding:0 13vw 6px; overscroll-behavior-x:contain}
.time::-webkit-scrollbar{display:none}
.pessoa{flex:0 0 74vw; scroll-snap-align:center; position:relative; background:var(--asfalto-2); border:1px solid var(--fio)}
.pessoa .foto{position:relative; aspect-ratio:3/4; overflow:hidden}
.pessoa .foto img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.8); transform-origin:50% 40%}
.pessoa .sombra{position:absolute; inset:0; display:flex; pointer-events:none; z-index:1; filter:blur(3px)}
.pessoa .sombra span{flex:1; height:100%; background-image:repeating-linear-gradient(to right, rgba(0,0,0,.62) 0 8px, transparent 8px 34px); transform:translate(8px,6px)}
.pessoa .sombra span:last-child{background-position:17px 0}
.pessoa .gradil{position:absolute; inset:0; display:flex; pointer-events:none; z-index:2}
.pessoa .folha{position:relative; flex:1; height:100%;
  background-image:repeating-linear-gradient(to right, #5a5955 0 1px, #2c2c2a 1px 3px, #171716 3px 6px, #050505 6px 7px, transparent 7px 34px)}
.pessoa .folha.dir{background-position:17px 0}
.pessoa .folha::before,.pessoa .folha::after{content:""; position:absolute; left:0; right:0; height:12px;
  background:linear-gradient(to bottom,#4a4a47,#232322 45%,#0e0e0d); box-shadow:0 3px 6px rgba(0,0,0,.55)}
.pessoa .folha::before{top:7%}
.pessoa .folha::after{bottom:9%}
.pessoa .folha.esq{border-left:5px solid #3b3b38; box-shadow:inset 2px 0 0 #6a6965}
.pessoa .folha.dir{border-right:5px solid #3b3b38; box-shadow:inset -2px 0 0 #6a6965}
.pessoa .trinco{position:absolute; left:50%; top:80%; width:36px; height:9px; margin-left:-18px; z-index:3; pointer-events:none;
  background:linear-gradient(to bottom,#ffd24a,var(--amarelo) 55%,#a87d05); box-shadow:0 2px 4px rgba(0,0,0,.6)}
.pessoa .dados{padding:16px 14px 18px; text-align:center}
.pessoa h3{font-size:clamp(1.25rem,1.6vw,1.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.1}
.pessoa .ordem{display:block; margin-top:6px; font-family:var(--mono); font-size:var(--t-meta); color:var(--tinta-60); letter-spacing:.1em}
.time-pager{display:flex; justify-content:center; gap:6px; margin-top:22px}
.time-pager i{width:26px; height:4px; background:var(--fio-forte); transition:background-color .3s, width .45s var(--sai)}
.time-pager i.ativo{background:var(--amarelo); width:44px}
@media (min-width:760px){
  .time{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; overflow:visible; margin:0; padding:0}
  .time-pager{display:none}
  .pessoa{cursor:default}
}
@media (min-width:1180px){ .time{grid-template-columns:repeat(6,1fr); gap:12px} }

/* ---------- GRID: quatro barras ---------- */
.barras{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.barra{position:relative; background:var(--asfalto-2); border:1px solid var(--fio); overflow:hidden}
.barra figure{margin:0; aspect-ratio:16/9; overflow:hidden}
.barra img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.86); transform-origin:50% 50%}
.barra-txt{padding:20px 18px 24px; text-align:center; border-top:3px solid var(--fio-forte)}
.barra .num{display:block; font-family:var(--mono); font-weight:700; font-size:var(--t-meta); color:var(--tinta-60); letter-spacing:.12em; margin-bottom:8px}
.barra h3{font-size:var(--t-h3); font-weight:800; letter-spacing:-.025em; line-height:1.05}
.barra p{margin-top:8px; color:var(--tinta-80); font-size:var(--t-corpo)}
.barra.nossa .barra-txt{border-top-color:var(--amarelo)}
.barra.nossa .num,.barra.nossa h3{color:var(--amarelo)}
@media (min-width:1000px){
  .barras{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
  .barra figure{aspect-ratio:3/4}
  .barra-txt{min-height:190px}
}
.frases{margin:clamp(90px,12vw,170px) auto clamp(30px,4vw,60px); display:flex; flex-direction:column; align-items:center; text-align:center;
  font-size:clamp(2rem,5.6vw,5.4rem); font-weight:800; line-height:1.02; letter-spacing:-.035em}
.frases > span{display:block}
.grid-logo{display:inline-block; height:.8em; width:auto; vertical-align:-.06em; margin-left:.12em}
.frases .ponto{margin-left:.02em}

/* ---------- O FILME ---------- */
.filme-caixa{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; border:1px solid var(--fio);
  margin-inline:calc(var(--lado) * -1)}
.filme-caixa video{width:100%; height:100%; object-fit:cover}
.filme-play{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(to top, rgba(20,20,20,.55), rgba(20,20,20,.08) 55%); border:0; color:var(--tinta); cursor:pointer; font:inherit}
.filme-icone{width:clamp(64px,7vw,96px); aspect-ratio:1; display:grid; place-items:center; background:var(--amarelo); color:var(--asfalto);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.filme-icone svg{margin-left:4px}
.filme-rot{font-weight:700; font-size:clamp(1rem,1.2vw,1.2rem); letter-spacing:.01em}
.filme-rot b{font-family:var(--mono); font-weight:700; color:var(--amarelo); margin-left:6px}
.filme-caixa.tocando .filme-play{display:none}
@media (min-width:760px){ .filme-caixa{margin-inline:0} }

/* ---------- O TRABALHO: ripas ---------- */
.ripas{display:flex; flex-direction:column; gap:14px}
.ripa{position:relative; background:var(--asfalto-2); border:1px solid var(--fio); overflow:hidden; outline-offset:-2px}
.ripa img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.8)}
.ripa-num{position:absolute; top:14px; left:16px; font-family:var(--mono); font-weight:700; font-size:var(--t-meta); letter-spacing:.12em; color:var(--tinta)}
.ripa-vert{display:none}
.ripa-txt{padding:20px 18px 24px; text-align:center}
.ripa-txt h3{font-size:var(--t-h3); font-weight:800; letter-spacing:-.025em}
.ripa-txt p{margin-top:8px; color:var(--tinta-80)}
@media (min-width:1000px){
  .ripas{flex-direction:row; height:min(70vh,620px); gap:10px}
  .ripa{flex:1 1 0; min-width:0; cursor:pointer}
  .ripa.ativa{flex-grow:3.6}
  .ripa img{position:absolute; inset:0; height:100%; aspect-ratio:auto}
  .ripa::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,13,.92) 0%, rgba(14,14,13,.35) 42%, rgba(14,14,13,.1) 70%)}
  .ripa-num{z-index:2; top:20px; left:22px}
  .ripa-vert{display:block; position:absolute; z-index:2; left:50%; bottom:28px; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl;
    font-size:clamp(1.6rem,2vw,2.2rem); font-weight:800; letter-spacing:-.02em; white-space:nowrap}
  .ripa-txt{position:absolute; z-index:2; bottom:0; left:50%; transform:translateX(-50%); width:max(100%, 460px); padding:28px clamp(22px,2.4vw,40px) 34px}
  .ripa:not(.ativa) .ripa-txt{opacity:0; visibility:hidden}
  .ripa.ativa .ripa-vert{opacity:0}
  .ripa-txt p{max-width:44ch; margin-inline:auto}
}

/* ---------- O TCC ---------- */
.tcc-filme{position:relative; margin:0 calc(var(--lado) * -1); aspect-ratio:4/5; overflow:hidden; background:var(--asfalto-2)}
.tcc-filme video{width:100%; height:100%; object-fit:cover}
.tcc-filme::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.2) 40%, transparent 62%)}
.tcc-par{position:absolute; left:0; right:0; bottom:9%; z-index:2; display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,30px)}
.tcc-par img{width:clamp(118px,19vw,250px)}
.tcc-par img[alt="OffGrid"]{width:clamp(102px,16.5vw,215px)}
.tcc-par span{font-size:clamp(1.6rem,3vw,2.8rem); color:var(--tinta-80); line-height:1}
.tcc-credito{margin-top:12px; text-align:center; font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.06em; color:var(--tinta-60)}
.tcc-cartao{margin:clamp(22px,2.6vw,36px) auto 0; max-width:1180px; display:flex; flex-direction:column; align-items:stretch; gap:20px;
  padding:clamp(22px,2.4vw,32px); text-decoration:none; border:1px solid var(--fio); background:rgba(27,27,26,.92); position:relative; overflow:hidden; text-align:center}
.tcc-cartao::before{content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--amarelo); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--sai)}
.tcc-cartao:hover::before{transform:scaleX(1)}
.tcc-meta{display:flex; flex-direction:column; align-items:center; gap:.5em}
.tcc-kicker{font-family:var(--mono); font-size:var(--t-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-60)}
.tcc-num{font-size:var(--t-corpo); color:var(--tinta-80)}
.tcc-num b{color:var(--tinta); font-size:1.5em; letter-spacing:-.02em; margin-right:.2em}
.tcc-botao{display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:18px 26px; background:var(--amarelo); color:var(--asfalto);
  font-weight:800; font-size:1.02rem; letter-spacing:.01em}
.tcc-botao svg{transition:transform .4s var(--sai)}
.tcc-cartao:hover .tcc-botao svg{transform:translateX(6px)}
@media (min-width:760px){
  .tcc-filme{margin:0 auto; max-width:1240px; aspect-ratio:16/9}
  .tcc-cartao{flex-direction:row; align-items:center; justify-content:space-between; text-align:left}
  .tcc-meta{align-items:flex-start}
}

/* ---------- CONTATO ---------- */
.contato{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; padding-bottom:clamp(60px,8vw,120px)}
.contato .mega{font-size:clamp(4rem,18vw,15rem)}
.contato-linhas{width:100%; max-width:920px; margin-top:clamp(20px,3vw,40px)}
.contato-linha{display:flex; flex-direction:column; align-items:center; gap:4px; border-top:1px solid var(--fio); padding:clamp(20px,2.6vw,32px) 0;
  text-decoration:none; position:relative}
.contato-linha:last-child{border-bottom:1px solid var(--fio)}
.contato-linha .valor{font-size:clamp(1.4rem,3.6vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; overflow-wrap:anywhere}
.contato-linha .oq{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em; color:var(--tinta-60)}
a.contato-linha::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--amarelo); transform:scaleX(0); transition:transform .55s var(--sai)}
a.contato-linha:hover .valor{color:var(--amarelo)}
a.contato-linha:hover::after{transform:scaleX(1)}

/* ---------- RODAPÉ ---------- */
.rodape{border-top:1px solid var(--fio); padding:0 var(--lado) calc(40px + env(safe-area-inset-bottom)); text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.rodape-logo{width:100%; max-width:1240px; margin-top:clamp(20px,4vw,60px)}
.rodape-logo img{width:100%}
.rodape-frase{font-weight:700; font-size:clamp(1.2rem,2vw,1.8rem); letter-spacing:-.02em}
.rodape-frase em{font-style:normal; color:var(--amarelo)}
.rodape-meta,.rodape-creditos{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.06em; color:var(--tinta-60); max-width:70ch; line-height:1.6}

/* ---------- movimento reduzido: tudo pronto, sem portão ---------- */
@media (prefers-reduced-motion: reduce){
  .com-js [data-split], .com-js [data-sobe]{visibility:visible}
  .portao, .pessoa .gradil, .pessoa .sombra, .pessoa .trinco{display:none}
  .com-js .hero-foto img, .pessoa .foto img, .barra img, .ripa img, .fita .rolo img{filter:none}
}