/* Site da escola. Visual: Direção visual dos sites da Mob v1 (22/10/2026),
   §2 sistema compartilhado e §3 identidade da Allan School Music: preto,
   bordô #6e1830 e branco, o off-white #f4f1f2 do briefing num bloco de
   papel, raio 6, e as quatro pulseiras como linha de assinatura. Par da
   casa: Bricolage Grotesque (display) + Outfit (texto). Sem cartão, borda
   ou sombra em volta de foto ou de texto; a letra faz o trabalho. */

:root {
  --preto: #0a0a0b;
  --preto-2: #131315;
  --linha: #27272c;
  --branco: #fff;
  --texto: #e9e9ec;
  --cinza: #a3a3ab;
  --bordo: #6e1830;
  --bordo-vivo: #8a1f3c;
  --papel: #f4f1f2;
  --tinta: #171717;
  --tinta-2: #666;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --corpo: Outfit, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --raio: 6px;
  --g: 20px;
  --w: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font: 400 17px/1.5 var(--corpo);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  color: var(--branco);
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 3.8vw, 52px); font-weight: 600; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--g); }
:focus-visible { outline: 3px solid var(--bordo-vivo); outline-offset: 3px; }

/* Botão: 50 px, uma cor cheia (bordô), um de contorno; só o do WhatsApp
   leva ícone (.zap). No papel, o cheio é da tinta (.escuro). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 22px; border-radius: var(--raio);
  font: 600 16px/1 var(--corpo); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.btn.cheio { background: var(--bordo); color: var(--branco); }
.btn.cheio:hover { background: var(--bordo-vivo); }
.btn.contorno { border-color: #4a4a52; color: var(--branco); }
.btn.contorno:hover { border-color: var(--branco); }
.btn.escuro { background: var(--tinta); color: var(--branco); }
.btn.zap::before {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 12 12 0 0 0 4.6 4c.6.3 1.1.4 1.5.6a3.7 3.7 0 0 0 1.7.1 2.8 2.8 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 12 12 0 0 0 4.6 4c.6.3 1.1.4 1.5.6a3.7 3.7 0 0 0 1.7.1 2.8 2.8 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/></svg>") center / contain no-repeat;
}
.link {
  color: var(--branco); font-weight: 600; text-decoration: underline;
  text-underline-offset: 5px; text-decoration-color: var(--bordo-vivo); text-decoration-thickness: 2px;
}

/* A assinatura do site: as quatro pulseiras da ASM, na ordem, como linha
   de 5 px sob a capa e sobre o rodapé, e de 12 px na trilha de ensino. */
.pulseiras { display: grid; grid-template-columns: repeat(4, 1fr); height: 5px; }
.pulseiras i { display: block; }
.pulseiras .b { background: #f4f4f5; }
.pulseiras .c { background: #8a8a92; }
.pulseiras .r { background: var(--bordo-vivo); }
.pulseiras .p { background: #000; box-shadow: inset 0 0 0 1px #4a4a52; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 10, 11, 0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo .wrap { display: flex; align-items: center; gap: 10px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; min-width: 44px; }
.marca img { height: 40px; width: auto; }
.marca span { font: 700 18px var(--display); letter-spacing: -0.01em; color: var(--branco); white-space: nowrap; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.menu a { text-decoration: none; font: 500 15px var(--corpo); color: var(--cinza); padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; }
.menu a:hover { color: var(--branco); }
.menu a.ancora { display: none; }
.menu a.agendar {
  height: 42px; padding: 0 16px; margin-left: 6px; border-radius: var(--raio);
  background: var(--bordo); color: var(--branco); font-weight: 600; white-space: nowrap;
}
.menu a.agendar:hover { background: var(--bordo-vivo); }

/* Menu do celular e do tablet (abaixo de 1024 px): as mesmas âncoras do
   computador, numa gaveta que desce do topo. Funciona sem JavaScript
   (details); alvo de toque de 44 px. */
.menu-celular { display: block; }
.abre-menu {
  list-style: none; cursor: pointer; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--branco);
}
.abre-menu::-webkit-details-marker { display: none; }
.abre-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.abre-menu .xis, .menu-celular[open] .tracos { display: none; }
.menu-celular[open] .xis { display: inline; }
.menu-celular nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--preto); border-bottom: 1px solid var(--linha);
  padding: 6px max(var(--g), calc((100vw - var(--w)) / 2 + var(--g))) 16px;
  display: grid; max-height: calc(100vh - 66px); overflow-y: auto;
}
.menu-celular nav a {
  display: flex; align-items: center; min-height: 54px; text-decoration: none;
  font: 600 20px var(--display); color: var(--branco); border-bottom: 1px solid var(--linha);
}
.menu-celular nav a.menu-app { border-bottom: 0; font: 400 16px var(--corpo); color: var(--cinza); }

/* Capa: a foto do palco inteira, o lema embaixo à esquerda, escurecendo
   de baixo para cima. Único texto em cima de foto no site. */
.abertura { position: relative; min-height: clamp(560px, 92svh, 820px); display: grid; align-items: end; isolation: isolate; }
.abertura-foto, .abertura-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.abertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.1) 0%, rgba(10, 10, 11, 0.05) 35%, rgba(10, 10, 11, 0.78) 72%, var(--preto) 100%);
}
.abertura .wrap { padding-top: clamp(220px, 38vh, 340px); padding-bottom: 40px; display: grid; gap: 18px; }
.abertura h1 { font-size: clamp(42px, 7.6vw, 108px); font-weight: 700; max-width: 12ch; }
.abertura p { font-size: clamp(17px, 1.5vw, 21px); max-width: 56ch; color: var(--texto); }
.abertura .destaque { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--branco); }
.abertura .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.entra { animation: entra 0.55s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Seções: respiro vertical e a cabeça com 1 px na cor da tinta, o título
   à esquerda e um dado verdadeiro à direita. */
section.bloco { padding: clamp(56px, 8vw, 112px) 0; }
.cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--branco); }
.cabeca small { font: 600 13px var(--corpo); color: var(--cinza); }

/* Cursos: lista tipográfica, o nome do instrumento grande, uma linha à direita */
.cursos { list-style: none; padding: 0; margin: 0; display: grid; }
.intro { margin: 22px 0 8px; font-size: clamp(17px, 1.4vw, 19px); max-width: 62ch; }
.cursos li { display: grid; align-content: start; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.cursos b { font: 600 clamp(24px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -0.025em; color: var(--branco); }
.cursos span { color: var(--cinza); font-size: 15.5px; max-width: 46ch; }
.convite { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.convite p { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; color: var(--branco); }
.trilha { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 18px; max-width: 62ch; }
.trilha h3, .motivos h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 600; }
.trilha p { font-size: clamp(17px, 1.4vw, 19px); }
.trilha .lista { border-top: 1px solid var(--linha); }
.trilha .pulseiras { height: 12px; max-width: 520px; gap: 4px; }
.trilha ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 520px; font: 600 14px var(--corpo); color: var(--branco); }
.trilha ol span { display: block; font-weight: 400; font-size: 13px; color: var(--cinza); line-height: 1.3; margin-top: 2px; }
.trilha .fecho { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; color: var(--branco); }

/* Quem dá aula: entra quando a escola mandar foto e nome (ver index.html).
   Foto 4:5 sem moldura, nome em Bricolage, uma linha embaixo. */
.professores ul { list-style: none; padding: 0; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 4px; }
.professores picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--preto-2); margin-bottom: 10px; }
.professores img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.professores li:hover img { transform: scale(1.03); }
.professores b { display: block; font: 600 21px var(--display); color: var(--branco); letter-spacing: -0.01em; }
.professores span { color: var(--cinza); font-size: 15px; }

/* Eventos: o texto e os números do Sarau, depois uma foto grande e três
   em volta, encostadas (4 px de vão) */
#eventos { padding-top: 0; }
.palco { margin-top: 24px; display: grid; gap: 28px; }
.palco p { font-size: clamp(17px, 1.4vw, 19px); max-width: 60ch; }
.palco p + p { margin-top: 14px; }
.palco .lead { font: 600 clamp(21px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--branco); }
.palco .btn { margin-top: 22px; }
.numeros { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; align-self: start; color: var(--cinza); font-size: 16px; }
.numeros b { font: 600 clamp(48px, 6vw, 84px)/1 var(--display); letter-spacing: -0.04em; color: var(--branco); }
.numeros span { grid-column: 1 / -1; font-size: 14px; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 6px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 28px; }
.galeria picture { display: block; overflow: hidden; background: var(--preto-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.galeria picture:hover img { transform: scale(1.03); }
.g-auditorio { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.g-cantoras, .g-guitarras { aspect-ratio: 4 / 5; }
.g-plateia { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.g-cantoras img { object-position: 45% 50%; }
.g-guitarras img { object-position: 15% 50%; }
.g-plateia img { object-position: 50% 62%; }
.g-legenda { margin-top: 12px; color: var(--cinza); font-size: 14px; }

/* A escola: texto e as duas fotos em pé */
.escola { background: var(--preto-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.escola .wrap { display: grid; gap: 36px; }
.escola p { font-size: clamp(17px, 1.4vw, 19px); margin-top: 16px; max-width: 52ch; }
.escola .assina { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; color: var(--branco); }
.motivos { display: grid; gap: 18px; }
.motivos .lista { border-top: 1px solid var(--branco); }
.escola .tour-link { margin-top: 22px; display: grid; gap: 2px; }
.escola .tour-link a { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.escola .tour-link span { color: var(--cinza); font-size: 15px; }
.escola-midias { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: start; }
.escola-midias figure { display: grid; gap: 8px; }
.escola-midias > figure > picture, .tour-tela { display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--preto); }
.escola-midias img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.escola-midias figcaption { color: var(--cinza); font-size: 13.5px; }
.tour-tela { position: relative; }
.tour-tela picture { display: block; width: 100%; height: 100%; }
.tour-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tour-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--bordo); color: var(--branco); display: grid; place-items: center;
}
.tour-play:hover { background: var(--bordo-vivo); }
.tour-play[hidden] { display: none; }
.tour-play svg { width: 28px; height: 28px; margin-left: 4px; }

/* Como começar e onde fica: o bloco de papel (off-white do briefing) */
.experimental { background: var(--papel); color: var(--tinta); padding: clamp(56px, 8vw, 112px) 0; }
.experimental h2, .experimental h3 { color: var(--tinta); }
.experimental .wrap { display: grid; gap: 36px; }
.experimental .wrap > *, .palco > *, .motivos > * { min-width: 0; }
.experimental p { color: var(--tinta-2); }
.experimental .chamada { margin-top: 14px; max-width: 52ch; }
.experimental .forte { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; color: var(--tinta); }
.experimental .numero { font: 700 clamp(34px, 4.6vw, 64px)/1 var(--display); letter-spacing: -0.03em; color: var(--tinta); display: block; margin: 13px 0 9px; padding: 5px 0; text-decoration: none; }
.onde { display: grid; gap: 22px; border-top: 1px solid var(--tinta); padding-top: 22px; }
.onde h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.onde p { line-height: 1.6; }
.onde a { color: var(--tinta); }
/* Alvo de toque de 44 px sem mudar o desenho (Padrão de site v1, §4.1 regra 4).
   "Como chegar" é a última linha do endereço: o padding cresce a área para
   cima e para baixo sem mexer na linha. Em "Fale com a escola" os links ficam
   em linhas vizinhas, então cada linha passa a ter 44 px (a margem negativa
   devolve o respiro em cima e embaixo do bloco), e o e-mail longo quebra
   em vez de empurrar a página para o lado. */
.onde a.link { position: relative; padding-block: 12px; }
.onde .contatos { display: grid; margin-block: -8.5px; }
.onde .contatos span { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; }
.onde .contatos a { align-self: stretch; display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }

/* Curso online no app, na home */
.online .wrap { display: grid; gap: 30px; align-items: center; }
.online .lead { margin-top: 14px; color: var(--cinza); max-width: 46ch; }
.online .lead { max-width: 60ch; }
.online ul { list-style: none; padding: 0; margin: 22px 0 18px; border-top: 1px solid var(--linha); }
.online .fecho { font: 600 clamp(19px, 1.8vw, 23px)/1.25 var(--display); letter-spacing: -0.015em; color: var(--branco); margin-bottom: 24px; }
.online li { padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 17px; }
.online .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.no-celular { display: grid; justify-items: center; gap: 14px; color: var(--cinza); font-size: 14px; text-align: center; }
.no-celular img { width: 132px; border-radius: 30px; border: 1px solid var(--linha); }

/* Rodapé: quem é a escola (nome, CNPJ, endereço), os links e os documentos */
.rodape { border-top: 1px solid var(--linha); padding: 40px 0 0; color: var(--cinza); font-size: 14px; background: #050506; }
.rodape .wrap { display: grid; gap: 22px; }
.rodape-quem p { margin-top: 14px; line-height: 1.6; }
.rodape nav { display: grid; }
.rodape nav a { text-decoration: none; color: var(--texto); min-height: 44px; display: inline-flex; align-items: center; }
.rodape .feito { border-top: 1px solid var(--linha); padding: 16px 0 20px; font-size: 12.5px; color: #7a7a81; }
.rodape .feito a { color: #aaa; position: relative; padding-block: 14px; }

/* WhatsApp fixo no celular: da cor do site, com o ícone (site.js o mostra
   depois do herói e nunca por cima de outra ação) */
.zap-fixo { display: none; }

/* Página do curso online: a tela #curso-online do protótipo */
.venda-topo .wrap { display: grid; gap: 16px; padding-top: 40px; padding-bottom: 36px; }
.venda-topo .volta { text-decoration: none; color: var(--cinza); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.venda-topo h1 { font-size: clamp(38px, 5.6vw, 80px); font-weight: 700; }
.venda-topo .lead { font-size: clamp(17px, 1.5vw, 21px); max-width: 46ch; margin-top: 16px; }
.venda .wrap { display: grid; gap: 36px; padding-bottom: 80px; }
.venda .cabeca h2 { font-size: clamp(24px, 2.6vw, 34px); }
.venda section + section { margin-top: 48px; }
.venda section { scroll-margin-top: 76px; }
.plano { border: 1px solid var(--linha); border-top: 3px solid var(--bordo-vivo); padding: 24px; display: grid; gap: 10px; align-content: start; }
.plano h3 { font: 600 26px var(--display); color: var(--branco); letter-spacing: -0.02em; }
.plano .pendente { font: 600 15px var(--corpo); color: var(--cinza); border: 1px dashed #4a4a52; padding: 6px 10px; justify-self: start; border-radius: var(--raio); }
.plano p { color: var(--cinza); font-size: 15px; }
.plano .btn { width: 100%; margin-top: 6px; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 16px 0; border-bottom: 1px solid var(--linha); display: grid; gap: 4px; }
.lista b { font: 600 20px var(--display); color: var(--branco); letter-spacing: -0.015em; }
.lista span { color: var(--cinza); }
.ordem { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.ordem li { counter-increment: n; display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.ordem li::before { content: counter(n); grid-row: 1 / 3; font: 500 34px/1 var(--display); color: var(--bordo-vivo); }
.ordem b { font: 600 19px var(--display); color: var(--branco); }
.ordem span { color: var(--cinza); }
.duvidas details { border-bottom: 1px solid var(--linha); padding: 16px 0; }
.duvidas summary { cursor: pointer; font: 600 19px var(--display); color: var(--branco); list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; padding-block: 8px; margin-block: -8px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; color: var(--cinza); font-weight: 400; }
.duvidas details[open] summary::after { content: "\2212"; }
.duvidas p { color: var(--cinza); margin-top: 10px; max-width: 60ch; }

/* Termos e privacidade: texto corrido com o sumário ao lado no computador */
.doc { padding: 40px 0 64px; }
.doc .wrap { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: 48px; }
.doc h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 700; }
.doc .versao { color: var(--cinza); font-size: 15px; margin-top: 14px; }
.doc .sumario { display: none; position: sticky; top: 90px; align-self: start; flex-direction: column; border-left: 1px solid var(--linha); }
.doc .sumario a { text-decoration: none; color: var(--cinza); font-size: 15px; padding: 10.5px 0 10.5px 16px; margin-left: -1px; border-left: 1px solid transparent; }
.doc .sumario a:hover { color: var(--branco); border-left-color: var(--bordo-vivo); }
.doc h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: 44px; scroll-margin-top: 90px; }
.doc p, .doc li { color: var(--texto); font-size: 17px; margin-top: 12px; max-width: 68ch; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--branco); text-underline-offset: 3px; }
.doc .quem { margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--branco); border-bottom: 1px solid var(--linha); }
.doc .quem p { margin-top: 0; color: var(--cinza); font-size: 16px; }
.doc .quem b { color: var(--branco); font-weight: 600; }
.doc.sem-sumario .wrap { grid-template-columns: minmax(0, 720px); }
.doc .caminhos { margin-top: 24px; display: grid; border-top: 1px solid var(--branco); max-width: 520px; }
.doc .caminhos a { min-height: 54px; display: flex; align-items: center; border-bottom: 1px solid var(--linha); text-decoration: none; font: 600 20px var(--display); letter-spacing: -0.015em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { animation: none; }
  .galeria img, .professores img, .zap-fixo { transition: none; }
}

/* Celular e tablet em pé: o WhatsApp fixo e o rodapé com espaço para ele */
/* Celular: a foto do palco inteira em cima e o texto embaixo, no preto,
   para a manchete e o texto de apoio nunca caírem na parte clara da foto. */
@media (max-width: 719px) {
  .abertura { display: block; min-height: 0; }
  .abertura-foto { position: relative; display: block; height: min(64svh, 560px); min-height: 360px; }
  .abertura-foto img { position: absolute; inset: 0; }
  .abertura::after { bottom: auto; height: min(64svh, 560px); min-height: 360px; background: linear-gradient(180deg, rgba(10, 10, 11, 0.1) 0%, rgba(10, 10, 11, 0) 45%, var(--preto) 100%); }
  .abertura .wrap { position: relative; padding-top: 0; margin-top: -72px; }
  .btn { white-space: normal; height: auto; min-height: 50px; padding: 12px 20px; line-height: 1.2; text-align: center; }
}

@media (max-width: 899px) {
  .zap-fixo {
    display: flex; align-items: center; gap: 9px; position: fixed; right: 16px; bottom: 16px; z-index: 11;
    height: 50px; padding: 0 20px; background: var(--bordo); color: var(--branco); border-radius: var(--raio);
    font: 600 15px/1 var(--corpo); text-decoration: none;
  }
  .zap-fixo svg { width: 20px; height: 20px; }
  .zap-fixo { transition: opacity 0.2s, transform 0.2s; }
  .zap-fixo[data-escondido] { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
  .rodape .feito { padding-bottom: 90px; }
  .abertura .acoes .btn, .online .acoes .btn, .convite .btn, .palco .btn { flex: 1 1 100%; width: 100%; }
  .experimental .btn { width: 100%; }
}

/* Abaixo de 560 px o nome não cabe ao lado das portas do topo: fica a chama. */
@media (max-width: 559px) {
  .topo .marca span { display: none; }
  .menu a.entrar { font-weight: 600; color: var(--branco); font-size: 14px; padding: 0 8px; }
  .menu a.agendar { padding: 0 13px; font-size: 14px; }
}
@media (max-width: 379px) {
  .menu a.agendar { padding: 0 10px; margin-left: 2px; }
  .menu a.entrar { padding: 0 6px; }
}

/* Tablet e computador */
@media (min-width: 720px) {
  :root { --g: 32px; }
  .cursos { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .professores ul { grid-template-columns: repeat(4, 1fr); }
  .galeria { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; }
  .g-auditorio { grid-column: 1 / 7; grid-row: 1 / 3; aspect-ratio: auto; }
  .g-cantoras { grid-column: 7 / 10; aspect-ratio: auto; }
  .g-guitarras { grid-column: 10 / 13; aspect-ratio: auto; }
  .g-plateia { grid-column: 7 / 13; aspect-ratio: auto; }
  .escola .wrap { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .motivos { grid-column: 1 / -1; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
  .palco { grid-template-columns: 1.5fr 1fr; gap: 56px; }
  .experimental .wrap { grid-template-columns: 1fr 1fr; gap: 56px; }
  .onde { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 32px; }
  .online .wrap { grid-template-columns: 1fr auto; gap: 64px; }
  .rodape .wrap { grid-template-columns: 1fr auto; gap: 24px 48px; }
  .rodape nav { grid-auto-flow: column; gap: 22px; }
  .rodape nav a { padding-inline: 6px; margin-inline: -6px; justify-content: center; }
  .rodape .feito { grid-column: 1 / -1; }
  .venda .wrap { grid-template-columns: 1.3fr 0.7fr; column-gap: 56px; align-items: start; }
  .plano { position: sticky; top: 90px; }
  .doc { padding: 56px 0 84px; }
  .doc .wrap { grid-template-columns: 220px minmax(0, 720px); gap: 56px; }
  .doc .sumario { display: flex; }
}

/* Computador: as âncoras cabem no topo, o menu do celular sai */
@media (min-width: 1024px) {
  :root { --g: 40px; }
  .menu a.ancora { display: inline-flex; }
  .menu-celular { display: none; }
  .galeria { grid-auto-rows: 260px; }
}