/* ============================================================================
   intervalos-page.css — o visual da PÁGINA SATÉLITE dos intervalos
   (satelite-intervalos.template.html · docs/SATELITE-INTERVALOS-PLANO.md)

   ORDEM DE CARGA, e ela importa:
     css/styles.css     → os tokens da casa (--color-*, --space-*, --radius-*…)
     css/satelite.css   → as regras `.toy-*`, COMUNS a toda satélite
     css/intervalos-page.css (este) → a moldura com prefixo `ip-` + os NÚMEROS

   🔴 NENHUMA regra `.toy-*` mora aqui. As classes que a base dos brinquedos cria
   (`.toy-card`, `.toy-stage`, `.toy-controls`, `.toy-btn`, `.toy-field`,
   `.toy-readout`, `.toy-hit`, o `[role="slider"]` do drag()) são as mesmas em
   toda satélite e vivem num arquivo só — divergiram uma vez e cada conserto
   ficou preso na página em que foi feito. O que esta página manda sobre o
   brinquedo são MEDIDAS, na seção 1: `--sat-card`, `--sat-stage`…

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

   1. 🔴 ALVO DE DEDO 44×44 px na moldura — e isso é compromisso de LARGURA
      também. Já aconteceu neste projeto de 44 px a mais estourarem uma linha num
      celular de 390 dentro de um `overflow-x` que corta EM SILÊNCIO (nenhum erro,
      nenhuma barra de rolagem — o conteúdo some pela direita). Os chips do índice
      e os botões de CTA daqui têm o piso; o do brinquedo é comum.
   2. 🔴 ZERO ROLAGEM HORIZONTAL DA PÁGINA, de 320 px para cima. Conteúdo largo
      rola dentro do próprio contêiner (`.toy-stage` no comum, `.ip-index-track`
      aqui).
   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. O desenho desta página são contornos embutidos no bundle.
   4. 🔴 NÃO PINTA NOTAÇÃO. Nenhuma regra daqui toca em `fill`/`stroke` do que o
      brinquedo desenha — teclado, cabeça de nota, pauta são do arquivo dele. As
      DUAS cores que a moldura usa para "as duas notas" (a decoração da abertura)
      não são invenção: são `IntervalToy.C.root`/`.target`, as mesmas que a pessoa
      reencontra no jogo de Intervalos (invariante 16 do plano).
   ========================================================================== */

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

   O accent geral é o --color-primary, e a escolha não é estética: #6366f1 é
   EXATAMENTE o `IntervalToy.C.root` — a cor da PRIMEIRA nota nos sete brinquedos
   e a cor da raiz no jogo de Intervalos (`IntervalGame.COLOR_ROOT`). A página
   inteira veste a cor de onde todo intervalo começa.

   Cada seção sobrescreve --sec/--sec-soft: é o FIO CONDUTOR visual da rolagem, e
   ele conta a mesma história que o texto —
     01 distância   índigo   a raiz, de onde tudo parte
     02 número      azul     contar é medir; azul é a cor de "referência" na casa
     03 qualidade   âmbar    maior × menor é a única seção sobre CARÁTER
     04 juntos/depois verde  as mesmas duas notas, dois efeitos; verde = o par que casa
     05 liso/áspero vermelho tensão — e o trítono mora aqui
     06 na pauta    tinta    o preto da notação, que é o assunto da seção
     07 explorar    índigo escuro  fecha onde começou, um tom mais fundo
   Todos esses valores JÁ EXISTEM em styles.css — nada de paleta nova.

   🔴 As duas cores das NOTAS (`--ip-root`/`--ip-target`) não são da paleta da
   casa e nem poderiam ser: elas são `IntervalToy.C.root` e `.target`, copiadas do
   jogo. Índigo é a nota de baixo, violeta é a de cima, aqui e lá — é o que faz a
   página e o jogo parecerem a mesma coisa. NUNCA verde/vermelho: esta página não
   cobra resposta de ninguém.
   =========================================================================== */
.ip-main {
    --sec: var(--color-primary);
    --sec-soft: var(--color-primary-bg);
    --ip-prose: 42rem;          /* largura de leitura (~680px, padrão da casa)  */
    --ip-card: 48rem;           /* cartão de brinquedo                          */
    --ip-card-wide: 64rem;      /* o IntervalExplorer: um teclado pede largura  */

    /* As duas notas — cópia declarada de IntervalToy.C (docs …-PLANO §5.2). */
    --ip-root: #6366f1;         /* = var(--color-primary), e não é coincidência */
    --ip-target: #8b5cf6;

    /* 🔴 AS MEDIDAS DO BRINQUEDO SÃO DESTA PÁGINA; as REGRAS são comuns
       (css/satelite.css). O palco normal repete os 38rem da satélite da leitura
       (a pauta da seção 6 tem o mesmo problema de legibilidade: espremida, ela
       não se lê). O largo é maior que o das irmãs porque o que rola ali é um
       TECLADO: cada branca a mais é uma nota alcançável sem rolar, e o
       IntervalExplorer é o único cartão `--wide` da página. */
    --sat-card: var(--ip-card);
    --sat-card-wide: var(--ip-card-wide);
    --sat-stage: 38rem;
    --sat-stage-wide: 56rem;

    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 nas satélites irmãs: `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 dos intervalos. */
body { overflow-x: clip; }

.ip-section--distancia          { --sec: var(--color-primary);      --sec-soft: var(--color-primary-bg); }
.ip-section--numero             { --sec: var(--color-info);         --sec-soft: var(--color-info-bg); }
.ip-section--qualidade          { --sec: var(--color-warning);      --sec-soft: var(--color-warning-bg); }
.ip-section--melodico-harmonico { --sec: var(--color-success);      --sec-soft: var(--color-success-bg); }
.ip-section--consonancia        { --sec: var(--color-error);        --sec-soft: var(--color-error-bg); }
.ip-section--na-pauta           { --sec: var(--color-text);         --sec-soft: var(--color-border-light); }
.ip-section--explorar           { --sec: var(--color-primary-dark); --sec-soft: var(--color-primary-bg); }

/* ===========================================================================
   2. ABERTURA
   =========================================================================== */
.ip-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-primary-bg) 0%, var(--color-bg) 100%);
}

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

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

.ip-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. */
.ip-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;
}

.ip-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 duas bolinhas
   A satélite do ritmo abre com quatro pontos pulsando (pulso); a da leitura, com
   uma cabeça subindo entre cinco linhas (altura). Aqui a abertura mostra o EIXO
   DESTA página, que não é nem uma nem outra: **duas notas e o espaço entre elas**.
   Uma fica parada, a outra se afasta e volta, e o fio pontilhado entre as duas
   cresce junto — a distância é a coisa desenhada, não as notas.

   🔴 DECORAÇÃO ABSTRATA, não gravura: dois círculos e um fio. Sem pauta, sem
   clave, sem haste — a página inteira decidiu não inventar gravura no CSS (a boa
   vem dos contornos da Bravura no bundle), e uma pauta aqui repetiria a irmã da
   leitura, que fala de outra coisa.
   🔴 As duas cores são as do JOGO: índigo é a nota de baixo, violeta é a de cima
   (invariante 16). É a primeira vez que a pessoa vê o par, e ela vai reencontrá-lo
   em todos os sete brinquedos e depois no `#/intervalos`.
   🔴 É MUDA. Som só por gesto (invariante 3) — e nada aqui é clicável, então nada
   aqui soa.
   🔴 44 px de altura e 132 de largura, dentro de um `.ip-scroll-hint` que QUEBRA
   linha: a frase ao lado é mais longa em ES, e 132 px + a frase não cabem numa
   linha de 320. */
.ip-hero-span {
    position: relative;
    width: 132px;
    height: 44px;
    flex: 0 0 auto;
}
/* O fio: sai do centro da nota parada e vai até a que se move. É pontilhado
   porque distância é uma MEDIDA, não um ligado — e o pontilhado é o mesmo
   vocabulário do `.toy-hit:focus-visible` do comum. */
.ip-hero-span i {
    position: absolute;
    left: 14px;
    top: 21px;
    height: 2px;
    width: 34px;
    border-radius: 1px;
    background: repeating-linear-gradient(90deg,
        var(--color-primary-light) 0 4px, transparent 4px 8px);
    animation: ip-span-line 5.2s ease-in-out infinite;
}
.ip-hero-span b {
    position: absolute;
    top: 15px;
    width: 14px; height: 14px;
    border-radius: 50%;
}
/* A nota de baixo NÃO se mexe: é a referência. Sem uma parada, o desenho vira
   duas bolas dançando e a ideia de "distância a partir de algo" se perde. */
.ip-hero-span b:first-of-type  { left: 7px;  background: var(--ip-root); }
.ip-hero-span b:nth-of-type(2) {
    left: 41px;                              /* uma terça, para começar */
    background: var(--ip-target);
    animation: ip-span-note 5.2s ease-in-out infinite;
}
/* Terça → quinta → oitava → e volta. Os três degraus são os três intervalos que
   a página mais repete, na ordem em que ela os apresenta. */
@keyframes ip-span-note {
    0%,  18%  { transform: translateX(0); }
    28%, 46%  { transform: translateX(24px); }
    56%, 78%  { transform: translateX(60px); }
    92%, 100% { transform: translateX(0); }
}
@keyframes ip-span-line {
    0%,  18%  { width: 34px; }
    28%, 46%  { width: 58px; }
    56%, 78%  { width: 94px; }
    92%, 100% { width: 34px; }
}

/* ===========================================================================
   3. ÍNDICE GRUDENTO (âncoras)
   Gruda LOGO ABAIXO do header (que já é sticky, z-index 100). --ip-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.
   =========================================================================== */
.ip-index {
    position: sticky;
    top: var(--ip-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);
}

.ip-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;
}
.ip-index-track::-webkit-scrollbar { display: none; }

/* 🔴 44px de altura mesmo sendo "só" um chip de navegação: é alvo de dedo. */
.ip-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);
}
.ip-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. */
.ip-chip.is-current {
    background: var(--sec);
    border-color: var(--sec);
    color: #fff;
}
.ip-chip[data-sec="distancia"]          { --sec: var(--color-primary); }
.ip-chip[data-sec="numero"]             { --sec: var(--color-info); }
.ip-chip[data-sec="qualidade"]          { --sec: var(--color-warning); }
.ip-chip[data-sec="melodico-harmonico"] { --sec: var(--color-success); }
.ip-chip[data-sec="consonancia"]        { --sec: var(--color-error); }
.ip-chip[data-sec="na-pauta"]           { --sec: var(--color-text); }
.ip-chip[data-sec="explorar"]           { --sec: var(--color-primary-dark); }

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

.ip-section {
    max-width: var(--ip-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(--ip-header-h, 61px) + var(--ip-index-h, 56px) + 12px);
}

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

/* O número em cor cheia marca a jornada: 01 na pauta → 07 na música. */
.ip-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);
}

.ip-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. */
.ip-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;
}

.ip-prose {
    max-width: var(--ip-prose);
    margin: var(--space-6) auto 0;
}
.ip-prose p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.ip-prose p:last-child { margin-bottom: 0; }
.ip-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. */
.ip-prose a {
    color: var(--sec);
    font-weight: var(--font-semibold);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.09em;
}
.ip-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. */
.ip-tip {
    max-width: var(--ip-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 BRINQUEDO — as regras moram em css/satelite.css
   🔴 As classes `.toy-*` (`.toy-card`, `.toy-stage`, `.toy-controls`, `.toy-btn`,
   `.toy-field`, `.toy-readout`, `.toy-hit`, o `[role="slider"]` do drag()) nascem
   no JS da BASE dos brinquedos e são as MESMAS em toda satélite. Por isso o bloco
   inteiro vive em `css/satelite.css`, carregado ANTES deste arquivo pelo token
   `__SAT_CSS_LINK__` — e **NENHUM `<x>-page.css` volta a defini-las**. Divergiram
   uma vez (auditoria de 07/set: 12 seletores iguais com corpo diferente) e o
   conserto feito numa página ficou só nela.

   O que a PÁGINA continua mandando são NÚMEROS, não regras: os `--sat-*` da
   seção 1 deste arquivo. Medida é da página; regra é comum.
   =========================================================================== */

/* O anel de foco da MOLDURA desta página. O do `.toy-btn` é comum e mora no
   css/satelite.css — a forma é a mesma de propósito. */
.ip-chip:focus-visible,
.ip-btn:focus-visible,
.ip-btn-ghost:focus-visible {
    outline: 3px solid var(--sec);
    outline-offset: 2px;
}

/* ===========================================================================
   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".
   =========================================================================== */
.ip-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);
}
.ip-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); color: #fff; }
.ip-btn--big { min-height: 3.25rem; padding: 0 var(--space-8); font-size: 1.0625rem; }

.ip-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);
}
.ip-btn-ghost:hover { opacity: 1; background: rgb(255 255 255 / 0.14); color: inherit; }

/* CTA no meio da rolagem. */
.ip-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--ip-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);
}
.ip-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);
}
.ip-inline-cta .ip-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. */
.ip-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);
}
.ip-inline-cta--kids .ip-btn { color: #fff; }

/* Bloco final: a única faixa de sangria total da página — é o fim da jornada. */
.ip-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(--ip-header-h, 61px) + var(--ip-index-h, 56px) + 12px);
}
.ip-final-inner { max-width: 40rem; margin: 0 auto; }
.ip-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;
}
.ip-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. */
.ip-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. */
.ip-final .ip-btn { background: var(--color-surface); color: var(--color-primary-dark); }
.ip-final .ip-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. */
.ip-book {
    max-width: var(--ip-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;
}

.ip-faq {
    max-width: var(--ip-prose);
    margin: var(--space-12) auto 0;
    padding: 0 var(--container-padding);
    scroll-margin-top: calc(var(--ip-header-h, 61px) + var(--ip-index-h, 56px) + 12px);
}
.ip-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. */
.ip-faq-list {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    padding: var(--space-2) var(--space-6);
}
.ip-faq-item { padding: var(--space-5) 0; border-top: 1px solid var(--color-border-light); }
.ip-faq-item:first-child { border-top: 0; }
.ip-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);
}
.ip-faq-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.ip-others {
    max-width: var(--ip-prose);
    margin: var(--space-12) auto var(--space-16);
    padding: 0 var(--container-padding);
}
.ip-others h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-4);
}
.ip-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. */
.ip-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);
}
.ip-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) {
    .ip-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. */
    .ip-index-track { padding: var(--space-1) var(--container-padding); }
    .ip-section { padding: var(--space-8) var(--container-padding) var(--space-4); }
    .ip-final { padding: var(--space-12) var(--container-padding); }
    .ip-sec-head { gap: var(--space-3); margin-bottom: var(--space-5); }
    .ip-badge { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
    .ip-faq-list { padding: var(--space-1) var(--space-5); }
}

@media (max-width: 480px) {
    /* A barra de controles do brinquedo (que é quem estoura a linha num celular
       de 390) quebra no css/satelite.css — regra comum, não desta página. */
    .ip-inline-cta { padding: var(--space-4); }
    .ip-inline-cta .ip-btn { flex: 1 1 100%; }
    .ip-final-actions .ip-btn,
    .ip-final-actions .ip-btn-ghost { flex: 1 1 100%; }
    .ip-chip { padding: 0 var(--space-3); }
    .ip-kicker { font-size: 2.25rem; }
    .ip-others-links a { padding: 0 var(--space-4); }
}

@media (min-width: 1024px) {
    .ip-hero { padding: var(--space-16) var(--container-padding) var(--space-10); }
    .ip-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) {
    /* Parado, o desenho fica no MEIO do percurso (a quinta): é o estado que
       explica a ideia sozinho — duas notas e um vão entre elas. */
    .ip-hero-span b:nth-of-type(2) { animation: none; transform: translateX(24px); }
    .ip-hero-span i { animation: none; width: 58px; }
    .ip-index-track { scroll-behavior: auto; }
    .ip-btn:hover { transform: none; }
}