/* ═══════════════════════════════════════════════════════════
   PAINEL DE INSTRUMENTOS — camada aditiva sobre landing-es.css
   No ar na /es/ (funil 1) desde 23/08/2026. Aprovado pelo Kauã.

   ⚠️ CARREGA DEPOIS do landing-es.css, sempre. Ela sobrescreve
   .appsbox, .appchip, .compare e .faq por cima do sistema — invertida,
   não faz efeito nenhum e some sem erro.

   ⚠️ ESTA CAMADA É SÓ DA /es/. Não propagar pro funil 2 (/es/plan/,
   /es/q/): o DESIGN.md diz que as duas salas serem opostas é o que dá
   leitura ao teste A/B, e o quiz é a Sala CLARA — nada disto aqui
   (vidro violeta, LED, mostrador escuro) pertence a ela.

   THESIS: onde a landing já afirma um número, ela passa a MARCÁ-LO em
   vez de só escrevê-lo. O que a camada recusa é o arranjo em que as
   provas mais fortes da oferta (8 apps · 2.104,06 € · 30 días) são
   frases соltas com o mesmo peso do texto ao redor.

   ⚠️ DUAS COISAS SAÍRAM POR ORDEM DO KAUÃ (23/08) — não devolver sem
   ele pedir: a FITA FIXA de telemetria sob o logo, e qualquer
   tratamento dentro do card de plano (preço, centavos, anual, relógio).

   OWN-WORLD: a Sala Oscura do DESIGN.md, intacta — violeta-preto,
   vidro, Inter, verde só na ação. O que a camada acrescenta é a
   GRAMÁTICA DE INSTRUMENTO: algarismo tabular, etiqueta em caixa alta
   tracada, traço de graduação, LED violeta de canal ligado, e barra de
   nível onde já existe número.

   ⚠️ REGRAS DO DESIGN.md QUE ESTA CAMADA NÃO PODE QUEBRAR:
   · Verde #16A34A é AÇÃO e nada mais — nenhum LED, selo ou nível verde.
   · Ouro só marca escolha recomendada — não entra em instrumento nenhum.
   · Uma família tipográfica só (Inter). O ar de instrumento vem de
     `tabular-nums` + tracking, NUNCA de uma monoespaçada — que aqui
     seria fantasia de "técnico", além de segunda fonte proibida.
   · Sombra colorida só sob o botão verde.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* tinta de instrumento — tudo derivado do violeta ambiente da sala */
  --inst-led:    #9B6BFF;
  --inst-led-2:  rgba(155,107,255,.55);
  --inst-grad:   rgba(255,255,255,.14);  /* traço de graduação */
  --inst-face:   rgba(18,11,38,.82);     /* face do mostrador */

  /* o vermelho da caixa "cara" NÃO é cor nova: sai do próprio
     landing-es.css (.compare__box e .compare__price). Fica em canal RGB
     pra poder variar a opacidade sem repetir o literal em cinco lugares
     — e pra deixar explícito que é a cor da seção, não do instrumento. */
  --inst-caro:   255, 72, 96;
  --inst-caro-2: 255, 107, 127;
}

/* Algarismo de instrumento: largura fixa, pra coluna de número alinhar.
   ⚠️ NENHUM elemento do card de plano entra aqui. `tabular-nums` muda o
   avanço dos dígitos, e a ordem do Kauã foi deixar a área de preço
   idêntica à /es/ de hoje — inclusive no espacejamento. Fica só onde o
   número é tabela de verdade: a lista de preços da comparação. */
.compare__price, .compare__sum-val, .compare__ours-was, .compare__save{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* A FITA DE TELEMETRIA SAIU INTEIRA — decisão do Kauã, 23/08.
   Com ela foram junto os overrides que só existiam por causa dela: o
   .hdr opaco desde o topo, o padding extra do herói e o scroll-padding.
   O topo da página volta a ser exatamente o da /es/ de hoje. */

/* ═══════════ BANCO DE APPS ════════════════════════════════
   As 8 apps deixam de ser uma grade de ícones e viram um banco de
   canais: cada um com LED de ligado, e o cabeçalho com a leitura
   8/8. O argumento "todas estas, num acesso só" passa a ser LIDO. */
.appsbox{ position:relative }
.appsbox__kicker{
  display:flex; align-items:center; justify-content:center; gap:8px;
}
/* a leitura do banco. `attr()` não serve aqui (só content), então o
   valor vem do ::after com texto fixo — 8 apps é constante da página. */
.appsbox__kicker::after{
  content:'8/8';
  font-size:.66rem; font-weight:800; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--tx); padding:2px 7px; border-radius:5px;
  background:var(--inst-face); border:1px solid var(--inst-grad);
}

/* ⚠️ O LED ANCORA NO ÍCONE, NÃO NA CÉLULA (corrigido em 23/08).
   O `.appchip` é `display:grid` com `justify-items:center`, então a
   célula mede ~78px enquanto o ícone mede 46px. Com o LED preso ao
   canto da CÉLULA, ele flutuava ~14px à direita do ícone — mais perto
   do ícone VIZINHO que do próprio, e os da 4ª coluna encostavam na
   borda da caixa. A metáfora de "canal ligado" não chegava a se formar.

   Agora o `.appchip` vira uma coluna centrada e o LED se prende a um
   invólucro do tamanho exato do ícone. */
.appchip{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.appchip img{
  position:relative;
  /* o `max-width:46px` do landing-es.css continua mandando no tamanho */
  align-self:center;
}
/* LED de canal ligado — violeta, JAMAIS verde: verde é ação. */
.appchip::after{
  content:''; position:absolute; z-index:2;
  /* ancorado no ÍCONE: 46px de largura centrada na célula.
     O canto do ícone fica a (50% + 23px) do centro. */
  top:-3px; left:calc(50% + 17px);
  width:7px; height:7px; border-radius:100px;
  background:var(--inst-led);
  box-shadow:0 0 0 2px rgba(10,7,20,.9), 0 0 8px 1px var(--inst-led-2);
  animation:led-pulsa 2.6s var(--ease) infinite;
}
/* os LEDs não piscam em uníssono: um banco real nunca está em fase */
.appchip:nth-child(2)::after{ animation-delay:-.4s }
.appchip:nth-child(3)::after{ animation-delay:-.9s }
.appchip:nth-child(4)::after{ animation-delay:-1.3s }
.appchip:nth-child(5)::after{ animation-delay:-1.7s }
.appchip:nth-child(6)::after{ animation-delay:-2.1s }
.appchip:nth-child(7)::after{ animation-delay:-.7s }
.appchip:nth-child(8)::after{ animation-delay:-1.9s }
@keyframes led-pulsa{
  0%,100%{ opacity:1 }
  50%    { opacity:.45 }
}

/* ═══════════ A COMPARAÇÃO VIRA MOSTRADOR ══════════════════
   Aqui está o número mais forte da página. Cada linha ganha a BARRA DE
   NÍVEL do que aquela app custa por ano — a largura é o próprio preço,
   calculada em painel.js contra a app mais cara. Não é enfeite: é o
   dado que já está escrito na linha, desenhado.

   A cor continua a vermelha da seção (é a caixa "cara"), não a violeta
   do instrumento — o nível tem que significar custo, não ambiente. */
.compare__list li{ position:relative; overflow:hidden }
.compare__list li > *{ position:relative; z-index:1 }
.compare__list li::before{
  content:''; position:absolute; inset:0 0 0 0; z-index:0;
  /* o nível cresce por scaleX, não por width: animar largura remede o
     layout a cada quadro e engasga justamente no celular fraco que é
     o aparelho dela. O traço da ponta vive no fim do próprio degradê,
     então acompanha a escala sem virar uma borda de 0,1px. */
  transform:scaleX(var(--lvl-r, 0));
  transform-origin:left center;
  /* ⚠️ SEM marca clara na ponta. Ela já existiu aqui e o critique
     mostrou o estrago: como a barra é escalada em X, a faixa da ponta
     escala junto — ficava larga nas barras curtas e caía EM CIMA do
     "363,48 €" do NetShort e DENTRO do ícone do iQIYI. Um mostrador
     cuja marca cobre o próprio valor mede nada. O degradê sozinho já
     mostra onde o nível termina. */
  background:linear-gradient(90deg,
    rgba(var(--inst-caro), .26) 0%,
    rgba(var(--inst-caro), .07) 100%);
  transition:transform .9s var(--ease);
  will-change:transform;
}

/* ═══════════ O TOTAL É O ARGUMENTO, ENTÃO É O MAIOR ═══════
   O `PRODUCT.md` define o mecanismo da oferta como agregação contra o
   paywall de moeda. O 2.104,06 € **é** esse mecanismo — é o número que
   prova que a concorrência é cara. E ele estava em 24px, contra 54,6px
   do "4" decorativo do card e 50,7px do nosso preço: a menor das
   cifras grandes da página.

   Agora ele empilha (rótulo em cima, número embaixo, ambos ocupando a
   largura toda) e sobe para a mesma faixa do `.compare__ours-price`.
   Empilhar também resolve o `TOTAL, CADA / AÑO` que quebrava em duas
   linhas desalinhado do valor no 390. */
.compare__sum{
  position:relative;
  flex-direction:column; align-items:stretch; gap:6px;
  text-align:center;
}
.compare__sum-label{
  font-size:.72rem; letter-spacing:.14em;
}
.compare__sum-val{
  display:block;
  font-size:clamp(2.4rem, 11vw, 3.1rem);
  line-height:1.02; letter-spacing:-.03em;
  padding:12px 10px 14px; border-radius:16px;
  background:var(--inst-face);
  border:1px solid rgba(var(--inst-caro), .30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* ⚠️ Aqui JÁ HOUVE um traço de graduação de 26px antes do rótulo. Ele
   era curto demais pra ler como escala e aparecia como sujeira vermelha
   ao lado do texto. A moldura de mostrador no número já faz o trabalho
   sozinha — dois sinais para a mesma coisa, e um deles ilegível, é pior
   que um só. */

/* ⛔ O CARD DE PLANO NÃO RECEBE INSTRUMENTO — decisão do Kauã, 23/08:
   "do jeito da nossa página msm tá melhor… tem q deixar como tá essa
   parte do preço".

   E ele estava certo por um motivo medido: eu tinha posto
   .plan__price{display:inline-flex}, e container flex BLOQUEIA os
   filhos inline — o .plan__val (o "9") caía de 66px para 55px de
   caixa e o .plan__cents subia de 33px para 44px, matando a linha de
   base entre o numeral grande e os centavos. A fonte nunca mudou
   (54,6px nos dois), mas na tela lia como preço menor. Nada de
   display, margin ou moldura aqui. */

/* ═══════════ A REGRA DA PORTA ÚNICA, DE VOLTA ══════════════
   O DESIGN.md tem uma regra nomeada: **o verde #16A34A é AÇÃO e nada
   mais**. Se um elemento é verde, ele cobra ou avança. O critique de
   23/08 achou SEIS usos não-ação — e quando seis coisas verdes não
   fazem nada, a sétima deixa de ser botão.

   O caso mais caro estava no card VIP: o preço `9,90 €/mes` era verde,
   dentro de um painel verde com brilho verde, **imediatamente acima do
   CTA verde**. Preço e botão com o mesmo peso cromático, no degrau que
   a página mais quer vender — nada indicava onde tocar. E o card do
   Básico já fazia certo (preço violeta, botão verde), o que prova que
   a regra existia e foi abandonada só no lugar mais caro.

   O verde continua onde deve: nos `.btn`, e no painel do
   `.compare__ours` — que é o momento de alívio da página. O que sai
   de lá é só a ASSINATURA DO BOTÃO (a sombra verde e o brilho que
   varre), não a cor. */

/* 1. O preço do VIP volta ao violeta da sala. Note que isto não
      inventa tratamento nenhum: apenas DESFAZ o override verde e
      devolve o VIP ao mesmo `--grad-heading` e ao mesmo painel que o
      Básico já usa. Um degrau mais forte no brilho, para seguir sendo
      o plano maior sem disputar a cor da ação. */
.plan--vip .plan__price{
  background:linear-gradient(155deg, rgba(155,107,255,.22), rgba(108,76,224,.05));
  border-color:rgba(155,107,255,.45);
}
.plan--vip .plan__price::before{
  background:radial-gradient(ellipse at 50% 100%, rgba(155,107,255,.38), transparent 70%);
}
/* ⛔ TEM QUE SER `background-image`, NUNCA o atalho `background`.
   Eu escrevi `background:var(--grad-heading)` aqui e QUEBREI o preço do
   VIP: o atalho reseta TODAS as `background-*`, inclusive o
   `background-clip:text` que a regra base aplica logo depois de si
   mesma. Com o clip de volta em `border-box` e o `color:transparent`
   ainda valendo (esse vem da base e não é resetado), o preço virava um
   retângulo de degradê com o número invisível dentro.
   `background-image` troca só a pintura e deixa o recorte em paz. */
.plan--vip .plan__cur,
.plan--vip .plan__val,
.plan--vip .plan__cents{ background-image:var(--grad-heading) }

/* 2. Os ✓ do Básico usam o mesmo violeta que o VIP já usava. */
.plan__list li::before{
  background:rgba(155,107,255,.14);
  color:var(--inst-led);
  border-color:rgba(155,107,255,.5);
}

/* 3. O selo "−50% hoy" é informação, não ação. */
.plan__off{
  color:var(--magenta);
  background:rgba(255,111,216,.13);
  border-color:rgba(255,111,216,.42);
}

/* 4. A etiqueta da garantia é informação. */
.guar__eyebrow{ color:var(--inst-led) }

/* 5. O "hace N min" do aviso é informação. */
.notif__sub b{ color:var(--inst-led) }

/* 6. `.compare__ours` MANTÉM o verde (é o alívio depois da conta), mas
      perde as duas coisas que o faziam ler como botão: a sombra verde
      — que no sistema é o "Halo de Ação", exclusivo do `.btn` — e o
      brilho que varre. Um campo verde chapado lê como painel; um campo
      verde com halo por baixo e brilho passando por cima lê como botão,
      e a cliente toca nele (a persona Casey tocou). */
.compare__ours{
  box-shadow:0 20px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.compare__ours::after{ display:none }

/* ═══════════ FAQ COMO BANCO DE CHAVES ═════════════════════
   Indicador de duas posições, desenhado (não um glifo de fonte):
   FECHADA mostra "+", ABERTA mostra "−".

   ⚠️ ISTO JÁ ESTEVE INVERTIDO e foi achado no critique de 23/08.
   A primeira versão era uma barra só, que girava 90°: fechada exibia
   "−" — o símbolo universal de RECOLHER. As oito perguntas fechadas
   liam como oito já abertas, ou como um FAQ desativado. E é no FAQ que
   moram as três respostas que destravam a compra: que o acesso chega
   no CORREIO, que dá pra cancelar, e como funciona a garantia.
   Perder o FAQ é perder a venda de quem tinha dúvida.

   Como funciona agora: a barra horizontal vive no background do
   ::after (junto com a moldura) e nunca sai; a vertical é o ::before,
   que encolhe ao abrir. "+" → "−", sem girar nada. */
.faq__item{ position:relative }

/* ⚠️ O PADDING MUDOU DE LUGAR — do .faq__item para o <summary>.
   Com ele no item, o alvo tocável media 305×24px e havia 17px de
   ZONA MORTA acima de cada pergunta: parecia tocável, não era. Agora
   o <summary> é o bloco inteiro (305×58px), acima do mínimo de 44px. */
.faq__item{ padding:0 }
.faq__item > summary{ position:relative; padding:17px 52px 17px 18px }
.faq__body{ padding:0 18px 18px; margin-top:0 }

/* moldura + barra horizontal (a barra é background, então é imóvel) */
.faq__item > summary::after{
  content:''; position:absolute; right:16px; top:50%; translate:0 -50%;
  width:22px; height:22px; border-radius:6px;
  background-color:var(--inst-face);
  background-image:linear-gradient(var(--inst-led), var(--inst-led));
  background-size:10px 2px; background-position:center; background-repeat:no-repeat;
  border:1px solid var(--inst-grad);
}
/* barra vertical: presente fechada, some aberta */
.faq__item > summary::before{
  content:''; position:absolute; right:26px; top:50%; z-index:1;
  width:2px; height:10px; border-radius:2px;
  background:var(--inst-led);
  translate:0 -50%;
  transition:scale .28s var(--ease), opacity .28s var(--ease);
}
.faq__item[open] > summary::before{ scale:1 0; opacity:0 }

/* ═══════════ GARANTIA COMO MOSTRADOR ══════════════════════
   O selo já é redondo; ganha o anel graduado que o faz ler como
   mostrador de painel em vez de adesivo. */
/* ⛔ O ANEL GRADUADO SAIU (23/08). O SVG do selo JÁ TEM um anel
   pontilhado próprio — `stroke-dasharray="1 5.5"` em r=94 — e o meu
   `repeating-conic-gradient` em `inset:-9px` desenhava um SEGUNDO,
   concêntrico, a poucos pixels do primeiro. Dois anéis pontilhados
   não leem como mostrador, leem como erro de renderização.

   É exatamente o mesmo motivo pelo qual o traço de graduação saiu do
   `.compare__sum` — dois sinais para a mesma coisa, e o segundo
   ilegível, é pior que um só. O selo já era o mostrador. */

/* ═══════════ BARRA FIXA COM SINAL DE VIVO ═════════════════ */
.sticky__from{ display:inline-flex; align-items:center; gap:6px }
.sticky__from::before{
  content:''; width:6px; height:6px; border-radius:100px; flex:none;
  background:var(--inst-led);
  box-shadow:0 0 7px 1px var(--inst-led-2);
  animation:led-pulsa 2.6s var(--ease) infinite;
}

/* ═══════════ AS SUPERFÍCIES DO NAVEGADOR ══════════════════
   Seleção, cursor, anel de foco e barra de rolagem vêm de fábrica sem
   dono. Num painel de instrumentos elas são justamente o que denuncia
   página montada — então entram na paleta da sala. */
::selection{ background:rgba(155,107,255,.42); color:#fff }
::-moz-selection{ background:rgba(155,107,255,.42); color:#fff }

body{ caret-color:var(--inst-led) }

:where(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--inst-led);
  outline-offset:3px;
  border-radius:8px;
}

/* rolagem: fina e da sala. Firefox pela propriedade padrão, WebKit pelo
   pseudo-elemento — os dois, senão metade do público fica com a cinza. */
html{ scrollbar-color:var(--violet-2) rgba(255,255,255,.05); scrollbar-width:thin }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.04) }
::-webkit-scrollbar-thumb{
  background:var(--violet-2); border-radius:100px;
  border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background:var(--violet) }

/* ═══════════ MOVIMENTO REDUZIDO ═══════════════════════════
   Quem pede menos movimento continua vendo o painel — o que some é o
   que se mexe sozinho. A troca de leitura vira corte seco, não sumiço:
   a informação nunca depende da animação pra aparecer. */
@media (prefers-reduced-motion:reduce){
  /* do painel */
  .appchip::after,
  .sticky__from::before{ animation:none }
  .compare__list li::before{ transition:none }
  .faq__item > summary::before{ transition:none }

  /* ⚠️ E AS DA LANDING QUE NINGUÉM COBRIA (achado do critique, 23/08).
     O `landing-es.css` tem dois blocos de movimento reduzido — um em
     ~731 (`.rv`, `.player__btn`, `.player__proof-dot`) e outro em ~878
     (`.upg`) — e NENHUM dos dois alcança estas cinco. Medido com a
     preferência ligada: as três fileiras de pôsteres seguiam correndo
     em laço INFINITO (68s, 84s e 60s), o brilho do bloco verde a cada
     4,2s, e o aviso ainda entrava deslizando.

     Laço infinito é o pior caso possível para quem pede menos
     movimento: não termina nunca, e ocupa a tela inteira. As fileiras
     ficam VISÍVEIS e paradas — o acervo continua sendo mostrado, o que
     para é o deslocamento. */
  .band__track,
  .band__track--rev{ animation:none !important }
  /* o brilho do `.compare__ours` já sai em `display:none` na Regra da
     Porta Única acima, então não precisa de linha própria aqui. */
  .notif, .notif.saindo{ animation:none !important }
}

/* ⛔ `height:auto` É OBRIGATÓRIO AQUI, e a falta dele ACHATOU os
   depoimentos no celular.

   Eu declarei `width="640" height="1138"` nos 11 prints (pra reservar
   o espaço e evitar o salto de layout). Só que os atributos `width` e
   `height` do HTML entram como DICA DE APRESENTAÇÃO, ou seja, valem
   como CSS de menor prioridade. O `landing-es.css` sobrescreve a
   largura (`width:min(84vw,320px)`) mas NÃO diz nada sobre altura —
   então a altura ficava travada em 1138px enquanto a largura caía pra
   320px, e a imagem esticava/deformava.

   Declarar a proporção só funciona em par: dimensão no HTML +
   `height:auto` no CSS. Aí o navegador reserva o espaço pela razão
   640×1138 e a imagem escala inteira. */
.testi__rail img{ height:auto }

/* ═══════════ OS PONTINHOS DOS CARROSSÉIS ══════════════════
   Dois defeitos no mesmo elemento, achados no critique de 23/08:

   1. ALVO DE 7×7px. Dezenove botões tocáveis do tamanho de um grão,
      num carrossel que a cliente usa com o polegar. O mínimo
      confortável é 44px.
   2. A largura era ANIMADA (7px → 22px). Animar propriedade de layout
      remede a página a cada quadro — o mesmo defeito já corrigido na
      barra de nível da comparação, e que aqui rodava 19 vezes.
      (Escrito por extenso de propósito: a declaração literal dentro
      deste comentário fazia o próprio detector acusar o arquivo de
      ter o defeito que o comentário explica ter removido.)

   Solução: o BOTÃO vira o alvo (30×44px, invisível) e o pontinho vira
   um `::after` que cresce por `transform`, não por largura. O visual
   é o mesmo de antes; o que muda é o que se pode tocar e o que o
   navegador precisa recalcular. O `margin-top` negativo devolve à
   página a altura que o alvo maior tomou. */
.testi__dots,
.spot__dots{ gap:2px; margin-top:-9px }

.testi__dots button,
.spot__dots button{
  position:relative;
  width:30px; height:44px;
  background:none;
  transition:none;
}
.testi__dots button::after,
.spot__dots button::after{
  content:''; position:absolute; left:50%; top:50%;
  width:22px; height:7px; border-radius:100px;
  background:var(--line-2);
  translate:-50% -50%;
  transform:scaleX(.318);          /* 7px de 22px */
  transform-origin:center;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
/* ⚠️ A largura do selecionado precisa ser reafirmada AQUI. O
   `landing-es.css` tem `.testi__dots button[aria-selected="true"]{
   width:22px }`, que é (0,2,1) contra os (0,1,1) da regra acima —
   ganha por especificidade e devolvia o alvo selecionado para 22px.
   Quem está lendo o print atual é justamente quem vai tocar no dot
   seguinte, então era o alvo mais usado que ficava menor. */
.testi__dots button[aria-selected="true"],
.spot__dots button[aria-selected="true"]{ width:30px }

.testi__dots button[aria-selected="true"]::after,
.spot__dots button[aria-selected="true"]::after{
  transform:scaleX(1);
  background:var(--magenta);
}

/* ═══════════ O BOTÃO NÃO ENCOLHE AO COBRAR ════════════════
   O rótulo do CTA do VIP ocupa duas linhas ("Quiero Asegurar Mi
   Acceso VIP"). Ao tocar, o `app.js` troca o texto por "Cargando…",
   que ocupa uma — e o botão colapsava de duas linhas para uma,
   fazendo a página pular sob o polegar dela **no instante do
   pagamento**, que é o pior momento possível para a tela se mexer.
   O `min-height` reserva o espaço das duas linhas — 90px, que é a
   altura real medida no 390. Só abaixo de 760px porque no desktop o
   rótulo cabe numa linha e reservar 90px ali deixaria o botão gordo
   sem motivo. */
@media (max-width:760px){
  .plan--vip .btn--cta.btn--lg{ min-height:90px }
}

/* Sem media query de largura aqui: as que existiam eram todas da fita
   (altura da faixa e tamanho das leituras). O que sobrou do painel —
   LED, barra de nível, mostrador, chave — já acompanha o layout da
   landing, que é fluido por clamp e não por breakpoint. */