/* ═══════════════════════════════════════════════════════════════════════════
   3wi — MOCK Onda B · direção "Sala de Concerto"
   Fusão declarada em A4 §5: a VOZ do Ouvido Absoluto (navy + Cormorant) com a
   DISCIPLINA DE TOKENS do Ritmo (--space-1..24, escala tipo em rem, raio, sombra).
   Nenhum valor abaixo foi inventado: ou vem de aulademusica/css/landing.css,
   ou de aulademusica.com.br/css/styles.css, ou de for-music-schools/index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────
   Nomes e degraus copiados do Ritmo (styles.css:26-118) para que copiar CSS
   entre os projetos NÃO caia na armadilha #10 do A4 (mesmo nome, outro valor).
   Os HEX são os do Ouvido Absoluto (landing.css:2-14).                      */
:root{
  color-scheme: light dark;

  /* Cor — tema claro */
  /* 🔒 CONSTANTE nos dois temas: superfícies que são navy POR DESENHO
     (rodapé, selo do logo). Se usassem --color-ink elas inverteriam no
     escuro e virariam caixa clara com texto claro. */
  --color-deep:         #1a2639;
  --color-ink:          #1a2639;   /* 14,18:1 sobre --color-bg  */
  --color-ink-soft:     #3e4a61;   /*  8,30:1 sobre --color-bg  */
  --color-muted:        #5b6b82;   /*  5,74:1 sobre #fff        */
  --color-line:         #c6d4e1;   /* pautas, réguas decorativas */
  --color-rule:         #e3e9f0;   /* bordas de cartão           */
  --color-rule-soft:    #eef2f7;
  --color-bg:           #f5f7fa;
  --color-surface:      #ffffff;
  --color-surface-2:    #eef2f7;
  --color-accent:       #4a6fa5;   /*  5,11:1 sobre #fff — AA ok */
  --color-accent-ink:   #3d5f92;   /* hover / texto menor        */
  --color-accent-wash:  #eaf1fa;
  /* Par preenchimento/texto. No escuro ele INVERTE (azul claro + tinta
     escura) — sem isso, #fff sobre #8fb6e8 daria 2,1:1. */
  --color-accent-fill:  #4a6fa5;
  --color-on-accent:    #ffffff;
  /* 🔴 #3b8c6e mede 4,07:1 e REPROVA AA mesmo como botão cheio (A4 §3.1).
     Fica só na régua decorativa do .honest; o botão usa a versão escura. */
  --color-green:        #3b8c6e;
  --color-green-fill:   #2f7259;   /*  5,68:1 com texto branco   */
  --color-green-ink:    #2f7259;   /*  5,68:1 — a versão textual */
  --color-green-wash:   #e8f5ef;
  /* 🟨 OURO — exclusivo do programa de escolas pioneiras (A4 §9.6).
     #b8860b mede 3,25:1 sobre branco e REPROVA como texto; fica só em
     preenchimento/borda. O texto em ouro usa as duas variantes abaixo. */
  --color-gold:         #b8860b;
  --color-gold-ink:     #9a6f10;   /*  4,51:1 sobre #fff — texto em fundo claro */
  --color-gold-lift:    #e0b954;   /*  8,14:1 sobre #1a2639 — texto em fundo navy */
  --color-on-dark:      #f8f8f8;
  --color-on-dark-soft: #dbe4ef;
  --color-on-dark-mute: #b9c6d8;

  /* Gradiente do hero — for-music-schools/index.html (hero) */
  --gradient-deep: linear-gradient(160deg,#1a2639 0%,#2c3d57 55%,#3e4a61 100%);

  /* Tipografia */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Escala tipográfica — degraus IDÊNTICOS ao Ritmo (styles.css:62-71) */
  --text-xs: .75rem;  --text-sm: .875rem; --text-base: 1rem;  --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --text-4xl: 2.25rem; --text-5xl: 3rem;  --text-6xl: 3.75rem;

  /* Espaço — 12 degraus numéricos (Ritmo styles.css:81-92) */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem; --space-8:2rem;   --space-10:2.5rem;
  --space-12:3rem;  --space-16:4rem;  --space-20:5rem;  --space-24:6rem;

  /* Raio */
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
  --radius-xl:1rem;    --radius-2xl:1.5rem; --radius-full:9999px;

  /* Sombra — com anel de 1px, como o --shadow-card do Ritmo */
  --shadow-card:       0 0 0 1px rgba(26,38,57,.05), 0 4px 22px rgba(26,38,57,.07);
  --shadow-card-hover: 0 0 0 1px rgba(74,111,165,.22), 0 12px 30px rgba(26,38,57,.11);
  --shadow-lift:       0 8px 30px rgba(26,38,57,.10);

  /* Transição — as 3 do Ritmo + a expressiva do Ouvido Absoluto */
  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:350ms ease;
  --t-expressive: 400ms cubic-bezier(.165,.84,.44,1);

  /* Medida */
  /* Accent POR PRODUTO — o --game-accent do Ritmo, trazido para cá.
     No escuro os dois clareiam: #4a6fa5 sobre o cartão escuro dá 3,08:1. */
  --product-oa:    #4a6fa5;   /* Ouvido Absoluto */
  --product-ritmo: #4f46e5;   /* Aula de Música — o indigo NÃO some (A4 §5-A) */

  --container: 1120px;
  --prose: 42rem;            /* medida de leitura — ritmo-page.css:38 */
}

/* ── Tema escuro. Definido nos DOIS lugares (auto + explícito), como manda a
   regra da casa: nenhuma cor tem sua única definição dentro de um @media. ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-ink:#e7edf5; --color-ink-soft:#b9c6d6; --color-muted:#93a3b8;
    --color-line:#33415a; --color-rule:#2b3748; --color-rule-soft:#232e3d;
    --color-bg:#131a25; --color-surface:#1a2331; --color-surface-2:#212c3c;
    --color-accent:#8fb6e8; --color-accent-ink:#a9c8f0; --color-accent-wash:#1e2b3d;
    --color-green:#3b8c6e; --color-green-ink:#6cc39c; --color-green-wash:#16281f;
    --color-gold:#d4a53c; --color-gold-ink:#e0b954; --color-gold-lift:#e0b954;
    --color-accent-fill:#8fb6e8; --color-on-accent:#101722;
    --color-green-fill:#2f7259;
    --product-oa:#8fb6e8; --product-ritmo:#a5a0f5;
    --gradient-deep: linear-gradient(160deg,#101722 0%,#1a2639 55%,#243348 100%);
    --shadow-card:       0 0 0 1px rgba(255,255,255,.05), 0 4px 22px rgba(0,0,0,.45);
    --shadow-card-hover: 0 0 0 1px rgba(143,182,232,.28), 0 12px 30px rgba(0,0,0,.55);
    --shadow-lift:       0 8px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --color-ink:#e7edf5; --color-ink-soft:#b9c6d6; --color-muted:#93a3b8;
  --color-line:#33415a; --color-rule:#2b3748; --color-rule-soft:#232e3d;
  --color-bg:#131a25; --color-surface:#1a2331; --color-surface-2:#212c3c;
  --color-accent:#8fb6e8; --color-accent-ink:#a9c8f0; --color-accent-wash:#1e2b3d;
  --color-green:#3b8c6e; --color-green-ink:#6cc39c; --color-green-wash:#16281f;
  --color-gold:#d4a53c; --color-gold-ink:#e0b954; --color-gold-lift:#e0b954;
  --color-accent-fill:#8fb6e8; --color-on-accent:#101722;
  --color-green-fill:#2f7259;
  --product-oa:#8fb6e8; --product-ritmo:#a5a0f5;
  --gradient-deep: linear-gradient(160deg,#101722 0%,#1a2639 55%,#243348 100%);
  --shadow-card:       0 0 0 1px rgba(255,255,255,.05), 0 4px 22px rgba(0,0,0,.45);
  --shadow-card-hover: 0 0 0 1px rgba(143,182,232,.28), 0 12px 30px rgba(0,0,0,.55);
  --shadow-lift:       0 8px 30px rgba(0,0,0,.5);
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  font-family:var(--font-body); font-size:var(--text-base); font-weight:400;
  line-height:1.65; color:var(--color-ink-soft); background:var(--color-bg);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;color:var(--color-ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.prose{max-width:var(--prose)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Glifo line-art — MESMO contrato do .gs-st da casa (landing.css:284-289).
   Nenhum emoji como ícone em lugar nenhum deste arquivo (defeito #4 do A4). */
.ico{width:1.5rem;height:1.5rem;flex:none;color:currentColor}
.gs-st{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 3. TIPOGRAFIA FLUIDA ────────────────────────────────────────────────
   clamp() em TODO título (defeito #2 do A4: o 3wi de hoje tem zero).
   Mínimos orçados em ESPANHOL a 360px — se cabe em ES, cabe nos três. */
.h-hero    {font-size:clamp(2rem, 5.2vw, 3.5rem);   letter-spacing:-.005em}
.h-section {font-size:clamp(1.6875rem, 3.6vw, 2.375rem)}
.h-card    {font-size:clamp(1.25rem, 2.2vw, 1.4375rem)}
.h-sub     {font-size:clamp(1.125rem, 1.8vw, 1.25rem)}
.lead      {font-size:clamp(1rem, 2vw, 1.1875rem); line-height:1.6}

.kicker{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:2rem; padding:.4em .9em; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.25; text-wrap:balance;
  background:var(--color-accent-wash); color:var(--color-accent-ink);
  border:1px solid var(--color-rule);
}
.kicker .ico{width:1rem;height:1rem}
.on-dark .kicker{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}

.label{
  display:block; font-size:.78rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color:var(--color-muted);
}

/* ── 4. SEÇÕES + a PAUTA que substitui a onda genérica ───────────────────
   Defeito #7 do A4: a onda `M0,60 C480,120…` é curva de template. No lugar
   dela, uma pauta real de 5 linhas em --color-line separa as seções.      */
.section{padding-block:clamp(var(--space-12), 7vw, var(--space-20))}
.section.alt{background:var(--color-surface)}
.section-header{max-width:44rem;margin:0 auto var(--space-10);text-align:center}
.section-header .h-section{margin-bottom:var(--space-3)}
.section-subtitle{color:var(--color-ink-soft);font-size:var(--text-base)}
.on-dark .section-subtitle{color:var(--color-on-dark-soft)}

.staff-rule{display:block;width:100%;height:22px;color:var(--color-line);opacity:.9}
.staff-rule .gs-st{stroke-width:1}

/* ── 5. BOTÕES ───────────────────────────────────────────────────────────
   Orçados por EN+25% (A4 §7.3.4): padding em `em`, min-height 48px,
   text-wrap:balance. "Montar a turma da minha escola" e a versão ES
   ("Crear el grupo de mi escuela") quebram em 2 linhas CENTRADAS, sem estourar. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:.75em 1.6em; border:1.5px solid transparent;
  border-radius:var(--radius-full); font-family:inherit; font-size:var(--text-sm);
  font-weight:500; line-height:1.3; text-align:center; text-wrap:balance;
  cursor:pointer; transition:var(--t-expressive);
}
.btn-solid{background:var(--color-green-fill);color:#fff;box-shadow:0 6px 18px rgba(59,140,110,.32)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-accent{background:var(--color-accent-fill);color:var(--color-on-accent)}
.btn-accent:hover{background:var(--color-accent-ink);transform:translateY(-2px)}
.btn-ghost{border-color:var(--color-rule);color:var(--color-ink)}
.btn-ghost:hover{background:var(--color-surface-2)}
.on-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-block{width:100%}

/* ── 6. CARTÕES ──────────────────────────────────────────────────────────── */
.card{
  background:var(--color-surface); border:1px solid var(--color-rule);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
}
.grid{display:grid;gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(16.75rem,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}

/* ── 7. HEADER ───────────────────────────────────────────────────────────
   Header magro copiado de for-music-schools: logo + espaçador + 1 CTA, e o
   CTA SOME em <=640px (o hero repete o mesmo botão). Sem hambúrguer.     */
.header{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--color-surface) 94%,transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--color-rule);
}
.navbar{display:flex;align-items:center;gap:var(--space-4);min-height:60px;padding-block:var(--space-2)}
.logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-ink)}
.logo-mark{
  width:36px;height:36px;flex:none;padding:5px;border-radius:var(--radius-lg);
  background:var(--color-deep);color:var(--color-gold-lift);box-shadow:0 2px 8px rgba(26,38,57,.3);
}
.logo-mark svg{width:100%;height:100%}
.logo-desc{font-family:var(--font-body);font-size:var(--text-xs);font-weight:400;color:var(--color-muted);letter-spacing:.02em}
.nav-spacer{flex:1}

/* Seletor de idioma — o padrão que o 3wi já tem (pílula), mas ANCORADO no
   header em vez de flutuando sobre o canto (defeito de sobreposição, A4 §7.2). */
.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--color-rule);border-radius:var(--radius-full);background:var(--color-surface-2)}
.langs a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;min-height:2rem;padding:0 .5rem;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--color-muted);transition:var(--t-fast);
}
.langs a:hover{color:var(--color-ink)}
.langs a[aria-current="true"]{background:var(--color-surface);color:var(--color-ink);box-shadow:0 1px 3px rgba(26,38,57,.14)}

/* ── 8. HERO ─────────────────────────────────────────────────────────────
   min-height, NUNCA height (regra 3 do A4 §7.3). E nada de 100vh vazio:
   o hero entrega tese + prova + 1 CTA acima da dobra.                    */
.hero{position:relative;overflow:hidden;background:var(--gradient-deep);color:var(--color-on-dark);
  padding-block:clamp(var(--space-12),8vw,var(--space-20));min-height:auto}
.hero::after{content:"";position:absolute;right:-90px;bottom:-110px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,111,165,.45),transparent 68%);pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:46rem}
.hero .h-hero{color:#fff;margin-block:var(--space-5) var(--space-4)}
.hero .h-hero em{font-style:normal;color:#8fb6e8}
.hero .lead{color:var(--color-on-dark-soft);max-width:40rem;margin-bottom:var(--space-4)}
.hero-proof{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);
  color:#c3d2e4;max-width:36rem;margin-bottom:var(--space-8)}
.hero-proof .ico{width:1.125rem;height:1.125rem;margin-top:.2rem;color:var(--color-green-ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* pauta estática no rodapé do hero — A4 §6: no hero, no MÁXIMO uma pauta parada */
.hero-staff{position:absolute;left:0;right:0;bottom:0;z-index:1;height:78px;color:rgba(198,212,225,.20);pointer-events:none}
.hero-staff .gs-st{stroke-width:1}

/* ── 9. PROVA ────────────────────────────────────────────────────────────── */
.proof-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:start}
.realtag{display:inline-block;font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-green-ink);background:var(--color-green-wash);border:1px solid var(--color-rule);
  border-radius:var(--radius-full);padding:.25em .7em;margin-bottom:var(--space-4)}
.gcard{padding:var(--space-6)}
.gcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.gcard-logo{width:158px;min-height:66px;display:flex;align-items:center;justify-content:center;
  padding:var(--space-2) var(--space-3);border:1px solid var(--color-rule);border-radius:var(--radius-md);
  background:var(--color-surface);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-ink);text-align:center;line-height:1.15}
.gcard-site{font-size:var(--text-xs);color:var(--color-accent-ink);border:1px solid var(--color-rule);
  border-radius:var(--radius-full);padding:.35em .8em;white-space:nowrap}
.gcard h3{margin-bottom:var(--space-1)}
.gdesc{font-size:var(--text-sm);color:var(--color-ink-soft);margin-bottom:var(--space-4)}
.gmeta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);
  color:var(--color-muted);border-top:1px solid var(--color-rule-soft);padding-top:var(--space-4)}
.gmeta b{color:var(--color-ink);font-weight:600}
.livelink{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:var(--space-4);
  padding:.55em 1.1em;border-radius:var(--radius-full);background:var(--color-accent-fill);color:var(--color-on-accent);
  font-size:var(--text-sm);font-weight:500;transition:var(--t-expressive)}
.livelink:hover{filter:brightness(.92)}
.ranktable{padding:var(--space-5)}
.ranktable h4{font-size:var(--text-xl);margin-bottom:var(--space-1)}
.rsub{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-4)}
.rrow{display:grid;grid-template-columns:1.6rem 1fr auto auto;gap:var(--space-3);align-items:center;
  padding-block:var(--space-2);border-top:1px solid var(--color-rule-soft);font-size:var(--text-sm)}
.rrow:first-of-type{border-top:0}
.rpos{color:var(--color-muted);font-size:var(--text-xs);text-align:right}
.rpos.top{color:var(--color-gold-ink);font-weight:600}
.rname{color:var(--color-ink);display:flex;align-items:center;gap:var(--space-2);min-width:0}
.rname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.school-badge{flex:none;font-size:.6875rem;background:var(--color-accent-wash);color:var(--color-accent-ink);
  border:1px solid var(--color-rule);border-radius:var(--radius-full);padding:.1em .55em}
.rlvl{font-size:var(--text-xs);color:var(--color-on-accent);background:var(--color-accent-fill);border-radius:var(--radius-full);padding:.15em .7em;white-space:nowrap}
.rpct{font-size:var(--text-xs);color:var(--color-green-ink);font-weight:600;min-width:3.25rem;text-align:right}

/* ── 10. BENEFÍCIOS / PASSOS ─────────────────────────────────────────────── */
.bcard{padding:var(--space-6);transition:var(--t-expressive)}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.bicon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);
  border-radius:var(--radius-lg);background:var(--color-accent-wash);color:var(--color-accent-ink)}
.bicon .ico{width:1.5rem;height:1.5rem}
.bcard h3{margin-bottom:var(--space-2)}
.bcard p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.who{display:inline-block;margin-top:var(--space-3);padding-top:var(--space-2);
  border-top:1px dashed var(--color-rule);font-size:var(--text-xs);color:var(--color-muted)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-6);counter-reset:s}
.step{position:relative;padding:var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:var(--space-5);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--color-ink);color:var(--color-bg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}
.step h3{margin:var(--space-2) 0;font-size:var(--text-xl)}
.step p{font-size:var(--text-sm);color:var(--color-ink-soft)}

/* ── 11. CARTÃO DE PRODUTO ───────────────────────────────────────────────
   Cada produto carrega o SEU accent, como o --game-accent do Ritmo faz.
   É a mitigação do risco declarado no A4 §5-A: o Ritmo indigo não some. */
.pcard--oa{--product-accent:var(--product-oa)}
.pcard--ritmo{--product-accent:var(--product-ritmo)}
.pcard{display:flex;flex-direction:column;overflow:hidden;padding:0;transition:var(--t-expressive)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.pcard::before{content:"";display:block;height:4px;background:var(--product-accent,var(--color-accent))}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:var(--space-6)}
.pcard-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.pcard-icon{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--product-accent,var(--color-accent)) 14%,var(--color-surface));
  color:var(--product-accent,var(--color-accent))}
.pcard p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
/* .tag orçada em ES: min-height + padding em `em` + wrap. Nunca altura fixa. */
.tag{display:inline-flex;align-items:center;min-height:1.75rem;padding:.2em .7em;border-radius:var(--radius-full);
  font-size:var(--text-xs);line-height:1.3;background:var(--color-surface-2);color:var(--color-ink-soft);border:1px solid var(--color-rule)}
.pcard-foot{margin-top:auto;padding-top:var(--space-5)}
.plink{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;font-size:var(--text-sm);font-weight:500;
  color:var(--product-accent,var(--color-accent));text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.domain-note{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-muted)}

/* ── 12. BLOCO DE PREÇO + PIONEIRAS (o único ouro do site) ───────────────── */
.pricebox{position:relative;overflow:hidden;background:var(--gradient-deep);color:var(--color-on-dark-soft);
  border-radius:var(--radius-xl);padding:clamp(var(--space-8),4vw,var(--space-12))}
.pricebox::after{content:"";position:absolute;left:-110px;top:-120px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,111,165,.4),transparent 68%);pointer-events:none}
.pricebox > *{position:relative;z-index:2}
.pricebox h2{color:#fff;margin-bottom:var(--space-3)}
.pricebox p{max-width:38rem;font-size:var(--text-base)}
.gold-badge{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2rem;margin-bottom:var(--space-4);
  padding:.35em .9em;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.3;text-wrap:balance;
  background:rgba(184,134,11,.18);border:1px solid rgba(184,134,11,.5);color:var(--color-gold-lift)}
.gold-badge .ico{width:1rem;height:1rem}
/* medido no ponto MAIS CLARO do gradiente (#3e4a61), não no navy: 4,94:1 */
.fine{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-on-dark-mute)}
.pricebox .btn-solid{margin-top:var(--space-6)}

/* ── 13. CONFIANÇA — os números que EXISTEM ─────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-4);margin-bottom:var(--space-8)}
.stat{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-lg)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.875rem,3.4vw,2.5rem);font-weight:700;
  line-height:1.05;color:var(--color-ink);margin-bottom:var(--space-1)}
.stat span{font-size:var(--text-sm);color:var(--color-ink-soft)}
.stat em{display:block;margin-top:var(--space-2);font-style:normal;font-size:var(--text-xs);color:var(--color-muted)}

/* Caixa de honestidade — borda verde à esquerda (for-music-schools .honest) */
.honest{border-left:3px solid var(--color-green);background:var(--color-green-wash);
  padding:var(--space-3) var(--space-4);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:var(--text-sm);color:var(--color-ink-soft)}
.honest b{color:var(--color-ink)}

/* ── 14. COMO FAZEMOS ────────────────────────────────────────────────────── */
.method{max-width:var(--prose);margin-inline:auto}
.method p{margin-bottom:var(--space-4)}
.quotebox{margin:var(--space-6) 0;padding:var(--space-5) var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-rule);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.quotebox .label{margin-bottom:var(--space-2)}
.quotebox p{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.35;color:var(--color-ink);margin:0}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-5)}
.chain .pill{display:inline-flex;align-items:center;max-width:100%;min-height:2rem;padding:.25em .8em;border-radius:var(--radius-full);
  background:var(--color-surface-2);border:1px solid var(--color-rule);font-size:var(--text-sm);color:var(--color-ink)}
.chain .arrow{color:var(--color-muted);flex:none}

/* ── 15. FAQ — <details> nativo, zero JS ─────────────────────────────────── */
.faq-list{max-width:52rem;margin-inline:auto}
details.faq{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md);
  margin-bottom:var(--space-3);overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);min-height:48px;padding:var(--space-4) var(--space-5);
  font-weight:500;font-size:var(--text-base);color:var(--color-ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";flex:none;color:var(--color-accent);font-size:var(--text-xl);line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq .a{padding:0 var(--space-5) var(--space-5);font-size:var(--text-sm);color:var(--color-ink-soft)}
details.faq .a > * + *{margin-top:var(--space-3)}
details.faq .a strong{color:var(--color-ink)}

/* ── 16. FORMULÁRIO ──────────────────────────────────────────────────────── */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center}
.formcard{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-rule);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lift)}
.formcard label{margin:var(--space-4) 0 var(--space-1)}
.formcard label:first-of-type{margin-top:0}
.formcard input,.formcard select,.formcard textarea{
  width:100%;min-height:48px;padding:.7em .8em;border:1px solid var(--color-rule);border-radius:var(--radius-md);
  font-family:inherit;font-size:var(--text-sm);color:var(--color-ink);background:var(--color-bg)}
.formcard textarea{min-height:5rem;resize:vertical}
.formcard .btn{margin-top:var(--space-5)}
.formside h2{margin-bottom:var(--space-4)}
.formside p{margin-bottom:var(--space-3)}
.alt-contact{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-rule);
  font-size:var(--text-sm);color:var(--color-muted)}
.alt-contact a{color:var(--color-accent-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ── 17. BRINQUEDO TOCÁVEL — ESPAÇO RESERVADO ───────────────────────────
   🔶 Outro agente da Onda B implementa o som. Aqui só o CONTINENTE:
   proporção, moldura, alvo de 44x44 do ▶, e o estado PARADO já desenhado
   (invariante 5 do A4 §6: "se o SVG só faz sentido em movimento, virou GIF").
   Barra de 4px no topo com a cor da seção = .toy-card do ritmo-page.css.  */
.toy-card{position:relative;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-rule);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.toy-card::before{content:"";display:block;height:4px;background:var(--toy-accent,var(--color-accent))}
.toy-body{padding:var(--space-5)}
.toy-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.toy-slot{display:block;width:100%;min-height:120px;color:var(--color-ink)}
/* 🔴 Invariante 7 do A4 §2.2: alvo de dedo 44×44 INCLUSIVE EM LARGURA.
   Um teclado de 7 teclas ou uma grade de 8 tempos, espremidos em 360px,
   dão tecla de 42px e quadrado de 27px — o brinquedo passa a errar o toque.
   Solução: a caixa rola na horizontal e o SVG guarda uma largura mínima.
   Encolher o SVG até caber seria quebrar a invariante em silêncio. */
.toy-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.toy-scroll .toy-slot{min-width:330px}
.toy-scroll.wide .toy-slot{min-width:390px}
.toy-controls{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.toy-play{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--color-rule);border-radius:50%;background:var(--color-surface);color:var(--color-accent);cursor:pointer}
.toy-hint{font-size:var(--text-xs);color:var(--color-muted)}
.toy-tag{display:inline-flex;align-items:center;gap:var(--space-2);min-height:1.75rem;padding:.2em .7em;
  border-radius:var(--radius-full);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;
  background:repeating-linear-gradient(135deg,var(--color-surface-2) 0 6px,transparent 6px 12px);
  border:1px dashed var(--color-accent);color:var(--color-accent-ink)}

/* ── 18. RODAPÉ ──────────────────────────────────────────────────────────
   Sem o "•" como TEXTO (defeito #14 do A4): separador é borda CSS, e some
   quando o flex embrulha. Escala para 4+ links sem bullet órfão.         */
.footer{background:var(--color-deep);color:var(--color-on-dark-mute);padding-block:var(--space-10);font-size:var(--text-sm)}
:root[data-theme="dark"] .footer,
:root:not([data-theme="light"]) .footer{border-top:1px solid var(--color-rule)}
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}
.footer h4{color:#fff;font-size:var(--text-lg);margin-bottom:var(--space-3)}
.footer .label{color:#8fa0b8;margin-bottom:var(--space-3)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-1)}
.footer a{display:inline-block;min-height:32px;padding-block:var(--space-1);color:#c9dbf2}
.footer a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;
  padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.14);font-size:var(--text-xs);color:#93a5bd}

/* ── 19. RESPONSIVO — pontos medidos, não copiados ───────────────────── */
@media (max-width:900px){
  .proof-wrap,.formwrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .header .btn{display:none}          /* o hero repete o mesmo CTA logo abaixo */
  .logo-desc{display:none}
  .hero-staff{height:56px}
}
@media (max-width:420px){
  .container{padding-inline:var(--space-4)}
  .hero-actions .btn{width:100%}
  .gcard,.ranktable,.toy-body,.bcard,.step,.pcard-body,.formcard{padding:var(--space-5) var(--space-4)}
  .rrow{grid-template-columns:1.4rem 1fr auto;row-gap:2px}
  .rpct{display:none}                 /* 3 colunas em 360px, sem truncar nome */
  .gcard-logo{width:100%;}
}


/* ══════════════════════════════════════════════════════════════════════════
   21. COMPONENTE MUSICAL TOCÁVEL  (Onda B / B3 — `<div data-toy="…">`)
   Colado de onda-b/tocavel/css/tocavel.css, trecho "componente".
   🔴 Três adaptações declaradas, e o motivo de cada uma:
   (a) O componente fala em --accent/--ink/--line/--surface; esta casa fala em
       --color-*. As pontes estão no bloco :root abaixo. Sem elas o brinquedo
       fica preto-sobre-preto e a pauta some — que é o modo de falhar que o
       próprio B3 §componente avisa.
   (b) `.toy-card`, `.toy-kicker`, `.toy-lede` e `.toy-controls` do tocavel NÃO
       vieram: a moldura já existe aqui, na seção 17, e é a do design aprovado.
   (c) O `.toy-play` estático da seção 17 (▶ desabilitado do mock) some quando
       há brinquedo real — o componente monta os próprios botões.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:    var(--color-accent);
  --ink:       var(--color-ink);
  --ink-soft:  var(--color-ink-soft);
  --line:      var(--color-line);
  --surface:   var(--color-surface);
}
.toy-controls{flex-wrap:wrap}
.toy-stage { position: relative; margin: 0 0 var(--space-3); }
.toy-stage svg { display: block; width: 100%; height: auto; }

/* 🔴 A camada de alvos: <button> HTML de verdade sobre o SVG.
 * Percentual do viewBox ⇒ o alvo é tão fluido quanto o desenho. Traz Tab,
 * Enter/Espaço, foco visível e leitor de tela sem uma linha de JS de a11y.
 * min-width 44px é a invariante 7 — o alvo de dedo vale em LARGURA também. */
.toy-hits { position: absolute; inset: 0; }
.toy-hit {
    position: absolute;
    min-width: 44px; min-height: 44px;
    padding: 0; margin: 0; border: 0; background: transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.toy-hit:hover  { background: rgba(74,111,165,.07); }
.toy-hit:active { background: rgba(74,111,165,.14); }
.toy-hit:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    background: rgba(74,111,165,.10);
}

.toy-caption {
    margin: 0 0 var(--space-4);
    min-height: 1.6em;                  /* nunca altura fixa: o texto muda de tamanho por idioma */
    font-size: 15px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.toy-caption:empty::after { content: "\00a0"; }

.toy-btn {
    font: 500 14px/1 Inter, system-ui, sans-serif;
    padding: .85em 1.4em;
    min-height: 44px;                   /* alvo de dedo; padding em em aguenta ES */
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-wrap: balance;
    transition: background .2s ease, border-color .2s ease;
}
.toy-btn.is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.toy-btn.is-primary:hover { background: var(--accent); border-color: var(--accent); }
.toy-btn.is-ghost { color: var(--ink-soft); }
.toy-btn:hover { border-color: var(--accent); }
.toy-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* — variação A: a pauta —
 * 🔴 A cor vem daqui, nunca de um atributo `stroke="var(--x)"` no SVG:
 * var() em atributo de apresentação não é confiável no Safari, e o modo de
 * falhar é a pauta sumir (preto sobre branco vira preto sobre preto, ou nada).
 * Classe + CSS é o caminho que funciona nos três motores. */
.staff-line { stroke: var(--line); fill: none; }
.staff-clef { fill: var(--ink); }
.note-head  { fill: var(--ink);   transition: fill .18s ease; }
.note-stem  { stroke: var(--ink); transition: stroke .18s ease; }
.note.is-lit .note-head { fill: var(--accent); }
.note.is-lit .note-stem { stroke: var(--accent); }
.note-label {
    font: 500 15px Inter, system-ui, sans-serif;
    fill: #7b8698;
    transition: fill .18s ease;
}
.note-label.is-lit { fill: var(--accent); font-weight: 600; }

/* — variação B: os degraus — */
.step-face {
    fill: #eef2f7; stroke: var(--line); stroke-width: 1.2;
    transition: fill .16s ease, stroke .16s ease;
}
.step-label {
    font: 600 16px Inter, system-ui, sans-serif;
    fill: var(--ink-soft);
    transition: fill .16s ease;
}
.step.is-lit .step-face  { fill: var(--accent); stroke: var(--accent); }
.step.is-lit .step-label { fill: #fff; }
[data-toy].is-wrong .step-face { stroke: #b06a4a; }

/* 🔴 Invariante 6: menos movimento = sem transição nenhuma. O brinquedo
 * continua inteiro — o que muda é cor de estado, que é instantânea. */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
    transition: none !important;
    animation: none !important;
}

/* ═══════════════════════════════════════════════ fim do componente ═════ */

/* Degraus da variação B no tema escuro: `#eef2f7` fixo viraria caixa clara
   sobre cartão escuro. Aqui a face segue a superfície do tema. */
.step-face{fill:var(--color-surface-2)}

/* Logo entregue pelo agente de marca (img/logo-mono.svg), inline como <use>.
   Altura fixa + width:auto: a razão do viewBox é 2,73:1 e não pode esticar. */
.logo-svg{height:26px;width:auto;color:var(--color-ink);flex:none}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);letter-spacing:.01em;color:var(--color-ink);line-height:1}
@media (max-width:420px){.logo-svg{height:22px}}

/* ── 20. GUIA PARA PROFESSORES (/professores/ · /for-teachers/ · /profesores/) ──
   23/Set/2026. Só o que a home não tinha: o passo com DUAS colunas (um app
   em cada), porque o percurso diverge no passo 3. Tudo o mais reusa .hero,
   .pcard, .bcard, .gcard, .honest. Celular primeiro: as colunas empilham. */
.gsteps{display:grid;gap:var(--space-8);counter-reset:g}
.gstep{position:relative;padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-rule);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);scroll-margin-top:84px}
.gstep::before{counter-increment:g;content:counter(g);position:absolute;top:-16px;left:var(--space-5);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--color-ink);color:var(--color-bg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700}
.gstep h3{margin:var(--space-2) 0;font-size:var(--text-2xl)}
.gstep > p{max-width:var(--prose);color:var(--color-ink-soft)}
.gapps{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.gapp{--ga:var(--color-accent);display:flex;flex-direction:column;padding:var(--space-4) var(--space-5);
  background:var(--color-bg);border:1px solid var(--color-rule);border-left:3px solid var(--ga);
  border-radius:0 var(--radius-md) var(--radius-md) 0}
.gapp--oa{--ga:var(--product-oa)}
.gapp--am{--ga:var(--product-ritmo)}
.gapp-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ga)}
.gapp-head .ico{width:1.125rem;height:1.125rem}
.gapp p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.gapp p b{color:var(--color-ink)}
.glink{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:auto;padding-top:var(--space-3);
  font-size:var(--text-sm);font-weight:500;color:var(--ga);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gstep .honest{margin-top:var(--space-5)}
.bcard a.who{text-decoration:underline;text-underline-offset:3px;color:var(--color-accent-ink)}
.gshare{display:inline-block;max-width:100%;margin-top:var(--space-2);padding:.55em .9em;border:1px dashed var(--color-rule);
  border-radius:var(--radius-md);background:var(--color-surface);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--text-sm);color:var(--color-ink);word-break:break-all;user-select:all}
/* Diapasão como guia (pedido do Bernardo, 24/Set/2026): os dois mascotes, cada
   um na paleta do SEU produto. width/height também no atributo do SVG — cinto
   contra CSS em cache. */
.dp{display:block;width:22px;height:auto;flex:none}
.pcard-icon .dp{width:26px}
.hero-logo{display:block;width:fit-content;padding:.7rem 1.1rem;margin-bottom:var(--space-6);background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lift)}
.hero-logo img{height:56px;width:auto}
@media (max-width:420px){.hero-logo img{height:44px}}
.gcard-logo img{width:auto;max-height:52px}
@media (max-width:420px){.gstep{padding:var(--space-5) var(--space-4)}.gapp{padding:var(--space-4)}}