/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.7;

    color: #26332c;

    background: #f7f8f5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1160px, 92%);
    margin: 0 auto;
}


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

.hero {  

    min-height: 650px;

    display: flex;

    align-items: center;

    position: relative;

    color: white;

    background:

        linear-gradient(
            rgba(12,42,29,0.72),
            rgba(29, 42, 12, 0.48)
        ),

        url("imagens/bertioga-capa.webp")
        center / cover no-repeat;
}

.hero-content {

    max-width: 850px;

    padding: 100px 0;
}

.breadcrumb {

    font-size: 14px;

    margin-bottom: 25px;

    opacity: .9;
}

.breadcrumb a {

    text-decoration: underline;
}

.hero h1 {

    font-size:
        clamp(42px, 7vw, 76px);

    line-height: 1.04;

    margin-bottom: 25px;

    font-weight: 800;
}

.hero p {

    font-size: 21px;

    max-width: 790px;

    margin-bottom: 30px;
}

.hero-tag {

    display: inline-block;

    padding: 8px 16px;

    background: rgba(255,255,255,.15);

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 30px;

    margin-bottom: 20px;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.btn {

    display: inline-block;

    padding: 15px 28px;

    border-radius: 7px;

    font-weight: bold;

    transition: .3s;
}

.btn-primary {

    background: #d79b36;

    color: white;
}

.btn-primary:hover {

    background: #bc8025;

    transform: translateY(-2px);
}


/* =====================================================
   NAVEGAÇÃO RÁPIDA
===================================================== */

.quick-nav {

    margin-top: -45px;

    position: relative;

    z-index: 5;
}

.quick-nav-box {

    background: white;

    border-radius: 14px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.12);

    padding: 20px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;
}

.quick-nav a {

    padding: 9px 16px;

    border-radius: 25px;

    background: #edf2ed;

    color: #285d40;

    font-size: 14px;

    font-weight: bold;

    transition: .3s;
}

.quick-nav a:hover {

    background: #285d40;

    color: white;
}


/* =====================================================
   MAIN
===================================================== */

main {

    padding: 85px 0;
}

section {

    margin-bottom: 90px;
}

.section-title {

    color: #214d37;

    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1.2;

    margin-bottom: 18px;
}

.section-subtitle {

    color: #66756c;

    font-size: 18px;

    max-width: 800px;

    margin-bottom: 35px;
}


/* =====================================================
   ARTIGO PRINCIPAL
===================================================== */

.article-header {

    max-width: 900px;

    margin-bottom: 35px;
}

.article-label {

    color: #28b23d;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 10px;
}

.article-title {

    font-size:
        clamp(34px, 5vw, 56px);

    line-height: 1.1;

    color: #214d37;

    margin-bottom: 18px;
}

.article-intro {

    font-size: 20px;

    color: #52635a;

    max-width: 900px;
}


/* =====================================================
   CARROSSEL PRINCIPAL
===================================================== */

.main-carousel {

    margin: 40px 0 55px;

    position: relative;
}

.carousel-wrapper {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background: #111;

    box-shadow:
        0 12px 40px rgba(0,0,0,.16);
}

.carousel-track {

    display: flex;

    transition:
        transform .6s ease;
}

.carousel-slide {

    min-width: 100%;

    height: 590px;

    position: relative;

    background: #111;
}

.carousel-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.carousel-caption {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding:
        90px 45px 35px;

    color: white;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.85)
        );
}

.carousel-caption h3 {

    font-size: 28px;

    margin-bottom: 5px;
}

.carousel-caption p {

    font-size: 16px;

    max-width: 750px;
}

.carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background:
        rgba(0,0,0,.55);

    color: white;

    font-size: 30px;

    cursor: pointer;

    z-index: 5;

    transition: .3s;
}

.carousel-btn:hover {

    background:
        rgba(0,0,0,.85);
}

.carousel-prev {

    left: 20px;
}

.carousel-next {

    right: 20px;
}

.carousel-dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 15px;
}

.carousel-dot {

    width: 10px;

    height: 10px;

    border: none;

    border-radius: 50%;

    background: #c7cec8;

    cursor: pointer;

    transition: .3s;
}

.carousel-dot.active {

    width: 28px;

    border-radius: 10px;

    background: #285d40;
}


/* =====================================================
   TEXTO DO ARTIGO
===================================================== */

.article-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 55px;

    align-items: start;
}

.article-content p {

    margin-bottom: 20px;

    font-size: 17px;
}

.article-content h2 {

    color: #285d40;

    font-size: 30px;

    margin:
        45px 0 18px;
}

.article-content h3 {

    color: #285d40;

    font-size: 23px;

    margin:
        35px 0 12px;
}

.highlight-box {

    background: #e8f0e9;

    border-left:
        5px solid #3d7655;

    border-radius: 8px;

    padding: 25px;

    margin: 30px 0;
}

.highlight-box strong {

    display: block;

    color: #214d37;

    margin-bottom: 8px;

    font-size: 18px;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {

    position: sticky;

    top: 25px;
}

.sidebar-card {

    background: white;

    padding: 28px;

    border-radius: 14px;

    box-shadow:
        0 5px 22px rgba(0,0,0,.06);

    margin-bottom: 20px;
}

.sidebar-card h3 {

    color: #285d40;

    margin-bottom: 15px;
}

.sidebar-card ul {

    list-style: none;
}

.sidebar-card li {

    padding: 10px 0;

    border-bottom:
        1px solid #edf0ed;
}

.sidebar-card li:last-child {

    border-bottom: none;
}


/* =====================================================
   PRAIAS
===================================================== */

.beaches-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 18px;

    margin-top: 35px;
}

.beach-card {

    min-height: 270px;

    border-radius: 13px;

    overflow: hidden;

    position: relative;

    color: white;

    background:
        linear-gradient(
            rgba(0,0,0,.05),
            rgba(0,0,0,.72)
        );
}

.beach-card img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;
}

.beach-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.78)
        );

    z-index: 1;
}

.beach-content {

    position: absolute;

    bottom: 0;

    z-index: 2;

    padding: 22px;
}

.beach-content h3 {

    font-size: 21px;

    margin-bottom: 6px;
}

.beach-content p {

    font-size: 14px;
}


/* =====================================================
   PARQUES
===================================================== */

.parks-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-top: 35px;
}

.park-card {

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 5px 22px rgba(0,0,0,.06);
}

.park-image {

    height: 260px;

    overflow: hidden;
}

.park-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.park-card:hover
.park-image img {

    transform: scale(1.04);
}

.park-content {

    padding: 28px;
}

.park-content h3 {

    color: #285d40;

    font-size: 25px;

    margin-bottom: 10px;
}

.park-content p {

    margin-bottom: 15px;
}

.park-tag {

    display: inline-block;

    background: #edf2ed;

    color: #285d40;

    border-radius: 20px;

    padding: 6px 12px;

    font-size: 12px;

    font-weight: bold;
}


/* =====================================================
   RIO ITAPANHAÚ
===================================================== */

.river-section {

    background: #214d37;

    color: white;

    border-radius: 20px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1fr 1fr;
}

.river-image {

    min-height: 520px;
}

.river-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.river-content {

    padding: 55px 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.river-content h2 {

    font-size: 40px;

    line-height: 1.15;

    margin-bottom: 20px;
}

.river-content p {

    margin-bottom: 18px;

    opacity: .94;
}

.river-list {

    list-style: none;

    margin: 15px 0 25px;
}

.river-list li {

    padding: 7px 0;
}

.river-list li::before {

    content: "✓";

    margin-right: 10px;

    color: #e0b65c;

    font-weight: bold;
}




/* =====================================================
   ÍNDICE VISUAL — GUIA DE EXPERIÊNCIAS
===================================================== */

.seo-pillar-map {
    margin: 0 auto 42px;
    padding: 38px;
    background: linear-gradient(145deg, #f5f8f4, #ffffff);
    border: 1px solid #e1e8e1;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(33,77,55,.06);
}

.pillar-map-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
}

.pillar-map-kicker {
    display: inline-block;
    margin-bottom: 9px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e3ece4;
    color: #285d40;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.pillar-map-heading h2 {
    margin: 0 0 10px;
    color: #214d37;
    font-size: clamp(27px, 4vw, 38px);
    line-height: 1.12;
}

.pillar-map-heading p {
    margin: 0;
    color: #66756c;
    font-size: 15px;
    line-height: 1.7;
}

.pillar-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pillar-experience-card {
    position: relative;
    display: grid;
    grid-template-columns: 32px 42px 1fr 20px;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #e3e9e3;
    border-radius: 14px;
    color: #285d40;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.035);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pillar-experience-card:hover {
    transform: translateY(-4px);
    border-color: #b8cdbd;
    box-shadow: 0 10px 24px rgba(33,77,55,.11);
}

.pillar-number {
    color: #9aa99f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.pillar-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #edf3ee;
    font-size: 20px;
}

.pillar-experience-card span:nth-child(3) {
    min-width: 0;
}

.pillar-experience-card strong {
    display: block;
    margin-bottom: 4px;
    color: #285d40;
    font-size: 14px;
    line-height: 1.25;
}

.pillar-experience-card small {
    display: block;
    overflow: hidden;
    color: #78857d;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pillar-experience-card > b {
    color: #285d40;
    font-size: 19px;
    transition: transform .25s ease;
}

.pillar-experience-card:hover > b {
    transform: translateX(4px);
}

@media (max-width: 1000px) {
    .pillar-experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .seo-pillar-map {
        padding: 25px 16px;
        border-radius: 18px;
    }

    .pillar-experience-grid {
        grid-template-columns: 1fr;
    }

    .pillar-experience-card {
        grid-template-columns: 30px 40px 1fr 18px;
    }
}

/* =====================================================
   CATÁLOGO
===================================================== */

.catalog-header {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 45px;
}

.catalog-header h2 {

    font-size:
        clamp(34px, 5vw, 52px);

    color: #214d37;

    line-height: 1.1;

    margin-bottom: 15px;
}

.catalog-header p {

    color: #66756c;

    font-size: 18px;
}


/* FILTROS */

.catalog-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;
}

.filter-btn {

    border: none;

    background: #e7ece7;

    color: #285d40;

    padding: 9px 17px;

    border-radius: 25px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;
}

.filter-btn.active,
.filter-btn:hover {

    background: #285d40;

    color: white;
}


/* CATÁLOGO */

.catalog-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;
}

.catalog-card {

    background: white;

    border-radius: 14px;

    overflow: hidden;

    border:
        1px solid #e5e9e5;

    box-shadow:
        0 5px 18px rgba(0,0,0,.05);

    display: flex;

    flex-direction: column;

    transition: .3s;
}

.catalog-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.1);
}

.catalog-image {

    height: 215px;

    overflow: hidden;

    position: relative;
}

.catalog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.catalog-card:hover
.catalog-image img {

    transform: scale(1.05);
}

.catalog-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    background:
        rgba(255,255,255,.93);

    color: #285d40;

    padding: 6px 11px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;
}

.catalog-content {

    padding: 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.catalog-content h3 {

    color: #285d40;

    font-size: 21px;

    line-height: 1.25;

    margin-bottom: 8px;
}

.catalog-content p {

    font-size: 14px;

    color: #66756c;

    margin-bottom: 18px;

    flex: 1;
}

.catalog-meta {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 18px;
}

.catalog-meta span {

    background: #f0f3ef;

    padding: 5px 9px;

    border-radius: 5px;

    font-size: 11px;

    color: #52635a;
}

.catalog-btn {

    display: block;

    text-align: center;

    background: #285d40;

    color: white;

    padding: 11px 15px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: bold;

    transition: .3s;
}

.catalog-btn:hover {

    background: #173a29;
}


/* =====================================================
   EXPERIÊNCIAS
===================================================== */

.experience-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.experience-card {

    background: white;

    padding: 28px;

    border-radius: 12px;

    border:
        1px solid #e5e9e5;
}

.experience-icon {

    font-size: 34px;

    margin-bottom: 10px;
}

.experience-card h3 {

    color: #285d40;

    margin-bottom: 8px;
}


/* =====================================================
   CTA
===================================================== */

.final-cta {

    background:

        linear-gradient(
            rgba(20,67,45,.92),
            rgba(20,67,45,.92)
        ),

        url("imagens/bertioga-mata-atlantica.jpg")
        center / cover;

    color: white;

    text-align: center;

    border-radius: 20px;

    padding: 70px 30px;
}

.final-cta h2 {

    font-size:
        clamp(32px, 5vw, 50px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.final-cta p {

    max-width: 750px;

    margin: 0 auto 28px;

    font-size: 18px;
}


/* =====================================================
   VOLTAR AO TOPO
===================================================== */

.back-top {

    text-align: center;

    margin-top: 55px;
}

.back-top a {

    color: #285d40;

    font-weight: bold;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    background: #173a29;

    color: white;

    text-align: center;

    padding: 40px 20px;
}

footer p {

    margin-bottom: 6px;
}

.footer-links {

    margin-top: 15px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    font-size: 14px;
}

.footer-links a {

    opacity: .85;
}

.footer-links a:hover {

    opacity: 1;

    text-decoration: underline;
}


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

@media (max-width: 1000px) {

    .beaches-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

    .catalog-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .article-grid {

        grid-template-columns: 1fr;
    }

    .sidebar {

        position: static;
    }
}


@media (max-width: 800px) {

    .river-section {

        grid-template-columns: 1fr;
    }

    .river-image {

        min-height: 350px;
    }

    .parks-grid {

        grid-template-columns: 1fr;
    }

    .experience-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .carousel-slide {

        height: 450px;
    }
}


@media (max-width: 600px) {

    .hero {

        min-height: 560px;
    }

    .hero p {

        font-size: 17px;
    }

    .quick-nav-box {

        justify-content: flex-start;
    }

    .beaches-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .catalog-grid {

        grid-template-columns: 1fr;
    }

    .experience-grid {

        grid-template-columns: 1fr;
    }

    .carousel-slide {

        height: 360px;
    }

    .carousel-caption {

        padding:
            80px 20px 25px;
    }

    .carousel-caption h3 {

        font-size: 21px;
    }

    .carousel-btn {

        width: 42px;

        height: 42px;

        font-size: 24px;
    }

    .carousel-prev {

        left: 10px;
    }

    .carousel-next {

        right: 10px;
    }

    .river-content {

        padding:
            40px 25px;
    }

    .river-content h2 {

        font-size: 31px;
    }
}