/* Hallmark · shape: exposição em salas (18 Portfolio Grid adaptado: uma obra por sala, cada uma com etiqueta) · genre: atmospheric · theme: custom · job: buy · idea: "a home como uma exposição silenciosa: cada formato é uma obra numa sala da loja, com etiqueta de museu que abre a ficha com os preços" · vibe: "galeria calma, parede de cal, luz de janela"
 * paper: oklch(91% 0.024 70) · accent: oklch(40% 0.06 250) · display: Arapey · body: Literata · outlier: Manrope (só a marca) · hero: corredor centrado, a placa grande pendurada como obra, etiqueta à direita, título, uma linha e um link embaixo · nav: marca à esquerda, três links serifados à direita, sem botão · footer: colofão de exposição na mesma parede, com a nota de privacidade inteira · imagery: o produto construído em código (placa, tendas em CSS 3D, cartão) e uma foto real de trabalho (Auto Base) · signature: a luz da janela gira e esquenta de sala para sala, do hero ao rodapé; cada obra tem a sua etiqueta, que abre a ficha
 * axes: light/roman-serif/cool · posture: Restrained · contrast: pass · fold: pass · comp: aprovado pelo PO (referencia.png) · reproduced (checked at 1440x1024, impeccable comp-diff) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: P, a exposição podia virar só clima; cada sala leva o formato, a etiqueta abre a ficha com os preços e o pedido no WhatsApp */
/* Hallmark · waive 80 · tendas, cartão e arte de exemplo feitos em CSS 3D e SVG, cada um com o rótulo Ilustração fora de escala · as fotos reais da Kepzen são caseiras e o PO proibiu publicá-las; o brief pede a forma fiel de cada produto */
/* Hallmark · waive 47c · placa, tendas e cartão são a forma real dos produtos (prisma oco, encaixe na crista, placa 2:3, cartão ID-1) em CSS 3D · o brief do PO pede o produto em código, com grão de PLA e a luz de cada sala */
/* Hallmark · dismissed 29 · a luz é a janela do comp aprovado: vidraças de branco quente desfocadas na parede, sem halo colorido nem orbe atrás do texto */
/* Hallmark · dismissed 58 · as palavras da página são a oferta real que o PO exige na home (preços, renovação, alterações, frete, dúvidas, nota de privacidade); nenhuma janela de 900px passa de 85 palavras; a maior (83) junta a segunda folha de preços e as etiquetas do programa */
/* Hallmark · waive 6b · 44b passa a 1280x800 e o carimbo traz a postura Corridor · o comp aprovado pelo PO centra a placa na parede e a etiqueta quebra o eixo à direita */
/* Hallmark · hero-review: in-thread (sem subagente, regra do coordenador) · fix · 2 findings · 2 resolved · finish-review: coordenador · fix · 8 findings · ver DIRECAO.md, Revisão final */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- página: parede de cal ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--space-xl); }
body {
  background-color: var(--color-paper);
  background-image: url("img/cal.webp");
  background-size: 512px 512px;
  background-blend-mode: soft-light;
  font-size: var(--text-md);
  line-height: 1.6;
  font-optical-sizing: auto;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: color-mix(in oklab, var(--color-accent) 24%, transparent); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }

.pular { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.pular:focus-visible { top: var(--space-md); }

.link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* ---------- topo ---------- */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-xl) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-bottom: 0;
}
.marca {
  font-family: var(--font-outlier); font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(1.75rem, 3.5vw, 3.25rem); line-height: 1; color: var(--color-ink); text-decoration: none;
}
.marca:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.topo__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.topo__nav a {
  font-family: var(--font-display); font-size: clamp(1.1875rem, 1.8vw, 1.625rem); line-height: 1.2;
  color: var(--color-accent); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; padding-block: var(--space-2xs);
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.topo__nav a:hover { border-bottom-color: currentColor; }
.topo__nav a:active { color: var(--color-ink); }
.topo__nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- luz da janela: cada sala e cada parede tem a sua, do hero ao rodapé ---------- */
.sala, .parede { position: relative; isolation: isolate; }
.luz {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(transparent, var(--color-ink) var(--luz-borda, 14%), var(--color-ink) calc(100% - var(--luz-borda, 14%)), transparent);
}
.luz__giro { position: absolute; inset: 0; }
.luz__janela {
  position: absolute; left: var(--luz-x, -5%); top: var(--luz-y, 2%); width: var(--luz-l, 27%); aspect-ratio: 0.6;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5% 7%;
  transform-origin: 0 0;
  transform: rotate(var(--luz-giro, -8deg)) skewY(var(--luz-incl, 26deg));
  filter: blur(var(--luz-blur, 9px));
}
.luz__janela i { border-radius: 3px; }
.luz__janela--quente i { background-image: linear-gradient(var(--luz-quente), var(--luz-quente)); }
.luz__janela--fria i { background-image: linear-gradient(var(--luz-fria), var(--luz-fria)); }
.luz__janela--quente { opacity: var(--luz-q, 0.62); }
.luz__janela--fria { opacity: var(--luz-f, 0); }

.entrada { --luz-x: -7%; --luz-y: -6%; --luz-l: 28%; --luz-giro: -4deg; --luz-incl: 33deg; --luz-q: 0.7; --luz-f: 0.1; --luz-borda: 4%; }
.sala--balcao { --luz-x: -3%; --luz-y: 4%; --luz-l: 26%; --luz-giro: -12deg; --luz-incl: 30deg; --luz-q: 0.66; --luz-f: 0; }
.sala--mesas { --luz-x: 62%; --luz-y: -4%; --luz-l: 24%; --luz-giro: 8deg; --luz-incl: -24deg; --luz-q: 0.7; --luz-f: 0; }
.sala--parede { --luz-x: -8%; --luz-y: 0%; --luz-l: 30%; --luz-giro: -3deg; --luz-incl: 16deg; --luz-q: 0.18; --luz-f: 0.58; }
.sala--cartao { --luz-x: 2%; --luz-y: 8%; --luz-l: 22%; --luz-giro: -22deg; --luz-incl: 38deg; --luz-q: 0.74; --luz-f: 0; }
.percurso { --luz-x: 66%; --luz-y: -6%; --luz-l: 22%; --luz-giro: 6deg; --luz-incl: -20deg; --luz-q: 0.6; --luz-f: 0.08; }
.opcoes { --luz-x: -5%; --luz-y: 0%; --luz-l: 22%; --luz-giro: -10deg; --luz-incl: 28deg; --luz-q: 0.42; --luz-f: 0.22; }
.precos { --luz-x: 70%; --luz-y: -8%; --luz-l: 22%; --luz-giro: 10deg; --luz-incl: -26deg; --luz-q: 0.5; --luz-f: 0.14; }
.duvidas { --luz-x: -6%; --luz-y: 2%; --luz-l: 20%; --luz-giro: -16deg; --luz-incl: 34deg; --luz-q: 0.62; --luz-f: 0; }
.programa { --luz-x: 68%; --luz-y: -4%; --luz-l: 21%; --luz-giro: 4deg; --luz-incl: -18deg; --luz-q: 0.66; --luz-f: 0; }
.contato { --luz-x: -5%; --luz-y: 4%; --luz-l: 24%; --luz-giro: -20deg; --luz-incl: 36deg; --luz-q: 0.76; --luz-f: 0; }
.rodape { --luz-x: 62%; --luz-y: -10%; --luz-l: 20%; --luz-giro: 14deg; --luz-incl: -30deg; --luz-q: 0.46; --luz-f: 0; }

/* ---------- entrada (hero, comp aprovado) ---------- */
.entrada {
  --placa-h: clamp(18.5rem, 56.5svh, 43rem);
  --topo: calc(var(--placa-h) * 0.16 + var(--space-sm));
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start;
  padding: var(--topo) var(--gutter) var(--space-xl);
  text-align: center;
}
.entrada__obra { position: relative; margin: 0; }
.entrada__texto { display: grid; justify-items: center; gap: var(--space-md); margin-top: clamp(var(--space-lg), 6.2svh, var(--space-2xl)); }
.entrada h1 {
  font-weight: 400; font-size: var(--text-display); line-height: 1.04; letter-spacing: var(--tracking-display);
  color: var(--color-ink); max-width: 20ch;
}
.entrada__linha { font-size: clamp(1.1875rem, 1.95vw, 1.875rem); line-height: 1.35; color: var(--color-ink); max-width: 62ch; }
.entrada__link { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.25; margin-top: var(--space-xs); }

/* ---------- a placa: laje de PLA preto granulado, pendurada parada ---------- */
.placa {
  --espessura: 7px;
  position: relative; margin: 0; height: var(--placa-h); aspect-ratio: 2 / 3; border-radius: 3px;
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--sombra-cena) 34%, transparent),
    1.1rem 1.7rem 2.6rem -0.4rem color-mix(in oklab, var(--sombra-cena) 30%, transparent);
}
.placa::before, .placa::after { /* a espessura da laje: face da direita e face de baixo, com o grão mais claro */
  content: ""; position: absolute; transform-origin: 0 0;
  background-image: url("img/grao.webp"); background-size: 180px 180px; background-blend-mode: screen;
}
.placa::before { top: 0; left: 100%; width: var(--espessura); height: 100%; transform: skewY(45deg); background-color: color-mix(in oklab, var(--pla-luz) 90%, var(--luz-quente)); border-radius: 0 2px 2px 0; }
.placa::after { top: 100%; left: 0; width: 100%; height: var(--espessura); transform: skewX(45deg); background-color: color-mix(in oklab, var(--pla-luz) 60%, var(--pla)); border-radius: 0 0 2px 2px; }
.placa__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  background-color: var(--pla);
  background-image: url("img/grao.webp");
  background-size: 180px 180px;
}
.placa__face::before { /* aresta de cima e da esquerda pegando a luz da janela */
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  border-top: 1px solid color-mix(in oklab, var(--pla-luz) 85%, var(--luz-quente)); border-left: 1px solid color-mix(in oklab, var(--pla-luz) 85%, var(--luz-quente));
}
.placa__brilho {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px; pointer-events: none;
  background-image: url("img/brilho.webp"); background-size: 180px 180px;
  mix-blend-mode: screen; opacity: 0.32;
}
.placa__brilho::after { /* reflexo largo e parado da janela */
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(112deg, transparent 38%, color-mix(in oklab, var(--luz-quente) 9%, transparent) 50%, transparent 62%);
}
.arte { position: absolute; inset: 0; width: 100%; height: 100%; }
.arte__nome { font-family: var(--font-body); font-weight: 600; font-size: 86px; letter-spacing: -0.012em; fill: var(--arte-creme); }
.arte__onda { fill: none; stroke: var(--arte-ouro); stroke-width: 3.4; stroke-linecap: round; }
.arte__caule { fill: none; stroke: var(--arte-folha-2); stroke-width: 2.4; stroke-linecap: round; }
.arte__folha { fill: var(--arte-folha); color: color-mix(in oklab, var(--arte-folha) 55%, var(--arte-creme)); }
.arte__folha--clara { fill: var(--arte-folha-3); color: color-mix(in oklab, var(--arte-folha-3) 55%, var(--arte-creme)); }
.arte__folha--escura { fill: var(--arte-folha-2); color: color-mix(in oklab, var(--arte-folha-2) 60%, var(--arte-creme)); }
.arte__barro { fill: var(--arte-barro); color: color-mix(in oklab, var(--arte-barro) 60%, var(--arte-creme)); }
.arte__qr-fundo { fill: var(--arte-creme); }
.arte__qr { fill: var(--arte-tinta); }
.arte__nfc { color: var(--arte-tinta); }

/* ---------- etiqueta de museu ---------- */
.etiqueta {
  width: 13.5rem; padding: var(--space-md);
  background: var(--color-paper-2);
  text-align: left; color: var(--color-ink);
  box-shadow: 0 1px 1px color-mix(in oklab, var(--sombra-cena) 22%, transparent), 0.25rem 0.45rem 0.9rem -0.2rem color-mix(in oklab, var(--sombra-cena) 22%, transparent);
  border-radius: var(--radius-card);
}
.etiqueta__titulo { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.etiqueta__linhas { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; }
.etiqueta__nota { margin-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.etiqueta--entrada { width: 14rem; position: absolute; left: calc(100% + clamp(var(--space-xl), 5vw, var(--space-2xl))); bottom: 15%; }

.etiqueta__abrir {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: var(--space-xs); padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--color-accent);
  font-family: var(--font-body); font-size: var(--text-sm);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  transition: color var(--dur-short) var(--ease-out);
}
.etiqueta__abrir::after { /* sinal de abrir: dois traços que viram um */
  content: ""; width: 9px; height: 9px; flex-shrink: 0;
  background: linear-gradient(currentColor, currentColor) center / 9px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 9px no-repeat;
  transition: transform var(--dur-short) var(--ease-out);
}
.etiqueta__abrir[aria-expanded="true"]::after { transform: rotate(45deg); }
.etiqueta__abrir:hover { color: var(--color-ink); }
.etiqueta__abrir:active { color: var(--color-ink-2); }
.etiqueta__abrir:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .etiqueta__abrir { display: none; }

.ficha { margin-top: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.ficha:not([hidden]) { animation: ficha-entra var(--dur-long) var(--ease-out); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ficha__opcoes { display: grid; gap: var(--space-sm); margin: 0; }
.ficha__opcoes > div { display: grid; gap: var(--space-3xs); }
.ficha__opcoes dt { font-size: var(--text-sm); line-height: 1.3; }
.ficha__opcoes dd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0; }
.ficha__preco { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ficha__opcoes .link { font-size: var(--text-sm); display: inline-flex; align-items: center; min-height: 44px; }
.ficha__lista { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2xs); font-size: var(--text-sm); }

.js [data-revela] { opacity: 0; translate: 0 10px; transition: opacity var(--dur-calma) var(--ease-out), translate var(--dur-calma) var(--ease-out); }
.js [data-revela].is-in, .shot [data-revela] { opacity: 1; translate: none; }

/* ---------- salas: o nome da sala é o título mais forte depois do hero ---------- */
.sala:not(.entrada) { padding-block: var(--space-3xl) var(--space-2xl); }
.sala__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.sala__cabeca { display: grid; gap: var(--space-md); align-content: start; }
.sala__cabeca h2 { font-weight: 400; font-size: var(--text-sala); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 14ch; }
.sala__cabeca p { max-width: 40ch; color: var(--color-ink-2); }

/* a etiqueta fica presa à obra: a 40px da borda direita, no terço de baixo */
.sala__obra { position: relative; justify-self: start; width: max-content; max-width: 100%; margin: 0; }
.sala__obra > .etiqueta { position: absolute; left: calc(100% + var(--space-xl)); bottom: var(--etq-base, 22%); }

.sala--balcao .sala__cabeca { grid-column: 1 / 6; }
.sala--balcao .sala__obra { grid-column: 4 / 13; --etq-base: 30%; }
.sala--mesas .sala__cabeca { grid-column: 8 / 13; grid-row: 1; }
.sala--mesas .sala__obra { grid-column: 2 / 13; grid-row: 2; margin-top: calc(-1 * var(--space-2xl)); --etq-base: 34%; }
.sala--parede .sala__cabeca { grid-column: 1 / 7; }
.sala--parede .sala__obra { grid-column: 4 / 13; --etq-base: 26%; }
.sala--cartao .sala__cabeca { grid-column: 1 / 6; }
.sala--cartao .sala__obra { grid-column: 6 / 13; margin-top: calc(-1 * var(--space-3xl)); --etq-base: 30%; }

/* ---------- cenas em CSS 3D: obra e móvel debaixo da mesma câmera ---------- */
.cena { margin: 0; position: relative; width: var(--cena-l); height: var(--cena-a); perspective: var(--perspectiva, 760px); perspective-origin: var(--fuga, 100%) -10%; flex-shrink: 0; }
.palco { position: absolute; left: 50%; top: var(--palco-y); transform-style: preserve-3d; transform: rotateX(var(--camera, -18deg)); }
.palco * { transform-style: preserve-3d; }

/* tenda: prisma triangular oco, duas faces até a crista, pontas abertas, encaixe do chip na crista */
.tenda {
  --a: 27deg;
  --B: calc(2 * var(--S) * sin(var(--a)));
  --H: calc(var(--S) * cos(var(--a)));
  position: absolute; left: var(--tx, 0px); top: calc(-1 * var(--H) - 3px); width: 0; height: 0;
}
.tenda__corpo { position: absolute; left: 0; top: 0; }
.tenda__face { position: absolute; left: calc(var(--L) / -2); top: 0; width: var(--L); height: var(--S); transform-origin: 50% 0; border-radius: 2px; }
.tenda__face--frente {
  transform: rotateX(var(--a));
  background-color: var(--pla-luz);
  background-image: url("img/camadas.webp"), url("img/grao.webp");
  background-size: 64px 4px, 140px 140px;
}
.tenda__face--tras { transform: rotateX(calc(-1 * var(--a))); background: var(--pla-dentro); }
.tenda__face--base { top: calc(var(--H) - var(--B) / 2); height: var(--B); transform-origin: 50% 50%; transform: rotateX(90deg); background: var(--pla-lado); }
.tenda__ponta {
  position: absolute; left: calc(var(--B) / -2); top: 0; width: var(--B); height: var(--H);
  background-color: var(--pla-lado);
  background-image: url("img/camadas.webp"); background-size: 64px 4px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 13%, 10% 93%, 90% 93%, 50% 13%);
}
.tenda__ponta--perto { transform: translateX(calc(var(--L) / 2)) rotateY(90deg); background-color: color-mix(in oklab, var(--pla-luz) 75%, var(--luz-quente)); }
.tenda__ponta--longe { transform: translateX(calc(var(--L) / -2)) rotateY(90deg); background-color: var(--pla-dentro); }
/* o encaixe do chip: canal escuro rebaixado ao longo de toda a crista, com o lábio claro do lado da janela */
.tenda__canal {
  position: absolute; left: 0.5%; right: 0.5%; top: 0; height: 7px; border-radius: 1px;
  background: var(--pla-dentro);
  border-top: 1px solid color-mix(in oklab, var(--pla-luz) 40%, var(--luz-quente));
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--pla-luz) 80%, transparent);
}
.tenda__encaixe {
  position: absolute; left: calc(var(--L) * -0.495); top: -4px; width: calc(var(--L) * 0.99); height: 8px;
  transform: rotateX(90deg) translateZ(1px);
  background: var(--pla-dentro);
  border-top: 1px solid color-mix(in oklab, var(--pla-luz) 40%, var(--luz-quente));
}
.adesivo { position: absolute; inset: 9% 5.5% 9%; border-radius: 3px; overflow: hidden; }
.adesivo svg { width: 100%; height: 100%; }
.adesivo__fundo { fill: var(--arte-tinta); }
.adesivo__bloco { fill: var(--arte-creme); }
.adesivo__nome { font-family: var(--font-body); font-weight: 600; font-size: 30px; fill: var(--arte-tinta); }
.adesivo__numero { font-family: var(--font-body); font-weight: 600; font-size: 46px; fill: var(--arte-tinta); }
.adesivo__titulo { font-family: var(--font-body); font-weight: 600; font-size: 20px; fill: var(--arte-creme); }
.adesivo__miudo { font-family: var(--font-body); font-size: 10.5px; fill: color-mix(in oklab, var(--arte-creme) 82%, var(--arte-tinta)); }
.adesivo__miudo--escuro { fill: var(--arte-tinta); font-size: 13px; }
.adesivo__fio { stroke: var(--arte-ouro); stroke-width: 2; }
.adesivo__anel { fill: none; stroke: var(--arte-ouro); stroke-width: 2; }
.adesivo__nfc { color: var(--arte-creme); }
.adesivo__qr-fundo { fill: var(--arte-creme); }
.adesivo__qr { fill: var(--arte-tinta); }

.sombra-objeto {
  position: absolute; left: 50%; top: 50%; width: var(--sombra-l, 60%); height: var(--sombra-a, 44%);
  transform: translate(calc(-50% + var(--sombra-x, 0px)), -50%);
  background: color-mix(in oklab, var(--sombra-cena) 40%, transparent);
  filter: blur(9px); border-radius: var(--radius-card);
}

/* prateleira branca na parede */
.cena--prateleira { --cena-l: 32rem; --cena-a: 21rem; --palco-y: 13.5rem; --camera: -22deg; --fuga: 112%; }
.tenda--pequena { --L: 250px; --S: 172px; --tx: -4.5rem; }
.prateleira { position: absolute; left: 0; top: 0; }
.prateleira__topo { position: absolute; left: -16rem; top: -6.5rem; width: 32rem; height: 13rem; transform: rotateX(90deg); background: var(--branco-movel); --sombra-l: 50%; --sombra-a: 44%; --sombra-x: -4.5rem; }
.prateleira__frente { position: absolute; left: -16rem; top: 0; width: 32rem; height: 1.4rem; transform: translateZ(6.5rem); background: var(--branco-movel-2); }
.prateleira__lado { position: absolute; left: 16rem; top: 0; width: 13rem; height: 1.4rem; transform-origin: 0 0; transform: translateZ(6.5rem) rotateY(90deg); background: var(--branco-movel-3); }
.prateleira__sombra { position: absolute; left: -15rem; top: 0.6rem; width: 31rem; height: 3.2rem; transform: translateZ(-6.5rem); background: color-mix(in oklab, var(--sombra-cena) 26%, transparent); filter: blur(12px); }

/* mesinha branca no chão */
.cena--mesa { --cena-l: 26rem; --cena-a: 30rem; --palco-y: 12.5rem; --camera: -22deg; --fuga: 118%; }
.tenda--media { --L: 300px; --S: 206px; --tx: -3rem; }
.mesa { position: absolute; left: 0; top: 0; }
.mesa__topo { position: absolute; left: -13rem; top: -8rem; width: 26rem; height: 16rem; transform: rotateX(90deg); background: var(--branco-movel); --sombra-l: 60%; --sombra-a: 44%; --sombra-x: -3rem; }
.mesa__frente { position: absolute; left: -13rem; top: 0; width: 26rem; height: 1.25rem; transform: translateZ(8rem); background: var(--branco-movel-2); }
.mesa__lado { position: absolute; left: 13rem; top: 0; width: 16rem; height: 1.25rem; transform-origin: 0 0; transform: translateZ(8rem) rotateY(90deg); background: var(--branco-movel-3); }
.mesa__perna { position: absolute; top: 1.25rem; width: 0.75rem; height: 15rem; background: var(--branco-movel-2); }
.mesa__perna--fe { left: -12.4rem; transform: translateZ(7.4rem); }
.mesa__perna--fd { left: 11.65rem; transform: translateZ(7.4rem); }
.mesa__perna--te { left: -12.4rem; transform: translateZ(-7.4rem); background: var(--branco-movel-3); }
.mesa__perna--td { left: 11.65rem; transform: translateZ(-7.4rem); background: var(--branco-movel-3); }
.mesa__sombra { position: absolute; left: -14rem; top: 8.25rem; width: 28rem; height: 18rem; transform: rotateX(90deg); background: color-mix(in oklab, var(--sombra-cena) 22%, transparent); filter: blur(18px); border-radius: 30%; }

/* pedestal com o cartão */
.cena--pedestal { --cena-l: 22rem; --cena-a: 33rem; --palco-y: 10rem; --camera: -36deg; --fuga: 96%; --perspectiva: 1100px; }
.pedestal { position: absolute; left: 0; top: 0; }
.pedestal__topo { position: absolute; left: -10rem; top: -10rem; width: 20rem; height: 20rem; transform: rotateX(90deg); background: var(--branco-movel); --sombra-l: 74%; --sombra-a: 52%; }
.pedestal__frente { position: absolute; left: -10rem; top: 0; width: 20rem; height: 22rem; transform: translateZ(10rem); background: var(--branco-movel-2); }
.pedestal__lado { position: absolute; left: 10rem; top: 0; width: 20rem; height: 22rem; transform-origin: 0 0; transform: translateZ(10rem) rotateY(90deg); background: var(--branco-movel-3); }
.pedestal__sombra { position: absolute; left: -12rem; top: 11rem; width: 28rem; height: 24rem; transform: rotateX(90deg); background: color-mix(in oklab, var(--sombra-cena) 20%, transparent); filter: blur(20px); border-radius: 30%; }
.cartao {
  position: absolute; left: 50%; top: 50%; width: 15.5rem; aspect-ratio: 85.6 / 54;
  transform: translate(-50%, -50%) rotate(-6deg) translateZ(2px);
  border-radius: 0.55rem; overflow: hidden;
  background-color: var(--pla); background-image: url("img/grao.webp"); background-size: 120px 120px;
}
.cartao svg { width: 100%; height: 100%; }
.cartao__nome { font-family: var(--font-body); font-weight: 600; font-size: 74px; fill: var(--arte-creme); }
.cartao__miudo { font-family: var(--font-body); font-size: 34px; fill: color-mix(in oklab, var(--arte-creme) 80%, var(--pla)); }
.cartao__nfc { color: var(--arte-ouro); }
.selo__fundo { fill: var(--arte-creme); }
.selo__anel { fill: none; stroke: var(--arte-ouro); stroke-width: 6; }
.selo__texto { font-family: var(--font-body); font-weight: 600; font-size: 40px; fill: var(--arte-tinta); }
.selo__estrela { fill: var(--arte-ouro); }

/* ---------- a obra real: a placa da Auto Base ---------- */
.obra-real { margin: 0; display: grid; justify-items: start; gap: var(--space-lg); }
.placa--real { --placa-h: clamp(26rem, 44vw, 41rem); padding: var(--space-2xs); background-color: var(--pla); background-image: url("img/grao.webp"); background-size: 180px 180px; }
.placa--real img { width: 100%; height: 100%; object-fit: cover; }
.obra-real figcaption { max-width: 34ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }

/* ---------- paredes de informação: título de parede menor que o das salas ---------- */
.parede h2 { font-weight: 400; font-size: var(--text-section); line-height: 1.08; letter-spacing: var(--tracking-display); }

/* percurso: um painel de texto de parede */
.percurso { padding-block: var(--section-gap-l) var(--section-gap); }
.percurso__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; row-gap: var(--space-xl); }
.percurso h2 { grid-column: 1 / 6; max-width: 13ch; }
.painel { grid-column: 7 / 13; display: grid; gap: var(--space-xl); }
.painel__intro { font-size: var(--text-lead); line-height: 1.45; max-width: 34ch; }
.painel__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.painel__passos li { display: grid; gap: var(--space-2xs); }
.painel__passos p { max-width: 44ch; color: var(--color-ink-2); }

/* as duas opções em texto de parede, e a página de exemplo pendurada como obra */
.opcoes { padding-block: var(--section-gap-s) var(--section-gap-l); }
.opcoes__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.opcoes h2 { grid-column: 1 / 6; max-width: 14ch; }
.opcoes__texto { grid-column: 1 / 6; display: grid; gap: var(--space-xl); }
.opcao { display: grid; gap: var(--space-xs); }
.opcao p { max-width: 42ch; color: var(--color-ink-2); }
.opcoes .perfil { grid-column: 7 / 13; grid-row: 1 / span 2; --etq-base: 18%; }
.perfil__tela {
  position: relative; width: 17.5rem;
  background: var(--color-paper-2); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--sombra-cena) 26%, transparent), 0.9rem 1.4rem 2.2rem -0.4rem color-mix(in oklab, var(--sombra-cena) 26%, transparent);
}
.perfil__tela svg { display: block; width: 100%; height: auto; }
.perfil__capa { fill: var(--pla); }
.perfil__logo { fill: var(--arte-creme); stroke: var(--color-paper-2); stroke-width: 3; }
.perfil__sigla { font-family: var(--font-body); font-weight: 600; font-size: 20px; fill: var(--arte-tinta); }
.perfil__nome { font-family: var(--font-display); font-size: 31px; fill: var(--color-ink); }
.perfil__botao { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.perfil__botao--cheio { fill: var(--color-ink); stroke: none; }
.perfil__rotulo { font-family: var(--font-body); font-size: 13px; fill: var(--color-ink); }
.perfil__rotulo--cheio { fill: var(--color-paper-2); }

/* preços: uma folha grande pendurada na parede e uma segunda folha ao lado, mais baixa */
.precos { padding-block: var(--section-gap) var(--section-gap-l); }
.precos__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.precos__cabeca { grid-column: 1 / 8; grid-row: 1; display: grid; gap: var(--space-md); }
.precos__validade { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink); max-width: 36ch; }
.folha {
  background: var(--color-paper-2); border-radius: var(--radius-card); padding: var(--space-xl);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--sombra-cena) 24%, transparent), 0.6rem 1rem 1.8rem -0.4rem color-mix(in oklab, var(--sombra-cena) 24%, transparent);
}
.folha--precos { grid-column: 1 / 9; grid-row: 2; }
.folha--extras { grid-column: 9 / 13; grid-row: 3; margin-top: calc(-1 * var(--space-3xl)); display: grid; gap: var(--space-lg); padding: var(--space-lg); }
.folha table { width: 100%; border-collapse: collapse; }
.folha th, .folha td { text-align: left; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); vertical-align: baseline; }
.folha tbody tr:last-child th, .folha tbody tr:last-child td { border-bottom: 0; }
.folha thead th { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); padding-top: 0; white-space: nowrap; }
.folha tbody th { font-weight: 600; font-size: var(--text-md); width: 40%; }
.folha tbody th span { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.preco { font-size: 1.375rem; line-height: 1.2; color: var(--color-ink); white-space: nowrap; }
.pedir { display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--space-xs); font-size: var(--text-sm); }
.extra { margin: 0; display: grid; align-content: start; gap: var(--space-2xs); }
.extra__titulo { font-weight: 600; font-size: var(--text-sm); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-rule); }
.extra dd { margin: 0; display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); }
.extra dd.extra__texto { display: block; color: var(--color-ink-2); }

/* dúvidas: texto de parede; a pergunta é sublinhada de leve e a resposta abre embaixo */
.duvidas { padding-block: var(--section-gap) var(--section-gap-s); }
.duvidas__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.duvidas h2 { grid-column: 1 / 4; }
.duvidas__lista { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); align-items: start; }
.duvidas summary {
  display: block; padding-block: var(--space-xs); cursor: pointer; list-style: none;
  font-size: 1.125rem; line-height: 1.45; color: var(--color-ink);
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in oklab, var(--color-accent) 70%, transparent);
  transition: color var(--dur-short) var(--ease-out);
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary:hover { color: var(--color-accent); }
.duvidas summary:active { color: var(--color-ink-2); }
.duvidas summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.duvidas details[open] summary { text-decoration-style: solid; }
.duvidas details p { padding-top: var(--space-2xs); color: var(--color-ink-2); max-width: 44ch; }
.duvidas details:not([open]) > p { display: none; }

/* programa: três etiquetas penduradas em alturas diferentes */
.programa { padding-block: calc(var(--section-gap-l) + var(--space-2xl)) var(--section-gap-s); }
.programa__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.programa h2 { grid-column: 1 / 5; max-width: 14ch; }
.programa__lista { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xl); align-items: flex-start; }
.programa__item { width: auto; flex: 1 1 0; min-width: 0; max-width: 16rem; }
.programa__item:nth-child(2) { margin-top: var(--space-2xl); }
.programa__item:nth-child(3) { margin-top: var(--space-lg); }
.programa__acao { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2xs); font-size: var(--text-sm); }

/* contato: a etiqueta da recepção, plana na parede */
.contato { padding-block: var(--section-gap) calc(var(--section-gap-l) + var(--space-3xl)); }
.contato__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.contato__texto { grid-column: 1 / 6; display: grid; gap: var(--space-2xl); }
.contato__dados { margin: 0; display: grid; gap: var(--space-md); }
.contato__dados > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.contato__dados dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: 0.15em; }
.contato__dados dd { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.contato__form { grid-column: 7 / 12; display: grid; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.campo { display: grid; gap: var(--space-xs); }
.campo label { font-size: var(--text-sm); color: var(--color-ink); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-muted); border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--color-paper-2) 70%, transparent); color: var(--color-ink); font-size: var(--text-md);
  outline: 2px solid transparent; outline-offset: -3px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 6rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--color-ink-2); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-color: var(--color-focus); }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.campo__ajuda { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); }
.botao {
  justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg);
  border: 1px solid var(--color-ink); border-radius: var(--radius-card);
  background: var(--color-ink); color: var(--color-paper-2); font-weight: 600; font-size: var(--text-md); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.botao:hover { background: var(--color-ink-2); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.botao:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.contato__nota { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- rodapé: colofão na mesma parede ---------- */
.rodape { padding-block: var(--space-4xl) var(--space-2xl); border-top: 1px solid var(--color-rule); }
.rodape__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.rodape__marca { grid-column: 1 / 6; display: grid; gap: var(--space-md); align-content: start; }
.rodape__marca p { max-width: 32ch; color: var(--color-ink-2); }
.rodape__links { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: var(--space-xs) var(--space-2xl); align-content: start; font-size: var(--text-sm); }
.rodape a { color: var(--color-ink); text-decoration-color: color-mix(in oklab, var(--color-ink) 40%, transparent); transition: color var(--dur-short) var(--ease-out); }
.rodape a:hover { color: var(--color-accent); }
.rodape a:active { color: var(--color-ink-2); }
.rodape a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 32px; }
.rodape__legal { grid-column: 1 / -1; display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.rodape__privacidade { max-width: 75ch; }

/* ---------- até 64rem: obras e etiquetas um pouco menores, paredes em uma coluna ---------- */
@media (max-width: 64rem) {
  .cena { zoom: 0.85; --fuga: 96%; }
  .sala__obra { margin-left: var(--space-2xl); }
  .placa--real { --placa-h: clamp(24rem, 52vw, 34rem); }
  .sala--balcao .sala__cabeca, .sala--mesas .sala__cabeca, .sala--parede .sala__cabeca, .sala--cartao .sala__cabeca { grid-column: 1 / -1; grid-row: auto; }
  .sala--balcao .sala__obra, .sala--mesas .sala__obra, .sala--parede .sala__obra, .sala--cartao .sala__obra { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .percurso h2, .painel, .opcoes h2, .opcoes__texto, .precos__cabeca, .folha--precos, .folha--extras, .duvidas h2, .duvidas__lista, .programa h2, .programa__lista, .contato__texto, .contato__form { grid-column: 1 / -1; grid-row: auto; }
  .opcoes .perfil { grid-column: 1 / -1; grid-row: auto; }
  .folha--extras { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__marca, .rodape__links { grid-column: 1 / -1; }
}
@media (max-width: 60rem) {
  .entrada { --placa-h: clamp(18rem, 50svh, 34rem); }
  .entrada__obra { display: grid; justify-items: end; }
  .entrada__obra .placa { justify-self: center; }
  .etiqueta--entrada { position: static; margin-top: var(--space-lg); }
  .folha--extras { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- até 600px: a obra, e a etiqueta logo embaixo, alinhada à esquerda ---------- */
@media (max-width: 37.5rem) {
  .sala__obra { width: auto; margin-left: var(--space-lg); }
  .sala__obra > .etiqueta { position: static; margin-top: var(--space-md); }
  .perfil__tela { width: 100%; max-width: 17.5rem; }
  .programa__lista { flex-direction: column; gap: var(--space-lg); }
  .programa__item, .programa__item:nth-child(2), .programa__item:nth-child(3) { margin-top: 0; max-width: 20rem; width: 100%; }
  .duvidas__lista { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* ---------- celular ---------- */
@media (max-width: 40rem) {
  .topo { padding-top: var(--space-lg); gap: var(--space-md); }
  .marca { font-size: 1.75rem; }
  .topo__nav ul { gap: var(--space-2xs) var(--space-sm); justify-content: flex-end; flex-wrap: nowrap; }
  .topo__nav a { font-size: 1.0625rem; }
  .entrada { --placa-h: clamp(15rem, 44svh, 24rem); padding-top: var(--space-3xl); }
  .etiqueta--entrada { width: 12.5rem; margin-top: var(--space-md); }
  .entrada__texto { margin-top: var(--space-lg); }
  .luz__janela { width: calc(var(--luz-l) * 1.8); }
  .cena { zoom: 0.52; --fuga: 86%; --perspectiva: 1000px; }
  .placa--real { --placa-h: clamp(24rem, 112vw, 30rem); }
  .folha { padding: var(--space-lg) var(--space-md); }
  .folha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .folha tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .folha tbody tr:last-child { border-bottom: 0; }
  .folha tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--space-xs); border: 0; }
  .folha tbody td { padding: 0; border: 0; }
  .folha tbody td::before { content: attr(data-op); display: block; font-size: var(--text-xs); color: var(--color-muted); }
  .pedir { margin-left: var(--space-2xs); }
  .contato__dados > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 22.5rem) {
  .cena { zoom: 0.5; --fuga: 60%; --perspectiva: 1400px; }
  .marca { font-size: 1.5rem; }
  .topo__nav ul { gap: var(--space-2xs) var(--space-xs); }
  .topo__nav a { font-size: 1rem; }
}

/* ---------- movimento reduzido: tudo parado, tudo visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revela] { opacity: 1; translate: none; transition: none; }
  .ficha:not([hidden]) { animation: none; }
  .link, .botao, .etiqueta__abrir, .topo__nav a, .duvidas summary, .rodape a { transition: none; }
}