/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {
    --primaria: #172b4d;
    --primaria-escura: #0c1729;
    --secundaria: #c9a227;
    --branco: #ffffff;
    --fundo: #f4f5f7;
    --texto: #333333;
    --cinza: #777777;
}


/* =========================================================
   CONFIGURAÇÃO GERAL
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--fundo);
    color: var(--texto);
    overflow-x: hidden;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
button,
input,
textarea,
select {
    font-family:
        'Montserrat',
        sans-serif;
}


/* =========================================================
   CABEÇALHO
========================================================= */

header {
    width:
        100%;

    background:
        var(--primaria);

    color:
        white;

    position:
        sticky;

    top:
        0;

    z-index:
        9999;

    box-shadow:
        0 3px 15px
        rgba(0, 0, 0, .18);
}

.topo {
    width:
        100%;

    max-width:
        1400px;

    margin:
        auto;

    padding:
        15px 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


/* =========================================================
   LOGO
========================================================= */

.logo-area {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-width:
        0;
}

.logomini {
    flex-shrink:
        0;
}

.logomini img {
    width:
        30px;

    height:
        auto;

    display:
        block;
}

.nome-igreja {
    min-width:
        0;
}

.nome-igreja h1 {
    font-size:
        19px;

    font-weight:
        800;

    letter-spacing:
        2px;

    color:
        var(--secundaria);
}

.nome-igreja span {
    display:
        block;

    font-size:
        15px;

    font-weight:
        400;

    color:
        #d6d9df;

    margin-top:
        2px;

    letter-spacing:
        10px;
}


/* =========================================================
   MENU
========================================================= */

nav {
    flex-shrink:
        0;
}

nav ul {
    list-style:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}

nav a {
    color:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        .3s;
}

nav a:hover {
    color:
        var(--secundaria);
}


/* =========================================================
   BOTÃO MOBILE
========================================================= */

.menu-mobile {
    display: none;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--branco);
    font-size: 25px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   SLIDER
========================================================= */

.slider {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1920 / 600;

    overflow:
        hidden;
}

.slide {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    transition:
        opacity 1s ease;
}

.slide.ativo {
    opacity:
        1;
}

.slide img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


/* =========================================================
   BOTÕES DO SLIDER
========================================================= */

.slider-btn {
    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        52px;

    height:
        52px;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, .55);

    color:
        white;

    cursor:
        pointer;

    font-size:
        20px;

    z-index:
        10;

    transition:
        .3s;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.slider-btn:hover {
    background:
        var(--secundaria);

    color:
        var(--primaria);
}

.anterior {
    left:
        25px;
}

.proximo {
    right:
        25px;
}


/* =========================================================
   INDICADORES
========================================================= */

.indicadores {
    position:
        absolute;

    bottom:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        10px;

    z-index:
        10;
}

.indicador {
    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .5);

    cursor:
        pointer;

    transition:
        .3s;
}

.indicador.ativo {
    width:
        30px;

    border-radius:
        10px;

    background:
        var(--secundaria);
}


/* =========================================================
   SEÇÕES
========================================================= */

section {
    width:
        100%;

    padding:
        90px 25px;
}

.container {
    width:
        100%;

    max-width:
        1200px;

    margin:
        auto;
}


/* =========================================================
   TÍTULOS
========================================================= */

.titulo {
    text-align:
        center;

    margin-bottom:
        20px;
}

.titulo h2 {
    font-size:
        42px;

    font-weight:
        700;

    letter-spacing:
        -.5px;

    color:
        var(--primaria);

    margin-bottom:
        15px;

    line-height:
        1.2;
}

.linha {
    width:
        100%;

    height:
        4px;

    background:
        var(--secundaria);

    margin:
        auto;
}


/* =========================================================
   PAGINAS DE DEPARTAMENTOS
========================================================= */

.descricao {
    display: block;
}

/* IMAGEM À ESQUERDA */

.descricao-imagem {
    position: relative;

    width: 300px;

    float: left;

    margin: 0 40px 25px 0;
}

.descricao-imagem img {
    width: 100%;

    height: auto;

    display: block;

    border-radius: 8px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, .15);
}

/* TEXTO */

.descricao-texto {
    min-width: 0;
}

.descricao-texto h3 {
    font-size:
        32px;

    font-weight:
        700;

    letter-spacing:
        -.3px;

    color:
        var(--primaria);

    margin-bottom:
        20px;

    line-height:
        1.3;
}

.descricao-texto p {
    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.3;

    color:
        var(--cinza);

    margin-bottom:
        18px;

    text-align:
        justify;

    text-indent:
        30px;

    white-space:
        pre-wrap;
}

/* LIMPA O FLOAT NO FINAL */

.descricao::after {
    content: "";
    display: block;
    clear: both;
}


/* =========================================================
   HISTÓRIA
========================================================= */

#historia {
    background:
        var(--branco);
}

.sobre {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;
}

.sobre-imagem {
    position:
        relative;

    width:
        60%;
		
}

.sobre-imagem img {
    width:
        100%;

    height:
        auto;

    display:
        block;

    border-radius:
        8px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, .15);
}

.sobre-texto {
    min-width:
        0;
}

.sobre-texto h3 {
    font-size:
        32px;

    font-weight:
        700;

    letter-spacing:
        -.3px;

    color:
        var(--primaria);

    margin-bottom:
        20px;

    line-height:
        1.3;
}

.sobre-texto p {
    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.3;

    color:
        var(--cinza);

    margin-bottom:
        18px;

    text-align:
        justify;

    text-indent:
        30px;

    white-space:
        pre-wrap;
}


/* =========================================================
   ÁUDIOS DO HINO
========================================================= */

.hinos-audios {
    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    gap:
        30px;

    margin-top:
        25px;

    position:
        relative;

    padding-top:
        25px;
}

.linha-audios {
    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        var(--secundaria);
}

.hino-audio {
    flex:
        1;

    width:
        100%;

    max-width:
        500px;

    text-align:
        center;

    margin-top:
        0;
}

.hino-audio p {
    margin:
        0 0 10px;

    font-size:
        16px;

    font-weight:
        700;

    color:
        var(--branco);
}

.hino-audio audio {
    display:
        block;

    width:
        100%;

    max-width:
        500px;

    margin:
        0 auto 15px;
}

.botao-download-audio {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        10px 18px;

    background:
        var(--secundaria);

    color:
        var(--primaria);

    text-decoration:
        none;

    border-radius:
        6px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .3s;
}

.botao-download-audio:hover {
    background:
        var(--branco);

    color:
        var(--primaria);

    transform:
        translateY(-2px);
}


/* =========================================================
   DEPARTAMENTOS
========================================================= */

#departamentos {
    background:
        var(--fundo);
}

.departamentos-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap:
        25px;
}

.departamento {
    background:
        white;

    padding:
        40px 25px;

    border-radius:
        10px;

    text-align:
        center;

    transition:
        .35s;

    border-bottom:
        4px solid transparent;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, .05);
}

.departamento:hover {
    transform:
        translateY(-8px);

    border-bottom-color:
        var(--secundaria);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .12);
}


/* =========================================================
   ÍCONES
========================================================= */

.icone {
    width:
        75px;

    height:
        75px;

    margin:
        0 auto 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        var(--secundaria);

    border-radius:
        50%;

    color:
        var(--primaria);

    font-size:
        27px;

    transition:
        .35s;
}

.departamento:hover .icone {
    background:
        var(--primaria);

    color:
        var(--secundaria);

    border-color:
        var(--primaria);
}

.departamento h3 {
    color:
        var(--primaria);

    margin-bottom:
        12px;

    font-size:
        19px;

    font-weight:
        700;
}

.departamento p {
    color:
        var(--cinza);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.8;
}


/* =========================================================
   HINO OFICIAL
========================================================= */

#hino {
    background:
        linear-gradient(
            135deg,
            var(--primaria),
            var(--primaria-escura)
        );

    color:
        white;
}

#hino .titulo h2 {
    color:
        white;
}

.hino-conteudo {
    width:
        100%;

    max-width:
        800px;

    margin:
        auto;

    text-align:
        center;
}

.hino-conteudo h3 {
    color:
        var(--secundaria);

    font-size:
        30px;

    font-weight:
        700;

    margin-bottom:
        30px;

    line-height:
        1.3;
}


/* =========================================================
   LETRA DO HINO
========================================================= */

.letra-hino {
    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.3;

    white-space:
        pre-wrap;

    color:
        #eeeeee;

    column-count:
        2;

    column-gap:
        40px;

    margin-top:
        0;

    text-align:
        center;
}


/* =========================================================
   NEGRITO / ITÁLICO NA LETRA
========================================================= */

.letra-hino refrao {
    font-weight:
        700;
}

.letra-hino .italico {
    font-style:
        italic;
}

.letra-hino .negrito-italico {
    font-weight:
        700;

    font-style:
        italic;
}


/* =========================================================
   ÁUDIO DO HINO
========================================================= */

audio {
    width:
        100%;
}


/* =========================================================
   GALERIA
========================================================= */

#fotos {
    background:
        white;
}

.galeria {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap:
        18px;
}

.foto {
    height:
        260px;

    overflow:
        hidden;

    border-radius:
        8px;

    cursor:
        pointer;

    position:
        relative;
}

.foto::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(23, 43, 77, .25);

    opacity:
        0;

    transition:
        .4s;
}

.foto:hover::after {
    opacity:
        1;
}

.foto img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s;
}

.foto:hover img {
    transform:
        scale(1.12);
}


/* =========================================================
   LOCALIZAÇÃO
========================================================= */

#onde-estamos {
    background:
        var(--fundo);
}

.localizacao {
    display:
        grid;

    grid-template-columns:
        350px 1fr;

    gap:
        30px;
}

.endereco {
    background:
        var(--primaria);

    color:
        white;

    padding:
        40px;

    border-radius:
        10px;
}

.endereco h3 {
    color:
        var(--secundaria);

    font-size:
        28px;

    font-weight:
        700;

    margin-bottom:
        30px;
}

.info-local {
    display:
        flex;

    gap:
        15px;

    margin-bottom:
        25px;
}

.info-local i {
    color:
        var(--secundaria);

    font-size:
        20px;

    margin-top:
        3px;

    flex-shrink:
        0;
}

.info-local p {
    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.7;
}

.info-local strong {
    font-weight:
        700;
}


/* =========================================================
   MAPA
========================================================= */

.mapa {
    min-height:
        430px;

    border-radius:
        10px;

    overflow:
        hidden;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .12);
}

.mapa iframe {
    width:
        100%;

    height:
        100%;

    min-height:
        430px;

    border:
        none;

    display:
        block;
}


/* =========================================================
   RODAPÉ
========================================================= */

footer {
    background:
        #081221;

    color:
        white;

    padding:
        50px 20px;

    text-align:
        center;
}

footer .logomini img {
    width:
        40px;

    margin:
        0 auto 15px;
}

footer h3 {
    font-size:
        25px;

    font-weight:
        700;

    margin-bottom:
        12px;
}

footer p {
    color:
        #aab0b8;

    font-size:
        13px;

    font-weight:
        400;
}

.copyright {
    margin-top:
        30px;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(255, 255, 255, .1);
}


/* =========================================================
   MODAL DE DOAÇÕES
========================================================= */

.modal-doacoes {
    display:
        none;

    position:
        fixed;

    z-index:
        999999;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background:
        rgba(0, 0, 0, 0.75);

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    backdrop-filter:
        blur(4px);
}

.modal-doacoes-conteudo {
    position:
        relative;

    width:
        100%;

    max-width:
        550px;

    height:
        90vh;

    max-height:
        900px;

    background:
        #fff;

    border-radius:
        16px;

    overflow:
        hidden;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);
}

.modal-doacoes-conteudo iframe {
    width:
        100%;

    height:
        100%;

    border:
        none;

    display:
        block;

    background:
        #fff;
}

.fechar-modal-doacoes {
    position:
        absolute;

    top:
        10px;

    right:
        10px;

    z-index:
        10;

    width:
        38px;

    height:
        38px;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.70);

    color:
        #fff;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        .2s;
}

.fechar-modal-doacoes:hover {
    background:
        #000;

    transform:
        scale(1.05);
}


/* =========================================================
   PÁGINA DE DOAÇÕES / PIX
========================================================= */

.pagina-doacoes {
    font-family:
        'Montserrat',
        sans-serif;

    background:
        var(--fundo);

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    color:
        var(--texto);
}

.container-doacoes {
    width:
        100%;

    max-width:
        500px;

    background:
        var(--branco);

    border:
        1px solid
        rgba(23, 43, 77, .08);

    border-radius:
        16px;

    padding:
        32px;

    box-shadow:
        0 15px 45px
        rgba(23, 43, 77, .12);
}


/* =========================================================
   CABEÇALHO PIX
========================================================= */

.container-doacoes .cabecalho {
    text-align:
        center;

    margin-bottom:
        28px;
}


/* =========================================================
   ÍCONE PIX
========================================================= */

.icone-pix {
    width:
        70px;

    height:
        70px;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    background:
        var(--primaria);

    color:
        var(--secundaria);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        var(--secundaria);

    box-shadow:
        0 6px 20px
        rgba(23, 43, 77, .18);
}

.icone-pix i {
    font-size:
        42px;

    line-height:
        1;
}


/* =========================================================
   TÍTULO PIX
========================================================= */

.container-doacoes h1 {
    font-size:
        25px;

    font-weight:
        700;

    color:
        var(--primaria);

    margin-bottom:
        8px;
}

.subtitulo {
    color:
        var(--cinza);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.6;
}


/* =========================================================
   CAMPOS
========================================================= */

.campo {
    margin-bottom:
        18px;
}

.campo label {
    display:
        block;

    font-weight:
        600;

    font-size:
        13px;

    color:
        var(--primaria);

    margin-bottom:
        7px;
}

.campo input,
.campo select {
    width:
        100%;

    height:
        48px;

    border:
        1px solid
        #d5d9dd;

    border-radius:
        8px;

    padding:
        0 14px;

    font-size:
        14px;

    font-weight:
        400;

    outline:
        none;

    background:
        var(--branco);

    color:
        var(--texto);

    transition:
        .25s;
}

.campo input::placeholder {
    color:
        #a2a6ab;
}

.campo input:focus,
.campo select:focus {
    border-color:
        var(--secundaria);

    box-shadow:
        0 0 0 3px
        rgba(201, 162, 39, .12);
}


/* =========================================================
   BOTÃO GERAR PIX
========================================================= */

.botao {
    width:
        100%;

    height:
        52px;

    border:
        none;

    border-radius:
        8px;

    background:
        var(--primaria);

    color:
        var(--branco);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        .5px;

    cursor:
        pointer;

    transition:
        .3s;
}

.botao:hover {
    background:
        var(--primaria-escura);

    box-shadow:
        0 8px 20px
        rgba(23, 43, 77, .20);
}

.botao:active {
    transform:
        scale(.98);
}


/* =========================================================
   RESULTADO PIX
========================================================= */

.resultado {
    display:
        none;

    margin-top:
        30px;

    border-top:
        1px solid
        #e5e7ea;

    padding-top:
        25px;
}

.resultado h2 {
    text-align:
        center;

    font-size:
        20px;

    font-weight:
        700;

    color:
        var(--primaria);

    margin-bottom:
        8px;
}

.mensagem {
    text-align:
        center;

    color:
        var(--cinza);

    font-size:
        13px;

    font-weight:
        400;

    margin-bottom:
        20px;

    line-height:
        1.6;
}


/* =========================================================
   QR CODE
========================================================= */

#qrcode {
    width:
        230px;

    height:
        230px;

    margin:
        0 auto 20px;

    padding:
        10px;

    background:
        white;

    border:
        1px solid
        #e1e4e8;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

#qrcode img,
#qrcode canvas {
    max-width:
        100%;

    max-height:
        100%;
}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.informacoes-transferencia {
    background:
        #f7f8fa;

    border:
        1px solid
        #e1e5e8;

    border-radius:
        10px;

    padding:
        16px;

    margin-bottom:
        20px;
}

.informacoes-titulo {
    font-size:
        14px;

    font-weight:
        700;

    margin-bottom:
        14px;

    color:
        var(--primaria);
}

.informacao {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        #e5e8ea;

    font-size:
        12px;
}

.informacao:last-child {
    border-bottom:
        none;
}

.informacao-label {
    color:
        var(--cinza);

    flex-shrink:
        0;
}

.informacao-valor {
    text-align:
        right;

    font-weight:
        600;

    color:
        var(--texto);

    word-break:
        break-word;
}

.informacao-valor.valor {
    color:
        var(--primaria);

    font-size:
        14px;
}


/* =========================================================
   PIX COPIA E COLA
========================================================= */

.copiar-area {
    display:
        flex;

    gap:
        8px;
}

.copiar-area input {
    flex:
        1;

    min-width:
        0;

    height:
        48px;

    border:
        1px solid
        #d5d9dd;

    border-radius:
        8px;

    padding:
        0 12px;

    font-size:
        11px;

    font-family:
        'Montserrat',
        sans-serif;

    background:
        #f7f7f7;

    color:
        var(--texto);
}

.btn-copiar {
    height:
        48px;

    padding:
        0 15px;

    border:
        none;

    border-radius:
        8px;

    background:
        var(--secundaria);

    color:
        var(--primaria);

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        .25s;
}

.btn-copiar:hover {
    background:
        #b38e1d;

    transform:
        translateY(-1px);
}


/* =========================================================
   MENSAGEM DE SUCESSO
========================================================= */

.sucesso {
    margin-top:
        15px;

    padding:
        12px;

    background:
        rgba(201, 162, 39, .12);

    border:
        1px solid
        rgba(201, 162, 39, .25);

    border-radius:
        8px;

    color:
        var(--primaria);

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        600;

    display:
        none;
}


/* =========================================================
   AVISO
========================================================= */

.aviso {
    margin-top:
        18px;

    font-size:
        11px;

    color:
        var(--cinza);

    text-align:
        center;

    line-height:
        1.6;
}


/* =========================================================
   RODAPÉ PIX
========================================================= */

.rodape {
    margin-top:
        25px;

    padding-top:
        18px;

    border-top:
        1px solid
        #e5e7ea;

    text-align:
        center;

    color:
        #999;

    font-size:
        10px;
}


/* =========================================================
   RESPONSIVO - TABLET
========================================================= */

@media (max-width: 1000px) {

    /* CABEÇALHO */
	
	.menu-mobile {
    display: flex;
}

header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--primaria-escura);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

header nav.menu-aberto {
    display: block;
}

header nav ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 12px;
}

header nav ul li {
    width: 100%;
}

header nav ul li a {
    width: 100%;
    display: block;
    text-align: center;
    padding: 15px 20px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


    .topo {
        padding:
            14px 25px;
    }

    nav {
        display:
            none;
    }

    .menu-mobile {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }


    /* HISTÓRIA */

    .sobre {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .sobre-imagem {
        max-width:
            800px;

        margin:
            auto;
    }


    /* LOCALIZAÇÃO */

    .localizacao {
        grid-template-columns:
            1fr;
    }

    .endereco {
        width:
            100%;
    }


    /* HINO */

    .letra-hino {
        column-gap:
            30px;
    }
}


/* =========================================================
   RESPONSIVO - TABLET PEQUENO
========================================================= */

@media (max-width: 800px) {

    /* SLIDER */

    .slider {
        aspect-ratio:
            16 / 7;
    }


    /* ÁUDIOS */

    .hinos-audios {
        flex-direction:
            column;

        align-items:
            center;

        gap:
            25px;
    }

    .hino-audio {
        width:
            100%;

        max-width:
            500px;
    }


    /* GALERIA */

    .galeria {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /* MAPA */

    .mapa {
        min-height:
            400px;
    }

    .mapa iframe {
        min-height:
            400px;
    }
}


/* =========================================================
   RESPONSIVO - CELULAR
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       CABEÇALHO
    ----------------------------------------- */

    .topo {
        padding:
            12px 16px;
    }

    .logo-area {
        gap:
            10px;

        min-width:
            0;
    }

    .logomini img {
        width:
            27px;
    }

    .nome-igreja {
        min-width:
            0;
    }

    .nome-igreja h1 {
        font-size:
            13px;

        letter-spacing:
            1px;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }

    .nome-igreja span {
        display:
            none;
    }

    .menu-mobile {
        flex-shrink:
            0;

        font-size:
            23px;
    }


    /* -----------------------------------------
       SLIDER
    ----------------------------------------- */

    .slider {
        width:
            100%;

        aspect-ratio:
            4 / 3;

        height:
            auto;
    }

    .slide {
        width:
            100%;

        height:
            100%;
    }

    .slide img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;
    }


    /* -----------------------------------------
       BOTÕES DO SLIDER
    ----------------------------------------- */

    .slider-btn {
        width:
            38px;

        height:
            38px;

        font-size:
            15px;
    }

    .anterior {
        left:
            8px;
    }

    .proximo {
        right:
            8px;
    }


    /* -----------------------------------------
       INDICADORES
    ----------------------------------------- */

    .indicadores {
        bottom:
            12px;

        gap:
            7px;
    }

    .indicador {
        width:
            8px;

        height:
            8px;
    }

    .indicador.ativo {
        width:
            22px;
    }


    /* -----------------------------------------
       SEÇÕES
    ----------------------------------------- */

    section {
        padding:
            55px 16px;
    }

    .container {
        width:
            100%;

        max-width:
            100%;
    }


    /* -----------------------------------------
       TÍTULOS
    ----------------------------------------- */

    .titulo {
        margin-bottom:
            18px;
    }

    .titulo h2 {
        font-size:
            28px;

        line-height:
            1.2;
    }

    .linha {
        height:
            3px;
    }


    /* -----------------------------------------
       HISTÓRIA
    ----------------------------------------- */

    .sobre {
        display:
            flex;

        flex-direction:
            column;

        gap:
            30px;
    }

    .sobre-imagem {
        width:
            100%;
    }

    .sobre-imagem img {
        width:
            100%;

        border-radius:
            7px;
    }

    .sobre-texto h3 {
        font-size:
            24px;

        line-height:
            1.3;

        margin-bottom:
            15px;
    }

    .sobre-texto p {
        font-size:
            14px;

        line-height:
            1.6;

        text-align:
            justify;

        text-indent:
            25px;

        margin-bottom:
            15px;

        white-space:
            pre-wrap;
    }


    /* -----------------------------------------
       ÁUDIOS
    ----------------------------------------- */

    .hinos-audios {
        width:
            100%;

        gap:
            20px;

        margin-top:
            20px;

        padding-top:
            20px;
    }

    .linha-audios {
        height:
            3px;
    }

    .hino-audio {
        width:
            100%;

        max-width:
            100%;

        margin-top:
            0;
    }

    .hino-audio p {
        font-size:
            13px;

        margin-bottom:
            8px;
    }

    .hino-audio audio {
        width:
            100%;

        max-width:
            100%;
    }

    .botao-download-audio {
        font-size:
            12px;

        padding:
            9px 15px;
    }


    /* -----------------------------------------
       DEPARTAMENTOS
    ----------------------------------------- */

    .departamentos-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .departamento {
        padding:
            30px 20px;
    }

    .departamento h3 {
        font-size:
            18px;
    }

    .departamento p {
        font-size:
            13px;

        line-height:
            1.7;
    }


    /* -----------------------------------------
       HINO
    ----------------------------------------- */

    .hino-conteudo {
        width:
            100%;

        max-width:
            100%;
    }

    .hino-conteudo h3 {
        font-size:
            23px;

        line-height:
            1.3;

        margin-bottom:
            25px;
    }

    .letra-hino {
        column-count:
            1;

        column-gap:
            0;

        font-size:
            14px;

        line-height:
            1.6;

        text-align:
            center;

        white-space:
            pre-wrap;
    }


    /* -----------------------------------------
       GALERIA
    ----------------------------------------- */

    .galeria {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .foto {
        height:
            auto;

        aspect-ratio:
            4 / 3;
    }


    /* -----------------------------------------
       LOCALIZAÇÃO
    ----------------------------------------- */

    .localizacao {
        display:
            flex;

        flex-direction:
            column;

        gap:
            20px;
    }

    .endereco {
        padding:
            28px 22px;

        border-radius:
            8px;
    }

    .endereco h3 {
        font-size:
            23px;

        margin-bottom:
            22px;
    }

    .info-local {
        gap:
            12px;

        margin-bottom:
            20px;
    }

    .info-local i {
        font-size:
            17px;
    }

    .info-local p {
        font-size:
            13px;

        line-height:
            1.6;
    }

    .mapa {
        width:
            100%;

        min-height:
            320px;

        height:
            320px;
    }

    .mapa iframe {
        width:
            100%;

        height:
            320px;

        min-height:
            320px;
    }


    /* -----------------------------------------
       RODAPÉ
    ----------------------------------------- */

    footer {
        padding:
            40px 18px;
    }

    footer h3 {
        font-size:
            21px;

        line-height:
            1.3;
    }

    footer p {
        font-size:
            12px;

        line-height:
            1.6;
    }
}


/* =========================================================
   RESPONSIVO - CELULAR PEQUENO
========================================================= */

@media (max-width: 450px) {

    /* -----------------------------------------
       CABEÇALHO
    ----------------------------------------- */

    .topo {
        padding:
            11px 13px;
    }

    .logomini img {
        width:
            25px;
    }

    .nome-igreja h1 {
        font-size:
            11px;

        letter-spacing:
            .7px;
    }

    .menu-mobile {
        font-size:
            21px;
    }


    /* -----------------------------------------
       SLIDER
    ----------------------------------------- */

    .slider {
        aspect-ratio:
            3 / 2;
    }

    .slider-btn {
        width:
            34px;

        height:
            34px;

        font-size:
            13px;
    }


    /* -----------------------------------------
       SEÇÕES
    ----------------------------------------- */

    section {
        padding:
            45px 14px;
    }


    /* -----------------------------------------
       TÍTULOS
    ----------------------------------------- */

    .titulo h2 {
        font-size:
            25px;
    }


    /* -----------------------------------------
       HISTÓRIA
    ----------------------------------------- */

    .sobre-texto h3 {
        font-size:
            21px;
    }

    .sobre-texto p {
        font-size:
            13px;

        line-height:
            1.65;
    }


    /* -----------------------------------------
       HINO
    ----------------------------------------- */

    .hino-conteudo h3 {
        font-size:
            21px;
    }

    .letra-hino {
        font-size:
            13px;

        line-height:
            1.65;
    }


    /* -----------------------------------------
       DEPARTAMENTOS
    ----------------------------------------- */

    .departamento {
        padding:
            25px 18px;
    }


    /* -----------------------------------------
       GALERIA
    ----------------------------------------- */

    .foto {
        aspect-ratio:
            1 / 1;
    }


    /* -----------------------------------------
       LOCALIZAÇÃO
    ----------------------------------------- */

    .endereco {
        padding:
            24px 18px;
    }

    .endereco h3 {
        font-size:
            21px;
    }

    .mapa {
        min-height:
            280px;

        height:
            280px;
    }

    .mapa iframe {
        min-height:
            280px;

        height:
            280px;
    }
}


/* =========================================================
   RESPONSIVO - MODAL DE DOAÇÕES
========================================================= */

@media (max-width: 600px) {

    .modal-doacoes {
        padding:
            0;
    }

    .modal-doacoes-conteudo {
        width:
            100%;

        height:
            100vh;

        max-height:
            none;

        border-radius:
            0;
    }

    .fechar-modal-doacoes {
        top:
            12px;

        right:
            12px;
    }
}


/* =========================================================
   RESPONSIVO - PIX
========================================================= */

@media (max-width: 500px) {

    .pagina-doacoes {
        padding:
            12px;

        align-items:
            flex-start;
    }

    .container-doacoes {
        padding:
            22px;

        border-radius:
            14px;

        margin:
            10px 0;
    }

    .container-doacoes h1 {
        font-size:
            22px;
    }

    .icone-pix {
        width:
            65px;

        height:
            65px;
    }

    .icone-pix i {
        font-size:
            38px;
    }

    #qrcode {
        width:
            210px;

        height:
            210px;
    }

    .copiar-area {
        flex-direction:
            column;
    }

    .btn-copiar {
        width:
            100%;
    }

    .informacao {
        flex-direction:
            column;

        gap:
            3px;
    }

    .informacao-valor {
        text-align:
            left;
    }
}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 360px) {

    .topo {
        padding:
            10px;
    }

    .logomini img {
        width:
            23px;
    }

    .nome-igreja h1 {
        font-size:
            10px;

        letter-spacing:
            .5px;
    }

    .menu-mobile {
        font-size:
            19px;
    }

    .slider-btn {
        width:
            30px;

        height:
            30px;

        font-size:
            12px;
    }

    .anterior {
        left:
            5px;
    }

    .proximo {
        right:
            5px;
    }

    section {
        padding:
            40px 12px;
    }

    .titulo h2 {
        font-size:
            23px;
    }

    .sobre-texto h3 {
        font-size:
            20px;
    }

    .sobre-texto p {
        font-size:
            12.5px;
    }

    .hino-conteudo h3 {
        font-size:
            19px;
    }

    .letra-hino {
        font-size:
            12px;
    }

    .endereco {
        padding:
            22px 16px;
    }
}

/* =========================================
   PÁGINA HISTÓRIA
   LINK INÍCIO NO CABEÇALHO MOBILE
========================================= */

.nav-historia {
    display: block;
}

.nav-historia ul {
    display: flex;
    align-items: center;
    list-style: none;
}

.nav-historia ul li {
    list-style: none;
}

.nav-historia ul li a {
    display: block;
    color: var(--branco);
    font-size: 11px;
    font-weight: 700;
    padding: 10px 8px;
    text-decoration: none;
    white-space: nowrap;
}

.departamento {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 1000px) {

    .nav-historia {
        display: block !important;
        position: static !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .nav-historia ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 !important;
    }

    .nav-historia ul li {
        width: auto !important;
    }

    .nav-historia ul li a {
        display: block !important;
        width: auto !important;
        padding: 10px 8px !important;
        text-align: center !important;
        font-size: 11px !important;
        border: none !important;
    }
}