/* Lâmina Planejados · exemplo de estilo da Studios Prumo
   Ideia: prancha de marceneiro. Cimento claro, grafite e cobre; serifa de contraste alto nos títulos.
   A elevação técnica se monta porta por porta, a cozinha em 3D gira no dedo e troca de disposição,
   e a caixa do móvel anda pela linha de produção conforme a rolagem. */

@font-face { font-family: "Gloock"; src: url("fontes/gloock.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("fontes/urbanist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --faixa: 32px;
  --cimento: #E6E5E1;
  --cimento-2: #D8D6D0;
  --branco: #FAFAF8;
  --grafite: #1D1C1A;
  --grafite-2: #57544F;
  --cobre: #A8471F;
  --cobre-claro: #C8562A;
  --linha: rgba(29, 28, 26, 0.14);
  --titulo: "Gloock", Georgia, "Times New Roman", serif;
  --texto: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --curva: cubic-bezier(0.22, 0.75, 0.2, 1);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1260px;

  /* Acabamentos (usados na amostra, no 3D e nos materiais) */
  --g-freijo: repeating-linear-gradient(91deg, #A97A4B 0 7px, #9C6D41 7px 9px, #B3854F 9px 15px, #A2744A 15px 18px);
  --g-nogueira: repeating-linear-gradient(91deg, #5E3C27 0 6px, #4E301F 6px 8px, #67442D 8px 14px, #56371F 14px 17px);
  --g-carvalho: repeating-linear-gradient(91deg, #CDA77F 0 7px, #BF976C 7px 9px, #D5B08A 9px 15px, #C59D72 15px 18px);
  --g-grafite: linear-gradient(180deg, #37383A, #2B2C2E);
  --g-oliva: linear-gradient(180deg, #646C47, #565D3D);
  --g-gelo: linear-gradient(180deg, #F2F1ED, #E3E2DC);
  --t-quartzo: linear-gradient(135deg, #F6F5F1, #E4E2DC);
  --t-granito: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(135deg, #262628, #161617);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa) + 76px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--faixa); background: var(--cimento); color: var(--grafite); font: 450 1.0625rem/1.6 var(--texto); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; max-width: 100%; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 3px; border-radius: 4px; }
.monte :focus-visible, .diferenciais :focus-visible, .chamada :focus-visible, .rodape :focus-visible { outline-color: #F0B48F; }

/* Faixa da Studios Prumo (igual em todos os exemplos) */
.faixa-prumo { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: var(--faixa); padding: 4px 16px; background: #0E0E10; color: #F2F0EB; font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; text-align: center; text-decoration: none; }
.faixa-prumo:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-prumo:focus-visible { outline: 2px solid #6875FF; outline-offset: -4px; border-radius: 0; }
@media (max-width: 480px) { :root { --faixa: 40px; } .faixa-prumo { font-size: 11px; } }

/* Tipografia */
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; }
h1 { font-size: clamp(2.7rem, 5.4vw, 5rem); }
h1 em, h2 em { font-style: italic; color: var(--cobre); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); max-width: 18ch; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.1; }
.sobretitulo { font: 700 0.74rem/1.3 var(--texto); text-transform: uppercase; letter-spacing: 0.18em; color: var(--cobre); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--grafite-2); max-width: 44ch; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 2px; font: 700 0.92rem/1 var(--texto); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer; transition: transform 220ms var(--curva), background-color 200ms, color 200ms; }
.botao:active { transform: translateY(1px); }
.botao-cobre { background: var(--cobre); color: var(--branco); }
.botao-cobre:hover { background: #8E3B19; }
.botao-linha { border-color: var(--grafite); color: var(--grafite); }
.botao-linha:hover { background: var(--grafite); color: var(--branco); }
.botao-claro { background: var(--branco); color: var(--grafite); }

/* Topo */
.topo { position: sticky; top: var(--faixa); z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px var(--margem); background: rgba(230, 229, 225, 0.96); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--grafite); }
.marca-simbolo { width: 38px; height: 38px; flex: none; }
.l1 { fill: var(--grafite); } .l2 { fill: #A97A4B; } .l3 { fill: var(--cobre-claro); }
.marca-texto { display: grid; line-height: 1; }
.marca-nome { font: 400 1.55rem/1 var(--titulo); letter-spacing: -0.01em; }
.marca-sub { font: 700 0.62rem/1.6 var(--texto); text-transform: uppercase; letter-spacing: 0.32em; color: var(--grafite-2); }
.menu { display: none; margin-left: auto; gap: 26px; }
.menu a { font-weight: 600; text-decoration: none; color: var(--grafite-2); }
.menu a:hover { color: var(--grafite); }
.topo > .botao { margin-left: auto; min-height: 44px; padding: 0 18px; }
@media (min-width: 1080px) { .menu { display: flex; } .topo > .botao { margin-left: 0; } }

/* Seções */
section { position: relative; padding: clamp(72px, 9vw, 132px) var(--margem); }
.cabeca { max-width: var(--largura); margin: 0 auto clamp(32px, 5vw, 60px); display: grid; gap: 16px; }
.cabeca > p:not(.sobretitulo) { color: var(--grafite-2); max-width: 54ch; font-size: 1.1rem; }

/* 1. Abertura */
.abertura { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-top: clamp(40px, 6vw, 88px); }
.abertura-texto { display: grid; gap: 22px; }
.abertura h1 .linha { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.abertura h1 .linha > span { display: inline-block; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.prancha { display: grid; gap: 10px; padding: clamp(14px, 2.4vw, 28px); background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 30px 60px -30px rgba(29, 28, 26, 0.35); }
.prancha figcaption { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--grafite-2); }
.elevacao { width: 100%; height: auto; overflow: visible; }
.e-piso { stroke: var(--grafite); stroke-width: 2; }
.e-revest { fill: #E9E7E2; }
.porta { stroke: rgba(29, 28, 26, 0.35); stroke-width: 1; }
.porta.grafite { fill: #313234; }
.porta.madeira { fill: url(#veio); }
.forno { fill: #121213; stroke: #5B5B5E; stroke-width: 2; }
.e-tampo { fill: #F3F2EE; stroke: var(--grafite); stroke-width: 1; }
.e-rodape { fill: #1D1C1A; }
.e-cotas path { fill: none; stroke: var(--cobre); stroke-width: 1.4; }
.e-cotas text { fill: var(--cobre); font: 700 13px var(--texto); text-anchor: middle; letter-spacing: 0.06em; }
.e-cotas text.vertical { text-anchor: start; }
.e-notas text { fill: var(--grafite-2); font: 600 12px var(--texto); letter-spacing: 0.04em; }
@media (min-width: 980px) { .abertura { grid-template-columns: 1fr 1.05fr; } }

/* Entrada orquestrada (CSS puro) */
.entra { animation: entrar 900ms var(--curva) both; animation-delay: calc(var(--i) * 90ms + 60ms); }
.abertura h1 .entra { animation-name: subir; animation-duration: 820ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(24px); } }
@keyframes subir { from { transform: translateY(108%); } }
.porta { transform-box: fill-box; transform-origin: 50% 100%; animation: porta 700ms var(--curva) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.porta.cima, .porta.alta { transform-origin: 50% 0%; }
@keyframes porta { from { transform: scaleY(0); } }
.forno, .e-tampo, .e-rodape { animation: entrar 600ms var(--curva) 1100ms both; }
.e-cotas { animation: cota 900ms cubic-bezier(0.6, 0, 0.2, 1) 1400ms both; }
@keyframes cota { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
.e-notas { animation: entrar 700ms var(--curva) 1900ms both; }

/* Revelação na rolagem */
.js [data-revelar] { opacity: 0; transform: translateY(30px); transition: opacity 800ms var(--curva), transform 900ms var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-revelar].visto { opacity: 1; transform: none; }

/* 2. Ambientes */
.lista-amb { max-width: var(--largura); margin: 0 auto; display: grid; border-top: 1px solid var(--grafite); }
.lista-amb li { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; padding: 26px 0; border-bottom: 1px solid var(--linha); }
.amb-num { grid-row: span 3; font: 400 1.3rem/1.2 var(--titulo); color: var(--cobre); }
.lista-amb p { color: var(--grafite-2); max-width: 46ch; }
.preco { color: var(--grafite) !important; }
.preco span { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--grafite-2); }
@media (min-width: 820px) { .lista-amb { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* 3. Configurador 3D */
.monte { background: radial-gradient(120% 80% at 50% 0%, #2C2925 0%, #191816 60%); color: var(--branco); }
.monte .cabeca > p:not(.sobretitulo) { color: rgba(250, 250, 248, 0.75); }
.monte .sobretitulo { color: #F0A57E; }
.configurador { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
.palco3d { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: radial-gradient(70% 60% at 50% 35%, #3A3631, #1B1916 75%); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.palco3d:active { cursor: grabbing; }
.palco-alvo { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 28%; }
.palco-alvo:focus-visible { outline-offset: -4px; }
.mundo { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--escala, 1)) rotateX(var(--rx, -20deg)) rotateY(var(--ry, -30deg)); }
.mundo.suave { transition: transform 700ms var(--curva); }
.cena { position: absolute; transform-style: preserve-3d; }
.face { position: absolute; backface-visibility: hidden; }
.modulo { position: absolute; transform-style: preserve-3d; transition: transform 950ms cubic-bezier(0.65, 0, 0.25, 1); transition-delay: calc(var(--m, 0) * 45ms); }
.modulo.oculto { visibility: hidden; transition: transform 600ms var(--curva), visibility 0s 600ms; }
.piso { background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 60px 60px, #CFCAC1; }
.parede { background: linear-gradient(180deg, #EFEDE8, #E2DFD8); }
.parede-esq, .parede-dir { background: linear-gradient(180deg, #E4E1DA, #D6D2CA); }
.revest { position: absolute; left: 0; right: 0; top: 110px; height: 62px; background: linear-gradient(90deg, rgba(29, 28, 26, 0.1) 1px, transparent 1px) 0 0 / 30px 15px, linear-gradient(rgba(29, 28, 26, 0.1) 1px, transparent 1px) 0 0 / 30px 15px, #F4F3EF; }
.acab { background: var(--frente); }
.acab::after { content: ""; position: absolute; inset: 0; background: var(--nova); clip-path: inset(0 100% 0 0); }
.cena.trocando-frente .acab::after { animation: varrer 700ms cubic-bezier(0.6, 0, 0.2, 1) both; animation-delay: calc(var(--m, 0) * 35ms); }
.tampo { background: var(--tampo); }
.tampo::after { content: ""; position: absolute; inset: 0; background: var(--nova-tampo); clip-path: inset(0 100% 0 0); }
.cena.trocando-tampo .tampo::after { animation: varrer 700ms cubic-bezier(0.6, 0, 0.2, 1) both; animation-delay: calc(var(--m, 0) * 35ms); }
@keyframes varrer { to { clip-path: inset(0 0 0 0); } }
.lado::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.2); }
.acab > *, .tampo > * { position: absolute; z-index: 1; }
.divisao-v { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: rgba(0, 0, 0, 0.35); }
.divisao-h { left: 0; right: 0; height: 2px; background: rgba(0, 0, 0, 0.35); }
.pux-cava { left: 3px; right: 3px; height: 6px; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25)); transform-origin: left center; transform: scaleX(0); transition: transform 500ms var(--curva); }
.pux-alca { width: 30px; height: 4px; border-radius: 2px; background: #111112; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); transform: scaleX(0); transition: transform 500ms var(--curva); }
.cena[data-puxador="cava"] .pux-cava, .cena[data-puxador="alca"] .pux-alca { transform: scaleX(1); }
.toque-linha { left: 0; right: 0; top: 0; height: 1px; background: rgba(0, 0, 0, 0.3); }
.forno3d { left: 8px; right: 8px; top: 78px; height: 56px; border-radius: 3px; background: linear-gradient(180deg, #19191A, #0C0C0D); box-shadow: inset 0 0 0 2px #4A4A4D; }
.cuba { left: 14px; right: 14px; top: 10px; bottom: 16px; border-radius: 6px; background: linear-gradient(135deg, #A9ABAE, #6E7175); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); }
.cooktop { left: 8px; right: 8px; top: 8px; bottom: 12px; border-radius: 3px; background: radial-gradient(circle at 30% 32%, transparent 0 9px, #555 9px 10px, transparent 10px), radial-gradient(circle at 70% 32%, transparent 0 7px, #555 7px 8px, transparent 8px), radial-gradient(circle at 30% 70%, transparent 0 7px, #555 7px 8px, transparent 8px), radial-gradient(circle at 70% 70%, transparent 0 9px, #555 9px 10px, transparent 10px), #0D0D0E; }
.cena[data-frente="freijo"] { --frente: var(--g-freijo); } .cena[data-frente="nogueira"] { --frente: var(--g-nogueira); } .cena[data-frente="carvalho"] { --frente: var(--g-carvalho); }
.cena[data-frente="grafite"] { --frente: var(--g-grafite); } .cena[data-frente="oliva"] { --frente: var(--g-oliva); } .cena[data-frente="gelo"] { --frente: var(--g-gelo); }
.cena[data-frente-nova="freijo"] { --nova: var(--g-freijo); } .cena[data-frente-nova="nogueira"] { --nova: var(--g-nogueira); } .cena[data-frente-nova="carvalho"] { --nova: var(--g-carvalho); }
.cena[data-frente-nova="grafite"] { --nova: var(--g-grafite); } .cena[data-frente-nova="oliva"] { --nova: var(--g-oliva); } .cena[data-frente-nova="gelo"] { --nova: var(--g-gelo); }
.cena[data-tampo="quartzo"] { --tampo: var(--t-quartzo); } .cena[data-tampo="granito"] { --tampo: var(--t-granito); }
.cena[data-tampo-nova="quartzo"] { --nova-tampo: var(--t-quartzo); } .cena[data-tampo-nova="granito"] { --nova-tampo: var(--t-granito); }
.palco-dica { position: absolute; left: 16px; top: 14px; font: 700 0.7rem var(--texto); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(250, 250, 248, 0.6); pointer-events: none; transition: opacity 400ms; }
.palco3d.mexeu .palco-dica { opacity: 0; }
.girar { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.girar button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(250, 250, 248, 0.3); border-radius: 2px; background: rgba(25, 24, 22, 0.75); color: var(--branco); font: 700 0.8rem var(--texto); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.girar button:hover { border-color: var(--branco); }
.opcoes { display: grid; gap: 22px; }
.opcoes fieldset { border: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.opcoes legend { margin-bottom: 10px; padding: 0; font: 700 0.74rem var(--texto); text-transform: uppercase; letter-spacing: 0.16em; color: #F0A57E; }
.chips, .amostras { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label, .amostras label { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chips input, .amostras input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid rgba(250, 250, 248, 0.28); border-radius: 2px; font-weight: 600; transition: background-color 200ms, color 200ms, border-color 200ms; }
.chips input:checked + span { background: var(--branco); border-color: var(--branco); color: var(--grafite); }
.chips input:focus-visible + span, .amostras input:focus-visible + .amostra { outline: 3px solid #F0B48F; outline-offset: 2px; }
.amostras label { flex-direction: column; gap: 6px; width: 72px; font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.2; color: rgba(250, 250, 248, 0.82); }
.amostra { display: block; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 250ms var(--curva), box-shadow 250ms; }
.amostras input:checked + .amostra { transform: scale(1.08); box-shadow: 0 0 0 3px #191816, 0 0 0 5px var(--branco); }
.amostras input:checked ~ span:last-child { color: var(--branco); }
.am-freijo { background: var(--g-freijo); } .am-nogueira { background: var(--g-nogueira); } .am-carvalho { background: var(--g-carvalho); }
.am-grafite { background: var(--g-grafite); } .am-oliva { background: var(--g-oliva); } .am-gelo { background: var(--g-gelo); }
.resumo { display: grid; gap: 8px; padding: 22px; border: 1px solid rgba(250, 250, 248, 0.2); border-radius: 2px; background: rgba(250, 250, 248, 0.04); }
.resumo-titulo { font: 400 1.7rem/1.1 var(--titulo); }
.resumo-medidas, .resumo-preco { color: rgba(250, 250, 248, 0.78); }
.resumo .botao { justify-self: start; margin-top: 8px; }
@media (min-width: 720px) { .palco3d { aspect-ratio: 4 / 3; } }
@media (min-width: 1040px) { .configurador { grid-template-columns: 1.45fr 1fr; } .palco3d { aspect-ratio: 5 / 4; } }

/* 4. Acabamentos */
.materiais { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.materiais h3 { font-size: clamp(1.1rem, 1.9vw, 1.6rem); }
.materiais p { font-size: 0.95rem; }
.materiais li { display: grid; gap: 12px; align-content: start; }
.materiais p { color: var(--grafite-2); }
.mat { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: 0 24px 40px -24px rgba(29, 28, 26, 0.5); }
.mat::before { content: ""; position: absolute; inset: -14% -4%; background: var(--tex); transform: translateY(calc((0.5 - var(--p, 0.5)) * 56px * var(--dir, 1))); }
.materiais li:nth-child(even) { --dir: -1; }
.mat-lamina { --tex: var(--g-freijo); }
.mat-laca { --tex: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0 18%, transparent 30%), var(--g-oliva); }
.mat-mdf { --tex: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 4px), var(--g-carvalho); }
.mat-ferragem { --tex: radial-gradient(circle at 50% 42%, #3B3C3E 0 14%, transparent 14.5%), radial-gradient(circle at 50% 42%, #CFD1D3 0 26%, transparent 26.5%), linear-gradient(160deg, #EDEEEF, #9EA1A5 60%, #D7D9DB); }
@media (min-width: 1080px) { .materiais { grid-template-columns: repeat(4, 1fr); } }

/* 5. Linha de produção */
.fabrica { background: var(--branco); }
.linha-producao { --f: clamp(0, (var(--p, 1) - 0.18) * 2.2, 1); max-width: var(--largura); margin: 0 auto 40px; }
.trilho { position: relative; height: 84px; container-type: inline-size; }
.trilho::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 3px; background: repeating-linear-gradient(90deg, var(--grafite) 0 18px, transparent 18px 26px); opacity: 0.35; }
.estacao { position: absolute; bottom: 12px; left: calc(var(--k) * 25% - 7px); width: 15px; height: 15px; border-radius: 50%; background: var(--branco); border: 2px solid var(--grafite); }
.estacao:first-child { left: 0; }
.estacao:nth-child(5) { left: calc(100% - 15px); }
.estacao::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--cobre); opacity: clamp(0, (var(--f) * 4 - var(--k)) * 4 + 1, 1); transform: scale(clamp(0, (var(--f) * 4 - var(--k)) * 4 + 1, 1)); }
.caixa { position: absolute; left: 0; bottom: 26px; width: 64px; height: 56px; transform: translateX(calc(var(--f) * (100cqw - 64px))); }
.cx-topo { fill: #C9A27A; } .cx-esq { fill: #A97A4B; } .cx-dir { fill: #8E6338; }
.etapas { max-width: var(--largura); margin: 0 auto; display: grid; gap: 26px; }
.etapas li { display: grid; gap: 8px; align-content: start; }
.etapa-num { font: 400 1.2rem var(--titulo); color: var(--cobre); }
.etapas p { color: var(--grafite-2); }
@media (min-width: 720px) { .etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .etapas { grid-template-columns: repeat(5, 1fr); } }

/* 6. Diferenciais */
.diferenciais { background: var(--grafite); color: var(--branco); }
.diferenciais .sobretitulo { color: #F0A57E; }
.dif-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: 40px; }
.diferenciais .cabeca { margin: 0; align-content: start; }
.dif { display: grid; gap: 0; border-top: 1px solid rgba(250, 250, 248, 0.2); }
.dif > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid rgba(250, 250, 248, 0.2); }
.dif dt { font: 400 1.5rem/1.15 var(--titulo); }
.dif dd { color: rgba(250, 250, 248, 0.75); max-width: 52ch; }
@media (min-width: 980px) { .dif-grade { grid-template-columns: 1fr 1.2fr; } }

/* 7. Pedido de projeto */
.projeto-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.projeto .cabeca { margin: 0; }
.form-projeto { display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); background: var(--branco); border: 1px solid var(--linha); }
.campo { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { font: 700 0.72rem var(--texto); text-transform: uppercase; letter-spacing: 0.14em; color: var(--grafite-2); }
.campo input, .campo select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgba(29, 28, 26, 0.35); border-radius: 2px; background: var(--branco); color: var(--grafite); font: 500 1rem var(--texto); }
.campo input[readonly] { background: var(--cimento); color: var(--grafite-2); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--cobre); outline-offset: 0; border-color: var(--cobre); }
.momento { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.momento legend { width: 100%; margin-bottom: 6px; }
.momento label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 500 1rem var(--texto); text-transform: none; letter-spacing: 0; color: var(--grafite); }
.momento input { width: 20px; height: 20px; min-height: 0; accent-color: var(--cobre); }
.confirmacao { padding: 16px; background: var(--grafite); color: var(--branco); font-weight: 600; }
@media (min-width: 720px) { .form-projeto { grid-template-columns: 1fr 1fr; } .campo-largo { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .projeto-grade { grid-template-columns: 0.85fr 1.15fr; } }

/* 8. Showrooms */
.showrooms { background: var(--cimento-2); }
.showrooms .sobretitulo { color: #853614; }
.lista-show { max-width: var(--largura); margin: 0 auto; display: grid; gap: 14px; }
.lista-show li { display: grid; gap: 10px; padding: clamp(22px, 3vw, 32px); background: var(--branco); border-left: 4px solid var(--cobre); }
.lista-show address, .lista-show p { color: var(--grafite-2); }
@media (min-width: 900px) { .lista-show { grid-template-columns: repeat(3, 1fr); } }

/* 9. Perguntas */
.faq { max-width: var(--largura); margin: 0 auto; border-top: 1px solid var(--grafite); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font: 400 1.25rem/1.25 var(--titulo); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--cobre), var(--cobre)) center / 100% 1.5px no-repeat, linear-gradient(var(--cobre), var(--cobre)) center / 1.5px 100% no-repeat; transition: transform 300ms var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--grafite-2); max-width: 70ch; }

/* 10. Chamada */
.chamada { display: grid; justify-items: center; gap: 18px; text-align: center; background: var(--cobre); color: var(--branco); overflow: clip; }
.chamada > :not(.chamada-veios) { position: relative; }
.chamada h2 { max-width: 20ch; }
.chamada p { max-width: 46ch; font-size: 1.1rem; }
.chamada-numero { font-size: 0.85rem; letter-spacing: 0.04em; }
.chamada-veios { position: absolute; inset: -10% -20%; background: repeating-linear-gradient(97deg, transparent 0 22px, rgba(0, 0, 0, 0.07) 22px 24px, transparent 24px 41px, rgba(255, 255, 255, 0.05) 41px 43px); transform: translateX(calc(var(--p, 0.5) * -160px)); pointer-events: none; }

/* Rodapé */
.rodape { padding: clamp(56px, 7vw, 88px) var(--margem) 28px; background: #151412; color: rgba(250, 250, 248, 0.72); }
.rodape-colunas { max-width: var(--largura); margin: 0 auto; display: grid; gap: 32px; }
.rodape h3 { margin-bottom: 14px; font-size: 1.1rem; color: var(--branco); }
.rodape ul { display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--branco); }
.rodape-marca { display: grid; gap: 14px; align-content: start; }
.rodape .marca { color: var(--branco); }
.rodape .l1 { fill: var(--branco); }
.rodape .marca-sub { color: rgba(250, 250, 248, 0.7); }
.rodape-legal { max-width: var(--largura); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgba(250, 250, 248, 0.14); display: grid; gap: 6px; font-size: 0.78rem; }
@media (min-width: 760px) { .rodape-colunas { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .porta, .forno, .e-tampo, .e-rodape, .e-cotas, .e-notas, .cena.trocando-frente .acab::after, .cena.trocando-tampo .tampo::after { animation: none !important; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .modulo, .mundo.suave, .pux-cava, .pux-alca, .amostra, .botao { transition: none; }
  .mat::before, .chamada-veios { transform: none; }
}