/*==========================
RESPONSIVE
==========================*/

/* Header: reduz gaps/logo para caber em telas 1151–1300px */
@media (max-width: 1300px) {
    .nav-links {
        gap: 22px;
    }

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

    .header-btn {
        padding: 12px 22px;
    }
}

/* Header compacto: esconde nav desktop + botão e mostra hambúrguer
   (corrige overflow do menu com 8 links + logo + CTA em telas ~900-1150px) */
@media (max-width: 1150px) {
    .nav-links,
    .btn-primary.header-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .header-wrap {
        gap: 12px;
    }

    .header-actions {
        gap: 10px;
    }

    .logo img {
        width: 120px;
        max-height: 44px;
    }
}

@media (max-width: 1024px) {
    .hero-content {
        max-width: 780px;
        padding-top: 110px;
        padding-bottom: 80px;
    }

    .tour-feature {
        grid-template-columns: 1fr;
    }

    .tour-feature-media {
        height: 340px;
        min-height: 0;
    }

    .tour-feature-panel {
        border-left: 0;
        border-top: 1px solid rgba(42, 78, 126, 0.08);
    }

    .tour-feature-alt .tour-feature-media {
        order: -1;
    }

    .tour-feature-alt .tour-feature-panel {
        border-right: 0;
        border-top: 1px solid rgba(42, 78, 126, 0.08);
    }

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

/* Capitão Apolo Cavalcante: imagem + conteúdo lado a lado e badge abaixo */
    .commander-card {
        grid-template-columns: 0.9fr 1.6fr;
        align-items: center;
    }

    .commander-badge {
        grid-column: 1 / -1;
        min-height: 120px;
        flex-direction: row;
        gap: 18px;
    }

    /* Hero highlights em 2 colunas no tablet */
    .hero-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .logo img {
        width: 110px;
        max-height: 42px;
    }

    .logo-name {
        font-size: 0.56rem;
    }

    .hero-highlights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    section {
        padding: 90px 0;
    }

    .about-grid,
    .tour-grid,
    .gallery-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .tour-feature {
        gap: 0;
        border-radius: 24px;
    }

    .tour-feature-media {
        height: 260px;
        min-height: 0;
    }

    .tour-feature-panel {
        padding: 24px;
    }

    .commander-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .commander-image img {
        height: 320px;
    }

    .commander-badge {
        grid-column: auto;
        min-height: 120px;
        flex-direction: column;
        gap: 8px;
    }

    .contact-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .contact-box a {
        width: 100%;
        justify-content: center;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .hero-content {
        padding-top: 110px;
        padding-bottom: 96px;
    }

    /* Galeria mobile: reduz altura das fotos e esconde as setas grandes */
    .swiper-slide img {
        height: 250px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .section-title {
        margin-bottom: 32px;
    }
}

@media (max-width: 560px) {
    .hero-copy h1 {
        font-size: 2rem;
    }

    .hero-badge {
        font-size: 0.88rem;
        padding: 9px 12px;
    }

    .tour-feature-media {
        height: 220px;
        min-height: 0;
    }

    .tour-feature-panel h3 {
        font-size: 1.4rem;
    }

    .tour-feature-panel p {
        font-size: 0.95rem;
    }

    .hero-copy p {
        font-size: 0.97rem;
    }

    .premium-card,
    .testimonial-card,
    .faq-item,
    .contact-box {
        padding: 22px;
    }

    .social-icon-link {
        width: 100%;
        max-width: 240px;
        justify-content: center;
    }

    /* Títulos de seção menores no mobile */
    .section-title h2 {
        font-size: 1.6rem;
    }

    /* Preço e CTA dos passeios ocupam a largura toda no mobile */
    .tour-price {
        width: 100%;
        text-align: center;
    }

    .tour-feature-panel .hero-panel-btn {
        width: 100%;
    }
}

/* Telas extra pequenas (ex.: iPhone SE / Android compactos) */
@media (max-width: 380px) {
    header {
        padding: 12px 0;
    }

    .logo img {
        width: 90px;
        max-height: 36px;
    }

    .logo-name {
        font-size: 0.5rem;
    }

    .menu-toggle {
        font-size: 24px;
    }

    .hero-copy h1 {
        font-size: 1.7rem;
    }

    .hero-copy h5 {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: 8px 10px;
        gap: 7px;
    }

    .highlight-card {
        padding: 14px 16px;
        gap: 10px;
    }

    .highlight-card i {
        font-size: 17px;
    }

    .section-title h2 {
        font-size: 1.4rem;
    }

    .section-title span {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .section-title p {
        font-size: 0.92rem;
    }

    .btn-primary,
    .btn-outline {
        padding: 12px 22px;
        font-size: 0.95rem;
    }

    .premium-card,
    .testimonial-card,
    .faq-item,
    .contact-box,
    .commander-card {
        padding: 18px;
    }

    .swiper-slide img {
        height: 200px;
    }

    .commander-content h3 {
        font-size: 1.4rem;
    }

    .commander-badge strong {
        font-size: 1.6rem;
    }

    .footer {
        padding: 30px 0;
        font-size: 0.85rem;
    }

    .footer-credit-text {
        font-size: 0.82rem;
    }

    .footer-credit-logo img {
        width: 110px;
    }
}

/* Ajustes finos em telas até 480px */
@media (max-width: 480px) {
    .hero-badge {
        white-space: normal;
        line-height: 1.4;
    }

    .highlight-card {
        font-size: 0.92rem;
    }

    .tour-price {
        font-size: 0.98rem;
    }

    .social-links {
        gap: 12px;
    }

    .social-icon-link {
        max-width: 100%;
    }
}

/* Telas baixas (landscape / notebooks pequenos) */
@media (max-height: 700px) {
    .hero {
        min-height: 560px;
    }

    .hero-content {
        padding-top: 100px;
        padding-bottom: 64px;
    }
}

/*==========================
AJUSTES FINOS DE RESPONSIVIDADE
==========================*/

/* Botão CTA dentro do menu mobile (preenche a largura) */
.mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    width: 100%;
    text-align: center;
}

/* Scroll padding ajustado ao header menor (mobile/tablet) */
@media (max-width: 1150px) {
    html {
        scroll-padding-top: 80px;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 70px;
    }

    /* Safe area do notch / status bar no iPhone */
    header {
        padding-top: max(14px, env(safe-area-inset-top, 0px));
        padding-bottom: 14px;
    }

    .mobile-menu {
        padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 12px));
    }
}

/* Paginação da galeria (bolinhas) — visível em todas as telas */
.swiper-pagination {
    position: static !important;
    margin-top: 6px;
}

.swiper-pagination-bullet {
    background: rgba(232, 184, 75, 0.55);
    opacity: 1;
    width: 9px;
    height: 9px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: var(--dourado-claro);
    width: 26px;
    border-radius: 999px;
}