:root {
    --grad-a: #1aa0ff;
    --grad-b: #0c73f6;
    --white: #fff;
    --dim: #e7f0ffcc;
}
/* Evita barra de rolagem horizontal em qualquer situação */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}

/* ====== MOBILE INTRO (só mobile) ====== */
/* Por padrão, aparece (mobile). Em >=768px some (veja media query no fim). */
.mobile-intro {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
    padding: 16px;
    padding-bottom: 46px;
}

.phone {
    width: 100%;
    max-width: 640px; /* delimita para não “espichar” muito em tablets */
    color: #fff;
    border-radius: 0;
    box-shadow: none;
}

.brand {
    display: block;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    text-align: center;
}

    .brand h1 {
        margin: 0;
        font-weight: 800;
        font-size: 1.6rem
    }

        .brand h1 span {
            font-weight: 600;
            opacity: .9
        }

.grid-mobile {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px 10px;
    margin-top: 8px;
}

/* Botões: nunca forçar nowrap; permitir quebra para não estourar */
.tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg,#ffffff1c,#ffffff10);
    border: 1px solid #ffffff2b;
    border-radius: 16px;
    aspect-ratio: 1/1;
    min-height: 96px;
    padding: 8px;
    transition: transform .12s ease, background .2s, border-color .2s;
    min-width: 0; /* importante p/ grid não forçar overflow */
}

    .tile:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg,#ffffff26,#ffffff12);
        border-color: #ffffff66
    }

    .tile i {
        font-size: 28px;
        filter: drop-shadow(0 1px 4px #072a7d55)
    }

    .tile span {
        font-size: .84rem;
        color: var(--dim);
        line-height: 1.15;
        white-space: normal; /* <- garante quebra */
        overflow-wrap: anywhere; /* <- evita overflow por palavras longas */
        word-break: break-word; /* <- fallback */
    }

.scroll-hint {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    opacity: .9
}

    .scroll-hint a {
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px
    }

    .scroll-hint i {
        font-size: 22px
    }

/* ====== HEADER / SITE NORMAL ====== */
.hero {
    background: linear-gradient(100deg,var(--grad-a),var(--grad-b));
    color: #fff
}

.logo-min {
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 800
}

.sec-title {
    font-weight: 800;
    margin-bottom: 18px
}

.icon-card {
    height: 100%;
    border: 1px solid #00000012;
    border-radius: 16px;
    padding: 18px;
    background: #fff;
    transition: .15s
}

    .icon-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px #0f3e8a14
    }

    .icon-card i {
        font-size: 28px;
        color: #0c73f6
    }

/* Secretaria */
.card-secretaria {
    border-radius: 16px;
    border: 1px solid #00000012;
    background: #fff
}

/* Eventos fixos */
.event-fixed {
    border: 1px solid #00000012;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    height: 100%
}

    .event-fixed .thumb {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 12px
    }

    .event-fixed .icon-round {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eef4ff;
        color: #0c73f6
    }

    /* ===== Eventos fixos: thumbs figurativos (ícone + degradê) ===== */
    .event-fixed .thumb-fig {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        flex: 0 0 80px;
        color: #0c73f6;
        border: 1px solid #e1e9ff;
        background: linear-gradient(135deg,#eef4ff,#d7e6ff);
    }

        .event-fixed .thumb-fig i {
            font-size: 34px;
            line-height: 1;
        }

/* variações suaves p/ diferenciar cada evento (opcional) */
.thumb-fig.g1 {
    background: linear-gradient(135deg,#e9f2ff,#dbe9ff);
}

.thumb-fig.g2 {
    background: linear-gradient(135deg,#eaf7ff,#d8efff);
}

.thumb-fig.g3 {
    background: linear-gradient(135deg,#f0eeff,#e0ddff);
}

.thumb-fig.g4 {
    background: linear-gradient(135deg,#fff1f1,#ffe3e3);
}

.thumb-fig.g5 {
    background: linear-gradient(135deg,#eafff4,#d7ffef);
}

.thumb-fig.g6 {
    background: linear-gradient(135deg,#fff6e6,#ffe9c9);
}

/* mantém o layout existente */
.event-fixed {
    border: 1px solid #00000012;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    height: 100%
}

    .event-fixed .icon-round {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eef4ff;
        color: #0c73f6
    }

/* Carrossel — imagens sempre 100% sem gerar overflow no mobile */
.carousel-caption {
    background: linear-gradient(180deg,#00000066,#00000033);
    border-radius: 12px;
    padding: 14px
}

.carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 1400px) {
    .carousel-item img {
        max-height: 520px
    }
}

/* Navbar: evitar nowrap que estoura */
.navbar .nav-link {
    white-space: normal;
}

/* ====== RESPONSIVIDADE ====== */
/* Em telas >= md, ocultar completamente a intro mobile */
@media (min-width: 768px) {
    .mobile-intro {
        display: none !important;
    }

    .grid-mobile {
        grid-template-columns: repeat(6,1fr);
        padding: 12px 0
    }

    .tile {
        aspect-ratio: auto;
        min-height: 82px
    }
}

/* ====== SLIDERS GENÉRICOS ====== */
/* Banners e avisos */
#banners {
    padding-top: 30px;
}

    #banners .banner-slider {
        --gap: 16px;
        --per-page: 1;
    }

/* Banner de imagens: 1 no mobile, 2 no desktop */
@media (min-width: 768px) {
    #banners .banner-slider {
        --per-page: 2;
    }
}



/* AVISOS: 3 por página em TODAS as larguras */
#avisos-comunidades .banner-slider {
    --gap: 16px;
    --per-page: 3;
}

/* layout base do slider */
.banner-viewport {
    overflow: hidden;
}

.banner-track {
    display: flex;
    gap: var(--gap);
    transition: transform .4s ease;
    will-change: transform;
    padding: 6px 0px;
    touch-action: pan-y;
}

    .banner-track.dragging {
        transition: none;
    }

/* slide “normal” (lado-a-lado) */
.banner-card {
    flex: 0 0 calc((100% - (var(--gap) * (var(--per-page) - 1))) / var(--per-page));
    border-radius: 16px;
    overflow: hidden;
    background: #e9eef9;
    min-width: 0;
}

    .banner-card .banner-img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Avisos (card de texto) */
    .banner-card.banner-text {
        color: #fff;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 160px;
        background: linear-gradient(135deg,#0c73f6,#1aa0ff);
    }

        .banner-card.banner-text h5 {
            margin: 4px 0 6px;
            font-weight: 800;
        }

        .banner-card.banner-text p {
            margin: 0;
            opacity: .95;
            line-height: 1.3;
        }

        .banner-card.banner-text .meta {
            font-size: .85rem;
            opacity: .95;
        }

        .banner-card.banner-text .btn {
            align-self: flex-end;
        }

/* Controles e indicadores (inalterado) */
.banner-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

    .banner-controls .left-right {
        display: none;
        gap: 8px;
    }

.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #d9dfeb;
    background: #fff;
    border-radius: 10px;
}

    .btn-nav i {
        font-size: 18px;
    }

.banner-indicators {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex: 1;
}

    .banner-indicators button {
        width: 30px;
        height: 8px;
        border-radius: 5px;
        border: none;
        background: #cfd6e6;
    }

        .banner-indicators button.active {
            background: #fff;
            box-shadow: 0 0 0 5px #212529 inset;
        }

/* ====== MODO “EMPILHADO” SÓ PARA AVISOS NO MOBILE ====== */
/* Quando o JS ativar .stacked-active no slider de avisos,
   o track passa a “deslizar” páginas-coluna; cada coluna tem 3 cards empilhados. */
#avisos-comunidades [data-slider="avisos"].stacked-active .banner-track {
    gap: 0;
}

#avisos-comunidades .stack-page {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 16px; /* espaço entre os 3 cards */
    padding: 6px 2px;
}
    /* dentro da página empilhada, cada card ocupa 100% (um embaixo do outro) */
    #avisos-comunidades .stack-page > .banner-card {
        flex: 0 0 100% !important;
        width: 100% !important;
    }


/* ===== Topo: redes sociais ===== */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #e1e6f0;
    background: #fff;
    margin: 0 4px;
    text-decoration: none;
    color: #77bcd8;
    padding-top: 5px;
}

    .social-icons a:hover {
        background: #f3f7ff;
    }

.social-icons i {
    font-size: 25px;
}

/* ===== Cards "Informe-se" e "Pastorais" ===== */
.info-card, .pastoral-card {
    border: 1px solid #00000012;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.thumb-cover {
    /*aspect-ratio: 16/9;*/
    max-height: 100px;
    display: grid;
    place-items: center;
    /*background: linear-gradient(135deg,#e9f2ff,#dbe9ff);*/
}

    .thumb-cover i {
        font-size: 40px;
        color: #0c73f6;
    }

.info-card .card-body, .pastoral-card .card-body {
    padding: 14px;
}

.info-card h6, .pastoral-card h6 {
    font-weight: 700;
    margin-bottom: 6px;
}

.info-card p, .pastoral-card p {
    margin: 0 0 8px;
    color: #6b7480;
}

/* Thumb com imagem (mantém proporção) */
.thumb-cover {
    position: relative;
    overflow: hidden;
    /*aspect-ratio: 16/9;*/
    min-height: 100px;
    border-bottom: 1px solid #eef1f6;
    /*background: linear-gradient(135deg,#eef4ff,#dbe9ff);*/
}

    .thumb-cover .thumb-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Mobile: collapse ocupa a tela sem “sumir” pra cima */
@media (max-width: 767.98px) {
    .navbar-collapse {
        max-height: calc(100vh - var(--navH, 64px));
        overflow-y: auto;
    }
}

/* Redes sociais no estilo dos tiles e centralizadas */
.social-grid {
    /* usa a mesma grid do .grid-mobile */
    grid-template-columns: repeat(3, 1fr);
    max-width: 520px; /* limita largura p/ centralizar bonito */
    margin: 6px auto 10px; /* centraliza */
}

.tile-social {
    background: linear-gradient(180deg,#ffffff22,#ffffff10);
}

    .tile-social:hover {
        background: linear-gradient(180deg,#ffffff2e,#ffffff16);
    }

/* === Redes sociais menores e centralizadas === */
.social-grid {
    /* 3 colunas, porém com largura total menor para encolher os quadrados */
    grid-template-columns: repeat(3, 1fr);
    max-width: 360px; /* ↓ deixa os quadrados menores */
    margin: 6px auto 12px; /* centraliza */
    padding-left: 45px;
    padding-right: 45px;
    padding-bottom: 20px;
}

.tile-social {
    /* herda o estilo de .tile, mas encolhemos só estes 3 */
    min-height: 72px; /* base menor que os demais (96px) */
    aspect-ratio: 1 / 1; /* quadrado */
    padding: 6px; /* menos padding */
    gap: 0px; /* menos espaço interno */
    border-radius: 14px; /* levemente menor, opcional */
    background: linear-gradient(180deg,#ffffff22,#ffffff10);
}

    .tile-social:hover {
        background: linear-gradient(180deg,#ffffff2e,#ffffff16);
    }

    .tile-social i { /* ícone um pouco menor */
        font-size: 26px;
    }

    .tile-social span { /* texto um pouco menor */
        font-size: .68rem;
    }


@media (max-height: 667px) {
    .mobile-intro {
        padding-left: 27px;
        padding-right: 27px;
    }
}


/* Empilhar 3 avisos por página no mobile, sem cortar nada */
#avisos-comunidades .banner-slider.stacked-active .banner-viewport {
    overflow-x: hidden; /* continua escondendo só no eixo X */
    overflow-y: visible; /* libera o eixo Y pra mostrar os 3 cards */
}

/* Cada “página” do slider empilhado é uma coluna com 3 cards */
#avisos-comunidades .stack-page {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 16px; /* espaço entre os cards */
    padding: 6px 2px 0; /* mesmo respiro do track */
    margin: 0;
}

    /* Cards empilhados ocupam 100% da largura, sem mudar a altura do conteúdo */
    #avisos-comunidades .stack-page > .banner-card {
        flex: 0 0 auto !important; /* usa a própria altura (min-height já definido) */
        width: 100% !important;
    }


/* ====== Redes sociais (PC) com fundo claro e texto visível ====== */
@media (min-width: 768px) {
    .social-grid-pc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: center;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        margin: 6px;
    }

    .tile-social-pc {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        text-decoration: none;
        border-radius: 14px;
        border: 1px solid #dbe5ff;
        /*background:linear-gradient(180deg,#f6f9ff,#edf3ff);*/
        padding: 10px;
        aspect-ratio: 1/1;
        min-height: 64px;
        color: #123 !important;
        transition: transform .12s ease, box-shadow .2s, background .2s, border-color .2s;
    }

        .tile-social-pc:hover {
            transform: translateY(-2px);
            background: #f3f7ff;
            border-color: #c8d6ff;
            box-shadow: 0 10px 24px rgba(15,62,138,0.08);
        }

        .tile-social-pc i {
            font-size: 26px;
            color: #385c6f;
            filter: none;
        }

        .tile-social-pc span {
            font-size: .68rem;
            color: #2a3a55;
            line-height: 1.1;
        }
}

/* ====== Barra de menu (PC) estilo "pills" clean ====== */
@media (min-width: 768px) {
    .menu-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }

    .btn-menu {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid #e3e8f6;
        background: #fff;
        color: #24324a;
        text-decoration: none;
        font-weight: 600;
        font-size: .95rem;
        transition: background .15s, border-color .15s, transform .12s ease;
    }

        .btn-menu:hover {
            background: #f4f7ff;
            border-color: #d6def4;
            transform: translateY(-1px);
        }
}

/* Mantém o comportamento do colapso no mobile */
@media (max-width: 767.98px) {
    .collapse#navMain {
        max-height: calc(100vh - var(--navH, 64px));
        overflow-y: auto;
    }
}

.menu-pc {
    background: #e9ecef;
}

/* Força o ícone do toggler a aparecer dentro do .site-header */
.site-header {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(36,50,74,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

    .site-header .navbar-toggler {
        border-color: #d0d7e2;
    }

        .site-header .navbar-toggler:focus {
            box-shadow: 0 0 0 .15rem rgba(12,115,246,.25);
        }


/* Faz o botão grudar na base do card em "Informe-se" */
.info-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .info-card .card-body {
        display: flex;
        flex-direction: column;
        gap: 8px; /* espaço entre título, texto e botão */
        flex: 1 1 auto; /* ocupa o restante abaixo da thumb */
    }

        .info-card .card-body .btn {
            margin-top: auto; /* empurra o botão para a base */
            align-self: flex-start; /* opcional: mantém o botão alinhado à esquerda */
        }

.pastoral-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .pastoral-card .card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1 1 auto;
    }

        .pastoral-card .card-body .btn {
            margin-top: auto;
            align-self: flex-start;
        }



/* Estilo do card de evento (mantém seu visual e vira um "flex") */
.event-list .evt{
  border-left: 4px solid #0c73f6;
  background: linear-gradient(90deg,#eef4ff,#ffffff);
  padding: 14px 16px;
  border-radius: 12px;
  transition: background .2s, transform .12s ease;
  display: flex;                 /* p/ alinhar conteúdo e a data à direita */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.event-list .evt:hover{ background: linear-gradient(90deg,#e6efff,#ffffff); transform: translateY(-1px); }
.event-list .evt .evt-main{ min-width: 0; } /* evita overflow do texto */

/* Selo/caixa de data à direita */
.date-badge{
  width: 64px; min-width: 64px; height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0c73f6; color:#fff; border-radius: 12px;
  line-height: 1; text-align: center;
}
.date-badge .day{ font-size: 28px; font-weight: 800; line-height: 1; }
.date-badge .week{ font-size: 12px; opacity:.95; margin-top: 3px; text-transform: capitalize; }

/* Lista de avisos com divisória leve */
.avisos-list .aviso{ border-bottom:1px solid #eef2fb; padding-bottom:12px; margin-bottom:12px; }
.avisos-list .aviso:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }