/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


@import url("../houzez/style.css");

/* Your CSS code goes here
-------------------------------------- */

/* Placeholder SOLO cuando Houzez deja background-image vacío */
.taxonomy-item[style*="background-image: url()"] {
  background-image: url("/wp-content/themes/houzez-child/assets/images/property-placeholder.jpg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay suave para legibilidad SOLO en placeholder */
.taxonomy-item[style*="background-image: url()"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

/* Asegurar texto por encima */
.taxonomy-item[style*="background-image: url()"] .taxonomy-text-wrap {
  position: relative;
  z-index: 1;
}
 /* Botón: hover debe ser negro con letras en blanco */
.btn-primary:hover,
.fc-button-primary:hover {
	background-color: black !important;
	border-color: black !important;
}

/* Faldón gris en header debe ser negro con letras blancas */
/* Header v2 – Faldón inferior negro con texto blanco */
/*.header-desktop.header-v2 #header-section.header-bottom {
  background-color: #000 !important;
}*/

/* Header v2 – Enlaces del menú en blanco */
/*.header-desktop.header-v2 #header-section.header-bottom .main-nav .nav-link {
  color: #fff !important;
}

.header-desktop.header-v2 #header-section.header-bottom .main-nav .nav-link:hover,
.header-desktop.header-v2 #header-section.header-bottom .main-nav .current-menu-item > .nav-link {
  color: #ddd !important;
}

.header-desktop.header-v2 #header-section.header-bottom i {
  color: #fff !important;
}*/

/* Tamaño de enlaces del menú principal */
.header-desktop .main-nav .nav-link {
  font-size: 1.03rem;
  font-weight: 500;  /* opcional, mejora legibilidad */
}

/*Header-desktop - alinear menú de navegación a la derecha*/
@media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
       justify-content: flex-end !important;
		width: 100% !important;
    }
	
		/* ancho del header más amplio */
	.header-desktop header-v2 .header-top .container {
		max-width: 1500px !important;
}
	
}

/* Header mobile – Faldón inferior blanco para poder ver bien el logo */
#header-mobile {
  background-color: #fff !important;
}

#header-mobile .header-mobile-left .btn.toggle-button-left i {
	color: black !important;
	font-weight: 700 !important;
}


/*Quitar botón de detalles en la grid de propiedades*/

.item-wrap.item-wrap-v1 .item-body .btn-item {
    display: none !important;
}

/* Alinear etiqueta "Destacados" (Houzez Property Cards V1)
   Houzez aplica top/left !important a .label-featured como si fuese un badge flotante.
   Aquí lo devolvemos al flujo normal para que alinee con el resto de etiquetas. */
.item-wrap-v1 .property-labels-wrap{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.item-wrap-v1 .property-labels-wrap > .label,
.item-wrap-v1 .property-labels-wrap > a{
  display: inline-flex;
  align-items: center;
}

/* Override mínimo y efectivo */
.property-labels-wrap .label-featured.label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 6px 0 0 !important;
  line-height: 1 !important;
}

/* Grid de taxonomías */
#home-taxonomy-grid .taxonomy-text-wrap {
    padding: 1rem;
}


@media screen and (max-width: 800px) {
    #home-taxonomy-grid .taxonomy-text-wrap {
    padding: .5rem;
}
	
}

/* =========================================================
   FOOTER – IMÁGENES: RECORTE GLOBAL (TODAS LAS VISTAS)
   ========================================================= */

/* Normalizar widgets de imagen (elimina diferencias raras) */
.footer-top-wrap .row > div:nth-child(2) .footer-widget,
.footer-top-wrap .row > div:nth-child(3) .footer-widget {
  padding: 0 !important;
  margin: 0 !important;
}

/* Marco fijo para ambas imágenes */
.footer-top-wrap .row > div:nth-child(2) figure,
.footer-top-wrap .row > div:nth-child(3) figure {
  width: 100%;
  height: 220px;          /* base común en todas las vistas */
  margin: 0 !important;
  display: block;
  overflow: hidden;       /* clave para el recorte */
}

/* La imagen rellena el marco */
.footer-top-wrap .row > div:nth-child(2) img,
.footer-top-wrap .row > div:nth-child(3) img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}



/* =========================================================
   MOBILE (≤ 500px): imágenes en columna con separación
   ========================================================= */
@media screen and (max-width: 500px) {

  .footer-top-wrap .row > div:nth-child(2) figure,
  .footer-top-wrap .row > div:nth-child(3) figure {
    max-width: 280px;
    margin: 0 auto !important;
  }

  /* Separación vertical SOLO entre las dos imágenes */
  .footer-top-wrap .row > div:nth-child(2) {
    margin-bottom: 20px;
  }
}


/* =========================================================
   TABLET: imágenes en paralelo debajo del texto
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  .footer-top-wrap .row {
    display: flex;
    flex-wrap: wrap;
  }

  /* Texto arriba */
  .footer-top-wrap .row > div:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* Dos imágenes en paralelo */
  .footer-top-wrap .row > div:nth-child(2),
  .footer-top-wrap .row > div:nth-child(3) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}


/* =========================================================
   DESKTOP: 3 columnas iguales
   ========================================================= */
@media screen and (min-width: 1024px) {

  .footer-top-wrap .row {
    display: flex;
    flex-wrap: nowrap;
  }

  .footer-top-wrap .row > div:nth-child(1),
  .footer-top-wrap .row > div:nth-child(2),
  .footer-top-wrap .row > div:nth-child(3) {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}




@media screen and (min-width: 1200px) {
		/* ancho del header más amplio */
	.header-desktop.header-v2 .header-top .container,
	.header-desktop.header-v2 .header-bottom .container{
		max-width: 1500px !important;
		width: 100% !important;
	}
	
}

/* Grid sin  bordes redondeados y sombra muy suave*/
.item-wrap.item-wrap-v1.item-wrap-no-frame.h-100 {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09);

}

.item-wrap.item-wrap-v1.item-wrap-no-frame.h-100 .item-header {
    overflow: hidden;

}

/* Grid de taxonomías sin bordes redondeados */
.taxonomy-item-wrap.h-100 {
    overflow: hidden;
}

/* Sección Hero en Home page */
.hero__home__edom {
    position: relative;
}

/* Carrusel abajo del todo */
.hero__home__edom .hero__home__edom__caroussel {
  position: relative;
	height: 600px;
    overflow: hidden;
  z-index: 1;
}

.hero__home__edom .hero__home__edom__title {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 0;
    z-index: 3;
}

.hero__home__edom .hero__home__edom__description {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 0;
    z-index: 3;
}

.hero__home__edom .hero__home__edom__description p {
    padding: 0;
    text-align: center;
}

/* El widget no pinta nada por sí mismo */
.hero__home__edom__mask {
  position: static;
}


.hero__home__edom .hero__home__edom__caroussel::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /*background: rgba(0,0,0,0.5);*/
  z-index: 2;
  pointer-events: none;
  transition: background 0.3s ease;
}

.hero__home__edom__caroussel:hover::after {
  background: rgba(0,0,0,0.5);
}


@media (max-width: 1500px) {

		.hero__home__edom .hero__home__edom__caroussel {
		height: 500px;
	}

	
  .hero__home__edom .hero__home__edom__description {
    top: 57%;
    width: 80% !important;
}

}


@media (max-width: 1100px) {
	.hero__home__edom .hero__home__edom__caroussel {
		height: 400px;
	}

  /* 2) Título alineado al centro */
  .hero__home__edom .hero__home__edom__title {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80% !important;
  }

  .hero__home__edom .hero__home__edom__description {
    top: 50%;
}

  .hero__home__edom .hero__home__edom__description p {
   width: 100%;
}

}

@media (max-width: 768px) {
  /* 1) El carrusel gana altura */
  .hero__home__edom .elementor-image-carousel-wrapper,
  .hero__home__edom .swiper,
  .hero__home__edom .swiper-wrapper,
  .hero__home__edom .swiper-slide,
  .hero__home__edom .swiper-slide-inner {
    height: 400px; /* ajusta: 460-600 según te pida el título */
  }

  /* La imagen rellena esa altura */
  .hero__home__edom .swiper-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 2) Título alineado a la izquierda */
  .hero__home__edom .hero__home__edom__title {
    top: 20%;          /* o 32px si quieres aire */
    left: 5%; 
    right: 0;/* para que el texto haga wrap bien */
    transform: none;    /* MUY importante */
    text-align: left;
  }
  
  .hero__home__edom .hero__home__edom__title h2 {
    text-align: left;
    width: 90%;
	  font-size: 2.2rem;

  }

  .hero__home__edom .hero__home__edom__description {
      
    display: block !important;
    width: 100% !important;
    top: 55%;
    left: 5%;
    right: 5%;/* para que el texto haga wrap bien */
    transform: none; 
}

  .hero__home__edom .hero__home__edom__description p {
    text-align: left;
}
	  .hero__home__edom .hero__home__edom__caroussel::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 30%,
      rgba(0,0,0,0.2) 60%,
      rgba(0,0,0,0) 100%
    );
  }

}

@media (max-width: 520px) {
  /* Altura del hero */
  .hero__home__edom {
    height: 500px;
    position: relative;
  }

  /* Tu widget/carrusel ocupa todo el hero */
  .hero__home__edom .hero__home__edom__caroussel,
  .hero__home__edom .elementor-widget-container,
  .hero__home__edom .elementor-image-carousel-wrapper,
  .hero__home__edom .swiper,
  .hero__home__edom .swiper-wrapper,
  .hero__home__edom .swiper-slide {
    height: 100% !important;
  }

  /* El figure que envuelve el img también debe medir 100% */
  .hero__home__edom .swiper-slide-inner {
    height: 100% !important;
    margin: 0;           /* por si acaso */
  }

  /* El IMG rellena el alto del slide */
  .hero__home__edom img.swiper-slide-image {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  /* Título en móvil */
  .hero__home__edom .hero__home__edom__title h2 {
    top: 15%;
    left: 5%;
    right: 5%;
    transform: none;
    text-align: left;
	  font-size: 2.2rem !important;
    z-index: 3;
  }

  .hero__home__edom .hero__home__edom__description {
    display: none !important;
  }

  /* Overlay fijo en móvil */
  .hero__home__edom .hero__home__edom__caroussel::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 30%,
      rgba(0,0,0,0.2) 60%,
      rgba(0,0,0,0) 100%
    );
  }
}


/*header más discreto */

.header-contact-wrap .header-contact {
    font-size: 1rem;
}

.header-contact-wrap .header-contact,
.header-contact-wrap .header-contact a,
.header-contact-wrap .header-contact .header-contact-left,
.header-contact-wrap .header-contact .header-contact-right div,
.header-contact-wrap .header-contact .header-contact-right div a {
    color: rgba(0,0,0, 0.5);
}

.header-contact-wrap .header-contact .header-social-icons a i {
    font-size: 2rem;
	color: rgba(0,0,0, 0.5);
}

/*================= NUEVO FOOTER SIN FOTOS =========================*/
/* Footer – widget Contacta */
.footer-top-wrap {
  background-color: #ffffff !important;
  border-top: 4rem solid #F41928; /* rojo Domingo */
  padding: 1.5rem 1.5rem 1.75rem;
}

/* Footer bottom – fondo oscuro */
.footer-bottom-wrap-v2 {
  background-color: #2b2b2b !important; /* gris oscuro elegante */
  color: #ffffff;
  padding: 1.25rem 0;
}

/* Enlaces del footer bottom */
.footer-bottom-wrap-v2 a {
  color: #ffffff;
  text-decoration: none;
}

.footer-bottom-wrap-v2 a:hover {
  color: #F41928; /* rojo Domingo al hover */
}

/* Menú legal */
.footer-bottom-wrap-v2 .footer-nav .nav > li > a {
  color: #ffffff;
}

/* Copyright */
.footer-bottom-wrap-v2 .footer-copyright,
.footer-bottom-wrap-v2 .footer-copyright a {
  color: #ffffff;
}


/* Footer bottom – alinear contenido a la izquierda */
.footer-bottom-wrap-v2 {
     padding-top: 2rem;
  padding-bottom: 3.5rem; /* espacio extra para la CMP */
  text-align: left;
}


/* Menú legal a la izquierda */
.footer-bottom-wrap-v2 .footer-nav {
  text-align: left;
}

/* Asegurar que la lista no se centre */
.footer-bottom-wrap-v2 .footer-nav .nav {
  justify-content: flex-start;
}

.footer-bottom-wrap-v2 .footer-nav .nav li {
    padding-left: 0;
}

/* Copyright a la izquierda */
.footer-bottom-wrap-v2 .footer-copyright {
  text-align: left;
}

/*=====================================
NUEVO HEADER MÁS PEQUEÑO
=======================================*/

/* Centrar logo en header */

.header-desktop.header-v2 .header-top {
  position: relative;
  height: 75px;
}

/* Reserva hueco suficiente para el logo */
.header-desktop.header-v2 .header-top .navbar {
  padding-left: 58%;
  padding-right: 0;
}

/* Logo desktop más grande */
.header-desktop.header-v2 .header-top .logo.logo-desktop {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 400px;
}

.header-desktop.header-v2 .header-top .logo.logo-desktop img {
  width: 100%;
  height: auto;
  display: block;
}

/* Subir ligeramente la barra de navegación inferior */
.header-desktop.header-v2 .header-bottom {
  position: relative;
  top: -15px;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .header-desktop.header-v2 .header-top .logo.logo-desktop {
    top: 50%;
    left: 20px;
    width: 280px !important;
  }
  
  .header-desktop.header-v2 .header-top .navbar {
    padding-left: 38%;
    padding-right: 0;
  }

  .header-desktop.header-v2 .header-bottom {
    top: -4px;
  }
}
/* ======================================================
   Houzez · botón formulario propiedad
====================================================== */

.property-contact-agent-wrap .houzez_agent_property_form.btn {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;

  font-weight: 600;

  transition: all 0.25s ease;
}

/* Hover */

.property-contact-agent-wrap .houzez_agent_property_form.btn:hover,
.property-contact-agent-wrap .houzez_agent_property_form.btn:focus {
  background-color: #f41928 !important;
  border-color: #f41928 !important;
  color: #fff !important;
}

/* ==============================================================
Página de detalle de la propiedad

==============================================================*/

/* Tab detalles*/

#property-tab-content #property-detail-wrap.property-detail-wrap.property-section-wrap .detail-wrap {
background-color: #fff !important;
	border-color: #fff !important;
}

/*Quito div con agent-details*/
.agent-details {
	display: none !important;
}

/*Subo el formulario más arriba*/
#property-contact-agent-wrap > .block-wrap > .block-title-wrap:first-child {
  display: none !important;
}

#property-contact-agent-wrap > .block-wrap,
#property-contact-agent-wrap > .block-wrap > .block-content-wrap,
#property-contact-agent-wrap > .block-wrap > .block-content-wrap form {
padding-top: 0 !important;
	margin-top: 0 !important;
}

/*
===================================================================
Página de búsqueda en venta
==================================================================*/

.page-title-wrap.on__sale__page h1,
.page-title-wrap.for__rent__search h1{
	font-size: 2.5rem;
}

/* Bloques SEO bajo resultados de venta */
.on-sale-search-content {
	margin-top: 48px;
	padding-top: 8px;
}

.on-sale-search-content__block + .on-sale-search-content__block {
	margin-top: 32px;
	margin-bottom: 32px;
}

.on-sale-search-content__block h2 {
	margin-bottom: 12px;
}

.on-sale-search-content__block p {
	margin-bottom: 12px;
}

.on-sale-search-content__block:first-child {
  border: 1px solid rgba(244, 25, 40, 0.35);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  margin-bottom: 3rem;
}

.on-sale-search-content__block--steps {
	padding-top: 4rem;
	margin-top: 4rem;
	border-top: 1px solid rgba(244, 25, 40, 0.2);
}

.on-sale-search-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 3rem;
}

.on-sale-search-steps__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.on-sale-search-steps__num {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid #f41928;
	color: #f41928;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.on-sale-search-steps__content h3 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}

.on-sale-search-steps__content p {
	margin: 0;
}

/*========
Quitar botón ver más en la barra de buscador
=====*/
.advanced-search-v1 .flex-search .btn.advanced-search-btn {
  display: none !important;
}

/*==================
Quitar Sort by y Guardar búsqueda
=========================*/
.sort-by,
.save-search-form-wrap {
	display: none !important;
}


/*==================================
Dar más aire a la barra de búsqueda

===================================*/

#desktop-header-search {
	padding-top: 2rem;
	padding-bottom: 2rem;
}