/* =====================================================================
 * J.Monte Premium — site institucional (vitrine). Sem preços e sem
 * carrinho: o objetivo é apresentar a boutique, levar ao showroom e ao
 * consultor, e dar ao cliente cadastrado uma área própria.
 *
 * Tipografia: Cormorant Garamond (títulos) + Jost (texto e rótulos).
 * Paleta quente e neutra, com bronze como único acento.
 * ===================================================================== */

:root {
  --papel: #F6F3EE;      /* fundo principal */
  --pedra: #ECE6DD;      /* blocos de apoio */
  --branco: #FFFDF9;
  --tinta: #1E1C19;      /* texto e fundos escuros */
  --grafite: #3B3732;
  --suave: #6F685F;      /* texto secundário */
  --linha: #DCD4C8;
  --bronze: #7D5E3B;     /* acento (contraste AA sobre o papel) */
  --bronze-claro: #C9A67A; /* acento sobre fundo escuro */
  --escuro: #151412;
  --chapa: #2A2926;      /* chapa da fachada da Premium Black */

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --texto: "Jost", "Helvetica Neue", Arial, sans-serif;

  --larg: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --hdr: 76px;
  --raio: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 300 1.0625rem/1.7 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.wrap { max-width: var(--larg); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
.rotulo {
  display: inline-block;
  font: 400 .74rem/1.4 var(--texto);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 18px;
}
.lead { font-size: 1.15rem; color: var(--grafite); max-width: 34em; }
.muted { color: var(--suave); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  border: 1px solid var(--tinta); border-radius: var(--raio);
  background: var(--tinta); color: var(--branco);
  font: 400 .8rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--grafite); border-color: var(--grafite); }
.btn svg { width: 18px; height: 18px; }
.btn-linha { background: transparent; color: var(--tinta); }
.btn-linha:hover { background: var(--tinta); color: var(--branco); }
.btn-claro { background: var(--branco); color: var(--tinta); border-color: var(--branco); }
.btn-claro:hover { background: transparent; color: var(--branco); }
.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 .8rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta);
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.link-seta:hover { color: var(--bronze); }

/* ---------- Cabeçalho ---------- */
.topo-faixa {
  background: var(--escuro); color: #CFC7BB;
  font-size: .78rem; letter-spacing: .04em;
}
.topo-faixa .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.topo-faixa a { color: #F1EBE2; text-decoration: none; border-bottom: 1px solid rgba(241,235,226,.35); }
.topo-faixa a:hover { border-color: #F1EBE2; }
.topo-faixa .so-largo { display: none; }
@media (max-width: 599px) {
  .topo-faixa .wrap { justify-content: center; }
  .topo-faixa .wrap > span { display: none; }
}

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,243,238,.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.hdr.rolou { border-color: var(--linha); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hdr); }

.marca { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--tinta); line-height: 1; }
.marca-nome { font: 300 1.75rem/1 var(--texto); letter-spacing: .06em; }
.marca-sub { font: 400 .58rem/1 var(--texto); letter-spacing: .42em; text-transform: uppercase; margin-top: 6px; color: var(--suave); padding-left: 2px; }

.nav { display: none; }
.nav a {
  font: 400 .78rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--grafite);
  padding: 10px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--tinta); border-color: var(--tinta); }

.hdr-acoes { display: flex; align-items: center; gap: 6px; }
.icone-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-width: 44px; padding: 0 10px;
  background: none; border: 0; color: var(--tinta); cursor: pointer; text-decoration: none;
  font: 400 .78rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase;
}
.icone-btn svg { width: 22px; height: 22px; stroke-width: 1.4; }
.icone-btn .txt { display: none; }

/* Menu do celular */
.menu-cel {
  position: fixed; inset: 0; z-index: 60;
  background: var(--papel);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 32px;
  transform: translateX(100%); transition: transform .35s ease;
  visibility: hidden;
}
.menu-cel.aberto { transform: none; visibility: visible; }
.menu-cel-topo { display: flex; align-items: center; justify-content: space-between; height: var(--hdr); }
.menu-cel nav { display: flex; flex-direction: column; margin-top: 12px; }
.menu-cel nav a {
  font: 500 2rem/1.2 var(--display); text-decoration: none; color: var(--tinta);
  padding: 14px 0; border-bottom: 1px solid var(--linha);
}
.menu-cel .menu-rodape { margin-top: auto; display: grid; gap: 14px; }

@media (min-width: 980px) {
  .nav { display: flex; gap: 34px; }
  .botao-menu { display: none; }
  .icone-btn .txt { display: inline; }
  .topo-faixa .so-largo { display: inline; }
}

/* ---------- Hero ---------- */
.hero { display: grid; background: var(--papel); }
.hero-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 4.4; max-height: 72vh; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-texto { padding: 44px var(--gutter) 56px; }
.hero-texto h1 { max-width: 11em; }
.hero-texto .lead { margin: 22px 0 32px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 900px) {
  /* Altura da tela menos as faixas do topo; a foto preenche sem ditar a altura. */
  .hero { grid-template-columns: 1fr 1fr; height: clamp(560px, calc(100svh - 150px), 860px); }
  .hero-foto { order: 2; aspect-ratio: auto; max-height: none; }
  .hero-foto img { position: absolute; inset: 0; object-position: 50% 78%; }
  .hero-texto {
    align-self: center;
    padding: 64px clamp(32px, 5vw, 88px) 64px max(var(--gutter), calc((100vw - var(--larg)) / 2 + var(--gutter)));
  }
}

/* Faixa de três compromissos */
.faixa-valores { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--branco); }
.faixa-valores ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--larg); display: grid; }
.faixa-valores li { display: flex; gap: 16px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--linha); }
.faixa-valores li:last-child { border-bottom: 0; }
.faixa-valores svg { width: 26px; height: 26px; flex: none; color: var(--bronze); stroke-width: 1.3; margin-top: 2px; }
.faixa-valores strong { display: block; font-weight: 400; font-size: 1rem; }
.faixa-valores span { font-size: .92rem; color: var(--suave); }
@media (min-width: 900px) {
  .faixa-valores ul { grid-template-columns: repeat(3, 1fr); }
  .faixa-valores li { border-bottom: 0; padding: 30px 28px; border-left: 1px solid var(--linha); }
  .faixa-valores li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Seções ---------- */
.secao { padding: clamp(72px, 10vw, 132px) 0; }
.secao-cab { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 60px); }
.secao-cab p { max-width: 36em; color: var(--grafite); margin: 0; }
@media (min-width: 900px) {
  .secao-cab { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; }
}

/* Segmentos */
.segmentos { display: grid; gap: 28px 20px; grid-template-columns: 1fr; }
.seg { text-decoration: none; color: inherit; display: block; }
.seg-foto { overflow: hidden; aspect-ratio: 4 / 5; background: var(--pedra); }
.seg-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.seg:hover .seg-foto img { transform: scale(1.04); }
.seg-txt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; }
.seg-txt h3 { font-size: 1.55rem; }
.seg-txt span { font-size: .86rem; color: var(--suave); }
.seg p { font-size: .95rem; color: var(--suave); margin: 6px 0 0; max-width: 26em; }
@media (min-width: 600px) { .segmentos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) {
  .segmentos { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
  .segmentos .seg:nth-child(3n+2) { margin-top: 56px; }
}

/* Luz rasante (js/luz.js): um canvas do mesmo tamanho, por cima da foto. */
.seg-foto { position: relative; }
.luz-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transition: opacity .35s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.seg:hover .luz-canvas { transform: scale(1.04); }

/* ---------- Acabamento de movimento (js/movimento.js) ---------- */
/* Títulos linha a linha: cada linha é uma faixa; o texto sobe de dentro dela. */
.linha { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.linha-in { display: inline-block; }
.linhas-espera .linha-in { transform: translateY(112%); }
.linhas-vai .linha-in { transition: transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i, 0) * 110ms); }
/* O título do topo fica escondido até ser quebrado em linhas (aparece sozinho em 1,8 s se o script falhar). */
.com-js .hero-texto h1, .com-js .sim-cab h1 { visibility: hidden; animation: titulo-libera 0s 1.8s forwards; }
html.titulos-prontos .hero-texto h1, html.titulos-prontos .sim-cab h1 { visibility: visible; animation: none; }
@keyframes titulo-libera { to { visibility: visible; } }

/* Fotos com nitidez progressiva */
img.foto-nasce { filter: blur(14px); transform: scale(1.05); opacity: .55; transition: filter 1.2s ease, transform 1.5s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
img.foto-nasce.nitida { filter: none; transform: none; opacity: 1; }
.duo-foto { overflow: hidden; }

/* Rótulo que acompanha o cursor */
.cursor-rotulo {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; padding: 12px;
  display: grid; place-items: center; text-align: center;
  background: rgba(30,28,25,.84); color: #F6F3EE; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 400 .64rem/1.25 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  transform: translate3d(-300px, -300px, 0); opacity: 0; scale: .35;
  transition: opacity .25s ease, scale .4s cubic-bezier(.2,.8,.2,1);
}
.cursor-rotulo.on { opacity: 1; scale: 1; }
.lightbox[open] ~ .cursor-rotulo { opacity: 0; }
.galeria figure, .faixa-simulador .sim-cena { cursor: pointer; }

/* Galeria ampliada */
.lightbox { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: rgba(21,20,18,.97); color: #EDE6DB; }
.lightbox[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; }
.lightbox::backdrop { background: transparent; }
.lb-fig { grid-column: 2; grid-row: 1; margin: 0; display: grid; justify-items: center; gap: 14px; padding-top: 56px; }
.lb-fig img { max-width: 100%; max-height: calc(100dvh - 210px); width: auto; height: auto; object-fit: contain; }
.lb-fig figcaption { display: flex; gap: 18px; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.lb-legenda { font: 500 1.5rem/1.2 var(--display); }
.lb-conta { font-size: .8rem; letter-spacing: .16em; color: #A69D90; }
.lb-seta { grid-row: 1; justify-self: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: none; color: #F6F3EE; font: 300 1.8rem/1 var(--texto); cursor: pointer; }
.lb-seta:hover { background: rgba(255,255,255,.1); }
.lb-ant { grid-column: 1; } .lb-prox { grid-column: 3; }
.lb-fechar { position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border: 0; background: none; color: #F6F3EE; font: 300 2.2rem/1 var(--texto); cursor: pointer; }
.lb-zap { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 18px 0 28px; }
.lb-troca .lb-fig img { animation: lb-entra .55s cubic-bezier(.2,.7,.2,1); }
@keyframes lb-entra { from { opacity: 0; transform: scale(.975); } }
@media (max-width: 700px) {
  .lightbox[open] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lb-seta { position: absolute; bottom: 92px; width: 44px; height: 44px; }
  .lb-ant { left: 16px; } .lb-prox { right: 16px; }
  .lb-fig { padding: 56px 12px 0; }
  .lb-fig img { max-height: calc(100dvh - 260px); }
}

/* Transição entre páginas: a página nova surge pelo símbolo da J.Monte,
 * que cresce do centro; um círculo fecha o que sobra da ponte do símbolo.
 * Só onde o navegador suporta (View Transitions); nos outros, troca normal. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-recua .8s cubic-bezier(.7,0,.2,1) both; }
  ::view-transition-new(root) {
    -webkit-mask-image: url(/img/chapa/furo.svg?v=3), radial-gradient(circle, #000 69%, transparent 70%);
            mask-image: url(/img/chapa/furo.svg?v=3), radial-gradient(circle, #000 69%, transparent 70%);
    -webkit-mask-position: center, center; mask-position: center, center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: vt-simbolo .95s cubic-bezier(.7,0,.2,1) both;
  }
  @keyframes vt-simbolo {
    0%   { -webkit-mask-size: 0 0, 0 0; mask-size: 0 0, 0 0; }
    55%  { -webkit-mask-size: 120vmax 74vmax, 16vmax 16vmax; mask-size: 120vmax 74vmax, 16vmax 16vmax; }
    100% { -webkit-mask-size: 540vmax 335vmax, 320vmax 320vmax; mask-size: 540vmax 335vmax, 320vmax 320vmax; }
  }
  @keyframes vt-recua { to { opacity: .35; transform: scale(.97); } }
}

/* ---------- Simulador de paginação (js/simulador.js) ---------- */
.sim-cab { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 28px; }
.sim-cab .lead { margin-top: 18px; }
.simulador { display: grid; gap: 32px; padding-bottom: clamp(72px, 9vw, 120px); }
@media (min-width: 980px) {
  .simulador { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); align-items: start; gap: 48px; }
  .sim-visual { position: sticky; top: calc(var(--hdr) + 16px); }
}
.sim-vistas { margin-bottom: 12px; }
.sim-legenda { margin: 12px 0 0; font-size: .86rem; color: var(--suave); letter-spacing: .04em; }

/* Cena em perspectiva: "piso infinito" que some no fundo, com luz de janela. */
.sim-cena {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(180deg, #EEE8DF 0%, #E6DED2 50%, #D8CFC1 100%);
  perspective: 1100px; perspective-origin: 50% 0%;
}
.sim-plano {
  position: absolute; left: 50%; bottom: -12%; width: 200%; aspect-ratio: 1;
  transform: translateX(-50%) rotateX(68deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 88%); mask-image: linear-gradient(to top, #000 42%, transparent 88%);
}
.sim-plano canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sim-janela {
  position: absolute; left: 50%; top: 46%; width: 22%; height: 30%; transform: skewX(-24deg);
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(40,30,20,.22) 49.5% 50.5%, transparent 51.5%),
    linear-gradient(0deg, transparent 48.5%, rgba(40,30,20,.22) 49.5% 50.5%, transparent 51.5%),
    rgba(255, 238, 205, .24);
  filter: blur(9px); mix-blend-mode: screen; pointer-events: none;
}
.sim-cena::after { /* sombra suave perto de quem olha */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,16,.18), transparent 35%);
}
.simulador.gerando .sim-cena, .simulador.gerando .sim-planta-box { opacity: .82; transition: opacity .15s; }
.sim-planta-box { background: var(--papel); border: 1px solid var(--linha); }
.sim-planta-box canvas { display: block; max-width: 100%; max-height: calc(100vh - 230px); width: auto; height: auto; margin: 0 auto; }

.sim-controles { display: grid; gap: 22px; }
.sim-controles fieldset { border: 0; margin: 0; padding: 0; }
.sim-controles legend { font: 400 .74rem/1.4 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; padding: 0; }
.sim-controles legend small { letter-spacing: .08em; color: var(--suave); text-transform: none; font-size: .78rem; margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linha); background: var(--branco); color: var(--tinta); cursor: pointer;
  font: 400 .9rem/1 var(--texto); transition: background .2s, border-color .2s, color .2s;
}
.chip:hover:not(:disabled) { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }
.sim-medidas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sim-medidas label { display: grid; gap: 6px; font-size: .84rem; color: var(--suave); }
.sim-medidas label span { display: flex; align-items: center; gap: 6px; color: var(--grafite); }
.sim-medidas input { width: 92px; min-height: 44px; padding: 0 10px; border: 1px solid var(--linha); background: var(--branco); font: 300 1.05rem var(--texto); }
.sim-medidas input:focus { outline: none; border-color: var(--tinta); }
.sim-medidas > span { padding-bottom: 12px; color: var(--suave); }
.sim-conta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.sim-conta div { background: var(--branco); padding: 14px 16px; }
.sim-conta dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.sim-conta dd { margin: 4px 0 0; font: 500 1.5rem/1.1 var(--display); }
.sim-conta .destaque { background: var(--tinta); }
.sim-conta .destaque dt { color: #C9C0B3; }
.sim-conta .destaque dd { color: #fff; }
.sim-nota { font-size: .84rem; color: var(--suave); margin: 0; }

/* Chamada do simulador na página inicial */
.faixa-simulador { background: var(--pedra); }
.faixa-simulador-in { display: grid; gap: 32px; align-items: center; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.faixa-simulador .lead { margin: 18px 0 28px; }
@media (min-width: 900px) { .faixa-simulador-in { grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 88px); } }

/* Ambientes (galeria) */
.ambientes { background: var(--pedra); }
.galeria { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.galeria figure { margin: 0; position: relative; overflow: hidden; background: #ddd5c9; }
.galeria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.galeria figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(20,18,16,.55));
  color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.galeria .larga { grid-column: span 2; }
.galeria .larga img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 16px; }
  .galeria .alta { grid-row: span 2; }
  .galeria .alta img { aspect-ratio: auto; height: 100%; }
  .galeria .larga img { aspect-ratio: 16 / 9.4; }
}

/* Experiência no showroom */
.duo { display: grid; gap: 40px; align-items: center; }
.duo-foto { position: relative; }
.duo-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo-foto .selo {
  position: absolute; right: -1px; bottom: -1px;
  background: var(--papel); padding: 18px 22px;
  font: 500 1.25rem/1.2 var(--display);
}
.duo-txt h2 { margin-bottom: 22px; }
.duo-txt .lead { margin-bottom: 30px; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); }
  .duo.inverte .duo-foto { order: 2; }
}

.lojas { display: grid; gap: 0; margin: 34px 0 32px; border-top: 1px solid var(--linha); }
.loja { padding: 22px 0; border-bottom: 1px solid var(--linha); display: grid; gap: 4px; }
.loja h3 { font-size: 1.45rem; display: flex; align-items: center; gap: 12px; }
.loja h3 .tag {
  font: 400 .62rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase;
  background: var(--tinta); color: var(--branco); padding: 5px 8px;
}
.loja address { font-style: normal; color: var(--grafite); font-size: .98rem; }
.loja .horario { font-size: .9rem; color: var(--suave); }
.loja .acoes { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; }
.loja .acoes a { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--linha); padding-bottom: 3px; }
.loja .acoes a:hover { border-color: var(--tinta); }
.confirmar { font-size: .8rem; color: var(--bronze); }

/* ---------- Chapa perfurada (fachada da Premium Black) ----------
 * Cada furo é o símbolo da J.Monte. Os desenhos ficam em /img/chapa e são
 * gerados por /opt/premium/ferramentas/gerar-chapa.py. A chapa some atrás
 * do texto (máscara em degradê) para não atrapalhar a leitura. */
.chapa { position: relative; isolation: isolate; background: var(--chapa); }
.chapa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/img/chapa/escura.svg?v=3) 0 0 / 120px;
  -webkit-mask-image: var(--chapa-mascara, none); mask-image: var(--chapa-mascara, none);
}
/* Forte de um lado, quase sumindo do lado do texto. */
.chapa-lado { --chapa-mascara: linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.14) 80%); }
@media (min-width: 900px) {
  .chapa-lado { --chapa-mascara: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.14) 78%); }
}
.chapa-suave::before { opacity: .45; }

/* Premium Black (bloco escuro sobre a chapa) */
.black { color: #EDE6DB; }
.black .rotulo { color: var(--bronze-claro); }
.black .lead { color: #CFC6B8; }
.black .duo-foto .selo { background: var(--chapa); color: #EDE6DB; }

/* Abertura com a chapa (primeira visita à página inicial; script em premium.js).
 * Enquanto o script não chega, html.abertura cobre a tela com a chapa lisa.
 * Rede de segurança: se o script falhar, a cobertura some sozinha em 3,5 s. */
html.abertura body::before {
  content: ""; position: fixed; inset: 0; z-index: 300; background: var(--chapa);
  animation: abertura-libera .3s ease 3.5s forwards;
}
@keyframes abertura-libera { to { opacity: 0; visibility: hidden; } }
.abertura-chapa { position: fixed; inset: 0; z-index: 300; cursor: pointer; }
.abertura-chapa svg { position: absolute; inset: 0; display: block; }
.abertura-marca {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #EDE6DB; opacity: 0; pointer-events: none; line-height: 1;
}
.abertura-marca span { font: 300 clamp(3rem, 9vw, 5.6rem)/1 var(--texto); letter-spacing: .08em; }
.abertura-marca em { font-style: normal; font: 400 clamp(.7rem, 1.4vw, .9rem)/1 var(--texto); letter-spacing: .6em; text-transform: uppercase; color: var(--bronze-claro); margin-top: 18px; padding-left: .6em; }

/* Faixa "janela": a foto aparece pelos furos e a chapa abre conforme a rolagem
 * (o script fica em premium.js). */
.janela { position: relative; height: clamp(420px, 72vh, 640px); overflow: hidden; background: var(--chapa); }
.janela > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.janela-chapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.janela-texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 90px 0 40px; color: #EDE6DB;
  background: linear-gradient(transparent, rgba(20,19,17,.82));
}
.janela-texto .rotulo { color: var(--bronze-claro); }
.janela-texto h2 { max-width: 14em; }

/* Degradê de perfuração: passagem do claro do site para a chapa do rodapé. */
/* Mesma grade da chapa: no celular os dois encolhem juntos (180 px / 90 px). */
.degrade-chapa { height: 180px; background: url(/img/chapa/degrade.svg?v=4) 0 0 / auto 100% repeat-x; }
.rodape.chapa::before { background-size: 90px; }
@media (min-width: 900px) {
  .degrade-chapa { height: 240px; }
  .rodape.chapa::before { background-size: 120px; }
}

/* O símbolo como marcador e divisor */
.simbolo-i { width: 22px; height: 14px; flex: none; margin-top: 7px; background: url(/img/chapa/furo-bronze.svg?v=3) center / contain no-repeat; }
.simbolo-i.claro { background-image: url(/img/chapa/furo-claro.svg?v=3); }
.divisor-simbolo { display: flex; align-items: center; gap: 16px; max-width: 280px; margin: 0 auto 22px; color: var(--linha); }
.divisor-simbolo::before, .divisor-simbolo::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.divisor-simbolo .simbolo-i { margin: 0; }

/* Marcas */
.marcas { padding: 64px 0; border-top: 1px solid var(--linha); }
.marcas ul {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
}
.marcas li { font: 400 1.05rem/1 var(--texto); letter-spacing: .28em; text-transform: uppercase; color: var(--grafite); }
.marcas .rotulo { display: block; text-align: center; }

/* Arquitetos (o marcador é o símbolo; os itens vêm do painel como texto puro) */
.lista-check { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.lista-check li { display: flex; gap: 14px; align-items: flex-start; color: var(--grafite); }
.lista-check li::before {
  content: ""; width: 22px; height: 14px; flex: none; margin-top: 7px;
  background: url(/img/chapa/furo-bronze.svg?v=3) center / contain no-repeat;
}

/* Campanha (ligada pelo painel quando houver campanha) */
.campanha { display: grid; background: var(--branco); border-top: 3px solid var(--bronze); border-bottom: 1px solid var(--linha); }
.campanha-foto { overflow: hidden; aspect-ratio: 16 / 10; }
.campanha-foto img { width: 100%; height: 100%; object-fit: cover; }
.campanha-txt { padding: 40px var(--gutter) 48px; align-self: center; }
.campanha-txt h2 { margin-bottom: 16px; }
.campanha-txt .lead { margin-bottom: 28px; }
@media (min-width: 900px) {
  .campanha { grid-template-columns: 1.15fr 1fr; }
  .campanha-foto { aspect-ratio: auto; min-height: 420px; }
  .campanha-txt { padding: 64px clamp(32px, 5vw, 88px); }
}

/* Lançamentos: trilho com rolagem lateral e encaixe por card */
.lanc-trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--linha) transparent;
}
.lanc { scroll-snap-align: start; background: var(--branco); border: 1px solid var(--linha); display: grid; grid-template-rows: auto 1fr; }
.lanc-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--pedra); }
.lanc-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.lanc:hover .lanc-foto img { transform: scale(1.04); }
.lanc-txt { padding: 18px 18px 20px; display: grid; gap: 6px; align-content: start; }
.lanc-txt .rotulo { margin: 0; }
.lanc-txt h3 { font-size: 1.4rem; }
.lanc-txt p { margin: 0; font-size: .92rem; color: var(--suave); }
.lanc-txt .link-seta { margin-top: 10px; justify-self: start; }

/* Chamada da área do cliente */
.cliente-cta { position: relative; color: #fff; overflow: hidden; }
.cliente-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cliente-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,16,14,.86), rgba(18,16,14,.55) 60%, rgba(18,16,14,.25)); z-index: 1; }
.cliente-cta .wrap { position: relative; z-index: 2; padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px); }
.cliente-cta .rotulo { color: var(--bronze-claro); }
.cliente-cta h2 { max-width: 13em; }
.cliente-cta .lead { color: #E5DED3; margin: 20px 0 32px; }
.cliente-cta .hero-ctas .btn-linha { color: #fff; border-color: rgba(255,255,255,.7); }
.cliente-cta .hero-ctas .btn-linha:hover { background: #fff; color: var(--tinta); }

/* Instagram */
.insta { text-align: center; padding: 72px 0; }
.insta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 22px; }
.insta-links a { text-decoration: none; font-size: 1rem; color: var(--grafite); border-bottom: 1px solid var(--linha); padding-bottom: 4px; }
.insta-links a:hover { color: var(--tinta); border-color: var(--tinta); }

/* ---------- Rodapé ---------- */
.rodape { color: #BEB5A8; font-size: .94rem; }
.rodape a { color: #EDE6DB; text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-in { display: grid; gap: 40px; padding: 72px var(--gutter) 48px; max-width: var(--larg); margin: 0 auto; }
.rodape .marca { color: #EDE6DB; }
.rodape .marca-sub { color: #9C9387; }
.rodape h4 { font: 400 .72rem/1 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-claro); margin: 0 0 16px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape-varejo {
  border: 1px solid rgba(255,255,255,.14); background: rgba(42,41,38,.85);
  padding: 22px; display: grid; gap: 10px; align-content: start;
}
.rodape-varejo p { margin: 0; }
.rodape-base { border-top: 1px solid rgba(255,255,255,.1); }
.rodape-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; padding-bottom: 28px; font-size: .8rem; color: #8E867B; }
@media (min-width: 900px) {
  .rodape-in { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
}

/* WhatsApp flutuante */
.zap {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--tinta); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.22); /* aparece também sobre fundo escuro */
  text-decoration: none;
}
.zap svg { width: 26px; height: 26px; }
.zap:hover { background: var(--grafite); }

/* Revelar ao rolar (só com JS ligado e sem preferência por menos movimento) */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
  .js .revela.visivel { opacity: 1; transform: none; }
}

/* =====================================================================
 * Entrar / cadastro
 * ===================================================================== */
.acesso { display: grid; min-height: calc(100vh - var(--hdr) - 36px); }
.acesso-foto { position: relative; display: none; --chapa-mascara: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,.12) 85%); }
.acesso-foto .acesso-beneficios {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 48px; color: #fff;
}
.acesso-beneficios h2 { font-size: 2.2rem; margin-bottom: 18px; }
.acesso-beneficios ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: #EDE6DB; }
.acesso-beneficios li { display: flex; gap: 12px; align-items: flex-start; }
.acesso-form { padding: 48px var(--gutter) 72px; display: flex; flex-direction: column; justify-content: center; }
.acesso-form > div { width: 100%; max-width: 440px; margin: 0 auto; }
.abas { display: flex; border-bottom: 1px solid var(--linha); margin: 28px 0 30px; }
.abas button {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 14px 0; cursor: pointer; color: var(--suave);
  font: 400 .8rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
}
.abas button[aria-selected="true"] { color: var(--tinta); border-color: var(--tinta); }
.campo { display: grid; gap: 8px; margin-bottom: 18px; }
.campo label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite); }
.campo input, .campo select {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco);
  font: 300 1rem var(--texto); color: var(--tinta);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--tinta); }
.opcoes { display: flex; gap: 10px; margin-bottom: 18px; }
.opcoes label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border: 1px solid var(--linha); cursor: pointer; font-size: .92rem; background: var(--branco);
}
.opcoes input { accent-color: var(--tinta); }
.opcoes label:has(input:checked) { border-color: var(--tinta); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--grafite); margin-bottom: 22px; }
.check input { margin-top: 5px; accent-color: var(--tinta); }
.form-rodape { font-size: .88rem; color: var(--suave); margin-top: 18px; text-align: center; }
.btn-bloco { width: 100%; }
@media (min-width: 900px) {
  .acesso { grid-template-columns: 1.05fr 1fr; }
  .acesso-foto { display: block; }
}

/* =====================================================================
 * Área do cliente
 * ===================================================================== */
.conta-topo { padding: 56px 0 28px; border-bottom: 1px solid var(--linha); }
.conta-topo h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.conta-topo p { color: var(--suave); margin: 10px 0 0; }
.conta-abas { display: flex; gap: 28px; overflow-x: auto; margin-top: 30px; scrollbar-width: none; }
.conta-abas a {
  white-space: nowrap; text-decoration: none; padding: 12px 0; color: var(--suave);
  font: 400 .8rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.conta-abas a[aria-current="true"] { color: var(--tinta); border-color: var(--tinta); }
.conta-corpo { padding-top: 40px; padding-bottom: 96px; display: grid; gap: 56px; }
.bloco-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.bloco-titulo h2 { font-size: 2rem; }

.entrega { background: var(--branco); border: 1px solid var(--linha); padding: clamp(20px, 3vw, 32px); display: grid; gap: 22px; }
.entrega + .entrega { margin-top: 18px; }
.entrega-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.entrega-cab h3 { font-size: 1.5rem; }
.entrega-cab .meta { font-size: .9rem; color: var(--suave); }
.status {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font: 400 .72rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 12px; background: var(--pedra);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.status.ok::before { background: #4E7A52; }

.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.linha-tempo li { position: relative; padding-top: 22px; font-size: .82rem; color: var(--suave); padding-right: 8px; }
.linha-tempo li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--linha); }
.linha-tempo li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--papel); border: 2px solid var(--linha); }
.linha-tempo li.feito { color: var(--tinta); }
.linha-tempo li.feito::before { background: var(--tinta); }
.linha-tempo li.feito::after { background: var(--tinta); border-color: var(--tinta); }
.linha-tempo li.agora::before { background: linear-gradient(90deg, var(--tinta) 50%, var(--linha) 50%); }
.linha-tempo li.agora::after { background: var(--bronze); border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(125,94,59,.18); }
.linha-tempo strong { display: block; font-weight: 400; }

.entrega-info { display: grid; gap: 16px; }
.entrega-info dl { margin: 0; display: grid; gap: 14px; }
.entrega-info dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.entrega-info dd { margin: 2px 0 0; }
.itens { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.itens li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .95rem; }
.itens li span:last-child { color: var(--suave); white-space: nowrap; }
.entrega-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.entrega-acoes .btn { min-height: 44px; padding: 0 18px; font-size: .74rem; }
@media (min-width: 900px) {
  .entrega-info { grid-template-columns: 1fr 1.4fr; gap: 40px; }
  .entrega-info dl { grid-template-columns: 1fr 1fr; }
}

.ofertas { display: grid; gap: 20px; }
.oferta { background: var(--branco); border: 1px solid var(--linha); display: grid; }
.oferta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.oferta-txt { padding: 20px 22px 24px; display: grid; gap: 6px; }
.oferta-txt .rotulo { margin: 0; }
.oferta-txt h3 { font-size: 1.4rem; }
.oferta-txt p { margin: 0; color: var(--suave); font-size: .92rem; }
.preco-exclusivo { font: 400 1.05rem var(--texto); margin-top: 8px; }
.preco-exclusivo small { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
@media (min-width: 700px) { .ofertas { grid-template-columns: repeat(3, 1fr); } }

.prefs { background: var(--branco); border: 1px solid var(--linha); padding: clamp(20px, 3vw, 32px); display: grid; gap: 4px; }
.pref { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.pref:last-child { border-bottom: 0; }
.pref small { display: block; color: var(--suave); font-size: .86rem; }
.chave { position: relative; width: 46px; height: 26px; flex: none; }
.chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chave span { position: absolute; inset: 0; border-radius: 13px; background: var(--linha); transition: background .2s; pointer-events: none; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.chave input:checked + span { background: var(--tinta); }
.chave input:checked + span::after { transform: translateX(20px); }
.chave input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* =====================================================================
 * Boutiques da J.Monte dentro do site: Premium (página inicial),
 * Premium Black (/black) e Premium Light (/light).
 * A estrutura é a mesma; cada página troca a paleta pelas variáveis:
 *   Premium = areia e bronze · Black = preto e aço · Light = noite e luz quente
 * ===================================================================== */
body[data-tema="black"] {
  --papel: #121212; --pedra: #1A1A19; --branco: #1E1E1D;
  --tinta: #ECEAE6; --grafite: #C8C5BF; --suave: #8E8A84; --linha: rgba(236,234,230,.13);
  --bronze: #A9B1B8; --bronze-claro: #C9D0D6;
  --chapa: #1D1E1F;
}
body[data-tema="light"] {
  --papel: #14110D; --pedra: #1B1712; --branco: #1F1A14;
  --tinta: #F3EADB; --grafite: #D9CDB9; --suave: #A0927D; --linha: rgba(243,234,219,.13);
  --bronze: #E2B464; --bronze-claro: #F0CB86;
  --chapa: #1C1813;
}
body[data-tema] { color-scheme: dark; }
body[data-tema="black"] .hdr { background: rgba(18,18,18,.86); }
body[data-tema="light"] .hdr { background: rgba(20,17,13,.86); }
body[data-tema] .degrade-chapa { display: none; }
body[data-tema] .rodape { border-top: 1px solid var(--linha); }
body[data-tema] .zap { background: var(--tinta); color: var(--papel); }
body[data-tema] .zap:hover { background: var(--grafite); }
body[data-tema] .btn:hover { background: var(--grafite); border-color: var(--grafite); }
body[data-tema] .loja h3 .tag { background: var(--tinta); color: var(--papel); }
body[data-tema] .loja .acoes a:hover { border-color: var(--tinta); }
body[data-tema] .muted a { color: var(--tinta); }
body[data-tema="black"] .chapa::before { background-image: url(/img/chapa/escura-aco.svg?v=1); }

/* Faixa do topo: as três boutiques */
.topo-boutiques a { border-bottom-color: transparent; color: #CFC7BB; }
.topo-boutiques a:hover { color: #F1EBE2; }
.topo-boutiques a[aria-current] { color: #F1EBE2; border-bottom-color: rgba(241,235,226,.6); }
.topo-boutiques i { font-style: normal; margin: 0 .55em; opacity: .45; }
@media (max-width: 599px) {
  .topo-faixa .wrap { justify-content: space-between; }
  .topo-faixa .wrap > span.topo-boutiques { display: inline; }
}

/* Logos das marcas (desenho oficial como máscara: pega a cor do texto) */
.logo-marca {
  display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.logo-eliane { --logo: url(/img/marcas/eliane.svg?v=1); aspect-ratio: 582.6 / 156; height: 30px; }
.logo-decortiles { --logo: url(/img/marcas/decortiles.svg?v=1); aspect-ratio: 1864 / 275; height: 21px; }
.logo-mohawk { --logo: url(/img/marcas/mohawk.svg?v=1); aspect-ratio: 167.4 / 71.09; height: 36px; }

/* Título das boutiques: "Premium" + nome em itálico */
.b-titulo { font-size: clamp(3.4rem, 8.6vw, 7.2rem); line-height: .94; letter-spacing: -.01em; margin: 4px 0 26px; }
.b-titulo em { display: block; font-style: italic; color: var(--bronze-claro); }

/* ---------- Premium Black ---------- */
.b-capa { color: var(--tinta); }
.chapa-direita { --chapa-mascara: linear-gradient(0deg, #000 0%, #000 38%, rgba(0,0,0,.12) 78%); }
@media (min-width: 900px) {
  .chapa-direita { --chapa-mascara: linear-gradient(270deg, #000 0%, #000 36%, rgba(0,0,0,.1) 72%); }
}
.b-capa-in { display: grid; gap: 40px; align-items: center; padding-top: clamp(44px, 7vw, 90px); padding-bottom: clamp(56px, 8vw, 100px); }
.b-capa .lead { color: var(--grafite); margin-bottom: 30px; }
.b-capa-foto { position: relative; }
.b-capa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .b-capa-in { grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 6vw, 96px); min-height: min(calc(100svh - 150px), 860px); }
  .b-capa-foto img { aspect-ratio: auto; height: min(76svh, 740px); }
}
.b-logos {
  list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px;
  margin: 0 0 32px; padding: 20px 0; color: var(--tinta);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.b-logos li { display: flex; align-items: center; }
.b-logos li + li { border-left: 1px solid var(--linha); padding-left: 28px; }

.b-duas { display: grid; gap: 28px; }
@media (min-width: 900px) { .b-duas { grid-template-columns: 1fr 1fr; gap: 32px; } }
.b-marca { border: 1px solid var(--linha); background: var(--pedra); display: grid; grid-template-rows: auto 1fr; }
.b-marca-foto { margin: 0; position: relative; overflow: hidden; aspect-ratio: 16 / 11; }
.b-marca-foto img { width: 100%; height: 100%; object-fit: cover; }
.b-marca-txt { padding: 28px 28px 32px; display: grid; gap: 18px; justify-items: start; align-content: start; }
.b-marca-txt .logo-marca { color: var(--tinta); }
.b-marca-txt p { margin: 0; color: var(--grafite); }
.b-grupo {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin: 52px 0 0;
  color: var(--suave); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
}
.b-grupo .logo-marca { color: var(--grafite); }

/* Cartão da Premium Light na página da Black: a chapa acesa em miniatura */
.b-light {
  position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: 400px;
  text-decoration: none; color: #F3EADB; background: #14110D; border: 1px solid var(--linha);
}
.b-light-chapa { position: absolute; inset: 0; z-index: -1; background: url(/img/chapa/escura.svg?v=3) 0 0 / 90px; }
.b-light-chapa span {
  position: absolute; inset: 0;
  -webkit-mask: url(/img/chapa/furos-mascara.svg?v=1) 0 0 / 90px; mask: url(/img/chapa/furos-mascara.svg?v=1) 0 0 / 90px;
}
.b-light-chapa span::before {
  content: ""; position: absolute; width: 140%; height: 140%; left: -20%; top: -45%;
  background: radial-gradient(circle at 50% 50%, #FFF0CF 0, #FFD083 9%, #EDA545 20%, rgba(160,92,30,.45) 32%, transparent 48%);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .b-light-chapa span::before { animation: b-luz-passeia 9s ease-in-out infinite alternate; }
}
@keyframes b-luz-passeia { from { transform: translate(-12%, 0); } to { transform: translate(18%, 14%); } }
.b-light:hover .b-light-chapa span::before { animation-play-state: paused; transform: scale(1.25); }
.b-light-txt { align-self: end; display: grid; gap: 8px; padding: 70px 28px 28px; background: linear-gradient(transparent, rgba(12,10,8,.9) 42%); }
.b-light-txt .rotulo { color: #F0CB86; margin: 0; }
.b-light-txt strong { font: 500 2.3rem/1.05 var(--display); }
.b-light-txt > span:not(.rotulo):not(.link-seta) { color: #D9CDB9; font-size: .95rem; max-width: 26em; }
.b-light-txt .link-seta { color: #F3EADB; justify-self: start; margin-top: 8px; }

.b-visita .lojas { margin-top: 26px; }
.b-visita .loja .acoes { row-gap: 10px; }
body[data-tema="black"] .lista-check li::before { background-image: url(/img/chapa/furo-claro.svg?v=3); opacity: .75; }

/* ---------- Premium Light ---------- */
.l-capa {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: min(calc(100svh - 112px), 900px);
  background: #0E0C09; color: var(--tinta); touch-action: pan-y;
}
.l-capa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,12,9,.3), rgba(14,12,9,.74) 78%);
}
@media (min-width: 900px) {
  .l-capa::before { background: linear-gradient(90deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.78) 36%, rgba(14,12,9,0) 66%); }
}
.l-chapa { position: absolute; inset: 0; z-index: -2; background: url(/img/chapa/escura.svg?v=3) 0 0 / 90px; }
.l-chapa::after { /* a luz que vaza também esquenta a própria chapa em volta */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--lx, 68%) var(--ly, 42%), rgba(255,190,110,.13), transparent 34%);
}
.l-brilho { position: absolute; inset: 0; filter: drop-shadow(0 0 4px rgba(255,186,96,.6)); }
.l-luz {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--lx, 68%) var(--ly, 42%), #FFF3D8 0, #FFD893 5%, #F2AC4C 13%, rgba(184,108,36,.6) 22%, rgba(110,60,20,.22) 34%, transparent 48%);
  -webkit-mask: url(/img/chapa/furos-mascara.svg?v=1) 0 0 / 90px; mask: url(/img/chapa/furos-mascara.svg?v=1) 0 0 / 90px;
}
@media (min-width: 900px) {
  .l-chapa { background-size: 120px; }
  .l-luz { -webkit-mask-size: 120px; mask-size: 120px; }
  .l-brilho { filter: drop-shadow(0 0 5px rgba(255,186,96,.65)) drop-shadow(0 0 16px rgba(255,170,70,.3)); }
}
.l-capa-txt { position: relative; width: 100%; padding-top: 64px; padding-bottom: 72px; }
.l-capa-txt .lead { color: var(--grafite); margin-bottom: 32px; }
.l-capa-txt .hero-ctas { margin-bottom: 30px; }
.l-dica { margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.l-dica span::before { content: ""; display: inline-block; width: 26px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; }
@media (hover: hover) and (pointer: fine) { .l-dica .com-dedo { display: none; } }
@media not ((hover: hover) and (pointer: fine)) { .l-dica .com-mouse { display: none; } }
@media (prefers-reduced-motion: reduce) { .l-dica { display: none; } }

.l-cena { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0B0907; touch-action: pan-y; }
.l-cena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-cena-apagada { filter: brightness(.16) saturate(.55) contrast(1.1); }
.l-cena-acesa {
  -webkit-mask-image: radial-gradient(circle at var(--cx, 62%) var(--cy, 38%), #000 0, #000 calc(var(--raio, 0px) * .32), rgba(0,0,0,.55) calc(var(--raio, 0px) * .66), transparent var(--raio, 0px));
  mask-image: radial-gradient(circle at var(--cx, 62%) var(--cy, 38%), #000 0, #000 calc(var(--raio, 0px) * .32), rgba(0,0,0,.55) calc(var(--raio, 0px) * .66), transparent var(--raio, 0px));
}
.l-acender .l-interruptor { margin-top: 6px; }
.l-acender .l-interruptor[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

.lista-luz li::before { background-image: url(/img/chapa/furo-claro.svg?v=3); filter: drop-shadow(0 0 4px rgba(255,186,96,.9)); }
@media (min-width: 600px) { .lista-luz { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

.l-projeto {
  text-align: center; padding: clamp(80px, 11vw, 140px) 0;
  background: radial-gradient(ellipse at 50% 125%, rgba(226,180,100,.2), transparent 62%), var(--pedra);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.l-projeto h2 { max-width: 15em; margin: 0 auto; }
.l-projeto .lead { margin: 22px auto 34px; }
.l-projeto .hero-ctas { justify-content: center; }
.l-loja { max-width: 640px; margin: 0 auto; }
.l-loja .rotulo { margin-bottom: 4px; }

/* ---------- Página inicial: as três boutiques ---------- */
.portas { display: grid; gap: 14px; }
.porta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px;
  text-decoration: none; color: #F3EEE6; background: #1A1917;
}
.porta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.porta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(16,15,13,.05) 30%, rgba(16,15,13,.86) 100%); }
.porta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 85%); mask-image: linear-gradient(transparent, #000 85%);
}
.porta-premium::after { background: url(/img/chapa/clara.svg?v=3) 0 100% / 90px; opacity: .28; }
.porta-black > img { filter: grayscale(.55) contrast(1.06) brightness(.9); }
.porta-black::after { background: url(/img/chapa/escura-aco.svg?v=1) 0 100% / 90px; opacity: .85; }
.porta-light::after {
  background: radial-gradient(ellipse at 50% 100%, #FFE2A6 0, #EFA445 32%, rgba(150,86,28,.5) 55%, transparent 78%);
  -webkit-mask-image: url(/img/chapa/furos-mascara.svg?v=1), linear-gradient(transparent, #000 85%);
  -webkit-mask-size: 90px, 100% 100%; -webkit-mask-position: 0 100%, 0 0; -webkit-mask-composite: source-in;
  mask-image: url(/img/chapa/furos-mascara.svg?v=1), linear-gradient(transparent, #000 85%);
  mask-size: 90px, 100% 100%; mask-position: 0 100%, 0 0; mask-composite: intersect;
}
.porta-txt { padding: 26px 26px 28px; display: grid; gap: 8px; }
.porta-txt .rotulo { color: var(--bronze-claro); margin: 0; }
.porta-txt strong { font: 500 clamp(2.1rem, 3vw, 2.7rem)/1 var(--display); }
.porta-txt .desc { font-size: .95rem; color: #DDD5C9; max-width: 25em; }
.porta-txt .link-seta { color: #F3EEE6; justify-self: start; margin-top: 10px; }
.porta:hover > img { transform: scale(1.04); }
.porta-black:hover > img { filter: none; }
@media (min-width: 900px) {
  .portas { display: flex; height: min(76vh, 660px); gap: 12px; }
  .porta { flex: 1 1 0; min-height: 0; transition: flex-grow .9s cubic-bezier(.7,0,.2,1); }
  .portas:hover .porta { flex-grow: .78; }
  .portas .porta:hover, .portas .porta:focus-visible { flex-grow: 1.6; }
}

/* Onde encontrar cada linha (cards de produto) */
.seg-onde {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font: 400 .66rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
}
.seg-onde::before { content: ""; width: 16px; height: 10px; background: url(/img/chapa/furo-bronze.svg?v=3) center / contain no-repeat; }
.loja .junto { font-size: .9rem; color: var(--grafite); }
.loja .junto a { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .b-titulo { animation: b-sobe 1s .15s cubic-bezier(.2,.7,.2,1) both; }
  .b-titulo em { animation: b-revela 1.3s .5s cubic-bezier(.7,0,.2,1) both; }
}
@keyframes b-sobe { from { opacity: 0; transform: translateY(24px); } }
@keyframes b-revela { from { clip-path: inset(-12% 100% -24% -4%); } to { clip-path: inset(-12% -6% -24% -4%); } }

/* ---------- Coleções (página da Black e destaque da Galleria na home) ---------- */
.logo-biancogres { --logo: url(/img/marcas/biancogres.svg?v=1); aspect-ratio: 1954.7 / 399; height: 26px; }

/* Séries exclusivas: trilho com rolagem lateral, alinhado à grade do site */
.b-trilho {
  --pad-trilho: max(var(--gutter), calc((100vw - var(--larg)) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 300px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad-trilho);
  padding: 4px var(--pad-trilho) 16px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.b-trilho::-webkit-scrollbar { display: none; }
.b-trilho:focus-visible { outline-offset: -2px; }
.b-serie { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--pedra); border: 1px solid var(--linha); }
.b-serie figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.b-serie figure::after {
  content: "Exclusivo Lojas Black"; position: absolute; left: 12px; top: 12px;
  font: 400 .58rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase;
  background: rgba(18,18,18,.82); color: #ECEAE6; padding: 7px 9px;
}
.b-serie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.b-serie:hover img { transform: scale(1.04); }
.b-serie-txt { padding: 18px 20px 22px; display: grid; gap: 6px; align-content: start; }
.b-serie-marca { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); }
.b-serie h3 { font-size: 1.75rem; }
.b-serie p { margin: 0; font-size: .9rem; color: var(--grafite); }
.b-trilho-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.b-seta { width: 46px; height: 46px; border: 1px solid var(--linha); background: transparent; color: var(--tinta); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color .2s, opacity .2s; }
.b-seta:hover:not(:disabled) { border-color: var(--tinta); }
.b-seta:disabled { opacity: .3; cursor: default; }

/* Abas de marca */
.abas.abas-marca { margin: 0 0 30px; }
.abas.abas-marca .aba { flex: none; padding: 0 26px; }
.aba {
  display: flex; align-items: center; min-height: 58px; padding: 0 26px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--suave); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.aba:hover { color: var(--grafite); }
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.aba .logo-eliane { height: 25px; }
.aba .logo-decortiles { height: 17px; }
.painel-lead { font: 500 clamp(1.3rem, 2.2vw, 1.6rem)/1.3 var(--display); max-width: 32em; color: var(--grafite); margin-bottom: 32px; }
.col-grade { display: grid; gap: 28px 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .col-grade { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; } }
.col-card figure { margin: 0 0 14px; aspect-ratio: 4 / 5; overflow: hidden; }
.col-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.col-card:hover img { transform: scale(1.04); }
.col-card h3 { font-size: 1.55rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.col-card h3 small { font: 400 .56rem/1 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--linha); padding: 5px 7px; }
.col-card p { margin: 6px 0 0; font-size: .9rem; color: var(--grafite); }
@media (max-width: 599px) { .col-card h3 { font-size: 1.3rem; } .col-card p { font-size: .84rem; } }
.col-faixa { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-top: 52px; }
.col-faixa > div { background: var(--papel); padding: 24px 24px 26px; display: grid; gap: 8px; align-content: start; }
.col-faixa strong { font: 500 1.45rem/1.1 var(--display); }
.col-faixa span { font-size: .92rem; color: var(--grafite); }
@media (min-width: 900px) { .col-faixa { grid-template-columns: repeat(3, 1fr); } }
.col-familias { display: grid; gap: 22px; }
@media (min-width: 900px) { .col-familias { grid-template-columns: 1.15fr 1fr 1fr; align-items: start; } }
.col-familia { border: 1px solid var(--linha); background: var(--pedra); padding-bottom: 8px; }
.col-amostras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: #E6E1D9; margin-bottom: 22px; }
.col-familia:nth-child(2) .col-amostras { grid-template-columns: repeat(3, 1fr); }
.col-amostras img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.col-familia h3 { font-size: 1.45rem; margin: 0 22px 8px; }
.col-familia p { margin: 0 22px 18px; font-size: .92rem; color: var(--grafite); }
.col-familia-txt { padding-top: 24px; }
.col-catalogos { margin: 44px 0 0; font-size: .86rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; }
.col-catalogos a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linha); padding-bottom: 2px; }
.col-catalogos a::after { content: " ↗"; }
.col-catalogos a:hover { border-color: var(--tinta); }
.col-cta { margin-top: 28px; }

/* Destaque da Galleria Biancogres (página inicial) */
.galleria { background: var(--branco); border-top: 1px solid var(--linha); }
.galleria .secao-cab .logo-marca { color: var(--tinta); display: block; margin: 4px 0 18px; }
.gal-grupos { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .gal-grupos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .gal-grupos .gal-grupo:nth-child(2) { margin-top: 56px; }
}
.gal-grupo { margin: 0; }
.gal-foto { overflow: hidden; aspect-ratio: 4 / 5; background: var(--pedra); }
.gal-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gal-grupo:hover .gal-foto img { transform: scale(1.04); }
.gal-grupo figcaption { padding-top: 16px; display: grid; gap: 4px; }
.gal-grupo strong { font: 500 1.6rem/1.1 var(--display); }
.gal-grupo figcaption span { font-size: .95rem; color: var(--suave); max-width: 26em; }
.galleria .hero-ctas { margin-top: 48px; }

/* Avisos do login e do cadastro */
.acesso-aviso { margin: 18px 0 0; padding: 12px 14px; font-size: .9rem; border: 1px solid var(--linha); background: var(--branco); }
.acesso-aviso.erro { border-color: #C9A39A; background: #FBF1EE; color: #7A3326; }
.acesso-aviso.ok { border-color: #A9C4AB; background: #F1F7F1; color: #2F5A33; }
.acesso-aviso.info { color: var(--grafite); }

/* ---------- Moodboard (js/moodboard.js e /moodboard) ---------- */
.mood-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255,253,249,.92); color: #1E1C19;
  box-shadow: 0 4px 14px rgba(0,0,0,.16); transition: transform .2s, background .2s, color .2s;
}
.mood-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mood-btn:hover { transform: scale(1.08); }
.mood-btn.on { background: #1E1C19; color: #F0CB86; }
.mood-btn.on svg { fill: currentColor; }
@media (prefers-reduced-motion: no-preference) { .mood-btn.on svg { animation: mood-bate .45s ease; } }
@keyframes mood-bate { 40% { transform: scale(1.3); } }
.b-serie figure::after { z-index: 2; }
.galeria figure .mood-btn { top: 8px; right: 8px; width: 36px; height: 36px; }
.mood-fab {
  position: fixed; left: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 16px; border-radius: 26px;
  background: var(--tinta); color: var(--branco); text-decoration: none;
  font: 400 .74rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.22);
}
.mood-fab svg { width: 18px; height: 18px; fill: currentColor; color: #F0CB86; }
.mood-fab b { font-weight: 400; background: rgba(255,255,255,.16); border-radius: 10px; padding: 3px 7px; letter-spacing: 0; }
.mood-fab[hidden] { display: none; }
body[data-tema] .mood-fab { background: var(--tinta); color: var(--papel); }
@media (max-width: 599px) { .mood-fab span { display: none; } .mood-fab { padding: 0 14px; } }
.mood-toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #1E1C19; color: #F3EEE6; padding: 12px 18px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: opacity .3s, transform .3s; max-width: calc(100vw - 32px);
}
.mood-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mood-toast a { color: #F0CB86; margin-left: 8px; }

.mood-pagina { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(72px, 9vw, 120px); }
.mood-cab { display: grid; gap: 24px; align-items: end; margin-bottom: 28px; }
.mood-cab h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
.mood-cab .lead { margin: 14px 0 0; }
.mood-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.mood-acoes[hidden] { display: none; }
@media (min-width: 980px) { .mood-cab { grid-template-columns: 1.2fr 1fr; } .mood-acoes { justify-content: flex-end; } }
.mood-compartilhado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--linha); background: var(--branco); }
.mood-compartilhado p { margin: 0; }
.mood-nota { display: grid; gap: 8px; margin-bottom: 30px; }
.mood-nota label { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.mood-nota textarea { font: 300 1.05rem/1.6 var(--texto); padding: 14px 16px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta); resize: vertical; border-radius: var(--raio); }
.mood-nota textarea:focus { outline: none; border-color: var(--tinta); }
.mood-quadro { columns: 2 160px; column-gap: 14px; }
@media (min-width: 700px) { .mood-quadro { columns: 3 220px; column-gap: 18px; } }
@media (min-width: 1100px) { .mood-quadro { columns: 4 240px; } }
.mood-peca { break-inside: avoid; margin: 0 0 18px; position: relative; background: var(--branco); border: 1px solid var(--linha); }
.mood-peca img { width: 100%; height: auto; display: block; }
.mood-peca:nth-child(3n+1) img { aspect-ratio: 4 / 5; object-fit: cover; }
.mood-peca:nth-child(3n+2) img { aspect-ratio: 1; object-fit: cover; }
.mood-peca:nth-child(3n) img { aspect-ratio: 3 / 4; object-fit: cover; }
.mood-sem-foto { aspect-ratio: 1; background: var(--pedra); }
.mood-peca figcaption { padding: 12px 14px 14px; display: grid; gap: 2px; }
.mood-peca strong { font: 500 1.3rem/1.15 var(--display); }
.mood-peca figcaption span { font-size: .78rem; letter-spacing: .08em; color: var(--suave); }
.mood-peca-acoes { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.mood-peca:hover .mood-peca-acoes, .mood-peca:focus-within .mood-peca-acoes { opacity: 1; }
@media (hover: none) { .mood-peca-acoes { opacity: 1; } }
.mood-peca-acoes button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,253,249,.94); color: #1E1C19; cursor: pointer; font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.mood-peca-acoes button:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .mood-peca { animation: mood-entra .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--k, 0) * 45ms); }
  @keyframes mood-entra { from { opacity: 0; transform: translateY(14px); } }
}
.mood-vazio { text-align: center; padding: 56px 20px; border: 1px dashed var(--linha); }
.mood-vazio h2 { font-size: 2rem; margin-bottom: 10px; }
.mood-vazio p { color: var(--suave); max-width: 32em; margin: 0 auto 26px; }
.mood-vazio .hero-ctas { justify-content: center; }
.mood-rodape { margin-top: 18px; font-size: .86rem; }
@media print {
  .topo-faixa, .hdr, .rodape, .degrade-chapa, .zap, .mood-fab, .mood-acoes, .mood-peca-acoes, .mood-compartilhado, .mood-rodape, .menu-cel { display: none !important; }
  .mood-pagina { padding: 0; }
  .mood-nota textarea { border: 0; padding: 0; }
  .mood-quadro { columns: 3; }
  .mood-peca { animation: none; }
}

/* Miniaturas do moodboard na área do cliente */
.mood-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mood-mini .conta-vazio { grid-column: 1 / -1; }
.mood-mini-item { text-decoration: none; color: inherit; display: grid; gap: 6px; }
.mood-mini-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mood-mini-item span { font-size: .84rem; color: var(--grafite); }
.mood-mini-mais { display: grid; place-items: center; aspect-ratio: 1; background: var(--pedra); text-decoration: none; color: var(--tinta); font: 500 1.6rem/1 var(--display); }

/* ---------- Área do cliente: estados, pedidos e diálogo ---------- */
.conta-aviso { margin: 0; padding: 16px 18px; border: 1px solid #E2CFA6; background: #FBF5E8; color: #5B4520; font-size: .94rem; }
.conta-aviso strong { font-weight: 400; display: block; margin-bottom: 4px; }
.conta-aviso a { color: inherit; }
.conta-vazio { padding: 26px 24px; border: 1px dashed var(--linha); color: var(--suave); background: var(--branco); }
.status.cancelada::before { background: #9A4A3C; }
.solicitacoes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.solicitacoes li { font-size: .88rem; color: var(--grafite); padding: 10px 12px; background: var(--papel); border-left: 2px solid var(--bronze); display: grid; gap: 2px; }
.solicitacoes li strong { font-weight: 400; color: var(--tinta); }
.solicitacoes li span { color: var(--suave); }
.solicitacoes li em { font-style: normal; font-size: .8rem; color: var(--bronze); }
.solicitacoes li em.ok { color: #4E7A52; }
.botao-texto { background: none; border: 0; padding: 0 0 6px; cursor: pointer; font: inherit; color: inherit; }
.conta-excluir { margin: 18px 0 0; text-align: right; }
.conta-excluir .botao-texto { font-size: .82rem; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
.pref-campo { display: flex; gap: 8px; align-items: center; }
.pref-campo input { width: 170px; min-height: 40px; padding: 0 12px; border: 1px solid var(--linha); background: var(--papel); font: inherit; border-radius: var(--raio); }
.btn-mini { min-height: 40px; padding: 0 14px; font-size: .7rem; }
@media (max-width: 599px) { .pref { flex-wrap: wrap; } .pref-campo { width: 100%; } .pref-campo input { flex: 1; width: auto; } }
.conta-dialogo { border: 0; padding: 0; max-width: 520px; width: calc(100vw - 32px); background: var(--branco); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.conta-dialogo::backdrop { background: rgba(21,20,18,.6); }
.conta-dialogo form { padding: 28px 26px 26px; display: grid; gap: 14px; }
.conta-dialogo h2 { font-size: 2rem; }
.conta-dialogo p { margin: 0; }
.conta-dialogo textarea { font: 300 1rem/1.6 var(--texto); padding: 12px 14px; border: 1px solid var(--linha); background: var(--papel); resize: vertical; border-radius: var(--raio); }
.conta-dialogo .campo { margin: 0; }
.estrelas { display: flex; gap: 6px; }
.estrelas button { width: 44px; height: 44px; border: 1px solid var(--linha); background: var(--papel); font-size: 1.4rem; color: var(--linha); cursor: pointer; }
.estrelas button.on { color: var(--bronze); border-color: var(--bronze); }
.col-grade-deco { margin-bottom: 40px; }

/* ---------- Troca de piso (página da Black, js/piso.js) ---------- */
.piso-app { display: grid; gap: 28px; }
@media (min-width: 900px) { .piso-app { grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; } }
.piso-cena { position: relative; aspect-ratio: 1080 / 1343; overflow: hidden; background: var(--pedra); max-height: 86vh; margin: 0 auto; width: 100%; }
@media (min-width: 900px) { .piso-cena { width: min(100%, calc(86vh * 1080 / 1343)); } }
.piso-cena img, .piso-cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.piso-cena img { object-fit: cover; }
.piso-app.com-webgl .piso-cena img { visibility: hidden; }
.piso-legenda { position: absolute; left: 14px; bottom: 14px; background: rgba(18,18,18,.82); color: #ECEAE6; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; }
.piso-lado { display: grid; gap: 22px; align-content: start; }
.piso-opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.piso-opcoes button {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 10px; border: 1px solid var(--linha); background: var(--pedra); color: var(--tinta); cursor: pointer; font: 400 .92rem/1.2 var(--texto);
  transition: border-color .2s;
}
.piso-opcoes button i { grid-row: 1 / 3; width: 44px; height: 44px; background: center / cover; border: 1px solid rgba(255,255,255,.12); }
.piso-opcoes button i.original { background: linear-gradient(90deg, #A88B6B, #C2A585 50%, #9E8162); }
.piso-opcoes button small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.piso-opcoes button[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.piso-opcoes button:hover { border-color: var(--grafite); }
.piso-aviso { display: none; font-size: .88rem; }
.piso-app.sem-webgl .piso-aviso { display: block; }
.piso-app.sem-webgl .piso-opcoes, .piso-app.sem-webgl #piso-zap { display: none; }
#piso-zap[hidden] { display: none; }

/* ---------- Temperatura da luz (página da Light) ---------- */
.l-temp-cena { margin: 0; position: relative; aspect-ratio: 880 / 1100; overflow: hidden; background: #1B1712; }
.l-temp-cena img, .l-temp-cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.l-temp-cena canvas { opacity: 0; transition: opacity .4s; }
.l-temp-cena.pronta canvas { opacity: 1; }
.l-temp-k { position: absolute; right: 14px; top: 14px; background: rgba(20,17,13,.82); color: #F3EADB; font: 500 1.3rem/1 var(--display); padding: 9px 13px; }
.l-temp-opcoes { display: grid; gap: 8px; margin: 26px 0 20px; }
@media (min-width: 600px) { .l-temp-opcoes { grid-template-columns: 1fr 1fr; } }
.l-temp-opcoes button {
  display: grid; gap: 4px; text-align: left; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--pedra); color: var(--tinta); font: 500 1.35rem/1 var(--display);
}
.l-temp-opcoes button small { font: 300 .82rem/1.35 var(--texto); color: var(--suave); }
.l-temp-opcoes button[aria-checked="true"] { border-color: var(--bronze); box-shadow: inset 0 0 0 1px var(--bronze); }
.l-temp-faixa { display: block; margin-bottom: 18px; }
.l-temp-faixa input { width: 100%; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.l-temp-faixa input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #FFA94D, #FFD6A1 30%, #FFF4E6 55%, #E9F1FF 80%, #C9DCFF); }
.l-temp-faixa input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #FFA94D, #FFD6A1 30%, #FFF4E6 55%, #E9F1FF 80%, #C9DCFF); }
.l-temp-faixa input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #F3EADB; border: 2px solid #14110D; box-shadow: 0 0 0 1px #F3EADB; }
.l-temp-faixa input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #F3EADB; border: 2px solid #14110D; }
.l-temp-dica { font-size: .9rem; }
.mood-compartilhado[hidden], .mood-nota[hidden] { display: none; }
.campo[hidden] { display: none; }

/* ---------- Acessibilidade ---------- */
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  background: var(--tinta); color: var(--branco); padding: 12px 18px; text-decoration: none;
  font: 400 .8rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; transition: top .15s;
}
.pular:focus { top: 12px; outline: 2px solid var(--bronze); outline-offset: 2px; }
main:focus { outline: none; }
.rodape-base .wrap { color: #A79E92; }   /* contraste 5:1 sobre a chapa do rodapé */
@media (forced-colors: active) {
  .mood-btn, .b-seta, .piso-opcoes button, .l-temp-opcoes button { border: 1px solid ButtonText; }
}