/* Jorge Jr Films — página inicial.
   A cara é a das propostas: Atyp, preto, papel claro e o vermelho do REC. Cada parte da página é uma "cena".
   A assinatura do site é a linguagem do visor e da ilha de edição: as coisas ENTRAM EM FOCO ao aparecer,
   o quadro do autofoco TRAVA no que importa e, embaixo, uma LINHA DO TEMPO mostra em que cena a página está.
   Sem biblioteca nenhuma. Fontes: Atyp (a mesma das propostas). Texturas: pasta /icones. */
@font-face{font-family:"AtypD";src:url("/fontes/atyp-display-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"AtypD";src:url("/fontes/atyp-display-300i.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"AtypD";src:url("/fontes/atyp-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"AtypD";src:url("/fontes/atyp-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"AtypD";src:url("/fontes/atyp-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"AtypT";src:url("/fontes/atyp-text-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AtypT";src:url("/fontes/atyp-text-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --noite:#0c0c0d; --papel:#f3f0e8; --tinta:#111112; --clara:#f6f3ec;
  --suave:#c9c5bc; --cinza:#8a8882; --grafite:#5d5b56; --rec:#e5342b;
  --fio-claro:rgba(246,243,236,.16); --fio-escuro:rgba(17,17,18,.16);
  --pad:clamp(18px,2.6vw,44px); --vao:clamp(88px,11vw,180px); --raio:clamp(18px,1.8vw,28px);
  --disp:"AtypD","Helvetica Neue",Arial,sans-serif; --txt:"AtypT","AtypD",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --suavidade:cubic-bezier(.2,.7,.2,1); --lt:38px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--noite);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--noite);color:var(--clara);font-family:var(--txt);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
em{font-style:italic}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rec);outline-offset:4px}
::selection{background:var(--rec);color:#fff}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;background:url("/icones/ruido.svg") 0 0 / 220px 220px;opacity:.05;mix-blend-mode:overlay}
.pular{position:fixed;left:12px;top:-60px;z-index:100;background:var(--clara);color:var(--tinta);padding:10px 16px;border-radius:999px;font-weight:500;transition:top .2s}
.pular:focus{top:12px}

/* aparecer ao rolar = puxar o foco: nasce desfocado e fica nítido (só com o script ligado) */
.js .ver{opacity:0;filter:blur(14px);transform:translateY(16px);transition:opacity .9s var(--suavidade),filter 1.1s var(--suavidade),transform 1s var(--suavidade)}
.js .ver.visto{opacity:1;filter:none;transform:none}

/* o quadro do autofoco: quatro cantos que apertam em volta do assunto e ficam vermelhos quando o foco trava */
.af{position:absolute;pointer-events:none;color:#fff;opacity:0;transform:scale(1.5);transition:opacity .35s,transform .7s var(--suavidade),color .25s .55s;background:
  linear-gradient(currentColor,currentColor) 0 0 / 20px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 0 / 2px 20px no-repeat,
  linear-gradient(currentColor,currentColor) 100% 0 / 20px 2px no-repeat, linear-gradient(currentColor,currentColor) 100% 0 / 2px 20px no-repeat,
  linear-gradient(currentColor,currentColor) 0 100% / 20px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 100% / 2px 20px no-repeat,
  linear-gradient(currentColor,currentColor) 100% 100% / 20px 2px no-repeat, linear-gradient(currentColor,currentColor) 100% 100% / 2px 20px no-repeat}
.af b{position:absolute;left:0;top:calc(100% + 7px);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s .7s}

/* ---------- peças que se repetem ---------- */
/* o rótulo de cada parte: uma plaquinha "Cena 02" e o nome */
.cena{display:flex;align-items:center;gap:12px;font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--cinza)}
.cena span{display:inline-flex;align-items:center;gap:7px;border:1px solid currentColor;border-radius:999px;padding:4px 11px 4px 9px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.cena span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rec)}
.papel .cena{color:var(--grafite)}
.titulo{font-family:var(--disp);font-weight:600;font-size:clamp(44px,8.6vw,156px);line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.titulo em{font-weight:300;letter-spacing:-.035em}
.titulo.menor{font-size:clamp(34px,5vw,86px)}
.titulo.gigante{font-size:clamp(58px,14.6vw,270px);line-height:.88}
.cena + .titulo{margin-top:clamp(18px,2.2vw,30px)}
.papel{background:var(--papel);color:var(--tinta)}
.lk{display:inline-flex;align-items:center;gap:.5em;font-weight:500;font-size:13.5px;padding:5px 0;background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;transition:background-size .35s var(--suavidade)}
.lk:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- barra de cima ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding:16px var(--pad);color:#fff;mix-blend-mode:difference}
.marca{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.025em;white-space:nowrap}
.marca em{font-weight:300}
.topo-nav{margin-left:auto;display:flex;gap:clamp(16px,2vw,30px);font-weight:500;font-size:13.5px}
.topo-nav a{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding:4px 0;transition:background-size .35s var(--suavidade)}
.topo-nav a:hover{background-size:100% 1px}
.topo-cta{border:1px solid currentColor;border-radius:999px;padding:8px 18px;font-weight:500;font-size:13.5px;transition:background-color .25s,color .25s}
.topo-cta:hover{background:#fff;color:#000}
.menu-bt{display:none;margin-left:auto;border:1px solid currentColor;border-radius:999px;padding:8px 16px;font-weight:500;font-size:13.5px}

/* ---------- menu em tela cheia (celular) ---------- */
.menu{position:fixed;inset:0;z-index:70;background:var(--noite);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(88px,13vh,130px) var(--pad) var(--pad);overflow-y:auto}
.menu[hidden]{display:none}
.menu-links a{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(40px,11.5vw,92px);line-height:1.04;letter-spacing:-.04em;padding:.03em 0}
.menu-links li{animation:sobe .6s var(--suavidade) both}
.menu-links li:nth-child(2){animation-delay:.04s}.menu-links li:nth-child(3){animation-delay:.08s}.menu-links li:nth-child(4){animation-delay:.12s}.menu-links li:nth-child(5){animation-delay:.16s}.menu-links li:nth-child(6){animation-delay:.2s}
.menu-links li:nth-child(even) a{font-weight:300;font-style:italic}
.menu-redes{display:flex;gap:22px;flex-wrap:wrap;padding-top:28px;font-weight:500;font-size:14px}
@keyframes sobe{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
body.menu-aberto{overflow:hidden}

/* ---------- cena 01. abertura ---------- */
.heroi{position:relative;height:230vh;--p:0}
.heroi-fixo{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
/* o nome no centro, em duas linhas; a janela do reel fica no vão entre elas. Ao rolar, as linhas se afastam e somem */
.heroi-nome{display:flex;flex-direction:column;align-items:center;gap:clamp(70px,11.5vw,190px);margin-bottom:calc(var(--lt) * .5);font-family:var(--disp);font-weight:600;font-size:clamp(60px,16.6vw,340px);line-height:.8;letter-spacing:-.05em;white-space:nowrap;text-align:center;user-select:none}
.heroi-nome span,.heroi-nome em{display:block;will-change:transform,opacity;opacity:calc(1 - var(--p) * 1.7)}
.heroi-nome em{font-weight:300;letter-spacing:-.045em}
.heroi-nome .l1{transform:translateY(calc(var(--p) * -34vh))}
.heroi-nome .l2{transform:translateY(calc(var(--p) * 34vh))}
.js .heroi-nome .l1{animation:entra-cima 1.2s var(--suavidade) both}
.js .heroi-nome .l2{animation:entra-baixo 1.2s var(--suavidade) both}
@keyframes entra-cima{from{opacity:0;transform:translateY(.35em)}}
@keyframes entra-baixo{from{opacity:0;transform:translateY(-.35em)}}
/* os dois textos pequenos, um de cada lado, na altura do vídeo */
.heroi-lado{position:absolute;top:calc(50% - var(--lt) * .25);transform:translateY(-50%);z-index:1;opacity:calc(1 - var(--p) * 3)}
.heroi-lado.esq{left:var(--pad);max-width:17ch;font-size:clamp(13px,1.05vw,16px);line-height:1.35;color:var(--suave);text-wrap:balance}
.heroi-lado.dir{right:var(--pad)}
.heroi-lado.dir span::before{animation:pisca 1.6s steps(2,jump-none) infinite}
/* a janela do reel: nasce pequena no centro e cresce até tomar a tela (o zoom ao rolar) */
.reel{--w0:clamp(190px,25vw,460px);--h0:calc(var(--w0) * .5625);
  position:absolute;z-index:2;left:50%;top:calc(50% - var(--lt) * .25 * (1 - var(--p)));transform:translate(-50%,-50%);width:calc(var(--w0) + (100vw - var(--w0)) * var(--p));height:calc(var(--h0) + (100svh - var(--h0)) * var(--p));
  border-radius:calc(var(--raio) * .7 * (1 - var(--p)));overflow:hidden;background:#111;will-change:width,height}
.js .reel{animation:abre 1.2s .2s var(--suavidade) both}
@keyframes abre{from{opacity:0;clip-path:inset(50% 0 50% 0)}to{opacity:1;clip-path:inset(0)}}
.reel video,.reel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 72%,rgba(0,0,0,.34))}
.reel-rec,.reel-tc,.reel-nome{z-index:1}
.reel-nome{position:absolute;left:18px;bottom:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9)}
/* enquanto não há reel: luzes de palco desfocadas, se mexendo devagar */
.reel-tela{position:absolute;inset:0;background:#0f0b0a;overflow:hidden}
.reel-tela i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(48px);opacity:.9;mix-blend-mode:screen;animation:vaga 17s ease-in-out infinite alternate}
.reel-tela i:nth-child(1){left:-18%;top:-42%;background:#f0a23a}
.reel-tela i:nth-child(2){right:-22%;top:-12%;background:#c2372f;animation-duration:22s;animation-delay:-6s}
.reel-tela i:nth-child(3){left:20%;bottom:-72%;background:#3b2a5c;animation-duration:27s;animation-delay:-11s}
.reel-tela::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,transparent 35%,rgba(0,0,0,.7) 100%),url("/icones/ruido.svg") 0 0 / 180px 180px}
@keyframes vaga{from{transform:translate(0,0) scale(1)}to{transform:translate(14%,18%) scale(1.25)}}
.reel-rec{position:absolute;left:18px;top:16px;display:flex;align-items:center;gap:7px;font-weight:500;font-size:10.5px;letter-spacing:.14em;color:#fff}
.reel-rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:pisca 1.6s steps(2,jump-none) infinite}
@keyframes pisca{50%{opacity:.15}}
.reel-tc{position:absolute;right:18px;bottom:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.heroi-pe{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(clamp(16px,2.6vh,26px) + var(--lt));z-index:3;display:flex;justify-content:center;align-items:center;font-weight:500;font-size:12.5px;color:#fff;mix-blend-mode:difference}
.heroi-role{display:inline-flex;align-items:center;gap:10px}
.heroi-role::before{content:"";width:34px;height:1px;background:currentColor;transform-origin:0 50%;animation:puxa 2.2s var(--suavidade) infinite}
@keyframes puxa{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* ---------- cena 02. sobre ---------- */
.sobre{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:clamp(24px,5vw,90px);padding:var(--vao) var(--pad) calc(var(--vao) * .55);border-radius:var(--raio) var(--raio) 0 0;margin-top:calc(var(--raio) * -1)}
/* o texto entra por cima da beirada da foto: a foto fica atrás do começo do parágrafo.
   "difference" faz a letra inverter sozinha: escura no papel, clara em cima da foto. (Por isso a cor aqui é branca.) */
.sobre-lado{position:relative;z-index:0}
.sobre-txt{position:relative;z-index:1;padding-top:clamp(70px,11vw,190px);margin-left:calc(clamp(70px,11.5vw,190px) * -1);mix-blend-mode:difference;color:#fff}
.sobre-txt .grifo{background-image:linear-gradient(#0ebcbd,#0ebcbd)}   /* o inverso do vermelho: no papel, volta a aparecer vermelho */
.grande{font-family:var(--disp);font-weight:300;font-size:clamp(26px,3.6vw,58px);line-height:1.1;letter-spacing:-.028em;text-wrap:pretty}
.grande + .grande{margin-top:.7em}
.grande strong{font-weight:600}
.grifo{background:linear-gradient(var(--rec),var(--rec)) 0 96% / 100% .08em no-repeat}
.js .ver .grifo{background-size:0 .08em;transition:background-size 1.1s .45s var(--suavidade)}
.js .ver.visto .grifo{background-size:100% .08em}
/* a foto do Jorge como se fosse vista pelo visor: levemente torta, com um segundo quadro vermelho atrás,
   a grade dos terços, os ajustes reais da foto (f/2.0, 1/160, ISO 1000, 30 mm) e o autofoco travando no rosto */
.visor-caixa{position:relative;width:min(100%,470px);margin-top:clamp(22px,3vw,40px);transform:rotate(-2.4deg)}
.js .visor-caixa.ver{transform:rotate(-2.4deg) translateY(16px)} .js .visor-caixa.ver.visto{transform:rotate(-2.4deg)}
.visor-caixa::before{content:"";position:absolute;inset:0;border:1.5px solid var(--rec);border-radius:var(--raio);transform:rotate(-3.6deg) translate(-13px,-13px);transition:transform 1.2s .3s var(--suavidade)}   /* o segundo quadro sai para a esquerda e para cima, longe do texto que passa por cima da foto */
.js .visor-caixa.ver:not(.visto)::before{transform:none}
.visor{position:relative;aspect-ratio:2 / 3;border-radius:var(--raio);overflow:hidden;background:#111;color:#fff;box-shadow:0 34px 60px -34px rgba(0,0,0,.55);isolation:isolate}
.visor img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 2.4s var(--suavidade)}
.visor-caixa:hover .visor img{transform:scale(1.045)}
.visor::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 52%,rgba(9,9,11,.7) 100%),linear-gradient(180deg,rgba(0,0,0,.38),transparent 20%,transparent 76%,rgba(0,0,0,.5))}   /* a beirada direita escurece: é onde o texto passa por cima */
.visor::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.3) calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),rgba(255,255,255,.3) calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.visor-hud{position:absolute;left:16px;right:16px;z-index:2;display:flex;justify-content:space-between;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.92)}
.visor-hud.topo{top:14px} .visor-hud.pe{bottom:14px;justify-content:flex-start;gap:16px}
.visor-rec{display:inline-flex;align-items:center;gap:7px}
.visor-rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:pisca 1.6s steps(2,jump-none) infinite}
.visor .af{left:21%;top:23.5%;width:30%;height:24%;z-index:2}
.visor-caixa.visto .af,html:not(.js) .visor .af{opacity:1;transform:none;color:var(--rec);transition-delay:.7s,.7s,1.35s}
.visor-caixa.visto .af b,html:not(.js) .visor .af b{opacity:1;transition-delay:1.4s}

/* ---------- cena 03. serviços ---------- */
.servicos{padding:calc(var(--vao) * .55) var(--pad) var(--vao);border-radius:0 0 var(--raio) var(--raio)}
.serv-grupo{margin-top:clamp(40px,5.5vw,84px)}
.serv-cab{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1.5px solid var(--tinta);font-family:var(--txt);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.serv-cab small{font-weight:400;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--grafite)}
.serv{border-bottom:1px solid var(--fio-escuro)}
.serv summary{display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,6fr) 44px;align-items:center;gap:18px;padding:clamp(16px,2vw,28px) 0;cursor:pointer;list-style:none}
.serv summary::-webkit-details-marker{display:none}
.serv-n{font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--grafite);transition:color .25s}
.serv-nome{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3.6vw,56px);line-height:1;letter-spacing:-.035em;transition:transform .4s var(--suavidade)}
.serv-res{font-size:clamp(14px,1.15vw,17px);color:var(--grafite);max-width:48ch}
.serv-mais{position:relative;justify-self:end;width:40px;height:40px;border-radius:50%;border:1px solid var(--tinta);transition:transform .4s var(--suavidade),background-color .25s,color .25s}
.serv-mais::before,.serv-mais::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;margin:-.75px 0 0 -6.5px;background:currentColor}
.serv-mais::after{transform:rotate(90deg)}
.serv summary:hover .serv-nome{transform:translateX(10px)}
.serv summary:hover .serv-n,.serv[open] .serv-n{color:var(--rec)}
.serv[open] .serv-nome{font-weight:600}
.serv[open] .serv-mais{transform:rotate(45deg);background:var(--tinta);color:var(--papel)}
.serv-itens{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 clamp(20px,2.4vw,32px) 74px}
.serv-itens li{border:1px solid var(--fio-escuro);border-radius:999px;padding:7px 15px;font-size:14px;background:rgba(255,255,255,.5)}
.serv[open] .serv-itens li{animation:sobe .5s var(--suavidade) both}
.serv[open] .serv-itens li:nth-child(2){animation-delay:.04s}.serv[open] .serv-itens li:nth-child(3){animation-delay:.08s}.serv[open] .serv-itens li:nth-child(4){animation-delay:.12s}.serv[open] .serv-itens li:nth-child(5){animation-delay:.16s}

/* ---------- cena 04. trabalhos: a fita de filme ---------- */
.trabalhos{padding:var(--vao) 0 var(--vao)}
.trab-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 var(--pad)}
.fita-setas{display:flex;gap:8px}
.fita-setas button{width:clamp(44px,3.8vw,56px);aspect-ratio:1;border-radius:50%;border:1px solid var(--fio-claro);display:grid;place-items:center;font-size:18px;transition:background-color .25s,color .25s,border-color .25s,opacity .25s}
.fita-setas button::before{content:"←"} .fita-setas button:last-child::before{content:"→"}
.fita-setas button:hover{background:var(--clara);color:var(--tinta);border-color:var(--clara)}
.fita-setas button:disabled{opacity:.3;pointer-events:none}
.fita{margin-top:clamp(26px,3.4vw,52px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y}
.fita::-webkit-scrollbar{display:none}
.fita.arrastando{cursor:grabbing}
.fita.arrastando *{pointer-events:none}
.fita-trilho{position:relative;display:flex;gap:clamp(12px,1.3vw,20px);width:max-content;padding:30px var(--pad)}
/* os furinhos da película, em cima e embaixo */
.fita-trilho::before,.fita-trilho::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(246,243,236,.2) 12px 26px,transparent 26px 38px)}
.fita-trilho::before{top:6px} .fita-trilho::after{bottom:6px}
.quadro{position:relative;flex:0 0 auto;height:clamp(360px,60vh,620px);aspect-ratio:9 / 16;border-radius:var(--raio);overflow:hidden;background:#151515;isolation:isolate;color:#fff}
.quadro.deitado{aspect-ratio:16 / 9}
.quadro.foto{aspect-ratio:2 / 3}
.quadro::before{content:"";position:absolute;inset:-18%;z-index:-2;background:var(--capa,#151515)}
.quadro::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5))}
.quadro img,.quadro video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--suavidade)}
.quadro:hover img,.quadro:hover video{transform:scale(1.05)}
.quadro-cod{position:absolute;left:18px;top:16px;right:18px;z-index:2;display:flex;justify-content:space-between;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.86)}
.quadro-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px 5px 10px;font-weight:500;font-size:12.5px;background:rgba(12,12,13,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.quadro-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rec)}
.quadro-nome{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.quadro-nome b{font-family:var(--disp);font-weight:600;font-size:clamp(21px,2vw,31px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.quadro-nome .quadro-tag{position:static}
/* nas fotos: o quadro do foco nasce no meio, "procura" e vai até o rosto de cada pessoa; aí fica vermelho. Nos vídeos não tem. */
.quadro .af{left:33%;top:38%;width:34%;height:24%;z-index:2;transform:none;transition:opacity .3s,left .8s .25s var(--suavidade),top .8s .25s var(--suavidade),width .8s .25s var(--suavidade),height .8s .25s var(--suavidade),color .2s 1.05s}
.quadro.focado .af{left:var(--l);top:var(--t);width:var(--w);height:var(--h);opacity:1;color:var(--rec)}
.quadro.focado .af:nth-of-type(2){transition-delay:0s,.4s,.4s,.4s,.4s,1.2s}

/* ---------- cena 05. como funciona ---------- */
.passos{padding:var(--vao) var(--pad) calc(var(--vao) * .7);border-radius:var(--raio) var(--raio) 0 0}
.passos-linha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,44px);margin-top:clamp(44px,6vw,96px)}
.passos-linha li{position:relative;border-top:1.5px solid var(--tinta);padding-top:22px}
.passos-linha li::before{content:"";position:absolute;left:0;top:-6.5px;width:12px;height:12px;border-radius:50%;background:var(--rec)}
.passos-linha b{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(46px,5.6vw,92px);line-height:.9;letter-spacing:-.05em}
.passos-linha h3{margin-top:clamp(16px,2vw,30px);font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.9vw,29px);line-height:1.05;letter-spacing:-.025em}
.passos-linha p{margin-top:10px;color:var(--grafite);font-size:15.5px;max-width:30ch}

/* ---------- cena 06. área do cliente ---------- */
.cliente{padding:0 var(--pad) var(--vao);border-radius:0 0 var(--raio) var(--raio)}
.cliente-cartao{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4.5vw,84px);align-items:end;background:var(--noite);color:var(--clara);border-radius:clamp(22px,2.6vw,40px);padding:clamp(24px,4.6vw,76px)}
.cliente-cartao .cena{color:var(--cinza)}
.cliente-p{margin-top:22px;max-width:44ch;color:var(--suave);font-size:clamp(15px,1.3vw,19px)}
.cliente-form label{display:block;font-weight:500;font-size:13.5px;color:var(--suave)}
.cliente-campo{display:flex;align-items:center;gap:2px;margin-top:12px;background:rgba(255,255,255,.06);border:1px solid var(--fio-claro);border-radius:999px;padding:6px 6px 6px 20px;transition:border-color .25s}
.cliente-campo:focus-within{border-color:var(--clara)}
.cliente-campo span{color:var(--cinza);font-size:15px;white-space:nowrap}
.cliente-campo input{flex:1 1 auto;min-width:0;padding:10px 4px;font-size:16px;outline:none}
.cliente-campo button{flex:0 0 auto;background:var(--clara);color:var(--tinta);border-radius:999px;padding:11px 24px;font-weight:500;font-size:14px;transition:background-color .25s,color .25s}
.cliente-campo button:hover{background:var(--rec);color:#fff}
.cliente-msg{min-height:1.5em;margin-top:10px;font-size:13.5px;color:var(--cinza)}

/* ---------- cena 07. contato ---------- */
.contato{padding:var(--vao) var(--pad) clamp(56px,7vw,110px)}
.con-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(36px,5vw,84px);max-width:1180px}
.con-campo.larga{grid-column:1 / -1}
.con-campo label{display:block;font-weight:500;font-size:13.5px;color:var(--suave)}
.con-campo input,.con-campo textarea{display:block;width:100%;margin-top:8px;padding:14px 18px;font-size:17px;background:rgba(255,255,255,.04);border:1px solid var(--fio-claro);border-radius:16px;outline:none;resize:vertical;transition:border-color .25s,background-color .25s}
.con-campo input:focus,.con-campo textarea:focus{border-color:var(--clara);background:rgba(255,255,255,.07)}
.con-msg{grid-column:1 / -1;min-height:1.4em;margin:-4px 0;font-size:14px;color:#ff8a80}
.con-bt{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:12px;background:var(--rec);color:#fff;border-radius:999px;padding:16px 28px;font-weight:500;font-size:16px;transition:transform .35s var(--suavidade),background-color .25s}
.con-bt::after{content:"→";transition:transform .35s var(--suavidade)}
.con-bt:hover{background:#f0453c} .con-bt:hover::after{transform:translateX(5px)}
.con-redes{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;margin-top:clamp(40px,6vw,90px);font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.6vw,40px);letter-spacing:-.03em}
.con-redes a{background:linear-gradient(var(--rec),var(--rec)) 0 100% / 0 2px no-repeat;transition:background-size .4s var(--suavidade)}
.con-redes a:hover{background-size:100% 2px}
.con-redes:empty,.menu-redes:empty{display:none}

/* ---------- rodapé: pequeno e leve ---------- */
.rodape{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:clamp(44px,6vw,84px) var(--pad) calc(clamp(22px,3vw,34px) + var(--lt));border-top:1px solid var(--fio-claro)}
.rodape-marca{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:-.025em}
.rodape-marca em{font-weight:300}
.rodape-links,.rodape-redes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:13.5px;color:var(--suave)}
.rodape-links a,.rodape-redes a,.rodape-fim a{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding:2px 0;transition:background-size .35s var(--suavidade),color .25s}
.rodape-links a:hover,.rodape-redes a:hover,.rodape-fim a:hover{background-size:100% 1px;color:#fff}
.rodape-redes{color:var(--clara)}
.rodape-redes:empty{display:none}
.rodape-fim{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:10px;font-size:12px;color:var(--cinza)}

/* ---------- a linha do tempo (ilha de edição), presa embaixo ---------- */
.lt{position:fixed;left:0;right:0;bottom:0;z-index:75;height:var(--lt);display:flex;align-items:center;gap:14px;padding:0 var(--pad);background:rgba(12,12,13,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--fio-claro);color:var(--suave);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.lt-tc{flex:0 0 auto;color:#fff}
.lt-trilha{position:relative;flex:1 1 auto;display:flex;gap:3px;height:14px}
.lt-clipe{position:relative;flex:1 1 0;min-width:6px;border-radius:3px;background:rgba(246,243,236,.16);overflow:hidden;cursor:pointer;transition:background-color .25s}
.lt-clipe span{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.7);pointer-events:none}
.lt-clipe:hover{background:rgba(246,243,236,.3)}
.lt-clipe.atual{background:rgba(246,243,236,.36)}
.lt-clipe.atual span{color:#fff}
.lt-agulha{position:absolute;top:-7px;bottom:-7px;left:0;width:1.5px;background:var(--rec);pointer-events:none;will-change:transform}
.lt-agulha::before{content:"";position:absolute;left:50%;top:-1px;width:9px;height:7px;margin-left:-4.5px;background:var(--rec);clip-path:polygon(0 0,100% 0,50% 100%)}
.lt-cena{flex:0 0 auto;min-width:11ch;text-align:right;text-transform:uppercase}
body.menu-aberto .lt{display:none}

/* ---------- telas menores ---------- */
@media (max-width:980px){
  .topo-nav,.topo-cta{display:none} .menu-bt{display:block}
  .sobre{grid-template-columns:minmax(0,1fr);gap:0}
  .sobre-txt{padding-top:0;margin:-62px 0 0}
  .visor-caixa{width:min(80%,380px)}
  .visor::before{background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 22%,transparent 60%,rgba(9,9,11,.9) 97%)}   /* aqui o texto sobe por cima da parte de baixo da foto: é ela que escurece */
  .visor-hud.pe{bottom:auto;top:36px;gap:10px}
  .lt-clipe span{display:none}
  .serv summary{grid-template-columns:34px minmax(0,1fr) 40px;row-gap:8px}
  .serv-res{grid-column:2 / 3;grid-row:2}
  .serv-mais{grid-column:3;grid-row:1}
  .serv-itens{padding-left:52px}
  .passos-linha{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .cliente-cartao{grid-template-columns:minmax(0,1fr);align-items:start}
  .con-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .heroi{height:200vh}
  .reel{--w0:clamp(170px,58vw,270px)}
  .heroi-nome{gap:clamp(96px,30vw,156px);font-size:clamp(54px,21.5vw,124px)}
  .heroi-lado{top:auto;transform:none}
  .heroi-lado.esq{left:var(--pad);right:var(--pad);bottom:calc(clamp(58px,9vh,88px) + var(--lt));max-width:none;text-align:center;font-size:14px}
  .heroi-lado.dir{right:auto;left:50%;top:clamp(84px,13vh,118px);transform:translateX(-50%)}
  .serv-itens{padding-left:0}
  .quadro{height:clamp(340px,58vh,520px)}
  .passos-linha{grid-template-columns:minmax(0,1fr)}
  .cliente-campo{flex-wrap:wrap;border-radius:24px;padding:10px 12px 12px 16px}
  .cliente-campo input{flex:1 1 40%}
  .cliente-campo button{flex:1 1 100%;margin-top:6px}
  .con-bt{width:100%;justify-content:center}
  :root{--lt:30px}
  .lt{gap:10px} .lt-cena{display:none} .lt-trilha{height:8px;gap:2px} .lt-agulha{top:-5px;bottom:-5px}
}
/* ---------- o ponteiro do mouse como quadro de foco (só no computador; o script liga depois do primeiro movimento do mouse) ---------- */
.com-mira,.com-mira *{cursor:none!important}
.com-mira input,.com-mira textarea,.com-mira select{cursor:text!important}
.mira{position:fixed;left:0;top:0;z-index:95;pointer-events:none;color:#fff;opacity:0;transition:opacity .25s,color .2s}
.com-mira .mira{opacity:1}
.com-mira .mira.fora,.com-mira .mira.some{opacity:0}
.mira-ponto{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:currentColor;will-change:transform}
.mira-quadro{position:absolute;left:0;top:0;width:30px;height:30px;will-change:transform,width,height;filter:drop-shadow(0 0 1px rgba(0,0,0,.5));background:
  linear-gradient(currentColor,currentColor) 0 0 / 9px 1.5px no-repeat, linear-gradient(currentColor,currentColor) 0 0 / 1.5px 9px no-repeat,
  linear-gradient(currentColor,currentColor) 100% 0 / 9px 1.5px no-repeat, linear-gradient(currentColor,currentColor) 100% 0 / 1.5px 9px no-repeat,
  linear-gradient(currentColor,currentColor) 0 100% / 9px 1.5px no-repeat, linear-gradient(currentColor,currentColor) 0 100% / 1.5px 9px no-repeat,
  linear-gradient(currentColor,currentColor) 100% 100% / 9px 1.5px no-repeat, linear-gradient(currentColor,currentColor) 100% 100% / 1.5px 9px no-repeat}
.mira-quadro b{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mira.tinta{color:var(--tinta)}
.mira.tinta .mira-quadro{filter:none}
.mira.travou{color:var(--rec)}
/* o flash do clique: um clarão que nasce onde o mouse clicou e some rápido */
.flash{position:fixed;inset:0;z-index:94;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,255,255,.96) 0,rgba(255,255,255,.62) 14%,rgba(255,255,255,.3) 42%,rgba(255,255,255,.16) 100%)}
.flash.dispara{animation:flash .5s cubic-bezier(.2,.6,.3,1) both}
@keyframes flash{0%{opacity:0}9%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ver{opacity:1;filter:none;transform:none;transition:none}
  .af,.af b{transition:none}
  .reel-tela i,.reel-rec i,.visor-rec i,.heroi-lado.dir span::before,.heroi-role::before,.menu-links li,.js .heroi-nome .l1,.js .heroi-nome .l2,.js .reel,.serv[open] .serv-itens li{animation:none}
  .js .ver .grifo{transition:none;background-size:100% .08em}
  .heroi{height:auto} .heroi-fixo{position:relative}
}