/* Portfólio v3. Cores e fontes: Profissional/nbrt-studio/brand/tokens.ts.
   Regras da casa (2026-11-05): movimento ligado para todos, com botão de pausa na barra. Rolagem normal, sem pino.
   Parallax é só deslocamento de camada: conteúdo sempre visível. Nenhum fade preto. Hover nunca sai do próprio painel. */
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("fonts/nunito-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #0B0A10; --s1: #15131C; --s2: #1E1B28; --s3: #2A2638; --text: #F5F3FA; --muted: #9A96A8; --v: #8E6CFF; --vd: #5B3FD9; --lilac: #C9B8FF; --line: rgba(245, 243, 250, .1);
  /* Uma grade só: margem, vão, respiro entre áreas. */
  --m: clamp(20px, 5vw, 96px);
  --g: clamp(12px, 1.6vw, 24px);
  --p: clamp(20px, 2.8vw, 40px);
  --r: 16px;
  --bar: 64px;
  --entre: clamp(112px, 28svh, 320px);
  --f-nome: min(calc((100vw - 2 * var(--m)) / 4.93), 22svh);
  --f-titulo: clamp(56px, 9.4vw, 176px);
  --f-grande: clamp(28px, 3.4vw, 60px);
  --f-apoio: clamp(17px, 1.5vw, 24px);
  --f-corpo: clamp(17px, 1.3vw, 20px);
  --f-rot: clamp(14px, 1vw, 16px);
  --curva: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 1000px) { :root { --f-nome: min(calc((100vw - 2 * var(--m)) * .66 / 4.93), 22svh); } }
@media (max-width: 599px) { :root { --r: 12px; } }
@view-transition { navigation: auto; }

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; }
body { font: 400 var(--f-corpo)/1.4 "Inter", system-ui, sans-serif; overflow-x: clip; }
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, svg, canvas { display: block; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
:target, section[id], [id="conteudo"] { scroll-margin-top: calc(var(--bar) + 16px); }
.pular { position: fixed; left: var(--m); top: 10px; z-index: 60; padding: 10px 14px; background: var(--text); color: var(--ink); border-radius: 8px; transform: translateY(-200%); }
.pular:focus-visible { transform: none; }

/* Fundo vivo: nuvem de peças em tempo real, atrás de tudo. Só decoração; sem ele, a página é a mesma. */
#fundo { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 0; opacity: 0; transition: opacity .9s linear; pointer-events: none; }
#fundo.ok { opacity: 1; }
main, .fim { position: relative; z-index: 1; }

/* ---------- Texto: contraste claro entre os passos ---------- */
.titulo { font: 900 var(--f-titulo)/.96 "Nunito", sans-serif; letter-spacing: -.03em; margin-left: -.04em; text-wrap: balance; }
.grande { font: 800 var(--f-grande)/1.08 "Nunito", sans-serif; letter-spacing: -.018em; text-wrap: balance; }
.apoio { font-size: var(--f-apoio); line-height: 1.3; color: var(--muted); text-wrap: balance; }
.rot { font: 500 var(--f-rot)/1.3 "JetBrains Mono", monospace; color: var(--muted); }
.selo { display: inline-block; padding: 4px 9px; border-radius: 6px; background: var(--v); color: var(--ink); font: 500 13px/1.2 "JetBrains Mono", monospace; white-space: nowrap; }
.ctl { min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--s3); color: var(--text); font: 500 var(--f-rot)/1 "JetBrains Mono", monospace; white-space: nowrap; transition: background-color .15s linear; }
@media (hover: hover) and (pointer: fine) { .ctl:hover { background: var(--vd); } }
.ctl:active, .ctl[aria-pressed="true"][data-tipo] { background: var(--vd); }

/* Sinal de clique: o pixel da marca, sempre visível, no canto da peça. Seta leva a outra página; "+" amplia aqui. Não depende de hover nem de movimento. */
.abre { --abre-t: clamp(22px, 1.8vw, 30px); --abre-in: clamp(8px, .8vw, 14px); position: absolute; right: var(--abre-in); bottom: var(--abre-in); z-index: 7; width: var(--abre-t); height: var(--abre-t); display: grid; place-items: center; border-radius: 22%; background: var(--cor, var(--v)); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(245, 243, 250, .22); pointer-events: none; transition: scale .18s var(--curva); }
.abre svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: translate .18s var(--curva), rotate .18s var(--curva); }
html.anim .abre.ent { transition: opacity .5s var(--curva), transform .5s var(--curva), scale .18s var(--curva); }
.abre-fora { z-index: 4; }
.abre-linha { position: relative; right: auto; bottom: auto; display: inline-grid; --abre-t: .4em; margin-left: .22em; vertical-align: .06em; }
.abre-forte { --abre-t: clamp(52px, 5vw, 84px); --abre-in: var(--m); background: var(--text); box-shadow: 0 14px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(11, 10, 16, .3); }
.abre-forte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; outline: 2px solid var(--text); animation: sonda 2.4s var(--curva) infinite; pointer-events: none; }
@keyframes sonda { from { scale: 1; opacity: .8; } 70%, to { scale: 1.5; opacity: 0; } }
html.parado .abre-forte::before { animation-play-state: paused; }
:is(.cap, .guia, .gb-capa, .tb, .md, .gp-amp, .b-ti a):focus-visible .abre, .cap-r:focus-visible ~ .abre, :is(.cap, .guia, .gb-capa, .tb, .md, .gp-amp, .b-ti a):active .abre, .cap-r:active ~ .abre { scale: 1.16; }
:is(.cap, .guia, .gb-capa, .tb, .b-ti a):focus-visible .abre svg, .cap-r:focus-visible ~ .abre svg { translate: 8% -8%; }
:is(.md, .gp-amp):focus-visible .abre-mais svg { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) {
  :is(.cap, .guia, .gb-capa, .tb, .md, .b-ti a):hover .abre, .cap-r:hover ~ .abre { scale: 1.16; }
  :is(.cap, .guia, .gb-capa, .tb, .b-ti a):hover .abre svg, .cap-r:hover ~ .abre svg { translate: 8% -8%; }
  .md:hover .abre-mais svg { rotate: 90deg; }
}

/* ---------- Barra ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar); padding: 0 var(--m); display: flex; align-items: center; gap: var(--g); background: rgba(11, 10, 16, .72); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--line); }
@media (prefers-reduced-transparency: reduce) { .topo { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; flex: none; }
.sb { width: 24px; height: 24px; flex: none; }
.sb rect { fill: var(--text); transition: fill .18s linear; }
.sb rect.on { fill: var(--v); }
.m-nome { font: 800 clamp(16px, 1.2vw, 18px)/1 "Nunito", sans-serif; }
.trilha { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 var(--f-rot)/1 "JetBrains Mono", monospace; color: var(--muted); }
.trilha::before { content: "/"; }
.trilha i { font-style: normal; }
.trilha a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .trilha a:hover { color: var(--lilac); } }
.pilulas { display: flex; gap: 6px; margin-left: auto; }
.pil { display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 20px; background: transparent; font: 500 var(--f-rot)/1 "Inter", sans-serif; white-space: nowrap; transition: background-color .15s linear, color .15s linear; }
.pil.at { background: var(--v); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pil:not(.at):hover { background: var(--s3); } }
.pil:not(.at):active { background: var(--s3); }
.pz { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1px rgba(245, 243, 250, .22); position: relative; transition: background-color .15s linear; }
.pz::after { content: ""; position: absolute; inset: -4px; }
.pz svg { width: 13px; height: 13px; fill: var(--text); }
.pz .i-t { display: none; }
html.parado .pz { background: var(--v); box-shadow: none; }
html.parado .pz svg { fill: var(--ink); }
html.parado .pz .i-t { display: block; } html.parado .pz .i-p { display: none; }
@media (hover: hover) and (pointer: fine) { .pz:hover { background: var(--s3); } html.parado .pz:hover { background: var(--lilac); } }
@media (max-width: 759px) {
  .m-nome, .trilha { display: none; }
  .topo { gap: 8px; }
  .pilulas { gap: 1px; }
  .pil { padding: 0 9px; height: 44px; font-size: 14px; }
}
@media (max-width: 359px) { .pil { padding: 0 5px; font-size: 13px; } .pz { width: 32px; height: 32px; } }

/* ---------- Entrada: uma por contêiner, uma vez, nunca desfaz ---------- */
html.anim .ent:not(.in) { opacity: 0; transform: translateY(28px); }
html.anim .ent { transition: opacity .5s var(--curva), transform .5s var(--curva); }
html.reduz .ent:not(.in) { transform: none; }
html.reduz .ent { transition: opacity .22s linear; }

/* ---------- Capa de trabalho (hoje só a de 3D, em tres.html) ---------- */
.cap { display: block; position: relative; height: clamp(440px, calc(100svh - var(--bar) - 8svh), 960px); border-radius: var(--r); overflow: hidden; background: var(--s1); isolation: isolate; }
.cap:focus-visible { outline-offset: 4px; }
/* Dente: o título ocupa um canto recortado da peça, sempre sobre tinta sólida */
.c-tx { position: absolute; left: 0; bottom: 0; z-index: 6; padding: clamp(14px, 1.8vw, 28px) clamp(20px, 2.6vw, 44px) 0 0; background: var(--ink); border-top-right-radius: var(--r); pointer-events: none; }
.c-tx::before, .c-tx::after { content: ""; position: absolute; width: var(--r); height: var(--r); box-shadow: calc(var(--r) * -.5) calc(var(--r) * .5) 0 calc(var(--r) * .5) var(--ink); border-bottom-left-radius: var(--r); }
.c-tx::before { left: 0; top: calc(var(--r) * -1); }
.c-tx::after { right: calc(var(--r) * -1); bottom: 0; }
.c-tx-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.c-tx .titulo { margin-left: 0; }
/* 3D: de ponta a ponta, em tempo real */
.cap-t { background: #06050B; border-radius: 0; height: clamp(460px, calc(100svh - var(--bar)), 1080px); }
.cap-t .c-tx { left: 0; padding-left: var(--m); }
.t-cena { position: absolute; inset: 0; display: block; }
.t-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 45%; }
.t-vivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s linear; }
.t-vivo.ok { opacity: 1; }
@media (max-width: 759px) { .cap-t { height: clamp(420px, 128vw, 76svh); } }

/* ---------- Fim: o e-mail é a peça ---------- */
.fim { margin: var(--entre) var(--m) 0; padding-bottom: var(--p); min-height: 62svh; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(8px, 1.4svh, 18px); }
.f-mail { display: block; font: 900 calc((100vw - 2 * var(--m)) / 10.7)/1.1 "Nunito", sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.f-mail span { background: linear-gradient(var(--v), var(--v)) 0 100% / 100% .06em no-repeat; transition: color .15s linear; padding-bottom: .04em; }
@media (hover: hover) and (pointer: fine) { .f-mail:hover span { color: var(--lilac); } }
.f-mail:active span { color: var(--lilac); }
.f-pe { display: flex; align-items: center; gap: 12px; margin-top: clamp(32px, 7svh, 72px); }
.f-pe .rot { color: var(--text); }
.f-sb { width: 26px; height: 26px; }
.f-sb rect { fill: var(--text); } .f-sb rect.on { fill: var(--v); }

/* ---------- Páginas de área e de trabalho ---------- */
.cab { padding: calc(var(--bar) + clamp(20px, 4svh, 48px)) var(--m) clamp(12px, 2svh, 24px); }
.cab .titulo { font-size: clamp(44px, 6vw, 112px); }
/* Serviço e chamada (2026-11-10): uma frase e um botão, logo abaixo do título. No celular o título encolhe para a primeira dobra mostrar trabalho. */
.servico { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(10px, 1.6svh, 18px); max-width: 980px; }
.sv-frase { font: 400 var(--f-apoio)/1.4 "Inter", sans-serif; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.cta { display: inline-grid; place-items: center; min-height: 44px; padding: 0 20px; border-radius: 22px; background: var(--v); color: var(--ink); font: 500 var(--f-rot)/1 "Inter", sans-serif; white-space: nowrap; transition: background-color .15s linear; }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: var(--lilac); } }
.cta:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.cli .sv-frase { margin: 6px 0 clamp(14px, 2svh, 22px); }
@media (max-width: 759px) { .cab { padding-top: calc(var(--bar) + 16px); } .cab .titulo { font-size: clamp(36px, 10vw, 44px); } .sv-frase { font-size: 16px; } }
/* Destaques em que nenhuma peça tem a proporção da célula (mapas panorâmicos, sem HUD): uma por linha, inteira, sem tarja. */
.dest3:not(.q):not(:has(> :not(.ct))) { grid-template-columns: minmax(0, 1fr); }
.dest3:not(.q):not(:has(> :not(.ct))) > .md { grid-row: auto; aspect-ratio: auto; height: auto; }
.dest3:not(.q):not(:has(> :not(.ct))) > .md img { height: auto; }
/* Destaque com uma peça só (motion): ocupa a largura, sem linha vazia ao lado. */
.dest3:not(.q):has(> :first-child:last-child) { grid-template-columns: minmax(0, 1fr); }
.dest3:not(.q):has(> :first-child:last-child) > :first-child { grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
.lider { padding: 0 var(--m); display: grid; gap: var(--g); }
.tb { display: block; position: relative; border-radius: var(--r); overflow: hidden; background: var(--s1); }
.tb-m { display: block; overflow: hidden; }
.tb-m img { width: 100%; height: clamp(320px, calc(100svh - var(--bar) - 12svh), 880px); object-fit: cover; transition: transform .7s var(--curva); }
@media (hover: hover) and (pointer: fine) { .tb:hover .tb-m img { transform: scale(1.03); } }
.tb:active .tb-m img { transform: scale(1.015); }

.tr-ab { padding: calc(var(--bar) + var(--g)) var(--m) 0; }
.tr-m { border-radius: var(--r); overflow: hidden; background: var(--s1); }
.tr-m img { width: 100%; height: clamp(220px, 50svh, 560px); object-fit: cover; }
.tr-ti .titulo { font-size: clamp(40px, 5.4vw, 96px); }
.tr-ti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--g); padding-top: clamp(16px, 3svh, 36px); }
.ficha { padding: clamp(24px, 5svh, 56px) var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); }
.fc { grid-column: span 4; background: var(--s1); border-radius: var(--r); padding: var(--p); }
.fc .rot { margin-bottom: 12px; font-weight: 500; }
.fc p { max-width: 34ch; text-wrap: pretty; }
.fer { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fer li { padding: 6px 12px; border-radius: 16px; background: var(--s3); font: 500 var(--f-rot)/1.25 "Inter", sans-serif; }
@media (max-width: 899px) { .fc { grid-column: 1 / -1; } }

.mosaico { padding: clamp(64px, 14svh, 180px) var(--m) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 4vw, 72px) var(--g); align-items: start; }
.pos { min-width: 0; will-change: transform; }
.pos.c12 { grid-column: span 12; } .pos.c8 { grid-column: span 8; } .pos.c7 { grid-column: span 7; } .pos.c5 { grid-column: span 5; } .pos.c4 { grid-column: span 4; }
.pos.c5 { margin-top: clamp(0px, 6vw, 110px); }
.pe { border-radius: var(--r); overflow: hidden; background: var(--s1); box-shadow: 0 22px 60px rgba(0, 0, 0, .36); }
.pe-m { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.pos.c12 .pe-m { aspect-ratio: 21 / 9; }
.pe-m img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .pos.c12, .pos.c8, .pos.c7, .pos.c5, .pos.c4 { grid-column: 1 / -1; margin-top: 0; } .pos.c12 .pe-m { aspect-ratio: 16 / 9; } }

.lider.sangra { padding: 0; }
.l-visor { padding-top: clamp(64px, 14svh, 180px); }
.vd { border-radius: var(--r); overflow: hidden; background: var(--s1); }
.vd video { width: 100%; height: auto; max-height: calc(100svh - var(--bar) - 150px); object-fit: contain; background: var(--s1); }
.vd-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g); padding: clamp(14px, 2vw, 28px) var(--p); }
.vd-lista { padding-top: var(--entre); gap: var(--entre); }
.vd-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* Visor 3D: pega e gira */
.visor { position: relative; border-radius: var(--r); overflow: hidden; background: #111119; height: clamp(320px, 64svh, 760px); cursor: grab; touch-action: pan-y; }
.visor:active { cursor: grabbing; }
@media (max-width: 759px) { .visor { height: clamp(220px, 64vw, 360px); } }
.v-pos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s linear; }
.v-cv.ok { opacity: 1; }

/* Grade de modelos: cartões iguais, em ritmo de galeria */
.md-sec { padding: clamp(64px, 14svh, 180px) var(--m) 0; }
.md-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--p); }
/* Grade de centenas de peças: célula pequena, quadrada, sem sombra nem entrada, e fora da tela não pinta. */
.md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(6px, .7vw, 12px); }
.md-grade .md { aspect-ratio: 1; box-shadow: none; border-radius: 8px; content-visibility: auto; contain-intrinsic-size: auto 210px; }
.grade-c { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(8px, .9vw, 14px); }
.grade-c .md { aspect-ratio: 16 / 9; box-shadow: none; border-radius: 8px; content-visibility: auto; contain-intrinsic-size: auto 170px; }
.md.ct img { object-fit: contain; }
.grade-i { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.grade-i img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 12%; background: var(--s1); border-radius: 8px; content-visibility: auto; }
/* Abre cada página: um destaque manda, dois acompanham; peça quadrada, três iguais. */
.dest3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--g); }
.dest3 .md { aspect-ratio: 16 / 9; box-shadow: 0 16px 44px rgba(0, 0, 0, .34); }
.dest3:not(.q) > :first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
/* Só duas peças: lado a lado, sem buraco embaixo da menor. */
.dest3:not(.q):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dest3:not(.q):has(> :nth-child(2):last-child) > :first-child { grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 759px) { .dest3:not(.q):has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
.dest3.q { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dest3.q .md { aspect-ratio: 1; }
@media (max-width: 759px) { .dest3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dest3:not(.q) > :first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; height: auto; } .dest3.q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dest3.q > :first-child { grid-column: 1 / -1; } .grade-c { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.sub-1 { padding-top: clamp(16px, 3svh, 32px); }
/* Páginas de uma área: fica à mão, para não depender de rolar. */
.vnav { position: sticky; top: var(--bar); z-index: 20; display: flex; gap: 6px; padding: 8px var(--m); overflow-x: auto; scrollbar-width: none; background: var(--ink); }
.vnav::-webkit-scrollbar { display: none; }
.vn { flex: none; display: grid; place-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--s2); font: 500 var(--f-rot)/1 "Inter", sans-serif; white-space: nowrap; transition: background-color .15s linear, color .15s linear; }
.vn.at { background: var(--v); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .vn:not(.at):hover { background: var(--s3); } }
.vcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); }
.vcards .tb { grid-column: span 2; aspect-ratio: 16 / 10; }
.vcards .tb:nth-child(-n+2) { grid-column: span 3; }
.vcards .tb-m { position: absolute; inset: 0; }
.vcards .tb-m img { height: 100%; }
.vcards .grande { font-size: clamp(22px, 2.4vw, 40px); }
@media (max-width: 759px) { .vcards { grid-template-columns: 1fr; } .vcards .tb, .vcards .tb:nth-child(-n+2) { grid-column: auto; } }
.gr-n { position: absolute; left: 8px; top: 8px; z-index: 3; min-width: 26px; padding: 3px 7px; border-radius: 6px; background: rgba(11, 10, 16, .8); color: var(--text); font: 500 13px/1.2 "JetBrains Mono", monospace; text-align: center; }
.apl { padding: clamp(28px, 6svh, 72px) var(--m) 0; }
.apl .md { background: var(--fundo, var(--s1)); }
.amp-seq { position: fixed; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border-radius: 22%; background: var(--s3); color: var(--text); }
.amp-seq svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; }
.amp-ant { left: max(10px, env(safe-area-inset-left)); } .amp-prox { right: max(10px, env(safe-area-inset-right)); }
@media (hover: hover) and (pointer: fine) { .amp-seq:hover { background: var(--vd); } }
.md { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--s1); box-shadow: 0 16px 44px rgba(0, 0, 0, .34); }
.md[hidden] { display: none; }
.md img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva); }
.md::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--v); transition: box-shadow .18s var(--curva); pointer-events: none; }
.md:active::after, .md:focus-visible::after { box-shadow: inset 0 0 0 3px var(--v); }
@media (hover: hover) and (pointer: fine) { .md:hover img { transform: scale(1.04); } .md:hover::after { box-shadow: inset 0 0 0 3px var(--v); } }
:is(.md-grade, .grade-c) .abre { --abre-t: 20px; --abre-in: 6px; box-shadow: none; }
@media (max-width: 759px) { .md-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md .abre { --abre-t: 22px; --abre-in: 7px; } .md-grade .abre { --abre-t: 20px; --abre-in: 5px; } }

/* Galeria das áreas: uma peça em destaque por seção, o resto menor, mais peças por tela */
.sub { padding: clamp(28px, 6svh, 72px) var(--m) 0; }
.sub-t { font: 800 clamp(22px, 2vw, 34px)/1.1 "Nunito", sans-serif; letter-spacing: -.012em; margin-bottom: clamp(12px, 2svh, 20px); }
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--g); }
.gal > * { aspect-ratio: 16 / 10; }
.gal > .g-s3 { grid-column: span 3; } .gal > .g-s4 { grid-column: span 4; }
.gal > .g-d6 { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; }
.gal > .g-d8 { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; }
.gal > .g-d6u { grid-column: span 6; }
.gal > .g-s6 { grid-column: span 6; }
/* Pôster de vídeo em 16:9: o nome da peça não pode sair cortado. */
.gal > .vc:not(.g-d6, .g-d8) { aspect-ratio: 16 / 9; }
.gal > .g-w6 { grid-column: span 6; aspect-ratio: 33 / 10; }
.gal > .tb .tb-m { position: absolute; inset: 0; }
.gal > .tb .tb-m img { height: 100%; }
.gal > .tb .grande { font-size: clamp(22px, 2.4vw, 40px); }
@media (max-width: 759px) {
  .gal > * { grid-column: span 6 !important; grid-row: auto !important; aspect-ratio: 16 / 10 !important; }
  .gal > :first-child, .gal > .g-ult { grid-column: span 12 !important; }
  .gal .md .abre, .gal-r .md .abre { --abre-t: 22px; --abre-in: 7px; }
}
.vc img, .vc-pv { width: 100%; height: 100%; object-fit: cover; }
.vc-pv { position: absolute; inset: 0; z-index: 1; background: var(--s1); }
.vc-selo { position: absolute; left: 8px; top: 8px; z-index: 3; max-width: calc(100% - 16px); white-space: normal; font-size: 12px; }
@media (max-width: 759px) { .gal > :not(:first-child, .g-ult) .vc-selo, .gal > .vc:not(:first-child, .g-ult) .vc-selo { left: 5px; top: 5px; padding: 2px 5px; font-size: 10px; } }
.abre .pl { fill: currentColor; stroke: none; }
:is(.vc):is(:hover, :focus-visible) .abre .pl { translate: 6% 0; }
.gal-r { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); }
.gal-r .md { aspect-ratio: 9 / 16; }
@media (max-width: 999px) { .gal-r { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .gal-r { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Destaque com a ficha ao lado */
.dest { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); align-items: start; margin-bottom: var(--g); }
.dest > .vd { grid-column: span 8; }
.dest > .vd video { max-height: 58svh; }
.dest > .vd .grande { font-size: clamp(22px, 2.4vw, 40px); }
.dest > .ficha { grid-column: span 4; padding: 0; display: flex; flex-direction: column; gap: var(--g); }
.dest .fc { padding: clamp(14px, 1.6vw, 24px); }
@media (max-width: 899px) { .dest > .vd, .dest > .ficha { grid-column: 1 / -1; } }

/* Ampliado: guias no celular, modelos e vídeos */
html.amp-aberto { overflow: hidden; }
.amp { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--text); overflow: hidden; }
.amp[open] { animation: amp-entra .2s linear; }
@keyframes amp-entra { from { opacity: 0; } }
.amp::backdrop { background: var(--ink); }
.amp-rola { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.amp[data-modo="arrasta"] img { width: max(100vw, calc(100dvh * var(--ar))); max-width: none; height: auto; }
.amp[data-modo="inteira"] .amp-rola { display: grid; place-items: center; padding: 72px var(--m); }
.amp[data-modo="inteira"] :is(img, video) { max-width: 100%; max-height: calc(100dvh - 144px); width: auto; height: auto; border-radius: var(--r); }
.amp [hidden] { display: none; }
.amp-nome { position: absolute; left: var(--m); bottom: 16px; right: var(--m); font-size: clamp(18px, 1.6vw, 26px); pointer-events: none; }
.amp-x { position: fixed; left: auto; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 22%; background: var(--text); color: var(--ink); transform-origin: 0 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.amp-x svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.amp-x[style*="translate"] { left: 0; right: auto; top: 0; }
@media (hover: hover) and (pointer: fine) { .amp-x:hover { background: var(--lilac); } }

/* ---------- Branding: um bloco para cada marca, na cor dela, de ponta a ponta ---------- */
.gb { position: relative; background: var(--fundo); color: var(--tx); padding: clamp(28px, 6svh, 64px) var(--m); margin-top: clamp(20px, 4svh, 48px); overflow: clip; }
.m-branding .cab + .gb { margin-top: 0; }
.gb-capa { display: block; border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--tx) 12%, transparent); position: relative; }
.gb-capa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--cor); transition: box-shadow .18s var(--curva); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .gb-capa:hover::after { box-shadow: inset 0 0 0 3px var(--cor); } }
.gb-capa:active::after, .gb-capa:focus-visible::after { box-shadow: inset 0 0 0 3px var(--cor); }
.gb-capa img { width: 100%; height: 100%; object-fit: cover; }
.gb-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--g); padding: clamp(16px, 3svh, 32px) 0 clamp(24px, 5svh, 56px); }
.gb-seta { width: clamp(20px, 2.4vw, 36px); aspect-ratio: 1; border-radius: 22%; background: var(--cor); flex: none; }
.gb-pgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.gb-pg { min-width: 0; will-change: transform; }
.gb-pg:nth-child(2) { margin-top: clamp(16px, 5vw, 96px); }
.gb-pg > .ent { border-radius: var(--r); overflow: hidden; height: 100%; box-shadow: 0 20px 56px rgba(0, 0, 0, .26); }
.gb-pg img { width: 100%; height: 100%; object-fit: cover; }
/* Um bloco por marca: a capa em destaque de um lado; nome e páginas menores do outro. */
.gb-lado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.gb-lado .gb-capa { grid-column: 1 / 8; grid-row: 1 / span 2; }
.gb-lado .gb-pe { grid-column: 8 / -1; grid-row: 1; align-self: start; padding-top: 0; }
.gb-lado .gb-pgs { grid-column: 8 / -1; grid-row: 2; align-self: end; }
.gb-lado .gb-pg:nth-child(2) { margin-top: 0; }
.gb-lado .grande { font-size: clamp(24px, 2.6vw, 44px); }
.gb-vert .gb-capa { grid-column: 1 / 5; }
.gb-vert .gb-pe, .gb-vert .gb-pgs { grid-column: 5 / -1; }
@media (max-width: 759px) {
  .gb-lado { display: block; }
  .gb-lado .gb-pe { padding-top: clamp(16px, 3svh, 32px); }
}
.m-guia .gp { padding: clamp(48px, 10svh, 120px) var(--m) 0; display: grid; gap: clamp(20px, 4vw, 64px); }
.gp-vert { grid-template-columns: minmax(0, 720px); justify-content: center; }
/* Guia em pé: duas páginas lado a lado, cada uma cabendo na tela; a capa abre sozinha, as demais seguem em pares. */
@media (min-width: 1000px) {
  .gp-vert { --gp-c: max(440px, calc((100svh - var(--bar) - 24px) * .8)); grid-template-columns: repeat(2, minmax(0, var(--gp-c))); }
  .gp-vert .gp-p:first-child { grid-column: 1 / -1; justify-self: center; width: min(100%, var(--gp-c)); }
}
.gp-p { position: relative; border-radius: var(--r); overflow: hidden; background: var(--fundo); box-shadow: 0 22px 60px rgba(0, 0, 0, .36); }
.gp-amp { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.gp-p img { width: 100%; height: 100%; object-fit: cover; }
.cab-g .titulo { font-size: clamp(44px, 6vw, 112px); }

/* ---------- Transições ---------- */
.palco { position: fixed; inset: 0; z-index: 50; overflow: hidden; }
.muro { position: absolute; inset: 0; }
.bl { position: absolute; display: block; will-change: transform; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bl::after { content: ""; position: absolute; left: 30%; top: 24%; width: 40%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.placa { position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .075) 0 26%, transparent 28%), linear-gradient(rgba(0, 0, 0, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .28) 1px, transparent 1px); background-size: 44px 44px; }
.mon { position: absolute; left: 0; right: 0; top: 7%; height: 54%; overflow: hidden; }
.fita { position: absolute; left: 0; top: 0; bottom: 0; display: flex; gap: 10px; will-change: transform; }
.quadro { height: 100%; aspect-ratio: 560 / 630; flex: none; background-size: cover; background-position: center; border-radius: 4px; }
.lt { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--s2); }
.lt .ph { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--v); z-index: 2; will-change: transform; }
.fx { position: absolute; left: 18px; right: 18px; }
.clipe { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.guias { position: absolute; inset: 0; width: 100%; height: 100%; }
.guias line { stroke: var(--lilac); stroke-width: 1; stroke-opacity: .45; }
.px { position: absolute; background: var(--text); }

#grade { position: fixed; inset: 0 var(--m); z-index: 99; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); pointer-events: none; }
#grade i { background: rgba(255, 60, 120, .14); }