/* ============================================================================
   leitura-page.css — o visual da PÁGINA SATÉLITE da leitura de pauta
   (satelite-leitura.template.html · docs/SATELITE-LEITURA-PLANO.md)

   Carrega DEPOIS de css/styles.css e reaproveita os tokens da casa (--color-*,
   --space-*, --font-display, --radius-*). 🔴 Nenhuma cor nova se inventa aqui: o
   "colorido" da página é um percurso pelos tokens que já existem.

   🔴 IRMÃO, NÃO CÓPIA. O css/ritmo-page.css resolve os mesmos problemas com o
   prefixo `rp-`. Este arquivo usa `lp-` e é SEPARADO de propósito: aquele é da
   frente que subiu ontem e não se toca. Duplicação consciente; unificar as duas
   satélites num `css/satelite.css` é candidato PÓS-auditoria — anotado, não
   esquecido.

   QUATRO COISAS QUE ESTE ARQUIVO GARANTE, e por quê:

   1. 🔴 ALVO DE DEDO 44×44 px — e isso é compromisso de LARGURA também. Já
      aconteceu neste projeto de 44 px a mais estourarem uma linha num celular de
      390 dentro do `overflow-x:hidden` do body, que corta EM SILÊNCIO (nenhum
      erro, nenhuma barra de rolagem — o conteúdo simplesmente some pela direita).
      Por isso .toy-controls é `flex-wrap: wrap` e todo filho tem `min-width: 0`.
   2. 🔴 ZERO ROLAGEM HORIZONTAL DA PÁGINA, de 320 px para cima. Conteúdo largo
      rola dentro do próprio contêiner (.toy-stage e .lp-index-track têm
      `overflow-x: auto`).
   3. 🔴 SEM BRAVURA. Nenhuma regra deste arquivo usa font-family:'Bravura' — a
      fonte musical pesa 945 KB e o css/styles.css garante que a landing nunca a
      baixa. A notação desta página são CONTORNOS embutidos no bundle (§6 do plano).
   4. 🔴 A NOTAÇÃO É PRETA e este arquivo não a pinta. `StaffToy.INK` é #000
      porque o RhythmRenderer e o ReadingFlowGame gravam cabeça, haste e clave em
      preto: fora do modo Kids a COR é reservada a ESTADO. Nenhuma regra daqui
      toca no fill/stroke do desenho de pauta ou de nota.

   O que este arquivo NÃO faz: desenhar o miolo dos brinquedos. Ele estiliza as
   classes que o RhythmToy/StaffToy CRIAM (.toy, .toy-stage, .toy-controls,
   .toy-btn, .toy-btn--primary, .toy-btn.is-on, .toy-field, .toy-readout,
   .toy-hit, o [role="slider"] do drag() e o estado .is-playing) + a moldura da
   página.
   ========================================================================== */

/* ===========================================================================
   1. TOKENS DA PÁGINA

   O accent geral é o --color-success — o VERDE do card da Leitura na landing,
   como o azul é o do Ritmo. Cada seção sobrescreve --sec/--sec-soft: é o FIO
   CONDUTOR visual da rolagem, que sai da pauta (verde, o assunto da página),
   passa pela referência (azul da clave), entrega a cor à SEÇÃO DAS SETE CORES
   (ver a nota lá embaixo), sobe pela nota que sai da pauta (âmbar), pelas duas
   mãos (índigo do app) e pelo sinal que altera (vermelho), e chega na música.
   Todos esses valores JÁ EXISTEM em styles.css — nada de paleta nova.
   =========================================================================== */
.lp-main {
    --sec: var(--color-success);
    --sec-soft: var(--color-success-bg);
    --lp-prose: 42rem;          /* largura de leitura (~680px, padrão da casa)  */
    --lp-card: 48rem;           /* cartão de brinquedo                          */
    --lp-card-wide: 56rem;      /* ReadAlong: a esteira pede toda a largura     */

    width: 100%;
    min-width: 0;               /* body é flex; sem isto o filho não encolhe    */
}

/* 🔴 `overflow-x: clip` no lugar do `hidden` que o styles.css põe no body.
   MEDIDO na satélite irmã: `overflow-x: hidden` faz o overflow-y computar `auto`,
   o body vira CONTÊINER DE ROLAGEM, e todo `position: sticky` de dentro dele
   para de colar — é por isso que o header do site não gruda em nenhuma página
   estática hoje. `clip` corta igual (nada vaza, nada de "samba" no iOS) mas NÃO
   cria contêiner de rolagem, então o header e o índice desta página grudam de
   verdade. Navegador antigo que não conhece `clip` ignora a linha e cai no
   comportamento de hoje (barra não gruda) — degrada, não quebra.
   Vale SÓ nesta página: quem carrega este arquivo é a satélite da leitura. */
body { overflow-x: clip; }

.lp-section--pauta          { --sec: var(--color-success);      --sec-soft: var(--color-success-bg); }
.lp-section--clave          { --sec: var(--color-info);         --sec-soft: var(--color-info-bg); }
/* 🔴 A SEÇÃO DAS SETE CORES ABRE MÃO DA SUA. É a única seção em que a paleta
   Boomwhacker (StaffToy.KIDS_COLORS) entra na tela, e no Kids a cor é IDENTIDADE
   da nota, nunca estado. Toda cor do sistema desta casa colide com alguma das
   sete (verde É o Fá, vermelho É o Dó, âmbar encosta no Ré/Mi). Então a moldura
   desta seção veste TINTA — a mesma tinta preta da notação —, e as únicas sete
   cores da tela são as sete notas do brinquedo. É também o que o texto ensina:
   a cor é o andaime, o preto é a partitura.
   🔴 --color-text (#1f2937), NUNCA --color-text-secondary: botão CHEIO em cinza
   médio lê como DESABILITADO e o ▶ desta seção pareceria fora do ar. */
.lp-section--notas          { --sec: var(--color-text);         --sec-soft: var(--color-border-light); }
/* 🔴 O ÂMBAR DESTA PÁGINA É DA CRIANÇA, e só dela. A seção 4 era âmbar e caía
   IMEDIATAMENTE abaixo do CTA do modo infantil, que também é âmbar: os dois blocos
   se fundiam e o único CTA endereçado a outra pessoa perdia justamente o que o
   distinguia. Ela repete o azul da clave (seção 2, não vizinha) e o âmbar passa a
   aparecer UMA vez na rolagem inteira. Cor que só é usada uma vez é a que significa
   alguma coisa. */
.lp-section--suplementares  { --sec: var(--color-info);         --sec-soft: var(--color-info-bg); }
.lp-section--grande-pauta   { --sec: var(--color-primary);      --sec-soft: var(--color-primary-bg); }
.lp-section--acidentes      { --sec: var(--color-error);        --sec-soft: var(--color-error-bg); }
.lp-section--tocar          { --sec: var(--color-primary-dark); --sec-soft: var(--color-primary-bg); }

/* ===========================================================================
   2. ABERTURA
   =========================================================================== */
.lp-hero {
    padding: var(--space-12) var(--container-padding) var(--space-8);
    text-align: center;
    /* Tinta suave do accent descendo para o fundo: cor na primeira dobra sem
       custar imagem nenhuma. */
    background: linear-gradient(180deg, var(--color-success-bg) 0%, var(--color-bg) 100%);
}

.lp-hero-inner { max-width: 46rem; margin: 0 auto; }

.lp-kicker { font-size: 2.75rem; line-height: 1; margin: 0 0 var(--space-3); }

.lp-h1 {
    font-family: var(--font-display);
    font-weight: var(--font-extrabold);
    font-size: clamp(1.875rem, 6vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

/* O lead é onde mora a RESPOSTA. A busca por IA lê o HTML visível e o rich
   snippet do Google sai daqui — por isso ele é grande e vem antes de tudo. */
.lp-lead {
    font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 auto var(--space-6);
    max-width: 38rem;
}

.lp-scroll-hint {
    display: flex;
    flex-wrap: wrap;               /* 🔴 132px de decoração + a frase em ES não
                                      cabem numa linha de 320: quebram, não vazam */
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    max-width: 100%;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    margin: 0;
}

/* ------------------------------------------------- a tese, em cinco linhas
   O ritmo abre com quatro pontos pulsando ("pulso"); aqui a abertura mostra o
   EIXO desta página — onde a nota mora na pauta = que altura ela soa — com uma
   cabeça que sobe degrau a degrau entre cinco linhas.
   🔴 É DECORAÇÃO ABSTRATA, não gravura: cinco retas e um círculo, nada de clave
   nem de haste (§6 do plano proíbe inventar gravura na mão, e a boa não vem do
   CSS e sim dos contornos da Bravura no bundle).
   🔴 A cabeça é PRETA como a notação da página inteira; quem tem cor aqui é o
   fundo, nunca a nota. E ela é SILENCIOSA — som só por gesto (invariante 3). */
.lp-hero-staff {
    position: relative;
    width: 132px;
    height: 44px;
    flex: 0 0 auto;
}
.lp-hero-staff i {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--color-border);
}
.lp-hero-staff i:nth-child(1) { top: 4px; }
.lp-hero-staff i:nth-child(2) { top: 13px; }
.lp-hero-staff i:nth-child(3) { top: 22px; }
.lp-hero-staff i:nth-child(4) { top: 31px; }
.lp-hero-staff i:nth-child(5) { top: 40px; }
.lp-hero-staff b {
    position: absolute;
    left: 0;
    top: 36px;                       /* começa embaixo, no 1º espaço */
    width: 12px; height: 9px;
    border-radius: 50%;
    background: var(--color-text);   /* 🔴 a nota é PRETA, como no app */
    transform: rotate(-18deg);
    animation: lp-climb 5.2s steps(1, end) infinite;
}
/* Sobe de meio em meio espaço (linha → espaço → linha = um passo), que é
   exatamente o que a seção 3 explica. */
@keyframes lp-climb {
    0%   { transform: translate( 0px,  0px) rotate(-18deg); }
    14%  { transform: translate(20px, -4.5px) rotate(-18deg); }
    28%  { transform: translate(40px, -9px) rotate(-18deg); }
    42%  { transform: translate(60px, -13.5px) rotate(-18deg); }
    56%  { transform: translate(80px, -18px) rotate(-18deg); }
    70%  { transform: translate(100px, -22.5px) rotate(-18deg); }
    84%  { transform: translate(120px, -27px) rotate(-18deg); }
    100% { transform: translate( 0px,  0px) rotate(-18deg); }
}

/* ===========================================================================
   3. ÍNDICE GRUDENTO (âncoras)
   Gruda LOGO ABAIXO do header (que já é sticky, z-index 100). --lp-header-h é
   MEDIDA em JS pelo template: o header encolhe no celular (.logo-text some
   abaixo de 560px) e um px fixo aqui erraria a conta.
   No celular a fileira rola DENTRO de si — a página nunca rola de lado.
   =========================================================================== */
.lp-index {
    position: sticky;
    top: var(--lp-header-h, 61px);
    z-index: 90;                       /* abaixo do header (100), acima do miolo */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
}

.lp-index-track {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-2) var(--container-padding);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;    /* não empurra o histórico do navegador */
    scrollbar-width: none;
    /* 🔴 `safe center` e não `center` seco: com sete rótulos longos (o ES é o
       pior caso) um `center` puro em contêiner que rola ESCONDE o começo da
       fileira, e não há como rolar até ele. `safe` cai para o início quando não
       cabe. Navegador que não entende a palavra descarta a linha inteira e fica
       em flex-start, que é justamente o comportamento seguro. */
    justify-content: safe center;
}
.lp-index-track::-webkit-scrollbar { display: none; }

/* 🔴 44px de altura mesmo sendo "só" um chip de navegação: é alvo de dedo. */
.lp-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background var(--transition-fast);
}
.lp-chip:hover { color: var(--sec); border-color: var(--sec); }

/* O chip da seção corrente veste a cor DAQUELA seção — o índice conta a mesma
   história de cor que a rolagem. */
.lp-chip.is-current {
    background: var(--sec);
    border-color: var(--sec);
    color: #fff;
}
.lp-chip[data-sec="pauta"]         { --sec: var(--color-success); }
.lp-chip[data-sec="clave"]         { --sec: var(--color-info); }
.lp-chip[data-sec="notas"]         { --sec: var(--color-text); }
.lp-chip[data-sec="suplementares"] { --sec: var(--color-info); }
.lp-chip[data-sec="grande-pauta"]  { --sec: var(--color-primary); }
.lp-chip[data-sec="acidentes"]     { --sec: var(--color-error); }
.lp-chip[data-sec="tocar"]         { --sec: var(--color-primary-dark); }

/* ===========================================================================
   4. SEÇÕES
   =========================================================================== */
.lp-sections { padding: var(--space-4) 0 0; }

.lp-section {
    max-width: var(--lp-card-wide);
    margin: 0 auto;
    padding: var(--space-10) var(--container-padding) var(--space-6);
    /* A âncora tem de parar ABAIXO do header + do índice, os dois grudentos. */
    scroll-margin-top: calc(var(--lp-header-h, 61px) + var(--lp-index-h, 56px) + 12px);
}

.lp-sec-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--lp-card);
    margin: 0 auto var(--space-6);
}

/* O número em cor cheia marca a jornada: 01 na pauta → 07 na música. */
.lp-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--sec);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--font-extrabold);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}

.lp-h2 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    font-size: clamp(1.375rem, 4.4vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    min-width: 0;               /* sem isto o h2 longo empurra o badge p/ fora  */
}

/* Fio de cor que sobra à direita do título — some quando não há espaço. */
.lp-sec-head::after {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sec), transparent);
    opacity: 0.5;
}

.lp-prose {
    max-width: var(--lp-prose);
    margin: var(--space-6) auto 0;
}
.lp-prose p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.lp-prose p:last-child { margin-bottom: 0; }
.lp-prose strong { color: var(--color-text); font-weight: var(--font-semibold); }
/* Link dentro da prosa (é onde mora o único ponteiro para o importador de MIDI,
   §7 do plano): sublinhado de verdade, porque no meio de um parágrafo cor
   sozinha não é affordance. */
.lp-prose a {
    color: var(--sec);
    font-weight: var(--font-semibold);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.09em;
}
.lp-prose a:hover { text-decoration-thickness: 0.16em; }

/* A dica: uma linha curta, tingida com a cor da seção. Sem ícone — a barra de
   cor à esquerda já diz "isto é um à parte", e não repete gravura sete vezes. */
.lp-tip {
    max-width: var(--lp-prose);
    margin: var(--space-5) auto 0;
    padding: var(--space-4) var(--space-5);
    background: var(--sec-soft);
    border-left: 3px solid var(--sec);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* ===========================================================================
   5. O CARTÃO DO BRINQUEDO
   .toy-card = a caixa que a PÁGINA escreve; .toy = a marca que o RhythmToy põe
   ao montar. Os dois são o MESMO elemento: o template escreve
   <figure class="toy-card" data-toy="…"> e mount() acrescenta .toy.
   =========================================================================== */
.toy-card {
    position: relative;
    max-width: var(--lp-card);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal);
    /* 🔴 Sem `overflow: hidden` aqui, ao contrário da irmã: os brinquedos desta
       página têm alvos tocáveis INFLADOS até 44 px (StaffToy.hit) e punhos de
       arrasto que encostam na borda do palco — `hidden` cortaria o anel de foco
       de teclado deles em silêncio. Quem respeita o raio é a barra, no ::before. */
}
.toy-card--wide { max-width: var(--lp-card-wide); }

/* 🔴 Reserva de altura ENQUANTO o brinquedo não montou. Os brinquedos montam por
   IntersectionObserver (o custo só nasce ao entrar na tela), então sem isto cada
   cartão abaixo da dobra é um talo de ~70 px que vira ~350 px de repente e
   empurra a página debaixo do dedo de quem está rolando. Não é espelho do
   viewBox de ninguém — é uma reserva genérica, e some no instante em que o
   brinquedo monta (`.toy`). */
.toy-card:not(.toy) { min-height: 13rem; }

/* Barra de cor no topo: o brinquedo pertence visivelmente à seção. O raio é
   repetido AQUI em vez de sair de um `overflow:hidden` no cartão (ver acima). */
.toy-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: linear-gradient(90deg, var(--sec), var(--sec-soft));
}

/* Tocando: o cartão ganha um anel na cor da seção. É o único feedback de estado
   que a PÁGINA dá — o resto é do brinquedo. */
.toy-card.is-playing {
    box-shadow: var(--shadow-card-hover), 0 0 0 3px var(--sec-soft);
}

/* --------------------------------------------------------------- o palco SVG
   🔴 Os brinquedos desta página são pautas LARGAS E BAIXAS (viewBox 400×200 a
   400×300), diferente dos do ritmo. Largura é legibilidade: num celular de 320
   sobram ~264 px de palco, e com SP=12 num viewBox de 400 isso dá ~7,9 px por
   espaço de pauta — que é a ordem de grandeza da partitura IMPRESSA (o espaço
   padrão do SMuFL é 1,75 mm ≈ 6,6 px a 96 dpi). Por isso o teto de desktop aqui
   é 38rem e não 34: espremer a pauta é o único jeito de estragar esta página. */
.toy-stage {
    max-width: 38rem;
    margin: 0 auto;
    /* Escotilha de emergência: brinquedo que peça largura mínima rola AQUI
       DENTRO — nunca na página. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/* A esteira (ReadAlong) ganha o cartão largo: ali o que rola é a MÚSICA, e cada px
   a mais é mais compasso na tela. Mas com teto — solta, ela media 808px num monitor
   de 1100 e o espaço de pauta chegava a 27px, quatro vezes o da partitura impressa:
   uma pauta gigante não é mais legível, é só grande. */
.toy-card--wide .toy-stage { max-width: 46rem; }
/* A grande pauta é o brinquedo proporcionalmente mais ALTO da página (são duas
   pautas e a chave): solta no cartão de 48rem ela vira um bloco que engole a seção
   inteira no desktop. O `--tall` do template é uma DICA de proporção, não um espelho
   do viewBox de ninguém — o viewBox é do agente do brinquedo e mudou duas vezes
   durante esta construção. Por isso são dois tetos independentes: um de largura,
   que sempre vale, e um de ALTURA, que só entra em ação no caso patológico (aí a
   pauta encolhe centrada, em vez de virar uma parede). */
.toy-card--tall .toy-stage { max-width: 34rem; }
.toy-card--tall .toy-stage svg { max-height: 26rem; }

/* 🔴 O viewBox é de cada brinquedo — nada de altura fixa aqui. */
.toy-stage svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;                 /* halo/anel que escapa do viewBox */
}

/* ------------------------------------------------------- a barra de controles
   🔴 flex-wrap NÃO é enfeite: quatro botões de 44 px numa linha de 390 estouram,
   e o overflow-x do body corta em SILÊNCIO. Aqui ela quebra em duas. */
.toy-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
    min-width: 0;
}
.toy-controls > * { min-width: 0; max-width: 100%; }
.toy-controls:empty { margin-top: 0; }

/* 🔴 44×44 px de alvo, sempre — inclusive quando o rótulo é uma letra só (♯, ♭,
   ▲, ▼ são exatamente o caso desta página). */
.toy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast),
                color var(--transition-fast), transform var(--transition-fast);
}
.toy-btn:hover { border-color: var(--sec); color: var(--sec); }
.toy-btn:active { transform: scale(0.97); }
/* StaffToy.choice() marca os DOIS (aria-pressed + .is-on) — as regras andam
   juntas de propósito, para o estado nunca depender de um só. */
.toy-btn[aria-pressed="true"], .toy-btn.is-on {
    background: var(--sec-soft);
    border-color: var(--sec);
    color: var(--sec);
}
/* Na seção das sete cores o --sec é a tinta preta: texto preto sobre fundo
   quase-branco é contraste de sobra, mas a borda precisa aparecer. */
.lp-section--notas .toy-btn.is-on,
.lp-section--notas .toy-btn[aria-pressed="true"] { border-width: 2px; }

.toy-btn--primary {
    background: var(--sec);
    border-color: var(--sec);
    color: #fff;
    padding: 0 var(--space-6);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
}
.toy-btn--primary:hover {
    background: var(--sec); border-color: var(--sec); color: #fff; filter: brightness(1.08);
}

.toy-btn:focus-visible,
.lp-chip:focus-visible,
.lp-btn:focus-visible,
.lp-btn-ghost:focus-visible {
    outline: 3px solid var(--sec);
    outline-offset: 2px;
}

/* --------------------------------------------- alvos e punhos DENTRO do SVG
   🔴 `.toy-hit` é um retângulo TRANSPARENTE (StaffToy.hit inflou-o até 44 px de
   tela). Transparente e sem foco visível é um botão que só existe para o mouse.
   `outline` em nó SVG ainda é irregular entre navegadores, então o anel vem
   TAMBÉM por `stroke` — que num retângulo invisível não conflita com desenho
   nenhum e aparece em todos eles. */
.toy-hit { cursor: pointer; }
.toy-hit:focus-visible {
    outline: 3px solid var(--sec);
    outline-offset: 2px;
    stroke: var(--sec);
    stroke-width: 2;
    stroke-dasharray: 5 4;
}
/* O punho de arrastar vira role="slider" e anda pelas setas (StaffToy.drag). Aqui
   só o anel: mexer em fill/stroke repintaria o desenho do brinquedo. */
.toy-stage [role="slider"]:focus-visible {
    outline: 3px solid var(--sec);
    outline-offset: 3px;
}

/* --------------------------------------------------- campo rotulado (.field)
   O RhythmToy monta <label.toy-field><span.toy-field-label> + o nó. O nó costuma
   ser um <input type=range> ou um <select>: ele manda o campo ocupar a linha. */
.toy-field {
    flex: 1 1 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    max-width: 22rem;
}
.toy-field-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Slider com 44px de área de toque, mas trilho fino: a altura é do DEDO, não do
   desenho. */
.toy-field input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2.75rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.toy-field input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: var(--color-border);
}
.toy-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px; margin-top: -9px;
    border-radius: 50%;
    background: var(--sec);
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-md);
}
.toy-field input[type="range"]::-moz-range-track {
    height: 6px; border-radius: 3px; background: var(--color-border);
}
.toy-field input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--sec);
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-md);
}

.toy-field select,
.toy-field input[type="number"],
.toy-field input[type="text"] {
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);      /* <16px faz o iOS dar zoom no foco */
}
.toy-field input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--sec); }

/* Campo que é um slider ganha a linha inteira: um trilho espremido entre botões
   não se arrasta com o polegar. */
.toy-field:has(input[type="range"]) { flex: 1 1 100%; max-width: 26rem; }

/* ---------------------------------------- leitura viva (o nome da nota, o BPM)
   🔴 Nesta página o readout costuma ser O NOME DA NOTA — que é sistema
   diferente em cada idioma (PT `Dó`, EN `C`, ES `Do`, StaffToy.NAMES). Então ele
   é largo o bastante para "Sol" e curto o bastante para não empurrar a linha. */
.toy-readout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    min-width: 3.5rem;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--sec-soft);
    color: var(--color-text);
    font-weight: var(--font-bold);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;   /* o número não "dança" ao mudar */
    white-space: nowrap;
}
/* 🔴 Readout VAZIO não é pílula. MEDIDO na seção 3: o brinquedo cria o readout no
   mount e só escreve nele ao tocar — com fundo e `min-width` isso desenhava um blob
   cinza do tamanho de um botão ao lado dos controles, e blob do tamanho de botão a
   pessoa tenta apertar. */
.toy-readout:empty { display: none; }

/* ===========================================================================
   6. SAÍDAS PARA O APP
   🔴 Esta página manda para DOIS jogos e para o modo Kids, e cada CTA vai para
   um destino DIFERENTE (§7 do plano). O visual guarda essa diferença onde ela
   importa: o CTA do Kids é o único que fala com outra PESSOA (quem ensina uma
   criança), e por isso é o único com moldura própria. Os outros três são
   iguais de propósito — todos querem dizer "entre no app".
   =========================================================================== */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--space-6);
    border-radius: var(--radius-full);
    background: var(--sec);
    color: #fff;
    font-weight: var(--font-bold);
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); color: #fff; }
.lp-btn--big { min-height: 3.25rem; padding: 0 var(--space-8); font-size: 1.0625rem; }

.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid currentColor;
    color: inherit;
    font-weight: var(--font-semibold);
    text-align: center;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.lp-btn-ghost:hover { opacity: 1; background: rgb(255 255 255 / 0.14); color: inherit; }

/* CTA no meio da rolagem. */
.lp-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--lp-card);
    margin: var(--space-6) auto var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-primary-bg);
    border-radius: var(--radius-xl);
    /* 🔴 O CTA vive ENTRE seções e herda o --sec da última que passou, o que
       deixaria o botão da saída do Kids preto (a seção das notas é tinta). Ele
       reancora no índigo do app: um botão de CTA quer dizer "entre no app". */
    --sec: var(--color-primary);
}
.lp-inline-cta-text {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-semibold);
    line-height: 1.5;
    color: var(--color-text);
}
.lp-inline-cta .lp-btn { flex: 0 0 auto; }

/* O CTA do modo Kids — o único endereçado a quem ENSINA uma criança, e o único
   que sai de uma seção (as sete cores) em vez de um botão solto no rodapé.
   🔴 Ele NÃO repete a paleta Boomwhacker: as sete cores moram em
   StaffToy.KIDS_COLORS e copiá-las para cá criaria uma segunda verdade
   esperando divergir — que é exatamente o defeito que já escondeu uma página
   inteira do gate neste repo. Aqui é só o âmbar da casa. */
.lp-inline-cta--kids {
    --sec: var(--color-warning);
    background: var(--color-warning-bg);
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.35);
}
.lp-inline-cta--kids .lp-btn { color: #fff; }

/* Bloco final: a única faixa de sangria total da página — é o fim da jornada. */
.lp-final {
    margin-top: var(--space-12);
    padding: var(--space-16) var(--container-padding);
    background: var(--gradient-primary);
    color: #fff;
    text-align: center;
    scroll-margin-top: calc(var(--lp-header-h, 61px) + var(--lp-index-h, 56px) + 12px);
}
.lp-final-inner { max-width: 40rem; margin: 0 auto; }
.lp-final-h2 {
    font-family: var(--font-display);
    font-weight: var(--font-extrabold);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}
.lp-final-p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 auto var(--space-8);
    max-width: 34rem;
    color: rgb(255 255 255 / 0.92);
}
/* Três destinos: o primário (treinar) e DOIS fantasmas (tocar música · a
   criança). Eles quebram em linha antes de espremer — três pílulas de 44 px
   lado a lado não cabem em 320. */
.lp-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: 0;
}
/* O botão principal inverte: branco sobre o gradiente. */
.lp-final .lp-btn { background: var(--color-surface); color: var(--color-primary-dark); }
.lp-final .lp-btn:hover { color: var(--color-primary-dark); }

/* ===========================================================================
   7. LIVRO · FAQ · CONHEÇA TAMBÉM
   =========================================================================== */
/* A página não compete com livro: ela desperta. A nota diz isso, e por isso é
   discreta — não é anúncio, é honestidade. */
.lp-book {
    max-width: var(--lp-prose);
    margin: var(--space-10) auto 0;
    padding: 0 var(--container-padding);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
    text-align: center;
}

.lp-faq {
    max-width: var(--lp-prose);
    margin: var(--space-12) auto 0;
    padding: 0 var(--container-padding);
    scroll-margin-top: calc(var(--lp-header-h, 61px) + var(--lp-index-h, 56px) + 12px);
}
.lp-faq-h2 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    margin: 0 0 var(--space-6);
    text-align: center;
}
/* 🔴 Respostas SEMPRE visíveis (nada de <details> fechado): é este texto que a
   busca por IA lê e o que alimenta o FAQPage do JSON-LD. */
.lp-faq-list {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-2) var(--space-6);
}
.lp-faq-item { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-light); }
.lp-faq-item:first-child { border-top: 0; }
.lp-faq-item h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--font-bold);
    line-height: 1.4;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}
.lp-faq-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.lp-others {
    max-width: var(--lp-prose);
    margin: var(--space-12) auto var(--space-16);
    padding: 0 var(--container-padding);
}
.lp-others h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-4);
}
.lp-others-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* 🔴 44 px de alvo aqui também. MEDIDO: com `display:inline-block` + padding de
   0.5rem estes chips davam 42 px de altura nos 3 idiomas e em 320/390/1100 — dois
   px abaixo do piso da casa, e são NOVE links (todas as páginas de jogo, as tools e
   a satélite irmã), ou seja, o maior bloco de alvos de dedo da página. */
.lp-others-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0 var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: inherit;
    font-weight: var(--font-semibold);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lp-others-links a:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }

/* ===========================================================================
   8. RESPONSIVO — mobile-first de verdade, de 320px para cima
   =========================================================================== */
@media (max-width: 768px) {
    .lp-hero { padding: var(--space-8) var(--container-padding) var(--space-6); }
    /* O chip continua com 44px de alvo; quem encolhe é a FOLGA da barra. Header
       + índice já comem 1/7 da tela de um celular — cada px conta. */
    .lp-index-track { padding: var(--space-1) var(--container-padding); }
    .lp-section { padding: var(--space-8) var(--container-padding) var(--space-4); }
    .lp-final { padding: var(--space-12) var(--container-padding); }
    .lp-sec-head { gap: var(--space-3); margin-bottom: var(--space-5); }
    .lp-badge { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
    .lp-faq-list { padding: var(--space-1) var(--space-5); }
    /* 🔴 A pauta pede LARGURA e o cartão é quem tem para dar. Padding lateral
       menor no celular = mais px por espaço de pauta, que é a legibilidade
       inteira desta página. O padding de cima e de baixo não muda: é ele que
       separa o desenho da barra de cor e dos controles. */
    .toy-card { padding: var(--space-5) var(--space-3) var(--space-4); }
}

@media (max-width: 480px) {
    /* 🔴 Aqui é onde a largura vira o risco. Num aparelho de 390 (ou de 320), a
       barra de controles TEM de quebrar: campo ocupa a linha inteira e o rótulo
       do botão não estica além do cartão. */
    .toy-field { flex: 1 1 100%; max-width: 100%; }
    .toy-controls { gap: var(--space-2); }
    .toy-btn { padding: 0 var(--space-3); font-size: 0.875rem; }
    .toy-btn--primary { padding: 0 var(--space-5); }
    .lp-inline-cta { padding: var(--space-4); }
    .lp-inline-cta .lp-btn { flex: 1 1 100%; }
    .lp-final-actions .lp-btn,
    .lp-final-actions .lp-btn-ghost { flex: 1 1 100%; }
    .lp-chip { padding: 0 var(--space-3); }
    .lp-kicker { font-size: 2.25rem; }
    .lp-others-links a { padding: 0 var(--space-4); }
}

@media (min-width: 1024px) {
    .lp-hero { padding: var(--space-16) var(--container-padding) var(--space-10); }
    .lp-section { padding: var(--space-16) var(--container-padding) var(--space-8); }
}

/* ===========================================================================
   9. MOVIMENTO REDUZIDO
   O styles.css já zera transições globalmente; aqui garantimos que a decoração
   PRÓPRIA desta página (a nota subindo no hero) também para — e que a rolagem
   por âncora não vira um voo. Brinquedo parado continua com o ▶ funcionando:
   quem cuida disso é o StaffToy (invariante 6).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lp-hero-staff b { animation: none; transform: translate(60px, -13.5px) rotate(-18deg); }
    .lp-index-track { scroll-behavior: auto; }
    .lp-btn:hover { transform: none; }
    .toy-btn:active { transform: none; }
}