:root{

  --azul-escuro:#003B8E;
  --azul-medio:#0077D9;
  --azul-claro:#4DB8FF;
  --amarelo:#F4B400;
  --amarelo-hover:#d99800;
  --fundo:#F5F9FF;
  --branco:#FFFFFF;

}



*{

  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat', Arial, Helvetica, sans-serif;

}



html{

  scroll-behavior:smooth;

}



body{

  background:var(--fundo);
  overflow-x:hidden;

}





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


header{

  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  background:linear-gradient(
    180deg,
    rgba(0,59,142,0.85),
    rgba(0,59,142,0.10)
  );

}



nav{

  width:100%;
  padding:20px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;

}



.logo{

  width:110px;

}



nav ul{

  display:flex;
  list-style:none;
  gap:30px;

}



nav a{

  color:white;
  text-decoration:none;
  font-weight:700;

}



nav a:hover{

  color:var(--amarelo);

}





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


.hero-passeio{

  min-height:100vh;

  background:

  linear-gradient(
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
  ),

  url("saomigueldogostoso-banner.jpg")
  center/cover no-repeat;


  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  color:white;

  padding:0 8%;

}





.hero-content{

  max-width:950px;

}





.hero-content h1{

  font-size:76px;

  font-weight:900;

  text-transform:uppercase;

  color:rgba(255,255,255,0.88);

  text-shadow:

  0 4px 20px rgba(0,0,0,0.45);

}





.hero-content p{

  margin-top:15px;

  font-size:23px;

  line-height:1.5;

}





.badges{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:12px;

  margin-top:25px;

}





.badges span{

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

  backdrop-filter:blur(8px);

  color:white;

  padding:10px 18px;

  border-radius:30px;

  font-size:14px;

  font-weight:600;

  border:

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

}





.btn{

  display:inline-block;

  margin-top:28px;

  padding:15px 35px;

  background:var(--amarelo);

  color:white;

  text-decoration:none;

  border-radius:35px;

  font-weight:800;

  transition:.3s;

}





.btn:hover{

  background:var(--amarelo-hover);

  transform:scale(1.05);

}





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


.intro,
.atracoes,
.roteiro,
.experiencias,
.contato{

  padding:90px 8%;

}



.intro{

  background:white;

  text-align:center;

}





.intro h2,
.atracoes h2,
.roteiro h2,
.experiencias h2{

  color:var(--azul-escuro);

  font-size:38px;

  margin-bottom:25px;

  text-align:center;

}





.intro p{

  max-width:900px;

  margin:0 auto;

  color:#444;

  font-size:18px;

  line-height:1.7;

}





/* ==========================
        CARDS ATRAÇÕES
========================== */


.cards{

  display:grid;

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

  gap:30px;

  margin-top:45px;

}





.card{

  background:white;

  border-radius:22px;

  overflow:hidden;

  box-shadow:
  0 8px 25px rgba(0,0,0,0.09);

  border-bottom:4px solid transparent;

  transition:.3s;

}





.card:hover{

  transform:translateY(-8px);

  border-bottom:
  4px solid var(--amarelo);

}





.card-info{

  padding:22px;

}





.card-info h3{

  color:var(--azul-escuro);

  margin-bottom:10px;

  font-size:22px;

}





.card-info p{

  color:#444;

  line-height:1.5;

}







/* ==========================
        CARROSSEL CSS
========================== */


.carousel-css{

  position:relative;

  width:100%;

  height:260px;

  overflow:hidden;

  background:#ddd;

}





.carousel-css input{

  display:none;

}





.slides{

  width:300%;

  height:100%;

  display:flex;

  transition:.4s ease;

}





.slides img{

  width:calc(100% / 3);

  height:100%;

  object-fit:cover;

  display:block;

  cursor:pointer;

}







/* SETAS */


.setas{

  display:none;

}





.seta{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:38px;

  height:38px;

  border-radius:50%;

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

  color:white;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  font-size:20px;

  z-index:5;

}





.voltar{

  left:10px;

}





.avancar{

  right:10px;

}





.bolinhas{

  position:absolute;

  bottom:12px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:8px;

  z-index:5;

}





.bolinhas label{

  width:10px;

  height:10px;

  background:white;

  border-radius:50%;

  cursor:pointer;

  opacity:.6;

}







/* ==========================
        CONTROLE DOS SLIDES
========================== */


/* MARCO ZERO */


#marco1:checked ~ .slides{

 margin-left:0;

}


#marco2:checked ~ .slides{

 margin-left:-100%;

}


#marco3:checked ~ .slides{

 margin-left:-200%;

}



#marco1:checked ~ .s1,
#marco2:checked ~ .s2,
#marco3:checked ~ .s3{

 display:block;

}





/* URCA DO TUBARÃO */


#urca1:checked ~ .slides{

 margin-left:0;

}


#urca2:checked ~ .slides{

 margin-left:-100%;

}


#urca3:checked ~ .slides{

 margin-left:-200%;

}



#urca1:checked ~ .s1,
#urca2:checked ~ .s2,
#urca3:checked ~ .s3{

 display:block;

}







/* RUA DA XÊPA */


#xepa1:checked ~ .slides{

 margin-left:0;

}


#xepa2:checked ~ .slides{

 margin-left:-100%;

}


#xepa3:checked ~ .slides{

 margin-left:-200%;

}



#xepa1:checked ~ .s1,
#xepa2:checked ~ .s2,
#xepa3:checked ~ .s3{

 display:block;

}







/* PRAIA DE TOURINHOS */


#tourinhos1:checked ~ .slides{

 margin-left:0;

}


#tourinhos2:checked ~ .slides{

 margin-left:-100%;

}


#tourinhos3:checked ~ .slides{

 margin-left:-200%;

}



#tourinhos1:checked ~ .s1,
#tourinhos2:checked ~ .s2,
#tourinhos3:checked ~ .s3{

 display:block;

}




/* ==========================
        ROTEIRO
========================== */


.roteiro{

  background:white;

}





.roteiro-box{

  max-width:900px;

  margin:45px auto 0;

  display:grid;

  gap:22px;

}





.roteiro-item{

  display:flex;

  gap:20px;

  background:var(--fundo);

  padding:25px;

  border-radius:20px;

  border-left:5px solid var(--amarelo);

}





.roteiro-item span{

  min-width:55px;

  height:55px;

  background:

  linear-gradient(
  135deg,
  var(--azul-escuro),
  var(--azul-medio)
  );

  color:white;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-weight:900;

}





.roteiro-item h3{

  color:var(--azul-escuro);

  margin-bottom:8px;

}





.roteiro-item p{

  color:#444;

  line-height:1.5;

}







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


.experiencias{

  background:white;

}





.experiencias h2{

  margin-bottom:15px;

}





.subtitulo{

  text-align:center;

  max-width:750px;

  margin:0 auto 45px;

  color:#444;

  font-size:18px;

  line-height:1.6;

}





.experiencias-grid{

  display:grid;

  grid-template-columns:

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

  gap:30px;

}





.experiencia-card{

  background:var(--fundo);

  border-radius:24px;

  overflow:hidden;

  box-shadow:

  0 8px 25px rgba(0,0,0,0.08);

  border-bottom:4px solid transparent;

  transition:.3s;

}





.experiencia-card:hover{

  transform:translateY(-8px);

  border-bottom:

  4px solid var(--amarelo);

}





.midia{

  width:100%;

  height:320px;

  overflow:hidden;

  background:#ddd;

}





.midia img,
.midia video{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}





.experiencia-info{

  padding:28px;

}





.experiencia-info h3{

  color:var(--azul-escuro);

  font-size:26px;

  margin-bottom:15px;

}





.experiencia-info p{

  color:#444;

  line-height:1.6;

}







/* ==========================
        CONTATO
========================== */


.contato{

  background:var(--fundo);

}





.contato-box{

  max-width:850px;

  margin:0 auto;

  padding:55px 30px;

  border-radius:28px;

  text-align:center;

  color:white;

  background:

  linear-gradient(
  135deg,
  var(--azul-escuro),
  var(--azul-medio)
  );

  box-shadow:

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

}





.contato-box h2{

  font-size:36px;

  margin-bottom:15px;

}





.contato-box p{

  font-size:18px;

}





.instagram{

  margin-top:25px;

  color:var(--amarelo);

  font-weight:800;

}







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


footer{

  background:var(--azul-escuro);

  color:white;

  text-align:center;

  padding:35px 20px;

  line-height:1.7;

}







/* ==========================
        WHATSAPP FLUTUANTE
========================== */


.whatsapp-float{

  position:fixed;

  right:22px;

  bottom:22px;

  background:

  linear-gradient(
  135deg,
  #25D366,
  #128C7E
  );

  color:white;

  padding:14px 18px;

  border-radius:50px;

  display:flex;

  align-items:center;

  gap:12px;

  text-decoration:none;

  box-shadow:

  0 10px 30px rgba(0,0,0,.28);

  z-index:999;

  transition:.3s;

}





.whatsapp-float:hover{

  transform:

  translateY(-5px) scale(1.03);

}





.whatsapp-float span{

  font-size:28px;

}





.whatsapp-float strong{

  display:block;

  font-size:15px;

}





.whatsapp-float small{

  display:block;

  font-size:12px;

  opacity:.9;

}





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


.lightbox{

  position:fixed;

  inset:0;

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

  display:none;

  align-items:center;

  justify-content:center;

  z-index:100;

  padding:30px;

}





.lightbox.ativo{

  display:flex;

}





.lightbox img{

  max-width:95%;

  max-height:90vh;

  border-radius:18px;

  box-shadow:

  0 10px 40px rgba(0,0,0,.5);

}





.fechar-lightbox{

  position:absolute;

  top:25px;

  right:35px;

  color:white;

  font-size:42px;

  cursor:pointer;

}








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



@media(max-width:768px){


header{
  position:absolute;
}



nav{

  padding:15px 5%;
  flex-direction:column;
  gap:10px;

}



.logo{

  width:80px;

}



nav ul{

  gap:15px;
  flex-wrap:wrap;
  justify-content:center;

}



nav a{

  font-size:14px;

}





.hero-passeio{

  min-height:100svh;

  padding:120px 6% 50px;

  align-items:center;

}



.hero-content{

  max-width:100%;

}





.hero-content h1{

  font-size:34px;

  line-height:1.1;

  letter-spacing:-1px;

}





.hero-content p{

  font-size:17px;

  line-height:1.5;

  margin-top:20px;

}





.badges{

  gap:8px;

  margin-top:25px;

}



.badges span{

  font-size:12px;

  padding:8px 13px;

}





.btn{

  padding:14px 28px;

  font-size:14px;

}





.intro,
.atracoes,
.roteiro,
.experiencias,
.contato{

  padding:60px 5%;

}





.intro h2,
.atracoes h2,
.roteiro h2,
.experiencias h2{

  font-size:28px;

}





.cards{

  grid-template-columns:1fr;

}





.carousel-css{

  height:230px;

}





.roteiro-item{

  flex-direction:column;

}





.experiencias-grid{

  grid-template-columns:1fr;

}





.midia{

  height:230px;

}





.whatsapp-float{

  right:15px;

  bottom:15px;

  padding:12px;

}



.whatsapp-float div{

  display:none;

}


}