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


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

*{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	padding:0;
}

body{
	background:var(--primary);
	color:var(--white);
	font-family:Arial,sans-serif;
}


/* =====================================================
   SECCIÓN: CATÁLOGO DE PROPIEDADES
===================================================== */

/* Contenedor principal */
.catalogo-propiedades{
	width:100%;
	min-height:700px;
	background:var(--primary);
}

/* Contenedor */
.catalogo-propiedades-contenedor{
	width:70%;
	margin:0 auto;
	padding:15px 0 100px;
}


/* =====================================================
   SECCIÓN: TÍTULO DEL CATÁLOGO
===================================================== */

/* Contenedor del título */
.catalogo-propiedades-titulo{
	max-width:800px;
	margin:0 auto 60px;
	text-align:center;
}

/* Texto superior */
.catalogo-propiedades-titulo span{
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
	letter-spacing:3px;
}

/* Título */
.catalogo-propiedades-titulo h1{
	margin:15px 0;
	color:var(--secondary);
	font-size:45px;
	font-family:"Montserrat",sans-serif;
	font-weight:600;
	line-height:1.2;
}

/* Descripción */
.catalogo-propiedades-titulo p{
	margin:0;
	color:var(--gray);
	font-size:25px;
}


/* =====================================================
   SECCIÓN: CARRUSEL DE CATEGORÍAS
===================================================== */

/* Contenedor */
.categorias-carrusel{
	display:flex;
	align-items:center;
	width:100%;
	margin-top:40px;
}

/* Ventana */
.categorias-carrusel-ventana{
	width:100%;
	overflow:hidden;
}

/* Lista */
.categorias-carrusel-lista{
	display:flex;
	gap:25px;
}


/* =====================================================
   SECCIÓN: TARJETAS DE CATEGORÍAS
===================================================== */

/* Tarjeta */
.categoria2-card{
	flex:0 0 calc((100% - 50px) / 3);
	position:relative;
	display:flex;
	flex-direction:column;
	height:420px;
	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 */
.categoria2-card:hover{
	transform:translateY(-8px);
	box-shadow:0 25px 60px rgba(0,0,0,.20);
}

/* Imagen */
.categoria2-imagen{
	width:100%;
	height:65%;
	overflow:hidden;
}

/* Imagen */
.categoria2-imagen img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}

/* Imagen al pasar el cursor */
.categoria2-card:hover .categoria2-imagen img{
	transform:scale(1.05);
}

/* Información */
.categoria2-info{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	height:35%;
	padding:15px 20px 18px;
	box-sizing:border-box;
}

/* Nombre */
.categoria2-info h2{
	margin:0;
	color:var(--white);
	font-family:"Montserrat",sans-serif;
	font-size:22px;
	font-weight:600;
	text-align:center;
}

/* Cantidad */
.categoria2-info span{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	color:var(--secondary);
	font-size:15px;
	font-weight:700;
	letter-spacing:1px;
	text-align:center;
	text-transform:uppercase;
}



/* Número de propiedades */
.categoria2-info span strong{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:28px;
	height:28px;
	padding:0 7px;
	border:2px solid var(--secondary);
	border-radius:50%;
	background:var(--primary);
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
}

/* Botón */
.categoria2-boton{
	display:flex;
	align-items:center;
	justify-content:center;
	width:60%;
	padding:10px 18px;
	border-radius:30px;
	background:var(--secondary);
	color:var(--white);
	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 */
.categoria2-boton:hover{
	background:var(--tertiary);
	transform:translateY(-3px);
	box-shadow:0 8px 18px rgba(30,58,138,.25);
}


/* =====================================================
   SECCIÓN: FLECHAS DEL CARRUSEL
===================================================== */

/* Flecha */
.categorias-carrusel-flecha{
	flex:0 0 44px;
	width:44px;
	height:44px;
	margin:0 15px;
	border:1px solid var(--secondary);
	border-radius:50%;
	background:transparent;
	color:var(--secondary);
	font-size:30px;
	line-height:1;
	cursor:pointer;
	transition:.3s;
}

/* Flecha al pasar el cursor */
.categorias-carrusel-flecha:hover{
	background:var(--tertiary);
	border-color:var(--tertiary);
	color:var(--white);
}


/* =====================================================
   SECCIÓN: PROPIEDADES POR CATEGORÍA
===================================================== */

/* Contenedor */
.propiedades-categoria{
	width:100%;
}

/* Contenedor interno */
.propiedades-categoria-contenedor{
	width:100%;
}


/* =====================================================
   SECCIÓN: TÍTULO DE PROPIEDADES
===================================================== */

/* Contenedor del título */
.propiedades-categoria-titulo{
	margin:0 auto 25px;
	text-align:center;
}

/* Texto superior */
.propiedades-categoria-titulo span{
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
	letter-spacing:3px;
}

/* Título */
.propiedades-categoria-titulo h2{
	margin:15px 0;
	color:var(--white);
	font-size:45px;
	font-family:"Montserrat",sans-serif;
	font-weight:600;
	line-height:1.2;
}

/* Contador de propiedades */
.propiedades-categoria-titulo p{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:0;
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
	letter-spacing:1.5px;
	text-transform:uppercase;
}

/* Líneas decorativas */
.propiedades-categoria-titulo p::before,
.propiedades-categoria-titulo p::after{
	content:"";
	display:block;
	width:35px;
	height:1px;
	background:var(--secondary);
}

/* Número de propiedades */
.propiedades-categoria-titulo p span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:34px;
	height:34px;
	padding:0 9px;
	border:2px solid var(--secondary);
	border-radius:50%;
	background:var(--primary);
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
}


/* =====================================================
   SECCIÓN: LISTADO DE PROPIEDADES
===================================================== */

/* Lista */
.propiedades-categoria-lista{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:25px;
	width:100%;
}

/* Tarjeta */
.propiedad2-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 */
.propiedad2-card:hover{
	transform:translateY(-8px);
	box-shadow:0 25px 60px rgba(0,0,0,.20);
}

/* Imagen */
.propiedad2-imagen{
	width:100%;
	height:70%;
	overflow:hidden;
}

/* Imagen */
.propiedad2-imagen img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}

/* Imagen al pasar el cursor */
.propiedad2-card:hover .propiedad2-imagen img{
	transform:scale(1.05);
}

/* Información */
.propiedad2-info{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	height:30%;
	padding:15px 20px 18px;
}

/* Título */
.propiedad2-info h2{
	margin:0;
	color:var(--white);
	font-family:"Montserrat",sans-serif;
	font-size:22px;
	font-weight:600;
	text-align:center;
}

/* Categoría y operación */
.propiedad2-info span{
	color:var(--white);
	font-size:13px;
	font-weight:500;
	text-align:center;
}

/* Ciudad */
.propiedad2-info p{
	margin:0;
	color:var(--secondary);
	font-size:20px;
	font-weight:700;
	text-align:center;
}

/* Precio */
.propiedad2-info .propiedad2-precio{
	margin:0;
	color:var(--white);
	font-size:15px;
	font-weight:600;
	text-align:center;
}

/* Botón */
.propiedad2-boton{
	display:flex;
	align-items:center;
	justify-content:center;
	width:60%;
	padding:10px 18px;
	border-radius:30px;
	background:var(--secondary);
	color:var(--white);
	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 */
.propiedad2-boton:hover{
	background:var(--tertiary);
	transform:translateY(-3px);
	box-shadow:0 8px 18px rgba(30,58,138,.25);
}


/* =====================================================
   SECCIÓN: REGRESAR A CATEGORÍAS
===================================================== */

/* Contenedor */
.propiedades-categoria-regresar{
	display:flex;
	justify-content:center;
	margin-top:50px;
}

/* Botón */
#volver-categorias{
	padding:12px 25px;
	border:1px solid var(--secondary);
	border-radius:30px;
	background:transparent;
	color:var(--secondary);
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	transition:.3s;
}

/* Botón al pasar el cursor */
#volver-categorias:hover{
	background:var(--secondary);
	color:var(--white);
}



/* =====================================================
   SECCIÓN: FILTRO DE PROPIEDADES
===================================================== */



.catalogo-filtro{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	width:80%;
	margin:0 auto 50px;
}

.catalogo-filtro select{
	width:240px;
	height:52px;
	padding:0 18px;
	border:1px solid #D4AF37;
	border-radius:6px;
	background:#FFFDF5;
	color:#0F172A;
	font-family:"Poppins",sans-serif;
	font-size:15px;
	cursor:pointer;
	outline:none;
}

.catalogo-filtro select:focus{
	border-color:#1E3A8A;
}

.catalogo-filtro button{
	width:180px;
	height:52px;
	border:0;
	border-radius:6px;
	background:#1E3A8A;
	color:#FFF;
	font-family:"Poppins",sans-serif;
	font-size:15px;
	font-weight:600;
	cursor:pointer;
	transition:background .2s ease;
}

.catalogo-filtro button:hover{
	background:#0F172A;
}