/* Dom Blue 3D — impressão 3D sob medida, Recife
   Ideia visual: a página é "impressa" em camadas. Fundo escuro com linhas de camada no topo,
   mesa de impressão clara no catálogo, azul do logo como cor de ação. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --tinta: #0A1A33;        /* azul-noite do fundo do logo */
  --tinta-2: #10284D;
  --azul: #1463FF;         /* azul elétrico da marca */
  --azul-escuro: #0B48C4;
  --ceu: #8EC5FF;          /* brilho do logo */
  --chapa: #E8EDF3;        /* mesa de impressão */
  --branco: #FFFFFF;
  --texto: #1B2A41;
  --texto-suave: #55657C;
  --linha: #CCD6E2;
  --whats: #128C4B;
  --whats-escuro: #0C6E3A;

  --titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --corpo: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --camada: 6px;           /* altura de uma "camada" impressa */
  --raio: 14px;
  --largura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-width: thin;
  scrollbar-color: var(--azul) var(--tinta);
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--tinta); }
html::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 10px; border: 2px solid var(--tinta); }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--chapa);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--titulo); line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
.linha { display: block; }

:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; border-radius: 6px; }

.caixa { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: var(--branco); color: var(--tinta); padding: .7rem 1rem; border-radius: 8px; font-weight: 600;
}
.pular:focus { top: 1rem; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.5rem;
  font-family: var(--corpo); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.botao:active { transform: translateY(1px); }
.botao--pequeno { min-height: 44px; padding: .5rem 1.1rem; font-size: .95rem; }
.botao--largo { width: 100%; }
.botao--whats { background: var(--whats); color: var(--branco); }
.botao--whats:hover { background: var(--whats-escuro); }
.botao--claro { background: var(--branco); color: var(--tinta); }
.botao--claro:hover { background: var(--ceu); }
.botao--contorno { border-color: currentColor; color: var(--branco); }
.botao--contorno:hover { background: var(--branco); color: var(--tinta); border-color: var(--branco); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  background: var(--tinta); color: var(--branco);
  /* saída de reserva: some sozinho mesmo se o JavaScript falhar */
  animation: preloader-sai .5s 4.2s forwards;
}
@keyframes preloader-sai { to { opacity: 0; visibility: hidden; } }
.preloader-marca { position: relative; width: min(230px, 56vw); aspect-ratio: 1; }
.preloader-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.preloader-logo--base { opacity: .14; filter: grayscale(1); }
.preloader-logo--cheio {
  clip-path: inset(100% 0 0 0);
  animation: preloader-enche 2.6s steps(40) forwards;
}
@keyframes preloader-enche { to { clip-path: inset(0 0 0 0); } }
.preloader-bico {
  position: absolute; left: -6%; right: -6%; bottom: 0; height: 2px; background: var(--azul);
  box-shadow: 0 0 14px 2px var(--azul);
  animation: preloader-sobe 2.6s steps(40) forwards;
}
@keyframes preloader-sobe { to { bottom: 100%; } }
.preloader-barra { width: min(260px, 60vw); height: 4px; background: rgba(255, 255, 255, .14); border-radius: 4px; overflow: hidden; }
.preloader-barra span { display: block; height: 100%; width: 100%; background: var(--azul); transform-origin: left; transform: scaleX(0); animation: preloader-barra 2.6s linear forwards; }
@keyframes preloader-barra { to { transform: scaleX(1); } }
.preloader-texto { font-size: .9rem; color: var(--ceu); font-variant-numeric: tabular-nums; }
.preloader.com-js .preloader-logo--cheio,
.preloader.com-js .preloader-bico,
.preloader.com-js .preloader-barra span { animation: none; }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(10, 26, 51, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(142, 197, 255, .16); color: var(--branco);
}
.topo-linha { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.marca-logo { width: 46px; height: 46px; }
.marca-nome { font-family: var(--titulo); font-weight: 800; font-style: italic; font-size: 1.35rem; letter-spacing: -0.02em; white-space: nowrap; }
.marca-nome span { color: var(--ceu); }
.menu { display: flex; gap: 1.6rem; }
.menu a { text-decoration: none; font-weight: 500; padding: .6rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-color: var(--azul); }

/* ---------- Início ---------- */
.inicio {
  position: relative; color: var(--branco);
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--camada) - 1px), rgba(142, 197, 255, .055) calc(var(--camada) - 1px) var(--camada)),
    radial-gradient(120% 90% at 85% 20%, #14366B 0%, var(--tinta) 60%);
  padding: calc(68px + clamp(2.5rem, 6vw, 5rem)) 0 clamp(3rem, 7vw, 6rem);
}
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.inicio-titulo {
  font-size: clamp(2.35rem, 1rem + 4.4vw, 5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
}
.inicio-titulo .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.inicio-titulo .palavra > span { display: inline-block; }
.inicio-sub { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: #D5E4F7; }
.inicio-botoes { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.mesa { position: relative; }
.mesa-foto {
  position: relative; aspect-ratio: 1; border-radius: var(--raio); overflow: hidden;
  background: var(--tinta-2);
  box-shadow: 0 0 0 1px rgba(142, 197, 255, .25), 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.mesa-foto img { width: 100%; height: 100%; object-fit: cover; }
.mesa-bico {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0;
  background: var(--azul); box-shadow: 0 0 18px 4px var(--azul);
}
.mesa-legenda {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(142, 197, 255, .3);
  font-size: .95rem; color: #D5E4F7;
}
.mesa-legenda strong { font-family: var(--titulo); font-size: 1.35rem; color: var(--branco); white-space: nowrap; }

/* ---------- Peças ---------- */
.pecas { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.cabeca { max-width: 44rem; }
.cabeca p { margin-top: .9rem; color: var(--texto-suave); font-size: 1.1rem; }

.filtro { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 1.75rem; }
.filtro-botao {
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: 600 .98rem var(--corpo); color: var(--tinta);
  background: transparent; border: 1.5px solid var(--linha);
  transition: background-color .2s, color .2s, border-color .2s;
}
.filtro-botao:hover { border-color: var(--tinta); }
.filtro-botao[aria-pressed="true"] { background: var(--tinta); color: var(--branco); border-color: var(--tinta); }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.peca {
  display: flex; flex-direction: column; background: var(--branco);
  border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha);
}
.peca[hidden] { display: none; }
.peca-foto { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 1; background: var(--chapa); overflow: hidden; }
.peca-lupa {
  position: absolute; right: .6rem; top: .6rem; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10, 26, 51, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.peca-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.peca:hover .peca-foto img { transform: scale(1.04); }
.peca-corpo { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; }
.peca-corpo h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.peca-detalhe { margin-top: .4rem; color: var(--texto-suave); font-size: .97rem; }
.peca-preco {
  margin-top: auto; padding-top: 1rem; margin-bottom: .8rem;
  font-family: var(--titulo); font-weight: 700; font-size: 1.55rem; color: var(--azul-escuro); line-height: 1.1;
}
.peca-preco small { display: block; font: 500 .85rem var(--corpo); color: var(--texto-suave); }
.peca-preco--consultar { font-size: 1.1rem; font-weight: 600; color: var(--texto-suave); }
.grade-vazia { margin-top: 1rem; color: var(--texto-suave); }
.grade-aviso { margin-top: 1.25rem; font-size: .92rem; color: var(--texto-suave); }

/* ---------- Foto ampliada ---------- */
.ampliada { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 1rem; border: 0; background: rgba(5, 14, 30, .96); color: var(--branco); }
.ampliada[open] { display: grid; place-items: center; }
.ampliada::backdrop { background: rgba(5, 14, 30, .9); }
.ampliada figure { display: grid; justify-items: center; gap: .8rem; max-width: 100%; }
.ampliada img { max-width: 100%; max-height: calc(100dvh - 8rem); width: auto; height: auto; border-radius: 10px; cursor: zoom-out; }
.ampliada figcaption { font: 700 1.15rem var(--titulo); text-align: center; }
.ampliada-fechar {
  position: absolute; right: 1rem; top: 1rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: 600 .95rem var(--corpo); color: var(--tinta); background: var(--branco); border: 0;
}

/* ---------- Sob medida ---------- */
.medida {
  color: var(--branco); padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--camada) - 1px), rgba(142, 197, 255, .055) calc(var(--camada) - 1px) var(--camada)),
    var(--tinta);
}
.medida-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.medida-texto > p { margin-top: 1rem; color: #D5E4F7; font-size: 1.1rem; max-width: 36rem; }
.passos { margin: 2rem 0 2.2rem; display: grid; gap: 1.3rem; }
.passos li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.passo-numero {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font: 800 1.15rem var(--titulo); color: var(--tinta); background: var(--ceu);
}
.passos h3 { font-size: 1.2rem; font-weight: 700; }
.passos p { margin-top: .25rem; color: #C3D5EC; font-size: 1rem; }
.medida-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); box-shadow: 0 0 0 1px rgba(142, 197, 255, .25); }
.medida-foto figcaption { margin-top: .7rem; font-size: .92rem; color: #C3D5EC; }

/* ---------- Dúvidas ---------- */
.duvidas { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.duvidas-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lista-duvidas { border-top: 2px solid var(--tinta); }
.lista-duvidas details { border-bottom: 1px solid var(--linha); }
.lista-duvidas summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font: 700 1.2rem var(--titulo); color: var(--tinta);
}
.lista-duvidas summary::-webkit-details-marker { display: none; }
.lista-duvidas summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--azul), var(--azul)) center / 100% 2.5px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2.5px 100% no-repeat;
  transition: transform .25s;
}
.lista-duvidas details[open] summary::after { transform: rotate(45deg); }
.lista-duvidas details p { padding: 0 2rem 1.3rem 0; color: var(--texto-suave); max-width: 38rem; }

/* ---------- Fecho ---------- */
.fecho { background: var(--azul); color: var(--branco); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.fecho-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.fecho h2 { max-width: 22ch; }
.fecho-botoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.fecho .botao--whats { background: var(--tinta); }
.fecho .botao--whats:hover { background: #050E1E; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: #C3D5EC; padding: 3rem 0 6rem; font-size: .97rem; }
.rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.rodape-logo { width: 96px; height: 96px; margin-bottom: .8rem; }
.rodape-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; }
.rodape-links a { text-decoration: none; padding: .5rem 0; }
.rodape-links a:hover { color: var(--branco); text-decoration: underline; }
.rodape-fim {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(142, 197, 255, .18); font-size: .9rem;
}
.rodape-fim a { color: var(--branco); }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--whats); box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .45);
  transition: transform .25s, opacity .25s, visibility .25s;
}
.flutuante svg { width: 30px; height: 30px; fill: var(--branco); }
.flutuante:hover { transform: scale(1.06); }
.flutuante.some { opacity: 0; visibility: hidden; transform: scale(.8); }

/* ---------- Telas menores ---------- */
@media (max-width: 900px) {
  .inicio-grade, .medida-grade, .duvidas-grade { grid-template-columns: 1fr; }
  .mesa { max-width: 520px; }
  .medida-foto { max-width: 520px; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .topo-linha { min-height: 60px; gap: .75rem; }
  .marca-nome { font-size: 1.2rem; }
  .marca-logo { width: 42px; height: 42px; }
  .inicio { padding-top: calc(60px + 2.2rem); }
  .inicio-botoes .botao { width: 100%; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .peca-corpo { padding: .85rem .8rem .9rem; }
  .peca-corpo h3 { font-size: 1.02rem; }
  .peca-detalhe { font-size: .9rem; }
  .peca-preco { font-size: 1.3rem; }
  .peca-preco--consultar { font-size: 1rem; }
  .peca .botao { min-height: 46px; padding: .5rem .6rem; font-size: .92rem; }
  .fecho-botoes, .fecho-botoes .botao { width: 100%; }
  .filtro { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
  .filtro::-webkit-scrollbar { display: none; }
  .filtro-botao { flex: none; }
}
@media (max-width: 380px) {
  .botao--pequeno { padding: .5rem .8rem; font-size: .88rem; }
  .marca-nome { font-size: 1.05rem; }
  .marca-logo { width: 36px; height: 36px; }
  .marca { gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}