/* ═══════════════════════════════════════════════════════════════
   cancao-verdadeira-child/assets/css/cv-ajustes.css
   Projeto: Canção Verdadeira — Plataforma de letras musicais sertanejas
   Ajustes visuais pedidos pelo usuário em 23/09/2026 (tema v15.3.0).
   Carregado DEPOIS de cv-components.css, para não mexer nos três
   arquivos CSS protegidos (cv-variables, cv-layout, cv-components).
   1) Player do rodapé em tom escuro (marrom café), com texto creme.
   2) Logo da marca maior e centralizado no topo do menu lateral.
   3) Hero da marca e cards "Em breve" (home e 404) — v15.5.0.
   4) Busca avançada, resultados e página 404 — v15.5.0.
   5) v15.11.0: resultados da busca lateral com fundo sólido; rótulos e
      botões dos formulários (Ultimate Member) visíveis e nas cores da marca.
   6) v15.13.0: botões oficiais das redes sociais (cor da marca + ícone branco).
   7) v15.14.0: rodapé com texto claro sobre o marrom; banner da marca nas
      páginas internas (.cv-hero--pagina).
   8) v15.16.0: rodapé com 4 colunas (nova coluna "Apoie").
   9) v15.17.0: botão "🛍️ Loja" em destaque no menu lateral.
  10) v15.20.0: busca dentro do banner; cartões com "▶ Tocar" e "🎬 Ver clipe";
      botão de playlist pública/privada.
  11) v15.21.0: contraste AA (texto claro #735442; laranja #FFC24D sobre o
      marrom) e o tamanho da letra ajustável (A− / A+).
  14) v15.22.0: "💌 Ofereça esta música" (cartão, janela e faixa de dedicatória).
  32) v15.41.0: página "Playlists da Comunidade" (cartão compacto na v15.42.0).
  31) v15.40.0: topo da página inicial um pouco mais baixo no computador.
  30) v15.39.0: perfil do ouvinte — Cidade, Estado, "Como conheci" (letra maior).
  27) v15.37.0: tela Entrar com letra maior e botão "Mostrar" nas senhas.
  26) v15.36.0: Minha Área no celular (números em 2 colunas).
  25) v15.35.0: formulários do Ultimate Member maiores (Cadastro, Login, Conta).
  24) v15.34.0: página "Como assinar pelo gov.br" (/assinar-gov-br/).
  23) v15.33.0: player do rodapé no celular (nada fora da tela).
  22) v15.32.0: topo da página inicial mais baixo no celular (1º cartão na 1ª tela).
  21) v15.30.0: "✨ Novidades para você" e âncoras da página da música (janela em v15.31.0).
  20) v15.27.0: home com linhas de 4 cartões (Favoritas, Mais tocadas, Melhor avaliadas).
  19) v15.26.0: página "🎤 Para artistas" (/artista/) e o botão verde do WhatsApp.
  18) v15.25.0: "💬 O que os ouvintes sentiram" (cartões e formulário).
  17) v15.24.0: "🎤 Cantar junto" (letra em tela cheia, estrofe atual em destaque);
      v15.24.1: tela clara, só a estrofe atual escura.
  16) v15.23.0: "🎸 Cifra simples" (partes do claro ao escuro, na paleta).
  15) v15.22.1: topo da 404 sem vazar para trás do menu lateral (coluna do
      texto flexível e margem esquerda maior), em telas de 1200 a 1450 px.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Player escuro ──────────────────────────────────────────
   Redefine os tokens só dentro do player: os estilos inline do
   template (var(--cv-text-dim) etc.) acompanham automaticamente. */
.cv-player {
    --cv-text:        #FBF6EE;
    --cv-text-muted:  rgba(251, 246, 238, 0.78);
    --cv-text-dim:    rgba(251, 246, 238, 0.55);
    --cv-bg-elevated: rgba(255, 255, 255, 0.08);
    --cv-border:      rgba(255, 255, 255, 0.12);
    background: linear-gradient(90deg, #3B2418 0%, #2B1A11 100%);
    border-top: 1px solid rgba(242, 165, 26, 0.35);
    box-shadow: 0 -6px 24px rgba(43, 26, 17, 0.25);
    color: var(--cv-text);
}
.cv-player .cv-player-btn { color: var(--cv-text-muted); }
.cv-player .cv-player-btn:hover { color: #FFFFFF; }
.cv-player .cv-player-btn.primary { color: #3B2418; }
.cv-player .cv-player-bar { background: rgba(255, 255, 255, 0.16); }
.cv-player .cv-player-volume input[type="range"] { accent-color: var(--cv-accent); }

/* ── 2. Logo do menu lateral ─────────────────────────────────── */
.cv-sidebar-logo {
    padding: 18px 16px 16px;
    text-align: center;
}
.cv-sidebar-logo a {
    display: flex;
    justify-content: center;
}
.cv-sidebar-logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
/* Barra do topo no celular: logo um pouco maior */
.cv-topbar-logo img { height: 42px; border-radius: 6px; }

/* ── 3. Hero da marca (home e 404) ───────────────────────────── */
/* Hero com a marca (v15.3.0): duas colunas centralizadas — texto à esquerda,
   logo à direita — sem o vão grande entre eles. Um brilho laranja suave atrás
   do logo dá profundidade sem esconder o creme do tema. */
.cv-hero--marca {
    display: grid;
    grid-template-columns: max-content minmax(240px, 340px);
    justify-content: center;
    align-items: center;
    gap: 40px;
    min-height: 0;
    padding: 56px 36px 48px;
    background:
        radial-gradient(ellipse 420px 300px at 78% 50%, rgba(242,165,26,0.16), transparent 70%),
        linear-gradient(180deg, var(--cv-bg-elevated) 0%, var(--cv-bg) 100%);
    border-bottom: 1px solid var(--cv-border-subtle);
}
.cv-hero--marca .cv-hero-content { padding: 0; max-width: none; }
.cv-hero--marca .cv-hero-title {
    font-size: clamp(36px, 3.4vw, 60px);
    white-space: nowrap;
    margin-bottom: 12px;
}
.cv-hero-title-destaque { color: var(--cv-gold); }
.cv-hero--marca .cv-hero-subtitle { font-size: 20px; margin-bottom: 26px; }
.cv-hero-marca {
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* Telas médias: o título pode quebrar em duas linhas, logo menor */
@media (max-width: 1200px) {
    .cv-hero--marca { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 28px; }
    .cv-hero--marca .cv-hero-title { white-space: normal; font-size: clamp(34px, 4.2vw, 48px); }
}
/* Celular: logo em cima, centralizado; texto embaixo */
@media (max-width: 768px) {
    .cv-hero--marca {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 16px 32px;
        background: linear-gradient(180deg, var(--cv-bg-elevated) 0%, var(--cv-bg) 100%);
    }
    .cv-hero--marca .cv-hero-marca { order: -1; width: 220px; margin: 0 auto; }
    .cv-hero--marca .cv-hero-title { font-size: 32px; }
    .cv-hero--marca .cv-hero-subtitle { font-size: 16px; }
}

/* Cards "Em breve" (seções ainda sem conteúdo) */
.cv-card-breve { background: var(--cv-bg-card); border: 1px dashed var(--cv-border); border-radius: var(--cv-radius); overflow: hidden; }
.cv-card-breve-capa { aspect-ratio: 1; background: linear-gradient(135deg, var(--cv-bg-elevated), var(--cv-bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cv-card-breve-post .cv-card-breve-capa { aspect-ratio: 16/9; }
.cv-card-breve-icone { font-size: 34px; opacity: .55; }
.cv-card-breve-selo { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cv-gold); background: var(--cv-bg-card); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-full); padding: 3px 12px; }
.cv-card-breve-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cv-card-breve-linha { display: block; height: 10px; border-radius: 5px; background: var(--cv-bg-elevated); }
.cv-card-breve-linha.is-curta { width: 60%; }
@media (min-width: 769px) {
    .cv-blog-grid-home, .cv-em-breve-grid.cv-blog-grid { grid-template-columns: repeat(3, 1fr); }
    /* v15.52.0: na página inicial o Blog tem 4 por linha, como as outras seções */
    .cv-blog-grid.cv-blog-grid-home, .home .cv-em-breve-grid.cv-blog-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* ── 4. Busca avançada (página de busca e 404) ───────────────── */
.cv-busca-hero {
    padding: 44px 36px 32px;
    text-align: center;
    background: linear-gradient(180deg, var(--cv-bg-elevated) 0%, var(--cv-bg) 100%);
    border-bottom: 1px solid var(--cv-border-subtle);
}
.cv-busca-hero h1 { font-family: var(--font-display); font-size: 34px; margin: 0 0 6px; color: var(--cv-text); }
.cv-busca-hero h1 span { color: var(--cv-gold); }
.cv-busca-hero > p { color: var(--cv-text-muted); font-family: var(--font-body); font-style: italic; font-size: 16px; margin: 0 0 22px; }

.cv-busca-avancada { max-width: 680px; margin: 0 auto; text-align: left; }
.cv-busca-campo { position: relative; }
.cv-busca-campo .cv-input { width: 100%; font-size: 16px; padding: 15px 56px 15px 18px; border-radius: var(--cv-radius); box-shadow: var(--cv-shadow-card); }
.cv-busca-lupa {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: var(--cv-accent); color: #3B2418; border: none; border-radius: var(--cv-radius-sm);
    padding: 8px 14px; font-size: 16px; cursor: pointer;
}
.cv-busca-campo .cv-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px; }
.cv-busca-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; margin-top: 14px; }
.cv-busca-filtro { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--cv-text-dim); }
.cv-busca-filtro select {
    width: auto; min-width: 150px; padding: 9px 12px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400;
    background: var(--cv-bg-card); color: var(--cv-text); border: 1px solid var(--cv-border); border-radius: var(--cv-radius-sm);
}
.cv-autocomplete-all { justify-content: center; font-weight: 700; color: var(--cv-gold); border-top: 1px solid var(--cv-border-subtle); }

.cv-busca-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px; }
.cv-busca-cabecalho h2 { font-family: var(--font-display); font-size: 22px; margin: 0; color: var(--cv-text); }
.cv-busca-cabecalho h2 span { color: var(--cv-gold); }
.cv-busca-cabecalho h2 small { font-family: var(--font-body); font-size: 14px; color: var(--cv-text-muted); font-weight: 400; margin-left: 6px; }
.cv-busca-total { font-size: 13px; color: var(--cv-text-dim); }
.cv-busca-blog { margin-top: 36px; }

.cv-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cv-resultado {
    display: flex; gap: 14px; padding: 12px; text-decoration: none; color: inherit;
    background: var(--cv-bg-card); border: 1px solid var(--cv-border); border-radius: var(--cv-radius);
    box-shadow: var(--cv-shadow-card); transition: transform .2s, border-color .2s;
}
.cv-resultado:hover { transform: translateY(-2px); border-color: var(--cv-border-hover); }
.cv-resultado-capa {
    flex: 0 0 76px; height: 76px; border-radius: var(--cv-radius-sm); background: var(--cv-bg-elevated) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.cv-resultado-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-resultado-titulo { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--cv-text); }
.cv-resultado-linha { font-size: 12px; color: var(--cv-text-dim); }
.cv-resultado-trecho { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--cv-text-muted); font-style: italic; }
.cv-resultado-trecho mark, .cv-resultado-trecho strong { background: rgba(242,165,26,0.35); color: var(--cv-text); padding: 0 2px; border-radius: 3px; font-style: normal; font-weight: 700; }

.cv-busca-vazio { text-align: center; padding: 48px 16px; color: var(--cv-text-muted); }
.cv-busca-vazio-icone { font-size: 44px; margin-bottom: 10px; }
.cv-busca-vazio h3 { font-family: var(--font-display); color: var(--cv-gold); font-size: 22px; margin: 0 0 6px; }
.cv-busca-vazio p { margin: 0 0 18px; }

.cv-busca-sentimentos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.cv-busca-sentimento {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--cv-radius-full);
    background: var(--cv-bg-card); border: 1px solid var(--cv-border); color: var(--cv-text);
    font-size: 14px; font-weight: 700; text-decoration: none; transition: all .2s;
}
.cv-busca-sentimento:hover { border-color: var(--sent-cor, var(--cv-gold)); background: var(--cv-bg-elevated); transform: translateY(-1px); }

/* ── 5. Página 404 ("4♪4") ──────────────────────────────────── */
.cv-404-codigo {
    display: flex; align-items: center; gap: 4px; line-height: 1; margin: 6px 0 10px;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(72px, 9vw, 120px); color: var(--cv-gold);
}
.cv-404-nota { display: inline-block; color: var(--cv-accent); animation: cv-404-nota 1.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes cv-404-nota {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .cv-404-nota { animation: none; } }
.cv-hero--404 .cv-hero-title { white-space: normal; font-size: clamp(28px, 2.8vw, 42px); }
.cv-hero--404 .cv-busca-avancada { margin: 0; max-width: 560px; }
.cv-hero--404 .cv-busca-filtros { justify-content: flex-start; }
.cv-404-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* v15.22.1: o "max-content" do hero da marca somado ao logo não cabia entre
   1200 e 1450 px, e o texto vazava para trás do menu lateral (cortando o "4",
   a busca e o "Sentimento"). Na 404 a coluna do texto passa a encolher e
   quebrar a linha, o logo fica entre 200 e 300 px e a margem esquerda cresce.
   A home continua com as regras de .cv-hero--marca. */
@media (min-width: 769px) {
    .cv-hero--404 {
        grid-template-columns: minmax(0, 760px) minmax(200px, 300px);
        gap: 32px;
        padding-left: 56px;
    }
}

@media (max-width: 768px) {
    .cv-busca-hero { padding: 28px 16px 22px; }
    .cv-busca-hero h1 { font-size: 28px; }
    .cv-resultados { grid-template-columns: 1fr; }
    .cv-busca-filtros { justify-content: stretch; }
    .cv-busca-filtro { flex: 1 1 140px; }
    .cv-busca-filtro select { width: 100%; min-width: 0; }
    .cv-hero--404 .cv-hero-content { text-align: center; }
    .cv-404-codigo { justify-content: center; }
    .cv-hero--404 .cv-busca-filtros, .cv-404-atalhos { justify-content: center; }
}

/* ── 6. Publicidade depois da letra (v15.6.0) ───────────────────
   Ordem: letra → parágrafo curto → aviso → banner (um só, fixo). */
.cv-pub-apos-letra {
    margin: 28px 0 8px;
    padding-top: 22px;
    border-top: 1px dashed var(--cv-border);
}
.cv-pub-paragrafo {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--cv-text-muted);
    margin: 0 0 18px;
}
.cv-pub-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cv-text-dim);
    margin-bottom: 10px;
}
.cv-pub-aviso::before,
.cv-pub-aviso::after { content: ""; flex: 1; height: 1px; background: var(--cv-border-subtle); }
.cv-pub-apos-letra .cv-banner-item { max-width: 728px; margin: 0 auto; }
.cv-pub-apos-letra .cv-banner-img { width: 100%; height: auto; border-radius: var(--cv-radius-sm); display: block; }

/* ── 7. "Ouça também em" (v15.7.0) ──────────────────────────── */
.cv-dist-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cv-border-subtle); }
.cv-dist-links-titulo { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cv-text-dim); }
.cv-dist-link {
    display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--cv-radius-full);
    font-size: 12px; font-weight: 700; text-decoration: none; color: #FFFFFF; background: #3B2418;
}
.cv-dist-link:hover { opacity: .88; color: #FFFFFF; }
.cv-dist-spotify { background: #1DB954; }
.cv-dist-deezer  { background: #A238FF; }
.cv-dist-apple   { background: #FA2D48; }
.cv-dist-youtube { background: #FF0000; }
.cv-dist-amazon  { background: #1E90C8; }

/* ═══════════════════════════════════════════════════════════════
   v15.11.0 (24/09/2026) — correções do 1º teste do Eduardo
═══════════════════════════════════════════════════════════════ */

/* Busca rápida do menu lateral: a caixa de resultados herdava os tons
   "branco transparente" da barra marrom e ficava sem fundo sobre a página.
   Aqui ela volta a ser um cartão sólido, com as cores do tema claro. */
.cv-sidebar .cv-autocomplete-list {
    --cv-text:          #3B2418;
    --cv-text-muted:    #7B3A22;
    --cv-text-dim:      #735442;
    --cv-gold:          #7B3A22;
    --cv-bg-card:       #FFFFFF;
    --cv-border:        #EADBC6;
    --cv-border-subtle: #F3E6D3;
    background: #FFFFFF;
    color: #3B2418;
    border: 1px solid #C9A27E;
    box-shadow: 0 10px 30px rgba(59, 36, 24, .35);
    min-width: 100%;
    z-index: 1000;
}
.cv-sidebar .cv-autocomplete-item:hover,
.cv-sidebar .cv-autocomplete-item.active { background: #FBF6EE; }

/* Rótulos de formulário: o Astra pinta label/legend com --ast-global-color-2,
   que no tema claro aponta para o branco dos cartões. Resultado: rótulos
   invisíveis em Entrar, Criar conta e Minha conta. */
body label,
body legend { color: var(--cv-text); }

/* Ultimate Member (Entrar, Criar conta, Minha conta, Perfil) nas cores da marca */
.um .um-field-label,
.um .um-field-label label { color: var(--cv-text) !important; font-weight: 600; }
.um .um-field-checkbox-option,
.um .um-field-radio-option { color: var(--cv-text) !important; }
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="search"],
.um textarea,
.um select {
    background: #FFFFFF !important;
    color: var(--cv-text) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-radius-sm) !important;
}
.um input:focus,
.um textarea:focus { border-color: var(--cv-gold) !important; }
.um .um-button,
.um input[type="submit"].um-button,
.um a.um-button {
    background: var(--cv-accent) !important;
    color: #3B2418 !important;
    border: none !important;
    border-radius: var(--cv-radius-sm) !important;
    font-weight: 700 !important;
}
.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um a.um-button:hover { background: #E0960F !important; }
.um .um-button.um-alt,
.um input[type="submit"].um-button.um-alt,
.um a.um-button.um-alt {
    background: var(--cv-bg-elevated) !important;
    color: var(--cv-gold) !important;
    border: 1px solid var(--cv-border) !important;
}
.um a.um-link-alt,
.um .um-account-side li a.current,
.um .um-account-side li a:hover { color: var(--cv-gold) !important; }

/* v15.13.0 — Botões oficiais das redes sociais (ícones Simple Icons, CC0):
   fundo na cor da marca, ícone e texto brancos. */
.cv-share-btn.cv-share-oficial {
    background: var(--share-color);
    color: #FFFFFF;
    border-color: transparent;
}
.cv-share-btn.cv-share-oficial:hover {
    background: var(--share-color);
    color: #FFFFFF;
    filter: brightness(.9);
}
.cv-icone { flex-shrink: 0; vertical-align: middle; }

/* ── 7. Rodapé legível (v15.14.0) ───────────────────────────────
   O fundo do rodapé é o marrom da barra lateral (--cv-bg-sidebar), mas os
   textos usavam as cores escuras do tema claro: marrom sobre marrom, tudo
   sumia. Mesma solução da barra lateral: redefine os tokens só aqui dentro. */
.cv-footer {
    --cv-gold:          #FFC24D; /* v15.21.0: contraste 5,3 sobre o marrom (era #F2A51A, 4,1) */
    --cv-text:          #FBF6EE;
    --cv-text-muted:    #F3E6D3;
    --cv-text-dim:      #E3CDB3;
    --cv-border-subtle: rgba(255, 255, 255, 0.14);
    color: var(--cv-text);
}
.cv-footer .cv-footer-links a:hover { color: #FFC24D; }

/* ── 7b. Banner das páginas internas (v15.14.0) ─────────────────
   Mesmo visual do hero da home, mais baixo, para Todas as Músicas, Blog,
   Minhas Playlists, Notificações e perfil/conta. */
.cv-hero--pagina {
    padding: 36px 36px 32px;
    grid-template-columns: minmax(0, 560px) minmax(180px, 240px);
}
.cv-hero--pagina .cv-hero-title {
    white-space: normal;
    font-size: clamp(30px, 2.8vw, 44px);
}
.cv-hero--pagina .cv-hero-subtitle { font-size: 17px; margin-bottom: 0; }
.cv-hero--pagina .cv-hero-actions  { margin-top: 18px; }
.cv-hero--sem-marca { grid-template-columns: minmax(0, 760px); justify-content: start; }
@media (max-width: 768px) {
    .cv-hero--pagina { grid-template-columns: 1fr; padding: 20px 16px 24px; }
    .cv-hero--pagina .cv-hero-marca { width: 150px; }
    .cv-hero--pagina .cv-hero-title { font-size: 28px; }
    .cv-hero--pagina .cv-hero-subtitle { font-size: 15px; }
}

/* ── 8. Rodapé com 4 colunas (v15.16.0) ─────────────────────────
   A 4ª coluna "Apoie" (plugin CV_Apoio) abre as janelas Seja nosso
   parceiro / colaborador. Telas médias: 2 × 2; celular: 1 coluna
   (a regra do cv-components.css continua valendo abaixo de 768px). */
.cv-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .cv-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .cv-footer-grid { grid-template-columns: 1fr; } }

/* ── 9. Botão "Loja" do menu lateral (v15.17.0) ────────────────
   Fica logo abaixo de "Ver Músicas": fundo creme e borda laranja para
   chamar atenção sem competir com o botão principal (laranja cheio). */
.cv-btn-sidebar-loja {
    background: #FBF6EE;
    color: #7B3A22;
    border: 2px solid var(--cv-accent);
    font-weight: 700;
}
.cv-btn-sidebar-loja:hover,
.cv-btn-sidebar-loja.is-ativo { background: #FFFFFF; color: #5E2A17; box-shadow: 0 0 0 3px rgba(242,165,26,.35); }
.cv-selo-novo {
    margin-left: auto;
    background: #C0392B;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
    white-space: nowrap; /* v15.36.2: "Em breve" não quebra em duas linhas */
}

/* ── 10. v15.20.0 ───────────────────────────────────────────────
   a) Busca avançada dentro do banner (página Buscar): ocupa a largura toda. */
.cv-hero--pagina .cv-hero-actions .cv-busca-avancada { width: 100%; max-width: 620px; margin: 0; }
.cv-hero--pagina .cv-hero-actions .cv-busca-filtros { justify-content: flex-start; }
@media (max-width: 768px) {
    .cv-hero--pagina .cv-hero-actions .cv-busca-filtros { justify-content: stretch; }
}

/* b) Cartões de música: dois botões claros, "Tocar" e "Ver clipe" (público 55+). */
.cv-card-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 6px; }
.cv-card-botoes .cv-btn { min-height: 40px; padding: 6px 8px; font-size: 13px; justify-content: center; text-decoration: none; }

/* c) Playlist pública / privada */
.cv-pl-visib {
    background: none; border: 1px solid var(--cv-border); border-radius: 50px; cursor: pointer;
    font-size: 12px; font-weight: 700; padding: 3px 10px; color: var(--cv-text-muted);
}
.cv-pl-visib.is-publica { border-color: var(--cv-accent); color: var(--cv-gold); background: #FFF3D6; }
.cv-pl-visib:hover { border-color: var(--cv-gold); }
.cv-pl-visib { text-decoration: underline; text-underline-offset: 2px; } /* v15.41.0: parece clicável */

/* ── 11. Contraste nível AA (v15.21.0) ──────────────────────────
   Medido em 26/09/2026 (mínimo 4,5 para texto comum):
   · texto claro #8A6A55 dava 4,57 no creme e 3,99 no bege → #735442 (6,35 / 5,55);
   · laranja #F2A51A sobre o marrom do menu/rodapé dava 4,12 → #FFC24D (5,29).
   Os arquivos protegidos não mudam: os tokens são redefinidos aqui. */
:root { --cv-text-dim: #735442; }
.cv-sidebar { --cv-gold: #FFC24D; }

/* ── 12. Tamanho da letra ajustável (A− / A+) — v15.21.0 ──────── */
.cv-letra-tamanho { display: inline-flex; gap: 6px; align-items: center; }
.cv-letra-tamanho button {
    min-width: 44px; min-height: 40px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--cv-border); background: #FFFFFF; color: var(--cv-gold);
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.cv-letra-tamanho button:hover { border-color: var(--cv-gold); }
.cv-letra-tamanho button:disabled { opacity: .45; cursor: default; }
.cv-letra-tamanho .cv-letra-tamanho-rotulo { font-size: 13px; color: var(--cv-text-muted); }
#cv-letra-conteudo [itemprop="text"] { font-size: var(--cv-letra-tam, 17px) !important; }

/* ── 13. "Por trás da canção" (v15.21.0) ───────────────────────── */
.cv-historia { margin-top: 28px; padding: 22px 24px; border-radius: var(--cv-radius-lg); background: var(--cv-bg-elevated); border-left: 4px solid var(--cv-accent); }
.cv-historia h2 { font-family: var(--font-display); font-size: 20px; color: var(--cv-gold); margin: 0 0 12px; }
.cv-historia-texto { font-family: var(--font-body); font-size: var(--cv-letra-tam, 17px); line-height: 1.8; color: var(--cv-text); }
.cv-historia-texto p { margin: 0 0 12px; }
.cv-historia-assinatura { margin: 8px 0 0; font-style: italic; color: var(--cv-text-muted); font-size: 15px; }

/* ── 14. "💌 Ofereça esta música" (v15.22.0) ─────────────────────
   Cartão na lateral, janela (usa .cv-janela do plugin) e a faixa de
   dedicatória no topo da música quando o link veio de uma oferta. */
.cv-oferecer-card { background: linear-gradient(135deg, #FFF3D6 0%, #FFFFFF 100%); border-color: var(--cv-accent); }
.cv-oferecer-intro { font-size: 15px; line-height: 1.5; color: var(--cv-text-muted); margin: 0 0 12px; }
.cv-oferecer-card .cv-btn { width: 100%; min-height: 48px; font-size: 16px; justify-content: center; }
.cv-oferecer-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.cv-oferecer-sugestao { border: 1px solid var(--cv-border); background: #FFFFFF; border-radius: 50px; padding: 6px 12px; font-size: 14px; cursor: pointer; color: var(--cv-text); }
.cv-oferecer-sugestao:hover { border-color: var(--cv-accent); background: #FFF3D6; }
.cv-oferecer-estilos { flex-direction: row !important; flex-wrap: wrap; }
.cv-oferecer-estilos legend { width: 100%; }
.cv-oferecer-previa { width: 100%; height: auto; max-width: 420px; display: block; margin: 0 auto 14px; border-radius: 16px; box-shadow: var(--cv-shadow-lg); }
.cv-oferecer-acoes { display: flex; flex-direction: column; gap: 10px; }
.cv-oferecer-acoes .cv-btn { min-height: 48px; font-size: 16px; justify-content: center; }
.cv-oferecer-dica { font-size: 14px; color: var(--cv-text-muted); margin: 12px 0 0; }

.cv-dedicatoria {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin: 20px 36px 0; padding: 20px 24px; border-radius: var(--cv-radius-lg);
    background: linear-gradient(135deg, #FFF3D6 0%, #FFE9EE 100%); border: 2px solid var(--cv-accent);
}
.cv-dedicatoria-icone { font-size: 44px; }
.cv-dedicatoria-texto { flex: 1 1 320px; }
.cv-dedicatoria-para { font-family: var(--font-display); font-size: 24px; color: var(--cv-gold); margin: 0 0 6px; }
.cv-dedicatoria blockquote { margin: 0 0 6px; font-family: var(--font-body); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--cv-text); }
.cv-dedicatoria-de { margin: 0; font-size: 16px; color: var(--cv-text-muted); }
.cv-dedicatoria .cv-btn { min-height: 48px; font-size: 16px; }
@media (max-width: 768px) { .cv-dedicatoria { margin: 16px 16px 0; } }

/* ── 16. "🎸 Cifra simples" (v15.23.0) ─────────────────────────
   Uma faixa por parte da música, do tom mais claro da paleta (em cima)
   ao mais escuro (embaixo). Contraste AA conferido em cada faixa: marrom
   café sobre os tons claros; creme e laranja #FFC24D sobre os escuros.
   O tamanho acompanha o A− / A+ da letra (--cv-letra-tam). */
.cv-cifra { margin-top: 28px; padding: 22px 24px; border-radius: var(--cv-radius-lg); background: var(--cv-bg-card); border: 1px solid var(--cv-border); }
.cv-cifra-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.cv-cifra h2 { font-family: var(--font-display); font-size: 20px; color: var(--cv-gold); margin: 0; }
.cv-cifra-tom { font-family: var(--font-ui); font-size: 15px; padding: 6px 14px; border-radius: var(--cv-radius-full); background: var(--cv-accent); color: var(--cv-on-accent); }
.cv-cifra-dica { margin: 0 0 14px; font-size: 14px; color: var(--cv-text-muted); }
.cv-cifra-partes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-cifra-parte {
    --cifra-fundo: #F3E6D3; --cifra-texto: #3B2418; --cifra-nome: #7B3A22;
    --cifra-chip: #FFFFFF;  --cifra-chip-texto: #7B3A22; --cifra-chip-borda: #EADBC6;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    padding: 14px 18px; border-radius: var(--cv-radius-md, 10px);
    background: var(--cifra-fundo); color: var(--cifra-texto);
}
.cv-cifra-tom-0 { --cifra-fundo: #FBF6EE; --cifra-chip-borda: #EADBC6; }
.cv-cifra-tom-1 { --cifra-fundo: #F3E6D3; }
.cv-cifra-tom-2 { --cifra-fundo: #E3C9A8; --cifra-nome: #5E2A17; --cifra-chip-borda: #C9A27E; }
.cv-cifra-tom-3 { --cifra-fundo: #9A5530; --cifra-texto: #FBF6EE; --cifra-nome: #FFE3B0; --cifra-chip: rgba(255,255,255,.14); --cifra-chip-texto: #FFFFFF; --cifra-chip-borda: rgba(255,255,255,.28); }
.cv-cifra-tom-4 { --cifra-fundo: #7B3A22; --cifra-texto: #FBF6EE; --cifra-nome: #FFC24D; --cifra-chip: rgba(255,255,255,.12); --cifra-chip-texto: #FFFFFF; --cifra-chip-borda: rgba(255,255,255,.24); }
.cv-cifra-tom-5 { --cifra-fundo: #3B2418; --cifra-texto: #FBF6EE; --cifra-nome: #FFC24D; --cifra-chip: rgba(255,255,255,.10); --cifra-chip-texto: #FFC24D; --cifra-chip-borda: rgba(255,194,77,.35); }
.cv-cifra-nome { min-width: 110px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .3px; color: var(--cifra-nome); }
.cv-cifra-acordes { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-cifra-acorde {
    display: inline-block; min-width: 48px; padding: 6px 12px; text-align: center;
    border-radius: 8px; border: 1px solid var(--cifra-chip-borda);
    background: var(--cifra-chip); color: var(--cifra-chip-texto);
    font-family: var(--font-ui); font-weight: 700; font-size: var(--cv-letra-tam, 17px); line-height: 1.3;
}
@media (max-width: 768px) {
    .cv-cifra { padding: 18px 14px; }
    .cv-cifra-parte { padding: 12px 14px; }
    .cv-cifra-nome { min-width: 0; width: 100%; }
}

/* ── 17. "🎤 Cantar junto" (v15.24.0; claro em v15.24.1) ───────
   v15.24.1 (pedido do Eduardo): tela clara no creme do site. Só a estrofe
   atual fica escura (marrom café #3B2418 num cartão branco com faixa
   laranja); as outras ficam num marrom suave, apagadas.
   Tamanho próprio (--cantar-tam, 24 a 60 px) pelo A− / A+ da própria tela.
   Montada por assets/js/cv-cantar.js. */
html.cv-cantar-aberto, html.cv-cantar-aberto body { overflow: hidden; }
.cv-cantar {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column;
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(242,165,26,0.10), transparent 70%),
        linear-gradient(180deg, #FBF6EE 0%, #F3E6D3 100%);
    color: var(--cv-text); font-family: var(--font-ui);
}
.cv-cantar[hidden] { display: none; }
.cv-cantar-topo {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px;
    padding: 14px 24px; background: rgba(255,255,255,.6); border-bottom: 1px solid var(--cv-border);
}
.cv-cantar-titulo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--cv-accent-hover); }
.cv-cantar-titulo span { color: var(--cv-gold); }
.cv-cantar-contador { font-size: 16px; color: var(--cv-text-muted); }
.cv-cantar-ferramentas { display: flex; gap: 8px; }
.cv-cantar button {
    min-height: 48px; min-width: 52px; padding: 8px 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--cv-border); background: #FFFFFF; color: var(--cv-gold);
    font-family: var(--font-display); font-weight: 700; font-size: 18px; transition: background .2s, border-color .2s;
}
.cv-cantar button:hover { border-color: var(--cv-gold-dim); background: var(--cv-bg); }
.cv-cantar button:focus-visible { outline: 3px solid var(--cv-gold); outline-offset: 2px; }
.cv-cantar button:disabled { opacity: .4; cursor: default; }
.cv-cantar .cv-cantar-maior { font-size: 22px; }
.cv-cantar-letra {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    width: 100%; max-width: 920px; margin: 0 auto; padding: 30vh 24px;
    scrollbar-width: thin; scrollbar-color: var(--cv-gold-dim) transparent;
}
.cv-cantar-estrofe {
    margin: 0 0 14px; padding: 16px 24px; border-radius: 14px; border-left: 6px solid transparent;
    font-family: var(--font-body); font-size: var(--cantar-tam, 34px); line-height: 1.45;
    white-space: pre-line; color: #A88B74; cursor: pointer;
    transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
}
.cv-cantar-estrofe.is-passada { color: #C4AB94; }
.cv-cantar-estrofe.is-atual {
    color: #3B2418; background: #FFFFFF; border-left-color: var(--cv-accent);
    box-shadow: var(--cv-shadow); cursor: default;
}
.cv-cantar-estrofe:focus { outline: none; }
.cv-cantar-base {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 24px 6px; background: rgba(255,255,255,.6); border-top: 1px solid var(--cv-border);
}
.cv-cantar .cv-cantar-nav { min-width: 170px; min-height: 58px; font-size: 20px; }
.cv-cantar .cv-cantar-proxima { background: var(--cv-accent); border-color: var(--cv-accent); color: var(--cv-on-accent); }
.cv-cantar .cv-cantar-proxima:hover { background: var(--cv-accent-hover); border-color: var(--cv-accent-hover); }
.cv-cantar .cv-cantar-tocar { min-height: 58px; font-size: 18px; }
.cv-cantar-dica { margin: 0; padding: 4px 24px 14px; text-align: center; font-size: 14px; color: var(--cv-text-muted); background: rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce) { .cv-cantar-estrofe { transition: none; } }
@media (max-width: 768px) {
    .cv-cantar-topo { padding: 10px 14px; }
    .cv-cantar-titulo { font-size: 18px; width: 100%; }
    .cv-cantar-letra { padding: 25vh 12px; }
    .cv-cantar-estrofe { padding: 12px 14px; border-left-width: 5px; }
    .cv-cantar-base { padding: 10px 12px 14px; gap: 8px; }
    .cv-cantar .cv-cantar-nav { flex: 1 1 0; min-width: 0; }
    .cv-cantar .cv-cantar-tocar { order: -1; flex: 1 1 100%; min-height: 48px; }
    .cv-cantar-dica { display: none; }
}

/* ── 18. "💬 Depoimentos dos ouvintes" (v15.25.0) ──────────────
   Cartões brancos com aspas laranja e faixa na cor da marca; formulário
   dentro de <details> (abre sem JavaScript). Letras grandes para o 55+. */
.cv-depo { margin-top: 32px; padding: 24px; border-radius: var(--cv-radius-lg); background: var(--cv-bg-elevated); }
.cv-depo h2 { font-family: var(--font-display); font-size: 22px; color: var(--cv-gold); margin: 0 0 16px; }
.cv-depo h2 span { color: var(--cv-accent-hover); }
.cv-depo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cv-depo-cartao {
    position: relative; margin: 0; padding: 22px 20px 16px 22px;
    background: #FFFFFF; border: 1px solid var(--cv-border); border-left: 5px solid var(--cv-accent);
    border-radius: 14px; box-shadow: var(--cv-shadow-card);
}
.cv-depo-cartao::before {
    content: "“"; position: absolute; top: -6px; right: 14px;
    font-family: Georgia, serif; font-size: 64px; line-height: 1; color: rgba(242,165,26,.45);
}
.cv-depo-cartao blockquote { border: 0; padding: 0; quotes: none; margin: 0 0 12px; font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--cv-text); font-style: italic; }
.cv-depo-cartao figcaption { font-size: 15px; color: var(--cv-text-muted); }
.cv-depo-cartao figcaption strong { color: var(--cv-gold); }
.cv-depo-vazio { margin: 0 0 16px; font-family: var(--font-body); font-size: 18px; color: var(--cv-text-muted); }
.cv-depo-form-caixa > summary { list-style: none; display: inline-flex; cursor: pointer; }
.cv-depo-form-caixa > summary::-webkit-details-marker { display: none; }
.cv-depo-form-caixa[open] > summary { margin-bottom: 16px; }
.cv-depo-form { padding: 20px; background: #FFFFFF; border: 1px solid var(--cv-border); border-radius: 14px; }
.cv-depo-campo { display: block; margin-bottom: 14px; }
.cv-depo-campo > span { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; color: var(--cv-text); }
.cv-depo-campo em { font-weight: 400; color: var(--cv-text-muted); }
.cv-depo-campo textarea, .cv-depo-campo input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--cv-border-hover); background: var(--cv-bg); color: var(--cv-text);
    font-family: var(--font-body); font-size: 18px;
}
.cv-depo-campo textarea:focus, .cv-depo-campo input:focus { outline: 3px solid rgba(242,165,26,.45); border-color: var(--cv-accent); }
.cv-depo-conta { display: block; margin-top: 4px; font-size: 13px; color: var(--cv-text-muted); text-align: right; }
.cv-depo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cv-depo-aceite { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; font-size: 15px; color: var(--cv-text); cursor: pointer; }
.cv-depo-aceite input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--cv-gold); flex: 0 0 auto; }
.cv-depo-aviso { margin: 0 0 14px; font-size: 14px; color: var(--cv-text-muted); }
.cv-depo-msg { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
.cv-depo-msg:empty { display: none; }
.cv-depo-msg.is-ok { color: var(--cv-success); }
.cv-depo-msg.is-erro { color: var(--cv-error); }
.cv-depo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 768px) {
    .cv-depo { padding: 18px 14px; }
    .cv-depo-linha { grid-template-columns: 1fr; gap: 0; }
    .cv-depo-form { padding: 16px 14px; }
}

/* ── 19. Página "🎤 Para artistas" (v15.26.0) ─────────────────── */
.cv-btn-whats { display: inline-flex; align-items: center; gap: 8px; background: #1E8E4E; color: #FFFFFF; border: 1px solid #1E8E4E; }
.cv-btn-whats:hover, .cv-btn-whats:focus-visible { background: #17733F; border-color: #17733F; color: #FFFFFF; }
.cv-artista-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.cv-artista-texto { max-width: 820px; padding: 24px 28px; background: #FFFFFF; border: 1px solid var(--cv-border); border-radius: var(--cv-radius-lg); box-shadow: var(--cv-shadow-card); }
.cv-artista-texto h3 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 20px; color: var(--cv-gold); }
.cv-artista-texto h3:first-of-type { margin-top: 12px; }
.cv-artista-texto p, .cv-artista-texto li { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--cv-text); }
.cv-artista-texto p { margin: 0 0 10px; }
.cv-artista-texto ul { margin: 0 0 10px; padding-left: 22px; }
.cv-artista-texto li::marker { color: var(--cv-accent-hover); }
.cv-artista-lista-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cv-artista-lista-passos li { position: relative; padding: 26px 20px 20px; background: var(--cv-bg-elevated); border-radius: var(--cv-radius-lg); border-top: 5px solid var(--cv-accent); }
.cv-artista-num {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px;
    border-radius: 50%; background: var(--cv-gold); color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.cv-artista-lista-passos h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; color: var(--cv-gold); }
.cv-artista-lista-passos p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--cv-text); }
.cv-artista-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-artista-feito { display: inline-block; font-weight: 700; color: var(--cv-success); }
.cv-artista-nota { display: inline-block; font-size: 14px; color: var(--cv-text-muted); }
.cv-artista-whats {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
    padding: 24px 28px; border-radius: var(--cv-radius-lg); background: #EAF6EE; border: 1px solid #B9E0C6;
}
.cv-artista-whats h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; color: #17733F; }
.cv-artista-whats p { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--cv-text); }
.cv-artista-faq details { max-width: 820px; margin: 0 0 10px; padding: 14px 18px; background: #FFFFFF; border: 1px solid var(--cv-border); border-radius: 12px; }
.cv-artista-faq summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--cv-gold); }
.cv-artista-faq details p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--cv-text); }
@media (max-width: 768px) {
    .cv-artista-texto { padding: 18px 16px; }
    .cv-artista-whats { padding: 20px 16px; }
    .cv-artista-acoes .cv-btn, .cv-artista-whats .cv-btn { width: 100%; justify-content: center; }
}

/* ── 20. Home: linhas de 4 cartões (v15.27.0) ────────────────────
   Favoritas, Mais tocadas e Melhor avaliadas usam .cv-grid-col-4 e são
   completadas com "Em breve" até fechar a linha (front-page.php). O
   cv-components.css passa para 3 colunas até 1024 px, o que quebraria a
   linha; aqui ficam 4 até o celular, e lá 2 + 2. */
@media (max-width: 1024px) and (min-width: 769px) {
    .cv-grid-linha4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Celular pequeno: 2 + 2 (o padrão do site ali é 1 por linha, que empilharia
   os "Em breve" e deixaria a página muito comprida) */
@media (max-width: 380px) {
    .cv-grid-linha4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ── 21. "✨ Novidades para você" (v15.30.0; janela em v15.31.0) ──
   Botão do menu lateral e janela com os atalhos (usa .cv-janela do plugin).
   As âncoras da página da música param abaixo da barra do topo. */
#letra, #cifra, #historia, #oferecer, #depoimentos { scroll-margin-top: 90px; }
.cv-btn-sidebar-novidades {
    width: 100%; cursor: pointer; font: inherit; text-align: left;
    background: linear-gradient(135deg, #FFF7E8 0%, #F3E6D3 100%);
    color: #7B3A22; border: 2px dashed var(--cv-accent); font-weight: 700;
}
.cv-btn-sidebar-novidades:hover { background: #FFFFFF; color: #5E2A17; box-shadow: 0 0 0 3px rgba(242,165,26,.35); }
.cv-janela.cv-janela-novidades { width: min(820px, calc(100vw - 32px)); } /* .cv-janela do plugin carrega depois */
.cv-novidades-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cv-novidade {
    display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box;
    padding: 16px 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--cv-border);
    text-decoration: none; color: var(--cv-text); box-shadow: var(--cv-shadow-card); transition: transform .15s, border-color .15s;
}
.cv-novidade:hover, .cv-novidade:focus-visible { transform: translateY(-2px); border-color: var(--cv-accent); }
.cv-novidade:focus-visible { outline: 3px solid rgba(242,165,26,.5); outline-offset: 2px; }
.cv-novidade-icone { font-size: 30px; line-height: 1; }
.cv-novidade-titulo { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--cv-gold); }
.cv-novidade-texto { font-size: 15px; line-height: 1.5; color: var(--cv-text); flex: 1; }
.cv-novidade-ver { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--cv-accent-hover); }
@media (max-width: 860px) { .cv-novidades-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cv-novidades-lista { grid-template-columns: 1fr; } }
/* Barra do topo no celular estreito: o 🏠 ficava escondido atrás do logo
   (que já leva ao início) e empurrava o ✨ para cima dele. O !important é
   porque o 🏠 tem display:flex escrito direto no HTML (topbar.php). */
@media (max-width: 420px) {
    .cv-topbar .cv-topbar-inicio { display: none !important; }
    .cv-topbar-right { gap: 2px; }
}

/* ── 22. Topo da página inicial no celular (v15.32.0) ─────────────
   Antes ocupava ~620 px num celular de 375 px (quase a tela toda) e o
   primeiro cartão só aparecia rolando. Só a home (.cv-hero--home); os
   banners das páginas internas não mudam. O logo pequeno continua na
   barra do topo, então o logo grande diminui. */
@media (max-width: 768px) {
    .cv-hero--home.cv-hero--marca { gap: 6px; padding: 14px 16px 18px; }
    .cv-hero--home .cv-hero-marca { width: 120px; }
    .cv-hero--home .cv-hero-tag { margin-bottom: 8px; font-size: 11px; padding: 4px 12px; }
    .cv-hero--home.cv-hero--marca .cv-hero-title { font-size: 28px; line-height: 1.15; margin-bottom: 6px; }
    .cv-hero--home.cv-hero--marca .cv-hero-subtitle { font-size: 15px; margin-bottom: 12px; }
    .cv-hero--home .cv-hero-actions { gap: 8px; flex-wrap: wrap; }
    .cv-hero--home .cv-hero-actions .cv-btn-lg { flex: 1 1 0; min-width: 0; padding: 11px 10px; font-size: 14px; justify-content: center; white-space: nowrap; }
    .cv-hero--home .cv-hero-actions .cv-hero-pulse { flex: 1 1 100%; }
    .cv-hero--home .cv-hero-agora { margin-top: 12px !important; } /* o espaço vem escrito no HTML */
}

/* ── 23. Player do rodapé no celular (v15.33.0) ───────────────────
   No celular as 8 peças do player ficavam numa linha só e 4 saíam da
   tela (🔁, barra de progresso, YouTube/MP3 e ☰ da fila). Agora, como nos
   aplicativos de música: capa e nome + ⏮ ▶ ⏭ + ☰, e a barra de progresso
   vira uma linha fina no alto do player (ela só mostra o andamento; não
   tem toque para avançar). Os !important vencem o estilo escrito direto
   no HTML (template-parts/player.php). O computador não muda. */
@media (max-width: 768px) {
    .cv-player {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center; gap: 0 8px; padding: 6px 12px 4px;
    }
    .cv-player-info { min-width: 0 !important; max-width: none !important; }
    .cv-player-progress {
        position: absolute; top: 0; left: 0; right: 0;
        max-width: none !important; margin: 0; pointer-events: none;
    }
    .cv-player-progress .cv-player-bar { height: 4px; border-radius: 0; background: rgba(255,255,255,.14); }
    .cv-player-progress .cv-player-bar-fill { border-radius: 0; }
    #cv-player-current, #cv-player-duration { display: none; }
    #cv-btn-mode { display: none !important; }
    .cv-player-controls { gap: 4px; }
}
@media (max-width: 600px) {
    #cv-btn-shuffle, #cv-btn-repeat { display: none; }
}

/* ── 24. Página "Como assinar pelo gov.br" (v15.34.0) ─────────────
   Letras grandes e passos numerados para o público 55+. As perguntas e
   o bloco do WhatsApp reaproveitam os estilos da página Para artistas. */
.cv-gov-antes, .cv-gov-aviso { max-width: 820px; padding: 20px 24px; border-radius: var(--cv-radius-lg); }
.cv-gov-antes { background: #EAF6EE; border: 1px solid #B9E0C6; }
.cv-gov-antes h2, .cv-gov-aviso h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 22px; color: var(--cv-gold); }
.cv-gov-antes ul { margin: 0; padding: 0; list-style: none; }
.cv-gov-antes li { margin: 0 0 8px; font-size: 18px; line-height: 1.55; color: var(--cv-text); }
.cv-gov-aviso { background: #FFF4E0; border: 1px solid #F2C77A; border-left: 6px solid var(--cv-accent); }
.cv-gov-aviso p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cv-text); }
.cv-gov-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.cv-gov-passos li {
    display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
    background: #FFFFFF; border: 1px solid var(--cv-border); border-radius: 14px; box-shadow: var(--cv-shadow-card);
}
.cv-gov-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; background: var(--cv-accent); color: var(--cv-on-accent);
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
}
.cv-gov-passos h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 20px; color: var(--cv-gold); }
.cv-gov-passos p { margin: 0 0 10px; font-size: 18px; line-height: 1.6; color: var(--cv-text); }
@media (max-width: 560px) {
    .cv-gov-passos li { padding: 16px 14px; gap: 12px; }
    .cv-gov-num { width: 40px; height: 40px; font-size: 19px; }
}

/* ── 25. Formulários do Ultimate Member maiores (v15.35.0) ────────
   Cadastro, Login, Recuperar senha e Minha conta. Letra de 17 px nos
   campos: abaixo de 16 px o iPhone dá zoom sozinho ao tocar no campo, o
   que desorienta. Campos de 50 px e botões de 54 px (fácil de acertar com
   o dedo); rótulos maiores. Os !important vencem as regras do UM. */
.um .um-form .um-field-label label,
.um .um-form .um-field-label { font-size: 17px !important; }
.um .um-form input[type="text"],
.um .um-form input[type="email"],
.um .um-form input[type="password"],
.um .um-form input[type="tel"],
.um .um-form input[type="number"],
.um .um-form input[type="url"],
.um .um-form select {
    font-size: 17px !important; height: 50px !important; line-height: 1.3 !important;
    padding: 0 14px !important;
}
.um .um-form textarea { font-size: 17px !important; padding: 12px 14px !important; }
.um .um-form input::placeholder, .um .um-form textarea::placeholder { color: #8A6A55 !important; opacity: 1; }
.um .um-form .um-button,
.um .um-form input[type="submit"].um-button,
.um .um-form a.um-button { min-height: 54px !important; font-size: 17px !important; line-height: 1.2 !important; padding: 14px 18px !important; }
.um .um-form .um-field-checkbox-option, .um .um-form .um-field-radio-option,
.um .um-form .um-col-alt-b a, .um .um-form .um-link-alt { font-size: 16px !important; }
.um .um-form .um-field-error, .um .um-form .um-field-notice { font-size: 15px !important; }

/* ── 26. Minha Área no celular (v15.36.0) ─────────────────────────
   Os 4 números (Plays, Favoritos, Playlists, Conquistas) ficavam em
   quadradinhos estreitos à esquerda; agora 2 colunas na largura toda. */
@media (max-width: 600px) {
    .cv-dash-stats { margin-left: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
    .cv-dash-stat { min-width: 0 !important; }
}

/* ── 27. Entrar maior + "Mostrar senha" (v15.37.0) ────────────────
   a) Tela Entrar (formulário de login do Ultimate Member, .um-login): um
      pouco maior que os outros formulários (seção 25), por pedido do
      Eduardo para o público 55+.
   b) Botão "👁️ Mostrar / 🙈 Esconder" que o assets/js/cv-senha.js põe
      dentro de todo campo de senha. Texto além do ícone, 44 px de altura. */
.um.um-login .um-form .um-field-label label,
.um.um-login .um-form .um-field-label { font-size: 20px !important; }
.um.um-login .um-form input[type="text"],
.um.um-login .um-form input[type="email"],
.um.um-login .um-form input[type="password"] { font-size: 19px !important; height: 56px !important; }
.um.um-login .um-form .um-button,
.um.um-login .um-form input[type="submit"].um-button,
.um.um-login .um-form a.um-button { min-height: 58px !important; font-size: 19px !important; }
.um.um-login .um-form .um-field-checkbox-option,
.um.um-login .um-form .um-col-alt-b a,
.um.um-login .um-form .um-link-alt { font-size: 18px !important; }

.cv-senha-caixa { position: relative; display: block; width: 100%; }
.cv-senha-caixa input { width: 100% !important; padding-right: 128px !important; box-sizing: border-box; }
.cv-senha-ver {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 12px; margin: 0;
    background: #FFF6E5; color: #5E2A17; border: 2px solid #F2A51A; border-radius: 8px;
    font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
}
.cv-senha-ver:hover { background: #FFE9BF; }
.cv-senha-ver:focus-visible { outline: 3px solid #5E2A17; outline-offset: 2px; }
.cv-senha-ver[aria-pressed="true"] { background: #F2A51A; color: #3B1A0E; }
.cv-senha-icone { font-size: 18px; }


/* ── 28. Aviso "Seu perfil ainda está vazio" (v15.38.0) ────────────
   Página do perfil (/membro/...). O Ultimate Member mostrava um rosto
   triste de 70 px, longe da barra de abas, e o texto em 16 px cinza claro.
   Agora: ícone menor e mais perto, texto 20 px escuro e o link
   "Completar meu perfil" como botão laranja (texto em class-cv-um-traducao.php). */
.um .um-profile-note { padding-top: 6px !important; margin: 0 !important; }
.um .um-profile-note > i { font-size: 40px !important; height: 40px !important; line-height: 40px !important; color: #7B3A22; }
.um .um-profile-note span { font-size: 20px !important; line-height: 1.5 !important; color: #3B2418 !important; margin-top: 8px !important; }
.um .um-profile-note span a {
    display: inline-block; margin-top: 14px; padding: 14px 28px; min-height: 54px; box-sizing: border-box;
    background: #F2A51A; color: #3B2418 !important; border-radius: 8px;
    font-size: 19px; font-weight: 700; text-decoration: none !important;
}
.um .um-profile-note span a:hover { background: #E0950F; }
.um .um-profile-note span a:focus-visible { outline: 3px solid #5E2A17; outline-offset: 2px; }

/* ── 29. Minha Conta: nome, "Ver perfil" e menu com texto (v15.38.1) ─
   A coluna do conteúdo tem ~690 px, então o Ultimate Member liga o modo
   compacto (.uimob800): some o nome, some o link "Ver perfil" e o menu
   da esquerda fica só com ícones. Aqui o modo completo volta (só quando
   não é celular; abaixo de 500 px o UM usa o menu de cima). O nome e o
   botão laranja "Ver perfil" valem em qualquer largura. */
div.uimob800.um-account .um-account-side { width: 230px !important; padding: 0 !important; }
div.uimob800.um-account .um-account-main { width: calc(100% - 230px) !important; max-width: none !important; padding-left: 24px !important; }
div.uimob800.um-account .um-account-side .uimob800-show { display: none !important; }
div.uimob800.um-account .um-account-side .uimob800-hide { display: block !important; }
div.uimob800.um-account .um-account-side li a span.um-account-icon.uimob800-hide,
div.uimob800.um-account .um-account-side li a span.um-account-title.uimob800-hide { display: inline-block !important; float: none !important; vertical-align: middle; }
div.uimob800.um-account .um-account-side li a span.um-account-arrow.uimob800-hide { display: none !important; }
div.uimob800.um-account .um-account-meta a { border: 0 !important; display: inline-block !important; }
div.uimob800.um-account .um-account-meta-img img { width: 110px !important; height: 110px !important; object-fit: cover; }
div.uimob800.um-account .um-account-name { padding-top: 10px; }
.um.um-account .um-account-name > a { font-size: 20px !important; font-weight: 700; color: #3B2418 !important; }
.um.um-account .um-account-profile-link a.um-link {
    display: inline-block !important; margin-top: 8px; padding: 10px 18px;
    background: #F2A51A; color: #3B2418 !important; border-radius: 8px;
    font-size: 17px !important; font-weight: 700; text-decoration: none !important;
}
div.uimob800.um-account .um-account-side li a {
    height: auto !important; min-height: 52px; line-height: 1.3 !important;
    padding: 12px 14px !important; text-align: left !important;
    font-size: 18px !important; color: #3B2418 !important; display: flex !important; align-items: center; gap: 12px;
}
div.uimob800.um-account .um-account-side li a span.um-account-icon { border: 0 !important; padding: 0 !important; width: 24px !important; height: auto !important; font-size: 20px !important; color: #7B3A22 !important; }
div.uimob800.um-account .um-account-side li a span.um-account-icon i { height: auto !important; line-height: 1 !important; }
div.uimob800.um-account .um-account-side li a span.um-account-title { padding: 0 !important; height: auto !important; line-height: 1.3 !important; color: inherit !important; }
div.uimob800.um-account .um-account-side li a.current { background: #F2A51A !important; color: #3B2418 !important; font-weight: 700; }

/* ── 30. Perfil do ouvinte: campos com letra maior (v15.39.0) ────────
   Plugin v2.64.0 colocou Cidade, Estado e "Como conheci o site" no
   perfil (a música favorita é o bloco do plugin v2.65.0). O Ultimate Member mostra a resposta
   em cinza (#666) com 15 px — difícil de ler para o público 55+. */
.um .um-profile-body .um-field-value { font-size: 18px !important; line-height: 1.5 !important; color: #3B2418 !important; }
.um .um-profile-body .um-field-label label,
.um .um-profile-body .um-field-label { font-size: 17px !important; }
.um .um-profile-body .um-field { padding-top: 14px !important; }

/* ── 31. Topo da página inicial no computador (v15.40.0) ──────────
   Sem os botões do topo (tirados na v15.40.0), sobrava espaço: o topo
   fica um pouco mais baixo e a "Seleção" sobe ~50 px. O celular (seção
   22) não muda. */
@media (min-width: 769px) {
    .cv-hero--home { padding-top: 40px; padding-bottom: 32px; }
    .cv-hero--home .cv-hero-subtitle { margin-bottom: 8px; }
}
/* v15.52.0 (20/10/2026, item 1 do Eduardo) — marca e título mais para cima e
   topo mais baixo, para aparecer o começo da seção "Novas" sem rolar
   (tela 1366×768). Logo um pouco menor; espaços de cima e de baixo menores. */
@media (min-width: 769px) {
    .cv-hero--home.cv-hero--marca { padding-top: 14px; padding-bottom: 14px; grid-template-columns: max-content minmax(200px, 250px); }
    .cv-hero--home .cv-hero-tag { margin-bottom: 8px; }
    .cv-hero--home.cv-hero--marca .cv-hero-title { margin-bottom: 4px; }
    .cv-hero--home.cv-hero--marca .cv-hero-subtitle { margin-bottom: 0; }
    /* "Seleção Top Três" logo abaixo: linhas de 74 para ~58 px */
    .home .cv-hero--home + .cv-section { padding-top: 20px; }
    .home .cv-ranking-top3 { padding-top: 5px; padding-bottom: 5px; }
    .home .cv-ranking-top3 .cv-ranking-capa { width: 44px; height: 44px; }
}

/* ── 32. Playlists da Comunidade (v15.41.0; compacto na v15.42.0) ──
   Página /playlists-da-comunidade/ (templates/page-playlists-comunidade.php).
   Cartão em fila, como "Suas playlists": capa 64 px, nome, "N músicas ·
   por Fulana", ▶ redondo à direita e, embaixo, até 3 músicas. No celular,
   1 por linha (bem mais baixos que os cartões grandes da v15.41.0). */
.cv-comunidade-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.cv-comunidade-card {
    display: grid; grid-template-columns: 64px 1fr auto; column-gap: 12px; align-items: center;
    padding: 12px 14px; background: #FFF6E8; border: 1px solid #7B3A22;
    border-radius: var(--cv-radius, 12px);
}
.cv-comunidade-capa {
    width: 64px; height: 64px; border-radius: var(--cv-radius-sm, 8px); overflow: hidden;
    background: var(--cv-bg-elevated, #F3E6D3); display: flex; align-items: center; justify-content: center;
}
.cv-comunidade-capa img { width: 100%; height: 100%; object-fit: cover; }
.cv-comunidade-capa span { font-size: 28px; }
.cv-comunidade-corpo { min-width: 0; }
.cv-comunidade-nome {
    font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0 0 2px;
    color: var(--cv-text, #3B2418); overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* até 2 linhas */
}
.cv-comunidade-info { font-size: 15px; color: #735442; }
.cv-comunidade-info a { color: #7B3A22; font-weight: 700; }
.cv-comunidade-play {
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: #F2A51A; color: #3B2418; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center; padding: 0 0 0 3px;
}
.cv-comunidade-play:hover { background: #FFC24D; }
.cv-comunidade-musicas {
    grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 8px 0 0;
    border-top: 1px solid #EADBC6; font-size: 15px; color: #3B2418;
}
.cv-comunidade-musicas li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-comunidade-musicas .cv-comunidade-mais { color: #735442; font-style: italic; }
.cv-comunidade-paginas { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; font-size: 16px; flex-wrap: wrap; }
@media (max-width: 480px) {
    .cv-comunidade-grade { grid-template-columns: 1fr; gap: 10px; }
}

/* v15.43.0 — ícones desenhados dos sentimentos alinhados ao texto */
.cv-icone-sent { vertical-align: -0.2em; flex-shrink: 0; }

/* v15.46.0 — botões "▶ Tocar" e "🎬 Clipe" sempre dentro do cartão (antes o "Ver clipe" passava ~15 px da borda) */
.cv-card-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.cv-card-botoes .cv-btn { min-width: 0; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v15.47.0 (16/10/2026, pedido do Eduardo) — no celular o logo já aparece na barra do topo;
   o logo grande do banner (home e páginas internas) saía repetido logo abaixo. Some só no celular. */
@media (max-width: 768px) {
    .cv-hero--marca .cv-hero-marca { display: none; }
}

/* v15.48.0 (17/10/2026, relato do Eduardo) — no celular o "✨ Criar Conta Grátis" (último item do
   menu lateral) ficava escondido: o menu usava 100vh (no Android inclui a barra de endereço) e o
   player do rodapé (z-index 500) cobre o fim do menu. Agora o menu usa a altura visível (dvh) e
   termina com folga acima do player. */
@media (max-width: 768px) {
    .cv-sidebar {
        height: 100vh; height: 100dvh;
        padding-bottom: calc(var(--cv-player-h) + 24px + env(safe-area-inset-bottom, 0px));
    }
}

/* v15.49.0 (17/10/2026, relato do Eduardo) — no celular, ao rolar o menu lateral até o
   "Criar Conta Grátis", o conteúdo do menu passava por baixo da barra do topo e o ☰ sumia
   no meio dele. Agora o menu começa ABAIXO da barra do topo (que fica sempre limpa, com o ☰
   à vista), o logo grande do menu sai (já está na barra) e, com o menu aberto, o ☰ vira ✕. */
@media (max-width: 768px) {
    .cv-sidebar {
        top: var(--cv-topbar-h);
        height: calc(100vh - var(--cv-topbar-h));
        height: calc(100dvh - var(--cv-topbar-h));
    }
    .cv-sidebar .cv-sidebar-logo { display: none; }
    .cv-hamburger { min-width: 40px; min-height: 40px; }
    .cv-hamburger[aria-expanded="true"] { font-size: 0; }
    .cv-hamburger[aria-expanded="true"]::before { content: "✕"; font-size: 22px; }
}

/* v15.50.0 (17/10/2026, relato do Eduardo) — logado no celular, o "↩ Sair" (último item do menu)
   sumia: com a barra preta do WordPress (admin bar, 46 px) a regra antiga do cv-layout.css
   (.admin-bar .cv-sidebar, top 46px e 100vh) vencia a da v15.49.0. Agora o menu começa abaixo
   da barra do WordPress + barra do topo e usa só a altura visível. */
@media (max-width: 782px) {
    .admin-bar .cv-sidebar {
        top: calc(46px + var(--cv-topbar-h));
        height: calc(100vh - 46px - var(--cv-topbar-h));
        height: calc(100dvh - 46px - var(--cv-topbar-h));
    }
}

/* v15.51.0 (17/10/2026) — página da música: o fundo do topo é a capa, e pedaços do texto da capa
   (nome da música, logo) apareciam cortados atrás do título, principalmente no celular.
   Agora o fundo é uma cópia desfocada da capa (::before, um pouco maior que o topo para não
   deixar borda), por baixo do degradê claro que já existia. Fica só a "cor" da capa. */
.cv-musica-hero { overflow: hidden; }
.cv-musica-hero::before {
    content: "";
    position: absolute;
    inset: -40px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.15);
}

/* v15.51.0 — cartões com o selo "Lançamento": selo + ❤ + "+" não cabiam numa linha e o
   cv-public.css do plugin (flex-wrap: wrap) jogava o "+" sozinho para baixo, deixando o cartão
   mais alto que os outros. Agora ficam sempre numa linha só, com espaços menores. */
.cv-card-acoes { flex-wrap: nowrap; gap: 6px; }
.cv-card-acoes .cv-badge-lancamento { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px; font-size: 10.5px; }
.cv-card-acoes .cv-btn-favorite, .cv-card-acoes .cv-btn-add-playlist { flex-shrink: 0; }

/* ── 33. Capa do cartão do blog fora do 16:9 (v15.52.0, item 13) ──
   cv_blog_capa_attr() (functions.php) marca data-inteira quando a imagem não é
   16:9 (ex.: quadrada). Ela aparece inteira; a mesma imagem, desfocada,
   preenche as laterais. Capas do YouTube (16:9) continuam como antes. */
.cv-blog-card-img[data-inteira] { position: relative; }
.cv-blog-card-img[data-inteira]::before {
    content: ""; position: absolute; inset: -24px;
    background: var(--cv-capa-fundo) center / cover no-repeat;
    filter: blur(18px) brightness(.9);
}
.cv-blog-card-img[data-inteira] img { position: relative; object-fit: contain; }