@import url("color-global.css");

/* =====================================================
   SECCIÓN: BASE
===================================================== */

*{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	padding:0;
	max-width:100%;
	overflow-x:hidden;
}

body{
	margin:0;
	padding:0;
}

/* =====================================================
   SECCIÓN: HERO
===================================================== */

/* Contenedor del Hero */
.hero{
	width:100%;
	max-width:100%;
	overflow:hidden;
	background:url("../img/public/hero.webp") center/cover no-repeat;
}

/* Capa */
.overlay{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	max-width:100%;
	min-height:650px;
	overflow:hidden;
	background:rgba(15,23,42,.55);
}

/* Contenido */
.hero-content{
	width:80%;
	max-width:100%;
	margin:30px auto;
	text-align:center;
}

/* Etiqueta */
.hero-content .tag{
	color:var(--secondary);
	font-size:25px;
	font-weight:700;
	letter-spacing:3px;
}

/* Título */
.hero-content h1{
	margin:15px 0;
	color:#fff;
	font-size:80px;
	line-height:1.1;
	font-family:"Montserrat",sans-serif;
}

/* Descripción */
.hero-content > p{
	margin:0 0 35px;
	color:#fff;
	font-size:25px;
	font-family:"Montserrat",sans-serif;
}

/* Fila de búsqueda */
.hero-search-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:40px;
}

/* Logo */
.hero-logo img{
	display:block;
	width:500px;
	height:auto;
}

/* Buscador */
.search{
	display:flex;
	align-items:center;
	gap:10px;
}

/* Selectores */
.search select{
	height:45px;
	padding:0 12px;
	border:1px solid #D4AF37;
	border-radius:7px;
	background:#fff;
	color:#0F172A;
}

/* Botón */
.search button{
	height:45px;
	padding:0 20px;
	border:1px solid #D4AF37;
	border-radius:7px;
	background:#D4AF37;
	color:#fff;
	font-weight:600;
	cursor:pointer;
	transition:.3s;
}

/* Botón al pasar el cursor */
.search button:hover{
	background:#1E3A8A;
	border-color:#1E3A8A;
}


/* =====================================================
   SECCIÓN: PROPIEDADES DESTACADAS
===================================================== */

/* Contenedor principal de propiedades destacadas */
.properties-container{
	width:100%;
	margin:0 auto;
	background:var(--primary);
}

/* Contenedor de propiedades destacadas */
.featured-properties-container{
	width:70%;
	margin:0 auto;
	padding:50px 0 100px;
	background:var(--primary);
}

/*---- SECCIÓN: TÍTULO PROPIEDADES DESTACADAS----- */

.properties-title{
	text-align:center;
	max-width:700px;
	margin:0 auto 60px;
}

.properties-title span{
	color:var(--secondary);
	font-weight:700;
	letter-spacing:3px;
	font-size:40px;
}

/* Contenedor de propiedades */
.property-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:25px;
	width:100%;
	margin:0 auto;
	background:var(--primary);
}

/* Clases generadas por propiedades-destacadas.js */

/* Tarjeta */
.propiedad-destacada-card{
	position:relative;
	display:flex;
	flex-direction:column;
	height:500px;
	overflow:hidden;
	background:rgba(30,58,138,0.12);
	border-radius:20px;
	transition:transform .3s ease,box-shadow .3s ease;
}

/* Tarjeta al pasar el cursor */
.propiedad-destacada-card:hover{
	transform:translateY(-8px);
	box-shadow:0 25px 60px rgba(0,0,0,.20);
}

/* Imagen */
.propiedad-destacada-imagen{
	position:relative;
	width:100%;
	height:70%;
	overflow:hidden;
}

/* Imagen */
.propiedad-destacada-imagen img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* Etiqueta de operación */
.propiedad-destacada-operacion{
	position:absolute;
	top:15px;
	left:15px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:26px;
	padding:0 11px;
	border-radius:20px;
	color:#fff;
	font-size:10px;
	font-weight:700;
	letter-spacing:.5px;
	z-index:5;
}

/* Operación venta */
.propiedad-destacada-operacion.operacion-venta{
	background:#4CAF50;
}

/* Operación renta */
.propiedad-destacada-operacion.operacion-renta{
	background:#1E3A8A;
}

/* Etiqueta de estado */
.propiedad-destacada-estado{
	position:absolute;
	top:15px;
	right:15px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:26px;
	padding:0 11px;
	border-radius:20px;
	color:#fff;
	font-size:10px;
	font-weight:700;
	letter-spacing:.5px;
	z-index:5;
}

/* Ciudad */
.propiedad-destacada-ciudad{
	position:absolute;
	right:15px;
	bottom:15px;
	color:#fff;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	text-shadow:0 2px 6px rgba(0,0,0,.85);
	z-index:5;
}

/* Estado venta disponible */
.propiedad-destacada-estado.venta-disponible{
	background:#4CAF50;
}

/* Estado venta apartada */
.propiedad-destacada-estado.venta-apartada{
	background:#D4AF37;
}

/* Estado venta vendida */
.propiedad-destacada-estado.venta-vendida{
	background:#DC2626;
}

/* Estado venta rentada */
.propiedad-destacada-estado.venta-rentada{
	background:#DC2626;
}

/* Estado venta no disponible */
.propiedad-destacada-estado.venta-no-disponible{
	background:#DC2626;
}

/* Estado renta disponible */
.propiedad-destacada-estado.renta-disponible{
	background:#1E3A8A;
}

/* Estado renta apartada */
.propiedad-destacada-estado.renta-apartada{
	background:#D4AF37;
}

/* Estado renta vendida */
.propiedad-destacada-estado.renta-vendida{
	background:#DC2626;
}

/* Estado renta rentada */
.propiedad-destacada-estado.renta-rentada{
	background:#DC2626;
}

/* Estado renta no disponible */
.propiedad-destacada-estado.renta-no-disponible{
	background:#DC2626;
}

/* Información */
.propiedad-destacada-info{
	padding:10px 22px 12px;
	height:30%;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

/* Título de propiedad */
.propiedad-destacada-info h3{
	margin:0;
	color:white;
	font-size:20px;
	font-family:"Montserrat",sans-serif;
	line-height:1.2;
	text-align:center;
	font-weight:700;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}

/* Metadatos */
.propiedad-destacada-meta{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:1px;
	margin:4px 0;
	min-height:20px;
}

/* Elementos de metadatos */
.propiedad-destacada-meta span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	padding:1px 9px;
	border:0;
	background:transparent;
	color:#1E3A8A;
	font-size:11px;
	font-weight:400;
	text-align:center;
	text-transform:uppercase;
	box-sizing:border-box;
}

/* Ciudad */
.propiedad-destacada-meta span:first-child{
	color:var(--secondary);
	font-size:13px;
	font-weight:700;
	font-family:"Montserrat",sans-serif;
}

/* Código */
.propiedad-destacada-meta span:nth-child(2){
	color:white;
	font-weight:500;
	font-family:"Montserrat",sans-serif;
}

/* Categoría */
.propiedad-destacada-meta span:nth-child(3){
	color:#fff;
	font-weight:500;
}

/* Precio */
.propiedad-destacada-precio{
	display:block;
	margin:0 0 4px;
	color:var(--secondary);
	font-family:"Montserrat",sans-serif;
	font-size:18px;
	font-weight:700;
	text-align:center;
}

/* Botón */
.propiedad-destacada-boton{
	display:flex;
	align-items:center;
	justify-content:center;
	width:60%;
	margin:0 auto;
	box-sizing:border-box;
	padding:10px 18px;
	border-radius:30px;
	background:var(--tertiary);
	color:#fff;
	font-size:12px;
	font-weight:600;
	font-family:"Montserrat",sans-serif;
	text-decoration:none;
	letter-spacing:.5px;
	transition:.3s;
}

/* Botón al pasar el cursor */
.propiedad-destacada-boton:hover{
	background:#1E3A8A;
	border-color:#1E3A8A;
	transform:translateY(-3px);
	box-shadow:0 8px 18px rgba(30,58,138,.25);
}


/* =====================================================
   SECCIÓN: SERVICIOS
===================================================== */

/* Contenedor de servicios */
.services-container{
	width:100%;
	background:var(--light);
}

/* Contenedor de servicios */
.services-subcontainer{
	width:70%;
	margin:0 auto;
	padding:100px 0;
	background:var(--light);
}

/* ---- SECCIÓN: TÍTULO SERVICIOS ---- */

.services-title{
	text-align:center;
	max-width:700px;
	margin:0 auto 60px;
}

.services-title span{
	color:var(--tertiary);
	font-weight:700;
	letter-spacing:3px;
	font-size:40px;
}

.services-title h2{
	/* Mantener aquí las propiedades que ya tenía .section-title h2 */
}

.services-title p{
	/* Mantener aquí las propiedades que ya tenía .section-title p */
}

/* Contenedor de servicios */
.services-grid{
	width:100%;
	margin:auto;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}

/* Tarjeta de servicio */
.service-card{
	background:white;
	padding:40px 30px;
	text-align:center;
	border-radius:20px;
	box-shadow:0 15px 40px rgba(0,0,0,.08);
	transition:.4s;
}

/* Tarjeta al pasar el cursor */
.service-card:hover{
	transform:translateY(-10px);
}

/* Icono */
.icon{
	font-size:50px;
	margin-bottom:20px;
}

/* Título de tarjeta */
.service-card h3{
	font-size:28px;
	color:#0F172A;
	margin-bottom:15px;
}

/* Descripción de tarjeta */
.service-card p{
	color:#64748b;
	font-size:16px;
	margin-bottom:25px;
}

/* Enlace */
.service-card a{
	display:inline-block;
	padding:12px 25px;
	background:#D4AF37;
	color:white;
	border-radius:30px;
	font-weight:600;
}


/* =====================================================
   SECCIÓN: NOSOTROS
===================================================== */

/* Contenedor de nosotros */
.about-container1{
	width:100%;
	margin:0 auto;
	background:var(--primary) !important;
}

.about-container{
	width:70%;
	margin:0 auto;
	padding:120px 0;
	background:var(--primary) !important;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}

/* Imagen */
.about-image img{
	width:100%;
	height:550px;
	object-fit:cover;
	border-radius:30px;
	box-shadow:0 25px 60px rgba(0,0,0,.18);
}

/* Texto superior */
.about-content span{
	color:var(--light);
	font-weight:700;
	letter-spacing:3px;
	font-size:45px;
}

/* Título */
.about-content h2{
	font-size:45px;
	line-height:1.2;
	color:#0F172A;
	margin:20px 0;
}

/* Párrafos */
.about-content p{
	color:#64748b;
	font-size:17px;
	margin-bottom:20px;
}

/* Estadísticas */
.about-stats{
	display:flex;
	gap:40px;
	margin:35px 0;
}

/* Contenedor de estadística */
.about-stats div{
	display:flex;
	flex-direction:column;
}

/* Número */
.about-stats strong{
	font-size:40px;
	color:#D4AF37;
}

/* Etiqueta */
.about-stats label{
	color:#475569;
}

/* Botón */
.about-btn{
	display:inline-block;
	background:var(--tertiary);
	color:white;
	padding:15px 35px;
	border-radius:40px;
	transition:.3s;
}

/* Botón al pasar el cursor */
.about-btn:hover{
	background:#D4AF37;
}


/* =====================================================
   SECCIÓN: TESTIMONIOS
===================================================== */

/* Contenedor de testimonios principal */
.testimonials-container{
	width:100%;
	background:var(--light);
}

/* Contenedor de testimonios */
.subtestimonials-container{
	width:70%;
	margin:0 auto;
	padding:120px 0;
	background:var(--light);
}

/* Contenedor de tarjetas */
.testimonial-container{
	width:100%;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
}

/* Tarjeta */
.testimonial-card{
	background:white;
	padding:40px 30px;
	border-radius:25px;
	text-align:center;
	box-shadow:0 20px 50px rgba(0,0,0,.08);
	transition:.4s;
}

/* Tarjeta al pasar el cursor */
.testimonial-card:hover{
	transform:translateY(-10px);
}

/* Imagen */
.testimonial-card img{
	width:100px;
	height:100px;
	object-fit:cover;
	border-radius:50%;
	margin:0 auto 25px;
	border:4px solid #D4AF37;
}

/* Texto */
.testimonial-card p{
	font-size:16px;
	color:#64748b;
	line-height:1.8;
	margin-bottom:25px;
}

/* Nombre */
.testimonial-card h3{
	color:#0F172A;
	font-size:20px;
}

/* Estrellas */
.stars{
	color:#D4AF37;
	font-size:22px;
	margin-top:15px;
}

.testimonials-title{
	text-align:center;
	max-width:700px;
	margin:0 auto 60px;
}

.testimonials-title span{
	color:var(--tertiary);
	font-weight:700;
	letter-spacing:3px;
	font-size:40px;
}

.testimonials-title h2{
	/* Si existe contenido para h2 en testimoniales, colocarlo aquí */
}

.testimonials-title p{
	/* Si existe contenido específico para p, colocarlo aquí */
}


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

/* Contenedor del footer */
.footer{
	width:100%;
	background:var(--primary) !important;
	padding:70px 0 20px;
	color:white;
}

/* Contenedor interno */
.footer-container{
	width:80%;
	margin:auto;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
}

/* Marca */
.footer-brand{
	text-align:center;
}

/* Logo */
.footer-brand img{
	display:block;
	width:80px;
	height:80px;
	margin:0 auto 20px;
	border-radius:50%;
	object-fit:cover;
}

/* Descripción de marca */
.footer-brand p{
	margin:0;
	color:#cbd5e1;
	font-size:15px;
	line-height:1.6;
}

/* Texto */
.footer p{
	color:#cbd5e1;
	font-size:15px;
}

/* Títulos */
.footer h3{
	margin-bottom:20px;
	color:#D4AF37;
}

/* Enlaces */
.footer-links{
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* Enlace */
.footer-links a{
	color:white;
	text-decoration:none;
}

/* Enlace al pasar el cursor */
.footer-links a:hover{
	color:#D4AF37;
}

/* Contacto */
.footer-contact p{
	margin-bottom:12px;
}

/* Parte inferior */
.footer-bottom{
	margin-top:50px;
	padding-top:20px;
	border-top:1px solid rgba(255,255,255,.15);
	text-align:center;
	color:#94a3b8;
}


/* =====================================================
   SECCIÓN: WHATSAPP
===================================================== */

/* Botón de WhatsApp */
.whatsapp{
	position:fixed;
	right:25px;
	bottom:25px;
	width:55px;
	height:55px;
	border:0;
	border-radius:50%;
	background:#25D366;
	color:#fff;
	font-size:25px;
	cursor:pointer;
	z-index:1000;
}



/* =====================================================
   SECCIÓN: OCULTAR ETIQUETAS DE PROPIEDADES DESTACADAS
===================================================== */

.propiedad-destacada-operacion,
.propiedad-destacada-estado{
	display:none !important;
}