@font-face { font-family: 'Corben'; src: url(fonts/corben-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Corben'; src: url(fonts/corben-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url(fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --porcelana: #f3f4f1;
  --porcelana-2: #e6e9e4;
  --tinta: #15181d;
  --tinta-2: #4a5059;
  --cobalto: #1d3a8f;
  --cobalto-escuro: #132a70;
  --celadon: #a6cbb5;
  --celadon-escuro: #3f6f5d;
  --ferro: #8a3b1e;
  --zap: #1a7f45;
  --zap-escuro: #136236;
  --display: 'Corben', Georgia, serif;
  --texto: 'Schibsted Grotesk', system-ui, sans-serif;
  --topo-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.reduz { scroll-behavior: auto; }
body { margin: 0; background: var(--porcelana); color: var(--tinta); font: 400 17px/1.55 var(--texto); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
section[id] { scroll-margin-top: var(--topo-h); }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 1.4em; border-radius: 4px; border: 2px solid transparent;
  font: 600 16px/1 var(--texto); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-zap { background: var(--zap); color: #fff; }
.btn-zap:hover { background: var(--zap-escuro); }
.btn-claro { background: var(--porcelana); color: var(--cobalto-escuro); }
.btn-claro:hover { background: #fff; }
.btn-pequeno { min-height: 40px; padding: 0 1em; font-size: 15px; }
.btn-largo { width: 100%; }
:focus-visible { outline: 3px solid #f2b33d; outline-offset: 3px; }

/* ---------------------------------------------------------------- topo */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--topo-h);
  display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 4vw, 48px);
  background: var(--fundo-heroi, var(--cobalto)); color: var(--porcelana);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-emblema { width: 34px; height: 34px; color: var(--celadon); }
.marca-nome { font: 700 25px/1 var(--display); letter-spacing: -0.02em; }
.topo-nav { display: flex; gap: 22px; margin-left: auto; }
.topo-nav a { text-decoration: none; font-weight: 500; font-size: 15px; opacity: .88; }
.topo-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) { .topo-nav { display: none; } .topo .btn { margin-left: auto; } }

/* ---------------------------------------------------------------- herói */
.heroi { position: relative; height: 560vh; background: var(--fundo-heroi, var(--cobalto)); color: var(--porcelana); }
.heroi-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.heroi-fixo::before { /* anéis da roda do torno, bem discretos */
  content: ''; position: absolute; width: 150vmax; aspect-ratio: 1; left: 71%; top: 50%; translate: -50% -50%; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(255,255,255,.045) 46px 47px);
  pointer-events: none;
}
.palco { position: relative; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.palco-poster { transition: opacity .3s; }
.palco.pintado .palco-poster { opacity: 0; }

.palco-heroi { position: absolute; inset: 0; pointer-events: none; }
.palco-heroi .palco-poster {
  position: absolute; width: min(74vh, 50vw); aspect-ratio: 1; left: 71%; top: 47%; translate: -50% -50%; object-fit: contain;
}

.heroi-texto {
  position: relative; z-index: 2; max-width: calc(clamp(20px, 6vw, 96px) + min(41vw, 620px));
  padding: calc(var(--topo-h) + clamp(32px, 9vh, 110px)) 0 0 clamp(20px, 6vw, 96px);
  transition: opacity .45s, translate .45s;
}
.rotulo { font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--celadon); margin-bottom: 18px; }
.heroi h1 { font-size: clamp(34px, 3.7vw, 56px); text-wrap: balance; }
.heroi-sub { margin-top: 22px; font-size: 19px; max-width: 30em; color: #dfe4ef; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.heroi.rolando .heroi-texto { opacity: 0; translate: 0 -24px; pointer-events: none; }

.trilho {
  position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); top: 50%; translate: 0 -50%;
  list-style: none; margin: 0; padding: 0; counter-reset: etapa;
  opacity: 0; transition: opacity .45s;
}
.trilho li {
  counter-increment: etapa; display: flex; align-items: baseline; gap: 16px; padding: 7px 0;
  font: 700 clamp(22px, 2.4vw, 34px)/1.15 var(--display); color: rgba(243,244,241,.3);
  transition: color .35s, translate .35s;
}
.trilho li::before { content: counter(etapa, decimal-leading-zero); font: 600 14px/1 var(--texto); letter-spacing: .08em; min-width: 2ch; }
.trilho li.feito { color: rgba(243,244,241,.55); }
.trilho li.agora { color: var(--porcelana); translate: 10px 0; }
.trilho li.agora::before { color: var(--celadon); }
.heroi.rolando .trilho { opacity: 1; }
.heroi.final .trilho { opacity: 0; }

.etapa-atual { display: none; }

.pronta {
  position: absolute; z-index: 3; left: clamp(20px, 6vw, 96px); top: 50%; translate: 0 calc(-50% + 20px);
  opacity: 0; pointer-events: none; transition: opacity .45s, translate .45s;
}
.pronta-nome { font: 700 clamp(28px, 3vw, 44px)/1.1 var(--display); max-width: 11em; }
.pronta-preco { font: 600 24px/1 var(--texto); margin: 16px 0 26px; color: var(--celadon); }
.pronta-link {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 1.4em; border-radius: 4px;
  background: var(--zap); color: #fff; font-weight: 600; text-decoration: none;
}
.pronta-link:hover { background: var(--zap-escuro); }
.heroi.final .pronta { opacity: 1; translate: 0 -50%; pointer-events: auto; }

@media (max-width: 760px) {
  .heroi-fixo::before { left: 50%; top: 66%; }
  .heroi-texto { max-width: none; padding: calc(var(--topo-h) + 26px) 20px 0; }
  .rotulo { font-size: 12.5px; margin-bottom: 12px; }
  .heroi h1 { font-size: clamp(29px, 8.4vw, 38px); }
  .heroi-sub { display: none; }
  .heroi-acoes { margin-top: 20px; align-items: center; gap: 18px; }
  .heroi-acoes .btn-claro { order: 2; background: none; color: var(--porcelana); padding: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
  .palco-heroi .palco-poster { width: min(94vw, 46svh); left: 50%; top: 72%; }
  .trilho { display: none; }
  .etapa-atual {
    display: block; position: absolute; z-index: 2; left: 20px; right: 20px; top: calc(var(--topo-h) + 20px);
    font: 700 28px/1.15 var(--display); opacity: 0; transition: opacity .4s;
  }
  .heroi.rolando .etapa-atual { opacity: 1; }
  .heroi.final .etapa-atual { opacity: 0; }
  .pronta { left: 20px; right: 20px; top: auto; bottom: 26px; translate: 0 20px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; }
  .pronta-nome { font-size: 22px; grid-column: 1 / -1; }
  .pronta-preco { margin: 0; align-self: center; }
  .heroi.final .pronta { translate: 0 0; }
}

/* sem 3D ou com movimento reduzido: herói de uma tela, foto da jarra pronta */
html.sem-3d .heroi, html.reduz .heroi { height: auto; }
html.sem-3d .heroi-fixo, html.reduz .heroi-fixo { position: relative; height: auto; min-height: 100svh; padding-bottom: 40px; }
html.sem-3d .trilho, html.reduz .trilho, html.sem-3d .etapa-atual, html.reduz .etapa-atual, html.sem-3d .pronta, html.reduz .pronta { display: none; }
@media (max-width: 760px) {
  html.sem-3d .palco-heroi, html.reduz .palco-heroi { position: relative; height: 92vw; margin-top: 12px; }
  html.sem-3d .palco-heroi .palco-poster, html.reduz .palco-heroi .palco-poster { top: 50%; width: 92vw; }
}

/* ---------------------------------------------------------------- peças */
.pecas { padding: clamp(64px, 10vw, 140px) clamp(20px, 5vw, 80px); }
.pecas-grade { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.palco-pecas {
  aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: pan-y;
  background:
    repeating-radial-gradient(circle, transparent 0 22px, rgba(21,24,29,.05) 22px 23px),
    radial-gradient(circle, #fbfbf9 0 40%, var(--porcelana-2) 70%);
}
.palco-pecas.pegando { cursor: grabbing; }
.palco-pecas .palco-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.palco-pecas:focus-visible { outline-offset: 6px; }

.pecas-info h2 { font-size: clamp(36px, 4vw, 56px); color: var(--cobalto); }
.pecas-sub { margin-top: 12px; color: var(--tinta-2); max-width: 28em; }
.pecas-info fieldset { border: 0; padding: 0; margin: 30px 0 0; min-width: 0; }
.pecas-info legend { padding: 0; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 10px; }
.pecas-info input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lista-pecas label {
  position: relative; display: grid; grid-template-columns: 1fr auto 5.2em; align-items: baseline; gap: 16px;
  padding: 15px 16px 15px 20px; border-top: 1px solid #cfd3cc; cursor: pointer; transition: background-color .2s;
}
.lista-pecas label:last-of-type { border-bottom: 1px solid #cfd3cc; }
.lista-pecas label::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--cobalto); scale: 1 0; transition: scale .25s; }
.lista-pecas label:hover { background: rgba(29,58,143,.05); }
.lista-pecas label:has(input:checked) { background: rgba(29,58,143,.08); }
.lista-pecas label:has(input:checked)::before { scale: 1 1; }
.lista-pecas label:has(input:focus-visible) { outline: 3px solid #f2b33d; outline-offset: -3px; }
.peca-nome { font: 700 22px/1.1 var(--display); }
.peca-medida { color: var(--tinta-2); font-size: 15px; }
.peca-preco { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.lista-esmaltes { display: flex; flex-wrap: wrap; gap: 10px; }
.lista-esmaltes legend { width: 100%; }
.lista-esmaltes label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px;
  border: 1.5px solid #cfd3cc; border-radius: 4px; cursor: pointer; font-weight: 500; transition: border-color .2s;
}
.lista-esmaltes label:has(input:checked) { border-color: var(--cobalto); box-shadow: inset 0 0 0 1.5px var(--cobalto); }
.lista-esmaltes label:has(input:focus-visible) { outline: 3px solid #f2b33d; outline-offset: 2px; }
.amostra { width: 30px; height: 30px; border-radius: 50%; }
.amostra-celadon { background: radial-gradient(circle at 35% 30%, #c6e0d0, #a6cbb5 45%, #4b7f6c); }
.amostra-cobalto { background: radial-gradient(circle at 35% 30%, #5a7fd6, #3058bd 45%, #132a70); }
.amostra-salpicado { background: radial-gradient(circle at 70% 60%, #2a1d15 0 1.6px, transparent 2px), radial-gradient(circle at 30% 70%, #2a1d15 0 1.3px, transparent 1.7px), radial-gradient(circle at 55% 25%, #2a1d15 0 1.1px, transparent 1.5px), radial-gradient(circle at 35% 30%, #fbf9f4, #ece8de 50%, #c7bea9); }
#encomendar-peca { margin-top: 30px; }
.nota { margin-top: 16px; font-size: 15px; color: var(--tinta-2); }

@media (max-width: 860px) {
  .pecas-grade { grid-template-columns: minmax(0, 1fr); }
  .palco-pecas { width: min(100%, 520px); margin: 0 auto; }
}

/* ---------------------------------------------------------------- mesa */
.mesa { position: relative; background: var(--tinta); }
.mesa-foto { width: 100%; height: min(78vh, 56.25vw); object-fit: cover; }
.mesa-ficha {
  position: absolute; right: clamp(20px, 5vw, 80px); bottom: clamp(20px, 5vw, 64px);
  width: min(460px, 42%); padding: 30px 32px; background: var(--cobalto); color: var(--porcelana);
}
.mesa-ficha h2 { font-size: clamp(26px, 2.4vw, 34px); }
.mesa-ficha ul { list-style: none; margin: 20px 0 0; padding: 0; }
.mesa-ficha li { padding: 10px 0 10px 26px; border-top: 1px solid rgba(243,244,241,.22); position: relative; }
.mesa-ficha li::before { content: ''; position: absolute; left: 0; top: 18px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--celadon); }
@media (max-width: 860px) {
  .mesa-foto { height: auto; aspect-ratio: 4 / 3; }
  .mesa-ficha { position: static; width: auto; margin: -36px 16px 0; position: relative; }
  .mesa { padding-bottom: 16px; }
}

/* ---------------------------------------------------------------- encomendas */
.encomendas {
  max-width: 1240px; margin: 0 auto; padding: clamp(64px, 10vw, 140px) clamp(20px, 5vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start;
}
.encomendas h2 { font-size: clamp(36px, 4vw, 56px); color: var(--cobalto); }
.encomendas ol { list-style: none; margin: 32px 0 0; padding: 0; }
.encomendas li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 20px 0; border-top: 1px solid #cfd3cc; font-size: 19px; }
.encomendas li:last-child { border-bottom: 1px solid #cfd3cc; }
.num { font: 700 44px/1 var(--display); color: var(--celadon-escuro); }
.encomendas-restaurante { background: var(--celadon); padding: 36px 34px; margin-top: 8px; }
.encomendas-restaurante h3 { font-size: 30px; }
.encomendas-restaurante p { margin: 14px 0 24px; }
.encomendas-restaurante .btn-claro { background: var(--tinta); color: var(--porcelana); }
.encomendas-restaurante .btn-claro:hover { background: var(--cobalto-escuro); }
@media (max-width: 860px) { .encomendas { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- ateliê */
.atelie { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--cobalto); color: var(--porcelana); }
.atelie-foto { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.atelie-texto { padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 80px); align-self: center; }
.atelie h2 { font-size: clamp(34px, 3.6vw, 52px); }
.atelie dl { margin: 28px 0 32px; display: grid; grid-template-columns: max-content 1fr; gap: 14px 22px; }
.atelie dt { font-weight: 600; color: var(--celadon); }
.atelie dd { margin: 0; }
@media (max-width: 860px) {
  .atelie { grid-template-columns: minmax(0, 1fr); }
  .atelie-foto { min-height: 0; aspect-ratio: 16 / 10; }
  .atelie dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .atelie dd { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------- perguntas */
.perguntas { max-width: 860px; margin: 0 auto; padding: clamp(64px, 10vw, 130px) clamp(20px, 5vw, 40px); }
.perguntas h2 { font-size: clamp(32px, 3.4vw, 46px); color: var(--cobalto); margin-bottom: 26px; }
.perguntas details { border-top: 1px solid #cfd3cc; }
.perguntas details:last-child { border-bottom: 1px solid #cfd3cc; }
.perguntas summary { cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; font-size: 19px; list-style: none; position: relative; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 400 30px/1 var(--display); color: var(--cobalto); transition: rotate .25s; }
.perguntas details[open] summary::after { rotate: 45deg; }
.perguntas details p { padding: 0 0 22px; color: var(--tinta-2); max-width: 40em; }

/* ---------------------------------------------------------------- rodapé */
.rodape { background: var(--tinta); color: var(--porcelana); padding: 48px clamp(20px, 5vw, 80px); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.rodape .marca-nome { font-size: 30px; }
.rodape .aviso { margin-left: auto; font-size: 14px; color: #a9afb8; }

/* ---------------------------------------------------------------- revelar */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}