/* ===========================
   RESPONSIVO (Desktop/Notebook/Tablet/Mobile)
   =========================== */

/* NOTEBOOK (até 1199px) */
@media screen and (max-width: 1199px) {
    header .menu-desktop nav ul li {
        margin: 0 22px;
    }

    .vantagens .itens-container {
        gap: 6%;
    }

    .vantagens .itens-container .img-itens img {
        max-width: 420px;
    }

    .como-funciona .text-como-funciona h3 {
        font-size: 3.4rem;
        line-height: 54px;
    }
}

/* TABLET PAISAGEM (até 991px) */
@media screen and (max-width: 991px) {
    header .menu-desktop nav ul li {
        margin: 0 16px;
    }

    .hero-site .text-hero h1 {
        font-size: 2.4rem;
        line-height: 52px;
    }

    .hero-site .text-hero h1 span {
        font-size: 3.8rem;
    }

    .vantagens .itens-container .txt-itens h3 {
        font-size: 2.4rem;
        line-height: 44px;
    }

    .contato .txt-contato h3 {
        font-size: 2.1rem;
        line-height: 44px;
    }

    .como-funciona .text-como-funciona {
        top: 35%;
    }

    .como-funciona .text-como-funciona h3 {
        font-size: 3rem;
        line-height: 48px;
    }
}

/* MENU MOBILE ATIVA (até 900px) */
@media screen and (max-width: 900px) {

    header .menu-desktop,
    header .btn-contato {
        display: none;
    }

    header .btn-menu-mobile {
        display: block;
    }

    /* menu lateral maior no tablet */
    header .menu-mobile.abrir {
        width: 60%;
    }
}

/* TABLET RETRATO + MOBILE (até 767px) */
@media screen and (max-width: 767px) {

    /* HERO */
    .hero-site .text-hero h1 {
        font-size: 1.7rem;
        line-height: 40px;
    }

    .hero-site .text-hero h1 span {
        font-weight: 800;
        font-size: 2.6rem;
    }

    .hero-site .text-hero p {
        font-size: 1rem;
        color: #fff;
    }

    .hero-site .text-hero p span {
        display: inline;
    }

    .hero-site button {
        width: 220px;
        height: 40px;
    }

    /* VANTAGENS */
    .vantagens .itens-container {
        flex-direction: column;
    }

    .vantagens .itens-container .img-itens img {
        width: 100%;
    }

    .vantagens .itens-container .txt-itens {
        margin-bottom: 20px;
    }

    .vantagens .itens-container .item-1 {
        order: 1;
    }

    /* CONTATO */
    .txt-contato,
    .icons-contato {
        display: block;
        width: 100%;
    }

    .contato .txt-contato h3 {
        font-size: 2rem;
        line-height: 40px;
    }

    .contato .txt-contato p {
        margin-bottom: 20px;
    }

    .contato .icons-contato button {
        width: 100%;
        margin: 0 0 14px 0;
    }

    /* HOTÉIS */
    .hoteis .info-hoteis h3 {
        font-size: 2rem;
        line-height: 40px;
    }

    .hoteis p {
        margin: 20px 0;
        font-size: 1rem;
    }

    /* COMO FUNCIONA */
    .text-como-funciona,
    .cards-como-funciona {
        display: block;
        width: 100%;
    }

    .como-funciona .text-como-funciona {
        position: static;
    }

    .como-funciona .text-como-funciona h3 {
        font-size: 3rem;
        line-height: 50px;
    }

    .como-funciona .cards-como-funciona .card-funciona {
        flex-direction: column;
        text-align: center;
    }

    .como-funciona .cards-como-funciona .card-funciona img {
        max-width: 100px;
    }

    /* FOOTER */
    footer .middle-footer a {
        margin: 0 14px;
        font-size: 0.9rem;
    }

    footer .botton-footer p {
        margin-top: 20px;
        font-size: 0.7rem;
    }

    /* menu lateral menor no mobile */
    header .menu-mobile.abrir {
        width: 78%;
    }
}

/* MOBILE RETRATO (até 480px) */
@media screen and (max-width: 480px) {
    header {
        padding: 16px 0;
    }

    header .logo img {
        max-width: 46px;
    }

    header .menu-mobile nav ul a {
        font-size: 1.25rem;
        padding: 10px 0;
    }

    .hero-site .text-hero h1 {
        font-size: 1.55rem;
        line-height: 36px;
    }

    .hero-site .text-hero h1 span {
        font-size: 2.35rem;
    }

    .vantagens .itens-container .txt-itens h3 {
        font-size: 2.1rem;
        line-height: 40px;
    }

    .como-funciona .text-como-funciona h3 {
        font-size: 2.5rem;
        line-height: 42px;
    }
}

/* ===========================
   PAISAGEM (Landscape) - MOBILE/TABLET
   =========================== */
@media screen and (max-height: 520px) and (orientation: landscape) {
    header {
        padding: 12px 0;
    }

    section.hero-site {
        height: auto;
        min-height: 100vh;
        padding: 90px 0 60px;
    }

    .hero-site .interface {
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero-site .text-hero h1 {
        font-size: 1.6rem;
        line-height: 34px;
    }

    .hero-site .text-hero h1 span {
        font-size: 2.5rem;
    }

    .hero-site .text-hero p {
        margin: 12px 0;
        font-size: 0.95rem;
    }
}