/* Site da Incorpora Pré-Moldados */
:root {
  --preto: #0F0F13; --carvao: #16161B; --grafite: #212127; --aco: #2C2C33;
  --papel: #F2F1F0; --papel-2: #E7E5E1; --cobre: #BE8B60; --cobre-claro: #DDB48D; --cobre-ink: #7C5229;
  --texto: #F2F1F0; --suave: #A9A8A6; --linha: rgba(242,241,240,.13); --linha-papel: #D5D2CC;
  --ok: #7FCBA4; --ok-ink: #1F6B49; --espera: #C9C8C4;
  --display: "Italiana", "Playfair Display", Georgia, serif; --nome: "Tenor Sans", "Montserrat", sans-serif; --sans: "Montserrat", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 56px); --topo: 68px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--preto); }
body { margin: 0; background: var(--preto); color: var(--texto); font-family: var(--sans); font-size: 15px; line-height: 1.55; overflow-x: hidden; }
img, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.rotulo { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-claro); }
.contido { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1560px; margin: 0 auto; }
.frisado { height: 14px; background: repeating-linear-gradient(90deg, #7d5636 0 2px, #e6bf99 6px, #a5764f 10px, #7d5636 12px); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(15,15,19,0); border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.topo.rolado { background: rgba(15,15,19,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--linha); box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
.topo img { transition: transform .35s; transform-origin: left center; }
.topo.rolado img { transform: scale(.9); }
.topo-progresso { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--cobre); transform: scaleX(var(--progresso, 0)); transform-origin: left; pointer-events: none; }
.parte, #inicio { scroll-margin-top: var(--topo); }
/* o topo é montado dentro desta div; sem ela na caixa, o sticky vale para a página inteira */
[data-casca-topo] { display: contents; }
/* antes do JavaScript montar o topo, guarda a altura dele: o conteúdo já escrito nas páginas das peças não pula para baixo */
[data-casca-topo]:empty { display: block; height: var(--topo); border-bottom: 1px solid transparent; }
.topo > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topo); }
.topo img { height: 30px; width: auto; }
.topo nav { display: flex; align-items: center; gap: clamp(6px, 2vw, 26px); }
.topo nav a { text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--suave); padding: 10px 2px; transition: color .2s; }
.topo nav a:hover { color: var(--texto); }
.btn-orc { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; border: 1px solid var(--linha); font-size: 13.5px; font-weight: 600; transition: border-color .2s; }
.btn-orc:hover { border-color: var(--cobre); }
.btn-orc b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--cobre); color: var(--preto); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.btn-orc b.pulso { animation: pulso .45s ease; }
@keyframes pulso { 40% { transform: scale(1.4); } }
@media (max-width: 640px) { .topo nav a { display: none; } .topo img { height: 26px; } }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-cobre { background: var(--cobre); color: var(--preto); }
.btn-cobre:hover { background: var(--cobre-claro); }
.btn-linha { border-color: rgba(242,241,240,.3); }
.btn-linha:hover { border-color: var(--cobre-claro); color: var(--cobre-claro); }
.btn-tinta { background: var(--preto); color: var(--papel); }
.btn-tinta:hover { background: var(--aco); }
.btn-papel { border-color: var(--linha-papel); color: var(--preto); }
.btn-papel:hover { border-color: var(--preto); }

/* Hero */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: calc(100svh - var(--topo)); }
.hero::before { content: ""; position: absolute; left: -6%; bottom: -12%; width: 62%; aspect-ratio: 1.58; background: var(--cobre); opacity: .07; pointer-events: none;
  -webkit-mask: url(../assets/estampa-mascara.png) center / cover no-repeat; mask: url(../assets/estampa-mascara.png) center / cover no-repeat; }
.hero-txt { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(36px, 6vw, 72px) 0 clamp(36px, 6vw, 72px) var(--gutter); }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(50px, 7.6vw, 124px); line-height: .98; letter-spacing: -.012em; margin-right: -22%; pointer-events: none; }
.hero h1 em { font-style: normal; color: var(--cobre-claro); }
/* rótulo dentro do h1: o Google lê "Pré-moldados de concreto em Piracuruca-PI" como parte do título principal */
.hero h1 .rotulo { display: block; font-weight: 400; line-height: 1.5; margin-bottom: clamp(12px, 2.4svh, 26px); }
.hero-sub { max-width: 46ch; color: #C7C6C3; font-size: 16px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-nums { display: flex; flex-wrap: wrap; gap: 12px 38px; padding-top: 10px; }
.hero-nums b { display: block; font-family: var(--nome); font-weight: 400; font-size: 38px; line-height: 1; color: var(--cobre-claro); }
.hero-nums span { font-size: 12.5px; color: var(--suave); }
.hero-palco { position: relative; min-height: 420px; }
.hero-legenda { position: absolute; z-index: 3; right: var(--gutter); bottom: 22px; left: 8%; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 22px; }
.hero-legenda a { text-decoration: none; display: block; }
.hero-legenda a b { display: block; font-family: var(--nome); font-weight: 400; font-size: 24px; line-height: 1.15; }
.hero-legenda a:hover b { color: var(--cobre-claro); }
.hero-pontos { display: flex; gap: 2px; }
.hero-pontos button { min-width: 38px; min-height: 38px; font-family: var(--mono); font-size: 12px; color: var(--suave); border-bottom: 2px solid var(--linha); }
.hero-pontos button.ativo { color: var(--texto); border-color: var(--cobre); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-txt { padding-right: var(--gutter); padding-bottom: 8px; }
  .hero h1 { margin-right: 0; font-size: clamp(46px, 13.5vw, 96px); }
  .hero-palco { height: 96vw; max-height: 620px; min-height: 0; }
  .hero-legenda { left: var(--gutter); bottom: 12px; }
}
/* No computador, a primeira tela mostra o início inteiro (até o nome da peça e os botões 01, 02…):
   título, espaços e números encolhem também pela altura da janela */
@media (min-width: 901px) {
  .hero { height: calc(100svh - var(--topo)); min-height: 520px; }
  .hero-txt { gap: clamp(12px, 2.4svh, 26px); padding-top: clamp(18px, 4svh, 72px); padding-bottom: clamp(18px, 4svh, 72px); }
  .hero h1 { font-size: clamp(42px, min(7.6vw, 10.5svh), 124px); }
  .hero-sub { font-size: clamp(14.5px, 1.9svh, 16px); }
  .hero-nums { padding-top: 0; }
  .hero-nums b { font-size: clamp(26px, 4svh, 38px); }
}

/* Palco 3D */
.palco { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.palco:active { cursor: grabbing; }
.palco canvas { width: 100% !important; height: 100% !important; outline: none; }
.hero-palco::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 18%; background: linear-gradient(90deg, var(--preto), rgba(15,15,19,0)); pointer-events: none; }
@media (max-width: 900px) { .hero-palco::before { display: none; } }
.cotas-camada { position: absolute; inset: 0; pointer-events: none; }
.cota-rot { position: absolute; left: 0; top: 0; padding: 2px 7px; background: var(--preto); border: 1px solid var(--cobre); color: var(--cobre-claro); font-family: var(--mono); font-size: 12px; white-space: nowrap; will-change: transform; }
.sem-3d { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--suave); }

/* Seções */
#linhas, #como { scroll-margin-top: var(--topo); }
#pecas { scroll-margin-top: var(--topo); padding-top: clamp(16px, 3vw, 36px); }
.secao { padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(44px, 5.5vw, 76px); }
.secao-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(24px, 3.4vw, 42px); }
.secao-cab h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; margin-top: 8px; }
.secao-cab p { max-width: 46ch; color: var(--suave); }

/* Linhas (mosaico) */
/* a medida das linhas vem da largura do bloco #linhas (unidade cqw), para cada quadro ficar em 4:3 */
#linhas { container-type: inline-size; }
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: clamp(220px, 21vw, 340px); grid-auto-rows: calc((100cqw - 30px) / 4 * .75); gap: 10px; }
.tile { position: relative; overflow: hidden; display: block; background: var(--carvao); text-decoration: none; isolation: isolate; }
.tile.g { grid-column: span 2; grid-row: span 2; }
.tile.l { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); z-index: -1; }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--cobre); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.tile:hover::after { width: 100%; }
.tile-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 15px; display: flex; align-items: end; justify-content: space-between; gap: 12px; background: linear-gradient(to top, rgba(15,15,19,.9), rgba(15,15,19,0)); }
.tile h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.1; }
.tile.g h3 { font-size: clamp(30px, 3.6vw, 56px); }
.tile .mono { color: var(--cobre-claro); white-space: nowrap; padding-bottom: 3px; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 36vw; grid-auto-rows: calc((100cqw - 10px) / 2 * .75); }
  .tile.g { grid-row: span 2; }
  .tile-txt { flex-direction: column; align-items: flex-start; gap: 2px; padding: 40px 12px 11px; }
}

/* Filtros */
.filtros { position: sticky; top: var(--topo); z-index: 20; background: rgba(15,15,19,.93); backdrop-filter: blur(14px); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.filtros > div { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 38px; padding: 0 10px; font-size: 12.5px; font-weight: 500; color: var(--suave); border: 1px solid transparent; }
.chip:hover { color: var(--texto); }
.chip.ativo { color: var(--preto); background: var(--cobre); font-weight: 600; }
.busca { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--linha); flex: 0 1 170px; min-width: 110px; }
.busca svg { width: 16px; height: 16px; flex: none; color: var(--suave); }
.busca input { width: 100%; min-width: 0; min-height: 38px; background: none; border: 0; outline: 0; font-size: 13.5px; }
.busca input::placeholder { color: var(--suave); }
.busca:focus-within { border-color: var(--cobre); }
.vistas-lista { display: flex; flex: none; border: 1px solid var(--linha); }
.vistas-lista button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--suave); }
.vistas-lista button.ativo { background: var(--aco); color: var(--texto); }
.vistas-lista svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .filtros > div { flex-wrap: wrap; gap: 6px 10px; }
  .chips { order: 3; flex-basis: 100%; }
  .busca { flex: 1 1 0; }
}
.contagem { color: var(--suave); margin-bottom: 12px; }

/* Cards */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 10px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--carvao); animation: subir .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(min(var(--i), 12) * 35ms); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
.card-link { display: block; text-decoration: none; flex: 1; }
.card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(ellipse at 50% 72%, #2b2b31, var(--carvao) 70%); }
.card-img:has(img[src*="assets/"]) { background: #393939; }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s, transform .7s cubic-bezier(.2,.7,.2,1); }
.card-img img.pronto { opacity: 1; }
.card-img img.alt { opacity: 0; }
.card:hover .card-img img.alt.pronto { opacity: 1; transform: scale(1.03); }
.card:hover .card-img:has(img.alt.pronto) img.pronto:not(.alt) { opacity: 0; }
.card-ref { position: absolute; left: 14px; top: 12px; z-index: 2; color: var(--suave); }
.card-disp { position: absolute; right: 14px; top: 12px; z-index: 2; }
.disp { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--espera); }
.disp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.disp.ok { color: var(--ok); }
.disp.ok::before { background: currentColor; }
.card-txt { padding: 14px 14px 10px; }
.card h3 { font-family: var(--nome); font-weight: 400; font-size: 21px; line-height: 1.12; transition: color .2s; }
.card:hover h3 { color: var(--cobre-claro); }
.card-med { color: var(--suave); margin-top: 5px; }
.card-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 6px 14px; }
.preco { font-size: 13.5px; font-weight: 600; }
.preco small { font-weight: 500; color: var(--suave); }
.preco.consulta { font-weight: 500; color: var(--suave); font-size: 13px; }
.btn-add { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; font-size: 13px; font-weight: 600; color: var(--cobre-claro); transition: background .2s, color .2s; white-space: nowrap; }
.btn-add:hover { background: var(--cobre); color: var(--preto); }
.btn-add.feito { color: var(--ok); }
.btn-add svg { width: 15px; height: 15px; }
.vazio { padding: 60px 0; text-align: center; color: var(--suave); }
@media (max-width: 560px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card h3 { font-size: 17px; }
  .card-disp { display: none; }
  .card-txt { padding: 10px 10px 6px; }
  .card-pe { padding: 0 2px 4px 10px; }
  .card-ref { left: 10px; top: 9px; }
  .preco.consulta { font-size: 11.5px; }
}

/* Tabela */
.tabela-rola { overflow-x: auto; }
.tabela { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; padding: 10px 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); border-bottom: 1px solid var(--linha); }
.tabela td { padding: 6px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:hover td { background: var(--carvao); }
.tabela .mini { width: 62px; height: 62px; }
.tabela .mini img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.tabela .mini img.pronto { opacity: 1; }
.tabela a { text-decoration: none; font-weight: 600; }
.tabela a:hover { color: var(--cobre-claro); }
.tabela .num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* Como funciona */
.papel { background: var(--papel); color: var(--preto); }
.papel .rotulo { color: var(--cobre-ink); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--preto); }
.passo { padding: 22px 26px 8px 0; }
.passo + .passo { border-left: 1px solid var(--linha-papel); padding-left: 26px; }
.passo b { display: block; font-family: var(--nome); font-weight: 400; font-size: 54px; line-height: 1; color: var(--cobre-ink); }
.passo h3 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; }
.passo p { color: #4D4D55; font-size: 14.5px; }
.papel .secao-cab p { color: #4D4D55; }
@media (max-width: 760px) {
  .passos { grid-template-columns: minmax(0, 1fr); }
  .passo, .passo + .passo { padding: 18px 0; border-left: 0; }
  .passo + .passo { border-top: 1px solid var(--linha-papel); }
}

/* Página da linha */
.linha-capa { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; background: #111115; border-bottom: 1px solid var(--linha); }
.linha-capa-txt { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 56px) var(--gutter); }
.linha-capa h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 7vw, 104px); line-height: 1; margin: 12px 0 14px; }
.linha-capa p { color: #C7C6C3; max-width: 40ch; }
.linha-capa-foto { position: relative; }
.linha-capa-foto::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 22%; background: linear-gradient(90deg, #111115, rgba(17,17,21,0)); }
.linha-capa img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; opacity: 0; transition: opacity .4s; }
.linha-capa img.pronto { opacity: 1; }
.migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--suave); font-family: var(--mono); font-size: 12px; }
.migalha a { text-decoration: none; padding: 6px 0; }
.migalha a:hover { color: var(--cobre-claro); }
@media (max-width: 760px) {
  .linha-capa { grid-template-columns: minmax(0, 1fr); }
  .linha-capa-txt { padding-right: var(--gutter); padding-bottom: 0; }
}

/* Página da peça */
.pdp-topo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); border-bottom: 1px solid var(--linha); }
.pdp-esq { min-width: 0; border-right: 1px solid var(--linha); }
.pdp-palco { position: relative; height: calc(100svh - var(--topo) - 96px); min-height: 440px; max-height: 860px; background: radial-gradient(ellipse at 50% 62%, #26262c, var(--preto) 72%); border-bottom: 1px solid var(--linha); }
.palco-ref { position: absolute; z-index: 4; left: var(--gutter); top: 14px; pointer-events: none; }
.palco-marca { position: absolute; left: var(--gutter); bottom: 74px; font-family: var(--display); font-size: clamp(60px, 11vw, 190px); line-height: .85; color: rgba(242,241,240,.035); pointer-events: none; white-space: nowrap; }
.pdp-info { position: sticky; top: var(--topo); align-self: start; display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 44px) var(--gutter) clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px); }
.pdp-info h1 { font-family: var(--nome); font-weight: 400; font-size: clamp(38px, 4vw, 66px); line-height: 1.06; margin-top: 8px; }
.pdp-desc { color: #C7C6C3; font-size: 15.5px; max-width: 46ch; }
.fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.fato { padding: 12px 10px 12px 0; }
.fato span { display: block; font-size: 11.5px; color: var(--suave); }
.fato b { font-family: var(--mono); font-weight: 500; font-size: 14px; }
.pdp-preco { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.pdp-preco .preco { font-size: 20px; }
.pdp-preco .preco.consulta { font-size: 16px; color: var(--texto); }
.pedir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.qtd { display: flex; align-items: center; border: 1px solid var(--linha); }
.qtd button { width: 44px; height: 48px; font-size: 19px; color: var(--suave); }
.qtd button:hover { color: var(--texto); }
.qtd input { width: 56px; height: 48px; text-align: center; background: none; border: 0; outline: 0; font-family: var(--mono); -moz-appearance: textfield; appearance: textfield; }
.qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pedir .btn { width: 100%; }
.acoes-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.acoes-2 .btn { min-height: 44px; padding: 0 12px; font-size: 13px; font-weight: 500; }
.nota { font-size: 12px; color: var(--suave); }
@media (max-width: 960px) {
  .pdp-topo { grid-template-columns: minmax(0, 1fr); }
  .pdp-esq { display: contents; }
  .pdp-palco { min-height: 0; height: 92vw; max-height: 620px; }
  .pdp-info { position: static; padding: 22px var(--gutter) 28px; border-bottom: 1px solid var(--linha); }
  .obra { order: 1; }
  .palco-ref { left: 16px; }
  .palco-marca { display: none; }
}

/* Ficha técnica */
.ficha-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 84px); }
.ficha-grupo { margin-bottom: 30px; }
.ficha-grupo h3 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-ink); padding-bottom: 8px; border-bottom: 1px solid var(--preto); margin-bottom: 0; }
.ficha-tab { width: 100%; border-collapse: collapse; font-size: 15px; }
.ficha-tab th { text-align: left; font-weight: 500; color: #4D4D55; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--linha-papel); width: 48%; }
.ficha-tab td { padding: 11px 0; border-bottom: 1px solid var(--linha-papel); font-family: var(--mono); font-size: 14px; font-weight: 500; }
.usos { list-style: none; margin: 0; padding: 0; }
.usos li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha-papel); }
.usos li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--cobre); }
.calc { margin-top: 28px; padding: 22px; background: var(--preto); color: var(--texto); }
.calc .rotulo { color: var(--cobre-claro); } /* caixa escura dentro da parte clara (.papel) */
.calc h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 6px 0 14px; }
.calc label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 6px; }
.calc input { width: 100%; min-height: 46px; padding: 0 12px; background: var(--grafite); border: 1px solid var(--linha); font-family: var(--mono); outline: 0; }
.calc input:focus { border-color: var(--cobre); }
.calc-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.calc-res b { font-family: var(--nome); font-weight: 400; font-size: 40px; line-height: 1; color: var(--cobre-claro); }
.calc-res span { display: block; font-size: 12px; color: var(--suave); margin-top: 3px; }
.calc .btn { min-height: 44px; padding: 0 16px; font-size: 13px; }
@media (max-width: 860px) { .ficha-grade { grid-template-columns: minmax(0, 1fr); } }
.vizinhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linha); }
.vizinhas a { display: block; padding: 22px var(--gutter); text-decoration: none; }
.vizinhas a + a { border-left: 1px solid var(--linha); text-align: right; }
.vizinhas a:hover b { color: var(--cobre-claro); }
.vizinhas span { color: var(--suave); }
.vizinhas b { display: block; font-family: var(--nome); font-weight: 400; font-size: clamp(19px, 2.6vw, 32px); line-height: 1.1; margin-top: 4px; }

/* Orçamento */
.gaveta { position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 0; border: 0; background: var(--carvao); color: var(--texto); }
.gaveta[open] { display: flex; flex-direction: column; animation: entra .3s cubic-bezier(.2,.7,.2,1); }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
.gaveta::backdrop { background: rgba(5,5,8,.62); backdrop-filter: blur(3px); }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.gaveta-cab h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.fechar { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; }
.fechar svg { width: 20px; height: 20px; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 6px 20px 20px; }
.item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.item img { width: 58px; height: 58px; object-fit: cover; opacity: 0; transition: opacity .3s; background: var(--grafite); }
.item img.pronto { opacity: 1; }
.item b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.item .qtd button { width: 32px; height: 36px; font-size: 16px; }
.item .qtd input { width: 38px; height: 36px; font-size: 13px; }
.item button.tirar { font-size: 12px; color: var(--suave); text-decoration: underline; min-height: 24px; }
.form-orc { display: grid; gap: 10px; margin-top: 18px; }
.form-orc label { display: grid; gap: 5px; font-size: 13px; color: var(--suave); }
.form-orc input, .form-orc textarea, .form-orc select { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--grafite); border: 1px solid var(--linha); border-radius: 0; outline: 0; color: var(--texto); font: inherit; resize: vertical; }
.form-orc input:focus, .form-orc textarea:focus, .form-orc select:focus { border-color: var(--cobre); }
.gaveta-nota { margin-bottom: 10px; font-size: 12.5px; color: var(--suave); }
.gaveta-pe { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.gaveta-pe .btn { width: 100%; }

.aviso { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translate(-50%, 20px); padding: 11px 18px; background: var(--papel); color: var(--preto); font-size: 13.5px; font-weight: 600; opacity: 0; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

.so-print { display: none; }
@media print {
  html, body { background: #fff; color: #000; }
  .topo, .pdp-topo, .vizinhas, .rodape, .calc, #conteudo > .secao-mais, .aviso { display: none !important; }
  .so-print { display: flex; gap: 24px; align-items: center; margin-bottom: 18px; }
  .so-print img { width: 200px; background: #17171c; }
  .so-print h1 { font-family: var(--nome); font-weight: 400; font-size: 40px; }
  .papel { background: #fff; }
  .secao { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Site: navegação ---------- */
.pular { position: absolute; left: 12px; top: -60px; z-index: 80; padding: 10px 14px; background: var(--cobre); color: var(--preto); font-weight: 700; text-decoration: none; }
.pular:focus { top: 10px; }
.topo nav a { position: relative; }
.topo nav a.ativo { color: var(--texto); }
.topo nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; background: var(--cobre); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.topo nav a.ativo::after { transform: scaleX(1); }
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--linha); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-cel { position: fixed; z-index: 29; inset: var(--topo) 0 auto 0; display: none; flex-direction: column; padding: 8px var(--gutter) 22px; background: rgba(15,15,19,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.menu-cel.aberto { display: flex; animation: descer .25s cubic-bezier(.2,.7,.2,1); }
@keyframes descer { from { opacity: 0; transform: translateY(-8px); } }
.menu-cel a { padding: 14px 0; border-bottom: 1px solid var(--linha); font-family: var(--nome); font-size: 24px; text-decoration: none; }
.menu-cel a.ativo { color: var(--cobre-claro); }
@media (max-width: 860px) {
  .topo nav a { display: none; }
  .menu-btn { display: grid; }
  .topo img { height: 26px; }
}
@media (max-width: 420px) { .btn-orc { padding: 0 11px; } .btn-orc span { display: none; } }

/* ---------- Cabeçalho das páginas internas ---------- */
.pagina-cab { position: relative; overflow: hidden; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--linha); }
.pagina-cab::before { content: ""; position: absolute; right: -10%; top: -30%; width: 58%; aspect-ratio: 1.58; background: var(--cobre); opacity: .06; pointer-events: none;
  -webkit-mask: url(../assets/estampa-mascara.png) center / cover no-repeat; mask: url(../assets/estampa-mascara.png) center / cover no-repeat; }
.pagina-cab h1 { position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(48px, 8vw, 124px); line-height: .98; margin: 12px 0 18px; max-width: 14ch; }
.pagina-cab h1 em { font-style: normal; color: var(--cobre-claro); }
.pagina-cab p { position: relative; max-width: 52ch; color: #C7C6C3; font-size: 16px; }

/* ---------- Início: sobre a empresa ---------- */
.sobre-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.sobre-home h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; margin-top: 8px; }
.sobre-home .txt p + p { margin-top: 14px; }
.sobre-home .txt p { color: #4D4D55; font-size: 16px; }
.sobre-home .btn { margin-top: 26px; }
.difs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--preto); }
.dif { padding: 20px 22px 20px 0; border-bottom: 1px solid var(--linha-papel); }
.dif:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--linha-papel); }
.dif b { display: block; font-family: var(--nome); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--preto); margin-bottom: 6px; }
.dif b::before { content: ""; display: block; width: 22px; height: 3px; background: var(--cobre); margin-bottom: 12px; }
.dif p { color: #4D4D55; font-size: 14.5px; }
@media (max-width: 860px) { .sobre-home { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .difs { grid-template-columns: minmax(0, 1fr); } .dif:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* ---------- Quem somos ---------- */
.qs-imagem { position: relative; aspect-ratio: 5 / 4; background: radial-gradient(ellipse at 50% 68%, #2b2b31, var(--carvao) 70%); overflow: hidden; }
.qs-imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.qs-imagem img.pronto, .qs-imagem img[src^="http"], .qs-imagem img[src^="assets"] { opacity: 1; }
.qs-imagem figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--suave); }
.tempo { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linha); }
.tempo li { position: relative; padding: 0 0 26px 28px; }
.tempo li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; background: var(--cobre); }
.tempo b { display: block; font-family: var(--nome); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--cobre-claro); }
.tempo p { color: #C7C6C3; max-width: 60ch; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.galeria figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--carvao); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; font-size: 13px; color: var(--texto); background: linear-gradient(to top, rgba(15,15,19,.85), rgba(15,15,19,0)); }
/* no fundo claro da página inicial */
.sobre-home { align-items: start; }
.sobre-home .qs-imagem { margin: 0; aspect-ratio: 4 / 3; }
/* a imagem acompanha o texto enquanto a pessoa lê */
@media (min-width: 861px) { .sobre-home .qs-imagem { position: sticky; top: calc(var(--topo) + 24px); } }
.sub-cab { margin-top: clamp(36px, 4.5vw, 64px); }
.difs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.difs-4 .dif, .difs-4 .dif:nth-child(2n) { padding: 22px 24px 22px 0; border-left: 0; }
.difs-4 .dif + .dif { padding-left: 24px; border-left: 1px solid var(--linha-papel); }
@media (max-width: 960px) {
  .difs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .difs-4 .dif:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) { .difs-4 { grid-template-columns: minmax(0, 1fr); } .difs-4 .dif + .dif { padding-left: 0; border-left: 0; } }
.papel .tempo { border-left-color: var(--linha-papel); }
.papel .tempo b { color: var(--cobre-ink); }
.papel .tempo p { color: #4D4D55; }

/* ---------- Contato: só WhatsApp ---------- */
.zap { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.zap::before { content: ""; position: absolute; left: -12%; top: 6%; width: 62%; aspect-ratio: 1.58; background: var(--cobre); opacity: .06; pointer-events: none;
  -webkit-mask: url(../assets/estampa-mascara.png) center / cover no-repeat; mask: url(../assets/estampa-mascara.png) center / cover no-repeat; }
.zap-txt { position: relative; }
.zap h2 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; margin: 12px 0 20px; }
.zap h2 em { font-style: normal; color: var(--cobre-claro); }
.zap-txt p { max-width: 46ch; color: #C7C6C3; font-size: 16px; }
.zap-cartao { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(26px, 3vw, 40px); background: var(--carvao); border: 1px solid var(--linha); text-decoration: none; transition: border-color .25s, background-color .25s; }
a.zap-cartao:hover { border-color: var(--cobre); background: var(--grafite); }
.zap-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; background: var(--cobre); color: var(--preto); }
.zap-ico svg { width: 32px; height: 32px; }
.zap-cartao .mono { color: var(--suave); text-transform: uppercase; letter-spacing: .12em; }
.zap-cartao b { font-family: var(--nome); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.zap-cartao .btn { margin-top: 18px; }
.zap-cartao.sem b { color: var(--suave); }
@media (max-width: 860px) { .zap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Catálogo: página da peça ---------- */
.sem-imagem { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--suave); padding: 24px; }
.sem-imagem img { width: 64px; margin: 0 auto 14px; opacity: .6; }
.obra { padding: clamp(22px, 2.6vw, 36px) var(--gutter) clamp(26px, 3.4vw, 48px); }
.obra > .rotulo { font-weight: 400; margin-bottom: 14px; }
.slider { position: relative; background: var(--carvao); }
.slider-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider-trilho::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 10; max-height: 76svh; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 34px; font-size: 14px; text-align: left; color: var(--texto); background: linear-gradient(to top, rgba(15,15,19,.85), rgba(15,15,19,0)); }
.slider-seta { position: absolute; top: calc(50% - 23px); right: 12px; display: grid; place-items: center; width: 46px; height: 46px; background: rgba(15,15,19,.72); border: 1px solid var(--linha); color: var(--texto); backdrop-filter: blur(4px); transition: border-color .2s; }
.slider-seta:hover { border-color: var(--cobre); }
.slider-seta.ant { right: auto; left: 12px; transform: scaleX(-1); }
.slider-seta svg { width: 20px; height: 20px; }
.slider-pontos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 2px; }
.slider-pontos button { width: 28px; height: 24px; display: grid; place-items: center; }
.slider-pontos button::before { content: ""; width: 16px; height: 3px; background: rgba(242,241,240,.4); transition: background .25s, width .25s; }
.slider-pontos button[aria-current="true"]::before { width: 24px; background: var(--cobre); }
.obra-vazia { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 16px; border: 1px dashed var(--linha); text-align: center; color: var(--suave); font-size: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(242,241,240,.02) 14px 28px); }
@media (max-width: 960px) {
  .slide { aspect-ratio: 4 / 3; }
  .slider-seta { width: 40px; height: 40px; top: calc(50% - 20px); }
}
.visor { width: min(1100px, 100vw - 32px); max-width: none; height: min(86svh, 900px); max-height: none; padding: 0; border: 1px solid var(--linha); background: #111115; color: var(--texto); overflow: hidden; }
.visor::backdrop { background: rgba(8,8,10,.86); backdrop-filter: blur(4px); }
.visor figure { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.visor img { width: 100%; height: 100%; object-fit: contain; }
.visor figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--suave); }
.visor-fechar, .visor-seta { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; background: rgba(15,15,19,.8); border: 1px solid var(--linha); color: var(--texto); }
.visor-fechar:hover, .visor-seta:hover { border-color: var(--cobre); }
.visor-fechar { top: 12px; right: 12px; }
.visor-seta { top: calc(50% - 46px); right: 12px; }
.visor-seta.ant { right: auto; left: 12px; transform: scaleX(-1); }
.visor svg { width: 20px; height: 20px; }
.para-que { font-size: 17px; color: #2a2a30; max-width: 62ch; }
.para-que + .para-que { margin-top: 14px; }
.info-lista { margin: 0; }
.info-lista div { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--linha-papel); }
.info-lista dt { font-weight: 500; color: #4D4D55; }
.info-lista dd { margin: 0; color: var(--preto); }
@media (max-width: 520px) { .info-lista div { grid-template-columns: minmax(0, 1fr); } }
/* fotos do app: fundo cinza liso; no quadro 4:3 a peça aparece inteira e o cinza completa as laterais */
.card-img img.foto-real { object-fit: contain; }
.card-img:has(img.foto-real) { background: #393939; }
.card-img .sem { position: absolute; inset: 0; display: grid; place-items: center; }
.card-img .sem img { position: static; width: 54px; height: auto; opacity: .45; }
.selo { position: absolute; left: 14px; bottom: 12px; z-index: 2; padding: 3px 7px; background: rgba(15,15,19,.75); font-family: var(--mono); font-size: 11px; color: var(--suave); }

/* ---------- Rodapé ---------- */
.rodape { position: relative; overflow: hidden; border-top: 1px solid var(--linha); }
.rodape::before { content: ""; position: absolute; right: -8%; top: -12%; width: 56%; aspect-ratio: 1.58; background: var(--cobre); opacity: .06; pointer-events: none;
  -webkit-mask: url(../assets/estampa-mascara.png) center / cover no-repeat; mask: url(../assets/estampa-mascara.png) center / cover no-repeat; }
.rodape-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--linha); }
.rodape-cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; max-width: 15ch; }
.rodape-cta .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.rodape-cols { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 30px 40px; padding-top: 40px; padding-bottom: 34px; }
.rodape-cols img { width: 190px; height: auto; margin-bottom: 14px; }
.rodape-cols p, .rodape-cols li { color: var(--suave); font-size: 14px; }
.rodape-cols h3 { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-claro); margin-bottom: 12px; }
.rodape-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rodape-cols a { text-decoration: none; display: inline-block; padding: 3px 0; }
.rodape-cols a:hover { color: var(--cobre-claro); }
.rodape-legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); color: var(--suave); font-size: 12px; }
@media (max-width: 760px) { .rodape-cols { grid-template-columns: minmax(0, 1fr); } }
@media print { .rodape, .menu-cel { display: none !important; } }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Política de Privacidade e Termos de uso */
.rodape-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.rodape-links a, .gaveta-nota a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rodape-links a:hover, .gaveta-nota a:hover { color: var(--texto); }
.legal { max-width: 860px; margin: 0; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 110px); color: #D6D5D2; font-size: 15.5px; line-height: 1.7; }
.legal h2 { margin: 2.2em 0 .6em; font-family: var(--nome); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--texto); scroll-margin-top: calc(var(--topo) + 16px); }
.legal p, .legal ul { margin: 0 0 1em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .45em; }
.legal strong { color: var(--texto); font-weight: 600; }
.legal a { color: var(--cobre-claro); text-underline-offset: 3px; }
.legal-resumo { padding: clamp(18px, 3vw, 28px); background: var(--carvao); border: 1px solid var(--linha); border-left: 3px solid var(--cobre); }
.legal-resumo h2 { margin-top: 0; }
.legal-resumo ul { margin: 0; }
.legal-canal { padding: 14px 16px; background: var(--carvao); border: 1px solid var(--linha); }

/* Mini mapa (parte Contato da página inicial) */
.mapa { grid-column: 1 / -1; position: relative; display: grid; min-height: clamp(380px, 36vw, 500px); background: var(--carvao); border: 1px solid var(--linha); overflow: hidden; }
.mapa iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.mapa-capa { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(190,139,96,.22), transparent 34%),
    repeating-linear-gradient(28deg, transparent 0 46px, rgba(242,241,240,.05) 46px 48px),
    repeating-linear-gradient(-62deg, transparent 0 70px, rgba(242,241,240,.06) 70px 73px),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(242,241,240,.035) 120px 121px),
    var(--carvao); }
.mapa-pino { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; background: var(--cobre); color: var(--preto); clip-path: polygon(50% 100%, 0 38%, 0 0, 100% 0, 100% 38%); padding-bottom: 10px; }
.mapa-pino svg { width: 28px; height: 28px; }
.mapa-capa .mono { color: var(--suave); text-transform: uppercase; letter-spacing: .12em; }
.mapa-capa b { font-family: var(--nome); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.2; max-width: 30ch; }
.mapa-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.mapa-acoes .btn svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .mapa { min-height: 440px; } }
.pdp-nota { font-size: 13px; color: var(--suave); margin: -6px 0 0; }
.aviso-seg { padding-top: 14px; font-size: 14.5px; line-height: 1.55; }
.zap-insta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #C7C6C3; font-size: 15px; text-decoration: none; }
.zap-insta svg { width: 22px; height: 22px; flex: none; color: var(--cobre-claro); }
.zap-insta b { font-weight: 600; color: var(--texto); }
.zap-insta:hover b, .zap-insta:focus-visible b { color: var(--cobre-claro); text-decoration: underline; }
.junto { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--carvao); border: 1px solid var(--linha); cursor: pointer; transition: border-color .2s; }
.junto:hover, .junto:has(input:checked) { border-color: var(--cobre); }
.junto input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cobre); cursor: pointer; }
.junto b { display: block; font-size: 15px; font-weight: 600; color: var(--texto); }
.junto small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--suave); }
/* Troca de peça no destaque do início: a foto da peça antiga some por cima da nova (mistura, sem vazio) */
#palco canvas { transition: opacity .7s ease-in-out; }
#palco canvas.entrando { opacity: 0; transition: none; }
#palco .palco-antes { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 1; pointer-events: none; }
#palco .palco-antes.some { opacity: 0; }
.hero-legenda a { transition: opacity .3s ease, transform .3s ease; }
.hero-legenda a.saindo { opacity: 0; transform: translateY(6px); }
/* "Reduzir movimento" corta as transições do site; o fade da troca é só de opacidade (sem movimento), então continua */
@media (prefers-reduced-motion: reduce) {
  #palco canvas { transition-duration: .7s !important; }
  .hero-legenda a { transition-duration: .3s !important; }
  .hero-legenda a.saindo { transform: none; }
}

/* Peça sem modelo 3D (ex.: postes): a foto ocupa o lugar do palco */
.palco-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pdp-palco:has(.palco-foto:not([hidden])) { background: #393939; }
.palco-foto { z-index: 2; }
.palco[hidden], .palco-foto[hidden] { display: none; }
.palco-troca { position: absolute; z-index: 5; top: 10px; right: var(--gutter); display: flex; border: 1px solid var(--linha); background: rgba(15,15,19,.8); }
.palco-troca button { min-width: 64px; min-height: 36px; padding: 0 14px; background: none; border: 0; color: var(--suave); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .04em; cursor: pointer; }
.palco-troca button + button { border-left: 1px solid var(--linha); }
.palco-troca button:hover { color: var(--texto); }
.palco-troca button[aria-pressed="true"] { background: var(--cobre); color: #111; }
@media (max-width: 960px) { .palco-troca { right: 16px; } }