/* ==========================================================
   TURISMO RESPONSÁVEL
========================================================== */

.hero-responsavel{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-responsavel img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:relative;

    width:100%;

    background:linear-gradient(
        rgba(8,18,24,.65),
        rgba(8,18,24,.70)
    );

    padding:140px 0;

    color:#fff;

}

.hero-overlay span{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:24px;

}

.hero-overlay h1{

    font-size:clamp(2.8rem,6vw,5rem);

    line-height:1.1;

    margin-bottom:30px;

}

.hero-overlay p{

    max-width:760px;

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:45px;

}

.btn-principal{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    background:#0D2C3A;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-principal:hover{

    transform:translateY(-4px);

    background:#18485d;

}



/* ==========================================================
   SEÇÕES
========================================================== */

.conteudo{

    padding:110px 0;

}

.conteudo .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.conteudo.reverso .container,

.container.reverso{

    direction:rtl;

}

.container.reverso>*{

    direction:ltr;

}

.fundo-verde{

    background:#f4faf6;

}

.fundo-claro{

    background:#f8fafb;

}



/* ==========================================================
   TEXTO
========================================================== */

.texto h2{

    font-size:clamp(2rem,4vw,3rem);

    color:#0D2C3A;

    margin-bottom:28px;

}

.texto p{

    margin-bottom:22px;

    font-size:1.05rem;

    color:#4f5d66;

    line-height:1.9;

}



/* ==========================================================
   IMAGENS
========================================================== */

.imagem{

    position:relative;

}

.imagem img{

    width:100%;

    border-radius:30px;

    display:block;

    box-shadow:

        0 25px 60px rgba(0,0,0,.12);

}



/* ==========================================================
   CHECKLIST
========================================================== */

.checklist{

    display:grid;

    gap:14px;

    margin-top:35px;

}

.checklist li{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 22px;

    border-radius:18px;

    background:#fff;

    box-shadow:

        0 10px 25px rgba(13,44,58,.08);

    transition:.3s;

}

.checklist li:hover{

    transform:translateX(8px);

}



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

.lista-orientacoes{

    display:grid;

    gap:14px;

    margin-top:28px;

}

.lista-orientacoes li{

    padding:18px 22px;

    border-left:5px solid #0D2C3A;

    background:#fff;

    border-radius:14px;

    box-shadow:

        0 10px 24px rgba(13,44,58,.06);

    transition:.3s;

}

.lista-orientacoes li:hover{

    transform:translateX(6px);

}



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

.bloco-destaque{

    padding:110px 0;

    background:#0D2C3A;

    color:#fff;

}

.bloco-destaque h2{

    text-align:center;

    font-size:2.6rem;

    margin-bottom:55px;

}

.cards{

    display:grid;

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

    gap:30px;

}

.cards article{

    padding:38px;

    border-radius:24px;

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

    backdrop-filter:blur(12px);

}

.cards h3{

    margin-bottom:18px;

    font-size:1.35rem;

}

.cards p{

    line-height:1.8;

    color:rgba(255,255,255,.88);

}

/* ==========================================================
   AVISO IMPORTANTE
========================================================== */

.aviso-importante{

    padding:110px 0;

    background:linear-gradient(
        135deg,
        #f8fafb,
        #eef5f7
    );

}

.caixa-aviso{

    max-width:900px;

    margin:auto;

    padding:50px;

    border-left:8px solid #0D2C3A;

    border-radius:28px;

    background:#fff;

    box-shadow:
        0 20px 60px rgba(13,44,58,.10);

}

.caixa-aviso h2{

    color:#0D2C3A;

    margin-bottom:24px;

    font-size:2rem;

}

.caixa-aviso p{

    color:#55636d;

    line-height:1.9;

    margin-bottom:18px;

}



/* ==========================================================
   COMPROMISSO
========================================================== */

.compromisso{

    padding:120px 0;

    text-align:center;

    background:#0D2C3A;

    color:#fff;

}

.compromisso img{

    width:100%;

    max-width:900px;

    margin:auto;

    display:block;

    border-radius:30px;

    margin-bottom:50px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.30);

}

.compromisso h2{

    font-size:clamp(2.2rem,4vw,3.4rem);

    margin-bottom:28px;

}

.compromisso p{

    max-width:820px;

    margin:0 auto 22px;

    line-height:1.9;

    font-size:1.08rem;

    color:rgba(255,255,255,.92);

}

.compromisso blockquote{

    max-width:760px;

    margin:60px auto;

    font-size:1.5rem;

    font-style:italic;

    line-height:1.7;

    color:#CFE8F3;

}



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

.compromisso .btn-principal{

    background:#fff;

    color:#0D2C3A;

}

.compromisso .btn-principal:hover{

    background:#CFE8F3;

    transform:translateY(-5px);

}



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

.footer{

    padding:40px 0;

    background:#08161d;

    color:rgba(255,255,255,.75);

    text-align:center;

}

.footer p{

    margin:6px 0;

    font-size:.95rem;

}



/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-overlay .container,

.texto,

.imagem,

.cards article,

.caixa-aviso,

.compromisso{

    animation:fadeUp .8s ease both;

}



/* ==========================================================
   HOVER DAS IMAGENS
========================================================== */

.imagem{

    overflow:hidden;

    border-radius:30px;

}

.imagem img{

    transition:
        transform .8s ease,
        filter .5s ease;

}

.imagem:hover img{

    transform:scale(1.06);

    filter:brightness(1.05);

}



/* ==========================================================
   MELHORIAS DAS LISTAS
========================================================== */

.checklist li::before{

    content:"✓";

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#0D2C3A;

    color:#fff;

    font-weight:700;

    flex-shrink:0;

}

.lista-orientacoes li::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#0D2C3A;

    display:inline-block;

    margin-right:14px;

}



/* ==========================================================
   SCROLL SUAVE DOS TÍTULOS
========================================================== */

section{

    scroll-margin-top:120px;

}



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

@media(max-width:1100px){

    .conteudo .container{

        grid-template-columns:1fr;

        gap:50px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .hero-overlay{

        padding:110px 0;

    }

}



@media(max-width:768px){

    .hero-overlay h1{

        font-size:2.6rem;

    }

    .hero-overlay p{

        font-size:1rem;

    }

    .conteudo{

        padding:80px 0;

    }

    .bloco-destaque{

        padding:80px 0;

    }

    .compromisso{

        padding:90px 0;

    }

    .caixa-aviso{

        padding:35px;

    }

}



@media(max-width:560px){

    .hero-overlay{

        padding:90px 0;

    }

    .hero-overlay span{

        font-size:.75rem;

    }

    .btn-principal{

        width:100%;

    }

    .texto h2{

        font-size:2rem;

    }

    .compromisso blockquote{

        font-size:1.2rem;

    }

}

/* ==========================================================
   BARRA DE LEITURA
========================================================== */

.barra-leitura{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#0D2C3A;

    z-index:9999;

}



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

.btn-topo{

    position:fixed;

    right:30px;

    bottom:30px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#0D2C3A;

    color:#fff;

    font-size:1.4rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    box-shadow:

        0 12px 30px rgba(0,0,0,.25);

}

.btn-topo.mostrar{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* ==========================================================
   ANIMAÇÃO
========================================================== */

.texto,

.imagem,

.cards article,

.caixa-aviso{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.visivel{

    opacity:1;

    transform:none;

}