/* =====================================================================
   Lista de comunidades (public/comunidades.php)
   Medalhões redondos com auréola, brilho e inclinação 3D ao passar o
   mouse; órbita de medalhões no topo; agenda semanal de missas.
   Usa os tokens de style.css.
   ===================================================================== */

.cm-sobretitulo { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado); margin-bottom: 10px; }

/* ---------- TOPO ---------- */
.cm-hero {
    position: relative; overflow: hidden; color: #fff; padding: 64px 0 110px;
    background:
        radial-gradient(ellipse 60% 70% at 78% 45%, rgba(226,183,101,.20), transparent 70%),
        radial-gradient(ellipse 50% 60% at 10% 110%, rgba(29,78,137,.55), transparent 70%),
        linear-gradient(160deg, var(--azul-profundo) 0%, var(--azul-escuro) 55%, #0e3364 100%);
}
.cm-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
    background: var(--creme);
    clip-path: ellipse(75% 100% at 50% 100%);
}
.cm-hero-estrelas {
    position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 32% 68%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 48% 18%, var(--dourado-claro) 50%, transparent 51%),
        radial-gradient(1px 1px at 62% 82%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 14%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 94% 64%, var(--dourado-claro) 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 36%, #fff 50%, transparent 51%);
    animation: cm-cintilar 6s ease-in-out infinite alternate;
}
@keyframes cm-cintilar { from { opacity: .25; } to { opacity: .6; } }

.cm-hero-grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.cm-hero-grade.sem-orbita { grid-template-columns: 1fr; max-width: 760px; }
.cm-trilha { font-size: 12.5px; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.cm-trilha a { color: #fff; }
.cm-trilha a:hover { color: var(--dourado-claro); }
.cm-trilha span { margin: 0 8px; }
.cm-hero .cm-sobretitulo { color: var(--dourado-claro); }
.cm-hero h1 { color: #fff; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.02; margin-bottom: 18px; }
.cm-hero h1 em { display: block; font-style: italic; font-weight: 500; color: var(--dourado-claro); }
.cm-hero-lead { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.85); max-width: 520px; }
.cm-numeros { display: flex; flex-wrap: wrap; gap: 14px 38px; margin-top: 30px; }
.cm-numeros div { position: relative; padding-left: 16px; }
.cm-numeros div::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--dourado-claro), transparent); }
.cm-numeros dt { font-family: var(--fonte-titulo); font-size: 38px; line-height: 1; color: #fff; }
.cm-numeros dd { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 6px; }

/* ---------- ÓRBITA DE MEDALHÕES ---------- */
.cm-orbita {
    --raio: 172px; --item: 98px; --volta: 90s;
    position: relative; width: calc(var(--raio) * 2 + var(--item)); aspect-ratio: 1; justify-self: center;
}
.cm-orbita-trilho {
    position: absolute; inset: calc(var(--item) / 2); border-radius: 50%;
    border: 1px dashed rgba(226,183,101,.45);
    box-shadow: 0 0 0 28px rgba(226,183,101,.04), inset 0 0 60px rgba(226,183,101,.08);
}
.cm-orbita-centro {
    position: absolute; left: 50%; top: 50%; width: calc(var(--raio) * .78); aspect-ratio: 1; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--dourado-claro);
    background: radial-gradient(circle, rgba(226,183,101,.28), rgba(226,183,101,0) 70%);
}
.cm-orbita-centro img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 6px 22px rgba(226,183,101,.45)); animation: cm-pulsar 5s ease-in-out infinite; }
@keyframes cm-pulsar { 50% { transform: scale(1.05); filter: drop-shadow(0 6px 32px rgba(226,183,101,.7)); } }
.cm-orbita-anel { position: absolute; inset: 0; animation: cm-girar var(--volta) linear infinite; }
.cm-orbita-item {
    position: absolute; left: 50%; top: 50%; width: var(--item); height: var(--item); margin: calc(var(--item) / -2) 0 0 calc(var(--item) / -2);
    transform: rotate(var(--ang)) translateY(calc(var(--raio) * -1)) rotate(calc(var(--ang) * -1));
}
.cm-orbita-item a { display: block; width: 100%; height: 100%; animation: cm-girar var(--volta) linear infinite reverse; }
.cm-orbita-item img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); transition: transform .35s cubic-bezier(.2,.8,.3,1.4);
}
.cm-orbita-item img.e-foto { border: 3px solid var(--dourado-claro); }
.cm-orbita-item a:hover img { transform: scale(1.18); }
.cm-orbita:hover .cm-orbita-anel, .cm-orbita:hover .cm-orbita-item a { animation-play-state: paused; }
@keyframes cm-girar { to { transform: rotate(360deg); } }
/* 9–10 e 11–12 medalhões: anel um pouco maior e medalhões menores, sem encostar */
.cm-orbita.e-cheia { --raio: 182px; --item: 88px; }
.cm-orbita.e-lotada { --raio: 188px; --item: 78px; }

/* ---------- FILTROS ---------- */
.cm-lista { padding: 0 0 80px; }
.cm-filtros {
    position: relative; z-index: 2; margin: -54px auto 46px; max-width: 980px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
    background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: var(--sombra-forte);
    border: 1px solid rgba(192,138,45,.18);
}
.cm-busca { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; color: var(--dourado); background: var(--creme); border-radius: 12px; padding: 0 14px; }
.cm-busca input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--azul-escuro); padding: 12px 0; outline: none; }
.cm-busca:focus-within { box-shadow: 0 0 0 2px var(--dourado-claro); }
.cm-dias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-dias-rotulo { font-size: 12.5px; color: #8a8478; margin-right: 4px; }
.cm-dias button {
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 7px 12px; border-radius: 30px;
    border: 1px solid #e6dcc8; background: #fff; color: var(--azul-escuro); transition: background .2s, color .2s, border-color .2s;
}
.cm-dias button:hover { border-color: var(--dourado); }
.cm-dias button.e-hoje { border-color: var(--dourado); color: var(--dourado); font-weight: 600; }
.cm-dias button.ativo { background: var(--azul-escuro); border-color: var(--azul-escuro); color: #fff; }

/* ---------- GRADE DE CARDS ---------- */
/* flex em vez de grid: a última linha incompleta (ex.: 1 comunidade sozinha) fica centralizada */
.cm-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 28px; }
.cm-grade > .cm-card { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; }
@media (max-width: 1000px) { .cm-grade > .cm-card { flex-basis: calc((100% - 28px) / 2); } }
.cm-card { --cor-com: var(--dourado); }
.cm-card[hidden] { display: none; }
.cm-card-link {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 26px 24px; border-radius: 24px; overflow: hidden;
    background: #fff; box-shadow: var(--sombra); border: 1px solid rgba(192,138,45,.12);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.cm-card-link::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 62%; z-index: 0; pointer-events: none; transition: opacity .45s;
    background: radial-gradient(ellipse 75% 85% at 50% 0%, var(--cor-com), transparent 72%); opacity: .14;
}
@supports (background: color-mix(in srgb, red, blue)) {
    .cm-card-link::before { background: radial-gradient(ellipse 75% 85% at 50% 0%, color-mix(in srgb, var(--cor-com) 70%, var(--dourado-claro)), transparent 72%); }
}
.cm-card-link:hover, .cm-card-link:focus-visible { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(11,42,82,.18); border-color: rgba(192,138,45,.45); }
.cm-card-link:hover::before, .cm-card-link:focus-visible::before { opacity: .3; }
.cm-card-link:focus-visible { outline: 3px solid var(--dourado-claro); outline-offset: 3px; }

/* Medalhão */
.cm-medalhao {
    --tam: 230px; --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 18%;
    position: relative; z-index: 1; width: var(--tam); aspect-ratio: 1; margin: 6px auto 22px; perspective: 800px;
}
.cm-disco {
    position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1); transform-style: preserve-3d;
    box-shadow: 0 16px 30px rgba(7,29,59,.25), 0 3px 8px rgba(7,29,59,.12);
    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* corrige o recorte redondo no Safari durante a animação */
}
.cm-disco img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.cm-medalhao.e-foto .cm-disco { border: 5px solid #fff; outline: 2px solid var(--dourado-claro); outline-offset: -9px; }

/* Brilho que segue o mouse + faixa de luz que atravessa */
.cm-brilho {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.65), rgba(255,255,255,0) 48%);
    mix-blend-mode: soft-light;
}
.cm-brilho::after {
    content: ''; position: absolute; inset: -10%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 49%, rgba(255,247,225,.15) 54%, transparent 62%);
    transform: translateX(-110%); mix-blend-mode: overlay;
}

/* Auréola: raios dourados girando + arco de luz em volta */
.cm-aureola {
    position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.82);
    background: repeating-conic-gradient(from 0deg, rgba(226,183,101,.75) 0deg 1.1deg, transparent 1.1deg 7.5deg);
    -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 72%, rgba(0,0,0,.5) 86%, transparent 100%);
            mask: radial-gradient(closest-side, transparent 66%, #000 72%, rgba(0,0,0,.5) 86%, transparent 100%);
    transition: opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1);
    animation: cm-girar 50s linear infinite; animation-play-state: paused;
}
.cm-aureola::after {
    content: ''; position: absolute; inset: 13%; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(226,183,101,.0) 64%, #ffe3a3 88%, transparent 92%);
    -webkit-mask: radial-gradient(closest-side, transparent 95%, #000 96.5%);
            mask: radial-gradient(closest-side, transparent 95%, #000 96.5%);
    animation: cm-girar 3.2s linear infinite reverse;
}

.cm-card-link:hover .cm-aureola, .cm-card-link:focus-visible .cm-aureola { opacity: 1; transform: scale(1); animation-play-state: running; }
.cm-card-link:hover .cm-disco, .cm-card-link:focus-visible .cm-disco {
    transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05);
    box-shadow: 0 28px 46px rgba(7,29,59,.32), 0 0 0 6px rgba(226,183,101,.18), 0 0 46px rgba(226,183,101,.35);
}
.cm-card-link:hover .cm-disco img { transform: scale(1.04); }
.cm-card-link:hover .cm-brilho, .cm-card-link:focus-visible .cm-brilho { opacity: 1; }
.cm-card-link:hover .cm-brilho::after, .cm-card-link:focus-visible .cm-brilho::after { transform: translateX(110%); transition: transform 1.1s cubic-bezier(.3,.6,.2,1); }

/* Medalhão desenhado (comunidade ainda sem imagem) */
.cm-medalhao.e-vazio .cm-disco {
    background: radial-gradient(circle at 50% 35%, #1d4e89, var(--azul-profundo) 72%);
    border: 7px solid var(--dourado-claro); box-shadow: 0 16px 30px rgba(7,29,59,.25), inset 0 0 0 3px var(--azul-profundo), inset 0 0 0 5px rgba(226,183,101,.6);
}
.cm-disco-desenho { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--dourado-claro); }
.cm-disco-desenho small { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* Selo da festa do padroeiro */
.cm-festa {
    position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
    background: linear-gradient(135deg, var(--dourado), var(--dourado-claro)); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
    padding: 6px 14px; border-radius: 30px; box-shadow: 0 6px 14px rgba(192,138,45,.4);
}
.cm-festa.e-hoje { animation: cm-pulsar-selo 1.8s ease-in-out infinite; }
@keyframes cm-pulsar-selo { 50% { box-shadow: 0 6px 14px rgba(192,138,45,.4), 0 0 0 8px rgba(226,183,101,.25); } }

/* Texto do card */
.cm-card-corpo { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cm-padroeiro { font-size: 11.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cor-com); }
.cm-card-corpo h2 { font-size: 25px; line-height: 1.2; margin: 6px 0 6px; transition: color .3s; }
.cm-card-link:hover h2 { color: var(--azul-medio); }
.cm-bairro { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: #7a7466; }
.cm-bairro .icone { color: var(--dourado); }
.cm-resumo { font-size: 14px; line-height: 1.65; margin-top: 12px; color: var(--cinza-texto); }
.cm-horarios { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.cm-horarios li { font-size: 12.5px; padding: 4px 10px; border-radius: 20px; background: var(--creme); color: var(--azul-escuro); border: 1px solid #efe6d4; }
.cm-horarios li b { font-weight: 600; color: var(--dourado); margin-right: 2px; }
.cm-horarios li.e-hoje { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }
.cm-horarios li.e-hoje b { color: var(--dourado-claro); }
.cm-rodape-card { margin-top: auto; padding-top: 20px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cm-hoje { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1e7a4c; background: #e7f5ec; padding: 5px 11px; border-radius: 20px; }
.cm-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--azul-escuro); padding-bottom: 3px; border-bottom: 2px solid var(--dourado-claro); }
.cm-cta .icone { transition: transform .3s; }
.cm-card-link:hover .cm-cta .icone { transform: translateX(5px); }

.cm-nenhuma { text-align: center; padding: 30px 0; color: #7a7466; }
.cm-nenhuma button { font: inherit; color: var(--dourado); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* ---------- AGENDA SEMANAL ---------- */
.cm-agenda { padding: 80px 0; background: var(--creme-escuro); border-top: 1px solid #ece2cf; }
.cm-cabecalho { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.cm-cabecalho h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.15; margin-bottom: 10px; }
.cm-cabecalho p { font-size: 14.5px; }
.cm-cabecalho a { color: var(--dourado); font-weight: 500; text-decoration: underline; }
.cm-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cm-dia { background: #fff; border-radius: 16px; padding: 16px 14px; box-shadow: var(--sombra); border-top: 3px solid transparent; }
.cm-dia.e-hoje { border-top-color: var(--dourado); box-shadow: 0 14px 30px rgba(192,138,45,.2); }
.cm-dia h3 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cm-dia h3 span { font-family: var(--fonte-texto); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--dourado); padding: 2px 8px; border-radius: 10px; }
.cm-dia ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cm-dia li { padding-left: 10px; border-left: 3px solid var(--cor-com); line-height: 1.3; }
.cm-dia time { display: block; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600; color: var(--azul-escuro); }
.cm-dia li a { font-size: 13px; color: var(--cinza-texto); }
.cm-dia li a:hover { color: var(--dourado); }
.cm-dia li small { display: block; font-size: 11.5px; color: #8a8478; margin-top: 2px; }
.cm-dia-vazio { font-size: 12.5px; color: #a39d90; font-style: italic; }

/* ---------- CONVITE ---------- */
.cm-convite {
    text-align: center; color: #fff; padding: 78px 0;
    background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(226,183,101,.22), transparent 70%), linear-gradient(160deg, var(--azul-escuro), var(--azul-profundo));
}
.cm-convite-cruz { display: inline-flex; color: var(--dourado-claro); margin-bottom: 14px; }
.cm-convite-frase { font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.4; max-width: 760px; margin: 0 auto; }
.cm-convite-ref { margin-top: 12px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado-claro); }
.cm-convite-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.cm-botao { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 40px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,.4); color: #fff; transition: background .25s, border-color .25s, transform .25s; }
.cm-botao:hover { border-color: var(--dourado-claro); transform: translateY(-2px); }
.cm-botao-cheio { background: var(--dourado); border-color: var(--dourado); }
.cm-botao-cheio:hover { background: var(--dourado-claro); }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1100px) {
    .cm-semana { grid-template-columns: repeat(7, minmax(170px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin: 0 -4px; }
    .cm-dia { scroll-snap-align: start; }
}
@media (max-width: 900px) {
    .cm-hero { padding: 40px 0 100px; }
    .cm-hero-grade { grid-template-columns: 1fr; gap: 30px; }
    .cm-hero-texto { text-align: center; }
    .cm-hero-lead { margin: 0 auto; }
    .cm-numeros { justify-content: center; }
    .cm-orbita { --raio: 122px; --item: 70px; }
    .cm-orbita.e-cheia { --raio: 128px; --item: 62px; }
    .cm-orbita.e-lotada { --raio: 132px; --item: 54px; }
}
@media (max-width: 560px) {
    .cm-hero h1 { font-size: 40px; }
    .cm-numeros { gap: 14px 24px; }
    .cm-numeros dt { font-size: 30px; }
    .cm-filtros { margin-top: -60px; padding: 12px; }
    .cm-dias-rotulo { width: 100%; }
    .cm-grade > .cm-card { flex-basis: 100%; }
    .cm-medalhao { --tam: 210px; }
    .cm-agenda, .cm-convite { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-hero-estrelas, .cm-orbita-anel, .cm-orbita-item a, .cm-orbita-centro img, .cm-aureola, .cm-aureola::after, .cm-festa.e-hoje { animation: none !important; }
    .cm-card-link, .cm-disco, .cm-disco img, .cm-brilho::after { transition: none !important; }
}