/* Base: template Hushkey da 8B (MIT, https://github.com/8bsite/product-landing-page-template). Tokens, átomos, layout e nav sem alteração; seções reescritas para a Audiofix. */
/* latin-ext */
@font-face {
  font-family: 'Mozilla Headline';
  font-style: normal;
  font-weight: 700;
  font-stretch: 75%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillaheadline/v1/QGYLz-UXahmCOps4kyMKGuSA9pYt2_P-w2kFrS88o6dLYRvBSDSOuerB_FOBB4ElbBZuhco.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mozilla Headline';
  font-style: normal;
  font-weight: 700;
  font-stretch: 75%;
  font-display: swap;
  src: url(../fonts/af-headline-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Mozilla Text';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillatext/v1/SZc-3FrnJ7S7WZIff2mJ7TbD4RNKuCc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mozilla Text';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/af-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer tokens, base, atoms, layout, sections, scenes;
@layer tokens {
:root {
  --color-1: #e4e5e8;
  --color-2: #232427;
  --color-3: #fbfbfc;
  --color-4: #8d8e93;
  --color-5: #55565b;
  --color-6: #b4b5b9;
  --color-7: #2c2d31;
  --color-8: #a9abb0;
  --color-9: #121315;
  --font-1: "Mozilla Headline", "Mozilla Headline Fallback", "Arial Narrow", Arial, sans-serif;
  --font-2: "Mozilla Text", "Mozilla Text Fallback", Arial, sans-serif;
  --radius-1: 999px;
  --radius-2: 26px;
  --radius-3: 34px;
  --shadow-1: 0 .5em .9em -.3em color-mix(in srgb, var(--color-2) 34%, transparent), 0 .1em .18em color-mix(in srgb, var(--color-2) 14%, transparent), inset 0 .1em .08em var(--color-3), inset 0 -.14em .3em color-mix(in srgb, var(--color-2) 9%, transparent);
  --shadow-2: inset 0 .28em .5em color-mix(in srgb, var(--color-2) 26%, transparent), inset 0 -.12em .16em var(--color-3);
  --shadow-3: inset 0 .5em 1em color-mix(in srgb, var(--color-2) 20%, transparent), inset 0 -.2em .3em var(--color-3);
  --shadow-4: 0 .5em .9em -.25em color-mix(in srgb, var(--color-9) 85%, transparent), inset 0 .08em .06em color-mix(in srgb, var(--color-3) 16%, transparent), inset 0 -.14em .3em color-mix(in srgb, var(--color-9) 40%, transparent);
  --shadow-5: inset 0 .28em .5em color-mix(in srgb, var(--color-9) 75%, transparent), inset 0 -.1em .14em color-mix(in srgb, var(--color-3) 10%, transparent);
  --shadow-6: 0 2px 1px var(--color-3), 0 -1px 1px color-mix(in srgb, var(--color-2) 30%, transparent);
  --shadow-7: 0 2px 1px color-mix(in srgb, var(--color-3) 12%, transparent), 0 -1px 1px var(--color-9);
  --shadow-8: 0 18px 40px -18px color-mix(in srgb, var(--color-2) 32%, transparent), 0 2px 4px color-mix(in srgb, var(--color-2) 8%, transparent), inset 0 1px 0 var(--color-3);
  --space-1: clamp(104px, 15vh, 176px);
  --space-2: clamp(16px, 4vw, 48px);
}
}
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--color-1); color: var(--color-2); font-family: var(--font-2); font-size: 17px; line-height: 1.55; font-weight: 400; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-2); outline-offset: 4px; }
@font-face { font-family: "Mozilla Headline Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 70.9%; ascent-override: 134%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: "Mozilla Text Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 103.3%; ascent-override: 91.9%; descent-override: 25.2%; line-gap-override: 0%; }
@font-face { font-family: "Mozilla Text Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 106.6%; ascent-override: 89.2%; descent-override: 24.4%; line-gap-override: 0%; }
}
@layer atoms {
.m-text { font-family: var(--font-2); font-stretch: 100%; font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; font-style: normal; max-width: 34em; text-wrap: pretty; }
.m-text-2 { font-family: var(--font-1); font-stretch: 75%; font-size: clamp(48px, 6.2vw, 92px); font-weight: 700; line-height: .9; letter-spacing: -.005em; text-transform: none; font-style: normal; color: var(--color-5); text-shadow: var(--shadow-6); text-wrap: balance; }
.m-text-3 { font-family: var(--font-2); font-stretch: 100%; font-size: 13px; font-weight: 300; line-height: 1.4; letter-spacing: .42em; text-transform: uppercase; font-style: normal; }
.m-text-4 { font-family: var(--font-2); font-stretch: 100%; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.m-text-5 { font-family: var(--font-1); font-stretch: 75%; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: .005em; text-transform: none; font-style: normal; }
.m-text-6 { font-family: var(--font-1); font-stretch: 75%; font-size: clamp(48px, 6.2vw, 92px); font-weight: 700; line-height: .9; letter-spacing: -.005em; text-transform: none; font-style: normal; color: var(--color-1); text-shadow: var(--shadow-7); text-wrap: balance; }
.m-text-7 { font-family: var(--font-2); font-stretch: 100%; font-size: 20px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; font-style: normal; max-width: 28em; text-wrap: pretty; }
.m-text-8 { font-family: var(--font-2); font-stretch: 100%; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--color-5); }
.m-text-9 { font-family: var(--font-2); font-stretch: 100%; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--color-8); }

.m-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 0; border-radius: var(--radius-1); background: linear-gradient(180deg, var(--color-3), var(--color-1) 72%); box-shadow: var(--shadow-1); color: var(--color-2); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.m-btn__dent { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-1), var(--color-2) 10%), var(--color-1) 55%, var(--color-3)); box-shadow: var(--shadow-2); opacity: 0; transition: opacity .35s ease; }
.m-btn__label { transition: transform .35s ease; }
@media (hover: hover) { .m-btn:hover .m-btn__dent { opacity: .6; } .m-btn:hover .m-btn__label { transform: translateY(1px); } }
.m-btn:active .m-btn__dent { opacity: 1; transition-duration: .08s; }
.m-btn:active .m-btn__label { transform: translateY(2px); transition-duration: .08s; }
.m-btn-2 { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 0; border-radius: var(--radius-1); background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-3) 9%), var(--color-7) 72%); box-shadow: var(--shadow-4); color: var(--color-1); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.m-btn-2__dent { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-9) 45%), var(--color-7)); box-shadow: var(--shadow-5); opacity: 0; transition: opacity .35s ease; }
.m-btn-2__label { transition: transform .35s ease; }
@media (hover: hover) { .m-btn-2:hover .m-btn-2__dent { opacity: .6; } .m-btn-2:hover .m-btn-2__label { transform: translateY(1px); } }
.m-btn-2:active .m-btn-2__dent { opacity: 1; transition-duration: .08s; }
.m-btn-2:active .m-btn-2__label { transform: translateY(2px); transition-duration: .08s; }
.m-link { display: inline-block; padding-bottom: 3px; color: inherit; font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s ease; }
@media (hover: hover) { .m-link:hover { background-size: 100% 3px; } }

.m-key { position: relative; display: inline-grid; place-items: center; inline-size: 4.6em; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-4); font-family: var(--font-2); font-stretch: 100%; font-weight: 400; line-height: 1; -webkit-tap-highlight-color: transparent; }
.m-key__cap { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); }
.m-key__dent { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-1), var(--color-2) 11%), var(--color-1) 52%, var(--color-3)); box-shadow: var(--shadow-2); opacity: 0; }
.m-key__label { position: relative; display: grid; place-items: center; font-size: 1.05em; letter-spacing: .04em; }
.m-key__label svg { inline-size: 1.55em; height: auto; fill: currentColor; }
.m-key.is-on .m-key__dent, .m-key[aria-pressed="true"] .m-key__dent, .m-key[aria-expanded="true"] .m-key__dent { opacity: 1; }
button.m-key { cursor: pointer; color: var(--color-5); }
button.m-key .m-key__dent { transition: opacity .25s ease; }
button.m-key::after { content: ""; position: absolute; inset: -.3em; border: 1.5px solid var(--color-4); border-radius: inherit; opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease; }
@media (hover: hover) { button.m-key:hover::after { opacity: 1; transform: none; } }
button.m-key:active .m-key__dent { opacity: 1; }
.m-key-2 { position: relative; display: grid; grid-template-rows: 1fr auto; align-items: start; justify-items: start; inline-size: 100%; aspect-ratio: 1; padding: 18px 18px 16px; border: 0; border-radius: var(--radius-2); background: none; color: var(--color-2); font-family: var(--font-2); font-size: 16px; text-align: left; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.m-key-2__cap { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); }
.m-key-2__dent { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-1), var(--color-2) 11%), var(--color-1) 52%, var(--color-3)); box-shadow: var(--shadow-2); opacity: 0; transition: opacity .3s ease; }
.m-key-2__label { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; transition: transform .3s ease; }
.m-key-2__state { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--color-5); }
.m-key-2__on { display: none; }
.m-key-2[aria-pressed="true"] .m-key-2__dent { opacity: 1; }
.m-key-2[aria-pressed="true"] .m-key-2__label { transform: translateY(2px); }
.m-key-2[aria-pressed="true"] .m-key-2__on { display: inline; color: var(--color-2); }
.m-key-2[aria-pressed="true"] .m-key-2__off { display: none; }
@media (hover: hover) { .m-key-2:hover .m-key-2__dent { opacity: .6; } .m-key-2[aria-pressed="true"]:hover .m-key-2__dent { opacity: .85; } }
.m-key-2:active .m-key-2__dent { opacity: 1; transition-duration: .08s; }
.m-key-3 { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 3.1em; aspect-ratio: 1; border-radius: 50%; color: var(--color-8); font-size: 16px; }
.m-key-3__cap { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-3) 10%), var(--color-7) 70%); box-shadow: var(--shadow-4); }
.m-key-3__dent { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-9) 45%), var(--color-7)); box-shadow: var(--shadow-5); opacity: 0; transition: opacity .3s ease; }
.m-key-3__label { position: relative; display: grid; place-items: center; }
.m-key-3__label svg { inline-size: 1.15em; height: auto; fill: currentColor; }
.m-key-3::after { content: ""; position: absolute; inset: -.3em; border: 1.5px solid var(--color-8); border-radius: inherit; opacity: 0; transform: scale(.9); transition: opacity .3s ease, transform .3s ease; }
@media (hover: hover) { :hover > .m-key-3::after { opacity: 1; transform: none; } }
.m-well { position: relative; display: inline-flex; gap: .6em; padding: .6em; border: 1.5px solid var(--color-4); border-radius: var(--radius-1); }
.m-tick { display: inline-grid; justify-items: center; gap: 8px; font-family: var(--font-2); font-stretch: 100%; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.m-tick__line { inline-size: 1.5px; block-size: 30px; background: var(--color-4); transform-origin: 50% 0; }
.m-photo { position: relative; padding: 10px; border-radius: var(--radius-3); background: var(--color-1); box-shadow: var(--shadow-3); font-size: 16px; }
.m-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
.m-surface { background: linear-gradient(180deg, var(--color-3), var(--color-1) 46%); box-shadow: var(--shadow-8); border-radius: var(--radius-3); color: var(--color-2); }
.m-field { display: block; inline-size: 100%; min-height: 56px; padding: 15px 22px; border: 0; border-radius: var(--radius-1); background: var(--color-7); box-shadow: var(--shadow-5); color: var(--color-1); font-family: var(--font-2); font-size: 16px; line-height: 1.4; appearance: none; }
textarea.m-field { min-height: 150px; border-radius: var(--radius-2); resize: vertical; }
select.m-field { background-image: linear-gradient(45deg, transparent 50%, var(--color-8) 50%), linear-gradient(-45deg, transparent 50%, var(--color-8) 50%); background-position: right 26px top 50%, right 20px top 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 48px; }
.m-field::placeholder { color: var(--color-8); }
}
@layer layout {
.wrap { inline-size: 100%; max-inline-size: 1280px; margin-inline: auto; padding-inline: var(--space-2); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@layer sections {
#nav .nav__bar { position: fixed; inset: 14px var(--space-2) auto; z-index: 50; max-inline-size: 1184px; margin-inline: auto; display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 6px 6px 6px 26px; border-radius: var(--radius-1); }
#nav .nav__brand { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .03em; color: var(--color-5); text-shadow: var(--shadow-6); text-decoration: none; }
#nav .nav__links { margin-left: auto; }
#nav .nav__links ul { display: flex; gap: 26px; }
#nav .nav__links .m-link { font-size: 15px; }
#nav .nav__cta { min-height: 50px; font-size: 15px; }
#nav .nav__open, #nav .nav__close { display: none; font-size: 12px; }
#nav .nav__menu-title { display: none; }
@media (max-width: 899px) {
  #nav .nav__bar { min-height: 60px; gap: 10px; padding-left: 20px; }
  #nav .nav__brand { font-size: 24px; }
  #nav .nav__cta { margin-left: auto; min-height: 46px; padding-inline: 20px; }
  #nav .nav__open { display: inline-grid; inline-size: 46px; font-size: 10px; }
  #nav .nav__links { position: fixed; inset: 0; z-index: 60; display: none; margin: 0; padding: 26px var(--space-2) 40px; background: var(--color-1); overflow-y: auto; }
  #nav[data-open] .nav__links { display: grid; align-content: start; gap: 40px; }
  #nav .nav__menu-head { display: flex; align-items: center; justify-content: space-between; }
  #nav .nav__menu-title { display: block; font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 26px; color: var(--color-5); text-shadow: var(--shadow-6); }
  #nav .nav__close { display: inline-grid; inline-size: 46px; font-size: 10px; }
  #nav .nav__links ul { flex-direction: column; gap: 6px; }
  #nav .nav__links .m-link { font-family: var(--font-1); font-stretch: 75%; font-size: 44px; font-weight: 700; padding-bottom: 6px; }
}
@media (min-width: 900px) { #nav .nav__menu-head { display: none; } }
}

/* ---------- Audiofix: tokens extras (só azul do LCD, verde do LED e vermelho da marca) ---------- */
@layer tokens {
:root {
  --brand-red: #d0102a;
  --lcd-1: #6b97ff;
  --lcd-2: #2c5ef0;
  --lcd-3: #1f49cf;
  --lcd-off: #1b2438;
  --lcd-ink: #f3f7ff;
  --led-on: #38d65a;
  --font-logo: "Michroma", "Mozilla Headline", Arial, sans-serif;
}
}
@layer atoms {
.m-key[aria-checked="true"] .m-key__dent { opacity: 1; }
button.m-key[aria-checked="true"] { color: var(--color-2); }
.af-logo { display: inline-grid; justify-items: stretch; gap: .28em; text-decoration: none; color: var(--color-2); line-height: 1; }
.af-logo__name { font-family: var(--font-logo); font-size: 1em; letter-spacing: .06em; font-weight: 400; }
.af-logo__rule { block-size: 2px; background: var(--brand-red); }
.af-logo__sub { font-family: var(--font-logo); font-size: .3em; letter-spacing: .5em; text-align: center; margin-right: -.5em; }
.led { position: relative; display: inline-block; inline-size: 1em; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--color-1), var(--color-2) 22%); box-shadow: var(--shadow-2); transition: background .25s ease, box-shadow .25s ease; }
.led.is-on { background: radial-gradient(circle at 40% 35%, #c9ffd3, var(--led-on) 55%, #1f9c3c); box-shadow: 0 0 .5em color-mix(in srgb, var(--led-on) 70%, transparent), 0 0 1.4em color-mix(in srgb, var(--led-on) 35%, transparent); }
.led.is-blink { animation: led-blink .5s steps(1, end) infinite; }
@keyframes led-blink { 50% { background: color-mix(in srgb, var(--color-1), var(--color-2) 22%); box-shadow: var(--shadow-2); } }
.lcd { position: relative; display: grid; place-items: center; padding: .7em; border-radius: 1.1em; background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-3) 8%), var(--color-9)); box-shadow: var(--shadow-4); }
.lcd__screen { position: relative; display: flex; align-items: center; justify-content: center; gap: .35em; inline-size: 100%; block-size: 100%; padding: .55em 1.6em .55em .9em; border-radius: .45em; background: var(--lcd-off); box-shadow: inset 0 .2em .5em rgba(0,0,0,.55); transition: background .45s ease; overflow: hidden; }
.lcd.is-on .lcd__screen { background: radial-gradient(120% 140% at 30% 20%, var(--lcd-1), var(--lcd-2) 55%, var(--lcd-3)); }
.lcd__digits { display: flex; gap: .3em; block-size: 100%; }
.lcd__digit { block-size: 100%; inline-size: auto; aspect-ratio: 12 / 20; overflow: visible; }
.lcd__digit rect { fill: var(--lcd-ink); opacity: .06; transition: opacity .12s linear; }
.lcd.is-on .lcd__digit rect { opacity: .1; }
.lcd.is-on .lcd__digit rect.on { opacity: 1; }
.lcd.is-on .lcd__digits { filter: drop-shadow(0 0 .12em rgba(255,255,255,.55)); }
.lcd__unit { position: absolute; right: .6em; bottom: .45em; font-family: var(--font-2); font-size: .9em; font-weight: 600; color: var(--lcd-ink); opacity: .08; }
.lcd.is-on .lcd__unit { opacity: .95; }
.soft-range { inline-size: 100%; block-size: 4.2em; margin: 0; padding: 0 .55em; border-radius: var(--radius-1); background: var(--color-1); box-shadow: var(--shadow-3); appearance: none; -webkit-appearance: none; cursor: grab; font-size: 1em; touch-action: pan-y; }
.soft-range:active { cursor: grabbing; }
.soft-range::-webkit-slider-runnable-track { block-size: 100%; background: transparent; border: 0; }
.soft-range::-moz-range-track { block-size: 100%; background: transparent; border: 0; }
.soft-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 6.4em; block-size: 3.1em; margin-top: .55em; border: 0; border-radius: var(--radius-1); background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); }
.soft-range::-moz-range-thumb { inline-size: 6.4em; block-size: 3.1em; border: 0; border-radius: var(--radius-1); background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); }
.soft-range:focus-visible { outline: 2px solid var(--color-2); outline-offset: 4px; }
.soft-input { inline-size: 100%; min-height: 56px; padding: 14px 22px; border: 0; border-radius: var(--radius-1); background: var(--color-1); box-shadow: var(--shadow-3); font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 30px; line-height: 1; color: var(--color-2); appearance: textfield; -moz-appearance: textfield; }
.soft-input::-webkit-outer-spin-button, .soft-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}

/* ---------- hero: painel frontal do Condicionador em soft-UI ---------- */
@layer sections {
#hero { position: relative; z-index: 2; min-height: 100svh; padding: 132px 0 64px; background: linear-gradient(180deg, var(--color-6), var(--color-1) 48%); display: grid; align-items: center; }
#hero .hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 48px; }
#hero .hero__title { font-size: clamp(56px, 6.6vw, 100px); max-width: none; }
#hero .hero__line { white-space: nowrap; }
#hero .hero__line { display: block; }
#hero .hero__caption { margin-top: 26px; color: var(--color-5); }
#hero .hero__lede { margin-top: 30px; }
#hero .hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
#hero .hero__note { margin-top: 22px; }
#hero .hero__stage { position: relative; }
#hero .hero__photo { aspect-ratio: 16 / 11.5; }
#hero .hero__photo img { object-position: 50% 60%; }
#hero .hero__chip { position: absolute; right: 26px; bottom: -26px; display: grid; gap: 4px; padding: 16px 22px 18px; border-radius: var(--radius-2); }
#hero .hero__chip b { font-family: var(--font-1); font-stretch: 75%; font-size: 44px; line-height: 1; color: var(--color-2); }
#hero .hero__lede { max-width: 30em; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-photo { from { transform: scale(.94) translateY(1.4em); opacity: 0; } }
  #hero .hero__stage { animation: hero-photo 1s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
}
#painel .hero__panel { position: relative; inline-size: 38em; font-size: clamp(9px, 1.15vw, 16px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.2em 3.2em; padding: 3.2em 3em 2.8em; border-radius: 3.2em; background: linear-gradient(180deg, var(--color-3), var(--color-1) 40%); box-shadow: var(--shadow-8); }
#painel .hp__power { display: grid; justify-items: center; align-content: start; gap: 1.1em; }
#painel .hp__power .m-tick, #painel .hp__out .m-tick { font-size: .82em; }
#painel .hp__power .m-tick__line, #painel .hp__out .m-tick__line { block-size: 1.6em; }
#painel .hp__power .led { font-size: 1.15em; }
#painel .rocker { position: relative; display: grid; grid-template-rows: 1fr 1fr; inline-size: 5em; block-size: 8.4em; padding: .55em; border: 1.5px solid var(--color-4); border-radius: 1.6em; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: 1em; }
#painel .rocker__half { position: relative; display: grid; place-items: center; color: var(--color-5); }
#painel .rocker__half::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); transition: box-shadow .25s ease, background .25s ease; }
#painel .rocker__half--i::before { border-radius: 1.1em 1.1em .3em .3em; }
#painel .rocker__half--o::before { border-radius: .3em .3em 1.1em 1.1em; }
#painel .rocker__half svg { position: relative; inline-size: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.4; }
#painel .rocker[aria-pressed="true"] .rocker__half--i::before, #painel .rocker[aria-pressed="false"] .rocker__half--o::before { background: linear-gradient(180deg, color-mix(in srgb, var(--color-1), var(--color-2) 11%), var(--color-1) 52%, var(--color-3)); box-shadow: var(--shadow-2); }
#painel .rocker[aria-pressed="true"] .rocker__half--i, #painel .rocker[aria-pressed="false"] .rocker__half--o { color: var(--color-2); }
#painel .rocker::after { content: ""; position: absolute; inset: -.35em; border: 1.5px solid var(--color-4); border-radius: 1.9em; opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; }
@media (hover: hover) { #painel .rocker:hover::after { opacity: 1; transform: none; } }
#painel .rocker.is-hint::after { animation: rocker-hint 1.6s ease-in-out infinite; }
@keyframes rocker-hint { 50% { opacity: 1; transform: none; } }
#painel .hp__out { display: grid; justify-items: center; align-content: start; gap: 1.1em; }
#painel .hp__out .lcd { inline-size: 100%; max-inline-size: 19em; block-size: 9.6em; }
#painel .hp__print { grid-column: 1 / -1; margin-top: -.4em; font-family: var(--font-2); font-size: .82em; font-weight: 600; letter-spacing: .2em; line-height: 1.5; color: var(--color-5); text-shadow: var(--shadow-6); }
#painel .hp__rede { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1em 1.6em; padding-top: 2em; border-top: 1.5px solid color-mix(in srgb, var(--color-4) 55%, transparent); }
#painel .hp__net .m-key { inline-size: 3.9em; font-size: 1em; }
#painel .hp__net .m-key__label { font-size: .95em; font-weight: 600; }
#painel .hp__track { position: relative; }
#painel .hp__band { position: absolute; left: 0; right: 0; top: calc(100% + .7em); block-size: 1.4em; font-family: var(--font-2); font-size: .78em; letter-spacing: .08em; color: var(--color-5); }
#painel .hp__band span { position: absolute; transform: translateX(-50%); }
#painel .hp__band i { position: absolute; top: -.55em; block-size: 1.5px; background: var(--color-4); }
#painel .hp__read { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1.6em; margin-top: 1.6em; font-family: var(--font-2); font-size: .9em; letter-spacing: .1em; text-transform: uppercase; color: var(--color-5); }
#painel .hp__read b { color: var(--color-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#painel .hero__status { min-height: 3em; max-width: 38em; justify-self: center; text-align: center; font-size: 15px; }
@media (max-width: 899px) {
  #hero { padding: 104px 0 36px; align-items: start; }
  #hero .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #hero .hero__copy { display: contents; }
  #hero .hero__title { order: 1; } #hero .hero__caption { order: 2; } #hero .hero__stage { order: 3; margin-top: 22px; }
  #hero .hero__lede { order: 4; margin-top: 30px !important; } #hero .hero__actions { order: 5; } #hero .spec { order: 6; }
  #hero .hero__photo { aspect-ratio: 16 / 10.5; padding: 7px; }
  #hero .hero__chip { right: 14px; bottom: -22px; padding: 10px 14px 12px; gap: 2px; }
  #hero .hero__chip b { font-size: 30px; } #hero .hero__chip .m-text-8 { font-size: 12.5px; }
  #hero .hero__title { font-size: clamp(46px, 13.4vw, 84px); }
  #hero .hero__caption { margin-top: 16px; font-size: 11px; letter-spacing: .3em; }
  #hero .hero__lede { margin-top: 16px; font-size: 17px; }
  #hero .hero__actions { margin-top: 20px; }
  #hero .hero__note { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-settle { from { transform: translateY(.34em); opacity: 0; } }
  @keyframes hero-swell { from { transform: scale(.94) translateY(1.2em); opacity: 0; } }
  #hero .hero__line { animation: hero-settle .8s cubic-bezier(.2, .7, .2, 1) backwards; }
  #hero .hero__line:nth-child(2) { animation-delay: .06s; }
  #hero .hero__line:nth-child(3) { animation-delay: .12s; }
}
}

/* ---------- states: 4 barras ---------- */
@layer sections {
#states { position: relative; z-index: 1; padding: var(--space-1) 0; }
#states .states__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px 56px; align-items: center; }
#states .states__head { display: grid; gap: 26px; align-content: start; }
#states .states__keys { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 11px; }
#states .states__slot { position: relative; }
#states .states__slot::before { content: ""; position: absolute; inset: -11px; border: 1.5px solid var(--color-4); border-radius: calc(var(--radius-2) + 11px); }
#states .m-key-2 { aspect-ratio: 1.3; }
#states .m-key-2__label { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 30px; line-height: 1; color: var(--color-5); }
#states .bank__spec { display: block; margin-top: 8px; font-family: var(--font-2); font-stretch: 100%; font-size: 13.5px; font-weight: 400; line-height: 1.35; color: var(--color-5); }
#states .m-key-2__state { display: flex; align-items: center; gap: 9px; }
#states .m-key-2__state .led { font-size: 11px; }
#states .states__photo { grid-column: 2; grid-row: 1; position: relative; display: grid; }
#states .states__photo .m-photo { aspect-ratio: 16 / 10.5; }
#states .states__count { margin-top: 4px; }
#states .photo-card { position: relative; margin: -52px 22px 0; padding: 20px 22px 22px; display: grid; gap: 8px; border-radius: var(--radius-2); max-inline-size: 380px; }
@media (max-width: 899px) {
  #states .states__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #states .states__keys { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  #states .m-key-2 { aspect-ratio: 1; }
  #states .states__photo { grid-column: auto; grid-row: auto; }
  #states .m-key-2 { padding: 14px 14px 12px; }
  #states .m-key-2__label { font-size: 26px; }
  #states .bank__spec { font-size: 12.5px; }
  #states .photo-card { margin: -40px 12px 0; padding: 16px 18px 18px; }
}
}

/* ---------- modes: D-pad com 4 cenas ---------- */
@layer sections {
#modes { position: relative; padding: var(--space-1) 0 calc(var(--space-1) * .6); }
#modes .modes__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 26px 56px; align-items: end; margin-bottom: 64px; }
#modes .modes__stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
#modes .modes__pad { position: relative; inline-size: 26em; block-size: 26em; font-size: clamp(9px, .95vw, 13px); justify-self: center; }
#modes .modes__diamond { position: absolute; inset: 6.25em; border: 1.5px solid var(--color-4); border-radius: 3.6em; transform: rotate(45deg); }
#modes .modes__pad .m-key { position: absolute; inline-size: 5em; }
#modes .modes__k-up { left: 10.5em; top: 4.7em; }
#modes .modes__k-left { left: 4.7em; top: 10.5em; }
#modes .modes__k-ok { left: 10.5em; top: 10.5em; }
#modes .modes__k-right { left: 16.3em; top: 10.5em; }
#modes .modes__k-down { left: 10.5em; top: 16.3em; }
#modes .modes__k-ok .m-key__label { font-size: 1.05em; font-weight: 600; color: var(--color-5); }
#modes .modes__dir { position: absolute; color: var(--color-2); white-space: nowrap; }
#modes .modes__dir--up { left: 50%; top: 0; transform: translateX(-50%); }
#modes .modes__dir--right { left: calc(82% + 8px); top: 50%; transform: translateY(-50%); }
#modes .modes__dir--down { left: 50%; bottom: 0; transform: translateX(-50%); }
#modes .modes__dir--left { right: calc(82% + 8px); top: 50%; transform: translateY(-50%); }
#modes .modes__hint { margin-top: 18px; text-align: center; }
#modes .modes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
#modes .modes__item { position: relative; display: grid; }
#modes .modes__photo { aspect-ratio: 4 / 3; }
#modes .modes__caption { position: relative; margin: -46px 18px 0; padding: 20px 22px 22px; display: grid; gap: 8px; border-radius: var(--radius-2); }
#modes .modes__caption .m-text-8 { color: var(--color-5); }
#modes .modes__fit { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
#modes .modes__fit b { font-family: var(--font-1); font-stretch: 75%; font-size: 22px; line-height: 1; color: var(--color-2); }
@media (max-width: 899px) {
  #modes .modes__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  #modes .modes__stage { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #modes .modes__pad { font-size: min(11px, calc((100vw - 64px) / 29)); }
  #modes .modes__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
}
@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #modes[data-stage] .modes__track { block-size: 340vh; }
  #modes[data-stage] .modes__stage { position: sticky; top: 0; block-size: 100svh; padding-top: 100px; padding-bottom: 32px; align-items: center; }
  #modes[data-stage] .modes__list { position: relative; display: block; block-size: min(64vh, 560px); border-radius: var(--radius-3); }
  #modes[data-stage] .modes__item { position: absolute; inset: 0; }
  #modes[data-stage] .modes__photo { position: absolute; inset: 0; aspect-ratio: auto; }
  #modes[data-stage] .modes__caption { position: absolute; left: 22px; bottom: 22px; margin: 0; max-inline-size: 360px; }
  @media (max-width: 899px) {
    #modes[data-stage] .modes__stage { padding-top: 90px; padding-bottom: 20px; gap: 18px; align-content: start; }
    #modes[data-stage] .modes__list { block-size: min(50svh, 420px); order: -1; }
    #modes[data-stage] .modes__pad { font-size: min(8px, calc((100svh - 560px) / 26)); }
    #modes[data-stage] .modes__caption { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px 16px; }
    #modes[data-stage] .modes__hint { display: none; }
    #modes[data-stage] .modes__caption { gap: 5px; }
    #modes[data-stage] .modes__caption .m-text-5 { font-size: 24px; }
    #modes[data-stage] .modes__caption .m-text-8 { font-size: 13.5px; line-height: 1.4; }
    #modes .modes__dir { font-size: 11px; }
  }
}
}

/* ---------- dimmer: rede caindo, saída firme ---------- */
@layer sections {
#dimmer { position: relative; padding: var(--space-1) 0; }
#dimmer .dimmer__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 26px 56px; align-items: end; margin-bottom: 56px; }
#dimmer .dimmer__rig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: stretch; }
#dimmer .dimmer__photo { position: relative; aspect-ratio: 16 / 9; }
#dimmer .dimmer__photo img { transition: filter .6s ease; }
#dimmer .dimmer__rig[data-prot] .dimmer__photo img { filter: grayscale(.7) brightness(.32); }
#dimmer .dimmer__hud { position: absolute; top: 28px; right: 28px; display: grid; gap: 12px; padding: 16px 16px 14px; border-radius: var(--radius-2); font-size: 11px; }
#dimmer .dimmer__hud .lcd { inline-size: 15em; block-size: 7.4em; }
#dimmer .dimmer__hud-row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-2); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-5); }
#dimmer .dimmer__hud-row b { color: var(--color-2); font-weight: 600; font-variant-numeric: tabular-nums; }
#dimmer .dimmer__hud .led { font-size: 10px; }
#dimmer .dimmer__fader { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 18px; font-size: 16px; }
#dimmer .dimmer__groove { position: relative; inline-size: 64px; block-size: 100%; min-block-size: 220px; padding: 8px; border-radius: var(--radius-1); box-shadow: var(--shadow-3); }
#dimmer .dimmer__zone { position: absolute; left: 50%; inline-size: 1.5px; background: var(--color-4); transform: translateX(-50%); }
#dimmer .dimmer__thumb { position: absolute; left: 8px; right: 8px; top: 8px; block-size: 72px; border-radius: var(--radius-1); background: linear-gradient(180deg, var(--color-3), var(--color-1) 62%, color-mix(in srgb, var(--color-1), var(--color-2) 6%)); box-shadow: var(--shadow-1); display: grid; place-items: center; font-family: var(--font-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-5); }
#dimmer .dimmer__steps { flex-direction: column; }
#dimmer .dimmer__steps .m-key { inline-size: 3.3em; }
#dimmer .dimmer__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
#dimmer .dimmer__note { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1.5px solid var(--color-4); }
@media (max-width: 899px) {
  #dimmer .dimmer__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  #dimmer .dimmer__rig { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #dimmer .dimmer__photo { aspect-ratio: 4 / 3.6; }
  #dimmer .dimmer__photo img { object-position: 30% 50%; }
  #dimmer .dimmer__hud { top: auto; right: 12px; bottom: 12px; padding: 12px 12px 10px; font-size: 8.5px; gap: 8px; }
  #dimmer .dimmer__hud-row { font-size: 10.5px; gap: 10px; }
  #dimmer .dimmer__fader { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
  #dimmer .dimmer__groove { inline-size: 100%; block-size: 60px; min-block-size: 0; }
  #dimmer .dimmer__zone { left: auto; top: 50%; inline-size: auto; block-size: 1.5px; transform: translateY(-50%); }
  #dimmer .dimmer__thumb { top: 8px; bottom: 8px; left: 8px; right: auto; inline-size: 84px; block-size: auto; }
  #dimmer .dimmer__steps { flex-direction: row-reverse; }
  #dimmer .dimmer__fader .m-tick { display: none; }
  #dimmer .dimmer__notes { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 40px; }
}
}

/* ---------- quiet ---------- */
@layer sections {
#quiet { position: relative; padding: var(--space-1) 0; }
#quiet .quiet__lines { display: grid; gap: 14px; }
#quiet .quiet__line { display: flex; align-items: flex-end; gap: 28px; font-size: clamp(54px, 9.4vw, 148px); line-height: .92; }
#quiet .quiet__line:nth-child(2) { margin-left: 14%; }
#quiet .quiet__line:nth-child(3) { margin-left: 5%; }
#quiet .quiet__off { display: inline-grid; justify-items: center; gap: 0; margin-bottom: .14em; font-size: 15px; flex: none; text-shadow: none; }
#quiet .quiet__off .m-key { inline-size: 3em; }
#quiet .quiet__off .m-tick { color: var(--color-2); }
#quiet .quiet__off .m-tick__line { block-size: 22px; }
#quiet .quiet__line > span:first-child { display: inline-block; }
#quiet .quiet__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin-top: 72px; }
#quiet .quiet__photo { aspect-ratio: 4 / 3; }
#quiet .quiet__facts { display: grid; gap: 22px; }
#quiet .quiet__fact { display: grid; gap: 6px; padding-top: 16px; border-top: 1.5px solid var(--color-4); }
@media (max-width: 899px) {
  #quiet .quiet__line { flex-wrap: wrap; gap: 4px 16px; font-size: clamp(46px, 13.4vw, 80px); }
  #quiet .quiet__line:nth-child(2), #quiet .quiet__line:nth-child(3) { margin-left: 0; }
  #quiet .quiet__off { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; font-size: 12px; }
  #quiet .quiet__off .m-tick__line { display: none; }
  #quiet .quiet__off .m-key { inline-size: 2.6em; }
  #quiet .quiet__body { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 48px; }
}
}

/* ---------- chords: Converte + Estabiliza + Filtra ---------- */
@layer sections {
#chords { position: relative; padding: var(--space-1) 0; overflow-x: clip; }
#chords .chords__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 26px 56px; align-items: end; }
#chords .chords__stage { display: grid; justify-items: center; gap: 18px; padding: 48px 0 24px; }
#chords .chords__art { position: relative; inline-size: 38em; block-size: 34em; font-size: clamp(9px, min(1.2vw, calc((100svh - 240px) / 34)), 17px); }
#chords .chords__contour { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
#chords .chords__contour .s path { fill: none; stroke: var(--color-4); stroke-width: 3; vector-effect: non-scaling-stroke; }
#chords .chords__contour .f path { fill: var(--color-1); stroke: none; }
#chords .chords__art .m-key { position: absolute; }
#chords .chords__a { left: 11em; top: 6em; inline-size: 18em; }
#chords .chords__b { left: 7.35em; top: 20.51em; inline-size: 10em; }
#chords .chords__c { left: 24.4em; top: 21.4em; inline-size: 9.2em; }
#chords .chords__a .m-key__label { font-size: 2.3em; color: var(--color-5); }
#chords .chords__b .m-key__label, #chords .chords__c .m-key__label { font-size: 1.5em; color: var(--color-5); }
#chords .chords__result { text-align: center; }
#chords .chords__result strong { color: var(--color-2); font-weight: inherit; }
#chords .chords__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
#chords .chords__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; }
#chords .chords__mini { inline-size: 76px; block-size: 76px; overflow: visible; }
#chords .chords__mini path { fill: none; stroke: var(--color-4); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#chords .chords__mini circle { fill: var(--color-3); }
#chords .chords__item h3 { margin-bottom: 6px; font-size: 26px; }
@media (max-width: 899px) {
  #chords .chords__head { grid-template-columns: minmax(0, 1fr); }
  #chords .chords__art { font-size: min(9.4px, calc((100vw - 32px) / 38)); }
  #chords .chords__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
}
@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #chords[data-stage] .chords__track { block-size: 250vh; }
  #chords[data-stage] .chords__stage { position: sticky; top: 0; block-size: 100svh; align-content: center; padding: 90px 0 24px; }
}
}

/* ---------- dentro: figura isométrica ---------- */
@layer sections {
#dentro { position: relative; padding: var(--space-1) 0 0; }
#dentro .dentro__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
#dentro .dentro__head { display: grid; gap: 26px; }
#dentro .dentro__frame { position: relative; aspect-ratio: 9 / 10; padding: 10px; border-radius: var(--radius-3); background: var(--color-1); box-shadow: var(--shadow-3); }
#dentro .dentro__frame iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; border-radius: calc(var(--radius-3) - 10px); background: #fafafa; }
.lenis.lenis-smooth #dentro iframe { pointer-events: auto; }
@media (max-width: 899px) {
  #dentro .dentro__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #dentro .dentro__frame { aspect-ratio: 9 / 14.5; }
}
}

/* ---------- material ---------- */
@layer sections {
#material { position: relative; padding: var(--space-1) 0; }
#material .material__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 26px 56px; align-items: end; margin-bottom: 72px; }
#material .material__list { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 48px; align-items: start; }
#material .material__item { display: grid; justify-items: start; gap: 16px; }
#material .material__item .m-tick { justify-self: center; }
#material .material__photo { inline-size: 100%; aspect-ratio: 1; border-radius: 50%; }
#material .material__item:nth-child(2) { margin-top: 120px; }
#material .material__item:nth-child(3) { margin-top: 40px; }
#material .material__item h3 { margin-top: 6px; }
#material .material__spec { display: flex; flex-wrap: wrap; gap: 6px 14px; }
@media (max-width: 899px) {
  #material .material__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
  #material .material__list { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  #material .material__item:nth-child(2), #material .material__item:nth-child(3) { margin-top: 0; }
  #material .material__photo { inline-size: 82%; justify-self: center; }
}
}

/* ---------- editions: 1.5 / 2.0 / 3.0 ---------- */
@layer sections {
#editions { position: relative; padding: var(--space-1) 0 0; }
#editions .editions__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 26px 56px; align-items: end; margin-bottom: 56px; }
#editions .editions__picker { display: grid; justify-items: center; gap: 14px; margin-bottom: 48px; }
#editions .editions__picker .m-well { font-size: 16px; }
#editions .editions__picker .m-key { inline-size: 5.2em; }
#editions .editions__picker .m-key__label { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 1.5em; }
#editions .editions__item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; perspective: 900px; }
#editions .editions__panel { aspect-ratio: 4 / 3; transform-origin: 50% 100%; }
#editions .editions__photo-badge { position: absolute; left: 26px; top: 26px; padding: 10px 18px; border-radius: var(--radius-1); font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 28px; line-height: 1; }
#editions .editions__body { display: grid; gap: 16px; justify-items: start; }
#editions .editions__name { font-size: clamp(56px, 6vw, 88px); }
#editions .editions__specs { inline-size: 100%; display: grid; gap: 0; margin-top: 4px; }
#editions .editions__specs div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1.5px solid color-mix(in srgb, var(--color-4) 60%, transparent); }
#editions .editions__specs dt { color: var(--color-5); }
#editions .editions__specs dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
#editions .editions__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
#editions .calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 48px; align-items: center; margin-top: 72px; padding: 36px 40px; }
#editions .calc__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
#editions .calc__unit { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 30px; color: var(--color-5); }
#editions .calc__out { display: grid; gap: 10px; justify-items: start; }
#editions .calc__res { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 34px; line-height: 1.05; color: var(--color-2); }
#editions .editions__terms { margin-top: 36px; text-align: center; }
#editions .editions__switch { position: relative; z-index: 3; display: grid; justify-items: center; padding: 72px 0 0; }
#editions .editions__switch .m-key { inline-size: 8.4em; font-size: 16px; }
#editions .editions__floor { block-size: 22vh; min-block-size: 140px; }
@media (max-width: 899px) {
  #editions .editions__head { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  #editions .editions__item { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #editions .editions__picker .m-well { font-size: 14px; }
  #editions .calc { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; margin-top: 52px; }
  #editions .editions__switch .m-key { inline-size: 7em; }
  #editions .editions__photo-badge { left: 18px; top: 18px; font-size: 22px; }
}
}

/* ---------- faq + contact (grafite) ---------- */
@layer sections {
#faq { position: relative; padding: calc(var(--space-1) * .8) 0 var(--space-1); color: var(--color-1); }
#faq .faq__flood { position: absolute; inset: 0; z-index: 0; background: var(--color-7); }
#faq .faq__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
#faq .faq__head { display: grid; gap: 22px; }
#faq .faq__list { display: grid; gap: 14px; }
#faq .faq__item { border-radius: var(--radius-2); background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-3) 5%), var(--color-7)); box-shadow: var(--shadow-4); font-size: 16px; }
#faq .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 16px 16px 26px; cursor: pointer; list-style: none; font-family: var(--font-2); font-size: 18px; font-weight: 500; line-height: 1.35; }
#faq .faq__item summary::-webkit-details-marker { display: none; }
#faq .faq__item p { padding: 0 26px 24px; color: var(--color-8); }
#faq .faq__item .m-key-3 .is-minus { display: none; }
#faq .faq__item[open] .m-key-3__dent { opacity: 1; }
#faq .faq__item[open] .m-key-3 .is-plus { display: none; }
#faq .faq__item[open] .m-key-3 .is-minus { display: block; }
#faq :focus-visible { outline-color: var(--color-1); }
@media (max-width: 899px) {
  #faq .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #faq .faq__item summary { font-size: 17px; padding-left: 20px; }
  #faq .faq__item p { padding: 0 20px 20px; }
}
#contact { position: relative; margin-top: -1px; padding: var(--space-1) 0; background: var(--color-7); color: var(--color-1); }
#contact .contact__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
#contact .contact__head { display: grid; gap: 24px; }
#contact .contact__details { display: grid; gap: 22px; margin-top: 18px; }
#contact .contact__details div { display: grid; gap: 4px; }
#contact .contact__details dd { font-size: 19px; }
#contact .contact__card { display: grid; gap: 26px; padding: 36px; border-radius: var(--radius-3); background: linear-gradient(180deg, color-mix(in srgb, var(--color-7), var(--color-3) 6%), var(--color-7)); box-shadow: var(--shadow-4); }
#contact .contact__steps { display: grid; gap: 18px; counter-reset: s; }
#contact .contact__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
#contact .contact__steps .m-key-3 { font-size: 15px; }
#contact .contact__steps .m-key-3__label { font-family: var(--font-1); font-stretch: 75%; font-weight: 700; font-size: 20px; color: var(--color-1); }
#contact .contact__models { display: flex; flex-wrap: wrap; gap: 10px; }
#contact .contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
#contact :focus-visible { outline-color: var(--color-1); }
@media (max-width: 899px) {
  #contact .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #contact .contact__card { padding: 26px 22px; }
}
}
@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #faq[data-flood] .faq__flood { top: calc(-1 * var(--faq-reach, 0px)); }
}
}

/* ---------- footer ---------- */
@layer sections {
#footer { position: relative; margin-top: -1px; padding: 48px 0 36px; background: var(--color-7); color: var(--color-1); overflow: clip; }
#footer .footer__inner { container-type: inline-size; }
#footer .footer__mark { display: block; font-family: var(--font-logo); font-weight: 400; font-stretch: 100%; font-size: calc(100cqi / (var(--len) * .86)); line-height: .9; letter-spacing: .02em; white-space: nowrap; color: var(--color-1); text-shadow: var(--shadow-7); }
#footer .footer__rule { display: block; block-size: 2px; margin-top: 2.4cqi; background: var(--brand-red); }
#footer .footer__sub { margin-top: 2cqi; font-family: var(--font-logo); font-size: max(10px, 2.1cqi); letter-spacing: .62em; text-align: center; margin-right: -.62em; color: var(--color-8); }
#footer .footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: 40px; padding-top: 26px; border-top: 1.5px solid color-mix(in srgb, var(--color-8) 40%, transparent); }
#footer .footer__links ul { display: flex; flex-wrap: wrap; gap: 12px 26px; }
#footer :focus-visible { outline-color: var(--color-1); }
}

/* nav: logo da marca no lugar do wordmark do template */
@layer sections {
#nav .nav__brand { font-size: 17px; color: var(--color-2); text-shadow: none; }
#nav .nav__menu-title { font-family: var(--font-logo); font-size: 20px; font-weight: 400; text-shadow: none; color: var(--color-2); }
@media (max-width: 899px) { #nav .nav__brand { font-size: 14px; } }
@media (max-width: 400px) { #nav .nav__cta { padding-inline: 16px; } #nav .nav__bar { padding-left: 16px; } }
}
@layer base { .split-line { padding-bottom: .06em; margin-bottom: -.06em; } }

/* ---------- painel (seção 2) ---------- */
@layer sections {
#painel { position: relative; padding: var(--space-1) 0; }
#painel .painel__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
#painel .painel__head { display: grid; gap: 26px; align-content: start; }
#painel .painel__stage { display: grid; gap: 18px; justify-items: center; }
@media (max-width: 899px) {
  #painel .painel__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #painel .hero__panel { font-size: min(9.6px, calc((100vw - 32px) / 38)); }
}
}

/* ---------- ficha técnica: tira para o técnico, em todas as seções ---------- */
@layer atoms {
.spec { display: grid; gap: 12px; margin-top: 28px; padding-top: 14px; border-top: 1.5px solid var(--color-4); }
.painel__head .spec, .states__head .spec, .dentro__head .spec, .faq__head .spec, .quiet__facts .spec { margin-top: 0; }
.spec__label { font-family: var(--font-2); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--color-5); }
.spec__list { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.spec__list div { display: grid; gap: 3px; }
.spec dt { font-family: var(--font-2); font-size: 10.5px; font-weight: 500; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--color-5); }
.spec dd { margin: 0; font-family: var(--font-2); font-size: 14px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--color-2); }
#faq .spec { border-top-color: color-mix(in srgb, var(--color-8) 45%, transparent); }
#faq .spec__label, #faq .spec dt { color: var(--color-8); }
#faq .spec dd { color: var(--color-1); }
@media (max-width: 600px) {
  .spec__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .spec dd { font-size: 13.5px; }
}
}

/* ---------- fotos sem legenda por cima no celular ---------- */
@layer scenes {
@media (max-width: 768px) {
  #states .photo-card { margin: 12px 0 0; max-inline-size: none; }
  #dimmer .dimmer__photo { aspect-ratio: auto; display: grid; gap: 10px; }
  #dimmer .dimmer__photo img { aspect-ratio: 4 / 3; block-size: auto; }
  #dimmer .dimmer__hud { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; font-size: 8px; }
  #dimmer .dimmer__hud .lcd { grid-row: 1 / span 2; grid-column: 1; }
  #dimmer .dimmer__hud-row { grid-column: 2; }
  #modes .modes__caption { margin: 12px 0 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  #modes[data-stage] .modes__list { block-size: min(64svh, 540px); }
  #modes[data-stage] .modes__item { display: flex; flex-direction: column; gap: 12px; background: var(--color-1); }
  #modes[data-stage] .modes__photo { position: relative; inset: auto; flex: 1 1 auto; min-block-size: 0; }
  #modes[data-stage] .modes__caption { position: relative; left: auto; right: auto; bottom: auto; margin: 0; max-inline-size: none; flex: none; }
  #modes[data-stage] .modes__pad { font-size: min(8px, calc((100svh - 660px) / 26)); }
}
}
@layer scenes {
#modes .modes__head, #dimmer .dimmer__head, #chords .chords__head, #material .material__head, #editions .editions__head { align-items: start; }
}
@layer scenes {
.spec__list div { align-content: start; }
@media (max-width: 768px) { #hero .hero__chip { display: none; } }
}

/* celular: seções mais juntas e pins mais curtos */
@layer scenes {
@media (max-width: 768px) {
  :root { --space-1: clamp(48px, 8vh, 72px); }
  #editions .editions__floor { block-size: 72px; min-block-size: 0; }
  #editions .editions__switch { padding-top: 44px; }
  #dentro { padding-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  #modes[data-stage] .modes__track { block-size: 240vh; }
  #chords[data-stage] .chords__track { block-size: 150vh; }
  #chords[data-stage] .chords__stage { block-size: 78svh; padding-top: 80px; padding-bottom: 0; }
  #chords .chords__list { margin-top: 24px; }
}
}

/* sem pin (celular/toque): abas do D-pad trocam a cena no lugar, legenda abaixo da foto */
@layer scenes {
#chords .chords__replay { justify-self: center; }
#chords[data-stage] .chords__replay { display: none; }
#modes[data-tabs] .modes__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
#modes[data-tabs] .modes__list { display: block; }
#modes[data-tabs] .modes__item:not(.is-active) { display: none; }
#modes[data-tabs] .modes__photo { aspect-ratio: 4 / 3; }
#modes[data-tabs] .modes__caption { margin: 12px 0 0; }
#modes[data-tabs] .modes__pad { font-size: min(9.5px, calc((100vw - 64px) / 29)); }
#modes[data-tabs] .modes__hint { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  #modes[data-tabs] .modes__item.is-active { animation: modes-in .45s ease both; }
  @keyframes modes-in { from { opacity: 0; transform: translateY(8px); } }
}
}
@layer scenes {
#modes .modes__pad { margin-inline: auto; }
#modes[data-tabs] .modes__pad { font-size: min(9px, calc((100vw - 32px) / 38)); }
#modes[data-tabs] .modes__dir { font-size: 10.5px; letter-spacing: .1em; }
}
@layer scenes {
/* WebKit: item de grid com foto não pode crescer até a largura natural da imagem */
#modes .modes__item, #states .states__photo, #dimmer .dimmer__photo { grid-template-columns: minmax(0, 1fr); }
#modes .modes__photo, .m-photo { min-inline-size: 0; }
}

/* barras: curto simulado */
@layer scenes {
#states .m-key-2__state .fuse { inline-size: 30px; block-size: 12px; margin-left: auto; overflow: visible; }
#states .m-key-2__state { inline-size: 100%; }
#states .fuse rect { fill: none; stroke: var(--color-4); stroke-width: 1.5; }
#states .fuse path { fill: none; stroke: var(--color-2); stroke-width: 1.5; stroke-linecap: round; }
#states .fuse__gap { display: none; }
#states .m-key-2.is-blown .fuse__wire { display: none; }
#states .m-key-2.is-blown .fuse__gap { display: inline; stroke: var(--brand-red); }
#states .m-key-2.is-blown .m-key-2__dent { opacity: 1; }
#states .m-key-2.is-blown .m-key-2__label { transform: translateY(2px); }
#states .m-key-2.is-blown [data-bank-state] { color: var(--brand-red); }
#states .states__fix { justify-self: start; }
#states .states__fix[hidden] { display: none; }
}

/* Audiofix: CTA de compra (só WhatsApp) em verde WhatsApp com o símbolo; destaque vermelho de uma palavra na headline */
.m-btn--wa { gap: 10px; background: linear-gradient(180deg, #2bc767, #1da851 72%); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(4, 60, 28, .35); box-shadow: 0 10px 24px -10px rgba(18, 140, 70, .55), inset 0 1px 0 rgba(255, 255, 255, .45); }
.m-btn--wa .m-btn__dent { background: linear-gradient(180deg, #179445, #1da851 55%, #2bc767); box-shadow: inset 0 2px 6px rgba(4, 60, 28, .35); }
.m-btn__wa { width: 20px; height: 20px; flex: none; }
#hero .hero__accent { font-style: normal; color: var(--brand-red); }

/* revisão pré-publicação: CTA verde quebra linha em vez de vazar a tela no celular estreito; rótulos da ficha legíveis */
@media (max-width: 480px) {
  .m-btn--wa { max-inline-size: 100%; white-space: normal; text-align: center; }
  .spec dt { font-size: 11.5px; }
}
/* âncoras do menu: sem Lenis (celular/toque) o título não fica atrás da barra fixa */
html:not(.lenis) { scroll-padding-top: 96px; }