/* Tema Clean do 4respira — porte do tema Clean do app (`breathctrl.respirei.app`, V34-PWA).
   ============================================================================================

   COMO ESTA FOLHA É LIGADA — leia antes de mexer.

   Ela não é um conjunto de seletores `[data-theme="clean"]`: é uma FOLHA INTEIRA, ligada e
   desligada pelo atributo `media` do `<link>` (`all` liga, `not all` desliga). Quem troca o
   atributo é o `/assets/tema.js`, e o script inline no `<head>` de cada página faz isso antes
   da primeira pintura para não haver flash de tema errado.

   É a mesma mecânica do app, e ela impõe **uma regra que quebra em silêncio se for ignorada**:
   esta folha precisa ser o ÚLTIMO `<link rel="stylesheet">` de cada página, depois de
   `system-BqAOc40I.css`, de `rodape.css`, de `home.css`/`aula.css` e também depois dos blocos
   `<style>` inline da `inscricao4respira` e da `obrigado4respira`. Quase toda regra daqui tem a
   MESMA especificidade da regra que sobrescreve — quem decide é a ordem no documento. Mover o
   link para cima, ou juntar tudo num arquivo só, faz o Clean carregar e não pintar nada.

   A REGRA DE COR QUE ORGANIZA O ARQUIVO. No escuro, um acento serve para tudo: o mesmo
   `--ctrl-lime` preenche um botão e escreve um rótulo, porque neon sobre preto tem contraste
   nos dois papéis. Sobre papel, não: `#b7ff3c` sobre branco dá 1,1:1. Então cada acento passa a
   ter DOIS tokens — o VIVO (`--ctrl-lime`) preenche, e o de TINTA (`--ctrl-lime-ink`) escreve e
   contorna. Trocar um pelo outro é o erro mais fácil de cometer aqui.

   Sobre fotografia nada disso vale, porque a fotografia não mudou de tema. Onde há imagem por
   baixo — a capa de vídeo da sala de aula, a legenda das figuras, o medidor sobre o tronco, a
   pílula de duração — o tratamento escuro CONTINUA, e as regras que fazem isso estão marcadas
   com "ilha escura" ao longo do arquivo. */


/* --- 1. Tokens -------------------------------------------------------------------------------
   A elevação continua sendo "surface mais claro que bg", como no escuro, então nenhuma regra de
   fundo precisou mudar de token. É por isso que a página é cinza-clara e não branca: o painel
   precisa de para onde subir.

   O seletor é o mesmo do sistema (`body:has(.ctrl-page)`, especificidade 0,1,1) — vence por vir
   depois, não por ser mais específico. */
body:has(.ctrl-page) {
  color-scheme: light;

  --ctrl-bg: #f2f4f7;
  --ctrl-bg-deep: #e7eaef;
  --ctrl-surface: #ffffff;
  --ctrl-surface-3: #eceff4;

  --ctrl-line: rgba(12, 20, 32, 0.13);
  --ctrl-line-strong: rgba(12, 20, 32, 0.24);

  /* Token que o design system não tem, porque no escuro ele não faz falta: um campo de
     formulário é um retângulo mais ESCURO que o painel, e a caixa se vê sozinha. Sobre papel o
     campo é mais claro que nada, e a borda de .13 some — o formulário de inscrição vira quatro
     retângulos cinzas sem contorno. .46 é a borda de campo do Clean do app. */
  --ctrl-line-input: rgba(12, 20, 32, 0.46);

  --ctrl-text: #36414d;
  --ctrl-prose: #465260;
  --ctrl-muted: #55606f;

  /* Tinta sobre o acento vivo. Um único valor para os quatro: é a cor do texto de qualquer
     preenchimento (botão primário, tarja da tese, chip da aula atual, seleção de texto). */
  --ctrl-on-accent: #111820;

  /* Os pares vivo/tinta. Medidos sobre #f2f4f7: cyan-ink 6,5:1, lime-ink 5,3:1, coral-ink
     6,3:1, amber-ink 6,8:1, magenta-ink 6,3:1. E a tinta sobre o vivo, que é o outro sentido:
     a tinta dos controles conserva contraste sobre os acentos vivos. */
  --ctrl-cyan: #008cff;
  --ctrl-cyan-ink: #005a9c;
  --ctrl-cyan-soft: rgba(0, 140, 255, 0.13);
  --ctrl-lime: var(--respirei-green);
  --ctrl-lime-ink: #2f7300;
  --ctrl-lime-hover: #6ceb45;
  --ctrl-lime-soft: rgba(77, 222, 31, 0.26);
  --ctrl-coral: var(--respirei-coral);
  --ctrl-coral-ink: #b3111d;
  --ctrl-coral-soft: rgba(255, 77, 90, 0.12);
  --ctrl-amber: var(--respirei-amber);
  --ctrl-amber-ink: #7a4a00;
  --ctrl-magenta: var(--respirei-magenta);
  --ctrl-magenta-ink: #b00062;

  /* Lavagens de superfície. No escuro eram véus brancos; aqui são de tinta, e tinta sobre
     branco precisa de ~1,6x a alpha que o branco tinha sobre preto para o mesmo efeito. */
  --ctrl-wash-1: rgba(12, 20, 32, 0.035);
  --ctrl-wash-2: rgba(12, 20, 32, 0.055);
  --ctrl-wash-3: rgba(12, 20, 32, 0.085);

  /* A grade de 1px é o que faz a página parecer terminal e não site. No escuro ela é véu branco
     a .035 com um dimmer de .17 por cima (efetivo .006); espelhado no claro isso seria
     invisível. Valor único, sem dimmer — ver o bloco do `::before`, logo abaixo. */
  --ctrl-grid-line: rgba(12, 20, 32, 0.045);

  /* Sombra de papel: difusa e curta, não o poço de 80px do escuro. */
  --ctrl-shadow: 0 18px 44px -22px rgba(12, 20, 32, 0.3), 0 2px 6px -3px rgba(12, 20, 32, 0.1);

  background:
    radial-gradient(circle at 18% 8%, rgba(0, 140, 255, 0.08), transparent 25%),
    radial-gradient(circle at 84% 30%, rgba(146, 127, 255, 0.07), transparent 28%),
    var(--ctrl-bg);
}

/* O dimmer de .17 do escuro sai: a grade já nasce no valor certo. */
body:has(.ctrl-page)::before {
  opacity: 1;
  background-image:
    linear-gradient(var(--ctrl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ctrl-grid-line) 1px, transparent 1px);
}


/* --- 2. Foco e seleção -----------------------------------------------------------------------
   Lima a 1,1:1 seria um foco que não se vê. Tinta sólida, com um espaçador claro por baixo para
   o anel sobreviver também quando o elemento está sobre a fotografia do hero. */
.ctrl-page :focus-visible {
  outline-color: var(--ctrl-lime-ink);
  box-shadow: 0 0 0 1px var(--ctrl-surface);
}

.ctrl-page ::selection {
  color: var(--ctrl-on-accent);
  background: var(--ctrl-lime);
}


/* --- 3. A marca ------------------------------------------------------------------------------
   O wordmark existe num arquivo só, e ele é branco: sobre papel some. `brightness(0)` derruba
   todo pixel opaco para preto e a opacidade de .8 suaviza o preto sobre o fundo
   da página, acompanhando o texto do tema claro. Alternativa seria um segundo PNG preto, que custaria
   mais 40 KB no ar e mais um ativo a manter sincronizado. */
.ctrl-brand img {
  filter: brightness(0) opacity(0.8);
}

.ctrl-brand__tag {
  color: var(--ctrl-cyan-ink);
}


/* --- 4. O seletor de aparência ---------------------------------------------------------------
   O desenho do componente mora no `estilos/tema.css`, que as quatro páginas carregam SEMPRE —
   se morasse aqui, o botão ficaria sem estilo nenhum no tema Black, que é o padrão. Daqui saem
   só as três declarações que mudam de tema.

   A escolha é local ao dispositivo (localStorage) e não viaja para lugar nenhum: não entra no
   formulário de inscrição, não vira lead, não é enviada ao `/api/geo`. */
.ctrl-theme-switch {
  /* No escuro é véu branco sobre preto com um vinco preto por dentro; sobre papel os dois
     invertem, senão o botão some no fundo da barra. */
  background: var(--ctrl-wash-1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.ctrl-theme-switch button[aria-pressed="true"] {
  /* `--ctrl-bg-deep` era o preto do tema escuro; no Clean ele é claro e sumiria no gradiente. */
  color: var(--ctrl-on-accent);
}


/* --- 5. Cabeçalho e hero ---------------------------------------------------------------------
   O hero da home tem a fotografia atrás do texto. Ela não muda de tema — o que muda é o véu:
   no escuro ele funde a foto em #020305, aqui em #f2f4f7. Do lado esquerdo, onde o texto mora,
   o véu é praticamente opaco, então o título fica sobre papel e não sobre imagem. */
.ctrl-nav {
  border-bottom-color: var(--ctrl-line);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.94),
    rgba(255, 255, 255, 0.7) 70%,
    transparent
  );
}

/* No escuro a foto é rebaixada (brightness .78) para o texto branco vencer. Sobre papel o
   movimento é o contrário: ela sobe de leve e perde um pouco de saturação, para o véu claro não
   ficar leitoso em cima de uma imagem já escura. */
.ctrl-hero__media img {
  filter: saturate(0.92) contrast(1.02) brightness(1.02);
}

.ctrl-hero__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(242, 244, 247, 0.99) 0%,
      rgba(242, 244, 247, 0.94) 20%,
      rgba(242, 244, 247, 0.72) 43%,
      rgba(242, 244, 247, 0.06) 76%
    ),
    linear-gradient(
      0deg,
      rgba(242, 244, 247, 0.88) 0,
      transparent 27%,
      rgba(242, 244, 247, 0.08) 74%,
      rgba(242, 244, 247, 0.45) 100%
    );
}

/* `overlay` clareia sobre fundo claro: as linhas de varredura sumiriam. Vira linha de tinta em
   modo normal, e a opacidade cai porque tinta sobre papel pesa mais que véu sobre preto. */
.ctrl-hero__scan {
  opacity: 0.06;
  mix-blend-mode: normal;
  background: repeating-linear-gradient(transparent 0 4px, rgba(12, 20, 32, 0.16) 5px);
}

.ctrl-hero h1 .ctrl-signal-line {
  color: var(--ctrl-lime-ink);
}

/* O glow aditivo não existe em papel: destaque pequeno vira anel de tinta. */
.ctrl-hero__proof::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctrl-lime) 42%, transparent);
}

/* O painel fica no canto da foto, onde o véu é quase transparente: ele precisa do próprio fundo
   opaco o bastante para o texto de dentro (que é tinta) não disputar com a imagem. */
.ctrl-telemetry {
  border-color: color-mix(in srgb, var(--ctrl-cyan-ink) 22%, transparent);
  background: rgba(255, 255, 255, 0.86);
}

/* As três barrinhas do medidor do hero. O ciano e o rosa vêm redefinidos por zona no
   `home.css` com os valores neon; sobre o painel claro eles lavam. Trocados pelos vivos do
   Clean — o verde das costelas já vem do token e não precisa de regra. */
.ctrl-zone--belly {
  --ctrl-lime: #008cff;
}

.ctrl-zone--chest {
  --ctrl-lime: #ff168c;
}


/* --- 6. Texto de acento: tudo que escreve passa a usar a tinta ------------------------------- */
.ctrl-lime {
  color: var(--ctrl-lime-ink);
}

.ctrl-amber {
  color: var(--ctrl-amber-ink);
}

.ctrl-eyebrow,
.ctrl-facts__index,
.ctrl-brief__step {
  color: var(--ctrl-cyan-ink);
}

.ctrl-map__arrow {
  color: var(--ctrl-lime-ink);
}

.ctrl-deliverables .ctrl-facts__index {
  color: var(--ctrl-lime-ink);
}

.ctrl-lesson__code {
  color: var(--ctrl-accent-ink, var(--ctrl-cyan-ink));
}

.ctrl-lesson__zone {
  color: var(--ctrl-accent-ink, var(--ctrl-cyan-ink));
  border-color: color-mix(in srgb, var(--ctrl-accent-ink, var(--ctrl-cyan-ink)) 34%, transparent);
  background: color-mix(in srgb, var(--ctrl-accent, var(--ctrl-cyan)) 12%, transparent);
}

/* O acento de cada card de aula ganha o par de tinta, na mesma ordem do `home.css`: ciano,
   verde, rosa e âmbar. O `--ctrl-accent` vivo continua valendo para borda de hover e halo. */
.ctrl-page .ctrl-lesson:nth-child(1) {
  --ctrl-accent-ink: var(--ctrl-cyan-ink);
}

.ctrl-page .ctrl-lesson:nth-child(2) {
  --ctrl-accent-ink: var(--ctrl-lime-ink);
}

.ctrl-page .ctrl-lesson:nth-child(3) {
  --ctrl-accent-ink: var(--ctrl-magenta-ink);
}

.ctrl-page .ctrl-lesson:nth-child(4) {
  --ctrl-accent-ink: var(--ctrl-amber-ink);
}

.ctrl-quote {
  border-left-color: var(--ctrl-lime-ink);
  background: var(--ctrl-surface);
}

.ctrl-quote figcaption {
  color: var(--ctrl-lime-ink);
}

.ctrl-badge {
  color: var(--ctrl-cyan-ink);
  border-color: color-mix(in srgb, var(--ctrl-cyan-ink) 30%, transparent);
}

.ctrl-badge::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctrl-lime) 42%, transparent);
}

.ctrl-brief__done {
  color: var(--ctrl-lime-ink);
  border-color: color-mix(in srgb, var(--ctrl-lime-ink) 40%, transparent);
  background: color-mix(in srgb, var(--ctrl-lime) 14%, transparent);
}

/* Ver o `--ctrl-line-input` no bloco 1: sobre papel a borda de .13 do sistema desaparece e o
   campo deixa de parecer campo. */
.ctrl-field input,
.ctrl-field select {
  border-color: var(--ctrl-line-input);
}

.ctrl-field__error {
  color: var(--ctrl-coral-ink);
}

/* No escuro a mensagem de erro é rosa-clara sobre véu vermelho; sobre papel isso vira ilegível
   nos dois sentidos — a cor e o fundo trocam de lado. */
.ctrl-form__error {
  color: var(--ctrl-coral-ink);
  border-color: color-mix(in srgb, var(--ctrl-coral-ink) 34%, transparent);
  background: color-mix(in srgb, var(--ctrl-coral) 9%, transparent);
}

.ctrl-footer a:hover,
.ctrl-form__privacy a:hover {
  text-decoration-color: var(--ctrl-cyan-ink);
}

.ctrl-page .st-breath-guide__cue {
  color: var(--ctrl-lime-ink);
}

/* O título verde da página de inscrição mora num `<style>` inline daquela página, com
   especificidade 0,2,1 — daí o seletor repetido por inteiro aqui. */
.ctrl-signup__story h1 .ctrl-signal-line {
  color: var(--ctrl-lime-ink);
}


/* --- 7. Texto sobre acento preenchido -------------------------------------------------------
   No escuro, `color: var(--ctrl-bg)` era preto sobre neon. Com o `--ctrl-bg` claro isso vira
   papel sobre lima: some. Todos passam para `--ctrl-on-accent`. */
.ctrl-btn--primary,
.ctrl-skip-link,
.ctrl-thesis {
  color: var(--ctrl-on-accent);
}

.ctrl-page .st-button--primary {
  color: var(--ctrl-on-accent) !important;
}

.ctrl-btn--secondary,
.ctrl-page .st-button--secondary {
  background: var(--ctrl-wash-1);
}

.ctrl-page .st-button--secondary:hover {
  background: var(--ctrl-cyan-soft);
}

/* O mesmo cinza dos títulos suaviza o texto da tarja no tema claro. */
.ctrl-mark { color: var(--ctrl-text); }


/* --- 8. Superfícies que tinham a cor escura escrita à mão ------------------------------------ */
.ctrl-lesson {
  background: linear-gradient(145deg, var(--ctrl-wash-1), transparent 58%), var(--ctrl-surface);
}

.ctrl-lesson:hover {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ctrl-accent, var(--ctrl-cyan)) 12%, transparent), transparent 62%),
    var(--ctrl-surface);
}

.ctrl-facts li {
  background: var(--ctrl-surface);
}

/* A grade do fechamento é a mesma decisão do `::before` do corpo: valor de tinta, sem dimmer. */
.ctrl-final {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ctrl-lime) 18%, transparent), transparent 25%),
    linear-gradient(var(--ctrl-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ctrl-grid-line) 1px, transparent 1px),
    var(--ctrl-bg-deep);
}

.ctrl-rail__track i {
  background: var(--ctrl-wash-3);
}

.ctrl-rail__track i[data-done="true"] {
  background: linear-gradient(90deg, var(--ctrl-cyan-ink), var(--ctrl-lime-ink));
  box-shadow: none;
}

.ctrl-rail__item[aria-current="true"] {
  background: var(--ctrl-wash-2);
}

.ctrl-rail__item:hover {
  background: var(--ctrl-wash-1);
}

.ctrl-complete {
  background: radial-gradient(circle, color-mix(in srgb, var(--ctrl-lime) 15%, transparent), transparent 58%);
}

/* O círculo que respira no fim da série. Os dois `box-shadow` do escuro são glow aditivo de
   80px e 65px: em papel viram borrão cinza, então saem e ficam só o traço e o miolo. */
.ctrl-core {
  border-color: var(--ctrl-cyan-ink);
  background: color-mix(in srgb, var(--ctrl-cyan) 7%, transparent);
  box-shadow: none;
}

.ctrl-core::before {
  border-color: color-mix(in srgb, var(--ctrl-lime-ink) 45%, transparent);
}

.ctrl-core::after {
  background: radial-gradient(
    circle,
    var(--ctrl-lime),
    color-mix(in srgb, var(--ctrl-lime) 14%, transparent) 38%,
    transparent 70%
  );
}

.ctrl-page {
  --st-color-surface-subtle: var(--ctrl-wash-1);
  --st-color-brand-orange-text: var(--ctrl-lime-ink);
}


/* --- 10. Ilhas escuras: o que fica sobre fotografia ------------------------------------------
   A fotografia não tem versão Clean — é a mesma imagem nos dois temas. Então tudo que se apoia
   nela continua com o tratamento escuro. Inverter isso aqui é o caminho mais curto para texto
   ilegível sobre imagem. */

/* A legenda das figuras fica sobre o pé escurecido da própria foto (o `::before` do sistema, e
   o gradiente mais fechado que o `home.css` dá à figura do "Quem conduz"). O gradiente fica
   como está; a legenda é que precisa continuar clara. */
.ctrl-page .ctrl-figure__caption {
  color: rgba(255, 255, 255, 0.82);
}

/* O medidor animado sobre o tronco do Ricardo, na seção do método: mesma foto, mesmos neons.
   O traço e as legendas já são claros por valor fixo no `home.css`; aqui só as três zonas
   acesas, que leem token. */
.ctrl-breath__zone--belly {
  --st-color-brand-orange: #00d9ff;
}

.ctrl-breath__zone--ribs {
  --st-color-brand-orange: #b7ff3c;
}

.ctrl-breath__zone--chest {
  --st-color-brand-orange: #ff168c;
}

/* A capa de vídeo da sala de aula é a ilha maior: número, título, diagrama e botão de play
   moram sobre a foto, e o título e o número são `#fff` fixos no design system. Em vez de
   reescrever cada um, a ilha inteira volta a resolver os tokens nos valores do escuro — o que
   está dentro dela se comporta exatamente como hoje.

   `--aula` continua vindo por `style` inline do script da página, com o neon de sempre: como o
   consumo dele aqui dentro é sobre foto, isso está certo e não se toca. */
.ctrl-page .st-lesson-cover {
  --ctrl-bg: #05070a;
  --ctrl-bg-deep: #020305;
  --ctrl-text: #f5f7fa;
  --ctrl-muted: #8b96a5;
  --ctrl-line-strong: rgba(255, 255, 255, 0.18);
  --ctrl-cyan: #00d9ff;
  --ctrl-lime: #b7ff3c;
  --ctrl-magenta: var(--respirei-magenta);
  --ctrl-amber: var(--respirei-amber);

  background: #020305;
}

/* A pílula de duração é irmã da capa, não filha: fica de fora do escopo acima e precisa da
   própria regra. Fundo escuro sobre a foto, texto claro. */
.aula-duracao {
  color: #f5f7fa;
  border-color: rgba(255, 255, 255, 0.24);
}


/* --- 11. Cor por aula fora da ilha -----------------------------------------------------------
   `--aula` e `--cor-aula` são escritos por `style` inline pelo script da `conteudo4respira`, com
   os quatro neons. Estilo inline vence qualquer folha, então não há como trocá-los daqui — e
   nem se deve: dentro da capa eles estão certos.

   O que dá para fazer, e é o que este bloco faz, é derivar os pares vivo/tinta do atributo que
   o mesmo script já escreve (`data-zona` na página, `data-cor` em cada item da trilha) e trocar
   só as regras que consomem a cor FORA da foto. */
.ctrl-page[data-zona="belly"] {
  --aula-vivo: #008cff;
  --aula-ink: #005a9c;
}

.ctrl-page[data-zona="ribs"] {
  --aula-vivo: #4dde1f;
  --aula-ink: #2f7300;
}

.ctrl-page[data-zona="chest"] {
  --aula-vivo: #ff168c;
  --aula-ink: #b00062;
}

.ctrl-page[data-zona="all"] {
  --aula-vivo: #ffb020;
  --aula-ink: #7a4a00;
}

.ctrl-rail__item[data-cor="belly"] {
  --cor-aula-vivo: #008cff;
  --cor-aula-ink: #005a9c;
}

.ctrl-rail__item[data-cor="ribs"] {
  --cor-aula-vivo: #4dde1f;
  --cor-aula-ink: #2f7300;
}

.ctrl-rail__item[data-cor="chest"] {
  --cor-aula-vivo: #ff168c;
  --cor-aula-ink: #b00062;
}

.ctrl-rail__item[data-cor="all"] {
  --cor-aula-vivo: #ffb020;
  --cor-aula-ink: #7a4a00;
}

.ctrl-rail__item[data-cor] {
  border-left-color: color-mix(in srgb, var(--cor-aula-ink, var(--ctrl-cyan-ink)) 34%, transparent);
}

.ctrl-rail__item[data-state="assistida"],
.ctrl-rail__item[aria-current="true"] {
  border-left-color: var(--cor-aula-ink, var(--ctrl-cyan-ink));
}

.ctrl-rail__item[aria-current="true"] .ctrl-rail__number {
  color: var(--ctrl-on-accent);
  background: var(--cor-aula-vivo, var(--ctrl-cyan));
  border-color: var(--cor-aula-ink, var(--ctrl-cyan-ink));
}

.ctrl-rail__item[data-state="assistida"] .ctrl-rail__number {
  color: var(--cor-aula-ink, var(--ctrl-cyan-ink));
  border-color: var(--cor-aula-ink, var(--ctrl-cyan-ink));
}

.aula-retomada {
  background: color-mix(in srgb, var(--ctrl-cyan) 9%, transparent);
}

.aula-retomada a {
  color: var(--ctrl-cyan-ink);
}

.aula-fim {
  background: radial-gradient(
    circle at 50% 0%,
    color-mix(in srgb, var(--aula-vivo, var(--ctrl-cyan)) 16%, transparent),
    transparent 62%
  );
}

.aula-fim__selo {
  color: var(--aula-ink, var(--ctrl-cyan-ink));
  border-color: color-mix(in srgb, var(--aula-ink, var(--ctrl-cyan-ink)) 45%, transparent);
}

.aula-completa {
  border-color: color-mix(in srgb, var(--ctrl-lime-ink) 34%, transparent);
}

/* O botão de play é preenchimento de acento sobre foto — o neon vem da ilha, e só o texto
   precisa da tinta certa, que ali é o preto de sempre e não o `--ctrl-bg` claro. */
.ctrl-page .st-lesson-cover__play {
  color: var(--ctrl-on-accent);
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--aula) 16%, transparent),
    0 22px 60px rgba(0, 0, 0, 0.45);
}


/* --- 12. Movimento reduzido ------------------------------------------------------------------
   O `home.css` acende as três barras do medidor com `--ctrl-lime`, que dentro de cada zona já
   resolve na cor certa por causa do bloco 5. Não precisa de regra própria: fica registrado para
   quem for conferir a paridade entre os dois temas. */