/* Página Tatuagem: escura, editorial */
section { position: relative; }

/* hero: vídeo dentro do nome e mergulho pela letra com a rolagem (zoom-through com máscara de texto, 21st.dev) */
.hz { position: relative; background: var(--ink); }
.hz__pin { position: relative; }
.hz__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.3) contrast(1.06); opacity: var(--vo, 0); }
.hz__dim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,.15) 100%), linear-gradient(to top, var(--ink) 0%, transparent 30%); opacity: var(--dim, 0); }
/* máscara: fundo quase preto e letras brancas em "multiply" = o vídeo aparece só dentro das letras */
.hz__mask {
  position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center;
  background: #0b0b0c; color: #fff; mix-blend-mode: multiply;
  transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--zs, 1)); opacity: var(--mo, 1);
  will-change: transform;
}
.hz__name { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; line-height: .84; font-size: min(24vw, 33vh); animation: hzIn 1.6s var(--ease) both; }
.hz__line { display: block; }
@keyframes hzIn { from { opacity: 0; transform: scale(1.12); letter-spacing: .02em; } to { opacity: 1; transform: none; } }
.hz__hint { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: var(--ui, 1); white-space: nowrap; }
.hz__hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--accent), transparent); animation: hzLine 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes hzLine { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hz__content { position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% + var(--nav-h) / 2); opacity: var(--co, 0); transform: translateY(calc(-50% + (1 - var(--co, 0)) * 40px)); pointer-events: none; }
.hz__content.is-live { pointer-events: auto; }
.hz__title { font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.04em; max-width: 12ch; margin: 0 0 22px; }
.hz__content .lead { color: rgba(255,255,255,.82); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hz__ghost { background: rgba(11,11,12,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* nome sólido antes da rolagem: EDU preto com borda branca, CONTE branco */
.hz__solid { position: absolute; inset: -2px; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: var(--so, 1); background: var(--ink); }
.hz__line--edu { color: var(--ink); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.hz__line--conte { color: #fff; }
.hz__line--sub { align-self: center; width: 9.55em; display: flex; justify-content: space-between; font-size: .2em; font-weight: 600; letter-spacing: 0; line-height: 1; margin-top: .3em; background: #fff; color: var(--ink); }
.hz__solid .hz__line--sub { color: var(--ink); transform-origin: center; animation: bandIn .8s var(--ease) .55s both; }
@keyframes bandIn { from { transform: scaleX(0); } to { transform: none; } }
/* TATTOO nasce de dentro da faixa: do branco para o preto, do centro para as pontas */
.hz__solid .hz__line--sub .ch { opacity: 1; color: #fff; transform: scale(.55); filter: blur(5px); animation: subIn .8s var(--ease) forwards; animation-delay: calc(1.25s + var(--o) * .12s); }
@keyframes subIn { to { color: var(--ink); transform: none; filter: blur(0); } }
.hz.is-static .hz__solid { display: none; }
/* entrada do nome: letra por letra */
.hz__solid .hz__name { animation: none; }
.hz__solid .hz__line { overflow: hidden; }
.hz__name .hz__line { padding: .04em .06em .06em; }
.hz__name .hz__line--sub { padding: .16em .7em .1em; }
/* na camada do vídeo a faixa só guarda o lugar: ela não vira vídeo, some em fade */
.hz__mask .hz__line--sub { background: transparent; color: transparent; }
.hz__solid .hz__line--sub { opacity: var(--bo, 1); }
.mch { display: inline-block; }
.hz__solid .ch { display: inline-block; opacity: 0; transform: translateY(105%) rotate(6deg); filter: blur(6px); animation: chIn 1s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * .09s); }
.hz__line--conte .ch { animation-delay: calc(.45s + var(--i) * .09s); }
@keyframes chIn { 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
.hz__hint span { display: block; opacity: 0; animation: hintIn .8s var(--ease) 1.6s forwards; }
.hz__hint::after { animation-delay: 1.8s; }
@keyframes hintIn { to { opacity: 1; } }
/* menu escondido até o título da hero aparecer */
.nav { transition: transform .5s var(--ease), opacity .4s, background-color .35s, border-color .35s; }
body.nav-hidden .nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.hz.is-static .hz__video { opacity: 1; }

/* modo com movimento: a seção fica fixa enquanto a rolagem conduz o mergulho */
.hz.is-live .hz__pin { height: 280vh; }
.hz.is-live .hz__stage { position: sticky; top: 0; }

/* sem movimento: vídeo com o título por cima, sem máscara */
.hz.is-static .hz__mask, .hz.is-static .hz__hint { display: none; }
.hz.is-static { --dim: 1; --co: 1; }
.hz.is-static .hz__content { pointer-events: auto; }

/* trabalhos */
.works { padding: clamp(72px, 11vh, 140px) 0; border-top: 1px solid var(--line); }
.works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 44px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  font-size: 14px; color: var(--muted); cursor: pointer; transition: color .25s, border-color .25s, background-color .25s;
}
.filter:hover { color: var(--fg); border-color: rgba(255,255,255,.4); }
.filter.is-active { background: #fff; color: var(--ink); border-color: #fff; }

/* trilho horizontal: sem JS ou com movimento reduzido, rola de lado com o dedo/trackpad */
.works__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.works__rail::-webkit-scrollbar { display: none; }
.grid {
  --side: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  list-style: none; margin: 0; padding: 0 var(--side); display: flex; gap: 14px; width: max-content;
  transition: opacity .22s;
}
.grid.is-switching { opacity: 0; }
.grid li { flex: none; height: clamp(280px, 58vh, 620px); scroll-snap-align: start; }
.grid li[hidden] { display: none; }
.tile { display: block; height: 100%; padding: 0; border: 0; background: var(--ink-2); cursor: zoom-in; overflow: hidden; border-radius: 3px; position: relative; }
.tile img { height: 100%; width: auto; max-width: none; transition: transform .9s var(--ease), filter .6s; filter: saturate(.92); }
.tile::after { content: "+"; position: absolute; right: 14px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(11,11,12,.7); color: #fff; font-size: 22px; line-height: 37px; text-align: center; opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.035); filter: saturate(1); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: none; }

.works__foot { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.works__bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.works__bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--wp, 0)); }
.works__count { margin: 0; font-family: var(--display); font-size: 14px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.works__count span:first-child { color: var(--fg); }

/* modo fixado: a rolagem para baixo move as fotos para o lado */
.works.hpin { padding: 0; }
.works.hpin .works__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
.works.hpin .works__rail { overflow: visible; scroll-snap-type: none; }
.works.hpin .works__head { margin-bottom: clamp(18px, 3.5vh, 40px); }
.works.hpin .grid li { height: clamp(240px, calc(100svh - var(--nav-h) - 300px), 600px); }

.works__more { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; }
.works__more a { color: var(--fg); }

/* coberturas */
.cover { padding: clamp(72px, 11vh, 140px) 0; }
.cover__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.cover h2 { margin-bottom: 22px; max-width: 13ch; }
.quote { margin: 36px 0 0; padding-left: 20px; border-left: 2px solid var(--accent); }
.quote p { margin: 0; font-size: 17px; line-height: 1.6; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.cross { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 36px; text-decoration: none; color: var(--muted); font-size: 15px; }
.cross span { color: var(--fg); font-family: var(--display); font-weight: 500; font-size: 18px; transition: color .25s; }
.cross:hover span { color: var(--accent); }

.ba { margin: 0; }
.ba__frame {
  --p: 50%;
  position: relative; aspect-ratio: 707 / 900; overflow: hidden; border-radius: 3px; background: #000;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  max-width: 560px; margin-left: auto;
}
.ba__base, .ba__over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__over { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.35); pointer-events: none; }
.ba__knob {
  position: absolute; top: 50%; left: var(--p); width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.55); pointer-events: none; transition: transform .15s var(--ease);
}
.ba__frame.is-drag .ba__knob { transform: translate(-50%, -50%) scale(.92); }
.ba__tag { position: absolute; bottom: 14px; z-index: 2; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 3px; pointer-events: none; }
.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }
.ba figcaption { margin-top: 12px; text-align: right; color: var(--muted); font-size: 13px; max-width: 560px; margin-left: auto; }

/* o tatuador */
.artist { padding: clamp(72px, 11vh, 140px) 0; background: var(--ink-2); }
.artist__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.artist__img { margin: 0; border-radius: 3px; overflow: hidden; }
.artist__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.artist h2 { font-size: clamp(40px, 5.4vw, 76px); margin-bottom: 24px; }
.artist .lead + .lead { margin-top: 16px; }

/* por dentro do estúdio: tour. Sai de dentro da tela do fliperama (fotos reais encaixadas pela tela)
   e cada ambiente nasce de um ponto no centro e cresce até tomar a tela, revelando a cor ao assentar
   (adaptado do Scroll Image Tunnel, 21st.dev). Em cada ambiente, uma linha em fonte de fliperama que se
   decodifica (Text Scramble, 21st.dev) e um título com fatias cruzando cada letra (Shutter Text, 21st.dev) */
/* onde fica: o bairro em letreiro gigante que sobe com a rolagem
   (adaptado do Motion Footer, 21st.dev); o cartão do endereço inclina com o mouse e se abre no mapa
   (adaptado do Expanded Map, 21st.dev) */
.op { position: relative; background: #050506; }
.op__layer { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center; padding: clamp(90px, 14vh, 150px) 0 clamp(120px, 20vh, 220px); background: #050506; }
.op__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 6vw, 96px); }
.op__k { margin-bottom: 18px; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.op.on .op__k { opacity: 1; transform: none; }
.op__t { margin: 0 0 24px; max-width: 12ch; font-size: clamp(44px, 6vw, 96px); line-height: .98; letter-spacing: -.035em; }
/* título do "Onde fica": cada palavra sobe de dentro de uma máscara, como os títulos do resto do site */
.op__t .w--nb { white-space: nowrap; }
.op__t .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.op__t .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.op.on .op__t .w > span { transform: none; }
.op__addr { font-style: normal; font-size: 18px; line-height: 1.7; color: #e9e9ec; }
.op__hours { margin: 14px 0 30px; color: var(--muted); }
.op__hours::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 10px var(--accent); }
.op__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.op__mag { will-change: transform; }
/* textos e botões entram em sequência quando a cortina abre */
.op__addr, .op__hours, .op__ctas { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.op.on .op__addr { opacity: 1; transform: none; transition-delay: .55s; }
.op.on .op__hours { opacity: 1; transform: none; transition-delay: .7s; }
.op.on .op__ctas { opacity: 1; transform: none; transition-delay: .85s; }
/* mapa: parado, colorido, entra junto com o texto */
.op__mapbox { width: min(46vw, 620px); aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--ink-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease) .4s, transform 1s var(--ease) .4s; }
.op.on .op__mapbox { opacity: 1; transform: none; }
.op__map { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px), (max-height: 640px) {
  .op__layer { min-height: 0; display: block; padding: clamp(72px, 11vh, 110px) 0 clamp(90px, 16vh, 140px); }
  .op__grid { grid-template-columns: 1fr; gap: 34px; }
  .op__mapbox { width: 100%; }
}
@media (max-width: 720px) { .op__t { font-size: clamp(36px, 10.5vw, 52px); } .op__addr { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .op__addr, .op__hours, .op__ctas, .op__k, .op__mapbox { opacity: 1; transform: none; }
  .op__t .w > span { transform: none; }
}

.tr { position: relative; padding: 0; background: #050506; }
.tr__stage { position: relative; height: 100svh; overflow: hidden; background: #050506; }
.tr.is-live { height: 820vh; }
.tr.is-live .tr__stage { position: sticky; top: 0; }
.tr-room { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tr-room__f { position: relative; width: 100%; height: 100%; overflow: hidden; will-change: transform, filter; }
.tr-room__f > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.tr.is-live .tr-room__f > img { object-fit: fill; }
.tr-zoom { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; will-change: transform; }
.tr-zoom > img { position: absolute; display: block; max-width: none; }
.tr-zl { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.tr-screen { position: absolute; left: 673px; top: 255px; width: 279px; height: 150px; overflow: hidden; background: #000; border-radius: 1px; }
.tr-screen video { width: 100%; height: 100%; object-fit: fill; display: block; image-rendering: pixelated; filter: saturate(1.15) brightness(1.08); }
.tr-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.3)); pointer-events: none; }
/* reflexo da tela no vidro do aquário: o mesmo jogo, espelhado e em perspectiva */
.tr-refl { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: .82; filter: blur(.6px) saturate(.9) brightness(1.05);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 22%, #000 92%, rgba(0,0,0,.6)); mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 22%, #000 92%, rgba(0,0,0,.6)); }
.tr-vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%), linear-gradient(to bottom, rgba(0,0,0,.25), transparent 18%, transparent 82%, rgba(0,0,0,.35)); }
.tr-scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgba(5,5,6,.82), rgba(5,5,6,.35) 38%, transparent 62%); opacity: var(--scrim, 0); transition: opacity .6s; }
.tr-cap { position: absolute; z-index: 5; left: clamp(16px, 6vw, 96px); right: clamp(16px, 6vw, 96px); bottom: clamp(56px, 11vh, 120px); pointer-events: none; visibility: hidden; transition: opacity .5s, filter .5s, transform .6s var(--ease); }
.tr-cap.on { visibility: visible; }
.tr-cap.out { opacity: 0; filter: blur(8px); transform: translateY(-18px); }
.tr-cap__k { display: inline-block; margin: 0 0 18px; padding: 6px 12px 4px; font: 12px/1.7 "Press Start 2P", monospace; letter-spacing: .04em; color: #fff; background: var(--red); box-shadow: 4px 4px 0 rgba(0,0,0,.55); white-space: nowrap; }
.tr-hat { position: relative; display: inline-block; }
.tr-hat::before { content: "^"; position: absolute; left: 0; right: 0; top: -.55em; text-align: center; }
.tr-cap__t { margin: 0; max-width: 15ch; font: 600 clamp(40px, 6.6vw, 112px)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.tr-cap__t .wd { display: inline-block; white-space: nowrap; }
.tr-cap__t .ch { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding: .26em .005em .16em; margin: -.22em 0 -.1em; }
/* folga em cima para os acentos das maiúsculas (Ã, Á, Í, Ú) não serem cortados pela máscara */
.tr-cap__t .ch > b { display: inline-block; font-weight: inherit; opacity: 0; filter: blur(10px); }
.tr-cap__t .ch > i { position: absolute; inset: .26em .005em .16em; font-style: normal; opacity: 0; pointer-events: none; }
.tr-cap__t .ch > .s1, .tr-cap__t .ch > .s3 { color: var(--red-soft); }
.tr-cap__t .ch > .s1 { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
.tr-cap__t .ch > .s2 { color: #fff; clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%); }
.tr-cap__t .ch > .s3 { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
.tr-cap.on .tr-cap__t .ch > b { animation: trChIn .8s calc(var(--d) + .3s) forwards; }
.tr-cap.on .tr-cap__t .ch > .s1 { animation: trSlR .7s var(--d) ease-in-out forwards; }
.tr-cap.on .tr-cap__t .ch > .s2 { animation: trSlL .7s calc(var(--d) + .1s) ease-in-out forwards; }
.tr-cap.on .tr-cap__t .ch > .s3 { animation: trSlR .7s calc(var(--d) + .2s) ease-in-out forwards; }
@keyframes trChIn { to { opacity: 1; filter: blur(0); } }
@keyframes trSlR { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes trSlL { 0% { transform: translateX(100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
/* abertura da seção: título branco no preto; depois a tela do fliperama liga como um tubo de TV
   (uma linha de luz que se abre na vertical) e começa o tour */
.tr-intro { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); background: #050506; text-align: center; pointer-events: none; }
.tr-intro__t { margin: 0; max-width: 11ch; font: 600 clamp(48px, 8.4vw, 148px)/.95 var(--display); letter-spacing: -.035em; color: #fff; }
.tr-intro .tr-cap__t { max-width: 11ch; font-size: clamp(48px, 8.4vw, 148px); text-transform: none; text-shadow: none; }
.tr-intro.on .tr-cap__t .ch > b { animation: trChIn .8s calc(var(--d) + .3s) forwards; }
.tr-intro.on .tr-cap__t .ch > .s1 { animation: trSlR .7s var(--d) ease-in-out forwards; }
.tr-intro.on .tr-cap__t .ch > .s2 { animation: trSlL .7s calc(var(--d) + .1s) ease-in-out forwards; }
.tr-intro.on .tr-cap__t .ch > .s3 { animation: trSlR .7s calc(var(--d) + .2s) ease-in-out forwards; }
.tr-intro .tr-cap__t { transform: translateY(calc(var(--io, 0) * -40px)); filter: blur(calc(var(--io, 0) * 12px)); opacity: calc(1 - var(--io, 0)); }
.tr-intro { opacity: var(--ibg, 1); }
.tr-room--0 { clip-path: inset(calc(50% * (1 - var(--crt, 1))) 0 calc(50% * (1 - var(--crt, 1))) 0); }
.tr-noise { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; mix-blend-mode: normal; }
.tr-room--0::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: var(--flash, 0); pointer-events: none; }
.tr-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 7; margin: 0; font: 11px/1 "Press Start 2P", monospace; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px #000; white-space: nowrap; opacity: var(--hint, 1); }
.tr-hint span { animation: trBlink 1.2s steps(2) infinite; }
@keyframes trBlink { 50% { opacity: 0; } }
@media (max-width: 720px) { .tr-cap { bottom: 64px; } .tr-cap__k { font-size: 9px; margin-bottom: 14px; } .tr-cap__t { font-size: clamp(34px, 10.5vw, 48px); } .tr-hint { font-size: 9px; } }
/* sem movimento: as fotos em sequência, cada uma com o seu texto já pronto */
.tr.is-static .tr__stage { height: auto; overflow: visible; }
.tr.is-static .tr-room { position: relative; inset: auto; height: 78svh; min-height: 420px; }
.tr.is-static .tr-room--0 .tr-room__f { background: url("../img/tour/fliperama-sala.webp") center / cover no-repeat; }
.tr.is-static .tr-room--0 .tr-zoom { display: none; }
.tr.is-static .tr-vig, .tr.is-static .tr-scrim, .tr.is-static .tr-hint { display: none; }
.tr.is-static .tr-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,6,.82), transparent 60%); pointer-events: none; }
.tr.is-static .tr-cap { visibility: visible; z-index: 2; }
.tr.is-static .tr-intro { position: relative; inset: auto; padding-top: clamp(72px, 12vh, 140px); padding-bottom: clamp(72px, 12vh, 140px); }
.tr.is-static .tr-room--0 { clip-path: none; }
.tr.is-static .tr-cap__t .ch > b { opacity: 1; filter: none; }
.tr.is-static .tr-cap__t .ch > i { display: none; }

/* avaliações (conteúdo fiel ao Google, visual do site) */
.reviews { padding: clamp(72px, 11vh, 140px) 0; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px 48px; margin-bottom: 44px; }
.reviews__head h2 { max-width: 14ch; }
.g-score { display: inline-flex; align-items: center; gap: 16px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; transition: border-color .3s, background-color .3s; }
.g-score:hover { border-color: rgba(255,255,255,.4); background: var(--ink-2); }
.g-score .g-ico { width: 28px; height: 28px; }
.g-score__num { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 5vw, 72px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.g-score { padding: 18px 28px 18px 22px; }
.g-score .g-stars svg { width: 20px; height: 20px; }
/* entrada da nota: número conta, estrelas acendem uma a uma, depois o total */
.score-fx .g-score .g-stars svg { opacity: .18; transform: scale(.6); transition: opacity .35s, transform .5s var(--ease); }
.score-fx .g-score .g-stars svg.on { opacity: 1; transform: none; }
.score-fx .g-score__count { opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s var(--ease); }
.score-fx .g-score.is-done .g-score__count { opacity: 1; transform: none; }
.score-fx .g-score .g-ico { opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .5s, transform .8s var(--ease); }
.score-fx .g-score.is-go .g-ico { opacity: 1; transform: none; }
.g-score__meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.g-score .arrow { display: inline-block; transition: transform .35s var(--ease); }
.g-score:hover .arrow { transform: translateX(4px); color: var(--fg); }
.g-stars { display: inline-flex; gap: 2px; }
.g-stars svg { width: 15px; height: 15px; fill: #fbbc04; }

.g-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.g-card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 26px 24px 22px; transition: border-color .35s, transform .45s var(--ease); }
.g-card:hover { border-color: rgba(255,255,255,.28); transform: translateY(-4px); }
.g-card__head { display: grid; grid-template-columns: 42px 1fr 18px; gap: 12px; align-items: center; margin-bottom: 14px; }
.g-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-3); border: 1px solid var(--line); color: #fff; font-family: var(--display); font-weight: 500; font-size: 17px; }
.g-card__head strong { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--fg); }
.g-card__head small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.g-ico { width: 18px; height: 18px; }
.g-card .g-stars { margin-bottom: 12px; }
.g-text { margin: 0; font-size: 15px; line-height: 1.65; color: #d9dade; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.g-card.is-open .g-text { -webkit-line-clamp: unset; display: block; }
.g-more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--fg); font-family: var(--display); font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); cursor: pointer; }

/* onde fica */

/* chamada final */
.final { padding: clamp(80px, 14vh, 160px) 0; background: var(--ink-2); text-align: center; }
.final__in { display: flex; flex-direction: column; align-items: center; }
.final h2 { max-width: 16ch; }
.final .lead { margin: 20px auto 34px; }

/* lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6,6,7,.96); color: #fff; }
.lightbox[open] { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 0 24px; }
.lightbox img { max-height: calc(100vh - 140px); max-width: 100%; width: auto; object-fit: contain; }
.lightbox figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; text-align: center; padding: 0 12px; }
.lb__close { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 26px; cursor: pointer; }
.lb__nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 20px; cursor: pointer; justify-self: center; transition: border-color .25s; }
.lb__nav:hover, .lb__close:hover { border-color: #fff; }

@media (max-width: 1100px) {
  .g-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .cover__grid, .artist__grid, .place__grid { grid-template-columns: 1fr; }
  .ba__frame, .ba figcaption { margin-left: 0; max-width: none; }
  .ba figcaption { text-align: left; }
}
}
@media (max-width: 720px) {
  .hz__name { font-size: min(22vw, 28vh); }
  .hz__line--edu { -webkit-text-stroke-width: 3px; }
  .hz__title { font-size: clamp(38px, 11vw, 52px); }
  .grid { gap: 8px; }
  .works.hpin .grid li { height: clamp(220px, calc(100svh - var(--nav-h) - 270px), 520px); }
  .works__more { display: none; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
  .works__head { margin-bottom: 28px; gap: 22px; }
  .g-list { grid-template-columns: 1fr; }
  .g-score { padding: 14px 18px; gap: 12px; }
  .g-score__num { font-size: 46px; }
  .lightbox[open] { grid-template-columns: 1fr; }
  .lb__nav { position: absolute; bottom: 18px; }
  .lb__prev { left: calc(50% - 64px); }
  .lb__next { right: calc(50% - 64px); }
  .lightbox figure { padding: 64px 12px 90px; }
  .lightbox img { max-height: calc(100vh - 200px); }
}

@media (prefers-reduced-motion: reduce) {
  .hz__name, .hz__hint::after, .hz__solid .ch, .hz__hint span, .hz__solid .hz__line--sub { animation: none; opacity: 1; transform: none; filter: none; }
}

/* letreiro de estilos */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 3vh, 30px) 0; }
.marquee__track { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); width: max-content; will-change: transform; }
.marquee span { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(34px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); white-space: nowrap; transition: color .4s, -webkit-text-stroke-color .4s; }
.marquee span:hover { color: #fff; -webkit-text-stroke-color: #fff; }
.marquee i { font-style: normal; color: var(--accent); font-size: clamp(16px, 2vw, 26px); }
.works { border-top: 0; }

/* efeitos de entrada (só com JS e movimento permitido) */
.fx .cut .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx .cut .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.fx .cut.is-in .w > span { transform: none; }

.fx .ink { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); }
.fx .ink img, .fx img.ink { transform: scale(1.15); transition: transform 1.3s var(--ease), filter .6s; }
.fx .ink.is-in { clip-path: inset(0 0 0 0); }
.fx .ink.is-in img, .fx img.ink.is-in { transform: scale(1); }
.fx .ink--l { clip-path: inset(0 100% 0 0); }
.fx .ink--r { clip-path: inset(0 0 0 100%); }
.fx .ink--l.is-in, .fx .ink--r.is-in { clip-path: inset(0 0 0 0); }
.fx .tile.is-in:hover img { transform: scale(1.035); transition: transform .9s var(--ease), filter .6s; }
.fx .ba .ba__frame img { transform: none; }

.fx .slide { opacity: 0; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.fx .slide--r { transform: translateX(48px); }
.fx .slide--l { transform: translateX(-48px); }
.fx .slide.is-in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .fx .slide--r, .fx .slide--l { transform: translateY(32px); }
}

/* em movimento: dois vídeos que se aproximam com a rolagem
   (adaptado do Scroll media expansion, 21st.dev, sem travar a rolagem) */
.motion { background: var(--ink); border-top: 1px solid var(--line); }
.motion__pin { position: relative; }
.motion__stage { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; overflow: hidden; }
.motion__label { position: absolute; top: calc(var(--nav-h) + 22px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.motion__title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .25em; pointer-events: none; font-size: clamp(64px, 14vw, 220px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; z-index: 0; }
.motion__w { display: inline-block; will-change: transform, opacity; }
.motion__w--r { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); }
.motion__cards { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 44px); }
.vcard { margin: 0; will-change: transform; }
.vcard__in { position: relative; height: min(72vh, 720px, calc((100vw - 2 * var(--gutter) - clamp(16px, 3vw, 44px)) / 1.31)); border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.vcard--a .vcard__in { aspect-ratio: 368 / 496; }
.vcard--b .vcard__in { aspect-ratio: 480 / 854; }
.vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 55%); mix-blend-mode: overlay; }
.vcard.is-tilt .vcard__sheen { opacity: 1; }
.vcard figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; opacity: var(--cap, 0); transition: opacity .3s; }
.motion__hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); opacity: var(--hint, 1); }

/* modo com movimento: seção fixada enquanto a rolagem aproxima os vídeos */
.motion.is-live .motion__pin { height: 240vh; }
.motion.is-live .motion__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }

@media (max-width: 720px) {
  .motion__title { font-size: clamp(54px, 19vw, 96px); flex-direction: column; gap: 0; }
  .vcard__in { height: min(56svh, calc((100vw - 2 * var(--gutter) - 12px) / 1.31)); }
  .motion__cards { gap: 12px; }
  .vcard figcaption { font-size: 11.5px; max-width: 20ch; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .motion__title { position: static; margin-bottom: 32px; }
  .motion__w--r { -webkit-text-stroke-color: rgba(255,255,255,.75); }
  .vcard figcaption { opacity: 1; }
  .motion__hint { display: none; }
}

/* coberturas: frase gigante com as fotos do antes e do depois que se abrem na rolagem
   (ImgText Reveal Scroll Animation, 21st.dev) e depois se fundem no comparador */
.itr { padding: 0; border-top: 1px solid var(--line); }
.itr__pin { position: relative; }
.itr__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-top: var(--nav-h); }
.itr__lines { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2vw, 18px); opacity: var(--lo, 1); transform: scale(var(--ls, 1)); }
.itr__lines--m { display: none; }
.itr__line { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.8vw, 28px); }
.itr__line > span:not(.itr__img) { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; font-size: clamp(54px, 10.5vw, 176px); white-space: nowrap; user-select: none; color: #fff; }
.itr__img { display: block; flex: none; width: var(--w, 0px); height: clamp(48px, 8.4vw, 140px); border-radius: clamp(8px, 1.2vw, 18px); overflow: hidden; background: var(--ink-2); visibility: var(--iv, visible); }
.itr__img img, .itr__ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itr__ghost { position: absolute; left: 0; top: 0; overflow: hidden; display: none; z-index: 2; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.itr.is-morph .itr__ghost { display: block; }
.itr__final { position: absolute; z-index: 3; left: 0; right: 0; top: var(--nav-h); bottom: 0; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; pointer-events: none; }
.itr__ba { margin: 0; opacity: var(--bo, 0); pointer-events: none; }
.itr__side { max-width: 520px; opacity: var(--so, 0); transform: translateX(calc((1 - var(--so, 0)) * 40px)); }
.itr__side .lead { margin: 0; }
.itr__review { margin: 30px 0 0; }
.itr__review .g-text { margin: 0; -webkit-line-clamp: unset; display: block; font-size: 15.5px; }
.itr__side .cross { margin-top: clamp(40px, 7vh, 72px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; }
.itr.is-ready .itr__side { pointer-events: auto; }
.itr.is-ready .itr__ba { pointer-events: auto; }
.itr__ba .ba__frame { height: min(calc(100svh - var(--nav-h) - 120px), 760px); width: auto; max-width: 46vw; margin: 0; }
.itr__ba figcaption { text-align: left; }
.itr__after { display: none; grid-template-columns: 1fr; gap: 24px clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(72px, 11vh, 140px); }
.itr__after .lead { margin: 0; }
.itr__after .quote { margin: 0; }
.itr__after .cross { margin-top: 0; }
.itr.is-live .itr__pin { height: 300vh; }
.itr.is-live .itr__stage { position: sticky; top: 0; }
.itr.is-static .itr__lines { display: none; }
.itr.is-static .itr__final { position: relative; top: auto; } .itr.is-static .itr__ba, .itr.is-static .itr__side { opacity: 1; transform: none; pointer-events: auto; }
.itr.is-static .itr__stage { height: auto; min-height: 0; padding: calc(var(--nav-h) + 24px) 0 0; }
@media (max-width: 760px) {
  .itr__lines--d { display: none; }
  .itr__lines--m { display: flex; }
  .itr__line > span:not(.itr__img) { font-size: clamp(48px, 15.5vw, 80px); }
  .itr__line { gap: 10px; }
  .itr__img { height: clamp(44px, 12.5vw, 64px); }
  .itr__final { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .itr__side { display: none; }
  .itr__after { display: grid; grid-template-columns: 1fr; }
  .itr__ba .ba__frame { height: auto; max-width: none; width: min(calc(100vw - 2 * var(--gutter)), calc((100svh - var(--nav-h) - 140px) * 707 / 900)); }
}

/* o tatuador: Zoom Parallax (21st.dev). Sete imagens aproximam em velocidades diferentes até o Edu ocupar a tela */
.zp { padding: 0; background: var(--ink); }
.zp__pin { position: relative; height: 820vh; }
.zp__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.zp__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(var(--s, 1)); will-change: transform; }
.zp__box { position: relative; width: 25vw; height: 25vh; overflow: hidden; }
.zp__box img { width: 100%; height: 100%; object-fit: cover; }
.zp__layer--1 .zp__box { --x: 5vw; --y: -30vh; width: 35vw; height: 30vh; }
.zp__layer--2 .zp__box { --x: -25vw; --y: -10vh; width: 20vw; height: 45vh; }
.zp__layer--3 .zp__box { --x: 27.5vw; --y: 0vh; width: 25vw; height: 25vh; }
.zp__layer--4 .zp__box { --x: 5vw; --y: 27.5vh; width: 20vw; height: 25vh; }
.zp__layer--5 .zp__box { --x: -22.5vw; --y: 27.5vh; width: 30vw; height: 25vh; }
.zp__layer--6 .zp__box { --x: 25vw; --y: 22.5vh; width: 15vw; height: 15vh; }
.zp__layer--7 .zp__box { --x: -27vw; --y: -36vh; width: 17vw; height: 20vh; }
.zp__layer--8 .zp__box { --x: 30vw; --y: -28vh; width: 16vw; height: 24vh; }
.zp__layer:not(.zp__layer--0) .zp__box { left: calc(var(--x) * var(--open, 1)); top: calc(var(--y) * var(--open, 1)); box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); }
.zp__layer:not(.zp__layer--0) { z-index: 3; }
.zp__layer--0 { z-index: 1 !important; }
.zp__layer--0 { z-index: 2; }
.zp__layer--0 .zp__box { box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); }
.zp__shade { position: absolute; inset: 0; z-index: 3; opacity: var(--sh, 0); background: radial-gradient(120% 90% at 70% 40%, rgba(11,11,12,.55) 0%, rgba(11,11,12,.88) 60%), rgba(11,11,12,.25); }
/* texto em partes: uma por vez, palavras acendendo com a rolagem (Reading Text Reveal, 21st.dev) */
.zp__txt { position: absolute; z-index: 4; inset: var(--nav-h) 0 0; display: flex; align-items: center; pointer-events: none; }
.zp__steps { position: relative; width: 100%; max-width: 1080px; min-height: 60vh; }
.zp__step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--y, 30px))); opacity: var(--o, 0); filter: blur(var(--bl, 0px)); }
.zp__step.is-on { pointer-events: auto; }
/* depois do título, a foto vira retrato na lateral e o texto segue ao lado */
.zp__portrait { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; opacity: var(--po, 0); border-radius: var(--pr, 0px); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.zp__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.zp__portrait::after { content: ""; position: absolute; inset: 0; background: rgba(11,11,12, var(--pd, 0)); }
.zp__txt { z-index: 5; }
.zp__step--side { left: 46%; }
.zp__step--side .zp__big { font-size: clamp(26px, 2.9vw, 48px); }
.zp__step--side .zp__big--long { font-size: clamp(22px, 2.25vw, 38px); line-height: 1.24; }
.zp__layer { opacity: var(--lo, 1); }
.zp__sub { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 28px); color: var(--accent); }
.zp__big { margin: 0 0 28px; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.9vw, 62px); line-height: 1.18; letter-spacing: -.02em; color: #fff; }
.zp__big em { font-style: normal; }
.zp__big .rw { opacity: .16; transition: opacity .25s, color .25s; }
.zp__big .rw.on { opacity: 1; }
.zp__big em .rw.on { color: var(--accent); }
.zp__bars { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; opacity: var(--sh, 0); }
.zp__bars span { width: 3px; height: 26px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background-color .3s; }
.zp__bars span.on { background: var(--accent); }
.zp__title { margin: 0 0 18px; font-size: clamp(56px, 7.6vw, 130px); line-height: .92; letter-spacing: -.045em; text-transform: uppercase; max-width: 9ch; }
.zp__l { display: block; overflow: hidden; padding-bottom: .04em; }
.zp__l > span { display: inline-block; transform: translateY(calc((1 - var(--t1, 0)) * 105%)); }
.zp__l:nth-child(2) > span { transform: translateY(calc((1 - var(--t2, 0)) * 105%)); }
.zp:not(.is-live) .zp__txt { pointer-events: none; }
.zp.is-static { --open: 1; --sh: 1; --t1: 1; --t2: 1; }
.zp.is-static .zp__txt { position: relative; inset: auto; padding: 40px 0; }
.zp.is-static .zp__steps { min-height: 0; }
.zp.is-static .zp__step { position: static; transform: none; opacity: 1; margin-bottom: 40px; }
.zp.is-static .zp__portrait { display: none; }
.zp.is-static .zp__big .rw { opacity: 1; }
.zp.is-static .zp__stage { height: auto; }
.zp.is-static .zp__pin { height: auto; }
.zp.is-static .zp__stage { position: relative; height: 100svh; min-height: 640px; }
.zp.is-static .zp__layer:not(.zp__layer--0) { display: none; }
.zp.is-static .zp__layer--0 .zp__box { width: 100vw; height: 100%; }
@media (max-width: 860px) {
  .zp__shade { background: rgba(11,11,12,.8); }
  .zp__title { font-size: clamp(40px, 12vw, 58px); margin-bottom: 12px; max-width: none; }
  .zp__big, .zp__step--side .zp__big { font-size: clamp(28px, 8.6vw, 40px); line-height: 1.18; }
  .zp__step--side .zp__big--long { font-size: clamp(23px, 6.9vw, 32px); line-height: 1.22; }
  .zp__step--side { left: 0; right: 0; top: 0; transform: translateY(var(--y, 30px)); }
  .zp__steps--m-fix { }
  .zp__steps { min-height: 0; position: absolute; top: var(--ptop, calc(40svh + 30px)); left: calc(var(--gutter) + 4px); right: calc(var(--gutter) + 4px); bottom: 84px; width: auto; }
  .zp__txt { align-items: stretch; }
  .zp__bars { display: none; }
  .zp__layer--0 img { object-position: 62% 30% !important; }
}

.itr__after .itr__review { margin: 0; }
.itr__after .cross { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }

/* avaliações: marca-texto nas frases-chave (Text Highlighter, 21st.dev) e entrada com desfoque em sequência (Reveal, 21st.dev) */
mark.hl { color: #fff; background-image: linear-gradient(rgba(200,38,31,.55), rgba(200,38,31,.55)); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%; background-color: transparent; padding: 0 .12em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.22,1,.36,1); }
.g-card.is-in mark.hl { background-size: 100% 100%; transition-delay: calc(var(--d, 0ms) + 450ms); }
.br-fx .g-card.br { opacity: 0; filter: blur(10px); transform: translateY(36px) scale(.98); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease), border-color .35s; transition-delay: var(--d, 0ms); }
.br-fx .g-card.br.is-in { opacity: 1; filter: blur(0); transform: none; }
.br-fx .g-card.br.is-in:hover { transform: translateY(-4px); transition-delay: 0ms; }
.g-score__num, .g-score__n { display: inline-block; text-align: left; }
@media (prefers-reduced-motion: reduce) { mark.hl { background-size: 100% 100%; } }
.works__more .ig-link { vertical-align: middle; gap: 6px; margin-left: 4px; }
.works__more .ig-ico { width: 16px; height: 16px; }

/* ===== Avaliações "A Roda": seção fixa; a rolagem gira um cilindro 3D de depoimentos (Cylinder Carousel, 21st.dev)
   em volta da nota gigante, que se enche de tinta (contorno → preenchido); o título gira em volta como um selo
   (Text Along Path, 21st.dev). Com redução de movimento, fica a grade original. ===== */
.reviews.rr { padding: 0; }
.rr .reviews__head, .rr .g-list { display: none; }
.rr__pin { height: calc(100vh + 320vh); height: calc(100svh + 320svh); }
.rr__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rr__hint { position: absolute; z-index: 5; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: opacity .5s; }
.rr__nav { position: absolute; z-index: 6; top: auto; bottom: clamp(18px, 4vh, 40px); left: 50%; transform: translateX(-50%); display: flex; gap: 14px; pointer-events: none; }
.rr__nav { opacity: var(--rin, 0); transition: none; }
.rr__nav button { pointer-events: auto; }
.rr__stage:not(.has-cards) .rr__nav button { pointer-events: none; }
.rr__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11,11,12,.6); color: var(--fg); font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.rr__nav button:hover { border-color: var(--accent); background: rgba(200,38,31,.18); transform: scale(1.06); }

.rr__scene { position: absolute; inset: 0; z-index: 1; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rr__card.is-front .g-card.is-open .g-text { user-select: text; -webkit-user-select: text; }
.rr__scene.is-drag { cursor: grabbing; }
.rr__world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

/* núcleo: selo de texto girando + nota que se enche de tinta */
.rr__core { position: absolute; left: 0; top: calc(var(--coreY, -12vh) * var(--k, 0) - var(--cm, 0) * var(--coreUp, 8vh)); transform: translate(-50%, -50%) translateZ(0) scale(calc((1.55 - var(--k, 0) * .55) * (1 - var(--cm, 0) * var(--shr, .38)))); text-align: center; width: var(--seal, 620px); height: var(--seal, 620px); display: grid; place-items: center; pointer-events: none; }
.rr__score { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.rr__num { display: block; box-sizing: content-box; padding: .1em .08em .16em; margin: -.1em -.08em -.16em; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 600; line-height: .82; letter-spacing: -.06em; font-size: var(--numfs, 230px); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55);
  background: linear-gradient(to top, #fff 0, #fff var(--fill, 0%), transparent var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; }
.rr__g { display: flex; align-items: center; gap: 10px; margin-top: 18px; opacity: var(--gin, 0); transform: translateY(calc((1 - var(--gin, 0)) * 14px)); }
.rr__g .g-ico { transform: rotate(calc((1 - var(--gin, 0)) * -120deg)) scale(calc(.5 + var(--gin, 0) * .5)); }
.rr__g .g-ico { width: 22px; height: 22px; }
.rr__stars { display: inline-flex; gap: 4px; }
.rr__stars svg { width: 20px; height: 20px; fill: #fbbc04; opacity: .15; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); }
.rr__stars svg.on { opacity: 1; transform: none; }
.rr__link { margin-top: 10px; color: var(--muted); font-size: 14px; text-decoration: none; opacity: var(--gin, 0); }
.rr__link b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.rr__link:hover { color: var(--fg); }

/* cilindro de cartões */
.rr__ring { position: absolute; left: 0; top: calc((1 - var(--rin, 0)) * 70vh); opacity: var(--rin, 0); }
.rr__card { position: absolute; left: 0; top: 0; width: var(--cw, 360px); margin-left: calc(var(--cw, 360px) / -2); transform: translateY(-50%); will-change: transform; }
/* destaque do cartão do meio: luz branca brilhante por trás, como um contraluz (Glow / Backlight, 21st.dev) */
.rr__card::after { content: ""; position: absolute; left: -26%; right: -26%; top: -38%; bottom: -38%; z-index: -1; pointer-events: none; opacity: var(--glow, 0);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.5) 0, rgba(255,255,255,.42) 52%, rgba(255,255,255,.14) 66%, transparent 78%); filter: blur(30px); animation: backGlow 3.2s ease-in-out infinite; }
@keyframes backGlow { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
.rr__card.is-front .g-card { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 30px 80px -30px rgba(255,255,255,.12), 0 40px 90px -30px rgba(0,0,0,.95); }
.rr__card .g-card { display: flex; flex-direction: column; box-sizing: border-box; margin: 0; background: #141416; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); overflow: hidden; isolation: isolate; opacity: 1 !important; filter: none !important; transform: none !important; }
.rr__card .g-card mark.hl { background-size: 100% 100%; }
.rr__card .g-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(224,74,63,.2), transparent 65%); opacity: 0; transition: opacity .4s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .rr__card.is-front .g-card:hover::before { opacity: 1; } .rr__card.is-front .g-card:hover { border-color: rgba(224,74,63,.5); } }
.rr__card .g-text { -webkit-line-clamp: 4; }
.rr__card .g-card.is-open .g-text { -webkit-line-clamp: unset; max-height: 34vh; overflow: auto; }

@media (max-width: 720px) {
  .rr__pin { height: calc(100svh + 260svh); }
    .rr__g { margin-top: 12px; }
  .rr__stars svg { width: 16px; height: 16px; }
  .rr__nav { bottom: 22px; }
  .rr__hint { display: none; }
  .rr__nav button { width: 42px; height: 42px; }
  .rr__card .g-card { padding: 20px 18px 16px; }
  .rr__card .g-text { -webkit-line-clamp: 4; font-size: 14.5px; }
  .rr__card .g-card__head { margin-bottom: 10px; }
  .rr__card .g-card .g-stars { margin-bottom: 8px; }
  .rr__hint { bottom: 14px; font-size: 10px; }
}

.g-avatar.has-photo { padding: 0; overflow: hidden; background: var(--ink-3); }
.g-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* mural: cartões pequenos podem ser ampliados com um clique */
.rr__stage.is-done .rr__card { cursor: zoom-in; }
.rr__card .g-card { transition: border-color .3s; }
.rr__stage.is-done .rr__card:hover .g-card { border-color: rgba(255,255,255,.3); }

.rr__card .g-card .g-more { margin-top: auto; align-self: flex-start; }

/* desktop: G do Google, estrelas e total ao lado do 4,9 */
.rr__meta { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 721px) {
  .rr__score { flex-direction: row; align-items: center; gap: calc(var(--gin, 0) * clamp(18px, 2vw, 32px)); }
  /* enquanto a nota conta, ela fica sozinha no centro; o bloco do Google abre espaço ao lado quando entra */
  .rr__meta { align-items: flex-start; gap: 10px; max-width: calc(var(--gin, 0) * 300px); overflow: hidden; padding: 4px 0; }
  .rr__meta .rr__g { margin-top: 0; gap: 12px; }
  .rr__meta .g-ico { width: 30px; height: 30px; }
  .rr__meta .rr__stars svg { width: 28px; height: 28px; }
  .rr__meta .rr__link { margin-top: 0; font-size: 17px; white-space: nowrap; }
}

/* o bloco 4,9 + Google fica centralizado como um todo */
.rr__core { display: flex; justify-content: center; align-items: center; }