/*
Theme Name: QBHome Theme
Theme URI: https://qbhome.es
Description: Child theme de Divi para el sitio de QB-Home (inmobiliaria).
Author: QB-Home
Template: Divi
Version: 1.0.32
Text Domain: qbhome-theme
*/

/* Paleta de marca QB-Home, extraída del logo */
:root {
	--qb-terracota: #BD7944;
	--qb-terracota-oscuro: #9C6236;
	--qb-negro: #000000;
	--qb-gris: #707070;
}

body {
	color: var(--qb-gris);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.et_pb_module_header {
	color: var(--qb-negro);
}

a {
	color: var(--qb-terracota);
}
a:hover {
	color: var(--qb-terracota-oscuro);
}

/* Enlace "Álvaro Estrada" en el pie: verde de marca personal */
#footer-info a:hover {
	color: #92B41E;
}

/* Iconos sociales del footer: color de marca de cada red al pasar el ratón */
.et-social-icon.et-social-facebook a:hover {
	color: #1877F2;
	opacity: 1;
}
.et-social-icon.et-social-instagram a:hover {
	color: #E4405F;
	opacity: 1;
}

/* Botones - bloques nativos de WordPress */
.wp-block-button__link,
.wp-element-button {
	background-color: var(--qb-terracota) !important;
	border-color: var(--qb-terracota) !important;
	color: #fff !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--qb-terracota-oscuro) !important;
	border-color: var(--qb-terracota-oscuro) !important;
}

/* Botones y elementos del Divi Builder: el color por defecto (terracota) se
   define desde PHP como ajuste global de Divi (all_buttons_bg_color), no
   aquí con !important, para que cada botón se pueda personalizar desde el
   Builder sin que el CSS del child theme se lo pise. */
input[type="submit"] {
	background-color: var(--qb-terracota);
	border-color: var(--qb-terracota);
	color: #fff;
}
input[type="submit"]:hover {
	background-color: var(--qb-terracota-oscuro);
	border-color: var(--qb-terracota-oscuro);
}

.et-pb-icon,
.et_pb_font_icon,
.et_pb_contact_submit {
	color: var(--qb-terracota);
}

/* Sin barra lateral: contenido a ancho completo en todas las páginas */
#sidebar {
	display: none !important;
}
#left-area {
	width: 100% !important;
	float: none !important;
	padding-right: 0 !important;
}

/* Menú de navegación */
#top-menu li a:hover,
.et_pb_menu li a:hover,
#main-header .nav li a:hover {
	color: var(--qb-terracota) !important;
}

/* Elemento activo del menú: píldora en terracota que se desliza por detrás
   del texto (la mueve js/scrollspy.js). No se usa padding/border-radius
   directamente sobre el <a> porque Divi ya anima ahí padding-bottom /
   background-color / opacity, y chocaba con nuestra propia animación
   (se veía como un cuadrado cerrándose en vez de un deslizamiento). */
#top-menu {
	position: relative;
}
#top-menu li > a {
	position: relative;
	z-index: 1;
	/* Mismo tiempo que el desplazamiento de la píldora (.qb-menu-pill-ready
	   en el CSS de abajo), para que el texto se aclare/oscurezca al mismo
	   ritmo que se mueve el fondo y no quede terracota-sobre-terracota
	   (invisible) mientras la píldora todavía está pasando por encima. */
	transition: color 0.3s ease;
}
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
#top-menu li.qb-menu-active > a {
	color: #ffffff !important;
}
/* El hover general de más abajo incluye el selector "#main-header .nav li
   a:hover" como refuerzo, y por tener una clase extra (.nav) gana en
   especificidad a la regla de arriba y pintaba de terracota el texto activo
   al pasar el ratón. Lo igualamos aquí para el caso hover+activo. */
#top-menu li.current-menu-item > a:hover,
#top-menu li.current_page_item > a:hover,
#top-menu li.qb-menu-active > a:hover,
#main-header .nav li.current-menu-item > a:hover,
#main-header .nav li.current_page_item > a:hover,
#main-header .nav li.qb-menu-active > a:hover {
	color: #ffffff !important;
}
#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after,
#top-menu li.qb-menu-active > a::after {
	display: none !important;
}
.qb-menu-pill {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--qb-terracota);
	border-radius: 20px;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}
.qb-menu-pill.qb-menu-pill-ready {
	transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.2s ease;
}
.qb-menu-pill.qb-menu-pill-visible {
	opacity: 1;
}

/* Página de mantenimiento: pantalla independiente, sin cabecera/menú, título ni pie */
.page-id-52 #main-header,
.page-id-52 .entry-title.main_title,
.page-id-52 #footer-bottom,
.page-id-52 footer#main-footer {
	display: none !important;
}
.page-id-52 #main-content,
.page-id-52 #page-container,
.page-id-52 #left-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Rejilla de propiedades - shortcode [qbhome_propiedades] */
.qb-propiedades-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 20px 0;
}
.qb-propiedades-grid.qb-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.qb-propiedades-grid.qb-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
	.qb-propiedades-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 640px) {
	.qb-propiedades-grid {
		grid-template-columns: 1fr !important;
	}
}
.qb-propiedad-card {
	position: relative;
	cursor: pointer;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qb-propiedad-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.qb-propiedad-img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eee;
}
.qb-propiedad-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.qb-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	background: var(--qb-terracota);
}
.qb-badge-vendido,
.qb-badge-alquilado {
	background: var(--qb-gris);
}
/* Reservado: vale para venta y alquiler; color propio para distinguirlo de un vistazo */
.qb-badge-reservado {
	background: #7B4FA3;
}
.qb-propiedad-body {
	padding: 18px 20px 22px;
}
.qb-propiedad-meta {
	font-size: 12px;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--qb-gris);
	margin: 0 0 8px;
	padding: 0;
}
/* Tipo de vivienda y zona, cada uno en su línea (así la zona no parte el tipo en dos) */
.qb-propiedad-meta span {
	display: block;
}
.qb-propiedad-meta .qb-meta-zona {
	margin-top: 2px;
	font-weight: 600;
	color: var(--qb-terracota-oscuro);
}
.qb-propiedad-title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 19px;
	line-height: 1.25;
}
.qb-propiedad-title a {
	color: var(--qb-negro);
	text-decoration: none;
}
/* Toda la tarjeta es clicable: el enlace del título se estira sobre ella */
.qb-propiedad-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.qb-propiedad-card:focus-within {
	outline: 2px solid var(--qb-terracota);
	outline-offset: 2px;
}
.qb-propiedad-title a:hover {
	color: var(--qb-terracota);
}
.qb-propiedad-precio {
	font-size: 20px;
	font-weight: 700;
	color: var(--qb-terracota);
	margin: 0 0 12px;
}

/* Bajada de precio: precio anterior tachado + etiqueta con la flecha y el % */
.qb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.qb-bajada {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 12px;
	background: var(--qb-terracota-oscuro);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.qb-bajada .qb-flecha {
	flex: none;
}
/* En las tarjetas el precio y la línea de bajada van juntos; esa línea mide siempre lo mismo
   (también el hueco que reservan las tarjetas sin bajada) para no descuadrar las filas. */
.qb-propiedades-grid .qb-propiedad-precios {
	margin: 0 0 12px;
}
.qb-propiedades-grid .qb-propiedad-precios p {
	margin: 0;
	padding: 0 !important; /* Divi da 1em de margen inferior a todos los <p> salvo al último */
}
.qb-propiedades-grid .qb-propiedad-bajada {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 24px;
	margin-top: 2px;
	overflow: hidden;
	font-size: 14px;
	line-height: 1;
}
.qb-propiedad-bajada s {
	color: var(--qb-gris);
	white-space: nowrap;
}
/* A una columna no hay filas que alinear: el hueco de las tarjetas sin bajada sobra. */
@media (max-width: 640px) {
	.qb-propiedades-grid .qb-propiedad-bajada.qb-sin-bajada {
		display: none;
	}
}

/* Tarjetas: el pie (hab. / baños / m²) queda siempre abajo y alineado entre tarjetas de una fila,
   tengan o no bajada de precio o un título más largo. */
.qb-propiedades-grid .qb-propiedad-card {
	display: flex;
	flex-direction: column;
}
.qb-propiedades-grid .qb-propiedad-img {
	flex: none;
}
.qb-propiedades-grid .qb-propiedad-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/* Divi pinta viñetas y sangría en cualquier <ul> dentro de un módulo de código: aquí las anulamos. */
.qb-propiedades-grid .qb-propiedad-specs {
	list-style: none !important;
	display: flex;
	gap: 14px;
	padding: 12px 0 0 !important;
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.4;
	color: var(--qb-gris);
	border-top: 1px solid #eee;
}
.qb-propiedades-grid .qb-propiedad-specs {
	margin-top: auto !important;
}
.qb-propiedades-grid .qb-propiedad-specs li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.qb-propiedades-grid .qb-propiedad-specs li::before,
.qb-propiedades-grid .qb-propiedad-specs li::marker {
	content: none;
}
.qb-propiedades-empty {
	text-align: center;
	color: var(--qb-gris);
}

/* "Ver más": las tarjetas sobrantes se ocultan (solo si hay JavaScript, para que sin él se vean todas) */
.qb-propiedades-grid {
	scroll-margin-top: 150px;
}
.js .qb-propiedades-grid.qb-colapsable:not(.is-expanded) .qb-extra {
	display: none;
}
.qb-propiedades-grid.is-expanded .qb-extra {
	animation: qb-aparece 0.4s ease both;
}
@keyframes qb-aparece {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.qb-propiedades-grid.is-expanded .qb-extra {
		animation: none;
	}
}
html:not(.js) .qb-vermas-wrap {
	display: none;
}
.qb-vermas-wrap {
	margin: 28px 0 0;
	padding: 0;
	text-align: center;
}
.qb-vermas {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 30px;
	border: 2px solid var(--qb-terracota);
	border-radius: 30px;
	background: var(--qb-terracota);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.qb-vermas::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.25s ease, margin 0.25s ease;
}
.qb-vermas[aria-expanded="true"]::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}
.qb-vermas:hover,
.qb-vermas:focus-visible {
	background: var(--qb-terracota-oscuro);
	border-color: var(--qb-terracota-oscuro);
	color: #fff;
}

/* Documentos legales de Complianz (política de cookies...): el plugin los limita
   a 800px; dentro de Divi los queremos al ancho de la columna, como el Aviso Legal. */
.et_pb_text_inner #cmplz-document {
	max-width: none;
}

/* Algunos textos se pegaron dentro del Builder arrastrando marcado de
   Elementor (widgets "heading" en vez de párrafos sueltos). Como este sitio
   no tiene Elementor instalado, falta su CSS y esos bloques pierden el
   espaciado entre "párrafos" que sí se ve en el editor de Divi. Se lo
   devolvemos aquí sin tener que reescribir el contenido. */
.et_pb_text_inner .elementor-element {
	display: block;
	margin-bottom: 1em;
}
.et_pb_text_inner .elementor-element:last-child {
	margin-bottom: 0;
}

/* Un <iframe> (p.ej. el mapa de Google) es "inline" por defecto y deja un hueco
   de ~7px debajo, por la línea de texto que lo contiene. Ese hueco se lleva
   el redondeo de esquinas del módulo y el mapa queda con el borde inferior
   recto. En bloque desaparece. */
.et_pb_code_inner > iframe {
	display: block;
}

/* Enlaces de texto sobre fondo terracota: el hover global (terracota oscuro)
   casi no se distingue del fondo. Aquí se aclara a crema y se subraya.
   Vale para la sección #contact y para cualquier sección o fila a la que se
   le ponga la clase CSS "qb-links-claros" desde el Builder. */
#contact a:not(.et_pb_button):hover,
.qb-links-claros a:not(.et_pb_button):hover {
	color: #F6E3D3;
	text-decoration: underline;
}

/* Formulario de contacto (módulo nativo de Divi), sección #contact, sobre
   fondo terracota. Divi fija en rojo puro los mensajes de "faltan campos"
   y los bordes de campo inválido con !important, así que hay que igualar
   la especificidad exacta de sus selectores para poder cambiarlo.
   Escrito contra el id de la sección (#contact) y no contra la página,
   porque el sitio ahora es de una sola página (anclas #home/#sale/...). */
#contact .et-pb-contact-message,
#contact .et-pb-contact-message * {
	color: #ffffff;
}
#contact .et_pb_contact .et_pb_contact_field .et_contact_error {
	border: 1px solid #E8BEB6 !important;
}
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error .et_pb_contact_field_radio_title,
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error .et_pb_contact_field_radio label,
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label,
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label,
#contact .et_pb_contact .et_pb_contact_form p.et_contact_error .et_pb_contact_field_radio_title,
#contact .et_pb_contact .et_pb_contact_form p.et_contact_error .et_pb_contact_field_radio label,
#contact .et_pb_contact .et_pb_contact_form p.et_contact_error input[type="checkbox"] + label {
	color: #E8BEB6 !important;
}
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="checkbox"] + label i,
#contact .et_pb_contact .et_pb_contact_form .et_pb_contact_field.et_contact_error input[type="radio"] + label i {
	border: 1px solid #E8BEB6 !important;
}