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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f6f8f5;
    color: #17251c;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1180px, 90%);
    margin: 0 auto;
}


/* CABEÇALHO */

.cabecalho {
    width: 100%;
    background: #0d3b28;
    color: #ffffff;

    position: sticky;
    top: 0;
    z-index: 1000;

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

.cabecalho-conteudo {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icone {
    font-size: 30px;
}

.logo-texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-texto strong {
    font-size: 21px;
}

.logo-texto span {
    margin-top: 5px;
    font-size: 12px;
    color: #c9d8ce;
    letter-spacing: 1px;
}


/* MENU */

.menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

.menu a {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: #f2cb4d;

    transition: width 0.25s;
}

.menu a:hover::after {
    width: 100%;
}


/* BOTÃO DO MENU NO CELULAR */

.botao-menu {
    display: none;

    border: 0;
    background: transparent;

    color: white;
    font-size: 28px;

    cursor: pointer;
}


/* CONTEÚDO TEMPORÁRIO */

main {
    min-height: 65vh;
    padding: 100px 5%;
    text-align: center;
}

main h1 {
    font-size: clamp(38px, 7vw, 70px);
    color: #0d3b28;
    margin-bottom: 15px;
}

main p {
    font-size: 19px;
    color: #667169;
}


/* RODAPÉ */

.rodape {
    background: #06291b;
    color: white;
    padding-top: 60px;
}

.rodape-conteudo {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
}

.rodape h2 {
    font-size: 25px;
    margin-bottom: 10px;
}

.rodape-marca p {
    max-width: 350px;
    color: #b9c9be;
}

.rodape-links {
    display: flex;
    flex-direction: column;
}

.rodape-links h3 {
    margin-bottom: 15px;
}

.rodape-links a {
    margin-bottom: 8px;
    color: #c8d5cc;
    transition: color 0.2s;
}

.rodape-links a:hover {
    color: #f2cb4d;
}

.rodape-final {
    margin-top: 50px;
    padding: 20px;

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

    text-align: center;
    color: #aabbb0;
    font-size: 13px;
}


/* TABLET E CELULAR */

@media (max-width: 900px) {

    .botao-menu {
        display: block;
    }

    .menu {
        display: none;

        position: absolute;

        top: 76px;
        left: 0;

        width: 100%;

        padding: 25px 5%;

        background: #0d3b28;

        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .menu.menu-aberto {
        display: flex;
    }

    .menu a {
        width: 100%;
        padding: 5px 0;
    }

    .rodape-conteudo {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


/* CELULARES PEQUENOS */

@media (max-width: 500px) {

    .container {
        width: 92%;
    }

    .logo-texto strong {
        font-size: 18px;
    }

    main {
        padding: 75px 5%;
    }

    main p {
        font-size: 16px;
    }

}
/* ========================================
   PÁGINA INICIAL
======================================== */

.pagina-inicial {
    padding: 0;
    text-align: left;
}

.secao {
    padding: 90px 0;
}


/* HERO */

.hero {
    min-height: 650px;

    position: relative;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            rgba(4, 43, 27, 0.72),
            rgba(4, 43, 27, 0.80)
        ),
        url("/imagens/capa.jpg");

    background-size: cover;
    background-position: center;

    color: white;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 43, 27, 0.35),
            transparent
        );
}

.hero-conteudo {
    position: relative;
    z-index: 2;

    text-align: center;
}

.hero-tag {
    display: inline-block;

    padding: 7px 15px;
    margin-bottom: 18px;

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 30px;

    font-size: 13px;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(48px, 8vw, 82px);

    line-height: 1;
}

.hero p {
    margin-bottom: 32px;

    color: #e2eee6;

    font-size: 21px;
}

.hero-botoes {
    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}


/* BOTÕES */

.btn {
    display: inline-block;

    padding: 14px 25px;

    border-radius: 8px;

    font-weight: bold;

    transition: .25s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-amarelo {
    background: #f2cb4d;
    color: #173020;
}

.btn-verde {
    background: #146b45;
    color: white;
}

.btn-verde:hover {
    background: #0d5535;
}

.btn-contorno {
    border: 2px solid white;
    color: white;
}

.btn-contorno:hover {
    background: white;
    color: #0d3b28;
}

.btn-branco {
    background: white;
    color: #0d3b28;
}


/* TÍTULOS */

.secao-tag {
    display: block;

    margin-bottom: 9px;

    color: #167249;

    font-size: 13px;
    font-weight: bold;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.secao-titulo {
    max-width: 680px;

    margin: 0 auto 50px;

    text-align: center;
}

.secao-titulo h2,
.projeto-texto h2,
.mapa-texto h2 {

    margin-bottom: 18px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 42px);

    line-height: 1.15;
}

.secao-titulo p,
.projeto-texto p,
.mapa-texto p {

    margin-bottom: 15px;

    color: #68736b;
}

.link-verde {
    display: inline-block;

    margin-top: 10px;

    color: #146b45;

    font-weight: bold;
}


/* PROJETO */

.projeto {
    background: #f7f9f6;
}

.projeto-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.projeto-imagem {
    min-height: 400px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dce9df,
            #c7dbc9
        );
}

.amapa-destaque {
    display: flex;

    flex-direction: column;

    align-items: center;
}

.amapa-destaque span {
    font-size: 60px;
}

.amapa-destaque strong {
    color: #123c2a;

    font-size: 38px;
}

.amapa-destaque small {
    color: #587162;

    text-transform: uppercase;

    letter-spacing: 2px;
}


/* CULTURA */

.cultura-inicio {
    background: white;
}

.cultura-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.cultura-card {
    padding: 30px;

    border: 1px solid #e1e8e2;

    border-radius: 15px;

    background: #f8faf7;

    transition: .25s;
}

.cultura-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.08);
}

.card-icone {
    display: block;

    margin-bottom: 14px;

    font-size: 38px;
}

.cultura-card h3 {
    margin-bottom: 8px;

    color: #163e2c;

    font-size: 21px;
}

.cultura-card p {
    margin-bottom: 15px;

    color: #6b756e;
}

.card-link {
    color: #167249;

    font-weight: bold;

    font-size: 14px;
}


/* MAPA */

.mapa-inicio {
    background: #edf3ee;
}

.mapa-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 65px;
}

.mapa-preview {
    min-height: 430px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(
            45deg,
            #d4e1d6 25%,
            #e5ede6 25%,
            #e5ede6 50%,
            #d4e1d6 50%,
            #d4e1d6 75%,
            #e5ede6 75%
        );

    background-size: 60px 60px;
}

.mapa-preview-centro {
    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 25px 35px;

    border-radius: 15px;

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

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

.mapa-preview-centro span {
    font-size: 45px;
}

.mapa-preview-centro strong {
    color: #173d2b;

    font-size: 20px;
}

.mapa-preview-centro small {
    color: #69766e;
}

.mapa-pin {
    position: absolute;

    font-size: 30px;
}

.pin-1 {
    top: 15%;
    left: 20%;
}

.pin-2 {
    top: 25%;
    right: 17%;
}

.pin-3 {
    bottom: 17%;
    left: 28%;
}

.lugares-lista {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin: 24px 0;
}


/* STREET VIEW */

.street {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #082e20,
            #176a47
        );

    color: white;

    text-align: center;
}

.street-conteudo {
    max-width: 720px;
}

.street-circulo {
    width: 85px;
    height: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border:
        2px solid
        rgba(255,255,255,.4);

    border-radius: 50%;

    font-size: 24px;

    font-weight: bold;
}

.street-tag {
    color: #f2cb4d;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.street h2 {
    margin: 10px 0 15px;

    font-size: clamp(30px, 5vw, 43px);
}

.street p {
    max-width: 600px;

    margin: 0 auto 28px;

    color: #d8e7dd;
}


/* MUNICÍPIOS */

.municipios-inicio {
    background: white;
}

.municipios-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 17px;
}

.municipio-card {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 24px;

    border: 1px solid #e1e7e2;

    border-radius: 12px;

    background: #f6f8f5;

    transition: .25s;
}

.municipio-card span {
    color: #167249;

    font-size: 13px;
}

.municipio-card:hover {
    transform: translateY(-3px);

    background: #167249;

    color: white;
}

.municipio-card:hover span {
    color: #f2cb4d;
}

.botao-central {
    margin-top: 40px;

    text-align: center;
}


/* CURIOSIDADE */

.curiosidade-inicio {
    background: #f5f7f4;
}

.curiosidade-box {
    display: flex;

    align-items: center;

    gap: 30px;

    padding: 45px;

    border-radius: 20px;

    background: #f2cb4d;
}

.curiosidade-icone {
    font-size: 55px;
}

.curiosidade-box span {
    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.curiosidade-box h2 {
    margin: 7px 0 10px;

    font-size: clamp(25px, 4vw, 35px);

    line-height: 1.2;
}

.curiosidade-box p {
    max-width: 750px;

    margin-bottom: 12px;

    color: #554d2e;
}

.curiosidade-box a {
    font-weight: bold;
}


/* GALERIA */

.galeria-inicio {
    background: white;
}

.galeria-preview {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-auto-rows: 200px;

    gap: 15px;
}

.galeria-item {
    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #d7e3d9;

    color: #536b5b;

    font-weight: bold;
}

.galeria-grande {
    grid-column: span 2;
    grid-row: span 2;
}


/* RESPONSIVO */

@media (max-width: 900px) {

    .projeto-grid,
    .mapa-grid {
        grid-template-columns: 1fr;
    }

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

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

}


@media (max-width: 600px) {

    .secao,
    .street {
        padding: 65px 0;
    }

    .hero {
        min-height: 600px;
    }

    .hero-botoes {
        flex-direction: column;

        align-items: center;
    }

    .hero-botoes .btn {
        width: 100%;

        max-width: 300px;

        text-align: center;
    }

    .projeto-imagem {
        min-height: 300px;
    }

    .cultura-grid,
    .municipios-grid {
        grid-template-columns: 1fr;
    }

    .mapa-preview {
        min-height: 330px;
    }

    .curiosidade-box {
        padding: 30px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

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

        grid-auto-rows: 160px;
    }

    .galeria-grande {
        grid-column: span 2;
    }

}
/* ========================================
   PÁGINA HISTÓRIA
======================================== */

.pagina-historia {
    padding: 0;
    text-align: left;
}

.historia-hero {
    padding: 110px 0;

    background:
        linear-gradient(
            rgba(6, 48, 31, 0.88),
            rgba(6, 48, 31, 0.88)
        );

    color: white;
}

.historia-hero-conteudo {
    max-width: 800px;
}

.historia-hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(42px, 7vw, 68px);
}

.historia-hero p {
    max-width: 700px;

    color: #dbe8df;

    font-size: 19px;
}

.historia-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 65px;
}

.historia-grid h2 {
    margin-bottom: 20px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 42px);

    line-height: 1.2;
}

.historia-grid p {
    margin-bottom: 15px;

    color: #68736b;
}

.historia-imagem {
    min-height: 360px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #dce8df;

    border-radius: 18px;
}

.historia-imagem span {
    font-size: 65px;
}

.historia-imagem strong {
    margin-top: 10px;

    color: #15432f;

    font-size: 24px;
}


/* LINHA DO TEMPO */

.linha-tempo-secao {
    background: white;
}

.linha-tempo {
    max-width: 900px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.evento-historia {
    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 20px;

    padding: 28px;

    background: #f7f9f6;

    border: 1px solid #e1e8e2;

    border-radius: 15px;
}

.evento-numero {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #167249;

    color: white;

    font-weight: bold;
}

.evento-historia h3 {
    margin-bottom: 7px;

    color: #153d2b;
}

.evento-historia p {
    color: #68736b;
}


/* DESTAQUE */

.historia-destaque {
    background: #edf3ee;
}

.destaque-historico {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;
}

.destaque-historico h2 {
    margin-bottom: 15px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 42px);
}

.destaque-historico p {
    margin-bottom: 22px;

    color: #68736b;
}

.destaque-foto {
    min-height: 360px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #d2e0d5;

    border-radius: 18px;

    color: #536b5b;

    font-weight: bold;
}


/* CURIOSIDADES */

.curiosidades-historia {
    background: white;
}

.curiosidades-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.curiosidade-card {
    padding: 30px;

    background: #f7f9f6;

    border: 1px solid #e1e8e2;

    border-radius: 15px;
}

.curiosidade-card span {
    font-size: 38px;
}

.curiosidade-card h3 {
    margin: 12px 0 8px;

    color: #153d2b;
}

.curiosidade-card p {
    color: #68736b;
}


/* RESPONSIVO */

@media (max-width: 800px) {

    .historia-grid,
    .destaque-historico {
        grid-template-columns: 1fr;
    }

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

}

@media (max-width: 500px) {

    .historia-hero {
        padding: 80px 0;
    }

    .evento-historia {
        grid-template-columns: 1fr;
    }

    .historia-imagem,
    .destaque-foto {
        min-height: 280px;
    }

}
/* ========================================
   PÁGINA CULTURA
======================================== */

.pagina-cultura {
    padding: 0;
    text-align: left;
}


/* CAPA */

.cultura-hero {
    padding: 115px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;
}

.cultura-hero-conteudo {
    max-width: 800px;
}

.cultura-hero .secao-tag {
    color: #f2cb4d;
}

.cultura-hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(43px, 7vw, 70px);

    line-height: 1.05;
}

.cultura-hero p {
    max-width: 700px;

    color: #dbe9df;

    font-size: 19px;
}


/* INTRODUÇÃO */

.cultura-introducao {
    background: white;
}

.cultura-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 65px;
}

.cultura-intro-grid h2 {
    margin-bottom: 20px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 42px);

    line-height: 1.2;
}

.cultura-intro-grid p {
    margin-bottom: 15px;

    color: #68736b;
}

.cultura-intro-imagem {
    min-height: 370px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dce9df,
            #c8ddcc
        );
}

.cultura-intro-imagem span {
    font-size: 65px;
}

.cultura-intro-imagem strong {
    margin-top: 10px;

    color: #153e2c;

    font-size: 25px;
}


/* MANIFESTAÇÕES */

.manifestacao {
    background: #f6f8f5;
}

.manifestacao-clara {
    background: white;
}

.manifestacao-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.manifestacao-grid h2 {
    margin-bottom: 17px;

    color: #123c2a;

    font-size: clamp(31px, 5vw, 44px);
}

.manifestacao-grid p {
    margin-bottom: 15px;

    color: #68736b;
}

.manifestacao-imagem {
    min-height: 340px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #d9e6dc,
            #c6dbc9
        );
}

.manifestacao-imagem span {
    font-size: 80px;
}


/* TAGS CULINÁRIA */

.cultura-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;
}

.cultura-tags span {
    padding: 8px 15px;

    border-radius: 30px;

    background: #e1eee5;

    color: #155d3d;

    font-size: 13px;

    font-weight: bold;
}


/* FINAL */

.cultura-final {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;

    text-align: center;
}

.cultura-final .container {
    max-width: 750px;
}

.cultura-final > .container > span {
    color: #f2cb4d;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.cultura-final h2 {
    margin: 12px 0 15px;

    color: white;

    font-size: clamp(30px, 5vw, 43px);

    line-height: 1.2;
}

.cultura-final p {
    max-width: 600px;

    margin: 0 auto 27px;

    color: #dbe9df;
}


/* RESPONSIVO */

@media (max-width: 800px) {

    .cultura-intro-grid,
    .manifestacao-grid {
        grid-template-columns: 1fr;
    }

    .manifestacao-grid.inverter
    .manifestacao-imagem {
        order: -1;
    }

}


@media (max-width: 500px) {

    .cultura-hero {
        padding: 80px 0;
    }

    .cultura-intro-imagem,
    .manifestacao-imagem {
        min-height: 270px;
    }

    .manifestacao-imagem span {
        font-size: 65px;
    }

}
/* ========================================
   PÁGINA MUNICÍPIOS
======================================== */

.pagina-municipios {
    padding: 0;
    text-align: left;
}

.municipios-hero {
    padding: 115px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;
}

.municipios-hero-conteudo {
    max-width: 800px;
}

.municipios-hero .secao-tag {
    color: #f2cb4d;
}

.municipios-hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(43px, 7vw, 70px);

    line-height: 1.05;
}

.municipios-hero p {
    max-width: 700px;

    color: #dbe9df;

    font-size: 19px;
}

.municipios-listagem {
    background: #f6f8f5;
}

.todos-municipios {
    display: flex;

    flex-direction: column;

    gap: 22px;

    max-width: 1050px;

    margin: auto;
}

.municipio-detalhe {
    display: grid;

    grid-template-columns:
        65px 1fr 220px;

    gap: 25px;

    align-items: center;

    padding: 25px;

    background: white;

    border: 1px solid #e2e8e3;

    border-radius: 18px;

    transition: .25s;
}

.municipio-detalhe:hover {
    transform: translateY(-3px);

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

.municipio-numero {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #167249;

    color: white;

    font-weight: bold;
}

.municipio-tipo {
    color: #167249;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.municipio-conteudo h2 {
    margin: 5px 0 8px;

    color: #123c2a;

    font-size: 29px;
}

.municipio-conteudo p {
    max-width: 600px;

    color: #68736b;

    margin-bottom: 17px;
}

.municipio-acoes {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.municipio-foto {
    min-height: 150px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #dce9df,
            #c7dccb
        );
}

.municipio-foto span {
    font-size: 55px;
}


/* RESPONSIVO */

@media (max-width: 850px) {

    .municipio-detalhe {
        grid-template-columns:
            60px 1fr;
    }

    .municipio-foto {
        grid-column: 1 / -1;

        min-height: 180px;
    }

}


@media (max-width: 550px) {

    .municipios-hero {
        padding: 80px 0;
    }

    .municipio-detalhe {
        grid-template-columns: 1fr;

        padding: 22px;
    }

    .municipio-numero {
        width: 48px;
        height: 48px;
    }

    .municipio-foto {
        grid-column: auto;
    }

}
/* ========================================
   PÁGINA MAPA
======================================== */

.pagina-mapa {
    padding: 0;
    text-align: left;
}


/* CAPA */

.mapa-hero {
    padding: 115px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;
}

.mapa-hero-conteudo {
    max-width: 800px;
}

.mapa-hero .secao-tag {
    color: #f2cb4d;
}

.mapa-hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(43px, 7vw, 70px);

    line-height: 1.05;
}

.mapa-hero p {
    max-width: 700px;

    color: #dbe9df;

    font-size: 19px;
}


/* MAPA */

.mapa-principal {
    background: #f6f8f5;
}

.mapa-google {
    width: 100%;
    min-height: 520px;

    overflow: hidden;

    border-radius: 20px;

    background: #dce8df;

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

.mapa-placeholder {
    min-height: 520px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.mapa-placeholder span {
    font-size: 65px;
}

.mapa-placeholder h3 {
    margin-top: 10px;

    color: #123c2a;

    font-size: 25px;
}

.mapa-placeholder p {
    color: #68736b;
}


/* LUGARES */

.lugares-mapa {
    background: white;
}

.lugares-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

.lugar-card {
    overflow: hidden;

    border: 1px solid #e1e7e2;

    border-radius: 16px;

    background: #f8faf7;

    transition: .25s;
}

.lugar-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .08);
}

.lugar-imagem {
    height: 190px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #dce9df,
            #c8ddcc
        );

    font-size: 60px;
}

.lugar-conteudo {
    padding: 23px;
}

.lugar-conteudo > span {
    color: #167249;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;
}

.lugar-conteudo h3 {
    margin: 6px 0 9px;

    color: #123c2a;

    font-size: 21px;
}

.lugar-conteudo p {
    min-height: 72px;

    margin-bottom: 18px;

    color: #68736b;
}

.botao-local {
    border: 0;

    padding: 11px 17px;

    border-radius: 7px;

    background: #167249;

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;
}

.botao-local:hover {
    background: #105a39;
}


/* STREET VIEW */

.street-area {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #155f41
        );

    color: white;
}

.street-cabecalho {
    max-width: 700px;

    margin: 0 auto 40px;

    text-align: center;
}

.street-cabecalho > span {
    color: #f2cb4d;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.street-cabecalho h2 {
    margin: 8px 0 12px;

    font-size: clamp(32px, 5vw, 45px);
}

.street-cabecalho p {
    color: #dbe8df;
}

.street-view-container {
    min-height: 500px;

    overflow: hidden;

    border-radius: 20px;

    background: #102b20;

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

.street-placeholder {
    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.icone-360 {
    width: 100px;
    height: 100px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border:
        2px solid
        rgba(255,255,255,.4);

    border-radius: 50%;

    color: #f2cb4d;

    font-size: 28px;

    font-weight: bold;
}

.street-placeholder h3 {
    margin-bottom: 8px;

    font-size: 25px;
}

.street-placeholder p {
    color: #c6d6cb;
}


/* PASSOS */

.como-explorar {
    background: #f6f8f5;
}

.passos-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.passo-card {
    padding: 30px;

    border-radius: 15px;

    background: white;

    border: 1px solid #e1e7e2;
}

.passo-card > span {
    display: inline-flex;

    width: 45px;
    height: 45px;

    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border-radius: 50%;

    background: #167249;

    color: white;

    font-weight: bold;
}

.passo-card h3 {
    margin-bottom: 8px;

    color: #123c2a;
}

.passo-card p {
    color: #68736b;
}


/* RESPONSIVO */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .mapa-hero {
        padding: 80px 0;
    }

    .mapa-google,
    .mapa-placeholder {
        min-height: 380px;
    }

    .lugares-grid,
    .passos-grid {
        grid-template-columns: 1fr;
    }

    .lugar-conteudo p {
        min-height: auto;
    }

    .street-area {
        padding: 65px 0;
    }

    .street-view-container,
    .street-placeholder {
        min-height: 380px;
    }

}
/* GALERIA */

.pagina-galeria {
    padding: 0;
}

.galeria-hero {
    padding: 115px 0;

    background: linear-gradient(
        135deg,
        #082f20,
        #176b47
    );

    color: white;
}

.galeria-hero .secao-tag {
    color: #f2cb4d;
}

.galeria-hero h1 {
    margin-bottom: 18px;

    color: white;

    font-size: clamp(45px, 7vw, 70px);
}

.galeria-hero p {
    max-width: 650px;

    color: #dbe9df;

    font-size: 19px;
}

.galeria-area {
    background: #f6f8f5;
}


/* FILTROS */

.filtros-galeria {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 40px;
}

.filtro {
    padding: 10px 18px;

    border: 1px solid #d4dfd7;

    border-radius: 30px;

    background: white;

    color: #315443;

    cursor: pointer;

    font-weight: 600;

    transition: .2s;
}

.filtro:hover,
.filtro.ativo {
    border-color: #167249;

    background: #167249;

    color: white;
}


/* FOTOS */

.galeria-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

.foto-card {
    overflow: hidden;

    background: white;

    border-radius: 16px;

    border: 1px solid #e0e7e1;

    transition: .25s;
}

.foto-card:hover {
    transform: translateY(-5px);

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

.foto-placeholder {
    height: 240px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #dce9df,
        #c4dac9
    );

    font-size: 65px;
}

.foto-info {
    padding: 20px;
}

.foto-info span {
    color: #167249;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;
}

.foto-info h3 {
    margin: 5px 0;

    color: #123c2a;

    font-size: 20px;
}

.foto-info p {
    color: #77827a;

    font-size: 14px;
}


/* CLASSE USADA PELO JAVASCRIPT */

.foto-card.escondido {
    display: none;
}


/* RESPONSIVO */

@media (max-width: 850px) {

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

}

@media (max-width: 550px) {

    .galeria-hero {
        padding: 80px 0;
    }

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

    .foto-placeholder {
        height: 220px;
    }

}
/* ========================================
   PÁGINA SOBRE
======================================== */

.pagina-sobre {
    padding: 0;
    text-align: left;
}


/* CAPA */

.sobre-hero {
    padding: 115px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;
}

.sobre-hero-conteudo {
    max-width: 800px;
}

.sobre-hero .secao-tag {
    color: #f2cb4d;
}

.sobre-hero h1 {
    margin-bottom: 20px;

    color: white;

    font-size: clamp(43px, 7vw, 70px);

    line-height: 1.05;
}

.sobre-hero p {
    max-width: 700px;

    color: #dbe9df;

    font-size: 19px;
}


/* APRESENTAÇÃO */

.sobre-apresentacao {
    background: white;
}

.sobre-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.sobre-grid h2 {
    margin-bottom: 20px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 43px);

    line-height: 1.2;
}

.sobre-grid p {
    margin-bottom: 15px;

    color: #68736b;
}

.sobre-destaque {
    min-height: 380px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dce9df,
            #c4dac8
        );

    text-align: center;
}

.sobre-destaque > span {
    font-size: 65px;
}

.sobre-destaque h3 {
    margin: 12px 0 8px;

    color: #123c2a;

    font-size: 27px;
}

.sobre-destaque p {
    max-width: 330px;
}


/* OBJETIVOS */

.objetivos-sobre {
    background: #f6f8f5;
}

.objetivos-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.objetivo-card {
    padding: 30px;

    border: 1px solid #e1e8e2;

    border-radius: 16px;

    background: white;

    transition: .25s;
}

.objetivo-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, .07);
}

.objetivo-card > span {
    font-size: 38px;
}

.objetivo-card h3 {
    margin: 12px 0 8px;

    color: #123c2a;

    font-size: 21px;
}

.objetivo-card p {
    color: #68736b;
}


/* RECURSOS */

.recursos-sobre {
    background: white;
}

.recursos-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;
}

.recursos-grid h2 {
    margin-bottom: 15px;

    color: #123c2a;

    font-size: clamp(30px, 5vw, 43px);
}

.recursos-grid p {
    color: #68736b;
}

.lista-recursos {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 25px;
}

.lista-recursos div {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border-radius: 8px;

    background: #f4f8f5;
}

.lista-recursos span {
    color: #167249;

    font-weight: bold;
}


/* VISUAL */

.recursos-visual {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;
}

.recurso-visual-item {
    min-height: 160px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #e0ebe2;

    color: #123c2a;

    font-size: 35px;

    font-weight: bold;
}

.recurso-visual-item span {
    margin-top: 8px;

    font-size: 14px;
}


/* FINAL */

.sobre-final {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            #082f20,
            #176b47
        );

    color: white;

    text-align: center;
}

.sobre-final .container {
    max-width: 760px;
}

.sobre-final > .container > span {
    color: #f2cb4d;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.sobre-final h2 {
    margin: 10px 0 15px;

    color: white;

    font-size: clamp(31px, 5vw, 44px);
}

.sobre-final p {
    max-width: 600px;

    margin: 0 auto 28px;

    color: #dbe9df;
}

.sobre-final-botoes {
    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* RESPONSIVO */

@media (max-width: 800px) {

    .sobre-grid,
    .recursos-grid {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 550px) {

    .sobre-hero {
        padding: 80px 0;
    }

    .objetivos-grid,
    .lista-recursos {
        grid-template-columns: 1fr;
    }

    .sobre-destaque {
        min-height: 300px;
    }

    .recursos-visual {
        grid-template-columns: 1fr 1fr;
    }

    .sobre-final-botoes {
        flex-direction: column;

        align-items: center;
    }

    .sobre-final-botoes .btn {
        width: 100%;

        max-width: 300px;

        text-align: center;
    }

}
/* EVENTOS CLICÁVEIS */

.evento-historia.clicavel {
    cursor: pointer;
}

.evento-historia.clicavel:hover {
    border-color: #167249;

    background: #f1f7f3;

    transform: translateY(-2px);
}

.ver-mais {
    display: inline-block;

    margin-top: 10px;

    color: #167249;

    font-size: 13px;

    font-weight: bold;
}


/* DETALHES DA HISTÓRIA */

.historia-detalhes {
    display: none;

    grid-template-columns: 380px 1fr;

    gap: 35px;

    margin-top: -8px;
    margin-bottom: 25px;

    padding: 30px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid #dce6df;

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

.historia-detalhes.aberto {
    display: grid;
}

.historia-detalhes img {
    width: 100%;
    height: 270px;

    object-fit: cover;

    border-radius: 14px;
}

.detalhe-data {
    display: block;

    margin-bottom: 8px;

    color: #167249;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.historia-detalhes h3 {
    margin-bottom: 12px;

    color: #123c2a;

    font-size: 27px;
}

.historia-detalhes p {
    margin-bottom: 12px;

    color: #667169;
}


/* CELULAR */

@media (max-width: 750px) {

    .historia-detalhes,
    .historia-detalhes.aberto {
        grid-template-columns: 1fr;
    }

    .historia-detalhes img {
        height: 220px;
    }

}
/* ========================================
   CULTURA INTERATIVA
======================================== */

.cultura-interativa {
    background: #f6f8f5;
}

.cultura-lista {
    max-width: 950px;
    margin: auto;

    display: flex;
    flex-direction: column;

    gap: 18px;
}

.cultura-item {
    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 22px;

    align-items: center;

    padding: 28px;

    border: 1px solid #dfe7e1;

    border-radius: 16px;

    background: white;
}

.cultura-item.clicavel {
    cursor: pointer;

    transition:
        transform .2s,
        border-color .2s,
        box-shadow .2s;
}

.cultura-item.clicavel:hover {
    transform: translateY(-3px);

    border-color: #167249;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, .06);
}

.cultura-item-icone {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e1eee5;

    font-size: 29px;
}

.cultura-item h3 {
    margin-bottom: 5px;

    color: #123c2a;

    font-size: 22px;
}

.cultura-item p {
    color: #68736b;
}


/* DETALHES */

.cultura-detalhes {
    display: none;

    grid-template-columns:
        minmax(280px, 380px)
        1fr;

    gap: 35px;

    margin-top: -6px;
    margin-bottom: 20px;

    padding: 30px;

    border: 1px solid #dbe5dd;

    border-radius: 18px;

    background: white;

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

.cultura-detalhes.aberto {
    display: grid;

    animation: abrirCultura .3s ease;
}

@keyframes abrirCultura {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.cultura-detalhes img {
    width: 100%;
    height: 100%;
    min-height: 290px;

    object-fit: cover;

    border-radius: 14px;

    background: #dce8df;
}

.cultura-detalhes-texto {
    display: flex;

    flex-direction: column;

    justify-content: center;
}

.detalhe-cultura {
    display: block;

    margin-bottom: 7px;

    color: #167249;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.cultura-detalhes h3 {
    margin-bottom: 13px;

    color: #123c2a;

    font-size: clamp(24px, 3vw, 30px);
}

.cultura-detalhes p {
    margin-bottom: 11px;

    color: #667169;
}


/* RESPONSIVO */

@media (max-width: 800px) {

    .cultura-detalhes,
    .cultura-detalhes.aberto {
        grid-template-columns: 1fr;
    }

    .cultura-detalhes img {
        height: 260px;
        min-height: auto;
    }

}

@media (max-width: 500px) {

    .cultura-item {
        grid-template-columns: 55px 1fr;

        padding: 20px;

        gap: 15px;
    }

    .cultura-item-icone {
        width: 48px;
        height: 48px;

        font-size: 24px;
    }

    .cultura-detalhes {
        padding: 20px;

        gap: 22px;
    }

    .cultura-detalhes img {
        height: 220px;
    }

}