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

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

   TRÊS 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. Conteúdo largo rola dentro do próprio
      contêiner (.toy-stage e .rp-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. As figuras são SVG desenhado por RhythmToy.glyph().

   O que este arquivo NÃO faz: desenhar o miolo dos brinquedos. Ele estiliza as
   classes que o RhythmToy CRIA (.toy, .toy-stage, .toy-controls, .toy-btn,
   .toy-field, .toy-readout, e o estado .is-playing) + a moldura da página.
   ========================================================================== */

/* ===========================================================================
   1. TOKENS DA PÁGINA
   O accent geral é o --color-info (o azul do card do Ritmo na landing). Cada
   seção sobrescreve --sec/--sec-soft: é o FIO CONDUTOR visual da rolagem, que
   desce do corpo (vermelho do coração) para o papel (azul/indigo da grade e da
   notação), passa pelo silêncio (cinza) e termina na música (verde → indigo).
   Todos esses valores JÁ EXISTEM em styles.css — nada de paleta nova.
   =========================================================================== */
.rp-main {
    --sec: var(--color-info);
    --sec-soft: var(--color-info-bg);
    --rp-prose: 42rem;          /* largura de leitura (~680px, padrão da casa) */
    --rp-card: 48rem;           /* cartão de brinquedo, um tico mais largo     */
    --rp-card-wide: 56rem;      /* GrooveBox: a grade pede mais respiro        */

    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: `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 do ritmo. */
body { overflow-x: clip; }

.rp-section--pulso     { --sec: var(--color-error);          --sec-soft: var(--color-error-bg); }
.rp-section--andamento { --sec: var(--color-warning);        --sec-soft: var(--color-warning-bg); }
.rp-section--compasso  { --sec: var(--color-info);           --sec-soft: var(--color-info-bg); }
.rp-section--figuras   { --sec: var(--color-primary);        --sec-soft: var(--color-primary-bg); }
/* A pausa é o SILÊNCIO — o preto de tinta aqui é semântico, não falta de cor.
   🔴 NÃO usar --color-text-secondary (cinza médio): botão CHEIO em cinza médio lê
   como DESABILITADO, e o ▶ do brinquedo desta seção pareceria fora do ar. */
.rp-section--pausa     { --sec: var(--color-text);           --sec-soft: var(--color-border-light); }
.rp-section--sincope   { --sec: var(--color-success);        --sec-soft: var(--color-success-bg); }
.rp-section--groove    { --sec: var(--color-primary-dark);   --sec-soft: var(--color-primary-bg); }

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

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

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

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

.rp-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    margin: 0;
}

/* Quatro pontos pulsando: a página começa mostrando o que ela é (pulso), não
   dizendo. Decorativo e silencioso — som só por gesto (invariante 3 do plano). */
.rp-pulse-dots { display: inline-flex; gap: 0.375rem; align-items: center; }
.rp-pulse-dots i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-info);
    animation: rp-pulse 1.6s ease-in-out infinite;
}
.rp-pulse-dots i:nth-child(2) { animation-delay: 0.2s; }
.rp-pulse-dots i:nth-child(3) { animation-delay: 0.4s; }
.rp-pulse-dots i:nth-child(4) { animation-delay: 0.6s; }
@keyframes rp-pulse {
    0%, 60%, 100% { transform: scale(1);   opacity: 0.35; }
    20%           { transform: scale(1.6); opacity: 1; }
}

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

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

/* 🔴 44px de altura mesmo sendo "só" um chip de navegação: é alvo de dedo. */
.rp-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);
}
.rp-chip:hover { color: var(--sec); border-color: var(--sec); }

/* O chip da seção corrente veste a cor DAQUELA seção — o índice inteiro conta a
   mesma história de cor que a rolagem. */
.rp-chip.is-current {
    background: var(--sec);
    border-color: var(--sec);
    color: #fff;
}
.rp-chip[data-sec="pulso"]     { --sec: var(--color-error); }
.rp-chip[data-sec="andamento"] { --sec: var(--color-warning); }
.rp-chip[data-sec="compasso"]  { --sec: var(--color-info); }
.rp-chip[data-sec="figuras"]   { --sec: var(--color-primary); }
.rp-chip[data-sec="pausa"]     { --sec: var(--color-text); }
.rp-chip[data-sec="sincope"]   { --sec: var(--color-success); }
.rp-chip[data-sec="groove"]    { --sec: var(--color-primary-dark); }

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

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

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

/* O número em cor cheia é o marcador da jornada: 01 no corpo → 07 na música. */
.rp-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);
}

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

.rp-prose {
    max-width: var(--rp-prose);
    margin: var(--space-6) auto 0;
}
.rp-prose p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.rp-prose p:last-child { margin-bottom: 0; }
.rp-prose strong { color: var(--color-text); font-weight: var(--font-semibold); }

/* A dica: uma linha curta, tingida com a cor da seção. */
.rp-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: var(--rp-prose);
    margin: var(--space-5) auto 0;
    padding: var(--space-4) var(--space-5);
    background: var(--sec-soft);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text);
}
.rp-tip-ico {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    margin-top: 0.2rem;
    fill: var(--sec);
}

/* ===========================================================================
   5. O CARTÃO DO BRINQUEDO  (.toy-card = a caixa da PÁGINA; .toy = o host que o
   RhythmToy marca 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(--rp-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);
    overflow: hidden;                  /* a barra de cor respeita o raio */
    transition: box-shadow var(--transition-normal);
}
.toy-card--wide { max-width: var(--rp-card-wide); }

/* Barra de cor no topo do cartão: o brinquedo pertence visivelmente à seção. */
.toy-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    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 */
.toy-stage {
    max-width: 34rem;
    margin: 0 auto;
    /* Escotilha de emergência: se algum brinquedo pedir largura mínima (a grade
       do GrooveBox), ele rola AQUI DENTRO — nunca na página. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
/* 🔴 48,2rem = 771px, um fio acima dos 770 que a grade do GrooveBox pede
   (GrooveBox.W = GUT + 16×44 + 4). Estava em 44rem/704px: a grade CABIA na tela
   de 1280 e mesmo assim rolava de lado, com o 16º passo cortado ao meio — medido.
   Rolar uma grade num monitor grande é defeito, não escotilha. Abaixo de 771px a
   escotilha volta a valer e ela rola aqui dentro, que é o comportamento do celular. */
.toy-card--wide .toy-stage { max-width: 48.2rem; }

/* 🔴 O viewBox é de cada brinquedo (400×150 a 400×220) — nada de altura fixa. */
.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: 4 botões + um slider numa linha de 390px estouram,
   e o overflow-x:hidden 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ó. */
.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); }
.toy-btn[aria-pressed="true"], .toy-btn.is-on {
    background: var(--sec-soft);
    border-color: var(--sec);
    color: var(--sec);
}

.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,
.rp-chip:focus-visible,
.rp-btn:focus-visible,
.rp-btn-ghost:focus-visible {
    outline: 3px solid var(--sec);
    outline-offset: 2px;
}

/* --------------------------------------------------- campo rotulado (.field)
   O RhythmToy monta <label.toy-field><span.toy-field-label>+<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 (BPM…) */
.toy-readout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    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;
}

/* ===========================================================================
   6. SAÍDAS PARA O APP (o funil — seção sem saída é beco sem saída)
   =========================================================================== */
.rp-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);
}
.rp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); color: #fff; }
.rp-btn--big { min-height: 3.25rem; padding: 0 var(--space-8); font-size: 1.0625rem; }

.rp-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-decoration: none;
    opacity: 0.9;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.rp-btn-ghost:hover { opacity: 1; background: rgb(255 255 255 / 0.14); color: inherit; }

/* CTA no meio da rolagem: um cartão largo, na cor do accent da página. */
.rp-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--rp-card);
    margin: var(--space-6) auto var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-info-bg);
    border-radius: var(--radius-xl);
}
.rp-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);
}
.rp-inline-cta .rp-btn { --sec: var(--color-primary); flex: 0 0 auto; }

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

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

.rp-others {
    max-width: var(--rp-prose);
    margin: var(--space-12) auto var(--space-16);
    padding: 0 var(--container-padding);
}
.rp-others h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-4);
}
.rp-others-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rp-others-links a {
    display: inline-block;
    padding: var(--space-2) 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);
}
.rp-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) {
    .rp-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
       (64px) + índice já comem 1/7 da tela de um celular — cada px conta. */
    .rp-index-track { padding: var(--space-1) var(--container-padding); }
    .rp-section { padding: var(--space-8) var(--container-padding) var(--space-4); }
    .rp-final { padding: var(--space-12) var(--container-padding); }
    .toy-card { padding: var(--space-5) var(--space-4) var(--space-4); }
    .rp-sec-head { gap: var(--space-3); margin-bottom: var(--space-5); }
    .rp-badge { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
    .rp-faq-list { padding: var(--space-1) var(--space-5); }
}

@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); }
    .rp-inline-cta { padding: var(--space-4); }
    .rp-inline-cta .rp-btn { flex: 1 1 100%; }
    .rp-final-actions .rp-btn,
    .rp-final-actions .rp-btn-ghost { flex: 1 1 100%; }
    .rp-chip { padding: 0 var(--space-3); }
    .rp-kicker { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
    .rp-hero { padding: var(--space-16) var(--container-padding) var(--space-10); }
    .rp-section { padding: var(--space-16) var(--container-padding) var(--space-8); }
    /* No desktop os 7 chips cabem sem rolar: centraliza em vez de alinhar à esquerda. */
    .rp-index-track { justify-content: center; }
}

/* ===========================================================================
   9. MOVIMENTO REDUZIDO
   O styles.css já zera transições globalmente; aqui garantimos que a decoração
   PRÓPRIA desta página (os pontos do pulso) também para — e que a rolagem por
   âncora não vira um voo. Brinquedo parado continua com o ▶ funcionando: quem
   cuida disso é o RhythmToy (invariante 6).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rp-pulse-dots i { animation: none; opacity: 0.7; }
    .rp-index-track { scroll-behavior: auto; }
    .rp-btn:hover { transform: none; }
    .toy-btn:active { transform: none; }
}