/* =========================================================
   Arquivo: super-tur/css/responsive.css
========================================================= */

@media (max-width: 950px) {

    .secao {
        padding: 85px 0;
    }

    .cabecalho__container {
        display: flex;
        justify-content: space-between;
        min-height: 72px;
    }

    .cabecalho__logo {
        position: relative;
        z-index: 3;
        width: 115px;
    }

    .botao--cabecalho {
        display: none;
    }

    .botao-menu {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 38px;
        height: 38px;
    }

    .botao-menu span {
        display: block;
        width: 27px;
        height: 1px;
        background-color: var(--branco);
        transition: var(--transicao);
    }

    .cabecalho.rolado .botao-menu span {
        background-color: var(--verde);
    }

    .menu-principal {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 90px 40px 40px;
        background-color: var(--verde-escuro);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transicao);
    }

    .menu-principal.aberto {
        opacity: 1;
        pointer-events: auto;
    }

    .menu-principal__link,
    .cabecalho.rolado .menu-principal__link {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--branco);
        font-family: var(--fonte-titulo);
        font-size: 2.3rem;
        text-transform: none;
    }

    .cabecalho.menu-ativo {
        background-color: var(--verde-escuro);
    }

    .cabecalho.menu-ativo .cabecalho__logo img {
        filter: brightness(0) invert(1);
    }

    .cabecalho.menu-ativo .botao-menu span {
        background-color: var(--branco);
    }

    .introducao__grid,
    .como-funciona__grid,
    .hospedagem-destaque__grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .categorias__grid {
        gap: 14px;
    }

    .categoria {
        min-height: 450px;
    }

    .cards-passeios {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-passeio:last-child {
        grid-column: 1 / 3;
        width: calc(50% - 12px);
    }

    .hospedagem-destaque__imagem {
        height: 500px;
    }

    .galeria-home__lista {
        grid-template-columns: repeat(2, 1fr);
    }

    .rodape__principal {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .rodape__marca {
        grid-column: 1 / 4;
    }

}


@media (max-width: 650px) {

    .container {
        width: calc(100% - 32px);
    }

    .secao {
        padding: 70px 0;
    }

    .botao {
        width: 100%;
    }

    .hero {
        min-height: 690px;
    }

    .hero__fundo {
        background-position: 64% center;
    }

    .hero__filtro {
        background: rgba(19, 49, 39, 0.64);
    }

    .hero__conteudo {
        padding-top: 50px;
    }

    .hero h1 {
        font-size: 3.7rem;
    }

    .hero p {
        font-size: 0.94rem;
    }

    .hero__acoes {
        flex-direction: column;
    }

    .introducao {
        padding: 70px 0;
    }

    .introducao__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .introducao h2 {
        font-size: 2.7rem;
    }

    .introducao__texto {
        padding-top: 0;
    }

    .categorias {
        padding-bottom: 70px;
    }

    .categorias__grid {
        grid-template-columns: 1fr;
    }

    .categoria {
        min-height: 390px;
    }

    .categoria__conteudo {
        right: 24px;
        bottom: 24px;
        left: 24px;
    }

    .categoria h2 {
        font-size: 2.8rem;
    }

    .titulo-secao {
        display: block;
        margin-bottom: 32px;
    }

    .titulo-secao h2 {
        font-size: 2.7rem;
    }

    .titulo-secao .link-texto {
        margin-top: 20px;
    }

    .cards-passeios {
        grid-template-columns: 1fr;
    }

    .card-passeio:last-child {
        grid-column: auto;
        width: auto;
    }

    .card-passeio__imagem {
        height: 250px;
    }

    .card-passeio p {
        min-height: auto;
    }

    .como-funciona {
        padding: 75px 0;
    }

    .como-funciona__grid {
        gap: 50px;
    }

    .como-funciona__apresentacao h2 {
        font-size: 2.8rem;
    }

    .hospedagem-destaque__imagem {
        height: 380px;
    }

    .hospedagem-destaque__conteudo h2 {
        font-size: 2.7rem;
    }

    .galeria-home__lista {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .galeria-home__lista a {
        height: 220px;
    }

    .chamada-final {
        padding: 75px 0;
    }

    .chamada-final h2 {
        font-size: 2.7rem;
    }

    .rodape__principal {
        grid-template-columns: 1fr 1fr;
        gap: 45px 25px;
    }

    .rodape__marca {
        grid-column: 1 / 3;
    }

    .rodape__coluna:nth-child(3) {
        grid-column: 1 / 3;
    }

    .whatsapp-flutuante {
        right: 14px;
        bottom: 14px;
    }

}
/* =========================================================
   RESPONSIVIDADE DA PÁGINA DE PASSEIOS
   Arquivo relacionado: super-tur/passeios.html
========================================================= */

@media (max-width: 950px) {

    .catalogo-passeios__cabecalho {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lista-passeios {
        grid-template-columns: repeat(2, 1fr);
    }

    .faixa-atendimento__conteudo {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

}


@media (max-width: 650px) {

    .capa-interna {
        min-height: 430px;
        padding: 130px 0 55px;
    }

    .capa-interna h1 {
        font-size: 3.7rem;
    }

    .catalogo-passeios__cabecalho h2 {
        font-size: 2.7rem;
    }

    .filtros-passeios {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 15px;
    }

    .filtro-passeio {
        flex: 0 0 auto;
    }

    .lista-passeios {
        grid-template-columns: 1fr;
    }

    .card-catalogo__imagem {
        height: 250px;
    }

    .card-catalogo__conteudo > p {
        min-height: auto;
    }

    .faixa-atendimento {
        padding: 70px 0;
    }

    .faixa-atendimento h2 {
        font-size: 2.7rem;
    }

}
/* =========================================================
   RESPONSIVIDADE DOS DETALHES DO PASSEIO
========================================================= */

@media (max-width: 950px) {

    .detalhes-produto__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .consulta-passeio {
        position: static;
        max-width: 600px;
    }

    .galeria-produto__grid {
        grid-template-columns: 1fr 1fr;
    }

    .galeria-produto__grid img:first-child {
        grid-column: 1 / 3;
    }

}


@media (max-width: 650px) {

    .capa-produto {
        min-height: 540px;
    }

    .capa-produto__conteudo {
        padding-bottom: 45px;
    }

    .capa-produto h1 {
        font-size: 4rem;
    }

    .detalhes-produto__grid {
        gap: 45px;
    }

    .detalhes-produto__principal > h2 {
        font-size: 2.7rem;
    }

    .informacoes-passeio {
        grid-template-columns: 1fr;
    }

    .bloco-detalhes ul {
        grid-template-columns: 1fr;
    }

    .consulta-passeio {
        padding: 23px;
    }

    .galeria-produto__grid {
        grid-template-columns: 1fr;
    }

    .galeria-produto__grid img,
    .galeria-produto__grid img:first-child {
        grid-column: auto;
        height: 280px;
    }

}
/* =========================================================
   RESPONSIVIDADE DO CATÁLOGO DE HOSPEDAGENS
========================================================= */

@media (max-width: 950px) {

    .catalogo-hospedagens__cabecalho {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-hospedagem__imagem {
        height: 300px;
    }

    .selecao-hospedagem__grid {
        grid-template-columns: 1fr;
    }

    .selecao-hospedagem__imagem {
        height: 480px;
        margin: 0;
    }

    .selecao-hospedagem__imagem img {
        min-height: auto;
    }

    .selecao-hospedagem__conteudo {
        padding: 75px 0;
    }

}


@media (max-width: 650px) {

    .catalogo-hospedagens__cabecalho h2 {
        font-size: 2.7rem;
    }

    .lista-hospedagens {
        grid-template-columns: 1fr;
    }

    .card-hospedagem__imagem {
        height: 280px;
    }

    .card-hospedagem__conteudo {
        padding: 23px;
    }

    .card-hospedagem__rodape {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .selecao-hospedagem__imagem {
        height: 350px;
    }

    .selecao-hospedagem__conteudo {
        padding: 65px 0;
    }

    .selecao-hospedagem__conteudo h2 {
        font-size: 2.7rem;
    }

}
/* =========================================================
   RESPONSIVIDADE DOS DETALHES DA HOSPEDAGEM
========================================================= */

@media (max-width: 950px) {

    .acomodacao-item {
        grid-template-columns: 1fr 0.7fr;
    }

}


@media (max-width: 650px) {

    .campos-duplos {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .acomodacao-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .galeria-hospedagem__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 210px;
        gap: 7px;
    }

    .galeria-hospedagem__grid img:first-child {
        grid-column: 1 / 3;
        grid-row: auto;
    }

}
/* =========================================================
   RESPONSIVIDADE DA GALERIA PÚBLICA
========================================================= */

@media (max-width: 950px) {

    .pagina-galeria__cabecalho {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .grade-galeria {
        grid-template-columns: repeat(2, 1fr);
    }

    .visualizador-galeria {
        padding: 65px 75px;
    }

}


@media (max-width: 650px) {

    .pagina-galeria__cabecalho h2 {
        font-size: 2.7rem;
    }

    .filtros-galeria {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .filtro-galeria {
        flex: 0 0 auto;
    }

    .grade-galeria {
        grid-auto-rows: 190px;
        gap: 7px;
    }

    .foto-galeria--larga {
        grid-column: span 2;
    }

    .foto-galeria--alta {
        grid-row: span 2;
    }

    .visualizador-galeria {
        padding: 65px 15px 85px;
    }

    .visualizador-galeria__fechar {
        top: 14px;
        right: 18px;
    }

    .visualizador-galeria__navegacao {
        top: auto;
        bottom: 18px;
        transform: none;
    }

    .visualizador-galeria__navegacao--anterior {
        left: calc(50% - 60px);
    }

    .visualizador-galeria__navegacao--proxima {
        right: calc(50% - 60px);
    }

}
/* =========================================================
   RESPONSIVIDADE DA PÁGINA DE CONTATO
========================================================= */

@media (max-width: 950px) {

    .pagina-contato__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .localizacao-contato__grid {
        grid-template-columns: 1fr;
    }

    .localizacao-contato__imagem {
        height: 450px;
        margin: 0;
    }

    .localizacao-contato__imagem img {
        min-height: auto;
    }

    .localizacao-contato__conteudo {
        padding: 70px 0;
    }

}


@media (max-width: 650px) {

    .contato-informacoes h2 {
        font-size: 2.7rem;
    }

    .contato-canal {
        grid-template-columns: 85px 1fr;
        gap: 15px;
    }

    .contato-atendimento {
        grid-template-columns: 1fr;
    }

    .formulario-contato {
        padding: 25px 20px;
    }

    .formulario-contato h2 {
        font-size: 2.2rem;
    }

    .localizacao-contato__imagem {
        height: 340px;
    }

    .localizacao-contato__conteudo {
        padding: 65px 0;
    }

    .localizacao-contato__conteudo h2 {
        font-size: 2.7rem;
    }

}
