/* BFMIDI — palco escuro, partículas e apresentação direta do produto. */
html,body { height: auto; }
body { overflow: auto; overscroll-behavior: auto; background: var(--paper); }
.app { height: auto; min-height: 100svh; overflow: clip; isolation: isolate; }
.app::before { display: none; }
#particle-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.app > :not(#particle-field) { position: relative; z-index: 1; }
.wrap { padding-inline: clamp(20px,4.5vw,64px); }
button,a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: #346ac8; color: #fff; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 60; padding: 12px 20px; border: 1px solid var(--chrome-edge); border-radius: var(--r-btn); background: var(--chrome-bg); box-shadow: var(--chrome-shadow); color: var(--ink); font: 600 var(--btn2-fs)/1.2 var(--font-body); }
.skip-link:focus { top: 12px; }
.panels { display: grid; }
.panel { position: static; grid-area: 1/1; min-width: 0; display: none; transition: none; }
.panel.is-on { display: flex; animation: panel-enter .4s var(--ease) both; }
.hero { max-width: 1120px; padding: 24px clamp(20px,4.5vw,64px) 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-stage { flex: none; width: 100%; min-height: 0; height: clamp(300px,42vh,440px); margin-top: 8px; isolation: isolate; }
.hero-stage::before { content: ''; position: absolute; inset: -22% -15%; z-index: -2; background: radial-gradient(ellipse at 50% 57%,#28416366 0%,#19273844 25%,transparent 64%); pointer-events: none; }
.hero-stage::after { content: ''; position: absolute; width: 68%; height: 12%; bottom: 8%; left: 16%; border-radius: 50%; background: #0009; filter: blur(24px); z-index: -1; }
.shot { inset: 0 3%; transform: translateY(8px); transition: opacity .4s,transform .6s var(--ease),visibility .4s; }
.shot.is-on { transform: translateY(0); }
.shot img { filter: drop-shadow(0 22px 16px #0009) drop-shadow(0 -1px 1px #a6c6ff18); }
.hero-ctas { justify-content: center; align-items: center; gap: 12px; margin-top: 4px; }
/* A moldura, a ancoragem no topo e o padding de cima de todo .panel-inner
   moram no sistema (css/pages.css, #panels > .panel > .panel-inner.pg);
   aqui ficam só o respiro lateral e o de baixo, que cada painel pode trocar. */
.panel-inner { max-width: var(--maxw-page); padding: 30px clamp(20px,4.5vw,64px) 70px; margin-block: auto; }
.shot-map { min-height: 210px; height: auto; background: linear-gradient(160deg,#202c3c,#10151e); border-color: #52647b55; }
.shot-map .silk { color: #bec7d7; }
.map-sw { border-color: #8190a8; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .hero { padding-top: 26px; }
  .hero-stage { height: clamp(270px,55vw,400px); }
  .shot { inset: 0 -3%; }
  .split { display: grid; grid-template-columns: 1fr; gap: 20px; overflow: visible; }
  .panel-inner { padding-top: 12px; }
}
@media (max-width: 420px) {
  .btn { padding-inline: 18px; gap: 14px; }
  .hero-stage { height: 245px; }
  .spec-cell { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* No celular, a vitrine assume a estrutura de um aplicativo: modelos no topo,
   conteúdo em primeiro plano e navegação persistente ao alcance do polegar. */
@media (max-width: 600px) {
  body { background: linear-gradient(180deg,#080c12 0%,#06090e 100%); }
  .app { min-height: 100dvh; }

  .hero {
    width: 100%;
    padding: 8px 14px 20px;
  }
  .hero-stage {
    height: clamp(250px,68vw,320px);
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .hero-stage::before {
    inset: -10% -25%;
    background: radial-gradient(ellipse at 50% 58%,#31507255 0%,#17283b38 42%,transparent 72%);
  }
  .hero-stage::after { bottom: 9%; height: 10%; filter: blur(17px); }
  .shot { inset: 12px 2px; }
  .shot img { filter: drop-shadow(0 14px 12px #000a); }


  .panel-inner { width: 100%; margin: 0; padding: 16px 16px 26px; }
}

@media (max-width: 380px) {
  .hero { padding-inline: 10px; }
  .hero-stage { height: 242px; }
}


/* ── Nome da controladora no vão do HOME (18/09/2026, imagem de referência) ──
   Em TODA largura. Nasceu só no desktop, com a justificativa de que "no
   celular o palco já encosta na barra" — e não encosta: a foto do iPhone do
   usuário (18/09) mostrou ~250px vazios entre o cartão da foto e a barra,
   porque o painel HOME é absoluto dentro de um .panels com min-height de
   100dvh e o palco tem altura fixa. A palavra ocupa esse vão nos dois. Só
   some no celular DEITADO (bloco lá embaixo), onde o palco sozinho já
   passa da altura.

   O texto não é lido em voz alta (`aria-hidden` no HTML): o h1.sr-only logo
   acima já anuncia "BFMIDI 8SW+", e sem isso o leitor de tela repetiria o
   modelo duas vezes seguidas.

   A LUZ (mesma data — imagem de referência do usuário: a palavra em silhueta
   escura sobre uma explosão de raios branco-azulados). Nada de imagem: são
   gradientes cônicos REPETIDOS, três camadas de período incomensurável
   (5,23° · 13,7° · 23,9°) girando devagar em sentidos opostos — a
   interferência entre elas é o que faz os raios parecerem irregulares e
   vivos. Pontos que custam caro:

   - O campo é um QUADRADO esticado por scaleX. Esticar DEPOIS de desenhar é
     o que dá o visual de "warp": os raios se adensam e engrossam perto do
     eixo horizontal, e a máscara circular vira a elipse larga da referência.
   - A máscara radial é o que apaga os raios para a borda; sem suporte a
     `mask-image` o quadrado inteiro apareceria — o @supports lá embaixo
     esconde os raios e devolve a letra clara de antes.
   - Os raios ficam ATRÁS da foto do produto, não só da palavra: o `.hero`
     vira contexto de empilhamento (`isolation`) e o campo fica em z:-1
     dentro dele. Por isso a `.hero-wordmark` NÃO pode ter z-index — com ele
     o campo ficaria preso no contexto dela e passaria por CIMA da foto.
   - A letra é um buraco na luz: cor sólida #070A0F, quase o fundo da
     página. Sem luz atrás ela não existe — por isso o fallback sem máscara
     lá embaixo troca a cor.
   - Tudo é transform/opacity/filter: nada reflui. Para quem pede menos
     movimento a regra global de prefers-reduced-motion já zera as
     animações — a luz fica parada, não desaparece.
   - `is-flash` (main.js, na troca de modelo) dá um clarão curto no campo: a
     palavra nova "acende". A classe sai sozinha no animationend.

   TODOS os números da luz saem das variáveis `--wm-*` logo abaixo. Os
   valores foram TRAVADOS em 18/09/2026, em duas rodadas, com os números que
   o usuário achou num painel temporário de sliders (js/tune.js +
   css/tune.css, removidos de novo — a versão mais recente está no commit
   be353d3; para reajustar, basta restaurar os dois arquivos e religar as
   duas linhas "tune" no index.html). A segunda rodada clareou a letra 4%
   (color-mix logo abaixo) e puxou a luz para um azul mais quente (matiz
   +22°, saturação 1.75). */
:root {
  /* LETRA */
  --wm-font: 9.8vw;        /* tamanho (dentro do clamp 58..152px) */
  --wm-wdth: 104;          /* largura da Archivo (100..125) */
  --wm-ink: 4%;            /* quanto de claro mistura na letra (0% = #070A0F puro) */
  /* CAMPO DE LUZ */
  --wm-light: 1;           /* BRILHO GERAL — opacity do campo, raios + núcleo */
  --wm-field: 345px;       /* lado do quadrado do campo (limitado a 34vw) */
  --wm-stretch: 4;         /* esticamento horizontal */
  --wm-y: 3px;             /* deslocamento vertical da luz */
  --wm-hue: 22deg;         /* matiz */
  --wm-sat: 1.75;          /* saturação */
  /* RAIOS */
  --wm-reach: 28%;         /* alcance dos raios finos; largos ×1.16, longos ×1.28 */
  --wm-blur: .8px;         /* dispersão dos raios finos; largos ×1.25, longos ×.8 */
  --wm-fine: 1.2;          /* força dos raios finos */
  --wm-wide: .8;           /* força dos raios largos */
  --wm-long: 1;            /* força dos raios longos */
  --wm-spin: 4.9;          /* velocidade do giro (1 = 160 s por volta nos finos; 4.9 ≈ 33 s) */
  /* NÚCLEO */
  --wm-core-size: 1.15;    /* tamanho do núcleo */
  --wm-core-stretch: 1;    /* largura extra do núcleo */
  --wm-core-light: 1.05;   /* brilho do núcleo */
  --wm-core-blur: 7.5px;   /* suavidade do núcleo */
  /* CLARÃO */
  --wm-flash: 6;           /* força do clarão na troca de modelo */
}

.hero { position: relative; isolation: isolate; }

.hero-wordmark {
  display: grid;
  position: relative;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  margin: clamp(2px,1.4vh,20px) 0 0;
  font: 900 clamp(58px,var(--wm-font),152px)/.86 var(--font-display);
  font-variation-settings: 'wdth' var(--wm-wdth), 'wght' 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  /* #070A0F, pedido do usuário (18/09): é praticamente o fundo da página
     (#080b10), então a letra existe só como RECORTE na luz — onde a luz não
     chega, ela some. A ponta da palavra mais larga (o "+" do NANO+) depende
     do núcleo alcançar até lá. */
  color: #070a0f;
  user-select: none;
}
/* A mesma letra com --wm-ink de claro misturado (painel de ajuste). Atrás
   de um @supports porque uma função desconhecida derrubaria a declaração e
   a cor cairia no herdado. */
@supports (color: color-mix(in srgb, red 10%, blue)) {
  .hero-wordmark { color: color-mix(in srgb,#070a0f,#dfe8f5 var(--wm-ink)); }
}
/* ── O campo de luz ── */
.hero-rays {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(50% + var(--wm-y));
  width: min(var(--wm-field),34vw);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  pointer-events: none;
  filter: hue-rotate(var(--wm-hue)) saturate(var(--wm-sat));
  animation: bf-rays-drift 19s ease-in-out infinite alternate;
}
.hero-rays-field {
  position: absolute;
  inset: 0;
  opacity: var(--wm-light);
  transform: scaleX(var(--wm-stretch));
  -webkit-mask-image: radial-gradient(circle at 50% 50%,#000 0%,#000 8%,#000c 22%,#0006 40%,#0002 58%,transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%,#000 0%,#000 8%,#000c 22%,#0006 40%,#0002 58%,transparent 76%);
}
.hero-rays-field > i { position: absolute; inset: 0; border-radius: 50%; }

/* Os raios: curtos e desfocados, por isso GROSSOS — a 60px do centro um
   raio de 0,3° tinha meio pixel e sumia dentro do núcleo depois do blur. */
/* r1 — raios finos e numerosos, azulados, os mais curtos. */
.hero-rays-field > .r1 {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,    #c4dcff8a .22deg,  #c4dcff8a .56deg,  transparent .82deg,
    transparent 1.56deg, #8fb9ff5c 1.74deg, #8fb9ff5c 2.02deg, transparent 2.24deg,
    transparent 2.96deg, #e3eeffbf 3.18deg, #e3eeffbf 3.72deg, transparent 4.02deg,
    transparent 4.3deg,  #7fadf24d 4.4deg,  #7fadf24d 4.62deg, transparent 4.76deg,
    transparent 5.23deg);
  -webkit-mask-image: radial-gradient(circle,#000 0%,#000a calc(var(--wm-reach) * .52),transparent var(--wm-reach));
          mask-image: radial-gradient(circle,#000 0%,#000a calc(var(--wm-reach) * .52),transparent var(--wm-reach));
  opacity: var(--wm-fine);
  filter: blur(var(--wm-blur));
  animation: bf-rays-spin calc(160s / var(--wm-spin)) linear infinite;
}
/* r2 — raios largos e brancos, girando ao contrário. */
.hero-rays-field > .r2 {
  background: repeating-conic-gradient(from 7deg at 50% 50%,
    transparent 0deg,   #f1f6ffd9 .3deg,   #f1f6ffd9 1.1deg,  transparent 1.6deg,
    transparent 5deg,   #cfe1ff80 5.3deg,  #cfe1ff80 5.8deg,  transparent 6.2deg,
    transparent 8.9deg, #e6efffa6 9.1deg,  #e6efffa6 9.5deg,  transparent 9.8deg,
    transparent 13.7deg);
  -webkit-mask-image: radial-gradient(circle,#000 0%,#000c calc(var(--wm-reach) * .6),transparent calc(var(--wm-reach) * 1.16));
          mask-image: radial-gradient(circle,#000 0%,#000c calc(var(--wm-reach) * .6),transparent calc(var(--wm-reach) * 1.16));
  opacity: var(--wm-wide);
  filter: blur(calc(var(--wm-blur) * 1.25));
  animation: bf-rays-spin calc(115s / var(--wm-spin)) linear infinite reverse;
}
/* r3 — poucos raios, os mais longos, tremeluzindo (a força --wm-long
   entra nos keyframes do tremeluzir, porque a opacity é animada). */
.hero-rays-field > .r3 {
  background: repeating-conic-gradient(from 2.5deg at 50% 50%,
    transparent 0deg,    #ffffffe6 .1deg,    #ffffffe6 .48deg,   transparent .7deg,
    transparent 11.1deg, #d6e6ff99 11.24deg, #d6e6ff99 11.5deg,  transparent 11.72deg,
    transparent 23.9deg);
  -webkit-mask-image: radial-gradient(circle,#000 0%,#000c calc(var(--wm-reach) * .68),transparent calc(var(--wm-reach) * 1.28));
          mask-image: radial-gradient(circle,#000 0%,#000c calc(var(--wm-reach) * .68),transparent calc(var(--wm-reach) * 1.28));
  filter: blur(calc(var(--wm-blur) * .8));
  animation: bf-rays-spin calc(230s / var(--wm-spin)) linear infinite, bf-rays-flicker 7.5s ease-in-out infinite;
}
/* O núcleo: branco no centro, azul-LED na borda, respirando. Mais largo
   que os raios (scaleX nos keyframes) para a palavra inteira ter luz atrás
   mesmo com os raios curtos. */
.hero-rays-field > .core {
  background: radial-gradient(circle at 50% 50%,#f6f9ff 0%,#dfeaffed 6%,#b9d3ffb3 14%,#7fb0f766 28%,#4886dc4a 46%,#2f60a82e 62%,transparent 78%);
  filter: blur(var(--wm-core-blur));
  animation: bf-core-breathe 6s ease-in-out infinite alternate;
}

.hero-wordmark.is-flash .hero-rays-field { animation: bf-rays-flash .9s cubic-bezier(.2,.8,.3,1); }

/* No celular a palavra é proporcionalmente maior (6.6vw seriam 26px) e o
   campo de luz encolhe para caber na largura: a 390px o campo de 205px
   esticado 4× passaria das bordas. O teto de 34vw da largura do campo,
   que no desktop nunca entra, é o que manda aqui. */
@media (max-width: 900px) {
  :root { --wm-font: min(15vw,84px); --wm-field: 150px; }
}
/* Celular deitado: o palco sozinho já passa da altura do painel, e a
   palavra cairia por cima da barra. */
@media (max-height: 620px) and (max-width: 900px) and (orientation: landscape) {
  .hero-wordmark { display: none; }
}

/* Sem máscara não há elipse: o quadrado de raios apareceria inteiro. Some o
   campo — e, sem luz atrás, a letra #070A0F sumiria no fundo, então ela
   ganha uma cor que lê sozinha. */
@supports not ((mask-image: radial-gradient(#000,#0000)) or (-webkit-mask-image: radial-gradient(#000,#0000))) {
  .hero-rays { display: none; }
  .hero-wordmark { color: #3a5570; }
}

@keyframes bf-rays-spin    { to { transform: rotate(1turn); } }
@keyframes bf-rays-drift   { from { translate: -1.6% .6%; } to { translate: 1.6% -.6%; } }
@keyframes bf-rays-flicker {
  0%,100% { opacity: calc(.82 * var(--wm-long)); }
  28%     { opacity: var(--wm-long); }
  47%     { opacity: calc(.7 * var(--wm-long)); }
  66%     { opacity: calc(.96 * var(--wm-long)); }
  84%     { opacity: calc(.78 * var(--wm-long)); }
}
@keyframes bf-core-breathe {
  from { opacity: calc(.8 * var(--wm-core-light)); transform: scaleX(var(--wm-core-stretch)) scale(calc(.93 * var(--wm-core-size))); }
  to   { opacity: var(--wm-core-light);            transform: scaleX(var(--wm-core-stretch)) scale(calc(1.07 * var(--wm-core-size))); }
}
@keyframes bf-rays-flash {
  0%   { filter: brightness(1);               transform: scaleX(var(--wm-stretch)) scale(1); }
  16%  { filter: brightness(var(--wm-flash)); transform: scaleX(var(--wm-stretch)) scale(1.06); }
  100% { filter: brightness(1);               transform: scaleX(var(--wm-stretch)) scale(1); }
}


/* HOME desktop: a controladora ganha presença e o nome desce um pouco. */
@media (min-width: 861px) {
  .panel-home .hero-stage .shot[data-i="0"] img { transform: translateY(64px) scale(1.5); transform-origin: center center; }
  .panel-home .hero-stage .shot[data-i="2"] img { transform: translateY(90px) scale(1.45); transform-origin: center center; }
  .panel-home .hero-stage .shot[data-i="1"] img,
  .panel-home .hero-stage .shot[data-i="3"] img { transform: translateY(90px); }
  .panel-home .hero-wordmark { margin-top: clamp(200px, 20vh, 280px); }
}


/* Escala de desktop solicitada: 100% no navegador deve ter o tamanho visual
   da antiga página a 80%. O zoom de CSS também recalcula o espaço do layout,
   inclusive menus fixos, sem alterar a preferência de zoom do navegador. O
   valor e a altura da janela em px CSS (--fold, no lugar de 125svh) moram em
   css/tokens.css. Celulares e tablets mantêm os tamanhos de leitura e toque. */
@media (min-width: 861px) {
  html { zoom: var(--zoom); }
  .app { min-height: var(--fold); }
}

/* Mobile: a palavra do HOME sobe para o vão sob a foto (o menu do
   celular está no bloco MENU, no fim do arquivo). */
@media (max-width: 600px) {
  .app {
    --mobile-name-y: -62px;
    --mobile-action-height: 52px;
    --mobile-action-width: 48%;
  }

  .panel-home .hero-wordmark { transform: translateY(var(--mobile-name-y)); }

}

/* ══ MENU (out/2026) ══════════════════════════════════════════════════════
   Substituiu o CROMO de 24/09/2026 (cápsula de modelos com APP e
   engrenagem, a barra de baixo que trocava de itens e a barra APPS ·
   DOWNLOADS do celular). Três níveis, cada um com um papel só (main.js,
   bloco MENU; textos em ui.nav do content.js):

     1 MENU PRINCIPAL  .mnav — no topo, preso ao rolar (computador e
                       tablet); .mbar — a barra fixa de baixo (celular)
     2 MODELOS         .mstrip — só nas telas de controladora
     3 SEÇÕES          .msec — dentro da página, rola junto

   Mesmo material dos cartões: grafite opaco (--chrome-*) e o LARANJA
   como único estado aceso (aria-current="page"). No computador o site
   aplica zoom .8: os px daqui são CSS (17px viram 13,6px na tela).

   Três regras que custam caro:
   · `#app > #id` nas peças com posição própria (o menu preso no topo e a
     barra de baixo): `.app > :not(#particle-field)`, no topo deste
     arquivo, prende todo filho do .app em position: relative com peso
     1,1,0, e só um id a mais ganha dele;
   · faixa de modelos e seções somem por `hidden` E pelos atributos
     data-area / data-sec do <html>, que o script do <head> grava antes
     da primeira pintura (sem isso, abrir direto em #8sw/apps pularia);
   · o respiro lateral (--sm-pad) é o MESMO dos painéis (16 / 28 / 48px,
     downloads.css e info.css): menu, modelos e conteúdo começam na mesma
     borda. */

:root { --sm-pad: 16px; }
@media (min-width: 601px) { :root { --sm-pad: 28px; } }
@media (min-width: 861px) { :root { --sm-pad: 48px; } }

.nav-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }

/* Sem barra fixa embaixo no computador: o fim da página é o rodapé. */
.app { padding-bottom: 28px; }
.app:has(#panel-home.is-on) { padding-bottom: 12px; }
html { scroll-padding-top: 96px; }

/* As duas peças que dependem da vista. `hidden` é escrito pelo main.js;
   os atributos do <html> valem desde a primeira pintura. */
.mstrip[hidden], .msec[hidden],
html:not([data-area="ctrl"]) .mstrip,
html:not([data-sec]) .msec { display: none !important; }
.mbar { display: none; }

/* Foco: o anel do sistema, afastado da peça. */
:is(.mnav__item, .mnav__buy, .mnav__brand, .mstrip__card, .mstrip__cmp, .msec__tab, .mbar__item):focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
}
#panels:focus, #panels [tabindex="-1"]:focus { outline: none; }
/* Retorno ao toque: tudo cede um pouco ao ser apertado (só transform). */
:is(.mnav__item, .mnav__buy, .mstrip__card, .mstrip__cmp, .msec__tab, .mbar__item):active { transform: scale(.97); }

/* ── 1. MENU PRINCIPAL (topo) ─────────────────────────────────────────── */
#app > #mnav {
  position: sticky;
  top: 0;
  z-index: 55;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: linear-gradient(180deg, #131a24, #0d1219);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 14px 30px -24px #000;
}
.mnav__in {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(100% - 2 * var(--sm-pad), var(--frame));
  height: 76px;
  margin: 0 auto;
}
.mnav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--ink);
  text-decoration: none;
}
.mnav__brand img { width: 34px; height: 34px; border-radius: 9px; }
.mnav__brand-txt {
  display: flex;
  flex-direction: column;
  font: 800 24px/1 var(--font-display);
  font-variation-settings: 'wdth' 108;
  letter-spacing: .01em;
}
.mnav__brand-txt small {
  margin-top: 4px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .18em;
  color: var(--ink-3);
}
.mnav__main {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.mnav__item,
.mnav__buy {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: 600 17px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .12s ease;
}
.mnav__item { color: var(--chrome-ink); }
.mnav__item[aria-current] {
  color: var(--chrome-on-ink);
  border-color: var(--chrome-on-edge);
  background: var(--chrome-on-bg);
}
.mnav__buy {
  flex: none;
  padding: 0 24px;
  color: #1d0d02;
  font-weight: 700;
  background: linear-gradient(160deg, #ffbb64 0%, #ff8e3e 44%, #ff6933 100%);
  box-shadow: inset 0 2px 2px #fff0cbaa, inset 0 -2px 3px #b9311766, 0 8px 22px -10px #ff6f33aa;
}
/* Aceso (na compra de um modelo ou na página Comprar): um aro claro. */
.mnav__buy[aria-current] { box-shadow: 0 0 0 3px #08101a, 0 0 0 5px var(--chrome-on-ink); }
.mnav .nav-icon { width: 24px; height: 24px; }
@media (hover: hover) {
  .mnav__item:not([aria-current]):hover { color: #fff; background: var(--chrome-hover-bg); border-color: var(--chrome-hover-edge); }
  .mnav__buy:hover { filter: brightness(1.07); }
}

/* ── 2. MODELOS ───────────────────────────────────────────────────────── */
.mstrip { padding: 22px env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.mstrip__in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  width: min(100% - 2 * var(--sm-pad), var(--frame));
  margin: 0 auto;
}
.mstrip__card,
.mstrip__cmp {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--chrome-edge);
  border-radius: var(--r-well);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  color: var(--chrome-ink);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .12s ease;
}
/* Altura da foto em px, e não em %: porcentagem em item de grid não
   limita nada (a trilha é do tamanho do conteúdo) e a foto vazava. */
.mstrip__img { display: grid; place-items: center; flex: none; width: 92px; height: 62px; }
.mstrip__img img { max-width: 100%; max-height: 62px; object-fit: contain; }
.mstrip__txt { min-width: 0; }
.mstrip__name {
  display: block;
  font: 800 24px/1 var(--font-display);
  font-variation-settings: 'wdth' 108;
  color: var(--ink);
}
.mstrip__note {
  display: block;
  margin-top: 6px;
  font: 500 15px/1.2 var(--font-body);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mstrip__card[aria-current] {
  border-color: var(--chrome-on-edge);
  background: var(--chrome-on-bg);
  box-shadow: inset 0 1px 1px #ffd7ad2e, 0 0 0 1px #e7a36b44, 0 14px 30px -18px #ff7a33aa;
}
.mstrip__card[aria-current] .mstrip__note { color: var(--chrome-on-ink); }
.mstrip__cmp {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font: 600 14px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mstrip__cmp[aria-current] { color: var(--chrome-on-ink); border-color: var(--chrome-on-edge); background: var(--chrome-on-bg); }
@media (hover: hover) {
  .mstrip__card:not([aria-current]):hover,
  .mstrip__cmp:not([aria-current]):hover {
    border-color: var(--chrome-hover-edge);
    background: linear-gradient(0deg, var(--chrome-hover-bg), var(--chrome-hover-bg)), var(--chrome-bg);
    color: #fff;
  }
}

/* ── 3. SEÇÕES DO MODELO ──────────────────────────────────────────────── */
.msec { display: flex; justify-content: center; padding: 16px var(--sm-pad) 0; }
.msec__in {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--chrome-edge);
  border-radius: var(--r-pill);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
}
.msec__tab {
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font: 600 16px/1 var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--chrome-ink);
  transition: color .2s ease, background-color .2s ease, transform .12s ease;
}
.msec__tab[aria-current] {
  color: var(--chrome-on-ink);
  background: var(--chrome-on-bg);
  box-shadow: inset 0 0 0 1px var(--chrome-on-edge);
}
@media (hover: hover) {
  .msec__tab:not([aria-current]):hover { color: #fff; background: var(--chrome-hover-bg); }
}

/* ── O RODAPÉ ─────────────────────────────────────────────────────────── */
/* No fim da página, sem nada fixo (antes ficava preso embaixo, sob as
   pílulas da barra). */
#app > .site-footer {
  width: min(100% - 2 * var(--sm-pad), var(--w-nav));
  margin: 28px auto 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#app > .site-footer .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  min-height: 22px;
  padding: 0 6px;
}
#app > .site-footer :is(.footer-note, .footer-end) {
  font: 500 var(--t-min)/1.2 var(--font-body);
  letter-spacing: .02em;
  color: var(--ink-3);
}

/* ── TABLET (601–1100px): o menu principal aperta ─────────────────────── */
@media (max-width: 1100px) {
  .mnav__in { gap: 14px; }
  .mnav__main { gap: 4px; }
  .mnav__item, .mnav__buy { gap: 8px; padding: 0 14px; letter-spacing: .05em; }
  .mstrip__in { gap: 8px; }
  .mstrip__card { gap: 10px; padding: 8px 12px 8px 8px; }
  .mstrip__img { width: 72px; height: 50px; }
  .mstrip__img img { max-height: 50px; }
  .mstrip__name { font-size: 20px; }
  .mstrip__note .note-b { display: none; }
}
@media (max-width: 860px) {
  .mnav__in { height: 64px; }
  .mnav__brand-txt small { display: none; }
  .mnav__item, .mnav__buy { height: 44px; padding: 0 12px; font-size: 14px; }
  .mnav__main .nav-icon { display: none; }
  .mstrip { padding-top: 14px; }
  .mstrip__card { flex-direction: column; gap: 4px; padding: 8px 6px; text-align: center; }
  .mstrip__img { width: 100%; height: 40px; }
  .mstrip__img img { max-height: 40px; }
  .mstrip__name { font-size: 18px; }
  .mstrip__note { margin-top: 3px; font-size: 13px; }
  .mstrip__cmp { padding: 8px 12px; font-size: 12px; }
  .msec { padding-top: 10px; }
  .msec__tab { padding: 11px 18px; font-size: 14px; }
}

/* ── CELULAR (≤600px): o menu principal vira a barra de baixo ─────────── */
@media (max-width: 600px) {
  .mnav { display: none; }
  #app > #mbar {
    position: fixed;
    z-index: 56;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: linear-gradient(180deg, #131a24, #0b0f15);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -14px 30px -18px #000;
  }
  .mbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 6px 2px;
    border-radius: 14px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--chrome-ink);
    transition: color .2s ease, background-color .2s ease, transform .12s ease;
  }
  .mbar__item .nav-icon { width: 22px; height: 22px; }
  .mbar__item[aria-current] {
    color: var(--chrome-on-ink);
    background: var(--chrome-on-bg);
    box-shadow: inset 0 0 0 1px var(--chrome-on-edge);
  }
  .app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app:has(#panel-home.is-on) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  #app > .site-footer { display: none; }
  html { scroll-padding-top: 12px; scroll-padding-bottom: 90px; }

  /* Modelos: as quatro em colunas iguais; Comparar vira um link discreto
     embaixo delas. No celular só a primeira parte do `note` aparece. */
  .mstrip { padding-top: max(10px, env(safe-area-inset-top)); }
  .mstrip__in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mstrip__card { padding: 6px 4px 8px; border-radius: 14px; }
  .mstrip__img { height: 34px; }
  .mstrip__img img { max-height: 34px; }
  .mstrip__name { font-size: 15px; }
  .mstrip__note { font-size: 11px; }
  .mstrip__cmp {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 12px;
  }
  .mstrip__cmp .nav-icon { width: 18px; height: 18px; }
  .mstrip__cmp[aria-current] { background: none; color: var(--chrome-on-ink); }

  /* Seções: um segmentado de largura total. */
  .msec { padding-top: 6px; }
  .msec__in { display: grid; grid-template-columns: repeat(var(--sec-n, 3), minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .msec__tab { padding: 11px 4px; border-radius: 12px; font-size: 12px; letter-spacing: .04em; text-align: center; }
}
@media (max-width: 360px) {
  .mstrip__name { font-size: 13px; }
  .msec__tab { font-size: 11px; letter-spacing: .02em; }
}

/* ── TELA BAIXA (celular deitado, ≤500px de altura): o menu encolhe para a
   foto da HOME ter altura. ──────────────────────────────────────────── */
@media (max-height: 500px) {
  /* Deitado, o menu não fica preso no topo: 52px fixos de uma janela de
     ~390 fariam falta na leitura. */
  #app > #mnav { position: relative; }
  .mnav__in { height: 52px; }
  .mnav__item, .mnav__buy { height: 40px; }
  .mstrip { padding-top: 8px; }
  .mstrip__card { flex-direction: row; gap: 8px; padding: 4px 10px 4px 4px; text-align: left; }
  .mstrip__img { width: 48px; height: 30px; }
  .mstrip__img img { max-height: 30px; }
  .mstrip__name { font-size: 15px; }
  .mstrip__note { display: none; }
  .mstrip__cmp { flex-direction: row; padding: 4px 12px; }
  .msec { padding-top: 6px; }
  .msec__tab { padding: 8px 16px; font-size: 12px; }
  .mbar__item { min-height: 44px; flex-direction: row; gap: 8px; }
  #app > .site-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.mnav__item, .mnav__buy, .mstrip__card, .mstrip__cmp, .msec__tab, .mbar__item) { transition: none; }
}

/* ── ALTO CONTRASTE (forced-colors): o sistema descarta os degradês, e o
   "você está aqui", que era só o laranja, vira um contorno na cor de
   destaque do sistema. ─────────────────────────────────────────────── */
@media (forced-colors: active) {
  #app > #mnav, #app > #mbar, .mstrip__card, .mstrip__cmp, .msec__in { background: Canvas; }
  .mnav__item[aria-current], .mnav__buy[aria-current], .mstrip__card[aria-current],
  .mstrip__cmp[aria-current], .msec__tab[aria-current], .mbar__item[aria-current] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}