/* Mega Studio Fotografias · Anápolis/GO · prévia do Estúdio Limen
   v2 "Câmara escura": fundo quase preto e quente, as fotos se revelam como no laboratório, visor na abertura,
   álbuns como tiras de filme numeradas com a escolhida marcada a lápis vermelho.
   Fontes: Italiana (títulos), DM Sans (texto), DM Mono (legendas). Todas OFL. */

@font-face{font-family:"Italiana";src:url(../fonts/italiana.woff2?v=16527e14) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dmsans.woff2?v=659414e0) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dmmono.woff2?v=d7b3bb1b) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* cores da Mega Studio: o verde do logo e o dourado do selo, no escuro do laboratório */
  --bg:#0b100c;--bg2:#101712;--film:#050806;--ink:#efe8da;--ink2:#c5c0ae;--ink3:#8a8b7c;--line:rgba(239,232,218,.13);
  --green:#3fa246;--green-hi:#57c45f;--btn:#2a8536;--btn-hi:#319a3e;--gold:#cfa452;--mark:#e4bc55;
  --serif:"Italiana","Didot","Bodoni 72",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gut:clamp(18px,5vw,64px);--strip:30px;--ease:cubic-bezier(.22,.8,.2,1);
  --fh:clamp(150px,42vw,240px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
/* grão de filme: ladrilho com 5,5% de opacidade embutida, no FUNDO das seções (body, abertura, tiras, sobre).
   Nunca numa camada fixa do tamanho da tela: no iPhone (Safari 26) ela é lida como "barra do topo" e, por ser
   transparente, a faixa do relógio mostrava a foto passando por baixo (o cabeçalho virava um quadrado solto). */
body{margin:0;background:url(../ui/grao-fundo.png) var(--bg);color:var(--ink);font:400 16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{padding-inline:var(--gut);max-width:1240px;margin-inline:auto}
.mono{font-family:var(--mono);font-weight:400;font-size:11.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase}
.label{color:var(--gold)}
.title{font:400 clamp(32px,8.6vw,64px)/1.04 var(--serif);text-transform:uppercase;letter-spacing:.04em}
.ico{width:20px;height:20px;flex:none}

/* faixa de prévia */
.strip{position:relative;z-index:41;height:var(--strip);display:flex;align-items:center;justify-content:center;padding:0 12px;background:#000;color:#e9e0d2;
  font:500 12px/1 var(--sans);letter-spacing:.04em;text-align:center;white-space:nowrap;overflow:hidden}

/* topo */
.top{position:absolute;z-index:40;left:0;right:0;top:var(--strip);height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gut);color:var(--ink)}
/* topo fixo: no iPhone (Safari 26) a cor da barra fixa que encosta no topo é estendida para trás do relógio/bateria.
   Regras para isso funcionar: largura total, fundo SÓLIDO já no primeiro quadro (sem transição de cor, sem desfoque,
   sem transform na própria barra) e nenhum outro elemento fixo do tamanho da tela por cima dela.
   A animação de entrada fica só no conteúdo (logo e botão). */
.top.is-fixed{position:fixed;top:0;height:calc(68px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:#0b100c;box-shadow:0 1px 0 var(--line)}
.top.is-fixed>*{animation:drop .45s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}}
.logo{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none}
.logo b{font:400 22px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase}
.logo span{font:400 9px/1 var(--mono);letter-spacing:.42em;text-transform:uppercase;margin-top:6px;color:var(--ink2)}
.nav{display:none;gap:30px;font:400 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;opacity:.8}
.nav a:hover{opacity:1}
@media (min-width:860px){.nav{display:flex}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;text-decoration:none;
  font:500 15px/1 var(--sans);letter-spacing:.03em;transition:background-color .25s,color .25s,border-color .25s,transform .2s}
.btn:active{transform:scale(.97)}
.btn-cream{background:var(--btn);color:#fff}
.btn-cream:hover{background:var(--btn-hi)}
.btn-line{border:1px solid rgba(239,230,216,.5);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:13.5px}
.btn-big{width:100%;max-width:420px;min-height:58px;font-size:16px}
.top .wa-txt{display:none}
@media (min-width:600px){.top .wa-txt{display:inline}}

/* ---------- abertura: foto dentro de um visor de câmera ---------- */
.hero{position:relative;min-height:calc(100vh - var(--strip));min-height:calc(100svh - var(--strip));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#000}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:url(../ui/grao-fundo.png),linear-gradient(180deg,rgba(6,10,7,.6) 0,rgba(6,10,7,0) 22%,rgba(6,10,7,0) 36%,rgba(6,10,7,.5) 58%,rgba(6,10,7,.88) 100%)}
.vf{position:absolute;z-index:2;left:var(--vfx,14px);right:var(--vfx,14px);top:calc(68px + 10px);bottom:16px;pointer-events:none;color:rgba(239,230,216,.82)}
.vf .c{position:absolute;width:28px;height:28px;border:0 solid currentColor}
.vf .tl{left:0;top:0;border-width:1.5px 0 0 1.5px}.vf .tr{right:0;top:0;border-width:1.5px 1.5px 0 0}
.vf .bl{left:0;bottom:0;border-width:0 0 1.5px 1.5px}.vf .br{right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.vf-l,.vf-r{position:absolute;top:9px;font-size:10px;letter-spacing:.18em}
.vf-l{left:38px}.vf-r{right:38px}
/* quadro de foco: quatro cantos, como nas câmeras. O JS leva do meio do visor até o nome (left/top/width/height) */
.af{display:none;position:absolute;left:50%;top:44%;width:38px;height:38px;margin:-19px 0 0 -19px;color:rgba(239,230,216,.88);
  background:linear-gradient(currentColor,currentColor) left top/12px 1.5px,linear-gradient(currentColor,currentColor) left top/1.5px 12px,
    linear-gradient(currentColor,currentColor) right top/12px 1.5px,linear-gradient(currentColor,currentColor) right top/1.5px 12px,
    linear-gradient(currentColor,currentColor) left bottom/12px 1.5px,linear-gradient(currentColor,currentColor) left bottom/1.5px 12px,
    linear-gradient(currentColor,currentColor) right bottom/12px 1.5px,linear-gradient(currentColor,currentColor) right bottom/1.5px 12px;
  background-repeat:no-repeat;
  transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),margin .55s var(--ease),background-size .55s var(--ease),color .14s}
.af::before,.af::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:opacity .25s}
.af::before{width:7px;height:1.5px;margin:-.75px 0 0 -3.5px}.af::after{width:1.5px;height:7px;margin:-3.5px 0 0 -.75px}
.af.wide{background-size:22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px,22px 2px,2px 22px}
.af.wide::before,.af.wide::after{opacity:0}
.af.lock{color:var(--green-hi)}
.af.now{transition:none!important}
.shutter{position:absolute;inset:0;z-index:5;background:#000;pointer-events:none;display:none}
.hero-c{position:relative;z-index:4;width:100%;max-width:1240px;margin:0 auto;padding:0 calc(var(--gut) + 4px) calc(56px + env(safe-area-inset-bottom))}
.hero .label{color:rgba(239,230,216,.9);margin-bottom:16px;text-shadow:0 1px 14px rgba(0,0,0,.7)}
@media (max-width:599px){.hero .label{font-size:11px;letter-spacing:.08em;white-space:nowrap}}
.hero-t{margin:0 0 24px;color:#f4ece0}
.hero-t .fit-t{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:.84}
.ht-m .l2{margin-top:.06em}
.ht-d{display:none}
@media (min-width:760px){.ht-m{display:none}.ht-d{display:block}:root{--vfx:28px}}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.hero .link{color:#fff;text-underline-offset:7px;letter-spacing:.18em}

/* títulos que ocupam a largura toda e nunca cortam: --r medido no build com a fonte real; o JS confere */
.fit{display:block;container-type:inline-size;width:100%}
.fit-t{display:block;width:max-content;max-width:none;white-space:nowrap;
  font-size:min(calc(100cqi * var(--w,1) / var(--r,8) * var(--k,1) * .99),var(--max,100vw))}
.js.fonts-wait .fit-t{visibility:hidden;animation:showLate 0s 3s forwards}
@keyframes showLate{to{visibility:visible}}

/* sequência de abertura (o JS comanda o foco, ~2,7 s; o botão de orçamento aparece com 1 s):
   o obturador abre com a foto fora de foco, o visor aparece e o nome sobe; o quadro de foco procura no meio,
   viaja até o nome e trava em verde (como nas câmeras), a foto entra em foco e o obturador bate: a foto foi tirada.
   Depois do clique o nome continua emoldurado em verde (pedido do Carlos); com movimento reduzido já abre assim */
.js .shutter{display:block;animation:shutter .7s var(--ease) 2.6s both}
.js.go .shutter{animation-delay:.05s}
@keyframes shutter{from{opacity:1}to{opacity:0;visibility:hidden}}
.js .hero.click .shutter{animation:blink .34s linear both}
@keyframes blink{0%{opacity:0;visibility:visible}20%{opacity:1}55%{opacity:1}100%{opacity:0;visibility:hidden}}
/* a foto só desfoca quando a sequência começa (antes disso o obturador está fechado); sem JS ela nunca desfoca */
.js.go .hero-img{filter:blur(calc(4px + .6vw));will-change:filter}
.js .hero.focus .hero-img{filter:blur(1.5px);transition:filter .55s var(--ease)}
.js .hero.sharp .hero-img{filter:none;transition:filter .2s ease-out}
.js .hero.shot .hero-img{will-change:auto}
.js .vf .c,.js .vf-l,.js .vf-r{opacity:0}
.js.go .vf .c{animation:corner .9s var(--ease) .35s both}
.js.go .vf-l,.js.go .vf-r{animation:fade .8s ease .9s both}
@keyframes corner{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
.vf .tl{transform-origin:0 0}.vf .tr{transform-origin:100% 0}.vf .bl{transform-origin:0 100%}.vf .br{transform-origin:100% 100%}
.js .af{display:block;opacity:0}
.js .af.hunt{opacity:1;animation:afHunt .7s var(--ease) both}
@keyframes afHunt{0%{opacity:0;transform:scale(2)}35%{opacity:1;transform:scale(.84)}62%{transform:scale(1.1)}82%{transform:scale(.97)}100%{opacity:1;transform:none}}
.js .af.lock{animation:snap .3s var(--ease)}
@keyframes snap{from{transform:scale(1.04)}}
.js .af.gone{opacity:0;transition:none}
.js .hero-c > *{opacity:0}
.js.go .hero-c > *{animation:rise .95s var(--ease) both}
.js.go .hero-c .label{animation-delay:.6s}.js.go .hero-c .hero-t{animation-delay:.72s}.js.go .hero-c .ctas{animation-delay:.95s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* JS quebrado (sem .go): tudo aparece sozinho depois de 3 s, com a foto em foco (o quadro de foco não aparece) */
.js:not(.go) .vf .c,.js:not(.go) .vf-l,.js:not(.go) .vf-r,.js:not(.go) .hero-c > *{animation:fade .6s ease 3s both}

/* destaque */
.feat{padding:clamp(76px,15vw,160px) var(--gut) clamp(64px,12vw,130px);text-align:center}
.feat .big{font:400 clamp(34px,9vw,78px)/1.07 var(--serif);text-transform:uppercase;letter-spacing:.04em;max-width:15ch;margin:0 auto}
.feat .n,.roll-t .n{font-family:var(--sans);font-weight:300;letter-spacing:-.03em;font-size:.94em}
.dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--green-hi);margin:36px auto 0;box-shadow:0 0 22px 6px rgba(87,196,95,.32)}

/* ---------- escrever com a luz: fotos grandes que um feixe de luz revela ao rolar ---------- */
.luz{padding-bottom:clamp(76px,14vw,150px)}
.luz-head{margin-bottom:clamp(34px,7vw,64px)}
.luz .title{margin-top:12px}
.prints{display:grid;gap:clamp(60px,12vw,130px)}
.print{--p:1;width:100%;max-width:920px}
.print.tall{max-width:560px}
@media (min-width:900px){.print:nth-child(odd){justify-self:start}.print:nth-child(even){justify-self:end}}
.print-b{position:relative;display:block;width:100%;aspect-ratio:var(--ar,1.5);overflow:hidden;background:#080c09;box-shadow:0 0 0 1px rgba(239,230,216,.07)}
.print-img{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--p) * 140% - 40%),transparent calc(var(--p) * 140% - 6%));
  mask-image:linear-gradient(100deg,#000 calc(var(--p) * 140% - 40%),transparent calc(var(--p) * 140% - 6%))}
.print-img img{width:100%;height:100%;object-fit:cover}
.beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:calc((1 - var(--p)) * 4);
  background:linear-gradient(100deg,transparent calc(var(--p) * 140% - 36%),rgba(255,214,160,.42) calc(var(--p) * 140% - 22%),rgba(255,238,214,.8) calc(var(--p) * 140% - 17%),rgba(255,214,160,.3) calc(var(--p) * 140% - 12%),transparent calc(var(--p) * 140% - 4%))}
.js .print{--p:0}
.cap{display:grid;gap:5px;margin-top:13px;color:var(--ink3)}
.cap span:first-child{color:var(--gold)}
@media (min-width:600px){.cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.cap span:last-child{text-align:right}}

/* ---------- portfólio: folha de contato ---------- */
.port{padding-bottom:clamp(64px,11vw,120px)}
.port-head{margin-bottom:clamp(28px,5vw,44px)}
.port .title{margin:10px 0 12px}
.hint{color:var(--ink2);font-size:15.5px}
.key{display:flex;gap:12px;align-items:flex-start;margin-top:12px;color:var(--ink3);font-size:14px;line-height:1.5;max-width:52ch}
.key svg{flex:none;width:30px;height:20px;margin-top:1px;overflow:visible}
.key path{fill:none;stroke:var(--mark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips button{min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font:400 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);transition:background-color .25s,color .25s,border-color .25s}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#0b100c}
.sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,70px)}
.roll,.film,.frames{min-width:0;max-width:100%}
.roll.in-anim{animation:rise .55s var(--ease) both}
.roll-h{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no meta" "t t";align-items:baseline;gap:6px 12px;margin-bottom:12px}
.roll-h .no{grid-area:no;color:var(--gold)}
.roll-h .meta{grid-area:meta;justify-self:end;color:var(--ink3);text-align:right}
.roll-h h3{grid-area:t;font:400 clamp(28px,7.4vw,42px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.04em}
.roll-t{text-align:left;text-transform:inherit;letter-spacing:inherit}
.roll-t:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (min-width:760px){.roll-h{grid-template-columns:auto 1fr auto;grid-template-areas:"no t meta";gap:18px}}

/* a tira: base escura, furos de tracionamento em cima e embaixo, marcação da borda e número dos quadros */
.film{position:relative;overflow:hidden;background:url(../ui/grao-fundo.png) var(--film);padding:30px 0 12px;
  --holes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9'%3E%3Crect x='5' y='0.5' width='12' height='8' rx='2' fill='%23efe6d8' fill-opacity='.16'/%3E%3C/svg%3E")}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:9px;background:var(--holes) repeat-x;background-size:22px 9px;pointer-events:none}
.film::before{top:5px}.film::after{bottom:5px}
.edge{position:absolute;left:var(--gut);top:17px;font-size:8.5px;letter-spacing:.24em;color:var(--gold);opacity:.72;white-space:nowrap;pointer-events:none}
.frames{position:relative;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:0 var(--gut) 24px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:var(--gut)}
.frames::-webkit-scrollbar{display:none}
.fr{position:relative;flex:none;height:var(--fh);width:calc(var(--fh) * var(--ar,1.5));scroll-snap-align:start}
.fr button{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#141a15}
.fr img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover){.fr button:hover img{transform:scale(1.04)}}
.fr .fn{position:absolute;left:1px;top:calc(100% + 6px);font:400 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--gold);opacity:.55}
.fr.pick{margin-right:8px}
.fr.pick .fn{color:var(--mark);opacity:1}
/* revelação: a foto sai do papel em branco sob a luz vermelha de segurança */
.fr button::after{content:"";position:absolute;inset:0;background:#2f8a3a;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.js .fr img{opacity:0}
.fr.dev img{animation:develop 2.2s var(--ease) var(--d,0s) both}
.fr.dev button::after{animation:safelight 2.2s ease-out var(--d,0s) both}
@keyframes develop{0%{opacity:0;filter:grayscale(1) brightness(2.4) contrast(.2)}12%{opacity:1}55%{filter:grayscale(.55) brightness(1.3) contrast(.72)}100%{opacity:1;filter:none}}
@keyframes safelight{0%{opacity:.72}60%{opacity:.32}100%{opacity:0}}
/* lápis vermelho na escolhida */
.lapis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lapis path{fill:none;stroke:var(--mark);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;opacity:.95}
.js .lapis path{stroke-dashoffset:100}
.fr.mark .lapis path{animation:draw 1.1s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* setas da tira no computador */
.scr{position:absolute;z-index:2;top:calc(30px + var(--fh) / 2);margin-top:-23px;width:46px;height:46px;border-radius:50%;display:none;place-items:center;background:rgba(11,16,12,.82);border:1px solid var(--line);color:var(--ink);transition:opacity .25s}
.scr svg{width:20px;height:20px}
.scr-l{left:12px}.scr-r{right:12px}
@media (hover:hover) and (pointer:fine){.scr{display:grid;opacity:0;pointer-events:none}.film.can-l .scr-l,.film.can-r .scr-r{opacity:1;pointer-events:auto}}
.port-cta{display:grid;justify-items:center;gap:16px;margin-top:clamp(34px,6vw,54px);text-align:center}
.also{margin-top:clamp(44px,8vw,72px);font:400 clamp(22px,5vw,30px)/1.35 var(--serif);color:var(--ink2);text-align:center;max-width:34ch}

/* ---------- do clique ao álbum: o último passo da fotografia é o papel ----------
   o álbum folheia com a rolagem (o palco fica preso embaixo do topo enquanto as folhas viram): folhas 3D rígidas,
   como as de um álbum de casamento, dobra do meio, sombra da folha virando e capa verde (cor da marca) com filete dourado.
   Sem JS: as páginas aparecem uma embaixo da outra (.album-plain). */
.album{padding-top:clamp(40px,8vw,90px)}
.album-run{display:none}
.js .album-run{display:block;position:relative;height:calc(var(--n) * 36svh + 100svh)}
.js .album-plain{display:none}
.album-plain{text-align:center}
.album-plain .label{margin-bottom:14px}
.album-flat{display:grid;gap:14px;margin-top:34px}
.album-flat img{width:100%;height:auto}
.album-stage{position:sticky;top:68px;height:calc(100svh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.6vh,36px);padding:0 var(--gut);text-align:center;overflow:hidden}
.album-head .label{margin-bottom:12px}
.album-head .title{text-wrap:balance}
.album-lead{margin:12px auto 0;max-width:36ch;color:var(--ink2);font-size:15.5px;text-wrap:balance}
.book{position:relative;display:block;flex:none;width:min(100%,780px,calc((100svh - 340px) * 2));aspect-ratio:2/1;perspective:2400px;cursor:zoom-in;
  transition:transform .9s var(--ease);-webkit-tap-highlight-color:transparent}
.book.closed{transform:translateX(-25%)}
/* luz suave embaixo do álbum, como numa mesa iluminada: o escuro em volta fica intencional */
.book::before{content:"";position:absolute;inset:-45% -28%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(239,232,218,.085),rgba(239,232,218,0))}
.board{position:absolute;top:0;bottom:0;width:50%;background:#e9e2d6;transition:opacity .45s}
.board-l{left:0;border-radius:3px 0 0 3px;box-shadow:0 28px 46px -20px rgba(0,0,0,.85),-2px 0 0 #d6cebf,-4px 1px 0 #c4bbab}
.board-r{right:0;border-radius:0 3px 3px 0;box-shadow:0 28px 46px -20px rgba(0,0,0,.85),2px 0 0 #d6cebf,4px 1px 0 #c4bbab}
.book.closed .board-l{opacity:0}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.42,.08,.2,1)}
.leaf.turned{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:#efe9de;background-repeat:no-repeat;background-size:200% 100%}
.face.front{background-position:100% 0;border-radius:0 3px 3px 0}
.face.back{transform:rotateY(180deg);background-position:0 0;border-radius:3px 0 0 3px}
.face::before,.face::after{content:"";position:absolute;inset:0;pointer-events:none}
.face.front::before{background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 8%)}
.face.back::before{background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,0) 8%)}
.face::after{background:#000;opacity:0}
.leaf.moving .face::after{animation:shade .9s cubic-bezier(.42,.08,.2,1)}
@keyframes shade{50%{opacity:.3}}
.face.end{background:#e9e2d6}
.face.cover{background:url(../ui/grao-fundo.png),linear-gradient(135deg,#1f4a27,#0f2717);display:grid;place-items:center}
.face.cover::before{inset:8%;border:1px solid rgba(207,164,82,.6);background:none}
.cv{display:flex;flex-direction:column;align-items:center;gap:.5em;padding:0 14%;color:var(--gold);font:400 clamp(11px,2.9vw,24px)/1.15 var(--serif);
  letter-spacing:.16em;text-transform:uppercase}
.cv-e{font-size:.72em;opacity:.75}
.book-zoom{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.album-count{color:var(--gold);font-size:11px;letter-spacing:.16em}
.album-count .ac-h{color:var(--ink3)}
.album .port-cta{margin-top:clamp(10px,3vw,30px)}

/* ---------- sobre: marcação de borda de filme correndo ---------- */
.about{background:url(../ui/grao-fundo.png) var(--bg2);padding-bottom:clamp(70px,13vw,140px);overflow:hidden}
.edge-run{display:flex;width:max-content;white-space:pre;padding:15px 0;border-bottom:1px solid var(--line);color:var(--gold);font-size:10.5px;letter-spacing:.22em;animation:run 70s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}
/* ---------- carrossel de slides (Sobre): as fotos em molduras de slide numa bandeja redonda, vista de cima ----------
   gira devagar sozinha; arrastar gira (com embalo); um toque "projeta" o slide (abre a galeria). A frase do Wender fica
   no meio da bandeja: os slides da frente passam embaixo dela e os de trás (de costas) passam em cima.
   No celular a bandeja é maior que a tela e sai pelos lados, como se a gente estivesse em cima dela. */
.slides{--tilt:-34deg;--m:clamp(112px,33vw,170px);--cy:47%;--qy:50%;position:relative;height:clamp(520px,134vw,780px);perspective:1100px;perspective-origin:50% 42%;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.slides.dragging{cursor:grabbing}
.tray{position:absolute;left:50%;top:var(--cy);width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.slide{--r:calc(var(--m) * var(--n) * .2);position:absolute;left:calc(var(--m) / -2);top:calc(var(--m) / -2);width:var(--m);height:var(--m);
  transform-style:preserve-3d;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));-webkit-tap-highlight-color:transparent}
.slide .mount,.slide .back{position:absolute;inset:0;border-radius:7%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.slide .mount{background:#eee8dc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -3px 6px rgba(0,0,0,.1),0 12px 22px -10px rgba(0,0,0,.7)}
.slide .win{position:absolute;left:11%;right:11%;top:20%;bottom:20%;overflow:hidden;background:#111;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.slide.pt .win{left:21%;right:21%;top:10%;bottom:16%}
.slide .win img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.slide .mk,.slide .no{position:absolute;left:0;right:0;font:400 calc(var(--m) * .062)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#958c7c;text-align:center}
.slide .mk{top:7.5%}.slide .no{bottom:7.5%}
.slide.pt .mk{display:none}.slide.pt .no{bottom:5%}
/* slide é filme transparente: visto por trás, a foto aparece espelhada (e mais escura, do lado da sombra) */
.slide .back{transform:rotateY(180deg);background:#d6cebf;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.slide .back img{transform:scaleX(-1);filter:brightness(.62) saturate(.75)}
.slide:focus-visible{outline:none}.slide:focus-visible .mount{box-shadow:0 0 0 3px var(--gold)}
.quote.slides-q{position:absolute;left:50%;top:var(--qy);z-index:2;width:min(64vw,360px);transform:translate(-50%,-50%);margin:0;padding:0;border:0;text-align:center;pointer-events:none}
.slides-q p{max-width:none;font-size:clamp(20px,5.4vw,30px);text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.slides-hint{margin:2px 0 0;text-align:center;font-size:10px;letter-spacing:.16em;color:var(--ink3)}
.slides-hint .h-c{display:none}
@media (hover:hover) and (pointer:fine){.slides-hint .h-t{display:none}.slides-hint .h-c{display:inline}}
.about .grid{display:grid;gap:22px;padding-top:clamp(56px,10vw,110px)}
.slides + .grid{padding-top:clamp(24px,5vw,60px)}
@media (min-width:900px){.about .grid{grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}}
.about .title{margin-top:12px}
.about .txt p{color:var(--ink2);max-width:58ch}
.about .txt p+p{margin-top:14px}
.quote{margin:30px 0 0;padding:4px 0 0 18px;border-left:1px solid var(--green-hi)}
.quote p{font:400 clamp(24px,6vw,32px)/1.25 var(--serif);color:var(--ink);max-width:22ch}
.quote cite{display:block;margin-top:10px;font-style:normal;color:var(--gold)}

/* ---------- contato ---------- */
.contact{padding:clamp(70px,13vw,140px) 0}
.contact .grid{display:grid;gap:34px}
@media (min-width:900px){.contact .grid{grid-template-columns:1fr 1fr;gap:70px;align-items:start}}
.contact .title{margin-top:12px}
.lead{color:var(--ink2);margin:14px 0 24px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.rows{border-top:1px solid var(--line)}
.rows li{display:flex;gap:14px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line)}
.rows .ico{margin-top:3px;color:var(--ink3)}
.rows small{display:block;color:var(--gold);margin-bottom:5px;font-size:10.5px}
.rows a{text-decoration:none;font-size:17px}
.rows a:hover{text-decoration:underline;text-underline-offset:4px}
.rows .btn{margin-top:12px;font-size:13.5px}

/* rodapé */
.foot{display:grid;gap:9px;justify-items:center;padding:34px var(--gut) 110px;border-top:1px solid var(--line);text-align:center;color:var(--ink3)}
.foot b{font:400 22px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.foot .small{font-size:9.5px;letter-spacing:.12em}

/* botão flutuante de WhatsApp (celular) */
.float{position:fixed;z-index:35;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--btn);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.45);transform:scale(0);transition:transform .35s var(--ease)}
.float.on{transform:none}
.float .ico{width:27px;height:27px}
@media (min-width:900px){.float{display:none}}

/* ---------- galeria em tela cheia ---------- */
.lb{position:fixed;inset:0;z-index:100;background:#060906;color:var(--ink);display:flex;flex-direction:column;touch-action:none;opacity:0;transition:opacity .25s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lb.on{opacity:1}
.lb-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 8px 0 18px;padding-top:env(safe-area-inset-top)}
.lb-count{font-size:12.5px;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--gold)}
.lb-title{flex:1;text-align:center;font:400 19px/1.2 var(--serif);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.lb-title{font-size:16px;letter-spacing:.04em}}
.lb-x{display:grid;place-items:center;width:48px;height:48px;border-radius:50%}
.lb-x:hover{background:rgba(239,230,216,.1)}
.lb-x svg{width:24px;height:24px}
.lb-stage{position:relative;flex:1;overflow:hidden}
.lb-track{position:absolute;inset:0;display:flex;will-change:transform}
.lb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:6px}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.lb-nav{position:absolute;z-index:3;top:50%;margin-top:-26px;display:none;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(239,230,216,.1)}
.lb-nav:hover{background:rgba(239,230,216,.2)}
.lb-nav svg{width:22px;height:22px}
.lb-prev{left:16px}.lb-next{right:16px}
@media (hover:hover) and (pointer:fine){.lb-nav{display:grid}.lb-stage{cursor:zoom-in}.lb.zoomed .lb-stage{cursor:grab}}
.lb-share{display:grid;place-items:center;width:44px;height:48px;border-radius:50%;color:var(--ink2)}
.lb-share:hover{color:var(--ink)}
.lb-share svg{width:21px;height:21px}
/* miniaturas do álbum (a folha de contato dentro da galeria) */
.lb-thumbs{position:relative;z-index:3;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex:none}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumbs button{flex:none;height:46px;border-radius:2px;overflow:hidden;opacity:.45;outline:1.5px solid transparent;outline-offset:2px;transition:opacity .25s,outline-color .25s}
.lb-thumbs button[aria-current=true]{opacity:1;outline-color:var(--gold)}
.lb-thumbs img{height:100%;width:auto;display:block}
/* página final de cada galeria: no estilo da capa do álbum (verde, filete dourado), "A foto termina no papel" + orçamento */
.lb-slide.is-end img{display:none}
.lb-end{width:min(88vw,440px);max-height:100%;display:flex}
.lb-end-in{position:relative;flex:1;display:grid;justify-items:center;align-content:center;gap:14px;padding:clamp(34px,7vh,56px) clamp(22px,7vw,40px);text-align:center;
  background:url(../ui/grao-fundo.png),linear-gradient(135deg,#1f4a27,#0f2717);border-radius:3px;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.lb-end-in::before{content:"";position:absolute;inset:10px;border:1px solid rgba(207,164,82,.55);pointer-events:none}
.lb-end .label{color:var(--gold)}
.lb-end-t{margin:2px 0 4px;font:400 clamp(28px,8vw,40px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.05em;color:#f4ece0;text-wrap:balance}
.lb-end-s{max-width:28ch;color:var(--ink2);font-size:15px;line-height:1.5;text-wrap:balance}
.lb-end .btn{margin-top:8px}
.lb-again{color:var(--ink2);font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;padding:10px 12px}
.lb-again:hover{color:var(--ink)}
.lb-thumbs .lb-thumb-end{width:46px;background:linear-gradient(135deg,#1f4a27,#0f2717);box-shadow:inset 0 0 0 5px #163a20,inset 0 0 0 6px rgba(207,164,82,.6)}
.lb.on-end .lb-stage{cursor:default}
@media (max-height:520px){.lb-end-s{display:none}.lb-end-t{font-size:24px}.lb-end-in{gap:8px;padding:16px 22px}.lb-end .btn{margin-top:2px;min-height:44px}}
.lb-toast{position:absolute;z-index:5;left:50%;bottom:86px;transform:translate(-50%,8px);padding:10px 16px;border-radius:999px;background:rgba(239,232,218,.94);color:#0b100c;font-size:11px;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.lb-toast.on{opacity:1;transform:translate(-50%,0)}
.lb-slide img{transform-origin:50% 50%;will-change:transform}
body.lb-open{overflow:hidden}
/* ampliador: a foto cresce do quadro até a tela cheia */
.lb-ghost{position:fixed;z-index:101;transform-origin:0 0;pointer-events:none;object-fit:cover;will-change:transform}
.lb.zooming .lb-slide img{visibility:hidden}

/* aparecer ao rolar (leve) */
.js [data-rv]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-rv],.js .hero-c > *,.js .vf .c,.js .vf-l,.js .vf-r,.js .fr img{opacity:1;transform:none}
  .js.go .hero-img{filter:none}
  .js .shutter{display:none}
  .js .lapis path{stroke-dashoffset:0}
  .js .print{--p:1}
  .beam{display:none}
  .js.fonts-wait .fit-t{visibility:visible}
}