/* Alum Mak: estilos do site */

:root {
  /* paleta dos acabamentos do alumínio: grafite, alumínio, névoa e o bronze de destaque */
  --grafite: #16191d;
  --grafite-2: #1f2328;
  --grafite-3: #262a30;
  --noite: #0f1114;
  --tinta: #16191d;
  --tinta-2: #4a5058;       /* 8:1 no branco */
  --tinta-3: #5f666e;       /* 5,9:1 no branco */
  --aluminio: #c4c9cf;
  --linha: #e3e6e9;
  --linha-2: #cfd4da;
  --nevoa: #f2f3f4;
  --branco: #ffffff;
  --bronze: #b07845;        /* botão (com texto grafite, 4,8:1), detalhes e textos no escuro */
  --bronze-texto: #8a5a2c;  /* bronze como texto no claro (5,9:1 no branco) */
  --bronze-claro: #f6eee6;  /* fundo de ícone e selo */
  --bronze-rgb: 176 120 69;
  --claro-2: #c3c9d0;       /* texto de apoio no escuro */
  --claro-3: #9aa1a9;
  --zap: #25d366;
  color-scheme: light;

  --f: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --larg-max: 1240px;
  --gut: clamp(20px, 4vw, 40px);
  --topo-h: 72px;
  --raio: 12px;
  --raio-g: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --fs-h1: clamp(2.35rem, 1.45rem + 3.1vw, 4.1rem);
  --fs-h2: clamp(2rem, 1.4rem + 1.9vw, 3rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
main { flex: 1 0 auto; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { min-width: 0; padding: 0; border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--bronze); color: var(--grafite); }
:focus-visible { outline: 2.5px solid var(--bronze); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--larg-max) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--bronze);
  color: var(--grafite);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn .ico { width: 20px; height: 20px; }
.btn--primario { background: var(--bronze); color: var(--grafite); }
.btn--primario:hover { background: #c28a55; }
.btn--vidro { border-color: rgb(255 255 255 / .38); color: #fff; }
.btn--vidro:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.btn--linha { border-color: var(--linha-2); color: var(--tinta); background: transparent; }
.btn--linha:hover { border-color: var(--tinta); }
.btn--p { min-height: 42px; padding: 9px 16px; font-size: .9375rem; }
.btn:active { transform: translateY(1px); }

/* ---------- barra de progresso ---------- */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}
.progresso__barra {
  display: block;
  height: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- topo ---------- */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
  transition: background-color .3s, box-shadow .3s, color .3s;
}
/* escurecido no alto da foto: o menu fica legível sobre qualquer imagem */
.topo::before {
  content: '';
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(10 12 14 / .55), rgb(10 12 14 / 0));
  pointer-events: none;
  transition: opacity .3s;
}
.topo.is-solido {
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 1px 0 rgb(22 25 29 / .07), 0 8px 24px -12px rgb(22 25 29 / .18);
}
.topo.is-solido::before { opacity: 0; }
.admin-bar .topo, .admin-bar .progresso { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
  .admin-bar #wpadminbar { position: fixed; }
}
/* sem JavaScript (ou se ele falhar) o topo não fica transparente sobre as seções claras */
html:not(.js) .topo { background: var(--branco); color: var(--tinta); box-shadow: 0 1px 0 rgb(22 25 29 / .07); }
html:not(.js) .topo::before { opacity: 0; }
.topo__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--topo-h);
}
.marca {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.marca__svg { width: auto; height: 36px; aspect-ratio: 432 / 100; }
.marca__vidro { fill: var(--bronze); }
.marca__img { width: auto; max-width: 220px; height: 40px; object-fit: contain; }
.marca__img--claro { display: none; }
.topo.is-solido .marca__img--escuro { display: none; }
.topo.is-solido .marca__img--claro { display: block; }

.menu { margin-left: auto; }
.menu__lista { display: flex; align-items: center; gap: 30px; }
.menu__link {
  position: relative;
  padding: 6px 0;
  font-size: .9688rem;
  font-weight: 500;
  text-decoration: none;
}
.menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .25s var(--ease);
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: scaleX(1); }
.menu__cta { margin-left: 4px; }
/* entre 1101 e 1240 px os seis itens ficam mais juntos (sobra lugar para uma logo enviada mais larga) */
@media (min-width: 1101px) and (max-width: 1240px) {
  .menu__lista { gap: 22px; }
}

.topo__abrir {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 10px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
}
.topo__abrir-ico { position: relative; width: 22px; height: 14px; }
.topo__abrir-ico i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.topo__abrir-ico i:first-child { top: 2px; }
.topo__abrir-ico i:last-child { top: 10px; }
.topo__abrir[aria-expanded="true"] .topo__abrir-ico i:first-child { top: 6px; transform: rotate(45deg); }
.topo__abrir[aria-expanded="true"] .topo__abrir-ico i:last-child { top: 6px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  :root { --topo-h: 64px; }
  .marca__svg { height: 30px; }
  .marca__img { height: 34px; }
}
/* seis itens mais o botão não cabem numa linha antes de 1100 px (em em: acompanha quem aumentou a fonte do
   navegador): o menu vira o botão "Menu" */
@media (max-width: 1100px), (max-width: 68.75em) {
  .topo__abrir { display: inline-flex; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px var(--gut) 22px;
    background: var(--branco);
    color: var(--tinta);
    box-shadow: 0 18px 30px -18px rgb(22 25 29 / .35);
    /* celular deitado ou com zoom: os seis itens passam da tela e o painel rola por dentro (o topo é fixo) */
    max-height: calc(100vh - var(--topo-h) - var(--wp-admin--admin-bar--height, 0px));
    max-height: calc(100dvh - var(--topo-h) - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu.is-aberto { display: block; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 1.0625rem; }
  .menu__link::after { display: none; }
  .menu__cta { margin: 16px 0 0; }
  .menu__cta .btn { width: 100%; min-height: 50px; }
}

/* sem JavaScript (ou se o site.js falhar) o botão "Menu" não abre nada: no lugar dele, um link até a navegação do rodapé */
.topo__semjs { display: none; }
@media (max-width: 1100px), (max-width: 68.75em) {
  html:not(.js) .topo__abrir { display: none; }
  html:not(.js) .topo__semjs {
    display: inline-flex;
    margin-left: auto;
    padding: 10px 4px;
    color: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
  }
}

/* ---------- topo da página (hero) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(700px, 100svh);
  padding: calc(var(--topo-h) + clamp(28px, 5vw, 56px)) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
  background: var(--grafite);
  color: #f4f5f6;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__camada {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}
.hero__camada picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__desenho { position: absolute; inset: 0; width: 100%; height: 100%; color: #20242a; }
.hero__desenho path { vector-effect: non-scaling-stroke; }
.hero__cotas { stroke: rgb(var(--bronze-rgb) / .5); }
/* escurecido: forte à esquerda (texto), leve à direita (a obra aparece) */
.hero__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(12 14 17 / .9) 0%, rgb(12 14 17 / .72) 42%, rgb(12 14 17 / .38) 100%),
    linear-gradient(0deg, rgb(12 14 17 / .55) 0%, rgb(12 14 17 / 0) 35%);
}
.hero:not(.hero--foto) .hero__fundo::after {
  background:
    radial-gradient(ellipse 42% 55% at 78% 56%, rgb(var(--bronze-rgb) / .16), rgb(var(--bronze-rgb) / 0) 70%),
    linear-gradient(90deg, rgb(22 25 29 / .92) 0%, rgb(22 25 29 / .55) 55%, rgb(22 25 29 / .25) 100%);
}

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero__over {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 20px;
  color: #dcae80; /* bronze claro: texto pequeno sobre foto precisa de 4,5:1 */
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero__local {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--claro-2);
  letter-spacing: .08em;
}
.hero__local .ico { width: 15px; height: 15px; }
.hero__titulo {
  max-width: 15ch;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 34em;
  margin-top: 22px;
  color: var(--claro-2);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  color: #d9dde1;
  font-size: .9375rem;
}
.hero__lista li { display: inline-flex; align-items: center; gap: 8px; }
.hero__lista .ico { width: 16px; height: 16px; color: var(--bronze); }

/* entrada do topo ao carregar: título primeiro, depois texto e botões, depois o simulador */
@keyframes alum-subir {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__over, .hero__titulo { animation: alum-subir .6s var(--ease) both; }
  .hero__sub, .hero__acoes { animation: alum-subir .6s var(--ease) .12s both; }
  .hero__lista { animation: alum-subir .6s var(--ease) .2s both; }
  .hero .sim { animation: alum-subir .7s var(--ease) .26s both; }
}

@media (min-width: 1021px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--topo-h) + 16px); padding-bottom: 24px; }
  .hero .sim__desenho svg { height: 132px; }
  .hero .sim__tipo-cx { min-height: 44px; }
  .hero .sim__faixa { min-height: 36px; }
  .hero .sim__cab { margin-bottom: 10px; }
}
/* notebook (1366 x 768 com as barras do navegador, 1280 x 720): o cartão inteiro, com o botão, na primeira tela */
@media (min-width: 1021px) and (max-height: 800px) {
  .hero { padding-top: calc(var(--topo-h) + 8px); padding-bottom: 12px; }
  .hero .sim { padding: 16px 18px 10px; }
  .hero .sim__desenho svg { height: 96px; }
  .hero .sim__tipo-cx { min-height: 40px; }
  .hero .sim__faixa { min-height: 32px; }
  .hero .sim__linha { margin: 4px 0 10px; }
  .hero .sim__acoes { margin-top: 10px; }
}
@media (max-width: 1020px) {
  .hero { display: block; min-height: 0; }
  .hero__grade { grid-template-columns: minmax(0, 1fr); }
  .hero__titulo { max-width: 18ch; }
  .hero .sim { max-width: 560px; }
  /* no celular a foto fica só na primeira tela e termina em grafite (o simulador fica sobre o fundo liso) */
  .hero__fundo { bottom: auto; height: 100vh; height: 100svh; }
  .hero__fundo::after {
    background:
      linear-gradient(180deg, rgb(12 14 17 / .8) 0%, rgb(12 14 17 / .72) 45%, var(--grafite) 100%);
  }
}

/* ---------- simulador ---------- */
.sim {
  position: relative;
  padding: 20px 20px 14px;
  border-radius: var(--raio-g);
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 30px 70px -28px rgb(0 0 0 / .65);
  scroll-margin-top: calc(var(--topo-h) + 16px);
}
/* anel bronze que se abre uma vez quando a pessoa chega pelo "Simular o valor" (num pseudo-elemento, para não
   reiniciar a animação de entrada do cartão) */
.sim::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.sim.is-destaque::after { animation: alum-destaque 1.3s ease-out 1; }
@keyframes alum-destaque {
  0% { box-shadow: 0 0 0 0 rgb(var(--bronze-rgb) / .75); }
  100% { box-shadow: 0 0 0 20px rgb(var(--bronze-rgb) / 0); }
}
.sim__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
/* o título não quebra: sem espaço, o selo desce para a linha de baixo */
.sim__titulo { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.sim__selo {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bronze-claro);
  color: var(--bronze-texto);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.sim__rot { color: var(--tinta-2); font-size: .875rem; font-weight: 500; }

.sim__tipos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sim__tipo { position: relative; display: block; }
.sim__tipo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sim__tipo-cx {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 50px;
  padding: 6px 9px;
  border: 1px solid var(--linha-2);
  border-radius: 10px;
  color: var(--tinta-2);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
  pointer-events: none;
}
.sim__tipo-cx .ico-tipo { flex: none; width: 24px; height: 24px; }
.sim__tipo input:checked + .sim__tipo-cx {
  border-color: var(--bronze);
  background: var(--bronze-claro);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--bronze);
}
.sim__tipo input:focus-visible + .sim__tipo-cx { outline: 2.5px solid var(--bronze); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .sim__tipo:hover input:not(:checked) + .sim__tipo-cx { border-color: var(--tinta-3); color: var(--tinta); }
}

.sim__desenho { margin-bottom: 8px; border-radius: 12px; background: #eef0f2; overflow: hidden; }
.sim__desenho svg { width: 100%; height: auto; }

.sim__faixa {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.sim__valor { font-size: 1rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* régua de arrastar: trilho fino, parte percorrida em bronze, bolinha branca com borda */
.sim input[type="range"] {
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.sim input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--bronze) var(--pct, 50%), #dde1e5 var(--pct, 50%));
}
.sim input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(22 25 29 / .25);
  -webkit-appearance: none;
  appearance: none;
  transition: transform .15s;
}
.sim input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #dde1e5; }
.sim input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--bronze); }
.sim input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(22 25 29 / .25);
}
.sim input[type="range"]:focus { outline: none; }
.sim input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2.5px solid var(--bronze); outline-offset: 3px; }
.sim input[type="range"]:focus-visible::-moz-range-thumb { outline: 2.5px solid var(--bronze); outline-offset: 3px; }

.sim__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 8px 0 14px;
}
.sim__acabs legend { margin-bottom: 8px; padding: 0; }
.sim__acabs [data-sim-acab-nome] { color: var(--tinta); font-weight: 600; }
.sim__cores { display: flex; gap: 10px; }
.sim__acab { position: relative; display: block; width: 28px; height: 28px; cursor: pointer; }
.sim__acab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sim__cor {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: inset 0 0 0 1px rgb(22 25 29 / .22);
  pointer-events: none;
  transition: transform .15s;
}
/* veios de madeira na cor escolhida no Personalizar; navegador sem color-mix fica com a cor lisa (fora do @supports a
   regra inteira seria descartada e a bolinha ficaria transparente) */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .sim__cor--amadeirado {
    background: repeating-linear-gradient(100deg, var(--cor) 0 3px, color-mix(in srgb, var(--cor) 82%, #000) 3px 5px, color-mix(in srgb, var(--cor) 90%, #fff) 5px 8px);
  }
}
.sim__acab input:checked + .sim__cor { outline: 2px solid var(--bronze); outline-offset: 3px; }
.sim__acab input:focus-visible + .sim__cor { outline: 2.5px solid var(--tinta); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .sim__acab:hover .sim__cor { transform: scale(1.08); }
}

.sim__qtd { display: grid; gap: 8px; }
.sim__qtd-in { display: flex; align-items: center; gap: 4px; }
.sim__qbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--linha-2);
  border-radius: 9px;
  background: var(--branco);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s;
}
.sim__qbtn:hover { border-color: var(--tinta-3); }
.sim__qnum {
  width: 46px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.sim__qnum::-webkit-outer-spin-button, .sim__qnum::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.sim__res { padding-top: 12px; border-top: 1px solid var(--linha); }
.sim__det, .sim__un { color: var(--tinta-3); font-size: .8125rem; }
.sim__preco {
  margin: 4px 0 2px;
  font-size: clamp(1.55rem, 1.3rem + .9vw, 1.95rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sim__acoes { display: grid; gap: 0; margin-top: 14px; }
.sim__cta { width: 100%; }
.sim__cta .ico { transition: transform .2s var(--ease); }
.sim__cta:hover .ico { transform: translateX(3px); }
.sim__link {
  justify-self: center;
  padding: 9px 6px 4px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sim__link:hover { color: var(--tinta); }
.sim__nota { margin-top: 6px; color: var(--tinta-3); font-size: .75rem; line-height: 1.45; text-align: center; }

.sim__contato, .sim__pronto { display: grid; gap: 12px; }
.sim__contato-tit { font-size: 1.0625rem; font-weight: 600; outline: none; }
.sim__resumo { color: var(--tinta-2); font-size: .875rem; line-height: 1.5; }
.sim__resumo a { color: var(--bronze-texto); font-weight: 600; }
.campo { display: grid; gap: 6px; }
.campo__rot { color: var(--tinta-2); font-size: .875rem; font-weight: 500; }
.campo__in {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #8b939c;
  border-radius: 10px;
  background: var(--branco);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo__in:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgb(var(--bronze-rgb) / .22); }
.campo__in[aria-invalid="true"] { border-color: #b42318; }
.campo__erro { color: #b42318; font-size: .8125rem; }
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sim__lgpd { color: var(--tinta-3); font-size: .75rem; line-height: 1.45; text-align: center; }
.sim__lgpd a { color: inherit; }

/* ---------- seções ---------- */
.secao { padding: clamp(76px, 9vw, 128px) 0; }
.secao__cab { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.secao__cab--lado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  max-width: none;
}
.secao__cab--lado > div { max-width: 700px; }
.secao__rot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--bronze-texto);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.secao__rot::before { content: ''; width: 28px; height: 1.5px; background: currentColor; }
.secao__titulo {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.secao__intro { margin-top: 16px; color: var(--tinta-2); font-size: var(--fs-lead); line-height: 1.6; }
.secao--escura { background: var(--grafite); color: #f4f5f6; }
.secao--escura .secao__rot { color: var(--bronze); }
.secao--escura .secao__intro { color: var(--claro-2); }

/* revelar no scroll: sobe e aparece, uma vez só (sem JavaScript, tudo já aparece) */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-revelar].is-visivel { opacity: 1; transform: none; }
/* depois de aparecer, sem atraso: o hover responde na hora */
.js [data-revelar].is-pronto { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
}

/* ---------- o que fazemos ---------- */
.produtos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.produto {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--branco);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.js .produto.is-pronto { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.produto__ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--bronze-claro);
  color: var(--grafite);
}
.produto__ico .ico-tipo { width: 38px; height: 38px; transition: transform .3s var(--ease); }
.produto__titulo { margin: 20px 0 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.produto__txt { color: var(--tinta-2); font-size: 1rem; line-height: 1.6; }
.produto__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  color: var(--bronze-texto);
  font-size: .9688rem;
  font-weight: 600;
  text-decoration: none;
}
.produto__link .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.produto__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .produto:hover, .js .produto.is-visivel:hover {
    transform: translateY(-4px);
    border-color: var(--linha-2);
    box-shadow: 0 22px 44px -22px rgb(22 25 29 / .28);
  }
  .produto:hover .produto__ico .ico-tipo { transform: translateX(3px); }
  .produto:hover .produto__link .ico { transform: translateX(3px); }
}
@media (hover: none) {
  .produto:active { transform: scale(.99); }
}

/* ---------- obras ---------- */
.obras { background: var(--nevoa); }
.obras__insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--bronze);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.obras__insta .ico { width: 19px; height: 19px; }
.obras__filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtro {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  background: var(--branco);
  color: var(--tinta-2);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.filtro:hover { border-color: var(--tinta-3); color: var(--tinta); }
.filtro[aria-pressed="true"] { border-color: var(--grafite); background: var(--grafite); color: #fff; }

.obras__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 19vw, 262px);
  gap: 14px;
}
.obra { position: relative; overflow: hidden; border-radius: 14px; background: #dfe3e6; }
.obra.is-grande { grid-column: span 2; grid-row: span 2; }
.obra.is-largo2 { grid-column: span 2; }
.obra.is-largo3 { grid-column: 1 / -1; }
.obra__link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.obra__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.obra__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(10 12 14 / .16);
  opacity: 0;
  transition: opacity .35s;
}
.obra__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 56px 16px 14px;
  background: linear-gradient(to top, rgb(10 12 14 / .86) 0%, rgb(10 12 14 / .62) 55%, rgb(10 12 14 / 0) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / .55);
}
.obra__nome { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.obra__tipo { color: #e1c3a3; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.obra__link:focus-visible { outline: 3px solid var(--bronze); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .obra__info { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .obra__link:hover .obra__img { transform: scale(1.05); }
  .obra__link:hover::after, .obra__link:focus-visible::after { opacity: 1; }
  .obra__link:hover .obra__info, .obra__link:focus-visible .obra__info { opacity: 1; transform: none; }
}
.obras__mais { margin-top: 30px; text-align: center; }
.obra--exemplo { display: grid; place-items: center; color: #9aa1a9; }
.obra--exemplo .ico-tipo { width: 30%; max-width: 110px; height: auto; }
.obra--exemplo .obra__info { background: none; color: var(--tinta-2); text-shadow: none; opacity: 1; transform: none; }
.obra--exemplo .obra__tipo { color: var(--tinta-3); }
.obras__aviso {
  margin: -16px 0 22px;
  padding: 12px 16px;
  border: 1px dashed var(--bronze);
  border-radius: 10px;
  background: var(--bronze-claro);
  color: var(--bronze-texto);
  font-size: .9375rem;
}
.obras__aviso--escuro { border-color: rgb(var(--bronze-rgb) / .6); background: rgb(var(--bronze-rgb) / .12); color: #e1c3a3; }

@media (max-width: 760px) {
  .obras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 240px); gap: 10px; }
  .obra.is-grande { grid-row: span 1; }
  .obra.is-largo3 { grid-column: span 2; }
  .obras__grade--exemplo .obra:last-child { grid-column: span 2; }
  .obra__info { padding: 30px 11px 10px; }
  .obra__nome { font-size: .875rem; }
  .obra__tipo { font-size: .6875rem; }
}

/* foto ampliada */
.lb {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 12 14 / .97);
  color: #fff;
  overflow: hidden;
}
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 0 20px; }
.lb__cont { color: var(--claro-2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.lb__palco {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 12px 72px;
  touch-action: pan-y;
}
.lb__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity .25s;
  user-select: none;
  -webkit-user-drag: none;
}
.lb__img.is-trocando { opacity: 0; }
.lb__leg { min-height: 56px; padding: 10px 20px 22px; color: #e4e7ea; font-size: 1rem; text-align: center; }
.lb__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 50%;
  background: rgb(22 25 29 / .6);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lb__btn:hover { border-color: #fff; background: rgb(22 25 29 / .9); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__ant, .lb__prox { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__ant { left: 12px; }
.lb__prox { right: 12px; }
.lb__btn[aria-disabled="true"] { opacity: .3; cursor: default; }
@media (max-width: 700px) {
  .lb__palco { padding: 8px 8px; }
  .lb__ant, .lb__prox { top: auto; bottom: -58px; transform: none; width: 44px; height: 44px; }
  .lb__ant { left: 14px; }
  .lb__prox { right: 14px; }
  .lb__leg { padding: 12px 70px 22px; font-size: .9375rem; }
}
html.is-lb { overflow: hidden; }

/* ---------- antes e depois ---------- */
.ad__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ad__grade--um { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin-inline: auto; }
.ad__item { margin: 0; }
.comp {
  position: relative;
  aspect-ratio: var(--prop, 4 / 3);
  overflow: hidden;
  border-radius: var(--raio-g);
  background: var(--grafite-3);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.comp__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.comp__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comp__linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12);
  pointer-events: none;
}
.comp__alca {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: var(--grafite);
  box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  transform: translate(-50%, -50%);
  transition: transform .2s var(--ease);
}
.comp__alca svg { width: 24px; height: 24px; }
.comp.is-arrastando .comp__alca { transform: translate(-50%, -50%) scale(1.08); }
.comp:has(.comp__range:focus-visible) .comp__alca { outline: 3px solid var(--bronze); outline-offset: 3px; }
.comp__rot {
  position: absolute;
  top: 14px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(12 14 17 / .66);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  pointer-events: none;
}
.comp__rot--antes { left: 14px; }
.comp__rot--depois { right: 14px; }
.comp__range {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ad__leg { margin-top: 14px; color: var(--claro-2); font-size: 1rem; }
.ad__lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad__foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--raio); background: var(--grafite-3); }
.ad__img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 760px) {
  .ad__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .comp { aspect-ratio: var(--prop-cel, var(--prop, 4 / 3)); }
  .comp__alca { width: 44px; height: 44px; }
}

/* ---------- como funciona ---------- */
.etapas {
  --gap: 28px;
  display: grid;
  /* quantas etapas houver (o Personalizar deixa tirar etapas) */
  grid-template-columns: repeat(var(--colunas, 5), minmax(0, 1fr));
  gap: var(--gap);
}
.etapa { position: relative; padding-top: 60px; }
.etapa__num {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--bronze-texto);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
/* a marca de cada etapa é a do desenho técnico: o traço de chamada e o traço a 45° sobre a linha de cota */
.etapa__marca { position: absolute; top: 28px; left: 0; width: 16px; height: 18px; }
.etapa__marca::before, .etapa__marca::after {
  content: '';
  position: absolute;
  left: 7.25px;
  width: 1.5px;
  background: var(--bronze);
  transition: background-color .3s;
}
.etapa__marca::before { top: 0; height: 18px; }
.etapa__marca::after { top: 1px; height: 16px; transform: rotate(45deg); }
/* a linha de cota vai da marca desta etapa até a da próxima */
.etapa__seg { position: absolute; top: 36.25px; left: 8px; width: calc(100% + var(--gap)); height: 1.5px; background: var(--linha); }
.etapa__seg-fill { display: block; width: 100%; height: 100%; background: var(--bronze); transform-origin: 0 50%; }
/* com JavaScript a linha começa vazia e se desenha com a rolagem (--p de 0 a 1 em cada trecho) */
.etapas.is-animada .etapa__seg-fill { transform: scaleX(var(--p, 0)); }
.etapas.is-animada .etapa:not(.is-ativa) .etapa__marca::before,
.etapas.is-animada .etapa:not(.is-ativa) .etapa__marca::after { background: var(--linha-2); }
.etapas.is-animada .etapa:not(.is-ativa) .etapa__num { color: var(--tinta-3); }
.etapa__titulo { margin-bottom: 8px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.etapa__txt { color: var(--tinta-2); font-size: .9688rem; line-height: 1.6; }
.etapas__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 60px); }
@media (max-width: 1020px) {
  /* em pé: a linha desce pela esquerda */
  .etapas { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .etapa { padding: 0 0 32px 48px; }
  .etapa:last-child { padding-bottom: 0; }
  .etapa__num { position: static; display: block; margin-bottom: 6px; line-height: 20px; }
  .etapa__marca { top: 2px; left: 4px; width: 18px; height: 16px; }
  .etapa__marca::before { top: 7.25px; left: 0; width: 18px; height: 1.5px; }
  .etapa__marca::after { top: 0; left: 8.25px; width: 1.5px; height: 16px; }
  .etapa__seg { top: 10px; left: 12.25px; width: 1.5px; height: 100%; }
  .etapa__seg-fill { transform-origin: 50% 0; }
  .etapas.is-animada .etapa__seg-fill { transform: scaleY(var(--p, 0)); }
}
@media (max-width: 600px) {
  .etapas__acoes .btn { flex: 1 1 auto; }
}

/* ---------- por que a Alum Mak ---------- */
.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(40px, 6vw, 88px);
  margin-bottom: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.numero { display: grid; gap: 6px; }
.numero__valor {
  color: var(--bronze);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.numero__rot { color: var(--claro-2); font-size: 1rem; }
.difs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.dif {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / .12);
}
/* traço bronze no alto de cada diferencial: cresce quando ele aparece */
.dif::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--bronze);
  transform-origin: 0 50%;
}
.js .dif[data-revelar]::before { transform: scaleX(0); transition: transform .7s var(--ease) calc(var(--i, 0) * 150ms + .25s); }
.js .dif[data-revelar].is-visivel::before { transform: none; }
/* um de cada vez: o atraso entre eles é maior que o das outras seções */
.js .dif[data-revelar]:not(.is-pronto) { transition-delay: calc(var(--i, 0) * 150ms); }
.dif__ico { color: var(--bronze); }
.dif__ico .ico-tipo { width: 40px; height: 40px; }
.dif__titulo { margin-top: 6px; color: #f4f5f6; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.dif__txt { color: var(--claro-2); font-size: 1rem; line-height: 1.6; }
@media (max-width: 1020px) {
  .difs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .difs { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .numeros { gap: 22px 36px; }
}

/* ---------- perguntas frequentes ---------- */
.perguntas__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px clamp(40px, 6vw, 96px);
  align-items: start;
}
.perguntas__cab { position: sticky; top: calc(var(--topo-h) + 32px); margin-bottom: 0; }
.perguntas__zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-weight: 600;
  /* sublinhado no texto (e não borda na caixa): quebrando em duas linhas no celular, cada linha tem o seu */
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.perguntas__zap .ico { width: 19px; height: 19px; }
.faq { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__p::marker { content: ''; }
.faq__p:hover { color: var(--bronze-texto); }
.faq__p:focus-visible { outline-offset: 4px; border-radius: 4px; }
/* sinal de mais que vira menos */
.faq__sinal {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linha-2);
  border-radius: 50%;
  color: var(--tinta);
  transition: background-color .25s, border-color .25s, color .25s;
}
.faq__sinal::before, .faq__sinal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[open] .faq__sinal { border-color: var(--grafite); background: var(--grafite); color: #fff; }
.faq__item[open] .faq__sinal::after { transform: none; }
.faq__r { padding: 0 52px 24px 0; color: var(--tinta-2); line-height: 1.65; }
.faq__r p + p { margin-top: .8em; }
/* abrir e fechar deslizando, nos navegadores que sabem animar até "auto" */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
    .faq__item[open]::details-content { height: auto; }
  }
}
@media (max-width: 900px) {
  .perguntas__grade { grid-template-columns: minmax(0, 1fr); }
  .perguntas__cab { position: static; }
}
@media (max-width: 600px) {
  .faq__p { padding: 18px 0; font-size: 1.0625rem; }
  .faq__r { padding-right: 0; }
}

/* ---------- orçamento e contato ---------- */
.contato { background: var(--nevoa); }
.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "cab lado" "info lado";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(40px, 6vw, 88px);
  align-items: start;
}
.contato__grade--so-info { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "info"; }
/* sem WhatsApp não há formulário: os contatos ficam em duas colunas, sem esticar na largura toda */
.contato__grade--so-info .contato__info, html:not(.js) .contato__info { max-width: 760px; }
@media (min-width: 1021px) {
  .contato__grade--so-info .canais, html:not(.js) .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contato__cab { grid-area: cab; margin-bottom: 32px; }
.contato__info { grid-area: info; }
.contato__lado { grid-area: lado; }
.canais { display: grid; gap: 10px; }
.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
a.canal:hover { border-color: var(--linha-2); box-shadow: 0 14px 28px -20px rgb(22 25 29 / .4); }
.canal__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bronze-claro);
  color: var(--grafite);
}
.canal__ico .ico { width: 21px; height: 21px; }
.canal__txt { display: grid; min-width: 0; }
.canal__rot { color: var(--tinta-3); font-size: .8125rem; font-weight: 500; }
.canal__valor { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }

.mapa {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #e8ebee;
}
.mapa__desenho { position: absolute; inset: 0; width: 100%; height: 100%; color: #d6dbe0; }
.mapa__ruas { stroke: #fbfbfc; }
.mapa__pino path { fill: var(--bronze); }
.mapa__pino circle { fill: #fff; }
.mapa__capa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 16px 14px;
  background: linear-gradient(to top, rgb(242 243 244 / .96) 45%, rgb(242 243 244 / 0));
  text-align: center;
}
.mapa__btn { background: var(--branco); }
.mapa__btn .ico { width: 18px; height: 18px; }
.mapa__nota { color: var(--tinta-3); font-size: .8125rem; }
.mapa__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa.is-aberto .mapa__capa, .mapa.is-aberto .mapa__desenho { display: none; }
/* sem JavaScript o mapa não carrega: fica só o link para o Google Maps */
html:not(.js) .mapa { display: none; }
/* e o formulário não guarda nem abre o WhatsApp: some, e ficam os contatos (com o WhatsApp da lista) */
html:not(.js) .contato__lado { display: none; }
html:not(.js) .contato__grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "info"; }
.contato__rota {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--bronze-texto);
  font-size: .9688rem;
  font-weight: 600;
  text-decoration: none;
}
.contato__rota .ico { width: 14px; height: 14px; }
.contato__rota:hover { text-decoration: underline; text-underline-offset: 4px; }
.contato__aviso { margin: 18px 0 0; }

.contato__form {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--raio-g);
  background: var(--branco);
  box-shadow: 0 30px 60px -34px rgb(22 25 29 / .35);
  scroll-margin-top: calc(var(--topo-h) + 16px);
}
.contato__passo { display: grid; gap: 18px; }
.contato__form-tit { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; outline: none; }
.form__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo__opc { color: var(--tinta-3); font-weight: 400; }
.campo__in--area { min-height: 96px; resize: vertical; line-height: 1.5; }
/* campos novos criados no Personalizar: os marcados "metade da largura" ficam dois lado a lado */
.campos-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.campos-extras > .campo { grid-column: 1 / -1; }
.campos-extras > .campo--meia { grid-column: auto; }
/* lista de escolha com a mesma cara dos outros campos, com a setinha desenhada */
/* o campo de data fica da altura dos outros (o ícone do calendário o deixava mais alto) */
.campo__in[type="date"] { height: 48px; }
select.campo__in {
  padding-right: 42px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%234a5058' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
fieldset.campo > legend { margin-bottom: 8px; padding: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; display: block; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.opcao input:checked + span {
  border-color: var(--bronze);
  background: var(--bronze-claro);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--bronze);
}
/* visto dentro da opção marcada (não depende só da cor) */
.opcao input:checked + span::before {
  content: '';
  width: 10px;
  height: 5.5px;
  margin: -3px 9px 0 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.opcao input:focus-visible + span { outline: 2.5px solid var(--bronze); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .opcao:hover input:not(:checked) + span { border-color: var(--tinta-3); color: var(--tinta); }
}
.contato__enviar { width: 100%; }
.contato__nota { color: var(--tinta-3); font-size: .8125rem; line-height: 1.5; }
.contato__nota a { color: inherit; }
.contato__pronto { justify-items: start; }
.contato__ok {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bronze-claro);
  color: var(--bronze-texto);
}
.contato__ok .ico { width: 26px; height: 26px; }
.contato__pronto .contato__nota { color: var(--tinta-2); font-size: .9688rem; }
.contato__pronto .contato__nota a { color: var(--bronze-texto); font-weight: 600; }

/* chamada final: um brilho passa uma vez pelo botão quando o formulário aparece (sem pulsar sem parar) */
.btn--brilho { position: relative; overflow: hidden; isolation: isolate; }
.btn--brilho::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .6), rgb(255 255 255 / 0));
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@keyframes alum-brilho {
  from { opacity: 1; transform: translateX(0) skewX(-18deg); }
  to { opacity: 1; transform: translateX(400%) skewX(-18deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .contato__lado.is-visivel .btn--brilho::after { animation: alum-brilho 1.2s var(--ease) .9s 1 both; }
}

@media (max-width: 1020px) {
  .contato__grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "lado" "info"; grid-template-rows: auto; }
  .contato__lado { margin-bottom: 36px; }
  .contato__form { max-width: 640px; }
}
@media (min-width: 601px) and (max-width: 1020px) {
  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa { max-width: 640px; }
}
@media (max-width: 600px) {
  .form__linha { grid-template-columns: minmax(0, 1fr); }
  .campos-extras > .campo--meia { grid-column: 1 / -1; }
  .contato__form { padding: 22px 18px; }
}

/* ---------- rodapé ---------- */
.rodape { padding: clamp(52px, 6vw, 72px) 0 26px; background: var(--noite); color: var(--claro-2); }
.rodape__in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 36px 48px;
  align-items: start;
}
.rodape .marca { color: #f4f5f6; }
.rodape .marca__svg { height: 40px; }
.rodape__frase { max-width: 30em; margin-top: 18px; font-size: .9688rem; }
.rodape__contatos { display: grid; gap: 12px; font-size: .9688rem; }
.rodape__contatos a, .rodape__local { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.rodape__contatos a:hover { color: #fff; }
.rodape__contatos .ico { width: 19px; height: 19px; color: var(--bronze); }
.rodape__nav { display: grid; gap: 10px; font-size: .9688rem; }
.rodape__nav a { text-decoration: none; }
.rodape__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #23272c;
  color: var(--claro-3);
  font-size: .8438rem;
}
.rodape__base a { color: var(--claro-2); }
.rodape__base a:hover { color: #fff; }
@media (max-width: 860px) {
  .rodape__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .rodape__in { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- WhatsApp flutuante ---------- */
.zap {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--zap);
  color: #fff;
  box-shadow: 0 10px 26px -8px rgb(0 0 0 / .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.9);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s, visibility 0s .3s;
}
.zap.is-visivel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.zap:hover { background: #1ebe5b; }
.zap .ico { width: 30px; height: 30px; }
.zap:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }
html.is-lb .zap { opacity: 0; pointer-events: none; }

/* ---------- páginas comuns (política de privacidade, 404) ---------- */
.pagina { padding: calc(var(--topo-h) + 56px) 0 80px; }
.pagina__in { max-width: 820px; }
.pagina__titulo { margin-bottom: 26px; font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.pagina__conteudo > * + * { margin-top: 1em; }
.pagina__conteudo h2 { margin-top: 1.6em; font-size: 1.5rem; }
.pagina__conteudo a { color: var(--bronze-texto); }
.pagina__conteudo ul { padding-left: 1.2em; list-style: disc; }
.pagina__lista { display: grid; gap: 22px; }
.pagina__lista a { font-size: 1.25rem; font-weight: 600; }
.pagina__vazio { margin-bottom: 24px; color: var(--tinta-2); }

/* ---------- telas pequenas ---------- */
@media (max-width: 1020px) {
  .produtos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .produtos__lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .produto { padding: 22px 20px 18px; }
  .hero__acoes .btn { flex: 1 1 auto; }
  .sim { padding: 18px 16px 14px; border-radius: 16px; }
  .sim__faixa { grid-template-columns: 54px minmax(0, 1fr) 60px; gap: 8px; }
  .sim__tipo-cx { min-height: 48px; gap: 6px; padding: 6px 7px; font-size: .75rem; }
  .sim__tipo-cx .ico-tipo { width: 22px; height: 22px; }
}
@media (max-width: 360px) {
  .sim__tipos { gap: 6px; }
}

@media (max-width: 374px) {
  .sim__tipo-cx { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; text-align: center; }
}

/* quem pediu menos movimento no aparelho: sem anel, sem zoom e sem subir */
@media (prefers-reduced-motion: reduce) {
  .sim.is-destaque::after { animation: none; }
  .zap { transform: none; transition: opacity .2s, visibility 0s .2s; }
  .zap.is-visivel { transform: none; transition: opacity .2s; }
  .obra__img, .produto, .obra__info { transition: none; }
  .obra__link:hover .obra__img { transform: none; }
  .produto:hover, .js .produto.is-visivel:hover { transform: none; }
  .js .dif[data-revelar]::before { transform: none; transition: none; }
  .faq__sinal::before, .faq__sinal::after { transition: none; }
}

@media print {
  .topo, .progresso, .zap, .sim__acoes, .mapa, .contato__lado, .etapas__acoes { display: none !important; }
  .etapas.is-animada .etapa__seg-fill { transform: none !important; }
  .js .dif[data-revelar]::before { transform: none !important; }
  .etapas.is-animada .etapa .etapa__marca::before,
  .etapas.is-animada .etapa .etapa__marca::after { background: var(--bronze) !important; }
  .etapas.is-animada .etapa .etapa__num { color: var(--bronze-texto) !important; }
  .js [data-revelar] { opacity: 1 !important; transform: none !important; }
}