/*================ HEADER MOBILE =================*/

@media (max-width:768px) {

    .header .container {

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

        height: 85px;
    }

    .menu-toggle {

        display: block;

        background: none;
        border: none;

        font-size: 28px;

        cursor: pointer;

        color: #062B52;
    }

    .logo img {

        width: 140px;

    }

    /* Esconde apenas o idioma */
    .language {

        display: none;

    }

    /* Mantém o botão Reservar */
    .header-right {

        display: flex;
        align-items: center;
        gap: 12px;

    }

    /* Botão menor no celular */
    .btn-whatsapp {

        padding: 10px 18px;
        font-size: 14px;

    }

    /* Menu */

    nav {

        position: absolute;

        top: 85px;

        left: 0;

        width: 100%;

        background: #fff;

        display: none;

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

    }

    nav.active {

        display: block;

    }

    nav ul {

        flex-direction: column;

        align-items: center;

        gap: 20px;

        padding: 30px;

    }

    .mobile-only {

        display: block;

    }

    .hero {

        padding-top: 140px;

    }

}

.mobile-actions {

    display: none;

}

@media(max-width:768px) {

    .mobile-actions {

        display: flex;

        align-items: center;

        gap: 12px;

    }

    .header-right {

        display: none;

    }

}

/*======================================
HERO RESPONSIVO
======================================*/

@media (max-width:768px) {

    .hero {
        padding-top: 120px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* imagem grande do desktop */
    .hero-image {
        display: none;
    }

    /* imagem exclusiva do celular */
    .hero-mobile-img {
        display: block;
        width: 100%;
        max-width: 340px;
        margin: 25px auto 35px;
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
    }

    .hero-text {
        width: 100%;
        text-align: center;
    }

    .hero-badge {
        display: inline-block;
        margin-bottom: 20px;
    }

    .hero-text h1 {
        font-size: 34px;
        line-height: 1.2;
    }

    .hero-text p {
        font-size: 16px;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .hero-info {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        margin-top: 30px;
    }

}

@media (max-width:480px) {

    .hero {
        padding-top: 100px;
    }

    .hero-mobile-img {
        max-width: 300px;
        border-radius: 25px;
    }

    .hero-text h1 {
        font-size: 28px;
    }

    .hero-text p {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons a {
        width: 100%;
        justify-content: center;
    }

}

/*======================================
TRANSFERS RESPONSIVO
======================================*/

@media (max-width: 768px) {

    .transfer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .transfer-card {
        width: 100%;
    }

    .transfer-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .transfer-banner {
        padding: 35px 25px;
    }

}

/*======================================
PASSEIOS RESPONSIVO
======================================*/

@media (max-width: 768px) {

    .tour-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tour-card {
        width: 100%;
    }

}

/*======================================
TÍTULOS DAS SEÇÕES - CELULAR
======================================*/

@media (max-width:768px){

    .section-title h2{
        font-size: 32px;
        line-height: 1.25;
    }

    .section-title p{
        font-size: 16px;
        line-height: 1.7;
    }

}