Haz tu reserva ahora mismo.
Na Costa Ecológica dos Milagres, um dos trechos mais preservados do litoral brasileiro, o mar se encontra com a segunda maior barreira de corais do mundo. Entre rios tranquilos, coqueirais exuberantes e praias de águas cristalinas, a paisagem cria o cenário perfeito para experiências transformadoras.

Cada instante convida a contemplar, descobrir e viver a harmonia entre natureza, cultura e espírito.
/* ===== CARROSSEL ===== */
.carousel {
position: relative;
max-width: 1200px;
margin: 80px auto;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.6s ease;
}
.carousel-slide {
flex: 0 0 33.3333%;
padding: 0 10px;
box-sizing: border-box;
}
.carousel-slide img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
/* ===== SETAS ===== */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.8);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
z-index: 10;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.carousel-btn:hover {
background: #fff;
}
/* ===== MOBILE ===== */
@media (max-width: 991px) {
.carousel-slide {
flex: 0 0 100%;
}
.carousel-slide img {
height: 300px;
}
}
const track = document.getElementById("carouselTrack");
const slides = document.querySelectorAll(".carousel-slide");
const prevBtn = document.querySelector(".carousel-btn.prev");
const nextBtn = document.querySelector(".carousel-btn.next");
let index = 3;
let slideWidth = slides[0].offsetWidth;
let autoPlay;
function updatePosition(animate = true) {
track.style.transition = animate ? "transform 0.6s ease" : "none";
track.style.transform = `translateX(-${index * slideWidth}px)`;
}
updatePosition(false);
window.addEventListener("resize", () => {
slideWidth = slides[0].offsetWidth;
updatePosition(false);
});
function nextSlide() {
index++;
updatePosition();
if (index === slides.length - 3) {
setTimeout(() => {
index = 3;
updatePosition(false);
}, 600);
}
}
function prevSlide() {
index--;
updatePosition();
if (index === 0) {
setTimeout(() => {
index = slides.length - 6;
updatePosition(false);
}, 600);
}
}
nextBtn.addEventListener("click", () => {
stopAuto();
nextSlide();
startAuto();
});
prevBtn.addEventListener("click", () => {
stopAuto();
prevSlide();
startAuto();
});
/* ===== AUTOPLAY ===== */
function startAuto() {
autoPlay = setInterval(nextSlide, 3500);
}
function stopAuto() {
clearInterval(autoPlay);
}
startAuto();
/* ===== COMO CHEGAR ===== */
.como-chegar {
text-align: center;
padding: 80px 20px;
}
.como-chegar h2 {
letter-spacing: 4px;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 50px;
}
/* ===== CAIXAS ===== */
.como-chegar-boxes {
display: flex;
justify-content: center;
align-items: stretch;
gap: 40px;
margin-bottom: 50px;
max-width: 760px; /* centraliza melhor no eixo dos botões */
margin-left: auto;
margin-right: auto;
}
.como-chegar-box {
border: 1px solid #aa875f;
padding: 40px 30px;
flex: 1;
}
.como-chegar-box h3 {
font-size: 20px;
margin-bottom: 15px;
}
.como-chegar-box p {
font-size: 14px;
line-height: 1.6;
}
/* ===== BOTÕES ===== */
.como-chegar-botoes {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.btn-mapa {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border: 1px solid #aa875f;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
color: #aa875f;
}
.btn-mapa svg {
width: 16px;
height: 16px;
stroke: #aa875f;
}
.btn-mapa:hover {
background: #aa875f;
color: #fff;
}
.btn-mapa:hover svg {
stroke: #fff;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
.como-chegar-boxes {
flex-direction: column;
}
.como-chegar-box {
width: 100%;
}
}
Aproximadamente 2h de carro
(118 km)
Aproximadamente 3h de carro
(160 km)