/*
Theme Name: CHAVEDAPRAIA
Theme URI: https://chavedapraia.com.br/
Author: CHAVEDAPRAIA
Author URI: https://chavedapraia.com.br/
Description: Marketplace de Imóveis na praia e litoral brasileiro
Version: 1.0
License: Comercial
License URI: https://chavedapraia.com.br/
Tags: Imoveis, 
Text Domain: chavedapraia
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=TASA+Orbiter:wght@400..800&display=swap');

:root {  
	
	/* Geral
	------------------------------------------------------------------------------------------------------------------ */
	--white:#ffffff;
	--black:#111111;
	--gray:#ccc;
	--primary:#004481;
	--secondary:#0095D4;
	--tertiary:#FF8000;
	--light-gray:#efefef;
	--light-primary:#E8EDF4;
	--light-secondary:#E8f4ed;
	--light-tertiary:#FFF5EC;
	
}

	html{
		scroll-behavior: smooth;
		
	}
	
	
/* BARRA DE ROLAGEM */
	::-webkit-scrollbar {
		width: 9px;
		background: transparent; 
	
	}
	::-webkit-scrollbar-track {
		box-shadow: inset 0 0px 1px #D9E2FF; 
		
 	}
	::-webkit-scrollbar-thumb {
		background: #758195; 
	
	}
	::-webkit-scrollbar-thumb:hover {
		background: #596678; 
	
	}
	
	
	*{
		/* overflow-x:hidden; */
		transition: all 0.2s linear;
	}	
	
	
	body{
		background: #fff;
		overflow:hidden;
		
		
	}
	
	main{
		overflow-x:hidden;
		overflow-y:scroll;
		height:89.9vh;
	}
	
		
	*,body{
		font-family: "Inter", sans-serif;
		font-optical-sizing: auto;
	}



	.grid-container{
		
		max-width:1380px;
	}




	

	.bg-white{
		background:var(--white);
	}
	.bg-black{
		background:var(--black);
	}
	.bg-gray{
		background:var(--gray);
	}
	.bg-primary{
		background:var(--primary);
	}
	.bg-secondary{
		background:var(--secondary);
	}
	.bg-tertiary{
		background:var(--tertiary);
	}
	.bg-light_gray{
		background:var(--light-gray);
	}
	.bg-light_primary{
		background:var(--light-primary);
	}
	.bg-light_secondary{
		background:var(--light-secondary);
	}
	.bg-light_tertiary{
		background:var(--light-tertiary);
	}







	h1,h2,h3,h4,h5,h6{
		font-family: "TASA Orbiter", sans-serif;
		font-optical-sizing: auto;
	}
	
	
	.big_title{
		font-size: clamp(1.9rem,3.2vw,3.0rem)!important;
		/* font-size:4rem!important; */
		line-height:clamp(2.6rem,3.5vw,4.1rem);
		/* color:#2d424f; */
	}
	
	
	.medium_title{
		font-size: clamp(1.5rem,2.8vw,2.6rem)!important;
		/* font-size:4rem!important; */
		line-height:clamp(2.2rem,3.1vw,3.7rem);
		/* color:#2d424f; */
	}
	
	
	.small_title{
		font-size: clamp(1.0rem,1.8vw,1.2rem)!important;
		/* font-size:4rem!important; */
		line-height:clamp(1.2rem,2.1vw,2.7rem);
		/* color:#2d424f; */
	}


	
	
	.clt-black h1,
	.clt-black h2,
	.clt-black h3,
	.clt-black h4,
	.clt-black h5,
	.clt-black h6{
		color:var(--black)!important;
	}
	
	.clt-gray h1,
	.clt-gray h2,
	.clt-gray h3,
	.clt-gray h4,
	.clt-gray h5,
	.clt-gray h6{
		color:var(--gray)!important;
	}
	
	.clt-primary h1,
	.clt-primary h2,
	.clt-primary h3,
	.clt-primary h4,
	.clt-primary h5,
	.clt-primary h6{
		color:var(--primary)!important;
	}
	
	.clt-secondary h1,
	.clt-secondary h2,
	.clt-secondary h3,
	.clt-secondary h4,
	.clt-secondary h5,
	.clt-secondary h6{
		color:var(--secondary)!important;
	}
	
	.clt-tertiary h1,
	.clt-tertiary h2,
	.clt-tertiary h3,
	.clt-tertiary h4,
	.clt-tertiary h5,
	.clt-tertiary h6{
		color:var(--tertiary)!important;
	}
		
	.clt-light_primary h1,
	.clt-light_primary h2,
	.clt-light_primary h3,
	.clt-light_primary h4,
	.clt-light_primary h5,
	.clt-light_primary h6{
		color:var(--light-primary)!important;
	}

	.clt-light_secondary h1,
	.clt-light_secondary h2,
	.clt-light_secondary h3,
	.clt-light_secondary h4,
	.clt-light_secondary h5,
	.clt-light_secondary h6{
		color:var(--light-secondary)!important;
	}

	.clt-light_tertiary h1,
	.clt-light_tertiary h2,
	.clt-light_tertiary h3,
	.clt-light_tertiary h4,
	.clt-light_tertiary h5,
	.clt-light_tertiary h6{
		color:var(--light-tertiary)!important;
	}


.clt-white h1,
	.clt-white h2,
	.clt-white h3,
	.clt-white h4,
	.clt-white h5,
	.clt-white h6{
		color:var(--white)!important;
	}
	

	
	
	
	
	.clp-white p, .clp-white label, .clp-white a, .clp-white small{
		color:var(--white)!important;
	}
	
	.clp-black p, .clp-black label, .clp-black a, .clp-black small{
		color:var(--black)!important;
	}
	
	.clp-gray p, .clp-gray label, .clp-gray a, .clp-gray small {
		color:var(--gray)!important;
	}
	
	.clp-primary p, .clp-primary label, .clp-primary a, .clp-primary small {
		color:var(--primary)!important;
	}
	
	.clp-secondary p, .clp-secondary label, .clp-secondary a, .clp-secondary small {
		color:var(--secondary)!important;
	}
	
	.clp-tertiary p, .clp-tertiary label, .clp-tertiary a, .clp-tertiary small{
		color:var(--tertiary)!important;
	}

	.clp-light_gray p, .clp-light_gray label, .clp-light_gray a, .clp-light_gray small {
		color:var(--light-gray)!important;
	}
	
	.clp-light_primary p, .clp-light_primary label, .clp-light_primary a, .clp-light_primary small {
		color:var(--light-primary)!important;
	}
	
	.clp-light_secondary p, .clp-light_secondary label, .clp-light_secondary a, .clp-light_secondary small{
		color:var(--light-secondary)!important;
	}

	.clp-light_tertiary p, .clp-light_tertiary label, .clp-light_tertiary a, .clp-light_tertiary small{
		color:var(--light-tertiary)!important;
	}




	.button, .button.hollow{
		padding-top:13px;
		border-radius:6px;
	}

	.button:hover, .button.hollow:hover{
		opacity: 0.8;
	}

	.bt-white .button{
		color:var(--black)!important;
		background-color:var(--white)!important;
		border: solid 2px var(--white)!important;
	}
	.bt-white .button.hollow{
		color:var(--white)!important;
		background-color:transparent!important;
		border: solid 2px var(--white)!important;
	}
	
	
	.bt-black .button{
		color:var(--white)!important;
		background-color:var(--black)!important;
		border: solid 2px var(--black)!important;
	}
	.bt-black .button.hollow{
		color:var(--black)!important;
		background-color:transparent!important;
		border: solid 2px var(--black)!important;
	}
	
	.bt-gray .button{
		color:var(--white)!important;
		background-color:var(--gray)!important;
		border: solid 2px var(--gray)!important;
	}
	.bt-black .button.hollow{
		color:var(--black)!important;
		background-color:transparent!important;
		border: solid 2px var(--gray)!important;
	}
	
	
	
	
	
	
	.bt-primary .button{
		color:var(--white)!important;
		background-color:var(--primary)!important;
		border: solid 2px var(--primary)!important;
	}
	.bt-primary .button.hollow{
		color:var(--primary)!important;
		background-color:transparent!important;
		border: solid 2px var(--primary)!important;
	}
	
	.bt-secondary .button{
		color:var(--white)!important;
		background-color:var(--secondary)!important;
		border: solid 2px var(--secondary)!important;
	}
	.bt-secondary .button.hollow{
		color:var(--secondary)!important;
		background-color:transparent!important;
		border: solid 2px var(--secondary)!important;
	}
	
	
	.bt-tertiary .button{
		color:var(--white)!important;
		background-color:var(--tertiary)!important;
		border: solid 2px var(--tertiary)!important;
	}
	.bt-tertiary .button.hollow{
		color:var(--tertiary)!important;
		background-color:transparent!important;
		border: solid 2px var(--tertiary)!important;
	}
	
	
	.bt-gray .button{
		color:var(--black)!important;
		background-color:var(--gray)!important;
		border: solid 2px var(--gray)!important;
	}
	.bt-gray .button.hollow{
		color:#999!important;
		background-color:transparent!important;
		border: solid 2px var(--gray)!important;
	}
	
	
	
	.button.tiny{
		padding:10px 0;
		font-size:12px;
	}
	.button.small{
		
	}
	.button.medium{
		
	}
	.button.large{
		
	}
		


	
	

	
	/* MENU E BARRA SUPERIOR */
	.sticky-container {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: #fff; 
		
	}
	/* MOBILE */
	.sticky-container .title-bar{
		background: var(--bg-dark);
		width:100%;
	}
	
	.sticky-container .title-bar .mobile-logo{
		padding:0;
		margin:0 0 0 0px;
	}
	.sticky-container .title-bar .mobile-logo img{

		width:200px;
	}
	
	/* DESKTOP */
	.sticky-container .top-bar, .sticky-container .top-bar .menu {
		background: var(--bg-dark);
		
	}
	.sticky-container .top-bar .desk-logo{
		padding:0;
		margin:0 0 0 0px;
	}
	.sticky-container .top-bar .desk-logo img{
		/* margin-top:-10px; */
		width:200px;
	}
	
	.sticky-container .title-bar .icon-menu{
		position:absolute;
		right:0px;
		padding:0 10px;
		top: 50%;
		transform: translateY(-45%);
		color:var(--bg-light);
		font-size:22px;
		
	}
	.sticky-container .title-bar .open-menu{
		float:left;
		color:var(--bg-light);
		font-size:22px;
	}
	
	.sticky-container .title-bar .search-menu{
		float:left;
		color:var(--bg-light);
		font-size:22px;
	}

	
	
	/* DROPDOWN SUPERIOR */
	.sticky-container .top-bar .top-bar-left .item-menu{
		margin-left:5px;
		margin-top:10px;
	}
	.sticky-container .top-bar .top-bar-left .item-menu-first{
		margin-left:20px;
	}
	
	.sticky-container .top-bar .top-bar-left .item-menu a{
		color:var(--bg-light);
	}
	.sticky-container .top-bar .top-bar-left .item-menu a::after {
		border-top-color:var(--bg-light);
	}










select{
	border-radius:6px;
	/* background:#fff; */
	opacity:0.8;
}










.input-group-rounded .input-group-field {
  border-radius: 5000px 0 0 5000px;
  padding-left: 1rem;
}

.input-group-rounded .input-group-button .button {
  border-radius: 0 5000px 5000px 0;
  font-size: 0.8rem;
  background: var(--secondary);
}







a.label.lb-tip{
	float:left!important;
	margin:5px; 
	background-color: var(--primary);
	opacity:0.9;
	cursor: pointer;
	color:#fff!important;
	border-radius:5px;
}
.item-imovel{
	width:100%;
	border:solid 1px #ccc;
	margin:0px 0px 0px 0;
	margin-bottom:10px;
	border-radius:9px  ;
}

.item-imovel img{
	border-radius:9px 0 0 9px  ;
}

.imovel-card{
	border:solid 1px #ccc;
	border-radius:9px 9px 3px 3px;
}
.imovel-card img{
	border-radius:9px 9px 3px 3px ;
}

.imovel-card-body{
	padding:15px;
}

.link-special{
	font-size:14px;
}

h2.imovel-card-title{
	font-size:16px!important;
	/* min-height:40px;  */
	line-height:18px;
	color:#666!important;
	
}

h3.imovel-card-title{
	font-size: clamp(1.5rem,1.6vw,2.3rem)!important;
	/* min-height:99px; */
	line-height:30px;
	
	color:var(--primary)!important;
	display:block!important;
	clear:both!important;
}

h4.imovel-card-title{
	font-weight:600;
	line-height:20px;
}
h4.imovel-card-title small{
	color:#333!important;
	font-size:16px;
	font-weight:300;
}


.owl-dots{
	position:absolute;
	bottom:-50px;
	width:80%;
	left:50%;
	transform: translateX(-50%);
}
	
.owl-nav{
	position:absolute;
	top: 50%;
	width:100%;
	display: flex; 
	transform: translateY(-50%);
  justify-content: space-between;


}

.owl-nav button span{
	background:var(--primary)!important;
	padding:10px 15px!important;
	color:#fff;
	border-radius:3px;
}
.owl-nav button span:hover{
	opacity:0.9;
	background:var(--secondary)!important;
}




@media only screen {
  /* Estilos para telas pequenas (>= 0px) */
  

	.owl-nav{
		top: 100%;
		transform: translateY(-0%);
	}

	.owl-prev{
		position:absolute;
		left:-0px;
	}
	.owl-next{
		position:absolute;
		right:-0px;
	}
}


@media only screen and (min-width: 1024px) {
	/* Estilos para telas grandes (>= 1024px) */
	.owl-nav{
		top: 50%;
		width:100%;
		transform: translateY(-50%);
	}
  
	.owl-prev{
		position:absolute;
		left:-55px;
	}
	.owl-next{
		position:absolute;
		right:-55px;
	}

	
}










.callout.feat-group {
  margin: 0;
  border: 1px solid #efefef;
  border-radius: 6px;
  padding: 0.5em 1em;
}

/* Botão do título (zona) */
.feat-zone {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
 
  color: #1b3a57;
 /*  font-size: 1rem; */
  padding: 0.6em 0;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Seta animada */
.feat-zone .arrow {
  border: solid #1b3a57;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* Quando o painel estiver aberto */
.feat-options.is-open + .arrow,
.feat-zone[aria-expanded="true"] .arrow {
  transform: rotate(-135deg);
}

/* Conteúdo colapsável */
.feat-options {
  display: none;
  margin-top: 0.2em;
}

.feat-options.is-open {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Checkbox invisível */
.feat-pill input[type="checkbox"] {
  display: none;
}

.feat-pill {
  float: left;
  margin: 2px;
}

/* Pílulas */
.feat-pill span {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 6px;
  border: 1px solid #1b3a57;
  background: #fff;
  color: #1b3a57;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.feat-pill span:hover {
  background: #1b3a57;
  color: #fff;
}

.feat-pill input[type="checkbox"]:checked + span {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;

}









.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 15px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20%; /* Set a specific slider handle width */
  height: 35px; /* Slider handle height */
  background: var(--tertiary)!important; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: var(--tertiary)!important; /* Green background */
  cursor: pointer; /* Cursor on hover */
}







.mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f00; /* Cor de fundo personalizada */
    color: #fff; /* Cor do texto personalizada */
    padding: 10px; /* Espaçamento personalizado */
}











/* 🔹 Comportamento base */
.off-canvas.position-right {
  width: 100%;
  max-width: 100%;
	max-width:1540px;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out; /* tempo ajustado */
  background: #fff;
  box-shadow: -3px 0 15px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  border-radius: 10px 0 0 0px;
padding:0;
}

/* 🔹 Quando ativo */
.off-canvas.is-open {
  transform: translateX(0);
}

/* 🔹 Tablets */
@media screen and (min-width: 640px) {
  .off-canvas.position-right {
    width: 90%;
    max-width: 90%;
max-width:1540px;
  }
}

/* 🔹 Telas grandes */
@media screen and (min-width: 1024px) {
  .off-canvas.position-right {
    width: 80%;
    max-width: 80%;
max-width:1540px;
  }
}








.is-stuck{
padding-top:50px;
}


.iconside .fa{
font-size:20px;
color: var(--primary);
}
.iconside strong{
font-size:30px;
margin-right:8px;
color: var(--primary);
}

.iconside span{
font-size:12px;
display:block;
clear:both;
color: var(--primary);
}






.galeria {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;

}

.imagem-principal {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Mantém proporção da imagem */
  overflow: hidden;
  border-radius: 20px 0 0 20px;
}

.imagens-secundarias {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.imagem-sec {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.75;
  overflow: hidden;
 
}
.seca{
  border-radius: 0 20px 0 0;
}

.secb{
  border-radius: 0  0 20px 0;
}

/* Ajuste da imagem */
.imagem-principal img,
.imagem-sec img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Preenche o contêiner */
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.imagem-principal img:hover,
.imagem-sec img:hover {
  transform: scale(1.03);
}

/* Responsivo */
@media (max-width: 768px) {
  .galeria {
    grid-template-columns: 1fr;
  }
}












.atributos-imovel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bloco-zona {
  padding: 1rem;
  background: var(--light-primary, #f9f9f9);
  border-radius: 10px;
}

.titulo-zona {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--dark-primary, #333);
}

.lista-atributos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-atributos li {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;                /* ✅ ativa flexbox dentro do li */
  align-items: center;          /* ✅ centraliza verticalmente */
  justify-content: center;      /* ✅ centraliza horizontalmente */
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: all 0.2s ease;
  min-height: 48px;             /* ✅ altura mínima consistente */
  box-sizing: border-box;
}

/* .lista-atributos li:hover {
  background: var(--primary, #0066cc);
  color: #fff;
  border-color: var(--primary, #0066cc);
} */












.cta-banner {
  position: relative;
  background: url('images/placebanner.jpg') center/cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* overlay escuro */
  z-index: 0;
}

.cta-callout {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;

  padding: 3rem 2rem;
}

.cta-callout h6 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}















.cta-banner {
  position: relative;
  background: url('images/placebanner.jpg') center/cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 70, 0.45); /* overlay escuro */
  z-index: 0;
}



.cta-banner2 {
  position: relative;
  background: url('images/placebannerfin.jpg') center/cover no-repeat;
  border-radius: 10px;
  overflow: hidden;
}

.cta-banner2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 70, 0.45); /* overlay escuro */
  z-index: 0;
}





.cta-callout {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;

  padding: 3rem 2rem;
}

.cta-callout h6 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

























.grid-x.align-stretch > .cell {
  display: flex; /* permite que o filho preencha verticalmente */
}



.fill-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* opcional, mantém rodapé no fim */
}













.griditem{
	padding:0;
	border-radius:10px;
}

.grid_title{
		font-size: clamp(1.0rem,1.8vw,1.2rem)!important;
		/* font-size:4rem!important; */
		line-height:clamp(1.05rem,1.85vw,1.25rem);
		/* color:#2d424f; */
	}
	
	
	
	
	
	
	
	
.tagcloud:hover{
	opacity:0.9;
}




/* 
.menu-lista{
	list-style:none;
}
 */

ul.menu-lista {
    list-style-type: "> ";
	color:#fff;
}