/* ═══════════════════════════════════════════════════════════════════════════
   CIFRANET — DESIGN SYSTEM NOVO (06/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Arquivo NOVO e separado de propósito: nada no site carrega esta folha ainda.
   Ela entra só na página de teste (home-nova-20261006.php) até o responsável
   aprovar o desenho. Depois disso, o mesmo arquivo passa a ser carregado pelo
   casco (site-shell-20260710-2108.php) para o site inteiro.

   IDENTIDADE: branco + azul-marinho da casa (--cn-marinho) + laranja
   (--cn-laranja), cinzas muito claros, cards com canto suave e sombra discreta.
   Nada de gradiente pesado, nada de enfeite que custe: só CSS, sem biblioteca,
   sem fonte nova (a pilha do sistema já é rápida e não pisca ao trocar).

   REGRA: as classes começam com `cn-` para não colidir com o CSS que já existe
   no site (`.cfn-*` do casco, `.mpm-*` da comunidade). A única exceção são os
   ajustes escopados por `body.page-home-nova-20261006`, que só valem na página
   de teste.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
    --cn-marinho: #0b2447;
    --cn-marinho-claro: #123a6b;
    --cn-laranja: #ff6a00;
    --cn-laranja-escuro: #e35c00;
    --cn-laranja-suave: #fff2e8;
    --cn-fundo: #f6f7fb;
    --cn-fundo-2: #eef1f7;
    --cn-card: #ffffff;
    --cn-linha: #e6ebf5;
    --cn-tinta: #0f172a;
    --cn-tinta-2: #475569;
    --cn-tinta-3: #7b8494;
    --cn-verde: #0f766e;
    --cn-raio: 18px;
    --cn-raio-peq: 12px;
    --cn-raio-pill: 999px;
    --cn-sombra: 0 2px 6px rgba(15, 35, 66, .06), 0 12px 26px rgba(15, 35, 66, .07);
    --cn-sombra-alta: 0 10px 22px rgba(15, 35, 66, .10), 0 26px 50px rgba(15, 35, 66, .12);
    --cn-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cn-topo-alt: 62px;          /* altura da barra do topo no celular */
    --cn-barra-alt: 62px;         /* altura do menu inferior fixo */
}

/* ── 2. BOTÕES ─────────────────────────────────────────────────────────── */
.cn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 42px; padding: 0 1.05rem; border-radius: var(--cn-raio-pill);
    border: 1px solid var(--cn-linha); background: #fff; color: var(--cn-tinta);
    font: inherit; font-size: .93rem; font-weight: 700; line-height: 1; cursor: pointer;
    text-decoration: none !important; white-space: nowrap;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cn-btn:hover { transform: translateY(-1px); box-shadow: var(--cn-sombra); }
.cn-btn:active { transform: translateY(0); }
.cn-btn:focus-visible { outline: 3px solid rgba(255, 106, 0, .45); outline-offset: 2px; }
.cn-btn-laranja { background: var(--cn-laranja); border-color: var(--cn-laranja); color: #fff !important; box-shadow: 0 8px 18px rgba(255, 106, 0, .28); }
.cn-btn-laranja:hover { background: var(--cn-laranja-escuro); border-color: var(--cn-laranja-escuro); }
.cn-btn-marinho { background: var(--cn-marinho); border-color: var(--cn-marinho); color: #fff !important; }
.cn-btn-marinho:hover { background: var(--cn-marinho-claro); border-color: var(--cn-marinho-claro); }
.cn-btn-contorno { background: #fff; color: var(--cn-marinho) !important; border-color: #cfd8e6; }
.cn-btn-mini { min-height: 34px; padding: 0 .75rem; font-size: .82rem; }
.cn-btn-icone { width: 42px; min-width: 42px; padding: 0; }

/* ── 3. CARDS E TÍTULOS DE SEÇÃO ───────────────────────────────────────── */
.cn-card { background: var(--cn-card); border: 1px solid var(--cn-linha); border-radius: var(--cn-raio); box-shadow: var(--cn-sombra); }
.cn-secao { margin: 26px 0 0; }
.cn-secao-cabeca { display: flex; align-items: center; gap: .6rem; margin: 0 0 12px; }
.cn-secao-cabeca h2 { margin: 0; font-size: 1.12rem; font-weight: 800; color: var(--cn-tinta); letter-spacing: -.01em; }
.cn-secao-cabeca .cn-secao-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--cn-fundo-2); color: var(--cn-marinho); flex: 0 0 auto; }
.cn-secao-cabeca .cn-secao-mais { margin-left: auto; font-size: .86rem; font-weight: 700; color: var(--cn-marinho) !important; text-decoration: none !important; white-space: nowrap; }
.cn-secao-cabeca .cn-secao-mais:hover { color: var(--cn-laranja) !important; }

/* ── ABAS DAS LISTAS ("Mais tocadas" / "Da semana") ────────────────────── */
/* Feitas SÓ com CSS: um rádio escondido manda em qual painel aparece. Sem
   JavaScript novo, funciona no teclado (as setas trocam de aba) e o leitor de
   tela lê os rótulos. O rádio continua no fluxo (não é display:none) para
   poder receber o foco. */
.cn-abas { position: relative; }
.cn-aba-campo { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cn-abas-menu { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 12px; }
.cn-aba {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .9rem; border: 1px solid var(--cn-linha); border-radius: var(--cn-raio-pill);
    background: #fff; color: var(--cn-tinta-2); font-size: .84rem; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cn-aba:hover { border-color: #c3cddd; }
.cn-aba-campo-1:checked ~ .cn-abas-menu .cn-aba-l1,
.cn-aba-campo-2:checked ~ .cn-abas-menu .cn-aba-l2 { background: var(--cn-laranja); border-color: var(--cn-laranja); color: #fff; }
.cn-aba-campo-1:focus-visible ~ .cn-abas-menu .cn-aba-l1,
.cn-aba-campo-2:focus-visible ~ .cn-abas-menu .cn-aba-l2 { outline: 3px solid rgba(255, 106, 0, .45); outline-offset: 2px; }
.cn-aba-painel { display: block; }
.cn-aba-campo-1:checked ~ .cn-aba-p2,
.cn-aba-campo-2:checked ~ .cn-aba-p1 { display: none; }

/* ── 4. ABERTURA (título + busca) ─────────────────────────────────────── */
/* CUIDADO (lição de 06/10/2026): a classe NÃO pode ter a palavra "hero". O casco
   recorta da home qualquer `<section class="…hero…">` (é assim que ele tira o
   topo antigo da página) e, com "cn-hero", a abertura inteira era apagada — a
   home abria sem título e sem busca. "Abertura" não casa com nenhuma agulha do
   casco (`hero`, `home-search-wrap`, `home-shortcuts`, `home-missa-next`). */
.cn-abertura {
    position: relative; overflow: hidden; border-radius: 22px; color: #fff;
    padding: clamp(1.2rem, 3vw, 2.2rem); min-height: 230px;
    display: flex; flex-direction: column; justify-content: center; gap: .8rem;
    /* A FOTO de fundo é um arquivo que JÁ EXISTE no site
       (`assets/social/cifranet-hero-profissional.webp`: a sala azul-marinho com o
       violão). O azul fica de reserva para quem tem a imagem bloqueada. */
    background: var(--cn-marinho) url('/assets/social/cifranet-hero-profissional.webp') right center / cover no-repeat;
}
.cn-abertura::after { /* véu da esquerda: garante o texto legível sobre a foto */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 20, 40, .93) 0%, rgba(6, 20, 40, .8) 42%, rgba(6, 20, 40, .3) 100%);
}
.cn-abertura-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-abertura > * { position: relative; z-index: 1; }
.cn-abertura-titulo { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.85rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 900; color: #fff; text-shadow: 0 2px 12px rgba(4, 14, 30, .55); }
.cn-abertura-titulo b { color: var(--cn-laranja); }
.cn-abertura-sub { margin: 0; max-width: 620px; font-size: clamp(.95rem, 1.45vw, 1.08rem); color: #e4ecf8; text-shadow: 0 1px 8px rgba(4, 14, 30, .5); }
.cn-abertura-busca { display: flex; gap: .5rem; margin-top: .35rem; max-width: 660px; }
.cn-abertura-busca input {
    flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 1.1rem; border-radius: var(--cn-raio-pill);
    border: 0; background: #fff; color: var(--cn-tinta); font: inherit; font-size: .98rem;
    box-shadow: 0 10px 26px rgba(4, 14, 30, .28);
}
.cn-abertura-busca input::placeholder { color: var(--cn-tinta-3); }
.cn-abertura-busca button { flex: 0 0 auto; }
.cn-abertura-dica { margin: 0; font-size: .8rem; color: #cbd8ea; text-shadow: 0 1px 6px rgba(4, 14, 30, .5); }

/* ── 5. CAMINHOS (os quatro cards) ────────────────────────────────────── */
.cn-caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.cn-caminho { display: flex; gap: .8rem; padding: 1rem; align-items: flex-start; text-decoration: none !important; color: inherit !important; }
.cn-caminho:hover { transform: translateY(-2px); box-shadow: var(--cn-sombra-alta); }
.cn-caminho-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: 0 0 auto; }
.cn-caminho strong { display: block; font-size: .98rem; color: var(--cn-tinta); letter-spacing: -.01em; }
.cn-caminho span { display: block; margin-top: .18rem; font-size: .84rem; color: var(--cn-tinta-3); line-height: 1.45; }
.cn-caminho-1 .cn-caminho-ico { background: var(--cn-laranja-suave); color: var(--cn-laranja); }
.cn-caminho-2 .cn-caminho-ico { background: #e8f3ec; color: #1f7a45; }
.cn-caminho-3 .cn-caminho-ico { background: #e8f0fb; color: #2563eb; }
.cn-caminho-4 .cn-caminho-ico { background: #efeafd; color: #6d28d9; }

/* ── 6. CARD DE CIFRA (Em alta) ────────────────────────────────────────── */
.cn-grade-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cn-cifra { display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important; color: inherit !important; }
.cn-cifra:hover { transform: translateY(-2px); box-shadow: var(--cn-sombra-alta); }
.cn-cifra-capa { position: relative; aspect-ratio: 16 / 9; background: var(--cn-fundo-2); }
.cn-cifra-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-cifra-capa .cn-cifra-vazio { display: grid; place-items: center; width: 100%; height: 100%; color: var(--cn-tinta-3); }
.cn-cifra-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(11, 36, 71, .78); color: #fff; backdrop-filter: blur(2px);
}
.cn-cifra-txt { padding: .7rem .8rem .85rem; }
.cn-cifra-txt strong { display: block; font-size: .92rem; color: var(--cn-tinta); line-height: 1.25; }
.cn-cifra-txt em { display: block; margin-top: .12rem; font-style: normal; font-size: .8rem; color: var(--cn-tinta-3); }
.cn-cifra-dado { margin-top: .35rem; display: flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; color: var(--cn-tinta-3); }

/* ── 7. ARTISTAS ───────────────────────────────────────────────────────── */
.cn-grade-artistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.cn-artista { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .95rem .6rem; text-align: center; text-decoration: none !important; color: inherit !important; }
.cn-artista:hover { transform: translateY(-2px); box-shadow: var(--cn-sombra-alta); }
.cn-artista-foto { width: 82px; height: 82px; border-radius: 50%; overflow: hidden; background: var(--cn-fundo-2); display: grid; place-items: center; color: var(--cn-tinta-3); flex: 0 0 auto; }
.cn-artista-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-artista strong { font-size: .9rem; color: var(--cn-tinta); line-height: 1.25; }
.cn-artista span { font-size: .78rem; color: var(--cn-tinta-3); }

/* ── 8. CARDS DE ÁREA (missa, treino, comunidade…) ─────────────────────── */
.cn-painel { padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; }
.cn-painel h3 { margin: 0; font-size: 1rem; color: var(--cn-tinta); letter-spacing: -.01em; }
.cn-painel p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--cn-tinta-2); }
.cn-painel .cn-painel-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.cn-painel-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--cn-fundo-2); color: var(--cn-marinho); }
.cn-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cn-conteudo-diario { display: flex; flex-wrap: wrap; gap: .5rem; }
.cn-conteudo-diario a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: var(--cn-raio-pill); background: var(--cn-fundo-2); color: var(--cn-marinho) !important; font-size: .85rem; font-weight: 700; text-decoration: none !important; }
.cn-conteudo-diario a:hover { background: var(--cn-laranja-suave); color: var(--cn-laranja-escuro) !important; }

/* ── 9. COLUNA DIREITA ─────────────────────────────────────────────────── */
.cn-coluna { display: grid; gap: 12px; align-content: start; }
.cn-perfil-mini { display: flex; align-items: center; gap: .7rem; }
.cn-perfil-mini img, .cn-perfil-mini .cn-perfil-letra { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 800; color: #fff; flex: 0 0 auto; }
.cn-perfil-mini strong { display: block; font-size: .96rem; color: var(--cn-tinta); }
.cn-perfil-mini span { font-size: .8rem; color: var(--cn-tinta-3); }
.cn-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .85rem; }
.cn-numero { text-align: center; }
.cn-numero b { display: block; font-size: 1.05rem; color: var(--cn-tinta); }
.cn-numero span { font-size: .72rem; color: var(--cn-tinta-3); }
.cn-lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cn-lista a { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: var(--cn-raio-peq); color: var(--cn-marinho) !important; font-size: .88rem; font-weight: 650; text-decoration: none !important; }
.cn-lista a:hover { background: var(--cn-fundo-2); }
.cn-lista .cn-lista-seta { margin-left: auto; color: var(--cn-tinta-3); }

/* ── 10. ANÚNCIO (espaço reservado, sem CLS) ───────────────────────────── */
.cn-anuncio { min-height: 100px; display: grid; place-items: center; overflow: hidden; }
.cn-anuncio-etiqueta { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cn-tinta-3); }

/* ── 11. MENU INFERIOR DO CELULAR ──────────────────────────────────────── */
.cn-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: none; align-items: stretch; justify-content: space-around;
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cn-linha);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 20px rgba(15, 35, 66, .07);
}
.cn-barra-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--cn-barra-alt); padding: .4rem .2rem; border: 0; background: transparent;
    color: var(--cn-tinta-3); font: inherit; font-size: .68rem; font-weight: 700;
    text-decoration: none !important; cursor: pointer;
}
.cn-barra-item.is-on { color: var(--cn-laranja); }
.cn-barra-item.is-on svg { stroke: var(--cn-laranja); }
.cn-barra-item:focus-visible { outline: 3px solid rgba(255, 106, 0, .4); outline-offset: -3px; }
.cn-barra-espaco { display: none; height: calc(var(--cn-barra-alt) + 16px + env(safe-area-inset-bottom, 0px)); }

/* A barra divide o espaço em partes IGUAIS — inclusive o botão "Mais", que vem
   do componente do casco (`.cfn-mais-barra`). Sem isto, os rótulos quebravam em
   várias linhas e a barra virava um bloco de 180 px no celular pequeno. */
.cn-barra > * { flex: 1 1 0; min-width: 0; }
.cn-barra .cfn-mais { display: flex; }
.cn-barra .cfn-mais-veu { position: fixed; inset: 0; }
.cn-barra .cfn-mais-btn-barra {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .4rem .2rem; border: 0; background: transparent; color: var(--cn-tinta-3);
    font: inherit; font-size: .68rem; font-weight: 700; line-height: 1.1; min-height: var(--cn-barra-alt); cursor: pointer;
}
.cn-barra .cfn-mais-btn-barra .cfn-mais-ico { display: inline-flex; font-size: 0; }
.cn-barra .cfn-mais-btn-barra .cfn-mais-ico svg { width: 22px; height: 22px; display: block; }
.cn-barra .cfn-mais-btn-barra:hover { background: var(--cn-fundo-2); }
.cn-barra .cfn-mais-btn-barra:focus-visible { outline: 3px solid rgba(255, 106, 0, .4); outline-offset: -3px; }
.cn-barra-item span, .cn-barra .cfn-mais-rotulo { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
    .cn-barra-item, .cn-barra .cfn-mais-btn-barra { font-size: .6rem; }
    .cn-barra-item svg, .cn-barra .cfn-mais-btn-barra .cfn-mais-ico svg { width: 20px; height: 20px; }
}

/* ── 12. LAYOUT ────────────────────────────────────────────────────────── */
.cn-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cn-home-principal { min-width: 0; }
@media (min-width: 1100px) {
    .cn-home { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ── 13. CELULAR ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .cn-abertura { min-height: 0; padding: 1.15rem 1.05rem 1.25rem; border-radius: 18px; }
    /* Carrossel: uma linha que arrasta para o lado (no lugar de 12 cards empilhados). */
    .cn-carrossel {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(152px, 46%);
        gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cn-carrossel::-webkit-scrollbar { display: none; }
    .cn-carrossel > * { scroll-snap-align: start; }
    .cn-grade-artistas { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cn-grade-artistas::-webkit-scrollbar { display: none; }
    .cn-grade-artistas > * { scroll-snap-align: start; }
    .cn-caminhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cn-caminho { flex-direction: column; gap: .5rem; padding: .85rem; }
    .cn-caminho-ico { width: 40px; height: 40px; }
    .cn-caminho strong { font-size: .92rem; }
    .cn-caminho span { font-size: .78rem; }
    .cn-barra { display: flex; }
    .cn-barra-espaco { display: block; }
    .cn-abertura-busca input { height: 44px; font-size: 16px; } /* 16px evita o zoom do iOS ao focar */
}

/* ── 14. COLUNA DA DIREITA — PERFIL, ATIVIDADES E ATRATIVOS ────────────── */
/* O desenho aprovado em 06/10/2026: "Meu perfil" com os números da conta,
   "Últimas atividades", "Continue explorando" (com descrição) e o convite.
   Nenhum número nasce aqui: o que aparece é o que o membro tem de verdade — sem
   conta, a coluna mostra o convite para criar conta. */
.cn-painel-topo { display: flex; align-items: center; gap: .5rem; }
.cn-painel-topo h2,
.cn-painel-titulo { margin: 0; font-size: 1rem; font-weight: 800; color: var(--cn-tinta); letter-spacing: -.01em; }
.cn-painel-topo .cn-secao-mais { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--cn-marinho) !important; text-decoration: none !important; white-space: nowrap; }
.cn-painel-topo .cn-secao-mais:hover { color: var(--cn-laranja) !important; }
.cn-perfil-mini .cn-perfil-quem { min-width: 0; }
.cn-perfil-mini .cn-perfil-quem strong { font-size: 1.02rem; }
/* A foto do membro vem do MESMO componente do site (`cfn_social_avatar`), que
   entrega <img> ou o círculo com a inicial — os dois precisam ficar redondos e do
   mesmo tamanho aqui. */
.cn-perfil-foto { flex: 0 0 auto; display: grid; place-items: center; }
.cn-perfil-foto .cfn-social-avatar,
.cn-perfil-foto img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; display: block; }
.cn-perfil-foto .cfn-social-avatar-inicial { display: grid; place-items: center; background: var(--cn-marinho); color: #fff; font-size: 1.15rem; font-weight: 800; }
.cn-perfil-quem em { display: block; font-style: normal; font-size: .8rem; color: var(--cn-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-perfil-letra { font-size: 1.15rem; background: var(--cn-marinho); }
.cn-numeros { border-top: 1px solid var(--cn-linha); padding-top: .7rem; }
.cn-numero b { font-size: 1.08rem; letter-spacing: -.02em; }
.cn-atividades { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .1rem; }
.cn-atividades a,
.cn-atividades .cn-atividade { display: flex; align-items: center; gap: .6rem; padding: .5rem .45rem; border-radius: var(--cn-raio-peq); text-decoration: none !important; color: inherit !important; }
.cn-atividades a:hover { background: var(--cn-fundo-2); }
.cn-atividade-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--cn-fundo-2); color: var(--cn-marinho); flex: 0 0 auto; }
.cn-atividade-txt { min-width: 0; }
.cn-atividade-txt strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .85rem; font-weight: 700; color: var(--cn-tinta); line-height: 1.3;
}
.cn-atividade-txt small { display: block; margin-top: .1rem; font-size: .73rem; color: var(--cn-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-explorar { list-style: none; margin: .15rem 0 0; padding: 0; display: grid; gap: .25rem; }
.cn-explorar a { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border-radius: var(--cn-raio-peq); text-decoration: none !important; color: inherit !important; }
.cn-explorar a:hover { background: var(--cn-fundo-2); }
.cn-explorar-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; }
.cn-explorar-txt { min-width: 0; }
.cn-explorar-txt strong { display: block; font-size: .88rem; font-weight: 700; color: var(--cn-tinta); }
.cn-explorar-txt small { display: block; font-size: .73rem; color: var(--cn-tinta-3); }
/* As cores abaixo são SÓ para os ícones das listas ("Continue explorando").
   ATENÇÃO (06/10/2026): antes elas valiam para qualquer elemento com a classe
   `cn-cor-*` — e pintavam a LINHA INTEIRA do menu da esquerda (que também leva
   `cn-cor-*`, para escolher a cor do ícone dela). O menu ficava com as linhas
   coloridas em vez de brancas, como no desenho. Agora o fundo só entra no
   elemento do ícone. */
.cn-explorar-ico.cn-cor-azul { background: #e8f0fb; color: #2563eb; }
.cn-explorar-ico.cn-cor-roxo { background: #efeafd; color: #6d28d9; }
.cn-explorar-ico.cn-cor-laranja { background: var(--cn-laranja-suave); color: var(--cn-laranja); }
.cn-explorar-ico.cn-cor-verde { background: #e8f3ec; color: #1f7a45; }
.cn-explorar-ico.cn-cor-rosa { background: #fdeaf2; color: #be185d; }
.cn-explorar-ico.cn-cor-dourado { background: #fdf3e0; color: #b45309; }
.cn-explorar-ico.cn-cor-vermelho { background: #fee9e9; color: #c62828; }
.cn-explorar-ico.cn-cor-ciano { background: #e6f6f8; color: #0e7490; }
.cn-explorar-ico.cn-cor-marinho { background: #e8eefb; color: #0b2447; }
.cn-promo { border: 0; padding: 1.15rem 1.15rem 1.25rem; background: radial-gradient(125% 125% at 100% 0%, #1b4b86 0%, #0b2447 62%); color: #fff; }
.cn-promo h2 { margin: 0; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.cn-promo p { color: rgba(255, 255, 255, .84); }
.cn-promo .cn-btn { align-self: flex-start; margin-top: .55rem; }
.cn-anuncio-lado { min-height: 250px; display: grid; place-items: center; gap: .35rem; overflow: hidden; }
.cn-anuncio-lado .adsbygoogle { display: block; width: 100%; }
@media (max-width: 1099px) {
    .cn-anuncio-lado { min-height: 120px; margin-top: 4px; }
    .cn-numeros { gap: .25rem; }
}

/* ── 15. A COLUNA DO MENU (esquerda) ───────────────────────────────────── */
/* Esta coluna é do casco e vale em TODAS as páginas: aqui ela é só repintada
   com os tokens do desenho novo — MESMOS itens, MESMOS endereços e as MESMAS
   medidas (posição fixa, 272 px de largura e a rolagem continuam como estavam).
   Só vale no computador: no celular a coluna é a faixa rolável do casco. */
@media (min-width: 1200px) {
    body.cifranet-shell.cfn-com-lado .cfn-lado { gap: 10px; }

    /* ── A MARCA (logo) da coluna, como no desenho aprovado ──────────────
       O casco pinta a logo como uma PLACA azul-marinho. No desenho ela é o
       quadrado laranja com a nota e o nome CifraNET direto no branco da coluna,
       com o NET em laranja. Três classes + !important para vencer a regra do
       casco em qualquer ordem de carregamento. */
    body.cifranet-shell .cfn-lado .cfn-lado-marca {
        background: transparent !important; box-shadow: none !important;
        padding: 4px 2px !important; border-radius: 0 !important; gap: .6rem;
        font-size: 1.34rem; letter-spacing: -.02em; color: var(--cn-marinho) !important;
    }
    body.cifranet-shell .cfn-lado .cfn-lado-marca:hover { box-shadow: none !important; }
    body.cifranet-shell .cfn-lado .cfn-lado-marca b { color: var(--cn-laranja); font-weight: 900; }
    body.cifranet-shell .cfn-lado .cfn-lado-marca-ico {
        width: 42px !important; height: 42px !important; border-radius: 13px;
        background: linear-gradient(135deg, #ff8f45 0%, #ff6a00 100%) !important;
        color: #fff !important; box-shadow: 0 8px 18px rgba(255, 106, 0, .3);
    }
    body.cifranet-shell .cfn-lado .cfn-lado-marca-ico svg { width: 24px; height: 24px; stroke-width: 2; }

    body.cifranet-shell .cfn-lado-marcas { padding: 2px 4px 6px; }
    body.cifranet-shell .cfn-lado-menu { border-radius: 18px; border-color: var(--cn-linha); box-shadow: var(--cn-sombra); }
    body.cifranet-shell .cfn-lado-item { border-radius: 12px; font-weight: 700 !important; }
    body.cifranet-shell .cfn-lado-item:hover { background: var(--cn-fundo-2); }
    body.cifranet-shell .cfn-lado-item.is-on { background: linear-gradient(135deg, var(--cn-marinho) 0%, #17457f 100%); }
    body.cifranet-shell .cfn-lado-ico { width: 30px !important; height: 30px !important; border-radius: 10px; }
    /* A COR de cada item vem do PRÓPRIO item (`cifranet_lado_menu_itens`): mudar
       a ordem da lista não troca a cor de ninguém. */
    body.cifranet-shell .cfn-lado-item.cn-cor-laranja .cfn-lado-ico { background: var(--cn-laranja-suave); color: var(--cn-laranja); }
    body.cifranet-shell .cfn-lado-item.cn-cor-azul .cfn-lado-ico { background: #e8f0fb; color: #2563eb; }
    body.cifranet-shell .cfn-lado-item.cn-cor-verde .cfn-lado-ico { background: #e8f3ec; color: #1f7a45; }
    body.cifranet-shell .cfn-lado-item.cn-cor-roxo .cfn-lado-ico { background: #efeafd; color: #6d28d9; }
    body.cifranet-shell .cfn-lado-item.cn-cor-rosa .cfn-lado-ico { background: #fdeaf2; color: #be185d; }
    body.cifranet-shell .cfn-lado-item.cn-cor-dourado .cfn-lado-ico { background: #fdf3e0; color: #b45309; }
    body.cifranet-shell .cfn-lado-item.cn-cor-vermelho .cfn-lado-ico { background: #fee9e9; color: #c62828; }
    body.cifranet-shell .cfn-lado-item.cn-cor-ciano .cfn-lado-ico { background: #e6f6f8; color: #0e7490; }
    body.cifranet-shell .cfn-lado-item.cn-cor-marinho .cfn-lado-ico { background: #e8eefb; color: #0b2447; }
    body.cifranet-shell .cfn-lado-item.is-on .cfn-lado-ico { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
    body.cifranet-shell .cfn-lado-card { border-radius: 18px; border-color: var(--cn-linha); box-shadow: var(--cn-sombra); }
}

/* ── 16. "MINHAS COLEÇÕES" NA COLUNA DO MENU ───────────────────────────── */
/* A seção entra no desenho aprovado, mas COMPACTA (duas estantes por linha):
   assim ela não empurra o Calendário das missas para fora da vista — a coluna é
   fixa e tem rolagem própria. */
@media (min-width: 1200px) {
    body.cifranet-shell .cfn-lado-colecoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    body.cifranet-shell .cfn-lado-colecoes .cfn-lado-titulo { grid-column: 1 / -1; margin: 0 4px 2px; }
    body.cifranet-shell .cfn-lado-colecoes .cfn-lado-item { gap: 7px; padding: 7px 8px; font-size: 13px !important; white-space: nowrap; overflow: hidden; }
    body.cifranet-shell .cfn-lado-colecoes .cfn-lado-item::after { display: none; }
    body.cifranet-shell .cfn-lado-colecoes .cfn-lado-ico { width: 26px !important; height: 26px !important; font-size: 12px; }
}

/* ── 17. A HOME NOVA DENTRO DO CASCO ───────────────────────────────────── */
/* Depois de aprovada, a home nova passa a ser a página inicial do site: o miolo
   que já existia (cartões da missa, propaganda e o texto indexado) continua
   logo abaixo dela, como hoje — nada indexado sai do ar. */
.cn-home-pagina { max-width: 1240px; margin: 0 auto; padding: 16px 14px 8px; }
@media (max-width: 1099px) { .cn-home-pagina { padding: 12px 12px 0; } }

/* A barra do casco sai de cena na home: ali a barra é a da própria home (com o
   "Mais" do site dentro). Nas outras páginas, nada muda. */
body.cifranet-shell.page-index .cfn-pe { display: none !important; }

/* No desenho aprovado, a home NÃO tem o cartão de perfil no topo: quem está
   logado vê "Meu perfil" na coluna da direita, com os números e o "Ver perfil".
   O cartão grande do casco (`.cfn-perfil`, dentro do cabeçalho) sai de cena SÓ na
   home — nas outras páginas continua igual. O "Sair" continua na coluna da
   esquerda e a barra do topo (sino, recados e o menu da conta) não se mexe. */
body.cifranet-shell.page-index .cfn-topo-perfil .cfn-perfil { display: none !important; }

/* Blindagem do miolo novo contra o estilo do casco: as três classes
   (`body.cifranet-shell` + `.cn-home-pagina` + o elemento) vencem em qualquer
   ordem de carregamento — foi o que resolveu o mesmo problema na cifra. */
body.cifranet-shell .cn-home-pagina h1,
body.cifranet-shell .cn-home-pagina .cn-abertura-titulo { color: #fff !important; }
body.cifranet-shell .cn-home-pagina .cn-abertura-titulo { font-size: clamp(1.65rem, 4.1vw, 2.4rem) !important; }
body.cifranet-shell .cn-home-pagina h2,
body.cifranet-shell .cn-home-pagina h3 { color: var(--cn-tinta) !important; }
body.cifranet-shell .cn-home-pagina .cn-caminho strong,
body.cifranet-shell .cn-home-pagina .cn-cifra-txt strong,
body.cifranet-shell .cn-home-pagina .cn-artista strong { color: var(--cn-tinta) !important; }
body.cifranet-shell .cn-home-pagina .cn-painel p,
body.cifranet-shell .cn-home-pagina .cn-caminho span { color: var(--cn-tinta-2) !important; }
body.cifranet-shell .cn-home-pagina .cn-promo h2,
body.cifranet-shell .cn-home-pagina .cn-promo p { color: #fff !important; }
body.cifranet-shell .cn-home-pagina .cn-btn { font-size: .9rem !important; }