/* Bloques de contenido: [dmasc_cta] y [dmasc_faq]. Ver inc/bloques.php */

/* Mismo margen lateral que el logo y las migas de pan */
.dmasc-alineado {
	padding-left: 80px;
	padding-right: 80px;
}
@media (max-width: 991px) {
	.dmasc-alineado { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
	.dmasc-alineado { padding-left: 20px; padding-right: 20px; }
}

/* Espacio vertical entre bloques de la home: las filas de WPBakery se tocan
   entre sí (0px de margen/padding propio) y cada una se separaba "a mano" con
   un valor distinto según quien la montara — el único de verdad establecido
   en código es el de [dmasc_faq] (80px / 90px). Esta clase lo generaliza:
   añadir "dmasc-separado" en Opciones de diseño → Clase adicional de
   cualquier fila para que quede igual de separada que el resto. */
.dmasc-separado {
	padding-top: 80px;
	padding-bottom: 80px;
}
@media (max-width: 767px) {
	.dmasc-separado { padding-top: 48px; padding-bottom: 48px; }
}
/* Para un título/texto que introduce directamente el bloque de debajo (como
   "Mucho más que..." sobre las tarjetas de Equipo/Lujo/Blog): mismo criterio
   que ya usa la web (p. ej. "Parte posterior de la vivienda" en la ficha de
   La Florida, vc_empty_space de 20px antes del título y nada después) — aire
   solo arriba, y poco: no es un corte de sección, solo un título que sigue
   la página. Abajo no lleva nada: .dmasc-accesos ya no pone su propio padding
   de arriba, para no sumar dos huecos. */
.dmasc-separado-arriba {
	padding-top: 60px;
}
@media (max-width: 767px) {
	.dmasc-separado-arriba { padding-top: 40px; }
}

/* Tarjetas de accesos (Equipo/Lujo/Blog): nada arriba ni abajo. El criterio
   es que el hueco "antes de algo nuevo" lo pone siempre el bloque que EMPIEZA
   (su padding-top), nunca el que termina — si no, se duplica. El aire de
   arriba ya lo pone la fila del título (.dmasc-separado-arriba) y el de abajo,
   antes de Preguntas frecuentes, lo pone esa misma sección con su propia
   clase .dmasc-separado-arriba (ya no tiene padding-top fijo en CSS). */
.dmasc-accesos {
	padding-top: 0;
	padding-bottom: 0;
}

.wpb_content_element:has(> .wpb_wrapper > .dmasc-cta),
.wpb_content_element:has(> .wpb_wrapper > .dmasc-faq) {
	margin-bottom: 0 !important;
}

/* ---------- CTA ---------- */

.dmasc-cta {
	--cta-fg: #23201b;
	--cta-bg: #fff;
	background: var(--cta-bg);
	color: var(--cta-fg);
}
.dmasc-cta--b {
	--cta-fg: #fff;
	--cta-bg: #23201b;
}
.dmasc-cta--c,
.dmasc-cta--d {
	--cta-fg: #fff;
	--cta-bg: #54565a; /* mismo gris que el footer */
}

/* Toda la franja es clicable: el enlace se estira sobre ella */
.dmasc-cta {
	position: relative;
	overflow: hidden;
	transition: background-color .4s ease;
}
.dmasc-cta__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.dmasc-cta--c:hover {
	background-color: #4b4d51;
}
.dmasc-cta:hover .dmasc-cta__arrow {
	width: 72px;
}
.dmasc-cta:hover .dmasc-cta__link-arrow {
	transform: translateX(5px);
}
.dmasc-cta__inner {
	position: relative;
	z-index: 1;
}

/* D: foto del proyecto bajo el gris. Fija: el zoom al pasar el ratón en una franja
   tan ancha y baja se percibía como un salto de la imagen. */
.dmasc-cta__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transform: none;
	transition: none;
}
.dmasc-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(84, 86, 90, .86); /* #54565A */
	transition: background-color .5s ease;
}
.dmasc-cta--d:hover .dmasc-cta__bg::after {
	background-color: rgba(84, 86, 90, .8);
}

/* Entrada al aparecer en pantalla (la clase .is-animated la pone JS: sin JS se ve tal cual) */
.dmasc-cta.is-animated .dmasc-cta__text,
.dmasc-cta.is-animated .dmasc-cta__inner > .dmasc-cta__link {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.dmasc-cta.is-animated .dmasc-cta__inner > .dmasc-cta__link {
	transition-delay: .15s;
}
.dmasc-cta.is-visible .dmasc-cta__text,
.dmasc-cta.is-visible .dmasc-cta__inner > .dmasc-cta__link {
	opacity: 1;
	transform: none;
}
/* La flecha se alarga una vez al entrar, como un gesto */
.dmasc-cta.is-visible .dmasc-cta__arrow {
	animation: dmasc-cta-nudge 1.4s .7s cubic-bezier(.2, .7, .2, 1) 1;
}
@keyframes dmasc-cta-nudge {
	0%, 100% { width: 48px; }
	45% { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
	.dmasc-cta.is-animated .dmasc-cta__text,
	.dmasc-cta.is-animated .dmasc-cta__inner > .dmasc-cta__link {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.dmasc-cta.is-visible .dmasc-cta__arrow { animation: none; }
}
.dmasc-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-top: 70px;
	padding-bottom: 70px;
}
.dmasc-cta--a .dmasc-cta__inner {
	border-top: 1px solid #e3e3e3;
}
.dmasc-cta__text {
	max-width: 680px;
}
/* Título con el formato de .titulo-complementario (CSS personalizado de Porto) */
.dmasc-cta .dmasc-cta__title {
	margin: 0;
	color: var(--cta-fg);
	font-family: Manrope, sans-serif;
	font-size: clamp(20px, 18px + .5vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.5px;
}
@media (max-width: 600px) {
	.dmasc-cta .dmasc-cta__title {
		font-size: 1.25rem;
		line-height: 1.1;
	}
}
.dmasc-cta .dmasc-cta__desc {
	margin: 14px 0 0;
	color: var(--cta-fg);
	font-family: Manrope, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	opacity: .85;
}
/* Enlace sin botón: texto subrayado fino, como el resto de enlaces de la web */
.dmasc-cta__link,
.dmasc-cta__link:hover,
.dmasc-cta__link:focus {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cta-fg);
	font-family: Manrope, sans-serif;
	text-decoration: none;
}
.dmasc-cta__link-arrow {
	transition: transform .35s ease;
}
.dmasc-cta__link:hover .dmasc-cta__link-arrow {
	transform: translateX(5px);
}

/* Subrayado: "Hablemos →" a la derecha */
.dmasc-cta--subrayado .dmasc-cta__link {
	font-size: 20px;
	font-weight: 500;
}
.dmasc-cta--subrayado .dmasc-cta__link-text,
.dmasc-cta--frase .dmasc-cta__link-text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 7px;
	transition: text-decoration-thickness .25s ease;
}
.dmasc-cta--subrayado .dmasc-cta__link:hover .dmasc-cta__link-text,
.dmasc-cta--frase .dmasc-cta__link:hover .dmasc-cta__link-text {
	text-decoration-thickness: 2px;
}

/* En la frase: el enlace forma parte del título, mismo tamaño */
.dmasc-cta--frase .dmasc-cta__link {
	display: inline;
	font: inherit;
	letter-spacing: inherit;
}

/* Flecha larga: "Hablemos" + flecha fina que se alarga */
.dmasc-cta--flecha .dmasc-cta__link {
	gap: 16px;
	font-size: 20px;
	font-weight: 500;
}
/* Flecha de línea: trazo que se alarga + punta */
.dmasc-cta__arrow {
	position: relative;
	display: block;
	width: 48px;
	height: 12px;
	transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.dmasc-cta__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 1px;
	height: 1.3px;
	margin-top: -.65px;
	background: currentColor;
}
.dmasc-cta__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1.3px solid currentColor;
	border-right: 1.3px solid currentColor;
	transform: rotate(45deg);
}
.dmasc-cta--flecha .dmasc-cta__link:hover .dmasc-cta__arrow {
	width: 72px;
}

/* ---------- Preguntas frecuentes ---------- */

.dmasc-faq__inner {
	padding-bottom: 40px;
}
.dmasc-faq .dmasc-faq__heading {
	margin: 0 0 28px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-size: clamp(20px, 18px + .5vw, 22px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -1.5px;
}
/* Dos columnas independientes, no una rejilla: con grid, aunque la celda que
   se abre no se "estire" (align-items:start), la pista de la fila sigue
   dimensionándose por el elemento más alto, dejando un hueco vacío bajo la
   pregunta de al lado. Con flex, cada .dmasc-faq__col crece sola. */
.dmasc-faq__list {
	display: flex;
	gap: 0 48px;
}
.dmasc-faq__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #e3e3e3;
}
.dmasc-faq__item {
	border-top: 1px solid #e3e3e3;
}
.dmasc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}
.dmasc-faq__question::-webkit-details-marker {
	display: none;
}
.dmasc-faq .dmasc-faq__question h3 {
	margin: 0;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.3px;
}
/* Signo + que pasa a − al abrir */
.dmasc-faq__icon {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}
.dmasc-faq__icon::before,
.dmasc-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 1px;
	background: #23201b;
	transition: transform .3s ease;
}
.dmasc-faq__icon::after {
	transform: rotate(90deg);
}
.dmasc-faq__item[open] .dmasc-faq__icon::after {
	transform: rotate(0deg);
}
.dmasc-faq__answer {
	max-width: 760px;
	padding-bottom: 24px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 1.6;
}
.dmasc-faq__answer p {
	margin: 0 0 10px;
}
.dmasc-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.dmasc-cta__inner { display: block; padding-top: 60px; padding-bottom: 60px; }
	.dmasc-cta__inner > .dmasc-cta__link { margin-top: 28px; }
	.dmasc-faq__inner { padding-bottom: 40px; }
	.dmasc-faq .dmasc-faq__question h3 { font-size: 16px; }
	.dmasc-faq__list { flex-direction: column; gap: 0; }
}

/* ---------- Footer ([dmasc_footer], pegado en el porto_builder "Footergeneral")
   ---------- */
.dmasc-footer {
	background: #ffffff;
	font-family: Manrope, sans-serif;
}
.dmasc-footer__cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 40px;
}
/* El tamaño/tipografía ya lo da la clase real ".titulo-complementario" (CSS
   personalizado de Porto: 20-22px, 600, Manrope, #23201b — el mismo "Estudios
   del terreno" de las páginas de servicio); aquí solo controlamos el margen,
   más ajustado que en esas páginas porque encabeza una columna de footer.
   El propio CSS personalizado de Porto pone margin a su h2 y se imprime
   después de esta hoja, así que hace falta !important para que gane. */
.dmasc-footer .titulo-complementario h2.dmasc-footer__title {
	margin: 0 0 20px !important;
}
.dmasc-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Mismo color de párrafo que el resto de la web (.texto-parrafo: #23201b),
   con subrayado al pasar el ratón en vez de cambio de color (ya no hay
   contraste de color que mostrar: enlace y párrafo son el mismo tono). */
.dmasc-footer__list a {
	color: #23201b;
	font-size: 14px;
	text-decoration: none;
}
.dmasc-footer__list a:hover {
	text-decoration: underline;
	text-decoration-color: #d9d2c4;
	text-underline-offset: 3px;
}
.dmasc-footer__contact-line {
	margin: 0 0 10px;
	color: #23201b;
	font-size: 14px;
	line-height: 1.5;
}
.dmasc-footer__contact-line:last-of-type {
	margin-bottom: 20px;
}
.dmasc-footer__contact-line a {
	color: inherit;
	text-decoration: none;
}
.dmasc-footer__contact-line a:hover {
	text-decoration: underline;
}
.dmasc-footer__social {
	display: flex;
	gap: 10px;
}
.dmasc-footer__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #e4dfd3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #23201b;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dmasc-footer__icon svg {
	width: 16px;
	height: 16px;
}
.dmasc-footer__icon:hover {
	background: #23201b;
	color: #fff;
	border-color: #23201b;
}
.dmasc-footer__legal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	/* padding-top/bottom, no "padding: 20px 0" — ese atajo pone el
	   izquierdo/derecho a 0 y anula el padding de .dmasc-alineado, que es
	   justo lo que desalineaba esta barra del resto del footer. */
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid #e4dfd3;
	font-size: 12px;
	color: #8a8171;
}
.dmasc-footer__legal-links {
	display: flex;
	align-items: center;
	gap: 20px;
}
.dmasc-footer__legal-links a {
	color: inherit;
	text-decoration: none;
}
.dmasc-footer__credit {
	opacity: .85;
}

.dmasc-footer__credit:hover {
	opacity: 1;
}

@media (max-width: 991px) {
	.dmasc-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 575px) {
	.dmasc-footer__cols { grid-template-columns: 1fr; }
	.dmasc-footer__legal { flex-direction: column; align-items: flex-start; }
	.dmasc-footer__legal-links { flex-wrap: wrap; row-gap: 8px; }
}