/* ==========================================================
   ATRATIVO.CSS
   ROTAS CERTAS - VIVA PIATÃ
========================================================== */


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

#atrativo {

    width: 100%;

    overflow: hidden;

}


#atrativo img {

    max-width: 100%;

    display: block;

}



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

.rota-header {

    position: relative;

    z-index: 20;

    background:

        rgba(12, 25, 20, 0.92);

    backdrop-filter:

        blur(12px);

    border-bottom:

        1px solid rgba(255,255,255,0.08);

}


.rota-header .container {

    max-width: 1200px;

    margin: auto;

    padding:

        18px 25px;

    display:

        flex;

    justify-content:

        space-between;

    align-items:

        center;

}


.breadcrumb {

    display:

        flex;

    gap:

        10px;

    align-items:

        center;

    font-size:

        0.9rem;

    color:

        rgba(255,255,255,.7);

}


.breadcrumb a {

    color:

        #ffffff;

    text-decoration:

        none;

    transition:

        .3s;

}


.breadcrumb a:hover {

    color:

        #c9a35b;

}



.btn-voltar {

    color:

        #ffffff;

    text-decoration:

        none;

    padding:

        10px 18px;

    border-radius:

        30px;

    border:

        1px solid rgba(255,255,255,.2);

    transition:

        .3s;

}


.btn-voltar:hover {

    background:

        rgba(255,255,255,.12);

}



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


.rota-hero {

    position:

        relative;

    height:

        min(75vh,720px);

    overflow:

        hidden;

}


.rota-hero > img {

    width:

        100%;

    height:

        100%;

    object-fit:

        cover;

}



.hero-gradient {

    position:

        absolute;

    inset:

        0;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.15),

            rgba(0,0,0,.85)

        );

}



.hero-overlay {

    position:

        absolute;

    inset:

        0;

    display:

        flex;

    align-items:

        flex-end;

}



.hero-container {

    width:

        100%;

    max-width:

        1200px;

    margin:

        0 auto;

    padding:

        60px 25px;

}



.hero-categoria {

    display:

        inline-block;

    padding:

        8px 18px;

    border-radius:

        50px;

    background:

        rgba(255,255,255,.12);

    backdrop-filter:

        blur(8px);

    color:

        #ffffff;

    font-size:

        .85rem;

    letter-spacing:

        .05em;

    text-transform:

        uppercase;

}



.hero-container h1 {

    margin:

        18px 0 10px;

    color:

        #ffffff;

    font-size:

        clamp(2.4rem,6vw,4.8rem);

    line-height:

        1;

}



.hero-localizacao {

    color:

        rgba(255,255,255,.85);

    font-size:

        1.15rem;

}



.hero-tipo {

    color:

        #d6b46a;

    font-size:

        1.1rem;

    font-weight:

        600;

}



/* ==========================================================
   BOTÕES HERO
========================================================== */


.hero-botoes {

    display:

        flex;

    gap:

        15px;

    margin-top:

        30px;

    flex-wrap:

        wrap;

}



.btn-principal,

.btn-secundario {

    display:

        inline-flex;

    align-items:

        center;

    justify-content:

        center;

    padding:

        14px 28px;

    border-radius:

        40px;

    text-decoration:

        none;

    cursor:

        pointer;

    font-weight:

        600;

    transition:

        .3s;

}



.btn-principal {

    background:

        #c9a35b;

    color:

        #1c241e;

}



.btn-principal:hover {

    transform:

        translateY(-3px);

}



.btn-secundario {

    background:

        rgba(255,255,255,.12);

    border:

        1px solid rgba(255,255,255,.25);

    color:

        #ffffff;

}



.btn-secundario:hover {

    background:

        rgba(255,255,255,.22);

}

/* ==========================================================
   BARRA DE INFORMAÇÕES
========================================================== */


.info-strip {

    position:

        relative;

    z-index:

        5;

    background:

        #ffffff;

    box-shadow:

        0 -10px 30px rgba(0,0,0,.08);

}



.info-strip .container {

    max-width:

        1200px;

    margin:

        auto;

    padding:

        25px;

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(160px,1fr));

    gap:

        20px;

}



.info-item {

    display:

        flex;

    align-items:

        center;

    gap:

        15px;

    padding:

        15px;

    border-radius:

        16px;

    background:

        #f6f6f2;

}



.info-item .icon {

    width:

        34px;

    height:

        34px;

    fill:

        #557a62;

}



.info-item small {

    display:

        block;

    color:

        #777;

    font-size:

        .75rem;

}



.info-item strong {

    display:

        block;

    color:

        #18352b;

    font-size:

        .95rem;

}




/* ==========================================================
   CONTAINER PRINCIPAL
========================================================== */


.rota-container {

    max-width:

        1200px;

    margin:

        auto;

    padding:

        60px 25px;

}




/* ==========================================================
   BLOCOS
========================================================== */


.bloco {

    margin-bottom:

        80px;

}



.titulo-bloco {

    margin-bottom:

        30px;

}



.titulo-bloco span {

    display:

        block;

    color:

        #c09a55;

    text-transform:

        uppercase;

    font-size:

        .75rem;

    letter-spacing:

        .12em;

    font-weight:

        700;

    margin-bottom:

        10px;

}



.titulo-bloco h2 {

    margin:

        0;

    color:

        #18352b;

    font-size:

        clamp(1.7rem,3vw,2.5rem);

    line-height:

        1.2;

}



.texto-destaque {

    font-size:

        1.25rem;

    line-height:

        1.8;

    color:

        #444;

    max-width:

        900px;

}





/* ==========================================================
   DESCRIÇÃO
========================================================== */


#descricaoRota {

    display:

        flex;

    flex-direction:

        column;

    gap:

        18px;

}



#descricaoRota p {

    color:

        #4c4c4c;

    line-height:

        1.8;

    font-size:

        1.05rem;

}





/* ==========================================================
   LISTAS
========================================================== */


.lista-experiencias,

.lista-publico {

    list-style:

        none;

    padding:

        0;

    margin:

        0;

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:

        15px;

}



.lista-experiencias li,

.lista-publico li {

    background:

        #f5f5ef;

    border-left:

        4px solid #c9a35b;

    padding:

        16px;

    border-radius:

        12px;

    color:

        #344238;

}





/* ==========================================================
   TIMELINE
========================================================== */


.timeline {

    position:

        relative;

    display:

        flex;

    flex-direction:

        column;

    gap:

        20px;

}



.timeline-item {

    display:

        flex;

    gap:

        20px;

    align-items:

        flex-start;

}



.timeline-marker {

    width:

        18px;

    height:

        18px;

    border-radius:

        50%;

    background:

        #c9a35b;

    margin-top:

        8px;

    flex-shrink:

        0;

}



.timeline-content {

    background:

        #f5f5ef;

    padding:

        20px;

    border-radius:

        15px;

    flex:

        1;

}



.timeline-content h3 {

    margin:

        0 0 8px;

    color:

        #18352b;

}





/* ==========================================================
   GRID DE EXPERIÊNCIAS
========================================================== */


.grid-icones {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(150px,1fr));

    gap:

        20px;

}



.icone-experiencia {

    background:

        #ffffff;

    border:

        1px solid #e5e5dc;

    border-radius:

        18px;

    padding:

        25px;

    text-align:

        center;

    transition:

        .3s;

}



.icone-experiencia:hover {

    transform:

        translateY(-5px);

}



.icone-experiencia img {

    width:

        45px;

    height:

        45px;

    margin:

        0 auto 15px;

}



.icone-experiencia span {

    display:

        block;

    color:

        #18352b;

    font-weight:

        600;

}




/* ==========================================================
   INFORMAÇÕES ÚTEIS
========================================================== */


.grid-servicos {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(230px,1fr));

    gap:

        20px;

}



.info-util {

    background:

        #18352b;

    color:

        white;

    padding:

        25px;

    border-radius:

        18px;

}



.info-util strong {

    display:

        block;

    color:

        #d6b46a;

    margin-bottom:

        8px;

}

/* ==========================================================
   PONTOS DE INTERESSE
========================================================== */


.cards-pontos {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(240px,1fr));

    gap:

        25px;

}



.ponto-card {

    background:

        #ffffff;

    border-radius:

        18px;

    overflow:

        hidden;

    border:

        1px solid #e8e6dc;

    transition:

        .3s;

}



.ponto-card:hover {

    transform:

        translateY(-6px);

    box-shadow:

        0 15px 35px rgba(0,0,0,.12);

}



.ponto-card img {

    width:

        100%;

    height:

        220px;

    object-fit:

        cover;

}



.ponto-card div {

    padding:

        20px;

}



.ponto-card h3 {

    margin:

        0 0 10px;

    color:

        #18352b;

}



.ponto-card p {

    margin:

        0;

    color:

        #666;

    line-height:

        1.6;

}





/* ==========================================================
   GALERIA
========================================================== */


.galeria-masonry {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:

        20px;

}



.galeria-item {

    position:

        relative;

    overflow:

        hidden;

    border-radius:

        18px;

    cursor:

        pointer;

    aspect-ratio:

        4 / 3;

}



.galeria-item img {

    width:

        100%;

    height:

        100%;

    object-fit:

        cover;

    transition:

        .5s;

}



.galeria-item:hover img {

    transform:

        scale(1.08);

}



.galeria-legenda {

    position:

        absolute;

    bottom:

        0;

    left:

        0;

    right:

        0;

    padding:

        20px;

    background:

        linear-gradient(

            transparent,

            rgba(0,0,0,.75)

        );

    color:

        white;

    font-size:

        .9rem;

}





/* ==========================================================
   CUIDADOS
========================================================== */


.lista-cuidados {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(260px,1fr));

    gap:

        15px;

}



.cuidado-item {

    padding:

        18px;

    background:

        #fff5e8;

    border-radius:

        14px;

    border-left:

        4px solid #c9a35b;

    color:

        #55462f;

}





/* ==========================================================
   AMBIENTE NATURAL
========================================================== */


.ambiente-box {

    background:

        linear-gradient(

            135deg,

            #18352b,

            #355d49

        );

    padding:

        35px;

    border-radius:

        25px;

    color:

        white;

}



.ambiente-box h3 {

    color:

        #d6b46a;

}



.ambiente-tags {

    display:

        flex;

    flex-wrap:

        wrap;

    gap:

        10px;

}



.ambiente-tag {

    padding:

        8px 16px;

    border-radius:

        30px;

    background:

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

}





/* ==========================================================
   POTENCIAL
========================================================== */


.grid-potencial {

    display:

        flex;

    flex-wrap:

        wrap;

    gap:

        12px;

}



.potencial-item {

    background:

        #edf3ee;

    color:

        #18352b;

    padding:

        12px 20px;

    border-radius:

        30px;

}





/* ==========================================================
   GUIAS
========================================================== */


.grid-guias {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:

        25px;

}



.guia-card {

    display:

        flex;

    gap:

        20px;

    align-items:

        center;

    background:

        #ffffff;

    border:

        1px solid #e5e5dc;

    padding:

        20px;

    border-radius:

        20px;

}



.guia-avatar {

    width:

        90px;

    height:

        90px;

    border-radius:

        50%;

    overflow:

        hidden;

    flex-shrink:

        0;

}



.guia-avatar img {

    width:

        100%;

    height:

        100%;

    object-fit:

        cover;

}



.guia-info h4 {

    margin:

        0;

    color:

        #18352b;

}



.guia-info span {

    color:

        #c9a35b;

    font-size:

        .85rem;

}





/* ==========================================================
   INTEGRAÇÕES
========================================================== */


.grid-integracoes {

    display:

        grid;

    grid-template-columns:

        repeat(auto-fit,minmax(200px,1fr));

    gap:

        20px;

}



.integracao-card {

    background:

        #f5f5ef;

    padding:

        25px;

    border-radius:

        18px;

    text-align:

        center;

}





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


.cta-final {

    padding:

        60px 25px;

}



.cta-box {

    max-width:

        900px;

    margin:

        auto;

    background:

        #18352b;

    color:

        white;

    padding:

        50px;

    border-radius:

        30px;

    text-align:

        center;

}



.cta-tag {

    color:

        #d6b46a;

    text-transform:

        uppercase;

    font-size:

        .8rem;

}



.cta-box h2 {

    font-size:

        2rem;

}



.cta-botoes {

    margin-top:

        30px;

    display:

        flex;

    justify-content:

        center;

    gap:

        15px;

    flex-wrap:

        wrap;

}





/* ==========================================================
   LIGHTBOX
========================================================== */


.lightbox {

    position:

        fixed;

    inset:

        0;

    background:

        rgba(0,0,0,.9);

    display:

        none;

    align-items:

        center;

    justify-content:

        center;

    z-index:

        999;

}



.lightbox.ativo {

    display:

        flex;

}



.lightbox img {

    max-width:

        90%;

    max-height:

        85vh;

    border-radius:

        12px;

}



.lightbox-fechar,

.lightbox-anterior,

.lightbox-proxima {

    position:

        absolute;

    background:

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

    color:

        white;

    border:

        none;

    font-size:

        2rem;

    width:

        50px;

    height:

        50px;

    border-radius:

        50%;

    cursor:

        pointer;

}



.lightbox-fechar {

    top:

        30px;

    right:

        30px;

}



.lightbox-anterior {

    left:

        30px;

}



.lightbox-proxima {

    right:

        30px;

}





/* ==========================================================
   BOTÃO TOPO
========================================================== */


.btn-topo {

    position:

        fixed;

    bottom:

        25px;

    right:

        25px;

    width:

        45px;

    height:

        45px;

    border-radius:

        50%;

    border:

        none;

    background:

        #18352b;

    color:

        white;

    display:

        none;

    cursor:

        pointer;

}



.btn-topo.visivel {

    display:

        block;

}





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


@media(max-width:768px){


.rota-header .container {

    flex-direction:

        column;

    gap:

        15px;

}


.hero-container {

    padding:

        40px 20px;

}



.rota-hero {

    height:

        65vh;

}



.info-strip .container {

    grid-template-columns:

        1fr;

}



.rota-container {

    padding:

        40px 18px;

}



.cta-box {

    padding:

        35px 20px;

}



.guia-card {

    flex-direction:

        column;

    text-align:

        center;

}


}

/* ==========================================================
   ATRATIVOS RELACIONADOS
========================================================== */

.cards-relacionados {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 28px;

  margin-top: 36px;

}

.relacionado-card {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border-radius: 20px;

  border: 1px solid rgba(0, 0, 0, 0.08);

  text-decoration: none;

  color: inherit;

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.relacionado-card:hover {

  transform: translateY(-8px);

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

}

.relacionado-imagem {

  position: relative;

  overflow: hidden;

  height: 230px;

}

.relacionado-imagem img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .6s ease;

}

.relacionado-card:hover img {

  transform: scale(1.08);

}

.relacionado-categoria {

  position: absolute;

  top: 18px;

  left: 18px;

  padding: 8px 14px;

  border-radius: 999px;

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

  backdrop-filter: blur(8px);

  color: #ffffff;

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: .05em;

  text-transform: uppercase;

}

.relacionado-conteudo {

  display: flex;

  flex-direction: column;

  gap: 18px;

  padding: 26px;

  flex: 1;

}

.relacionado-conteudo h3 {

  margin: 0;

  font-size: 1.35rem;

  line-height: 1.3;

  color: var(--cor-primaria);

}

.relacionado-conteudo p {

  margin: 0;

  color: #555;

  line-height: 1.7;

  flex: 1;

}

.relacionado-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: auto;

  font-weight: 700;

  color: var(--cor-primaria);

  transition: transform .3s ease;

}

.relacionado-card:hover .relacionado-link {

  transform: translateX(6px);

}

@media (max-width: 768px) {

  .cards-relacionados {

    grid-template-columns: 1fr;

    gap: 22px;

  }

  .relacionado-imagem {

    height: 210px;

  }

}