/* Portfolio: tarjeta de proyecto (listado, home y relacionados). Ver inc/portfolio.php */

/* ---------- Tarjeta ---------- */

.dmasc-card {
	--card-ease: cubic-bezier(.2, .7, .2, 1);
	margin: 0;
}

.dmasc-card__link,
.dmasc-card__link:hover,
.dmasc-card__link:focus {
	display: block;
	color: #fff;
	text-decoration: none;
}

.dmasc-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #ddd;
}
.dmasc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--card-ease);
}
.dmasc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%);
	opacity: .85;
	transition: opacity .5s ease;
}
.dmasc-card__link:hover .dmasc-card__img,
.dmasc-card__link:focus-visible .dmasc-card__img {
	transform: scale(1.04);
}
.dmasc-card__link:hover .dmasc-card__media::after,
.dmasc-card__link:focus-visible .dmasc-card__media::after {
	opacity: 1;
}
/* Sin foto (dmasc-service-card.php sin image_id): franja de color de marca
   en vez del gris de relleno — el degradado no pinta nada sobre un fondo liso. */
.dmasc-card--sin-foto .dmasc-card__media {
	background: #23201b;
}
.dmasc-card--sin-foto .dmasc-card__media::after {
	content: none;
}

.dmasc-card__overlay {
	position: absolute;
	z-index: 1;
	left: 28px;
	right: 28px;
	bottom: 24px;
}
/* Mismo aspecto sea <h2> (listado) o <p> (home, relacionados):
   el de .titulo-complementario (CSS personalizado de Porto) pero en blanco */
.dmasc-card .dmasc-card__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: Manrope, sans-serif;
	font-size: clamp(20px, 18px + .5vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.6px;
	text-transform: none;
}
@media (max-width: 600px) {
	.dmasc-card .dmasc-card__title {
		font-size: 1.25rem;
		line-height: 1.1;
	}
}

/* "Ver proyecto" no ocupa sitio hasta el hover: el título sube suavemente */
.dmasc-card__more {
	display: block;
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	color: #fff;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 24px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .4s var(--card-ease), max-height .4s var(--card-ease), margin-top .4s var(--card-ease);
}
.dmasc-card__link:hover .dmasc-card__more,
.dmasc-card__link:focus-visible .dmasc-card__more {
	max-height: 24px;
	margin-top: 8px;
	opacity: 1;
	transform: none;
}

/* Sin el margen inferior (35 px) que WPBakery da al bloque de texto donde se pega
   el shortcode: el mosaico de la home y el slider del footer quedan pegados a lo siguiente. */
.wpb_content_element:has(> .wpb_wrapper > .dmasc-projects),
.wpb_content_element:has(> .wpb_wrapper > .dmasc-related) {
	margin-bottom: 0 !important;
}

/* El footer general pega [dmasc_proyectos_slider] y la franja de prensa dentro
   de una fila normal de WPBakery (no a sangre), que por defecto los mete 35px
   hacia dentro (15px de .vc_row + 20px de .wpb_wrapper) antes de que
   .dmasc-related__head / .dmasc-press__label añadan sus propios 80px — así
   que sin esto quedarían a 115px, no a 80px. Se anula aquí en el origen en
   vez de restar "a ojo" en el padding de abajo. */
.vc_row:has(.dmasc-related),
.vc_row:has(.dmasc-press) {
	/* !important: le gana a ".container-fluid .top-row:not(.porto-inner-container)"
	   (theme.css), más específica, que es quien realmente mete estos 15px. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.wpb_wrapper:has(> .dmasc-related),
.wpb_wrapper:has(> .dmasc-press) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- Cabecera del listado del blog (home.php) ---------- */

/* El contenido de esta página se escribió directo por SQL (ver inc/blog.php),
   así que WPBakery nunca generó su CSS por bloque (el padding que sí tienen
   Proyectos/Equipo al guardarse desde el editor). Se repone aquí a mano, con
   los mismos valores que esas páginas. */
body.blog #content .titulo-principal-negro {
	padding-bottom: 10px;
}
body.blog #content .texto-parrafo {
	padding-left: 80px;
	padding-right: 80px;
}

/* ---------- Tarjeta de artículo (--blog): oscurecido extra ---------- */

/* El degradado normal de .dmasc-card__media::after no basta en fotos muy
   claras (interiores con mucha luz, p. ej.) — con 220 artículos de origenes
   distintos no es viable revisar foto por foto, así que aquí el velo cubre
   toda la imagen de forma pareja, no solo la franja inferior. */
.dmasc-card--blog .dmasc-card__media::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .82) 100%),
		rgba(0, 0, 0, .28);
}
.dmasc-card__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, .8);
	font-family: Manrope, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- Mosaico: [dmasc_proyectos] (home) y [dmasc_proyectos_listado] (listado) ---------- */

/* Mismo hueco que las fotos de la ficha de proyecto: 6 px entre tarjetas y 3 px al borde. */
.dmasc-projects {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 0 3px;
}

/* ---------- Servicios: [dmasc_servicios] (ver inc/servicios.php) ---------- */

.dmasc-services {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
/* Solo en el ordenador: estas reglas pesan más que las de tablet y móvil (más abajo)
   por el :has(), así que fuera de esta media query ponían las 5 (o 3) tarjetas en una
   sola fila también en el móvil. */
@media (min-width: 992px) {
	/* Con 5 servicios (p. ej. al añadir "Cambio de uso"), los 5 caben en una sola fila
	   en vez de dejar el 5º suelto en una segunda fila de 1 columna. */
	.dmasc-services:has(.dmasc-card--servicio:nth-child(5):last-child) {
		grid-template-columns: repeat(5, 1fr);
	}
	/* Con 3 servicios (p. ej. "Arquitectura de Lujo"), 3 columnas a todo el ancho en vez
	   de 3 de 4 columnas con un hueco — y una foto menos vertical para que la fila
	   quede a la misma altura que la de 5 servicios, no más alta por ser más ancha. */
	.dmasc-services:has(.dmasc-card--servicio:nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
	.dmasc-services:has(.dmasc-card--servicio:nth-child(3):last-child) .dmasc-card__media {
		aspect-ratio: 5 / 4;
	}
}
.wpb_content_element:has(> .wpb_wrapper > .dmasc-services) {
	margin-bottom: 0 !important;
}
.dmasc-services .dmasc-card__media {
	aspect-ratio: 3 / 4;
}
/* Degradado algo más alto que en proyectos: el texto ocupa más */
.dmasc-services .dmasc-card__media::after {
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, 0) 75%);
}
/* Línea fina sobre el título; se alarga al pasar el ratón */
.dmasc-card__line {
	display: block;
	width: 28px;
	height: 1px;
	margin-bottom: 14px;
	background: #fff;
	transition: width .5s var(--card-ease);
}
.dmasc-card__link:hover .dmasc-card__line,
.dmasc-card__link:focus-visible .dmasc-card__line {
	width: 56px;
}
/* Descripción siempre visible; "Ver servicio →" aparece al pasar el ratón */
.dmasc-card__desc {
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, .9);
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Proyectos relacionados ---------- */

.dmasc-related {
	margin-top: 60px;
}
/* 3 px al borde, como el mosaico (.dmasc-projects); el hueco entre tarjetas
   (6 px) es el 'margin' del carrusel en inc/portfolio.php. */
.dmasc-related .dmasc-fullbleed {
	padding: 0 3px;
}
.dmasc-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	/* Alineado al logo/migas, igual que el resto de la web — el carrusel de
	   debajo (.dmasc-fullbleed) se queda a sangre, eso ya estaba bien. */
	padding-left: 80px;
	padding-right: 80px;
	margin-bottom: 24px;
}
/* Mismo formato que .titulo-complementario (CSS personalizado de Porto) */
.dmasc-related .dmasc-related__heading {
	margin: 0;
	color: #23201b;
	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-related .dmasc-related__heading {
		font-size: 1.25rem;
		line-height: 1.1;
	}
}
@media (max-width: 991px) {
	.dmasc-related__head { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
	.dmasc-related__head { padding-left: 20px; padding-right: 20px; }
}
.dmasc-related__all,
.dmasc-related__all:hover {
	flex: none;
	color: #23201b;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Navegación minimalista: dos flechas de línea en la cabecera, sin fondo */
.dmasc-related__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 28px;
}
.dmasc-related__nav {
	display: flex;
	gap: 6px;
}
.dmasc-related__nav.disabled {
	display: none; /* caben todos los proyectos: no hay nada que pasar */
}
.dmasc-related__nav button.owl-prev,
.dmasc-related__nav button.owl-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #23201b;
	cursor: pointer;
	transition: opacity .3s ease, transform .3s ease;
}
.dmasc-related__nav button.owl-prev:hover { transform: translateX(-3px); }
.dmasc-related__nav button.owl-next:hover { transform: translateX(3px); }
.dmasc-related__nav button:focus-visible {
	outline: 1px solid #23201b;
	outline-offset: 2px;
}
.dmasc-related__nav button.disabled {
	opacity: .25;
	cursor: default;
	transform: none;
}

/* ---------- Hemos aparecido en (franja de prensa, debajo de relacionados) ---------- */

.dmasc-press {
	margin-top: 56px;
	margin-bottom: 48px;
}
/* Mismo formato que .dmasc-related__heading ("Cada proyecto, una forma de
   habitar"): a la izquierda, mismo tamaño y peso — no es una etiqueta aparte,
   es un título hermano. Doble clase (en vez de .dmasc-press__label a secas)
   para ganarle a ".footer p{font-size:1em}" de theme.css: esta sección vive
   dentro del footer general, igual que ".dmasc-related__heading". */
.dmasc-press .dmasc-press__label {
	margin: 0 0 24px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-size: clamp(20px, 18px + .5vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.5px;
	text-align: left;
	/* Alineado al logo/migas, igual que el título de arriba — el marquee de
	   logos (.dmasc-press__marquee) se queda a sangre, eso ya estaba bien. */
	padding-left: 80px;
	padding-right: 80px;
}
@media (max-width: 991px) {
	.dmasc-press .dmasc-press__label { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
	.dmasc-press .dmasc-press__label { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
	.dmasc-press .dmasc-press__label {
		font-size: 1.25rem;
		line-height: 1.1;
	}
}
/* A sangre, al ancho del escritorio (.dmasc-fullbleed, ver dmasc_portfolio_full_width()
   en inc/portfolio.php — el mismo truco que ya usa el carrusel de relacionados).
   Desvanecido en los dos bordes: al ir a sangre ninguno coincide con el margen
   del título de arriba. */
.dmasc-press__marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
/* Cuántos logos se ven a la vez se controla por porcentajes, no por px fijos,
   para que dé igual el ancho real de la pantalla. El PHP pone 2 copias de los
   5 logos (10 huecos en total), cada uno a flex-basis:10% (ver abajo) — así
   un hueco siempre mide 1/10 del ancho de la pista, sea cual sea su anchura.
   Para que se vean exactamente N a la vez, la pista mide (1000/N)% del
   escritorio: con N=4 son 250%. translateX(-50%) desplaza entonces el ancho
   exacto de un bloque de 5 (la mitad de la pista), así el bucle encaja limpio.
   Menos N en pantallas estrechas = logos más grandes y menos apretados. */
.dmasc-press__track {
	display: flex;
	align-items: center;
	width: 250%; /* N = 4 */
	animation: dmasc-press-scroll 32s linear infinite;
}
.dmasc-press__marquee:hover .dmasc-press__track {
	animation-play-state: paused;
}
.dmasc-press__logo {
	box-sizing: border-box;
	flex: 0 0 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
}
.dmasc-press__logo img {
	height: 38px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1) opacity(.5);
	transition: filter .25s ease;
}
.dmasc-press__logo img:hover {
	filter: grayscale(0) opacity(1);
}
/* Interiores y Arquitectura & Diseño llevan un subtítulo pequeño encima de la
   palabra principal (a diferencia de El Mueble/Proarquitectura/Madrid Diario,
   que son una sola línea): a la misma altura total, esa palabra principal sale
   más pequeña. Se compensa con más alto de caja para esos dos en concreto. */
.dmasc-press__logo--interiores img {
	height: 46px;
}
.dmasc-press__logo--arquitectura-diseno img {
	height: 58px;
}
@keyframes dmasc-press-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
/* A petición expresa: rota siempre en escritorio, sin depender de si el
   visitante tiene activada la preferencia de "movimiento reducido" del
   sistema — es un elemento decorativo lento (32s/vuelta), no una animación
   esencial de la interfaz. */

/* ---------- Responsive ---------- */

/* ---------- Ficha de proyecto: hero y galería de fotos a sangre ---------- */

/* Número de apartado delante del título de cada sección (ver inc/portfolio.php
   single-portfolio / post_content de cada proyecto): discreto, en gris, para
   que se note que es el mismo "2." que el del índice sin competir con el
   título. */
.dmasc-seccion-num {
	color: #b4b4b4;
	font-weight: 600;
}

/* Fondo oscuro de respaldo en el hero con vídeo: si el vídeo no carga (red
   lenta, archivo caído), el título sigue siendo legible en vez de blanco
   sobre blanco. */
.dmasc-hero-proyecto {
	background-color: #1d2127;
}

/* Índice del proyecto: "1." en vez del "01." con cero delante que trae Porto
   por defecto para listas numeradas. */
.dmasc-indice-proyecto li::before {
	content: counter( idx ) ". " !important;
}

/* Pequeño respiro entre fotos de una misma fila y antes del siguiente
   apartado, sin perder el aspecto de galería a sangre. */
.dmasc-galeria-proyecto {
	margin-bottom: 50px;
}
.dmasc-galeria-proyecto > .vc_column_container > .vc_column-inner {
	padding: 3px !important;
}

/* Menú lateral deslizante de la ficha de proyecto (ver js/proyecto-nav.js):
   pegajoso bajo la cabecera, con las secciones en fila horizontal con scroll
   para no pesar en móvil, y la sección activa marcada mientras se hace scroll. */
.dmasc-proyecto-nav {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 40;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 9px 24px;
	background: #fff;
	border-bottom: 1px solid #ebebeb;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.dmasc-proyecto-nav.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.dmasc-proyecto-nav::-webkit-scrollbar {
	display: none;
}
/* Se centra solo cuando el contenido cabe; si no cabe (móvil), los márgenes
   auto se anulan solos y el scroll del contenedor empieza en el primer item
   en vez de dejarlo inalcanzable fuera de pantalla. */
.dmasc-proyecto-nav__inner {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	gap: 8px;
}
/* Blindado con !important: Porto trae reglas globales a, a:hover, a:active,
   a:focus, a:visited (algunas en azul, #0088cc/#0077b3).
   Deliberadamente NINGÚN estado del navegador (hover, focus, active,
   visited) cambia el color aquí — solo la clase .is-active, que controla
   el JS. Antes :hover/:focus también se pintaban oscuros para tapar el
   azul de Porto, pero en táctil el navegador deja esos estados "pegados"
   en el último item tocado (no hay puntero que se aparte ni blur fiable
   en todos los dispositivos), y entonces parecía que dos items distintos
   estaban activos a la vez. Con un único mecanismo (la clase) no hay
   estado del navegador que se pueda confundir con el activo real. */
.dmasc-proyecto-nav__item,
.dmasc-proyecto-nav__item:link,
.dmasc-proyecto-nav__item:visited,
.dmasc-proyecto-nav__item:hover,
.dmasc-proyecto-nav__item:active,
.dmasc-proyecto-nav__item:focus {
	flex: none;
	position: relative;
	padding: 8px 2px;
	color: #777 !important;
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: color .25s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.dmasc-proyecto-nav__item:focus-visible {
	outline: 2px solid #23201b;
	outline-offset: 2px;
}
/* Misma línea fina que .dmasc-card__line (ver arriba): fija bajo el
   apartado activo, nunca en hover/focus/active — ver nota de arriba. */
.dmasc-proyecto-nav__item::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	height: 1px;
	background: #23201b;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.dmasc-proyecto-nav__item.is-active,
.dmasc-proyecto-nav__item.is-active:link,
.dmasc-proyecto-nav__item.is-active:visited,
.dmasc-proyecto-nav__item.is-active:hover,
.dmasc-proyecto-nav__item.is-active:active,
.dmasc-proyecto-nav__item.is-active:focus {
	color: #23201b !important;
}
.dmasc-proyecto-nav__item.is-active::after {
	transform: scaleX(1);
}
@media (max-width: 767px) {
	.dmasc-proyecto-nav {
		padding: 7px 16px;
	}
	.dmasc-proyecto-nav__inner {
		gap: 18px;
	}
	.dmasc-proyecto-nav__item {
		font-size: 12px;
	}
}
@media (min-width: 768px) {
	.dmasc-proyecto-nav__inner {
		gap: 28px;
	}
}

@media (max-width: 991px) {
	.dmasc-services { grid-template-columns: repeat(2, 1fr); }
	.dmasc-press__track { width: 333.333%; } /* N = 3 */
}

@media (max-width: 767px) {
	.dmasc-projects { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
	.dmasc-projects,
	.dmasc-services { grid-template-columns: 1fr; }
	.dmasc-card__overlay { left: 18px; right: 18px; bottom: 16px; }
	/* En una sola columna, 3/4 (muy vertical) recorta demasiado una foto
	   horizontal como la de equipo o la de fachada — menos alto aquí. */
	.dmasc-accesos .dmasc-card__media { aspect-ratio: 4 / 3; }
	/* Sin hover en táctil, título + descripción + enlace salen los tres a la
	   vez: se quita la descripción para que no se vea tan lleno. */
	.dmasc-accesos .dmasc-card__desc { display: none; }
	/* En táctil no hay hover: el enlace se muestra siempre */
	.dmasc-card__more { max-height: 24px; margin-top: 8px; opacity: 1; transform: none; }
	.dmasc-related__head { display: block; }
	.dmasc-related__actions { justify-content: space-between; margin-top: 8px; }
	.dmasc-press__track { width: 500%; } /* N = 2 */
	.dmasc-press__logo { padding: 0 18px; }
	.dmasc-press__logo img { height: 28px; }
}

/* ---------- Ficha de artículo (single.php): imagen con esquinas redondeadas,
   índice a la izquierda (sticky en escritorio, píldoras en móvil), sin
   barra lateral de Porto ---------- */

.dmasc-article-layout {
	display: grid;
	grid-template-columns: 200px 1fr 230px;
	gap: 48px;
	align-items: start;
	margin: 32px 50px 0; /* alineado con la casita de las migas / el logo (mismo inset que .breadcrumbs-wrap.pt-left) */
}
/* Sin índice (artículo sin <h2>, p. ej. "¡Hola, mundo!"): índice fuera, el
   artículo ocupa su sitio y los servicios se quedan a la derecha. */
.dmasc-article-layout.no-toc {
	grid-template-columns: 1fr 230px;
}
.dmasc-article-layout.no-toc .dmasc-toc--desktop {
	display: none;
}

.dmasc-toc--desktop,
.dmasc-services-aside {
	position: sticky;
	top: 24px;
}
.dmasc-toc__label {
	margin: 0 0 12px;
	color: #8a8171;
	font-family: Manrope, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.1px;
}
.dmasc-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.dmasc-toc--desktop a {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid #e4dfd3;
	color: #8a8171;
	font-family: Manrope, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}
.dmasc-toc--desktop a:hover {
	color: #23201b;
}
.dmasc-toc a.is-active {
	color: #23201b;
	font-weight: 600;
}
.dmasc-toc--desktop a.is-active {
	border-left-color: #23201b;
}

/* Píldoras horizontales: solo visibles en móvil (ver media query abajo). */
.dmasc-toc--mobile {
	display: none;
}

.dmasc-article {
	/* Sin max-width aquí: título, imagen y texto ocupan toda la pista
	   central de la rejilla, hasta el borde de los servicios. */
}
.dmasc-article__title {
	margin: 0 0 12px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 20px + 2vw, 38px);
	line-height: 1.12;
	letter-spacing: -.5px;
}
.dmasc-article__meta {
	margin: 0 0 24px;
	color: #8a8171;
	font-family: Manrope, sans-serif;
	font-size: 12.5px;
}
.dmasc-article__hero {
	margin: 0 0 28px;
	max-height: 420px;
	border-radius: 8px;
	overflow: hidden;
}
.dmasc-article__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
}

/* Mismo lenguaje tipográfico que .texto-parrafo / .titulo-complementario
   (CSS personalizado de Porto), aplicado al HTML sin clases que genera
   the_content() para una entrada normal. */
.dmasc-article__body p {
	margin: 0 0 18px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.65;
}
.dmasc-article__body h2 {
	margin: 30px 0 14px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 16px + .4vw, 20px);
	letter-spacing: -1px;
	line-height: 1.2;
	scroll-margin-top: 90px; /* que la cabecera fija no tape el título al saltar desde el índice */
}
.dmasc-article__body h3 {
	margin: 24px 0 12px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -.3px;
	line-height: 1.3;
}
.dmasc-article__body ul,
.dmasc-article__body ol {
	margin: 0 0 18px;
	padding-left: 18px;
}
.dmasc-article__body li {
	margin-bottom: 5px;
	color: #23201b;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 1.7;
}
.dmasc-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}
.dmasc-article__body a {
	color: #23201b;
	text-decoration: underline;
	text-decoration-color: #d9d2c4;
	text-underline-offset: 3px;
}

/* Los 5 servicios en el lateral: misma tarjeta real que en /servicios-arquitectura/
   (.dmasc-card--servicio), solo que en una columna y más compacta — sin la
   descripción (no cabe cómoda en 230px) y con menos foto de alto. */
.dmasc-services.dmasc-services--sidebar {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dmasc-services--sidebar .dmasc-card__media {
	aspect-ratio: 16 / 10;
}
.dmasc-services--sidebar .dmasc-card__overlay {
	left: 14px;
	right: 14px;
	bottom: 12px;
}
.dmasc-services--sidebar .dmasc-card__title {
	font-size: 14px;
	letter-spacing: -.3px;
}
.dmasc-services--sidebar .dmasc-card__line {
	width: 18px;
	margin-bottom: 8px;
}
.dmasc-services--sidebar .dmasc-card__link:hover .dmasc-card__line {
	width: 32px;
}
.dmasc-services--sidebar .dmasc-card__desc {
	display: none;
}

/* Por debajo de esto no cabe una columna de índice de 200px + el texto a
   860px de forma cómoda: el índice de escritorio se oculta y en su lugar
   aparecen las píldoras horizontales, justo debajo de la imagen destacada. */
@media (max-width: 991px) {
	.dmasc-article-layout {
		display: block;
		max-width: 860px;
		margin: 32px auto 0;
	}
	.dmasc-toc--desktop {
		display: none;
	}
	.dmasc-toc--mobile {
		display: flex;
		gap: 24px;
		overflow-x: auto;
		margin: 0 0 20px;
		padding: 6px 0 0;
		scrollbar-width: none;
		/* Fijo bajo la cabecera (55 px, también sticky) mientras se lee el artículo. */
		position: sticky;
		top: 55px;
		z-index: 900; /* por debajo de la cabecera (1030) */
		background: #fff;
		border-bottom: 1px solid #efebe2;
	}
	/* Cabecera (55 px) + barra del índice (~50 px) fijas: el título no queda tapado al saltar. */
	.dmasc-article__body h2 {
		scroll-margin-top: 120px;
	}
	.dmasc-toc--mobile::-webkit-scrollbar {
		display: none;
	}
	.dmasc-toc--mobile a {
		flex: none;
		white-space: nowrap;
		max-width: 200px; /* los títulos largos se cortan con "…" en vez de ocupar la pantalla */
		overflow: hidden;
		text-overflow: ellipsis;
		color: #8a8171;
		font-family: Manrope, sans-serif;
		font-size: 13px;
		line-height: 1.4;
		text-decoration: none;
		padding: 6px 0 8px; /* el aire de abajo evita que overflow:hidden recorte el subrayado */
	}
	/* Apartado activo: mismo subrayado que el menú (2 px, #23201B, 6 px de separación). */
	.dmasc-toc--mobile a.is-active {
		color: #23201b;
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: #23201b;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
	.dmasc-services-aside {
		position: static;
		margin-top: 48px;
		padding-top: 28px;
		border-top: 1px solid #e4dfd3;
	}
}
@media (max-width: 575px) {
	.dmasc-article { padding: 0 20px; }
	/* La barra del índice llega de borde a borde; las píldoras siguen alineadas con el texto. */
	.dmasc-toc--mobile {
		margin-left: -40px; /* 20 px de margen del contenedor + 20 px de relleno del artículo */
		margin-right: -40px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ---------- Paginación del listado del blog (porto_pagination(), impresa en
   dmasc_blog_listado_shortcode() — inc/blog.php): subrayado en el número
   activo, mismo lenguaje que el índice del artículo. Markup real de Porto:
   .pagination-wrap > .pagination[role=navigation] > a/span.page-numbers,
   con .current, .dots, .prev y .next. ---------- */
.pagination-wrap {
	display: flex;
	justify-content: center;
	margin: 40px 0 0;
}
.pagination-wrap .pagination {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: Manrope, sans-serif;
}
/* Reseteo: la plantilla "modern" de Porto (theme/blog/type/modern.css) pinta
   la paginación como píldoras con borde y fondo de color en el activo
   (border-radius va con !important ahí, de ahí el !important aquí también). */
.pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	width: auto;
	height: 30px;
	line-height: normal;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0 !important;
	background: none;
	color: #8a8171;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.pagination-wrap a.page-numbers:hover {
	color: #23201b;
}
.pagination-wrap .page-numbers.current {
	background: none;
	border-color: #23201b;
	color: #23201b;
	font-weight: 700;
	border-bottom-color: #23201b;
}
.pagination-wrap .page-numbers.dots {
	border: 0;
	color: #d9d2c4;
}
.pagination-wrap .page-numbers.prev,
.pagination-wrap .page-numbers.next {
	min-width: 0;
	width: auto;
	height: auto;
	padding: 0 10px;
	border-bottom: none;
	color: #23201b;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .2px;
	text-indent: 0;
	overflow: visible;
	position: static;
}
.pagination-wrap .page-numbers.prev:hover,
.pagination-wrap .page-numbers.next:hover {
	opacity: .6;
}
/* El icono chevron (::before, Porto) solo tenía sentido cuando el texto
   real ("Prev"/"Next") iba oculto por el text-indent de arriba; ahora que
   se ve el texto, se quita para no duplicar el indicador de dirección. */
.pagination-wrap .page-numbers.prev::before,
.pagination-wrap .page-numbers.next::before {
	content: none;
}
.pagination-wrap .page-numbers.prev i,
.pagination-wrap .page-numbers.next i {
	font-size: 11px;
}

/* ---------- "dmasc-info-servicio": fila de imagen + título + texto en las
   páginas de servicio (p. ej. /servicios-arquitectura/obra-nueva/), 3
   estructuras en línea. Ancho hasta el logo (mismo inset de 80px que el
   breadcrumb/logo — ver .breadcrumbs-wrap.pt-left), hueco entre estructuras
   igual que el mosaico de Proyectos (.dmasc-projects, gap:6px): imagen
   arriba, título y texto apilados debajo alineados a la izquierda. Doble
   clase y !important porque el CSS propio del bloque de WPBakery
   (.vc_custom_XXXXXXX, padding:50px !important) tiene la misma
   especificidad y hay que ganarle. */
.vc_row.dmasc-info-servicio {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	padding-left: 80px !important;
	padding-right: 80px !important;
}
.dmasc-info-servicio > .vc_column_container {
	flex: 1 1 0;
	width: auto !important;
	max-width: none !important;
}
.dmasc-info-servicio .vc_single_image-img {
	width: 100%;
	height: auto;
	display: block;
}
.dmasc-info-servicio .titulo-complementario,
.dmasc-info-servicio .texto-parrafo {
	text-align: left;
}
.dmasc-info-servicio .titulo-complementario h2 {
	text-align: left !important;
}
/* .wpb_wrapper trae 20px de padding lateral de serie (estilo genérico de
   Porto para columnas de texto de WPBakery): sin esto, el título y el
   texto quedan indentados respecto al borde de la imagen. */
.dmasc-info-servicio .titulo-complementario .wpb_wrapper,
.dmasc-info-servicio .texto-parrafo .wpb_wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 767px) {
	.vc_row.dmasc-info-servicio {
		flex-direction: column;
		gap: 32px;
		padding-left: 20px !important; /* mismo inset que .parte-posterior/.fondo en móvil */
		padding-right: 20px !important;
	}
	.dmasc-info-servicio > .vc_column_container {
		width: 100% !important;
	}
}

/* ---------- "Estudio de arquitectura 360" en la home: los 5 servicios en
   una fila (.servicios-home, CSS personalizado de Porto — ver inc_servicio-
   home en el panel de WPBakery de la home, post 12). Ese CSS ya usa
   :first-child/:last-child, no hace falta tocarlo; solo hay que forzar 5
   columnas iguales en vez de las col-md-3 (25%) pensadas para 4, ahora que
   hay 5 servicios reales (Cambio de uso se añadió más tarde). ---------- */
.servicios-home.vc_row {
	display: flex;
}
/* Ancho según su propio contenido (no columnas iguales): con columnas
   iguales el hueco visual antes de cada separador variaba muchísimo según
   lo larga que fuera cada palabra ("Obra nueva" dejaba 111px de hueco,
   "Reformas integrales" solo 43px). El padding simétrico de cada enlace
   (mismo valor a los dos lados) es lo que de verdad da un espacio parejo. */
.servicios-home > .vc_column_container {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
}
/* Letra y padding un pelín menores que el 28px/17px de Porto (pensados para
   4 columnas a todo el ancho de página, no 5 en la mitad): si no, "Reformas
   integrales" y "Diseño de interiores" no caben en una línea. */
.servicios-home .info-servicio-home a {
	padding-left: 32px !important;
	padding-right: 32px !important;
	font-size: 15px !important;
	white-space: nowrap;
}
.servicios-home > .vc_column_container:first-child .info-servicio-home a {
	padding-left: 0 !important;
}
.servicios-home > .vc_column_container:last-child .info-servicio-home a {
	padding-right: 0 !important;
}
@media (max-width: 767px) {
	.servicios-home.vc_row {
		flex-direction: column;
	}
	.servicios-home > .vc_column_container {
		flex: 1 1 auto;
	}
	/* El separador entre columnas (border-right, CSS de Porto) no tiene
	   sentido apilado en una sola columna: se sustituye por uno horizontal
	   entre filas, igual que arriba quita el de la última. */
	.servicios-home > .vc_column_container {
		border-right: none !important;
		border-bottom: 1px solid #e4dfd3;
	}
	.servicios-home > .vc_column_container:last-child {
		border-bottom: none;
	}
	/* Apiladas, los 32px de padding lateral (pensados para separar del
	   siguiente enlace en la misma fila) solo tendrían sentido en el primer
	   elemento: sin esto, del 2º al 5º quedarían indentados y el primero no. */
	.servicios-home .info-servicio-home a {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}