/* Chemetil — a página é a linha galvânica */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-italic-var.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --bg: #151a20;
  --bg2: #1c2229;
  --ink: #eeeae0;
  --ink-soft: rgba(238, 234, 224, .66);
  --line: rgba(238, 234, 224, .15);
  --m-dark: #5c430e;
  --m-mid: #d4a843;
  --m-hi: #f6e27a;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --sans: "Archivo", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --logo: "Avenir Next", "Avenir", Futura, "Century Gothic", sans-serif;
  --gut: clamp(20px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--m-hi); outline-offset: 3px; }
.inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------- menu: três cápsulas de vidro a flutuar ---------- */
.top { position: fixed; z-index: 20; top: 14px; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 0 var(--gut); font-size: 14px; font-stretch: 110%; font-weight: 500; pointer-events: none; }
.top > * { pointer-events: auto; }
.top .brand, .top .links, .langs { background: rgba(16,19,23,.58); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(238,234,224,.16); border-radius: 999px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.7); }
.top .brand { font-family: var(--logo); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--ink); padding: 12px 20px 12px 22px; margin-right: auto; transition: color .25s; }
.top .brand:hover { color: var(--m-hi); }
.top .links { display: flex; gap: 2px; padding: 5px; position: absolute; left: 50%; transform: translateX(-50%); }
.top .links a { padding: 8px 17px; border-radius: 999px; color: rgba(238,234,224,.8); transition: color .25s, background .25s; white-space: nowrap; }
.top .links a:hover { color: var(--ink); background: rgba(238,234,224,.09); }
.top .links a.cur { color: #0d0f12; background: linear-gradient(105deg, var(--m-mid), var(--m-hi) 55%, var(--m-mid)); }
.only-m { display: none; }
.langs { display: inline-flex; gap: 0; padding: 5px; }
.lang { font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 999px; color: rgba(238,234,224,.6); transition: color .25s, background .25s; }
.lang:hover { color: var(--ink); }
.lang.on { color: var(--ink); background: rgba(238,234,224,.16); }
.nav-cta { padding: 11px 22px !important; font-size: 14px !important; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(16,19,23,.58); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(238,234,224,.16); position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, top .3s; }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
.top.open .burger i:first-child { top: 21px; transform: rotate(45deg); }
.top.open .burger i:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1020px) {
  .top .nav-cta { display: none; }
  .top .burger { display: block; z-index: 2; }
  .top .brand, .langs { z-index: 2; }
  .top .links { position: fixed; inset: 0; transform: none; border-radius: 0; border: 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 90px var(--gut) 40px; background: rgba(13,15,18,.94); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .top.open .links { opacity: 1; visibility: visible; transition: opacity .3s; }
  .top .links a { font-family: var(--serif); font-style: italic; font-size: clamp(38px, 11vw, 60px); line-height: 1.15; padding: 4px 0; color: var(--ink); background: none !important; }
  .top .links a.cur { color: var(--m-hi); }
  .only-m { display: block; }
}

/* ---------- HERO ---------- */
.art { position: relative; min-height: 100vh; min-height: 100svh; background: #0a0b0e; overflow: hidden; display: flex; }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art .veil { position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(64% 42% at 50% 45%, rgba(6,7,9,.46) 0%, rgba(6,7,9,.18) 55%, transparent 78%),
    linear-gradient(180deg, rgba(6,7,9,.5), transparent 24%, transparent 62%, rgba(21,26,32,.7) 90%, var(--bg) 100%); }
.art .ui { position: relative; flex: 1; display: flex; flex-direction: column; padding-top: 64px; }

.hero-core { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--gut); }
.kicker { font-size: 14px; font-stretch: 118%; font-weight: 500; letter-spacing: .02em; color: rgba(238,234,224,.74); }

.wordmark { position: relative; display: inline-block; line-height: .96; text-align: center; font-size: clamp(48px, 9.6vw, 136px); font-weight: 700; margin: .36em 0 .44em; filter: drop-shadow(0 12px 34px rgba(0,0,0,.6)); }
.wm-cv { position: absolute; pointer-events: none; filter: drop-shadow(0 .05em .12em rgba(0,0,0,.55)); }
.wm-live { filter: none; }
.wm-live .hero-stroke { -webkit-text-stroke: 0; }
.wm-live .hero-fill, .wm-live .bond, .wm-live .m-anchor { visibility: hidden; animation: none; }
.wordmark .t { font-family: var(--logo); font-weight: 700; font-size: 1em; letter-spacing: .045em; }
.hero-stroke { display: block; color: transparent; -webkit-text-stroke: 1.6px rgba(240,234,214,.58); }
.hero-fill { position: absolute; inset: 0; color: transparent;
  background: linear-gradient(105deg, var(--m-dark) 0%, var(--m-mid) 26%, var(--m-hi) 46%, var(--m-mid) 62%, var(--m-dark) 100%);
  background-size: 240% auto; -webkit-background-clip: text; background-clip: text;
  clip-path: inset(100% 0 0 0);
  animation: plate 3s cubic-bezier(.55,.06,.28,1) .7s forwards, sheen 7s linear 3.4s infinite; }
@keyframes plate { to { clip-path: inset(0 0 0 0); } }
@keyframes sheen { to { background-position: 240% center; } }

.m-anchor { position: absolute; width: 0; height: 0; opacity: 0; animation: methyl-in 1.2s ease 3s forwards; }
.m-anchor.a12 { left: .36em; top: -.28em; }
.m-anchor.a9  { left: -.33em; top: .475em; }
.m-anchor.a6  { left: .36em; top: 1.26em; }
@keyframes methyl-in { to { opacity: 1; } }
.hM { position: absolute; transform: translate(-50%, -50%); font-family: var(--logo); font-weight: 700; font-size: .32em; color: transparent;
  background: linear-gradient(105deg, var(--m-dark) 0%, var(--m-mid) 26%, var(--m-hi) 46%, var(--m-mid) 62%, var(--m-dark) 100%);
  background-size: 240% auto; -webkit-background-clip: text; background-clip: text;
  animation: sheen 7s linear 3.4s infinite; }
.bond { position: absolute; background: var(--m-mid); opacity: 0; animation: methyl-in 1.2s ease 3s forwards; border-radius: .02em; }
.bond.b12 { left: .345em; top: -.09em; width: .03em; height: .19em; }
.bond.b9  { left: -.20em; top: .462em; width: .19em; height: .03em; }
.bond.b6  { left: .345em; top: .86em; width: .03em; height: .19em; }

.tagline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 3.6vw, 46px); line-height: 1.1; color: rgba(244,240,230,.95); margin: 0 0 16px; }
.sub { color: rgba(238,234,224,.7); max-width: 52ch; font-size: 16px; }

.cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.cta-row.start { justify-content: flex-start; }
/* botão principal: metal polido, com o brilho a atravessar ao passar o rato */
.cta { position: relative; display: inline-block; overflow: hidden; border: 0; border-radius: 999px; padding: 15px 32px; font-size: 15px; font-stretch: 110%; font-weight: 650; color: #0d0f12;
  background: linear-gradient(105deg, var(--m-mid) 0%, var(--m-hi) 38%, #fff 50%, var(--m-hi) 62%, var(--m-mid) 100%); background-size: 260% 100%; background-position: 100% 0;
  box-shadow: 0 12px 34px -12px var(--m-mid), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.18); transition: background-position .7s cubic-bezier(.2,.7,.2,1), transform .2s, box-shadow .3s; }
.cta:hover { background-position: 0 0; transform: translateY(-2px); box-shadow: 0 18px 40px -12px var(--m-mid), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.18); }
.cta:active { transform: translateY(1px); }
.cta.ghost { background: rgba(13,15,18,.4); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(238,234,224,.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cta.ghost:hover { box-shadow: inset 0 0 0 1px var(--m-hi); color: var(--m-hi); }

.finishes { padding: 22px var(--gut) 44px; text-align: center; }
.finishes .hint { font-size: 13px; font-stretch: 112%; color: rgba(238,234,224,.6); margin-bottom: 12px; }
.fin-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fin-row.left { justify-content: flex-start; margin-top: 22px; }
/* escolhas: cada uma leva uma gota do seu metal */
.fin, .dip { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 6px 17px 6px 7px; font-size: 14px; font-stretch: 110%; font-weight: 500; color: rgba(244,241,233,.88);
  background: rgba(13,15,18,.46); border: 1px solid rgba(238,234,224,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .25s, color .25s, background .25s, transform .2s; }
.fin::before, .dip::before { content: ""; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--sw, #888);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.fin:hover, .dip:hover { border-color: rgba(238,234,224,.6); color: #fff; transform: translateY(-2px); }
.fin:hover::before, .dip:hover::before { transform: scale(1.2) rotate(40deg); }
.fin:active, .dip:active { transform: translateY(1px); }
.fin.on, .dip.on { background: rgba(238,234,224,.16); border-color: var(--ink); color: #fff; }
.fin.on::before, .dip.on::before { box-shadow: inset 0 -3px 4px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.55), 0 0 0 2px #fff, 0 0 18px 2px var(--m-hi); }
[data-f="ouro"], [data-d="ouro"] { --sw: radial-gradient(circle at 32% 28%, #fff6c4, #d9ad45 46%, #6e4f06); }
[data-f="cobre"], [data-d="cobre"] { --sw: radial-gradient(circle at 32% 28%, #ffd2b8, #cc6138 46%, #52200f); }
[data-f="bronze"], [data-d="bronze"] { --sw: radial-gradient(circle at 32% 28%, #e8c391, #8f6229 46%, #2f1e0a); }
[data-f="niquel"], [data-d="niquel"] { --sw: radial-gradient(circle at 32% 28%, #fffdf2, #b3a994 46%, #4d4538); }
[data-f="cromo"], [data-d="cromo"] { --sw: radial-gradient(circle at 32% 28%, #ffffff, #a9bcd8 42%, #1d2532); }
[data-f="zinco"], [data-d="zinco"] { --sw: radial-gradient(circle at 32% 28%, #dcecf3, #74909d 46%, #28353d); }
[data-f="gunmetal"], [data-d="gunmetal"] { --sw: radial-gradient(circle at 32% 28%, #b4bdd0, #4a5160 46%, #14171d); }
[data-f="brancobronze"], [data-d="brancobronze"] { --sw: radial-gradient(circle at 32% 28%, #fffaec, #cfc5ab 46%, #6b6250); }
[data-f="oxid"], [data-d="oxid"] { --sw: radial-gradient(circle at 32% 28%, #8d7762, #3a2f27 46%, #0a0806); }
[data-d="prep"] { --sw: radial-gradient(circle at 32% 28%, #cfeeee, #4f8f92 46%, #173538); }
[data-d="topcoat"] { --sw: radial-gradient(circle at 30% 26%, #fff 0 12%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.3)); }

/* ---------- BANCADA: escolher um banho e ver a peça mergulhar ---------- */
.bench { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 !important; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(55% 70% at 72% 50%, #1e242c 0%, var(--bg) 72%); }
#bath { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#bath:active { cursor: grabbing; }
.bench-ui { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 92px var(--gut) 44px; pointer-events: none; text-shadow: 0 1px 20px rgba(0,0,0,.35); }
.bench-ui > * { max-width: min(620px, 50vw); }
.bench-ui button { pointer-events: auto; }
.bench h2 { font-size: clamp(36px, 4.4vw, 64px); max-width: none; }
.bench .sec-sub { margin-top: 12px; }
.groups { margin-top: 20px; }
.grp { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 6px 14px; padding: 9px 0; border-top: 1px solid rgba(244,241,233,.2); }
.grp h3 { font-size: 13.5px; font-weight: 500; font-stretch: 112%; color: rgba(244,241,233,.72); }
.grp .fin-row.left { margin-top: 0; }
.bench-info { margin-top: 0; padding-top: 16px; border-top: 1px solid rgba(244,241,233,.2); min-height: 138px; }
.bench-info h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; }
.bench-info p { margin-top: 10px; color: rgba(244,241,233,.88); }
.bench-info .app { font-size: 14px; font-stretch: 110%; color: rgba(244,241,233,.66); }
.bench.nogl #bath { display: none; }
@media (max-width: 899px) {
  .bench { align-items: flex-start; }
  .bench-ui { padding: 350px var(--gut) 56px; }
  .bench-ui > * { max-width: none; }
  .grp { grid-template-columns: 1fr; }
  .bench.nogl .bench-ui { padding-top: 96px; }
}

/* ---------- SECÇÕES ---------- */
section { padding: clamp(84px, 12vw, 150px) 0; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; max-width: 15ch; }
.lab h2, .cat h2 { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, var(--m-hi) 50%, var(--ink) 58%, var(--ink) 100%); background-size: 300% 100%; background-position: 100% 0; padding-bottom: .08em; }
.lab h2.in, .cat h2.in { animation: sweep 1.6s cubic-bezier(.4,.1,.2,1) forwards; }
@keyframes sweep { to { background-position: 0 0; } }
.sec-sub { color: var(--ink-soft); max-width: 46ch; margin-top: 22px; font-size: 17px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Laboratório */
.lab { background: var(--bg2); }
.chart { position: relative; margin-top: 48px; }
.chart canvas { display: block; width: 100%; height: 230px; }
.chart .readout { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.chart .lbl { font-size: 13.5px; font-stretch: 112%; color: var(--ink-soft); }
.chart .val { font-size: 44px; font-weight: 300; font-stretch: 112%; font-variant-numeric: tabular-nums; line-height: 1; color: var(--m-hi); transition: color .3s; }
.chart .val.out { color: #ff7a5c; }
.chart .tag { position: absolute; font-size: 12px; font-stretch: 110%; color: var(--ink-soft); pointer-events: none; }
.chart .tag.band { right: 6px; top: calc(56px + 230px * .73); }
.chart-foot { display: flex; gap: 20px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.chart figcaption { font-size: 14px; color: var(--ink-soft); max-width: 34ch; flex: 1 1 220px; }
#dosebtn { padding: 12px 24px; font-size: 14px; }
#dosebtn.urge { background: #ff7a5c; animation: urge 1s ease-in-out infinite; }
@keyframes urge { 50% { box-shadow: 0 0 0 8px rgba(255,122,92,.18); } }
.rows .row { padding: 26px 0 28px; border-top: 1px solid var(--line); transition: padding-left .35s ease; }
.rows .row:hover { padding-left: 14px; }
.rows .row:hover dt { color: var(--m-hi); }
.rows dt { transition: color .3s; }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.rows dt { font-family: var(--serif); font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; margin-bottom: 10px; }
.rows dd { color: var(--ink-soft); max-width: 52ch; }

/* Catálogo */
.cat { background: var(--bg2); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 64px; }
.trio > div { border-top: 2px solid var(--line); padding-top: 22px; position: relative; transition: transform .35s ease; }
.trio > div::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--m-dark), var(--m-hi), var(--m-mid)); transform: scaleX(.18); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.trio > div:hover { transform: translateY(-4px); }
.trio > div:hover::before { transform: scaleX(1); }
.trio h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; margin-bottom: 12px; }
.trio p { color: var(--ink-soft); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; margin-top: 40px; } }

/* Ateliê */
.atelier h2 { max-width: none; font-size: clamp(15px, 1.2vw, 17px); font-family: var(--sans); font-weight: 500; font-stretch: 112%; letter-spacing: 0; color: var(--m-mid); line-height: 1.4; }
.editorial { font-family: var(--serif); font-size: clamp(27px, 3.9vw, 56px); line-height: 1.16; letter-spacing: -.008em; color: var(--ink); margin-top: 28px; max-width: 24ch; max-width: min(100%, 21em); text-wrap: pretty; }
.editorial + .editorial { margin-top: .7em; font-style: italic; }
.editorial .w { color: rgba(238,234,224,.2); transition: color .5s ease; }
.editorial .w.lit { color: var(--ink); }
.editorial + .editorial .w.lit { color: var(--m-hi); }

/* Contacto */
.contact { position: relative; overflow: hidden; background: #0a0b0e; }
#gl2 { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.veil2 { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, rgba(16,19,23,.35) 30%, rgba(16,19,23,.35) 75%, var(--bg) 100%), linear-gradient(90deg, rgba(6,7,9,.55), transparent 60%); }
.contact .inner { position: relative; }
.contact .sec-sub { color: rgba(238,234,224,.85); }
.cform { background: rgba(13,15,18,.66); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--line); padding: clamp(22px, 3vw, 38px); }
.cform label { display: block; margin-bottom: 20px; }
.cform label span { display: block; font-size: 13.5px; font-stretch: 112%; font-weight: 500; color: var(--ink-soft); margin-bottom: 8px; }
.cform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform input, .cform textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(238,234,224,.34); border-radius: 0; color: var(--ink); font: inherit; font-size: 17px; padding: 8px 0 10px; transition: border-color .3s; resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--m-hi); box-shadow: 0 1px 0 var(--m-hi); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fmsg { margin-top: 18px; font-size: 15px; color: var(--m-hi); min-height: 1.6em; }
@media (max-width: 560px) { .cform .frow { grid-template-columns: 1fr; gap: 0; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 34px 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* wordmark do hero em miniatura — reutiliza .bond/.m-anchor/.hM */
.fmark.mini { font-size: 16px; font-weight: 700; margin: .3em .2em .3em .6em; filter: none; }
.fmark.mini .hM { font-size: .5em; }
.fmark.mini .m-anchor, .fmark.mini .bond { animation: none; opacity: 1; }
.fmark.mini .bond.b12, .fmark.mini .bond.b6 { width: 1px; }
.fmark.mini .bond.b9 { height: 1px; }
.fnote, .fcopy { font-size: 13px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; }
  .hero-fill { clip-path: inset(0 0 0 0); }
  .panel > * { opacity: 1; transform: none; }
}

/* hero em ecrãs estreitos: espaço para o H das 12h e mais contraste no texto */
@media (max-width: 720px) {
  .kicker { margin-bottom: 14px; font-size: 13px; }
  .art .veil { background:
    radial-gradient(90% 46% at 50% 44%, rgba(6,7,9,.62) 0%, rgba(6,7,9,.3) 60%, transparent 85%),
    linear-gradient(180deg, rgba(6,7,9,.5), transparent 24%, transparent 62%, rgba(21,26,32,.7) 90%, var(--bg) 100%); }
  .gstage { background: linear-gradient(var(--bg) 88%, transparent); }
}

/* hero com a peça: texto à esquerda, fivela à direita */
.art .ui { pointer-events: none; }
.art .ui a, .art .ui button { pointer-events: auto; }
#heropiece { touch-action: pan-y; cursor: grab; }
@media (min-width: 900px) {
  .hero-core { align-items: flex-start; text-align: left; padding-left: max(var(--gut), calc((100vw - 1180px) / 2 + var(--gut))); max-width: 62%; }
  .wordmark { font-size: clamp(44px, 6.3vw, 98px); margin-left: .42em; }
  .hero-core .cta-row { justify-content: flex-start; }
  .finishes { text-align: left; padding-left: max(var(--gut), calc((100vw - 1180px) / 2 + var(--gut))); }
  .finishes .fin-row { justify-content: flex-start; }
  .art .veil { background:
    radial-gradient(30% 46% at 73% 48%, rgba(6,7,9,.78) 0%, rgba(6,7,9,.45) 55%, transparent 100%),
    linear-gradient(90deg, rgba(6,7,9,.5) 0%, rgba(6,7,9,.22) 45%, transparent 70%),
    linear-gradient(180deg, rgba(6,7,9,.5), transparent 24%, transparent 62%, rgba(21,26,32,.7) 90%, var(--bg) 100%); }
}
@media (max-width: 899px) {
  .hero-core { justify-content: flex-end; padding-top: 30vh; }
  .art .veil { background:
    radial-gradient(70% 24% at 50% 23%, rgba(6,7,9,.74) 0%, transparent 100%),
    radial-gradient(90% 46% at 50% 60%, rgba(6,7,9,.62) 0%, rgba(6,7,9,.3) 60%, transparent 85%),
    linear-gradient(180deg, rgba(6,7,9,.5), transparent 24%, transparent 62%, rgba(21,26,32,.7) 90%, var(--bg) 100%); }
}

/* bancada: escolher a peça (controlo segmentado) */
.pick { border-radius: 999px; padding: 8px 18px; font-size: 14px; font-stretch: 110%; font-weight: 500; color: rgba(244,241,233,.86); background: rgba(13,15,18,.46); border: 1px solid rgba(238,234,224,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, color .25s, border-color .25s, transform .2s; pointer-events: auto; }
.pick:hover { border-color: rgba(238,234,224,.6); transform: translateY(-2px); }
.pick.on { background: var(--ink); border-color: var(--ink); color: #0d0f12; }

/* corrente nos botões: arcos desenhados num canvas por cima de tudo */
.zap-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; mix-blend-mode: screen; }
.zapped { animation: buzz .32s steps(2, end); }
@keyframes buzz { 0% { filter: brightness(1.7); } 25% { filter: brightness(.95); } 50% { filter: brightness(1.45); } 100% { filter: none; } }
.shock { animation: shock .45s ease-out; }
@keyframes shock { 0% { filter: brightness(2.2) saturate(1.4); transform: scale(.97); } 30% { filter: brightness(1.3); } 100% { filter: none; transform: none; } }

/* botão de início: o símbolo CH₃ em metal, sem a palavra */
.top .brand { width: 54px; height: 54px; padding: 0; margin-right: auto; display: grid; place-items: center; border-radius: 50%; }
.bmark { font-size: 24px; margin: 0 0 0 .26em; filter: none; line-height: 1; }
.bmark .t, .bmark .hM { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(105deg, var(--m-mid) 0%, var(--m-hi) 45%, #fff 52%, var(--m-hi) 60%, var(--m-mid) 100%); background-size: 240% auto; animation: sheen 7s linear infinite; }
.bmark .hM { font-size: .42em; }
.bmark .m-anchor, .bmark .bond { animation: none; opacity: 1; }
.bmark .bond { background: var(--m-hi); }
.bmark .bond.b12, .bmark .bond.b6 { width: 1.2px; }
.bmark .bond.b9 { height: 1.2px; }
.top .brand:hover .bmark { transform: scale(1.08); }
.bmark { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
/* o selector de secções ao centro saiu; no telemóvel fica o menu ☰ */
@media (min-width: 1021px) { .top .links { display: none; } }

.cta:disabled { opacity: .6; cursor: progress; transform: none; }