/* ============================================================
   BFMIDI — LANDING (Site/) · ESTILOS
   Requer css/tokens.css carregado ANTES deste arquivo.

   A PÁGINA ROLA como uma leitura normal (o <body> rola; a troca
   de vista volta ao topo, ver o apply() do main.js). Os painéis
   ocupam todos a mesma caixa e trocam por opacidade; a cápsula de
   modelos fica no topo e a barra de navegação, fixa embaixo.

   ORDEM DO ARQUIVO
     1. base            4. (menu: refine.css) 
     2. utilitários     5. painéis e HOME
     3. modelo sem foto 6. estreito / baixo / menos movimento
   (a pele do cromo, o rodapé e o celular: css/refine.css)
   ============================================================ */

/* ---------- 1. base ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

a { color: var(--blue-ink); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--blue); } }

button { font: inherit; color: inherit; }

::selection { background: var(--blue); color: var(--paper-2); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

[hidden] { display: none !important; }


/* ---------- 2. utilitários --------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* O anel de foco é UM só, com os tokens (--focus, --focus-w):
   declarado no css/refine.css. Aqui só se apaga o anel de clique. */
:focus:not(:focus-visible) { outline: none; }

/* Rótulo de silkscreen: o traço lido direto do painel do produto,
   onde 9V / HOST / TRS / DIN5 / EXP / 2SW são impressos em caixa
   alta minúscula dentro de uma caixinha de contorno fino. */
.silk {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.1;
}

/* ---------- A TELA ÚNICA ------------------------------------
   100svh e não 100vh: no celular `vh` conta a barra de endereço
   que some, então `vh` empurraria o rodapé para fora justamente
   onde a promessa é que tudo caiba.
   ------------------------------------------------------------ */
.app {
  position: relative;
  display: flex; flex-direction: column;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

/* O FUNDO INFINITO que costura a composição: um ciclorama — o
   cinza que sobe atrás da peça e morre antes das bordas. Sem
   forma visível; se aparecer aresta, subiu demais. */
.app::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
      ellipse 1100px 680px at 50% 82%,
      var(--sweep) 0%,
      rgba(239, 239, 242, 0.55) 45%,
      rgba(239, 239, 242, 0) 72%);
  pointer-events: none;
}
.app > * { position: relative; z-index: 1; }



/* ---------- 4. (o antigo SELETOR saiu em out/2026) ---------
   A navegação é o MENU de três níveis: visual em css/refine.css
   (bloco MENU), comportamento no main.js. Nada dela mora aqui.
   ------------------------------------------------------------ */


/* ---------- 5. painéis -------------------------------------- */

.panels {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* Todos os painéis ocupam a MESMA caixa e só trocam de opacidade:
   nenhum empurra o outro, então a altura da tela nunca muda e não
   há para onde rolar. */
.panel {
  position: absolute; inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  /* `visibility` NAO pode transicionar junto: ela salta. O atraso
     igual à duração mantém o painel que sai visível até o fim do
     fade e só então o retira da árvore — sem ele a saída piscaria. */
  transition: opacity var(--dur-fade) ease,
              visibility 0s linear var(--dur-fade);
}
.panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-fade) ease, visibility 0s linear 0s;
}

.panel-inner {
  width: 100%;
  max-width: var(--maxw-page);
  margin-inline: auto;
  min-height: 0;
  padding: clamp(8px, 1.2vw, 18px) clamp(16px, 4vw, 40px) clamp(10px, 1.4vw, 20px);
}

/* ---- painel HOME: a composição centrada da lista de modelos ---- */

.hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  max-width: var(--maxw-fold);
  margin-inline: auto;
  padding: clamp(10px, 1.4vw, 22px) clamp(16px, 4vw, 40px) clamp(12px, 1.4vw, 20px);
  text-align: center;
  min-height: 0;
}

.hero-id {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.hero-h1 {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-h1 span { display: block; }
.hero-h1 .line-2 { color: var(--ink-2); }

.hero-lead {
  margin-top: var(--sp-3);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
  text-wrap: balance;
}

/* O palco do produto ABSORVE a folga da tela: é ele que cresce ou
   encolhe para a composição inteira caber, em vez de empurrar os
   botões para fora. `min-height: 0` é obrigatório — sem ele o
   filho flex se recusa a encolher abaixo do conteúdo. */
.hero-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-top: clamp(4px, 0.8vw, 12px);
}

.shot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fade) ease,
              visibility 0s linear var(--dur-fade);
}
.shot.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-fade) ease, visibility 0s linear 0s;
}

.shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  /* Sombra de CONTATO: a peça pousa no ciclorama em vez de flutuar
     recortada. Sobre branco ela precisa ser bem mais fraca e mais
     curta que sobre preto — a 0,75 de alfa, que era o valor da
     versão escura, o recorte ganhava uma auréola cinza evidente. */
  filter: drop-shadow(0 22px 26px var(--contact));
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center;
  margin-top: clamp(10px, 1.2vw, 16px);
}

/* ---- modelo sem foto: o mapa de footswitches ---- */
.shot-map {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-5);
  width: min(430px, 90%); height: 100%;
  max-height: 300px;
  margin: auto;
  padding: var(--sp-8) var(--sp-6);
  /* Continua GRAFITE mesmo na página branca: este painel está no
     lugar de uma controladora, e a controladora é escura. Um card
     branco aqui leria como "faltou conteúdo"; escuro, lê como o
     aparelho que ainda não foi fotografado. */
  border: 1px solid #2A2A31;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--graphite-lift) 0%, #0E0E12 100%);
  box-shadow: 0 18px 38px -22px rgba(22, 22, 32, 0.55);
}
/* Este painel é uma ILHA ESCURA na página branca, então a tinta
   dele tem de virar junto. Sem esta linha o rótulo herdava o cinza
   do papel (--ink-3) e caía para 2,69:1 sobre o grafite. */
.shot-map .silk { color: var(--on-graphite-dim); }

.map-grid {
  display: grid;
  gap: clamp(10px, 2vw, 20px);
}
.map-grid.is-8 { grid-template-columns: repeat(4, 1fr); }
.map-grid.is-6 { grid-template-columns: repeat(3, 1fr); }
.map-grid.is-4 { grid-template-columns: repeat(2, 1fr); }
.map-sw {
  width: clamp(26px, 4.4vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 38% 32%, #3A3A42, #16161A 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* ---------- 8. estreito ------------------------------------- */

@media (max-width: 560px) {
  .hero-ctas .btn { flex: 1 1 100%; }
}


/* ---------- 8b. viewport BAIXA ------------------------------
   Notebook de 768px de altura e o caso apertado: cabeçalho +
   menu + painel + rodapé em 100svh. Sem este bloco, o único
   elemento elástico (o palco do produto) absorve sozinho toda a
   falta de altura e a foto de produto encolhe num monitor menor,
   que é o contrário do que a página quer mostrar.

   A folga sai dos intervalos e do título, NUNCA do menu: ele é
   o elemento principal, e encolhê-lo para caber seria resolver o
   problema errado.
   ------------------------------------------------------------ */
@media (max-height: 880px) {
  .hero          { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .hero-h1       { margin-top: var(--sp-2); }
  .hero-lead     { margin-top: var(--sp-2); }
  .hero-stage    { margin-top: var(--sp-1); }
  .hero-ctas     { margin-top: var(--sp-3); }
}


/* ---------- 9. menos movimento ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .shot, .panel, .btn {
    transition-duration: 0.01ms;
  }
}