:root{
  --bg:#F5F5DC;/*fundo do painel*/
  --panel:#121a16;
  --text:#363636;/*texto titulos*/
  --muted:rgba(233,240,234,.72);
  --accent:#696969;
  --accent2:#d7b36a;
  --line:rgba(255,215,0);/*LINHAS AMARELAS*/
  --shadow: 0 18px 60px rgba(0,0,0,.35);/*como se ascendense uma luz no fundo da imagem*/
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -20%, rgba(121,194,90,.22), transparent 60%),
              radial-gradient(900px 500px at 95% 10%, rgba(215,179,106,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

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

.topbar{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,15,13,.68);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{ color:var(--text); text-decoration:none; font-weight:700; display:flex; gap:10px; align-items:center; }
.brand__dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow: 0 0 0 6px rgba(121,194,90,.15); }

.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; }
.nav a:hover{ color:var(--text); }

.nav-toggle{ display:none; background:none; border:0; color:var(--text); font-size:22px; }

/*hero comeca aqui*/

.hero{ 
	padding:56px 0 26px; 
	}


.hero__grid{ 
	display:inline; /*tirei o grid e coloquei inline*/
	grid-template-columns: 1.1fr .9fr; 
	gap:24px; 
	align-items:center; 
}

.pill{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.1px;
  margin-bottom:1px;
}

h1{ 
	font-size: clamp(2rem, 3vw, 3rem); 
	margin:0 150px 14px; 
	line-height:1.1; 
	}
.accent{ 
	color:var(--accent2); 
	
}

.lead{
	color:var(--muted); 
	margin:0 150px 14px; 
	font-size:16px; 
	max-width:152ch; 
	}
.hero__cta{ 
	display:flex; 
	gap:12px; 
	margin:22px 0 18px; 
	flex-wrap:wrap; 
	}

.btn{
  display:inline-flex;
  align-items:center; 
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(121,194,90,.95), rgba(121,194,90,.7));
  color:#061006;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(121,194,90,.45);
  box-shadow: 0 14px 40px rgba(121,194,90,.18);
}

.btn:hover{ 
	transform: translateY(-1px); 
	transition: .2s; 
	}
.btn--ghost{
  background: transparent;
  color:#F8F8FF;
  border:1px solid var(--line);
  box-shadow:none;
}

.hero__highlights{ 	
	list-style:none; 
	padding:0;
	margin:18px 0 0; 
	display:grid; 
	gap:10px; 
	}
.hero__highlights li{ 
	color:var(--muted); 	
	font-weight:600; 
	}
.hero__media{ 
/*coloca a caixa de valores no canto inferior a direita da imagem*/
	position:relative; 
}
.hero__img{
  width:100%; 
  height:auto; 
  object-fit: cover;
  border-radius: var(--radius);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.hero__badge{/*posicao da caixa de valor da diaria*/
  position:absolute;
  right:14px; 
  bottom:14px;
  background: rgba(18,26,22,.7);
  backdrop-filter: blur(10px);
  border:1px solid var(--line);
  border-radius: 16px;
  padding:12px 14px; /*tamanho da caixa em volta do Valor*/
}

.hero__badge-title{
	color:var(--muted); 
	font-weight:700; 
	font-size:12px; 
	}

.hero__badge-value{ /*MUDA A COR E A FONTE*/
	display:block;
	font-size:18px; 
	font-weight:900; 
	color:var(--accent2);
 }
/*hero termina aqui*/


.section{ padding:54px 0; }
.section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__title{ margin:0 0 10px; font-size: clamp(1.4rem, 2vw, 2rem); }
.section__subtitle{
	margin:0 0 26px; 
	color:#fffff; 
	max-width:70ch; 
	}

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.card{
  background: rgba(18,26,22,.6);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
}
.card h3{ margin:0 0 8px; font-size:16px; }
.card p{ margin:0; color:var(--muted); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.media-grid{ 
			display:grid; 
			grid-template-columns: repeat(2, 1fr); 
			gap:12px; 
			}
.media-grid img{
	width:100%; 
	height: 190px; object-fit: cover;
   border-radius: 16px; border:1px solid var(--line);
   object-fit: cover;
   transform-origin: center center; /* Força o zoom a começar do centro absoluto */
   transition: transform 0.5s ease; /* Controla a velocidade e a suavidade da transição */
}
.media-grid img:hover {
    transform: scale(2.6); /* Aumenta a imagem em 20% */
}

.checklist{ 
	margin: 18px 0; 
	padding-left: 18px; 
	color:#fffff;
	}
.checklist li{ margin: 10px 0; font-weight:700; }

.note{
  border-left: 3px solid var(--accent2);
  padding: 10px 12px;
  background: rgba(215,179,106,.08);
  border-radius: 10px;
  color: #fffff;
}

.calendar-wrap{
  background: rgba(18,26,22,.55);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

.calendar-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.calendar-month{ font-weight:900; font-size:18px; }
.calendar-sub{ color:var(--muted); font-weight:700; font-size:12px; margin-top:2px; }

.icon-btn{
  width:42px; height:42px; border-radius:12px;
  background: transparent;
  border:1px solid var(--line);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
}

.calendar-weekdays{
  display:grid; grid-template-columns: repeat(7, 1fr);
  color:var(--muted); font-weight:800;
  margin: 8px 0 6px; font-size:12px;
}
.calendar{
  display:grid; grid-template-columns: repeat(7, 1fr);
  gap:6px;
}
.day{
  height:46px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(233,240,234,.95);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  position:relative;
  user-select:none;
}
.day--empty{ opacity:0; border:none; background:transparent; }
.day--blocked{
  background: rgba(231,76,60,.12);
  border-color: rgba(231,76,60,.25);
  color: rgba(255,180,160,.95);
}
.day--free{
  cursor:pointer;
}
.day--free:hover{
  outline: 2px solid rgba(121,194,90,.35);
  outline-offset: 1px;
}

.calendar-legend{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:14px; color:var(--muted); font-weight:800; font-size:13px;
}
.legend-item{ display:flex; align-items:center; gap:8px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot--free{ background: var(--accent); }
.dot--blocked{ background: #e74c3c; }

.calendar-actions{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:18px;
}
.calendar-hint{ color:var(--muted); font-weight:700; margin:0; max-width:55ch; }

.faq{ display:grid; gap:10px; }
.faq-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18,26,22,.45);
  padding: 12px 14px;
}
.faq-item summary{ cursor:pointer; font-weight:900; }
.faq-item p{ margin:10px 0 0; color:var(--muted); }

.form label{ display:block; margin-bottom:12px; color:var(--muted); font-weight:800; }
.form input, .form textarea{
  width:100%; margin-top:6px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius: 12px;
  color:var(--text);
  padding:12px;
}
.form input:focus, .form textarea:focus{ outline:2px solid rgba(121,194,90,.25); }
.small{ font-size:12px; }

.contact-box, .contact-side__box{
  background: rgba(18,26,22,.45);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
}
.muted{ 
	color:var(--muted); 
}
.F{
  height: 340px; display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius);
  border:1px dashed rgba(255,255,255,.18);
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

.footer{
  border-top:1px solid var(--line);
  padding: 22px 0;
}
.footer__inner{ 
	display:flex; 
	justify-content:space-between; 
	gap:14px; 
	align-items:center; 
	flex-wrap:wrap; 
	}
.brand--footer{
	font-size:16px;
	}
.footer__links{ 
	display:flex; 
	gap:14px; 
	flex-wrap:wrap; 
	}
.footer__links a{
	color:#000000; 
	text-decoration:none;
	font-weight:700; 
	}
.footer__links a:hover{ 
	color:#000000; 
	}

.chip{
  display:inline-flex; padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  color: var(--muted);
  text-decoration:none;
  font-weight:800;
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .hero__img{ height: 320px; }
  .nav{ display:none; }
  .nav-toggle{ display:block; }
}