/* PORTFÓLIO PÚBLICO — só usa tokens.css; cor escrita à mão aqui é bug. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px); -webkit-text-size-adjust: 100%; background: var(--noite); }
body { font-family: var(--fonte); font-size: var(--t4); line-height: 1.55; color: var(--marca-texto); background: var(--noite); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; border-radius: var(--r1); }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; flex: none; display: inline-block; }
.ico svg { width: 100%; height: 100%; display: block; }
.tab { font-variant-numeric: tabular-nums lining-nums; }
/* o conteúdo fica SEMPRE acima da camada de fundo (z-index 1) */
.miolo { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ---------- camada de fundo: módulos, fixação e cabo (montada por fundo.js) ---------- */
.fundo { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; --p: 0; --t2: 0; --s: 0; contain: strict; }
.f-mod { position: absolute; aspect-ratio: 600 / 360; will-change: transform; overflow: visible; }
.f-mod--a { width: min(120vw, 1240px); right: -34vw; top: -6vh; opacity: .62;
  transform: perspective(1500px) rotateX(58deg) rotateZ(calc(-36deg + var(--p) * 30deg)) translate3d(0, calc(var(--p) * -110px), 0); }
.f-mod--b { width: min(104vw, 1040px); left: -40vw; bottom: -22vh; opacity: .42;
  transform: perspective(1500px) rotateX(58deg) rotateZ(calc(30deg - var(--p) * 26deg)) translate3d(0, calc(var(--p) * 90px), 0); }
.mod-frame { fill: color-mix(in srgb, var(--marca-forte) 40%, transparent); stroke: color-mix(in srgb, var(--marca-texto) 34%, transparent); stroke-width: 3; }
.mod-vidro { fill: none; stroke: color-mix(in srgb, var(--marca-texto) 14%, transparent); stroke-width: 1; }
.cel { stroke: color-mix(in srgb, var(--marca-texto) 22%, transparent); stroke-width: 1; }
.cel-base { fill: color-mix(in srgb, var(--marca) 30%, transparent); }
.cel-dedos { fill: url(#p-dedos); }
.cel-barra { stroke: color-mix(in srgb, var(--marca-texto) 34%, transparent); stroke-width: 1.1; }
.brilho { fill: url(#p-brilho); transform: translateX(calc((var(--s) * 1500px) - 500px)) skewX(-22deg); mix-blend-mode: screen; }

/* peças opacas: a ordem das camadas resolve quem cobre quem */
/* Peças em tom de metal, com contorno escuro — nada de azul-quase-preto sobre fundo escuro */
.m-peca { stroke: var(--noite); stroke-width: 1.6; stroke-linejoin: round; }
.m-trilho { fill: color-mix(in srgb, var(--marca-texto) 38%, var(--marca)); }   /* alumínio */
.m-moldura { fill: color-mix(in srgb, var(--marca-texto) 30%, var(--marca)); }  /* alumínio anodizado */
.m-vidro { fill: color-mix(in srgb, var(--marca) 70%, black); stroke-width: 1; } /* vidro escuro */
.m-clamp { fill: color-mix(in srgb, var(--marca-texto) 52%, var(--marca)); }    /* grampo */
.m-cabeca { fill: color-mix(in srgb, var(--marca-texto) 68%, var(--marca)); }   /* aço: parafuso, porca, arruela */
.m-haste { fill: color-mix(in srgb, var(--marca-texto) 68%, var(--marca)); }
.m-rosca { stroke: var(--noite); stroke-width: 1.4; stroke-dasharray: 2.5 2.5; }
.m-pino, .m-facetas, .m-seta { fill: none; stroke: var(--noite); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.m-topo-verde { fill: none; stroke: var(--destaque); stroke-width: 2; stroke-linecap: round; }
.m-tracejado { fill: none; stroke: color-mix(in srgb, var(--marca-texto) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.m-furo { fill: var(--noite-2); stroke: var(--noite); stroke-width: 1.4; }
.m-seta { stroke: var(--destaque); stroke-width: 2; opacity: calc(var(--fE1) * .9); }

/* fase 1 — o T-bolt desce alinhado à fresta; depois gira ¼ e a cabeça de través alarga (travando sob os lábios) */
.m-bolt { transform: translateY(calc((1 - var(--fA)) * -70px)); }
.m-bolt .m-cabeca { transform-box: fill-box; transform-origin: center; transform: scaleX(calc(.36 + .64 * var(--fB))); }
/* fase 2 — módulos */
.m-modulos { transform: translateY(calc((1 - var(--fC)) * -56px)); opacity: var(--fC); }
/* fase 3 — grampo */
.m-grampo { transform: translateY(calc((1 - var(--fD)) * -74px)); opacity: min(1, calc(var(--fD) * 4)); }
/* fase 4 — arruela e porca descem; a porca ainda percorre os últimos 14px girando (é o aperto) */
.m-arruela { transform: translateY(calc((1 - var(--fE1)) * -80px)); opacity: min(1, calc(var(--fE1) * 4)); }
.m-porca { transform: translateY(calc((1 - var(--fE1)) * -80px + (1 - var(--fE2)) * -14px)); opacity: min(1, calc(var(--fE1) * 4)); }
.m-topo { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--fE2) * 300deg)); opacity: min(1, calc(var(--fE1) * 4)); }
.m-tracejado { opacity: calc(var(--fE1) * .8); }
/* legenda: uma por fase, com troca suave */

.f-cabo { position: absolute; right: 0; top: 0; height: 100vh; width: min(46vw, 460px); opacity: .7; }
.cabo-fio { fill: none; stroke: var(--destaque); stroke-width: 3.5; stroke-linecap: round; opacity: .7; }
.cabo-sombra { fill: none; stroke: color-mix(in srgb, var(--marca-texto) 14%, transparent); stroke-width: 7; stroke-linecap: round; }

/* ---------- cena da fixação (seção alta; o miolo fica preso à tela) ---------- */
.tecnica { position: relative; height: 430vh; --fA: 0; --fB: 0; --fC: 0; --fD: 0; --fE1: 0; --fE2: 0; }
.tecnica__pin { position: sticky; z-index: 2; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--topo-altura); }
.tecnica__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.tecnica h2 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.035em; margin: var(--e4) 0; text-wrap: balance; }
.tecnica__sub { font-size: var(--t4); color: color-mix(in srgb, var(--marca-texto) 76%, transparent); max-width: 40ch; margin-bottom: var(--e6); }
.passos { list-style: none; display: flex; flex-direction: column; gap: var(--e2); }
.passos li { display: grid; grid-template-columns: 32px 1fr; gap: var(--e3); align-items: start; padding: var(--e3) var(--e4); border-radius: var(--r2); border: 1px solid transparent; color: color-mix(in srgb, var(--marca-texto) 48%, transparent); font-size: var(--t3); line-height: 1.45; transition: color .35s, background .35s, border-color .35s; }
.passos li b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--t3); font-weight: 800; transition: background .35s, color .35s, border-color .35s; }
.passos li.feito { color: color-mix(in srgb, var(--marca-texto) 78%, transparent); }
.passos li.feito b { background: color-mix(in srgb, var(--destaque) 24%, transparent); border-color: var(--destaque); color: var(--destaque); }
.passos li.ativo { color: var(--marca-texto); background: color-mix(in srgb, var(--marca-texto) 7%, transparent); border-color: color-mix(in srgb, var(--marca-texto) 18%, transparent); }
.passos li.ativo b { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-texto-sobre); }
.tecnica__cena { position: relative; width: 100%; height: min(78vh, 740px); justify-self: stretch; border-radius: var(--r3); overflow: hidden;
  background: radial-gradient(62% 62% at 50% 46%, color-mix(in srgb, var(--marca) 62%, transparent), transparent 72%);
  /* a borda do palco se dissolve no fundo: a cena parece flutuar, sem moldura */
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 72%, transparent 100%); }
.tecnica__cena.carregando::after { content: ""; position: absolute; inset: 22% 18%; border-radius: var(--r3); background: color-mix(in srgb, var(--marca-texto) 6%, transparent); animation: pulsa 1.4s ease-in-out infinite alternate; }
@keyframes pulsa { from { opacity: .35; } to { opacity: .9; } }
/* plano B (sem WebGL): o corte 2D dentro de um painel */
.tecnica--2d .tecnica__cena { height: auto; max-width: 620px; justify-self: center; padding: var(--e6); background: color-mix(in srgb, var(--noite-2) 96%, transparent); border: 1px solid color-mix(in srgb, var(--marca-texto) 14%, transparent); box-shadow: var(--sombra-3); }
.fixacao-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); height: 52px; padding: 0 var(--e6); border-radius: var(--pilula); font-weight: 800; font-size: var(--t4); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s, color .2s; }
.btn .ico { font-size: 20px; }
.btn--principal { background: var(--destaque); color: var(--destaque-texto-sobre); }
.btn--principal:hover { background: var(--marca-texto); color: var(--marca); transform: translateY(-2px); box-shadow: var(--brilho-destaque); }
.btn--fantasma { border: 1.5px solid color-mix(in srgb, var(--marca-texto) 36%, transparent); color: var(--marca-texto); }
.btn--fantasma:hover { background: color-mix(in srgb, var(--marca-texto) 10%, transparent); border-color: var(--marca-texto); }
.btn--sm { height: 42px; padding: 0 var(--e4); font-size: var(--t3); }
.btn:active { transform: scale(.98); }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-altura); color: var(--marca-texto); transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.topo.rolou { background: color-mix(in srgb, var(--noite) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 color-mix(in srgb, var(--marca-texto) 10%, transparent); }
.topo__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.topo__logo img { height: 40px; width: auto; }
.topo__nav { display: flex; align-items: center; gap: var(--e6); }
.topo__link { font-size: var(--t3); font-weight: 700; text-decoration: none; opacity: .8; transition: opacity .2s; padding: var(--e2) 0; }
.topo__link:hover { opacity: 1; }

/* ---------- hero: degradê marinho → verde da marca ---------- */
.hero { position: relative; padding: calc(var(--topo-altura) + var(--e16)) 0 var(--e24);
  background:
    radial-gradient(60% 70% at 92% 8%, color-mix(in srgb, var(--destaque) 34%, transparent), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--marca-texto) 7%, transparent), transparent 70%),
    linear-gradient(122deg, var(--noite-2) 0%, var(--marca) 36%, color-mix(in srgb, var(--marca) 52%, var(--destaque)) 76%, color-mix(in srgb, var(--marca) 28%, var(--destaque)) 100%); }
/* fim do degradê derrete na cor da página, sem emenda */
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; background: linear-gradient(to bottom, transparent, var(--noite)); pointer-events: none; z-index: 0; }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.rotulo { display: inline-flex; align-items: center; gap: var(--e3); font-size: var(--t2); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--destaque); }
.rotulo::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.hero h1 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(2.5rem, 6.6vw, 5.25rem); line-height: .98; letter-spacing: -.04em; margin: var(--e5) 0 var(--e6); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--destaque); position: relative; white-space: nowrap; }
.hero__sub { font-size: var(--t5); line-height: 1.5; max-width: 34ch; color: color-mix(in srgb, var(--marca-texto) 82%, transparent); margin-bottom: var(--e8); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e12); }
.numeros { display: flex; flex-wrap: wrap; gap: var(--e6) 0; }
.numeros > div { padding: 0 var(--e6); border-left: 1px solid color-mix(in srgb, var(--marca-texto) 22%, transparent); }
.numeros > div:first-child { padding-left: 0; border-left: 0; }
.numeros b { display: block; font-family: var(--fonte-display); font-weight: 800; font-size: var(--t7); line-height: 1.1; letter-spacing: -.02em; }
.numeros span { font-size: var(--t3); color: color-mix(in srgb, var(--marca-texto) 72%, transparent); }

/* rodízio de capas */
.hero__fotos { position: relative; padding: var(--e12) 0 0 var(--e12); }
.rod { position: relative; overflow: hidden; border-radius: var(--r3); background: var(--noite-2); box-shadow: var(--sombra-3); }
.rod--a { aspect-ratio: 4 / 4.6; cursor: pointer; }
.rod--b { position: absolute; left: 0; top: 0; width: 40%; aspect-ratio: 1; border: 6px solid var(--noite-2); border-radius: calc(var(--r3) + 6px); }
.rod__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.rod__slide.on { opacity: 1; }
.rod__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; transform: scale(1.09); transition: transform 7s linear; }
.rod__slide.on img { transform: scale(1); }
.rod__grad { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, color-mix(in srgb, var(--noite) 82%, transparent), transparent); pointer-events: none; }
.rod__leg { position: absolute; left: var(--e4); right: var(--e4); bottom: var(--e10); display: flex; align-items: end; justify-content: space-between; gap: var(--e3); pointer-events: none; }
.rod__tit { font-family: var(--fonte-display); font-weight: 700; font-size: var(--t5); line-height: 1.15; letter-spacing: -.015em; }
.rod__sub { display: flex; align-items: center; gap: 6px; font-size: var(--t3); color: color-mix(in srgb, var(--marca-texto) 80%, transparent); margin-top: 2px; }
.rod__sub .ico { font-size: 15px; color: var(--destaque); }
.rod__kw { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--destaque); color: var(--destaque-texto-sobre); font-weight: 800; font-size: var(--t3); padding: 6px 12px; border-radius: var(--pilula); }
.rod__kw .ico { font-size: 16px; }
.rod__prog { position: absolute; left: var(--e4); right: var(--e4); bottom: var(--e3); display: flex; gap: 6px; }
.rod__prog button { flex: 1; height: 18px; position: relative; }
.rod__prog button::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--marca-texto) 32%, transparent); }
.rod__prog button::after { content: ""; position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--marca-texto); width: 0; }
.rod__prog button.feito::after { width: 100%; }
.rod__prog button.on::after { animation: enche var(--dur, 5.5s) linear forwards; }
.rod--parado .rod__prog button.on::after { animation-play-state: paused; }
@keyframes enche { from { width: 0; } to { width: 100%; } }

/* ---------- vitrine (sobre o fundo escuro) ---------- */
.vitrine { position: relative; padding: var(--e12) 0 var(--e24); }
.vitrine__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e4) var(--e8); margin-bottom: var(--e8); }
.vitrine h2, .final h2 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.vitrine__resumo { font-size: var(--t3); color: color-mix(in srgb, var(--marca-texto) 70%, transparent); }
.vitrine__resumo b { color: var(--marca-texto); font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: var(--e2); overflow-x: auto; padding: 2px 2px var(--e2); margin: 0 -2px var(--e8); scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { display: inline-flex; align-items: center; gap: var(--e2); height: 44px; padding: 0 var(--e4); border-radius: var(--pilula); border: 1.5px solid color-mix(in srgb, var(--marca-texto) 22%, transparent); color: color-mix(in srgb, var(--marca-texto) 84%, transparent); font-size: var(--t3); font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.seg button .ico { font-size: 18px; }
.seg button small { font-size: var(--t2); font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; }
.seg button:hover { border-color: var(--marca-texto); color: var(--marca-texto); }
.seg button[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-texto-sobre); }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e6); }
.card { display: flex; flex-direction: column; text-align: left; padding: 0; color: var(--texto); background: var(--superficie); border-radius: var(--r3); box-shadow: var(--sombra-3); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-3), var(--brilho-destaque); }
.card__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--marca-suave); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; transition: transform .7s var(--ease); }
.card:hover .card__foto img { transform: scale(1.05); }
.marca-tipo { position: absolute; left: var(--e3); top: var(--e3); display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); color: var(--marca); font-size: var(--t2); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px 6px 8px; border-radius: var(--pilula); box-shadow: var(--sombra-1); }
.marca-tipo .ico { font-size: 16px; }
.contagem { position: absolute; right: var(--e3); bottom: var(--e3); display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--noite) 78%, transparent); color: var(--marca-texto); font-size: var(--t2); font-weight: 700; padding: 5px 10px; border-radius: var(--pilula); font-variant-numeric: tabular-nums; }
.contagem .ico { font-size: 15px; }
.card__corpo { display: block; padding: var(--e5); }
.card__titulo { display: block; font-family: var(--fonte-display); font-size: var(--t5); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.card__cidade { display: flex; align-items: center; gap: 6px; margin-top: var(--e1); font-size: var(--t3); color: var(--texto-2); }
.card__cidade .ico { font-size: 16px; color: var(--destaque-texto); }
.card__pe { display: flex; align-items: end; justify-content: space-between; gap: var(--e3); margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linha-suave); }
.potencia b { font-family: var(--fonte-display); font-weight: 800; font-size: var(--t7); line-height: 1; letter-spacing: -.03em; color: var(--marca); }
.potencia span { font-size: var(--t3); font-weight: 800; color: var(--texto-2); margin-left: 4px; }
.potencia small { display: block; font-size: var(--t2); color: var(--texto-3); margin-top: 2px; }
.abrir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); font-weight: 800; color: var(--marca); }
.abrir .ico { font-size: 18px; transition: transform .25s var(--ease); }
.card:hover .abrir .ico { transform: translateX(4px); }
.vazio { grid-column: 1 / -1; text-align: center; padding: var(--e16) var(--e4); border: 1.5px dashed color-mix(in srgb, var(--marca-texto) 26%, transparent); border-radius: var(--r3); color: color-mix(in srgb, var(--marca-texto) 78%, transparent); }
.vazio .ico { font-size: 36px; color: var(--destaque); margin-bottom: var(--e3); display: inline-block; }
.vazio b { display: block; color: var(--marca-texto); font-size: var(--t5); margin-bottom: var(--e1); }

/* ---------- janela da obra (papel claro sobre o escuro) ---------- */
.obra { border: 0; padding: 0; margin: auto; background: var(--superficie); border-radius: var(--r3); width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: none; overflow: hidden; box-shadow: var(--sombra-3); color: var(--texto); }
.obra::backdrop { background: color-mix(in srgb, var(--noite) 86%, transparent); backdrop-filter: blur(4px); }
.obra[open] { animation: entra .3s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.obra__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); height: min(700px, calc(100dvh - 32px)); }
.obra__galeria { display: flex; flex-direction: column; min-height: 0; background: var(--noite); }
.obra__palco { position: relative; flex: 1; min-height: 0; touch-action: pan-y; }
.obra__palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nav-foto { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--marca-texto) 16%, transparent); color: var(--marca-texto); font-size: 22px; transition: background .2s; }
.nav-foto:hover { background: color-mix(in srgb, var(--marca-texto) 30%, transparent); }
.nav-foto--e { left: var(--e3); } .nav-foto--d { right: var(--e3); }
.obra__pos { position: absolute; left: var(--e3); top: var(--e3); background: color-mix(in srgb, var(--noite) 70%, transparent); color: var(--marca-texto); font-size: var(--t2); font-weight: 700; padding: 5px 10px; border-radius: var(--pilula); font-variant-numeric: tabular-nums; }
.miniaturas { display: flex; gap: var(--e2); padding: var(--e3); overflow-x: auto; scrollbar-width: thin; }
.miniaturas button { flex: none; width: 72px; height: 54px; border-radius: var(--r1); overflow: hidden; border: 2px solid transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
.miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas button[aria-current="true"] { border-color: var(--destaque); opacity: 1; }
.obra__info { position: relative; display: flex; flex-direction: column; gap: var(--e5); padding: var(--e10) var(--e8) var(--e8); overflow-y: auto; }
.obra__x { position: absolute; top: var(--e3); right: var(--e3); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--texto-2); transition: background .2s; }
.obra__x:hover { background: var(--marca-suave); color: var(--marca); }
.obra__info h3 { font-family: var(--fonte-display); font-weight: 800; font-size: var(--t7); line-height: 1.05; letter-spacing: -.03em; padding-right: var(--e8); text-wrap: balance; }
.obra__info .marca-tipo { position: static; align-self: flex-start; box-shadow: none; background: var(--marca-suave); }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--linha-suave); }
.dados > div { padding: var(--e4) 0; border-bottom: 1px solid var(--linha-suave); }
.dados > div:nth-child(odd) { padding-right: var(--e4); }
.dados > div:nth-child(even) { padding-left: var(--e4); border-left: 1px solid var(--linha-suave); }
.dados dt { font-size: var(--t1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); display: flex; align-items: center; gap: 6px; }
.dados dt .ico { font-size: 14px; }
.dados dd { font-family: var(--fonte-display); font-weight: 700; font-size: var(--t6); line-height: 1.2; letter-spacing: -.02em; margin-top: 2px; color: var(--marca); }
.dados dd small { font-family: var(--fonte); font-size: var(--t3); font-weight: 800; color: var(--texto-2); margin-left: 3px; }
.obra__txt { font-size: var(--t4); color: var(--texto-2); white-space: pre-line; }
.obra__cta { margin-top: auto; display: flex; flex-direction: column; gap: var(--e2); }
.obra__cta .btn { width: 100%; }
.obra .btn--principal:hover { background: var(--marca); color: var(--marca-texto); }

/* ---------- fecho ---------- */
.final { position: relative; padding: var(--e24) 0;
  background:
    radial-gradient(55% 90% at 8% 100%, color-mix(in srgb, var(--destaque) 30%, transparent), transparent 70%),
    linear-gradient(238deg, var(--noite-2) 0%, var(--marca) 46%, color-mix(in srgb, var(--marca) 46%, var(--destaque)) 100%); }
.final::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(to top, transparent, var(--noite)); pointer-events: none; z-index: 0; }
.final__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e12); align-items: center; }
.final p { font-size: var(--t5); color: color-mix(in srgb, var(--marca-texto) 84%, transparent); max-width: 36ch; }
.final__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); margin-top: var(--e8); }
.final__acoes .btn { height: 60px; padding: 0 var(--e8); font-size: var(--t5); }
.final__link { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 800; font-size: var(--t4); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--marca-texto) 45%, transparent); padding-bottom: 2px; }
.final__link:hover { border-color: var(--marca-texto); }
.final__link .ico { font-size: 18px; }

.rodape { position: relative; z-index: 2; background: color-mix(in srgb, var(--noite) 90%, black); color: color-mix(in srgb, var(--marca-texto) 68%, transparent); padding: var(--e10) 0; font-size: var(--t3); }
.rodape__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e6); }
.rodape img { height: 36px; width: auto; }
.rodape address { font-style: normal; line-height: 1.7; }
.rodape a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--marca-texto) 30%, transparent); }
.rodape a:hover { color: var(--destaque); border-color: var(--destaque); }

.wa-flutuante { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 40; display: inline-flex; align-items: center; gap: var(--e2); height: 56px; padding: 0 var(--e5); border-radius: var(--pilula); background: var(--destaque); color: var(--destaque-texto-sobre); font-weight: 800; font-size: var(--t3); text-decoration: none; box-shadow: var(--brilho-destaque), var(--sombra-2); opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .3s, translate .3s var(--ease), background .2s; }
.wa-flutuante.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.wa-flutuante:hover { background: var(--marca-texto); color: var(--marca); }
.wa-flutuante .ico { font-size: 24px; }

/* ---------- entrada suave (só com JS, e respeitando "reduzir movimento") ---------- */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--atraso, 0ms); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tecnica { height: auto; padding: var(--e16) 0; }
  .tecnica__pin { position: static; height: auto; padding-top: 0; }
  .passos li { color: var(--marca-texto); }
  .passos li:not(.ativo) { display: grid; }
  .js .rev { opacity: 1; transform: none; }
  .rod__slide img { transform: none !important; transition: none; }
  .rod__prog button.on::after { animation: none; width: 100%; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- telas menores ---------- */
@media (max-width: 960px) {
  .tecnica__grade { grid-template-columns: 1fr; gap: var(--e5); }
  .tecnica__cena { order: -1; height: min(50vh, 440px); }
  .tecnica--2d .tecnica__cena { max-width: 460px; padding: var(--e4); }
  .tecnica__sub { display: none; }
  .passos li:not(.ativo) { display: none; }
  .tecnica { height: 390vh; }
  .hero { padding-bottom: var(--e16); }
  .hero__grade, .final__grade { grid-template-columns: 1fr; }
  .hero__fotos { max-width: 520px; padding-left: var(--e8); }
  .f-mod--a { right: -70vw; top: -2vh; }
  .f-mod--b { left: -80vw; }
  }
@media (max-width: 820px) {
  .topo__link { display: none; }
  .obra { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; overflow-y: auto; }
  .obra__grade { display: block; height: auto; }
  .obra__galeria { height: 92vw; min-height: 300px; max-height: 62dvh; }
  .obra__info { padding: var(--e6) var(--e5) 0; overflow: visible; min-height: calc(100dvh - min(92vw, 62dvh)); }
  .obra__cta { position: sticky; bottom: 0; margin: auto calc(var(--e5) * -1) 0; padding: var(--e3) var(--e5) calc(var(--e4) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--superficie) 78%, transparent); }
  .obra__x { position: fixed; top: var(--e3); right: var(--e3); z-index: 2; background: color-mix(in srgb, var(--noite) 72%, transparent); color: var(--marca-texto); backdrop-filter: blur(6px); }
  .obra__info h3 { padding-right: 0; }
}
@media (max-width: 560px) {
  .topo__logo img { height: 34px; }
  .hero { padding-top: calc(var(--topo-altura) + var(--e10)); }
  .hero__acoes .btn { flex: 1 1 100%; }
  .numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .numeros > div { padding: 0 var(--e4); }
  .numeros b { font-size: var(--t6); }
  .numeros span { font-size: var(--t2); }
  .vitrine { padding: var(--e10) 0 var(--e16); }
  .f-cabo { opacity: .5; }
  .wa-flutuante { width: 56px; padding: 0; justify-content: center; }
  .wa-flutuante span:not(.ico) { display: none; }
}