/* =========================================================
   POR AÍ — CAMADA RESPONSIVA GLOBAL
   Aplicada após os estilos específicos de cada página.
   Não altera tipografia/cores/estrutura desktop; apenas
   impede overflow e adapta componentes para telas menores.
========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, svg {
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    border: 0;
}

.container, .wrap {
    width: min(1160px, 92%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero {
    width: 100%;
    overflow: hidden;
}

.hero-content {
    max-width: 100%;
}

.hero h1 {
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 7vw, 4.25rem);
}

.hero p {
    max-width: 100%;
    overflow-wrap: break-word;
}

.quick-nav-box, .navin {
    max-width: 100%;
}

.quick-nav-box {
    overflow-wrap: anywhere;
}

table {
    max-width: 100%;
}

@media (max-width: 900px) {
    .container, .wrap {
        width: min(94%, 760px);
    }

    .route-grid,
    .intent-grid,
    .article-grid,
    .experience-grid,
    .attractions-grid,
    .parks-grid,
    .beaches-grid,
    .catalog-grid,
    .cards,
    .related-trails,
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .sidebar-card {
        position: static;
    }

    .hero-content {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-wrapper,
    .main-carousel,
    .media-carousel {
        max-width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 700px) {
    .container, .wrap {
        width: 92%;
    }

    .hero {
        min-height: 0;
    }

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

    .hero h1 {
        font-size: clamp(2rem, 10vw, 3.25rem);
        line-height: 1.08;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .quick-nav {
        margin-top: 0;
    }

    .quick-nav-box {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .quick-nav a,
    .nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    main, .content, .main, .section {
        max-width: 100%;
    }

    .route-grid,
    .intent-grid,
    .article-grid,
    .experience-grid,
    .attractions-grid,
    .parks-grid,
    .beaches-grid,
    .catalog-grid,
    .cards,
    .related-trails,
    .grid,
    .recommendations,
    .booking-info,
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-item {
        border-right: none !important;
    }

    .article,
    .intro-card,
    .seo-box,
    .commercial-box,
    .commercial,
    .booking-section,
    .box,
    .related,
    .sidebar-card {
        padding: 22px;
    }

    .section-title {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .route-image {
        height: 210px;
    }

    .carousel-slide {
        height: min(72vw, 360px);
        min-height: 250px;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .carousel-caption {
        padding: 20px 16px 14px;
    }

    .carousel-caption h3 {
        font-size: 1rem;
    }

    .booking-section h2 {
        font-size: clamp(1.6rem, 7vw, 2rem);
    }

    /* Conteúdo que normalmente causa rolagem horizontal */
    .table-wrapper,
    .table-responsive,
    .overflow-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
        min-width: 600px;
    }

    pre, code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    input, select, textarea, button {
        max-width: 100%;
        font: inherit;
    }

    input, select, textarea {
        width: 100%;
    }

    button, .btn, a.btn {
        max-width: 100%;
    }

    footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 420px) {
    .container, .wrap {
        width: 90%;
    }

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

    .hero h1 {
        font-size: clamp(1.85rem, 10vw, 2.6rem);
    }

    .article,
    .intro-card,
    .seo-box,
    .commercial-box,
    .commercial,
    .booking-section,
    .box,
    .related,
    .sidebar-card {
        padding: 18px;
        border-radius: 12px;
    }

    .carousel-slide {
        min-height: 220px;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 20px;
    }
}