/* ============================================================================
   Listen To the Mountain (antes SOM — Spirit of Mountain)
   brand.css — SISTEMA VISUAL (fonte única de verdade para forma e cor)

   Espelha o manual: Branding/SOM-branding.md
   §8 Cor · §9 Tipografia · §10 Grid e padrões · §11 Dia/Noite · §13 Motion

   COMO ATUALIZAR
   Mudou o manual? Altere apenas o bloco :root (§8/§9) e a escala (§9).
   Nada mais no site referencia cor ou fonte diretamente.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   §8 · COR — paleta bruta
   Duas cores fazem 85%. As outras três pontuam, não dividem espaço.
   Branco puro #FFFFFF não existe na marca.
------------------------------------------------------------------------- */
:root {
  --basalto:    #14110E;  /* Black 6 C      · 45% */
  --osso:       #E9E2D3;  /* Warm Gray 1 C  · 40% */
  --terra:      #B4551F;  /* 1675 C         · 10% — acento primário */
  --alpenglow:  #E8A15C;  /* 1485 C         ·  4% — só sobre basalto, só à noite */
  --liquen:     #5A6B5D;  /* 5605 C         ·  1% — utilitário */
  --neve:       #F4F6F7;  /* branco frio, exclusivo do digital */

  /* Derivadas de sistema (opacidades da paleta — não são cores novas) */
  --basalto-92: #211d18;
  --basalto-84: #2c2721;

  /* -------------------------------------------------------------------------
     §9 · TIPOGRAFIA — três famílias, funções que não se sobrepõem
  ---------------------------------------------------------------------- */
  --f-marca:   'Archivo', 'Archivo Black', 'Arial Black', system-ui, sans-serif;  /* só o wordmark */
  --f-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --f-text:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-data:    'Space Mono', ui-monospace, 'Courier New', monospace;

  /* Escala — razão 1,33 (fluida entre mobile e desktop) */
  --d1: clamp(3.5rem, 13vw, 8.5rem);   /* Poster, palco      96/84 */
  --d2: clamp(2.6rem, 7.2vw, 4.5rem);  /* Hero do site       64/58 */
  --h1: clamp(1.9rem, 4.2vw, 2.9rem);  /* Abertura de bloco  40/44 */
  --h2: clamp(1.25rem, 2.3vw, 1.75rem);/* Lead, destaque     30/38 */
  --p:  clamp(1rem, 1.05vw, 1.0625rem);/* Texto padrão       16/25 */
  --cap: 0.6875rem;                    /* Rótulo, dado       11/16 */

  --lh-display: 0.9;
  --lh-text: 1.55;
  --track-display: -0.015em;  /* −1% a −2% */
  --track-data: 0.14em;

  /* -------------------------------------------------------------------------
     §10 · GRID — 12 colunas, vão 24px, margem = 1 coluna
  ---------------------------------------------------------------------- */
  --grid-max: 1320px;
  --gutter: 24px;
  --pad-x: clamp(20px, 5.2vw, 76px);
  --section-y: clamp(72px, 11vh, 152px);

  /* §10 · Padrões — curva de nível: linhas de 2px a cada 11px */
  --curva-linha: 2px;
  --curva-passo: 11px;

  /* §13 · Motion — tudo propaga do centro para fora, no ritmo da faixa */
  --bpm: 124;
  --pulso: calc(60s / var(--bpm) * 4);   /* 4 tempos = 1 compasso */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------------
   §11 · ESTADO DIA / ESTADO NOITE
   Uma marca, dois estados. A camada noite não traz cores novas —
   inverte a hierarquia da paleta e ganha comportamento próprio.
------------------------------------------------------------------------- */
[data-state='dia'] {
  --bg: var(--osso);
  --bg-alt: #F1EDE4;
  --fg: var(--basalto);
  --fg-mute: color-mix(in srgb, var(--basalto) 58%, var(--osso));
  --accent: var(--terra);
  --rule: color-mix(in srgb, var(--basalto) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--basalto) 34%, transparent);
  --util: var(--liquen);
  /* Texto sobre massa de acento. Dia: osso sobre terra queimada (aprovado). */
  --sobre-acento: var(--osso);
  color-scheme: light;
}

[data-state='noite'] {
  --bg: var(--basalto);
  --bg-alt: var(--basalto-92);
  --fg: var(--osso);
  --fg-mute: color-mix(in srgb, var(--osso) 56%, var(--basalto));
  --accent: var(--alpenglow);       /* como fonte de luz */
  --rule: color-mix(in srgb, var(--osso) 15%, transparent);
  --rule-strong: color-mix(in srgb, var(--osso) 32%, transparent);
  --util: color-mix(in srgb, var(--liquen) 80%, var(--osso));
  /* Noite: basalto sobre alpenglow. Osso sobre alpenglow é combinação proibida. */
  --sobre-acento: var(--basalto);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   RESET
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: var(--p);
  line-height: var(--lh-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--basalto); }

/* Foco visível — acessibilidade, sem efeito decorativo (§7 usos proibidos) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   §6 · TERRITÓRIO — a marca parece impressa: tem grão, tem tinta
------------------------------------------------------------------------- */
.grao::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------------------
   LAYOUT
------------------------------------------------------------------------- */
.som-sec {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: var(--section-y) var(--pad-x);
  overflow: hidden;
}
.som-sec--tight { padding-block: clamp(48px, 7vh, 88px); }
.som-sec--flush { padding-block: 0; }

.wrap {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
@media (max-width: 860px) {
  .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   §9 · CLASSES TIPOGRÁFICAS
------------------------------------------------------------------------- */
.t-d1, .t-d2, .t-h1 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}
.t-d1 { font-size: var(--d1); }
.t-d2 { font-size: var(--d2); line-height: 0.92; }
.t-h1 { font-size: var(--h1); line-height: 1.05; }

.t-h2 {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--h2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

.t-p { margin: 0 0 1.05em; max-width: 68ch; }
.t-p:last-child { margin-bottom: 0; }
.t-lead { font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.5; }
.t-mute { color: var(--fg-mute); }

/* §9 · Space Mono — dados. Letterspacing .14em em caixa alta */
.t-mono {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  line-height: 1.5;
}
.t-mono--lg { font-size: 0.8125rem; }
.t-accent { color: var(--accent); }

/* §10 · O rótulo em mono fica sempre alinhado à coluna 1, no topo da peça */
.rotulo {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 4vh, 44px);
}
.rotulo::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--accent);
  flex: none;
}

/* ---------------------------------------------------------------------------
   §7 · O SINAL — símbolo
   Barras injetadas por som.render.js a partir de SOM.marca.sinal
------------------------------------------------------------------------- */
[data-som-mark] { display: inline-flex; align-items: flex-end; }
.sinal { display: block; height: 1em; width: auto; overflow: visible; }
.sinal .b { fill: currentColor; }
.sinal .b--pico { fill: var(--accent); }

/* Lockup 1 — principal, horizontal.
   A altura do símbolo é sempre igual à altura da caixa alta do wordmark. */
.lockup {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.42em;
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1;
  text-decoration: none;
}
.lockup .sinal { height: 0.74em; margin-bottom: 0.02em; }

/* Wordmark — "LISTEN to the MOUNTAIN". Duas linhas: LISTEN + conector
   pequeno na primeira (o conector encosta na ponta direita), MOUNTAIN na
   segunda. Largura e extensão vêm da fonte (Archivo, eixo wdth 125).
   Tamanho = font-size do elemento. Texto montado por som.render.js a partir
   de SOM.marca.wordmark. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.06em;
  font-family: var(--f-marca);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}
.wordmark .wm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.22em; }
/* "to the" cresce até fechar a linha: termina na mesma borda do MOUNTAIN */
.wordmark .wm-to { font-size: 0.52em; text-transform: none; letter-spacing: 0.01em; }
/* Com o sinal: barras à esquerda, da altura da caixa alta de LISTEN até a
   linha de base de MOUNTAIN (topo da caixa alta ≈ .10em, base ≈ .126em acima
   do fim do bloco), alinhadas ao pé do texto. */
.wordmark--sinal { flex-direction: row; align-items: flex-end; gap: 0.3em; }
.wordmark--sinal .wm-txt { display: flex; flex-direction: column; align-items: stretch; gap: 0.06em; }
.wordmark--sinal .sinal { height: 1.674em; width: auto; flex: none; margin-bottom: 0.126em; }
.nav .wordmark { font-size: 0.86rem; color: var(--fg); }

/* Lockup 2 — empilhado + descritor entre filetes */
.lockup-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5em; }
.lockup-stack .descritor {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
}
.lockup-stack .descritor::before,
.lockup-stack .descritor::after {
  content: ''; height: 1px; width: 22px; background: var(--rule-strong);
}

/* Derivada — pico sozinho, como divisor de texto (§7) */
.pico-div {
  width: 10px; height: 26px; background: var(--accent);
  display: inline-block; vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   §10 · PADRÕES — todos vêm da linha horizontal repetida
------------------------------------------------------------------------- */

/* Curva de nível */
.pat-curva::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--fg) 0 var(--curva-linha),
    transparent var(--curva-linha) var(--curva-passo)
  );
  opacity: 0.09;
  -webkit-mask-image: var(--pat-mask, radial-gradient(120% 88% at 50% 0%, #000 12%, transparent 76%));
  mask-image: var(--pat-mask, radial-gradient(120% 88% at 50% 0%, #000 12%, transparent 76%));
}

/* Relevo — o símbolo esticado para preencher, densidade variável.
   Pode virar dado real: altitude das pistas, BPM do set. */
.pat-relevo {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: clamp(56px, 9vw, 104px);
  width: 100%;
}
.pat-relevo i {
  flex: 1 1 0;
  background: var(--fg);
  opacity: 0.22;
  min-width: 2px;
  transform-origin: bottom;
  transition: opacity .5s var(--ease);
}
.pat-relevo i[data-pico] { background: var(--accent); opacity: 1; }

/* Propagação (camada noite) — anéis concêntricos saindo de um ponto na base.
   Só depois das 22h. Em vídeo, pulsam no BPM. */
.pat-prop {
  position: absolute;
  left: 50%; bottom: -8%;
  width: min(180vw, 1900px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.pat-prop span {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: propaga var(--pulso) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes propaga {
  0%   { width: 4%;  height: 4%;  opacity: 0; }
  12%  { opacity: 0.5; }
  100% { width: 100%; height: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pat-prop span { animation: none; opacity: 0.16; }
  .pat-prop span:nth-child(1) { width: 22%; height: 22%; }
  .pat-prop span:nth-child(2) { width: 44%; height: 44%; }
  .pat-prop span:nth-child(3) { width: 66%; height: 66%; }
  .pat-prop span:nth-child(4) { width: 88%; height: 88%; }
  .pat-prop span:nth-child(n+5) { display: none; }
}

/* Filete — regra horizontal do sistema */
.filete { height: 1px; background: var(--rule); border: 0; margin: 0; }
.filete--forte { background: var(--rule-strong); }

/* ---------------------------------------------------------------------------
   BOTÕES — massa cheia, cantos retos, sem efeito (§7)
------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--accent);
  color: var(--sobre-acento);
  font-family: var(--f-data);
  font-size: 0.75rem;
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.btn:hover { background: transparent; color: var(--accent); }
.btn .seta { transition: transform .22s var(--ease); }
.btn:hover .seta { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.btn--bloco { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------------
   DADOS — tiras e cartões em mono
------------------------------------------------------------------------- */
.tira-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(18px, 3vw, 40px);
  align-items: center;
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.tira-dados b { color: var(--fg); font-weight: 400; }

.stat { border-top: 2px solid var(--fg); padding-top: 14px; }
.stat--acento { border-top-color: var(--accent); }
.stat .num {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  display: block;
}
.stat--acento .num { color: var(--accent); }
.stat .lab {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 10px;
  display: block;
}

/* Cartão base do sistema */
.card {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.card .idx {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  color: var(--accent);
}
.card h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1.06rem;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  margin: 0;
  font-weight: 400;
}
.card p { margin: 0; color: var(--fg-mute); font-size: 0.95rem; }

/* Tabela / lista de programação */
.linha-prog {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.linha-prog:last-child { border-bottom: 1px solid var(--rule); }
.linha-prog .dia {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  color: var(--accent);
  text-transform: uppercase;
}
.linha-prog .tit {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: var(--track-display);
  line-height: 1.08;
}
.linha-prog .det { color: var(--fg-mute); font-size: 0.92rem; max-width: 42ch; }
@media (max-width: 720px) {
  .linha-prog { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   FORMULÁRIO (página de patrocínio)
------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.campo input,
.campo select,
.campo textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--f-text);
  font-size: 1rem;
  color: var(--fg);
  transition: border-color .2s var(--ease);
  width: 100%;
}
.campo select { appearance: none; cursor: pointer; }
.campo select option { background: var(--bg); color: var(--fg); }
.campo textarea { resize: vertical; min-height: 108px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-mute); opacity: .6; }

.form-nota { font-size: 0.82rem; color: var(--fg-mute); }
/* Celular: um campo por linha. Dois lado a lado cortam e-mail e rótulos. */
@media (max-width: 560px) {
  .form-grid .campo { grid-column: 1 / -1; }
}
.form-status {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  color: var(--accent);
  min-height: 1.5em;
}

/* ---------------------------------------------------------------------------
   NAVEGAÇÃO
------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--pad-x);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--rule);
}
.nav .lockup { font-size: 1.18rem; color: var(--fg); }
.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; }
.nav-links a {
  white-space: nowrap;
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-mute);
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-cta {
  font-family: var(--f-data);
  font-size: var(--cap);
  letter-spacing: var(--track-data);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 9px 14px;
  white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-cta:hover { background: var(--accent); color: var(--bg); }
@media (max-width: 900px) { .nav-links .opt { display: none; } }

/* ---------------------------------------------------------------------------
   §13 · MOTION — nada de zoom dramático, nada de glitch.
   Entrada discreta: sobe 14px e aparece.
------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Utilitários de coluna
   .c-N define o SPAN pelo grid-column-start; .ate-fim ancora o elemento na
   última linha do grid. Nunca usar o atalho `grid-column: span N` aqui: ele
   escreve start E end de uma vez e faz o par .c-N + .ate-fim colapsar para
   uma coluna só. Com .ate-fim, o recuo se ajusta sozinho se o span mudar. */
.c-12 { grid-column-start: span 12; }
.c-8  { grid-column-start: span 8; }
.c-7  { grid-column-start: span 7; }
.c-6  { grid-column-start: span 6; }
.c-5  { grid-column-start: span 5; }
.c-4  { grid-column-start: span 4; }
.c-3  { grid-column-start: span 3; }
.ate-fim { grid-column-end: -1; }
@media (max-width: 860px) {
  .c-8, .c-7, .c-6, .c-5, .c-4, .c-3 { grid-column-start: span 6; }
  .ate-fim { grid-column-end: auto; }
}
@media (max-width: 560px) {
  .c-3, .c-4 { grid-column-start: span 3; }
}

.stack-sm > * + * { margin-top: 14px; }
.stack-md > * + * { margin-top: 26px; }
.stack-lg > * + * { margin-top: clamp(34px, 5vh, 58px); }

/* ---------------------------------------------------------------------------
   RÉGUA DE ALTITUDE — montada por som.regua.js
   Base embaixo, cume em cima; rolar é subir. Adota o data-state (dia/noite)
   da seção sob ela. Desktop: trilho à direita. Celular: barra embaixo.
   --p = progresso da subida (0 base → 1 cume), escrito pelo JS no .regua
   --a = posição de cada marca na escala, escrita pelo JS em cada <i>
--------------------------------------------------------------------------- */
.regua {
  position: fixed;
  z-index: 700;
  color: var(--fg);
  background: var(--bg);
  pointer-events: none;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.regua-escala { position: absolute; }
.regua-escala span, .regua-escala i { position: absolute; display: block; }
.regua-trilho { background: var(--rule); }
.regua-subida { background: var(--accent); }
.regua-marca  { background: var(--accent); }
.regua-escala i { background: var(--rule-strong); }
.regua-escala i.maior { background: var(--fg-mute); }
.regua-alt {
  position: absolute;
  font-family: var(--f-data);
  font-size: 0.6875rem;
  letter-spacing: var(--track-data);
  white-space: nowrap;
}

/* Desktop ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --regua-w: 112px; --regua-escala: 18px; }
  .tem-regua body { padding-right: var(--regua-w); }
  .regua { top: 0; right: 0; bottom: 0; width: var(--regua-w); border-left: 1px solid var(--rule); }

  .regua-escala { top: 22px; bottom: 58px; right: 0; width: var(--regua-escala); }
  .regua-trilho { right: 0; top: 0; bottom: 0; width: 1px; }
  .regua-subida { right: 0; bottom: 0; width: 2px; height: calc(var(--p, 0) * 100%); }
  .regua-escala i { right: 0; bottom: calc(var(--a) * 100%); width: 6px; height: 1px; }
  .regua-escala i.maior { width: 12px; }
  .regua-escala i.maior::before {
    content: attr(data-alt);
    display: none;
    position: absolute;
    right: 16px;
    top: -0.62em;
    font-family: var(--f-data);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--fg-mute);
  }
  .regua-marca { right: 0; bottom: calc(var(--p, 0) * 100%); width: 18px; height: 2px; margin-bottom: -1px; }

  .regua-nomes {
    position: absolute;
    top: 22px; bottom: 58px;
    left: 12px; right: calc(var(--regua-escala) + 10px);
  }
  .regua-l {
    position: absolute;
    left: 0; top: 0;
    font-family: var(--f-display);
    font-size: 30px;
    line-height: 0.9;
    text-transform: uppercase;
    white-space: pre;
    transform-origin: 0 0;
    color: var(--fg-mute);
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
    transition: transform .8s cubic-bezier(0.7, 0, 0.2, 1), color .4s var(--ease);
  }
  .regua-l.is-passado { color: var(--fg); opacity: 0.55; }
  .regua-l.is-ativo { color: var(--fg); opacity: 1; }
  .regua-l:hover { color: var(--accent); opacity: 1; }

  .regua-alt { left: 0; right: 0; bottom: 22px; text-align: center; }
  .regua-atual { display: none; }
}
/* Tela larga: cabem os números da escala */
@media (min-width: 1280px) {
  :root { --regua-w: 136px; --regua-escala: 46px; }
  .regua-escala i.maior::before { display: block; }
}

/* Celular e tablet ------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .tem-regua body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .regua {
    left: 0; right: 0; bottom: 0;
    height: calc(52px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
  }
  .regua-escala { top: 0; left: var(--pad-x); right: var(--pad-x); height: 10px; }
  .regua-trilho { left: 0; right: 0; top: 0; height: 1px; }
  .regua-subida { left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); }
  .regua-escala i { top: 0; left: calc(var(--a) * 100%); width: 1px; height: 4px; }
  .regua-escala i.maior { height: 8px; }
  .regua-marca { top: 0; left: calc(var(--p, 0) * 100%); width: 2px; height: 12px; margin-left: -1px; }
  .regua-nomes { display: none; }

  .regua-atual, .regua-alt { bottom: calc(13px + env(safe-area-inset-bottom)); }
  .regua-atual {
    position: absolute;
    left: var(--pad-x);
    right: 96px;
    display: flex;
    overflow: hidden;
    font-family: var(--f-display);
    font-size: 1.05rem;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .regua-atual span {
    display: inline-block;
    transform-origin: 0 100%;
    animation: regua-gira .6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 22ms);
  }
  .regua-alt { right: var(--pad-x); }
}
@keyframes regua-gira {
  from { transform: translateY(40%) rotate(-90deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.regua.sem-transicao .regua-l { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .regua, .regua-l { transition: none; }
  .regua-atual span { animation: none; }
}