/* ============================================================
 *  ESTILO.CSS — visual do Harpa Cifrada
 * ============================================================
 *  1. PALETA  ← troque aqui as cores do O Gospel (o resto se ajusta)
 *  2. Base e tipografia
 *  3. Topo e rodapé
 *  4. Listas, chips, busca (home/temas)
 *  5. Página do hino: cabeçalho, painel, cifra
 *  6. Blocos extras: resumo, vídeo, FAQ, navegação
 *  7. Novidades: menu, hino do dia, populares, diagramas, barra rápida, filtro
 *  8. Cara de app: abas, barra fixa do hino, player, transições
 *  9. Impressão
 * ============================================================ */

/* ---------- 1. PALETA ---------- */
:root {
  --marca: #23b38a;          /* cor principal do O Gospel (botões, links, destaques) */
  --marca-texto: #06251c;    /* texto em cima da cor principal */
  --acorde: #ff7a6b;         /* cor dos acordes */
  --fundo: #11151c;          /* fundo da página */
  --cartao: #1a2029;         /* fundo dos blocos */
  --cartao-2: #232b36;       /* botões e campos */
  --texto: #e9edf2;
  --suave: #9aa6b5;          /* textos secundários */
  --linha: #2c3542;          /* bordas */
  --raio: 16px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}
/* Modo claro automático (segue a configuração do celular/computador) */
@media (prefers-color-scheme: light) {
  :root {
    --marca: #138a68; --marca-texto: #fff; --acorde: #d2412f;
    --fundo: #f5f6f8; --cartao: #fff; --cartao-2: #eef1f4;
    --texto: #18202a; --suave: #5d6978; --linha: #dfe3e8;
    color-scheme: light;
  }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.6 var(--fonte); }
a { color: var(--marca); text-underline-offset: 3px; }
h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); line-height: 1.2; margin: .2em 0 .4em; }
h1 small { display: block; font-size: .5em; font-weight: 500; color: var(--suave); margin-top: .3em; }
h2 { font-size: 1.2rem; margin: 2rem 0 .8rem; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--marca); color: var(--marca-texto); padding: .5rem 1rem; border-radius: 8px; }
.pagina { max-width: 860px; margin: 0 auto; padding: 1rem 16px 3rem; }
.intro { color: var(--suave); }

/* ---------- 3. TOPO E RODAPÉ ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 860px; margin: 0 auto; padding: .6rem 16px; display: flex; gap: .8rem; align-items: center; }
.logo { display: flex; align-items: center; gap: .5rem; color: var(--texto); text-decoration: none; flex-shrink: 0; }
.logo-icone { width: 36px; height: 36px; border-radius: 11px; display: block; flex: none; }
.logo-txt { line-height: 1.1; font-size: 1rem; }
.logo-txt small { display: block; font-size: .7rem; color: var(--suave); }
.busca-topo { flex: 1; display: flex; background: var(--cartao-2); border-radius: 999px; overflow: hidden; min-width: 0; }
.busca-topo input { flex: 1; min-width: 0; border: 0; background: none; padding: .55rem 1rem; }
.busca-topo input:focus { outline: none; }
.busca-topo button { border: 0; background: none; padding: 0 .9rem; color: var(--suave); }

.rodape { border-top: 1px solid var(--linha); color: var(--suave); font-size: .9rem; }
.rodape-in { max-width: 860px; margin: 0 auto; padding: 1.5rem 16px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .8rem 0; }
.rodape-pe { font-size: .8rem; }

/* ---------- 4. HOME, LISTAS, BUSCA ---------- */
.hero { text-align: center; padding: 2rem 0 1rem; }
.hero-sub { color: var(--suave); max-width: 560px; margin: 0 auto 1.2rem; }
.hero-dica { color: var(--suave); font-size: .85rem; }
.busca-grande { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto 1rem; }
.busca-grande input { flex: 1; min-width: 0; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--cartao); font-size: 1.05rem; }
.busca-grande button, .botao { border: 0; border-radius: 14px; padding: 0 1.3rem; background: var(--marca); color: var(--marca-texto); font-weight: 700; text-decoration: none; display: inline-grid; place-items: center; min-height: 48px; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .45rem .9rem; border-radius: 999px; background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; font-size: .92rem; }
.chip span { color: var(--suave); font-size: .8em; margin-left: .2rem; }

.lista-hinos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lista-hinos a { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.lista-hinos a:hover { border-color: var(--marca); transform: translateY(-1px); }
.ln { min-width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; background: var(--cartao-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.lt { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.lt small { display: block; font-weight: 400; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk { color: var(--acorde); font-weight: 700; font-size: .9rem; }

.texto-seo { color: var(--suave); }
.texto-seo strong { color: var(--texto); }
.trilha { font-size: .85rem; color: var(--suave); margin-bottom: .6rem; }
.trilha a { color: var(--suave); }

/* ---------- 5. PÁGINA DO HINO ---------- */
.hino-topo { display: flex; gap: .9rem; align-items: center; margin-bottom: 1rem; }
.hino-topo h1 { margin: 0; }
.hino-num { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--marca); color: var(--marca-texto); font-size: 1.6rem; font-weight: 800; }
.hino-sub { margin: .2rem 0 0; color: var(--suave); font-size: .92rem; }
.hino-acoes { margin-left: auto; display: flex; gap: .5rem; align-self: flex-start; }
@media (max-width: 560px) {
  .hino-topo { flex-wrap: wrap; }
  .hino-num { width: 52px; height: 52px; font-size: 1.3rem; }
  .hino-topo > div:not(.hino-acoes) { flex: 1; min-width: 0; }
  .hino-acoes { margin-left: 0; width: 100%; justify-content: flex-end; margin-top: -.4rem; }
}

/* Botões redondos (como no app de referência) */
.bt-redondo { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--cartao-2); display: grid; place-items: center; font-weight: 700; font-size: 1rem; transition: transform .1s, background .15s; }
.bt-redondo:active { transform: scale(.92); }
.bt-redondo svg { width: 22px; height: 22px; fill: currentColor; }
.bt-redondo.pequeno { width: 44px; height: 44px; font-size: .9rem; }
.bt-destaque { background: var(--marca); color: var(--marca-texto); }
.bt-redondo[aria-pressed="true"] { background: var(--acorde); color: #fff; }

/* Painel de ajustes */
.painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.painel-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.painel-rotulo { font-weight: 600; }
.tom-atual { color: var(--acorde); font-size: 1.25rem; margin-left: .3rem; }
.grupo { display: flex; gap: .5rem; }
.tons { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
.tons button { flex: 0 0 auto; min-width: 46px; height: 40px; padding: 0 .6rem; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao-2); font-weight: 700; }
.tons button:first-child { border-color: var(--marca); }
.tons button[aria-pressed="true"] { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.painel-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.campo { display: grid; gap: .3rem; font-size: .9rem; color: var(--suave); }
.campo select { height: 44px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao-2); padding: 0 .6rem; color: var(--texto); }
.pilulas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pilula { border: 1px solid var(--linha); background: transparent; border-radius: 999px; padding: .5rem .95rem; font-size: .9rem; color: var(--marca); font-weight: 600; }
.pilula[aria-pressed="true"] { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }

/* A CIFRA
 * Cada pedaço da letra é uma "pilha": acorde em cima, sílaba embaixo.
 * Assim o acorde nunca sai do lugar, mesmo quando a linha quebra no celular. */
.cifra { --escala: 1; background: var(--cartao); border-radius: var(--raio); padding: 1.2rem 1rem; font-size: calc(1.06rem * var(--escala)); line-height: 1.35; overflow-wrap: anywhere; }
.cf-linha { margin: 0 0 .35rem; }

/* Estrofes numeradas e coro destacado */
.cf-estrofe { display: flex; gap: .7rem; margin: 0 0 1.4rem; }
.cf-num { flex: 0 0 auto; width: 1.7em; height: 1.7em; margin-top: .55em; border-radius: 50%; display: grid; place-items: center; background: var(--cartao-2); color: var(--suave); font-size: .8em; font-weight: 800; font-variant-numeric: tabular-nums; }
.cf-linhas { flex: 1; min-width: 0; }
.cf-coro { margin: 0 0 1.4rem; padding: .7rem .9rem .5rem; border-left: 4px solid var(--marca); border-radius: 4px var(--raio) var(--raio) 4px; background: color-mix(in srgb, var(--marca) 11%, transparent); }
.cf-coro .cf-secao { margin: 0 0 .4rem; color: var(--marca); }
.cf-outro { margin: 0 0 1.4rem; }
@media (max-width: 480px) { .cf-estrofe { gap: .5rem; } .cf-num { width: 1.5em; height: 1.5em; } }
.seg { display: inline-flex; flex-direction: column; vertical-align: bottom; }
.seg .tx { white-space: pre-wrap; }
.acs { display: flex; gap: .55em; padding-right: .4em; min-height: 1.3em; white-space: nowrap; }
.ac { color: var(--acorde); font-weight: 700; min-height: 1.3em; white-space: nowrap; }
.cf-intro .ac { padding-right: .8em; }
/* Traço de ligação: aparece só quando o acorde é mais largo que a sílaba, para a palavra não parecer partida */
.tx.cont { display: flex; }
.lig { flex: 1 1 0; min-width: 0; opacity: .4; background: linear-gradient(currentColor, currentColor) center / calc(100% - .35em) 1px no-repeat; }
.sem-acorde .acs { display: none; }      /* linha sem acordes não reserva espaço em cima */
.cf-espaco { height: 1rem; }
.cf-secao { margin: .8rem 0 .4rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; font-size: .8em; }
.cf-intro { margin: 0 0 1rem; }
.cf-rotulo { color: var(--suave); margin-right: .4em; }

/* Barra flutuante da rolagem */
.rolagem { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: .4rem; background: var(--cartao-2); border: 1px solid var(--linha); border-radius: 999px; padding: .35rem; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.rolagem button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--cartao); font-weight: 700; }
.rolagem span { font-size: .85rem; padding: 0 .4rem; white-space: nowrap; }
.rolagem[hidden] { display: none; }

/* ---------- 6. EXTRAS ---------- */
.anuncio { margin: 1.5rem 0; min-height: 100px; }   /* altura reservada: evita a página "pular" (CLS) */
.resumo dl { margin: 0; display: grid; gap: .5rem; }
.resumo dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; padding: .6rem .9rem; background: var(--cartao); border-radius: 10px; }
.resumo dt { color: var(--suave); }
.resumo dd { margin: 0; font-weight: 600; }
@media (max-width: 480px) { .resumo dl > div { grid-template-columns: 1fr; gap: .1rem; } }

.video-lite { position: relative; display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; border-radius: var(--raio); overflow: hidden; background: #000; }
.video-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.video-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; background: #e62117; color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.video-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--raio); }

.faq details { background: var(--cartao); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .5rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: .6rem 0 0; color: var(--suave); }

.cta-curso { margin: 1.5rem 0; padding: 1.2rem; border-radius: var(--raio); background: color-mix(in srgb, var(--marca) 16%, var(--cartao)); border: 1px solid var(--marca); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cta-curso p { margin: 0; flex: 1 1 260px; font-weight: 600; }

.navega { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; margin: 2rem 0; }
.navega-bt { padding: .8rem; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; font-weight: 600; text-align: center; }
.ir-para { display: flex; gap: .3rem; }
.ir-para input { width: 4.5rem; height: 46px; text-align: center; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); }
.ir-para button { height: 46px; padding: 0 .9rem; border-radius: 12px; border: 0; background: var(--marca); color: var(--marca-texto); font-weight: 700; }

.aviso { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 50; background: var(--texto); color: var(--fundo); padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600; animation: surge .2s ease-out; }
@keyframes surge { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 7. NOVIDADES ---------- */

/* Menu do topo (links editáveis em templates/partes/topo.php) */
.menu { max-width: 860px; margin: 0 auto; padding: 0 16px .5rem; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: 0 0 auto; padding: .3rem .8rem; border-radius: 999px; color: var(--suave); text-decoration: none; font-size: .88rem; font-weight: 600; }
.menu a:hover { background: var(--cartao-2); color: var(--texto); }

/* Hino do dia */
.hino-dia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--raio); background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 22%, var(--cartao)), var(--cartao)); border: 1px solid color-mix(in srgb, var(--marca) 50%, var(--linha)); }
.hino-dia > div { flex: 1 1 240px; min-width: 0; }
.hino-dia p { margin: 0; }
.hino-dia-rotulo { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--marca); }
.hino-dia-nome { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.hino-dia-sub { color: var(--suave); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Populares / ranking */
.ver-mais { margin: .8rem 0 0; font-weight: 600; }
.ranking { counter-reset: pos; padding: 0; margin: 0; }
.ranking li { counter-increment: pos; position: relative; }
.ranking li::before { content: counter(pos); position: absolute; top: -7px; left: -5px; z-index: 1; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--marca); color: var(--marca-texto); }

/* Filtro da lista */
.filtro { width: 100%; margin: 0 0 .8rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); }
.filtro-vazio { color: var(--suave); }
li[hidden] { display: none; }
#instalar { margin-top: .4rem; }

/* Dica de capo e dica de toque */
.dica-capo { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--marca) 14%, var(--cartao-2)); font-size: .92rem; }
.dica-capo[hidden], .dica-toque[hidden] { display: none; }
.dica-capo span { flex: 1 1 220px; }
.dica-toque { margin: 0 0 .5rem; color: var(--suave); font-size: .85rem; }
.ac[role="button"] { cursor: pointer; border-radius: 4px; }
.ac[role="button"]:hover, .ac[role="button"]:focus-visible { background: color-mix(in srgb, var(--acorde) 18%, transparent); }

/* Barra rápida (tom + rolagem sempre à mão) */
.barra-rapida { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--cartao-2); border: 1px solid var(--linha); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.barra-rapida[hidden] { display: none; }
.barra-rapida button { min-width: 46px; height: 46px; border-radius: 999px; border: 0; background: var(--cartao); font-weight: 700; }
.barra-rapida span { padding: 0 .5rem; font-size: .9rem; white-space: nowrap; }
.barra-rapida strong { color: var(--acorde); }
.rolagem:not([hidden]) ~ .barra-rapida, .barra-rapida:has(~ .rolagem:not([hidden])) { display: none; }

/* Janela do diagrama de acorde */
.modal-acorde { width: min(92vw, 380px); border: 1px solid var(--linha); border-radius: 20px; padding: 1rem 1.2rem 1.2rem; background: var(--cartao); color: var(--texto); }
.modal-acorde::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
.modal-topo h2 { margin: 0; font-size: 1.6rem; color: var(--acorde); }
.modal-abas { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .25rem; border-radius: 12px; background: var(--cartao-2); margin-bottom: .8rem; }
.modal-abas button { border: 0; border-radius: 9px; padding: .55rem; background: none; font-weight: 700; color: var(--suave); }
.modal-abas button[aria-selected="true"] { background: var(--marca); color: var(--marca-texto); }
#modal-acorde-corpo { display: grid; justify-items: center; min-height: 190px; align-content: center; }
.modal-legenda { margin: .4rem 0 0; font-size: .8rem; color: var(--suave); text-align: center; }
.modal-notas { margin: .8rem 0 0; text-align: center; font-weight: 700; }

.diag-violao { width: 190px; height: auto; }
.diag-linha { stroke: var(--suave); stroke-width: 1.2; }
.diag-pestana-nut { stroke: var(--texto); stroke-width: 4; }
.diag-dedo { fill: var(--marca); }
.diag-pestana { fill: var(--marca); }
.diag-solta { fill: none; stroke: var(--texto); stroke-width: 1.6; }
.diag-marca { fill: var(--suave); font-size: 16px; font-weight: 700; }
.diag-num { fill: var(--suave); font-size: 13px; font-weight: 700; }
.diag-teclado { width: 100%; max-width: 340px; height: auto; }
.tecla-branca { fill: #f5f6f8; stroke: #8a94a3; stroke-width: 1; }
.tecla-preta { fill: #1b222c; }
.tecla-branca.acesa, .tecla-preta.acesa { fill: var(--marca); }
.tecla-branca.acesa.raiz, .tecla-preta.acesa.raiz { fill: var(--acorde); }
.tecla-branca.acesa.baixo, .tecla-preta.acesa.baixo { fill: #e8b931; }

/* ---------- 8. CARA DE APP ---------- */

/* Transição suave entre páginas (Chrome/Edge/Safari novos; nos outros, ignora) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

:root { --topo-h: 58px; --aba-h: 64px; }
html { scroll-padding-top: calc(var(--topo-h) + 70px); }
body { -webkit-tap-highlight-color: transparent; }
button, .botao, .pilula, a.pilula-ouvir, .barra-app a { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:active:not(:disabled), .botao:active { transform: scale(.96); }

/* Topo respeita o "notch" do celular quando instalado como app */
.topo { padding-top: env(safe-area-inset-top); }

/* BARRA FIXA DO HINO: tom, rolagem, ouvir e ajustes — colada abaixo do topo */
.hino-barra { position: sticky; top: var(--topo-h); z-index: 15; margin: 0 -16px 1rem; padding: .5rem 16px; background: color-mix(in srgb, var(--fundo) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.hino-barra[hidden] { display: none; }
.barra-linha { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.barra-tom { display: flex; align-items: center; gap: .35rem; background: var(--cartao); border: 1px solid var(--linha); border-radius: 999px; padding: .2rem; }
.barra-tom-rot { padding: 0 .3rem; font-size: .85rem; color: var(--suave); white-space: nowrap; }
.barra-tom-rot .tom-atual { font-size: 1.05rem; margin-left: .15rem; }
.barra-acoes { display: flex; align-items: center; gap: .35rem; }
.barra-acoes .bt-redondo { background: var(--cartao); border: 1px solid var(--linha); position: relative; }
.bt-redondo.pequeno svg { width: 20px; height: 20px; }
.pilula-ouvir { display: inline-flex; align-items: center; gap: .35rem; height: 44px; padding: 0 .95rem 0 .75rem; border-radius: 999px; border: 0; background: #e62117; color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; }
.pilula-ouvir svg { width: 20px; height: 20px; fill: currentColor; }
.pilula-ouvir[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
/* bolinha avisando que há uma dica (capo) dentro dos ajustes */
.bt-redondo.ponto::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--acorde); border: 2px solid var(--cartao); }
.painel[hidden] { display: none; }

/* Player do YouTube fixo no topo */
.player { position: relative; margin-top: .5rem; }
.player[hidden] { display: none; }
#player-corpo { width: min(100%, 320px); margin: 0 auto; }
#player-corpo .video-frame { border-radius: 14px; background: #000; }
.player-capa { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16/9; }
.player-capa img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.player-play { position: absolute; inset: 0; display: grid; place-items: center; }
.player-play svg { width: 64px; height: 64px; padding: 16px 12px 16px 20px; box-sizing: border-box; border-radius: 50%; background: #e62117; fill: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.player-fechar { position: absolute; top: 6px; right: max(6px, calc(50% - 154px)); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .9rem; }

/* Página de favoritos vazia */
.vazio { padding: 1.5rem; border-radius: var(--raio); background: var(--cartao); border: 1px dashed var(--linha); color: var(--suave); text-align: center; }
.vazio[hidden] { display: none; }

/* ABAS DO APP (só no celular) */
.barra-app { display: none; }
@media (max-width: 720px) {
  .menu { display: none; }                                   /* o menu do topo vira abas no rodapé */
  body { padding-bottom: calc(var(--aba-h) + env(safe-area-inset-bottom)); }
  .rodape { padding-bottom: .5rem; }
  .barra-app { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cartao) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linha); }
  .barra-app a { display: grid; justify-items: center; gap: .15rem; padding: .35rem 0; border-radius: 14px; color: var(--suave); text-decoration: none; font-size: .72rem; font-weight: 600; }
  .barra-app svg { width: 24px; height: 24px; fill: currentColor; }
  .barra-app a.ativa { color: var(--marca); }
  .barra-app a.ativa svg { transform: translateY(-1px) scale(1.08); }
  /* o que flutua embaixo sobe para não ficar atrás das abas */
  .rolagem { bottom: calc(var(--aba-h) + 12px + env(safe-area-inset-bottom)); }
  .aviso { bottom: calc(var(--aba-h) + 70px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) { .hino-barra { margin: 0 0 1rem; border-radius: 14px; border: 1px solid var(--linha); top: calc(var(--topo-h) + 8px); } }

/* ---------- 9. IMPRESSÃO: só a cifra, em preto e branco ---------- */
@media print {
  .topo, .rodape, .painel, .hino-barra, .barra-app, .player, .barra-rapida, .modal-acorde, .dica-capo, .dica-toque, .hino-dia, .populares, .hino-acoes, .rolagem, .anuncio, .video, .faq, .cta-curso, .navega, .relacionados, .trilha, .resumo { display: none !important; }
  body, .cifra { background: #fff; color: #000; }
  .cifra { padding: 0; font-size: 12pt; }
  .ac { color: #000; }
  .cf-coro { background: none; border-left: 3px solid #000; }
  .cf-num { background: none; border: 1px solid #000; color: #000; }
  .hino-num { background: none; color: #000; border: 2px solid #000; }
}