/* Vexel DeMÁT — capa de marca sobre vexel-base
 *
 * Solo lo que cambia respecto al padre. El CSS de cada bloque propio vive
 * junto al bloque (/blocks/<cat>/<nombre>/style.css), igual que en vexel-base.
 */

:root {
	/* Alias de marca */
	--demat-coral: var(--wp--preset--color--primary);
	--demat-navy: var(--wp--preset--color--navy);
	--demat-gris-1: var(--wp--preset--color--bg-soft);
	--demat-gris-2: var(--wp--preset--color--border);
	--demat-gris-3: var(--wp--preset--color--text-muted);

	/* Gutter lateral de la maqueta: 168px sobre 1440 */
	--demat-gutter: var(--wp--custom--gutter);

	/* Alturas de la maqueta */
	--demat-header-h: 72px;

	/* Tamaños tipográficos con alias defensivo.
	 *
	 * WordPress pasa los slugs de preset a kebab-case al generar las variables
	 * CSS, de modo que "2xl" puede acabar como --wp--preset--font-size--2-xl
	 * en lugar de --2xl según la versión. Estos alias cubren ambas grafías y
	 * dejan un valor literal de último recurso, para que el tema no dependa
	 * de ese detalle interno. */
	--demat-fs-2xl: var(--wp--preset--font-size--2xl, var(--wp--preset--font-size--2-xl, 2rem));
	--demat-fs-3xl: var(--wp--preset--font-size--3xl, var(--wp--preset--font-size--3-xl, 2.5rem));
	--demat-fs-4xl: var(--wp--preset--font-size--4xl, var(--wp--preset--font-size--4-xl, 3rem));

	/* El anillo de foco del padre hereda primary, que aquí ya es coral */
	--vexel-focus-ring-radius: var(--wp--custom--radius--pill);
}

/* -----------------------------------------------------------------------
 * Negrita — Lexend Medium (500)
 *
 * La familia se sirve como fuente variable en el rango 300–500. El `strong`
 * del navegador pide 700, que cae fuera de ese rango: el resultado es una
 * negrita sintética (el navegador engorda el trazo por su cuenta) que no se
 * parece a la de la maqueta. En Figma los tramos destacados son Lexend
 * Medium, así que se fija en 500.
 *
 * Vale tanto para el contenido del importador como para lo que el cliente
 * marque en negrita desde el editor.
 * ----------------------------------------------------------------------- */

strong,
b {
	font-weight: 500;
}

/* -----------------------------------------------------------------------
 * Acento tipográfico — Cormorant itálica coral
 *
 * En la maqueta ciertas palabras de los titulares van en Cormorant Medium
 * Italic y en coral ("Cada material cuenta una *historia*").
 * Se resuelve con <em>: el editor solo tiene que poner la palabra en cursiva
 * y sale con el estilo correcto, sin clases ni HTML a mano.
 * ----------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6, .vxl-display) em,
.vxl-accent {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	color: var(--demat-coral);
	/* En la maqueta el texto base va a 32px y el acento en Cormorant a 40px:
	 * ratio exacto de 1.25. Cormorant tiene además menor altura-x, así que
	 * este salto es también el que iguala ópticamente ambas fuentes. */
	font-size: 1.25em;
	/* line-height: 1 y no `inherit`. Heredar el 1.25 del titular lo aplicaría
	 * sobre los 40px del acento (=50px) y estiraría la caja de línea, dejando
	 * cada titular 10px más alto que en la maqueta. Con 1 el acento ocupa sus
	 * 40px, exactamente la misma altura de línea que el texto base. */
	line-height: 1;
}

/* Sobre fondo oscuro el acento mantiene el coral, que contrasta de sobra */
.has-navy-background-color :where(h1, h2, h3, h4, h5, h6) em,
.vxl-on-dark :where(h1, h2, h3, h4, h5, h6) em {
	color: var(--demat-coral);
}

/* -----------------------------------------------------------------------
 * Botones — variantes de la maqueta
 * ----------------------------------------------------------------------- */

/* Ghost: pastilla transparente con borde y texto coral (CTA "Visítanos") */
.wp-block-button.is-style-ghost .wp-block-button__link,
.vxl-btn-ghost {
	background: transparent;
	color: var(--demat-coral);
	border: 1px solid var(--demat-coral);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.5rem 2rem;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 160ms ease, color 160ms ease;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.vxl-btn-ghost:hover {
	background: var(--demat-coral);
	color: #FFFFFF;
}

/* Ghost sobre fondo oscuro (header) */
.vxl-on-dark .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--demat-coral);
	color: #FFFFFF;
}

/* Texto + flecha: enlace coral con flecha que avanza al pasar (CTA "Ver todos los espacios") */
.wp-block-button.is-style-arrow .wp-block-button__link,
.vxl-btn-arrow {
	background: transparent;
	color: var(--demat-coral);
	border: 0;
	/* En la maqueta es un botón de 48px de alto (12px arriba y abajo sobre
	 * una línea de 24). Sin este alto la fila mide 24 y cada sección que lo
	 * usa se queda 24px corta. */
	padding-block: 12px;
	padding-inline: 0;
	min-block-size: 48px;
	font-weight: 400;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	/* Maqueta: 8px entre el texto y el icono */
	gap: 8px;
}

/* Flecha del icono «arrow-narrow-right» de la maqueta: caja de 24x24, trazo
 * de 1px con extremos y uniones redondeados. Se pinta con máscara en lugar de
 * imagen de fondo para que herede el color del enlace (currentColor) y sirva
 * igual sobre fondo claro y sobre fondo oscuro. */
:root {
	--vxl-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8l4 4-4 4M21 12H3'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-arrow .wp-block-button__link::after,
.vxl-btn-arrow::after {
	content: "";
	inline-size: 24px;
	block-size: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--vxl-arrow-right) center / 24px 24px no-repeat;
	mask: var(--vxl-arrow-right) center / 24px 24px no-repeat;
	transition: translate 200ms ease;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.vxl-btn-arrow:hover::after {
	translate: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-arrow .wp-block-button__link::after,
	.vxl-btn-arrow::after {
		transition: none;
	}
	.wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
	.vxl-btn-arrow:hover::after {
		translate: 0;
	}
}

/* Botón circular con flecha diagonal — usado en las tarjetas de espacios
 * y en las fichas de historias. */
.vxl-arrow-circle {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--demat-navy);
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	transition: transform 200ms ease, background-color 200ms ease;
}

.vxl-arrow-circle svg {
	inline-size: 16px;
	block-size: 16px;
}

a:hover > .vxl-arrow-circle,
.vxl-card:hover .vxl-arrow-circle {
	transform: translate(2px, -2px);
}

/* -----------------------------------------------------------------------
 * Header DeMÁT — barra oscura de 72px, full-bleed
 * ----------------------------------------------------------------------- */

.vexel-header.vxl-header-demat {
	background: var(--demat-navy);
	border-block-end: 0;
	padding-block: 16px;
	padding-inline: 56px;
	min-block-size: var(--demat-header-h);
}

/* Por encima de 1440 el grupo interior heredaba el `wideSize` del tema como
 * `max-width: 1440px` y se quedaba anclado a la izquierda: en una pantalla de
 * 1920 el logotipo caía en 56 pero el menú se quedaba a 409px del borde
 * derecho. El contenido de las páginas sí se estira —el gutter tiene tope de
 * 168 y a partir de ahí solo crece la columna— así que el header debe
 * acompañarlo y mantener sus 56px a cada lado a cualquier ancho. */
.vxl-header-demat > .wp-block-group {
	max-inline-size: none;
	inline-size: 100%;
}

/* Enlaces del header: blancos, con hover en coral.
 *
 * WordPress duplica la clase en su propio selector
 * (.wp-block-navigation-item__content.wp-block-navigation-item__content)
 * justo para ganar especificidad, así que una regla normal se queda corta y
 * los enlaces heredaban el navy del texto del sitio. Aquí se repite la clase
 * para superarla. El bloque de navegación lleva además textColor declarado,
 * que evita el negro por defecto del submenú
 * (.wp-block-navigation:not(.has-text-color) …). */
.vxl-header-demat .wp-block-site-title a,
.vxl-header-demat .wp-block-navigation a,
.vxl-header-demat .wp-block-navigation
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #FFFFFF;
	text-decoration: none;
	/* Lexend Light, como en la maqueta. El tema padre pone 500 en
	 * `.vexel-header .wp-block-navigation a`, de ahí la negrita. */
	font-weight: 300;
}

.vxl-header-demat .wp-block-site-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	letter-spacing: 0;
}

.vxl-header-demat .wp-block-navigation {
	gap: 24px;
	/* La maqueta usa 14px en los enlaces del header, no 16px */
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
}

/* El hover tiene que repetir la clase igual que la regla base: si no, el
 * blanco de arriba (4 clases) ganaría al hover (3 clases + pseudoclase). */
.vxl-header-demat .wp-block-navigation
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.vxl-header-demat .wp-block-navigation
	.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.vxl-header-demat .wp-block-navigation
	.wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
.vxl-header-demat .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.vxl-header-demat .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--demat-coral);
	/* El padre sube a 600 el enlace de la página actual; en la maqueta el peso
	 * no cambia, solo el color. */
	font-weight: 300;
}

/* La maqueta no lleva indicador de desplegable: los cuatro enlaces del header
 * son solo texto (59/102/130/90 en Figma, más 8px de relleno a cada lado). El
 * icono que añade WordPress sumaba 12px a «Espacios» y dejaba la lista en 527
 * en vez de 517, corriendo el menú hacia la izquierda.
 *
 * Se oculta con `display: none`, que también lo saca del árbol de
 * accesibilidad; el submenú sigue abriéndose al pasar por encima y al enfocar
 * con el teclado, y en el panel de móvil va desplegado de partida. */
.vxl-header-demat .wp-block-navigation__submenu-icon {
	display: none;
}

/* Submenú de Espacios — panel blanco con texto navy, 232px como en la maqueta.
 *
 * El fondo blanco lo pone el núcleo
 * (.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container),
 * pero el color de texto lo heredaba del header y salía blanco sobre blanco.
 * Aquí se fija el par completo para que no dependa de esa herencia. */
.vxl-header-demat .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #FFFFFF;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	min-inline-size: 232px;
	padding-block: 8px;
	box-shadow: var(--wp--custom--shadow--lg);
	overflow: hidden;
}

.vxl-header-demat .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--demat-navy);
	font-weight: 300;
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--sm);
	min-block-size: 0;
}

/* El logotipo de la maqueta mide 160x25 */
.vxl-header-demat .wp-block-site-logo,
.vxl-header-demat .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.vxl-header-demat .wp-block-site-logo img {
	inline-size: 160px;
	block-size: auto;
	max-inline-size: none;
}

/* El nombre del sitio viaja junto al logotipo como respaldo: si el logotipo
 * está puesto se oculta visualmente (sigue disponible para lectores de
 * pantalla y buscadores); si faltara, el header no se queda vacío. */
.vxl-header-demat__brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Maqueta: 32px entre la navegación y el botón «Visítanos» */
.vxl-header-demat__end {
	gap: 32px;
}

/* El CTA del header mide 40px justos.
 *
 * Alto fijo y centrado por flex en lugar de padding vertical: con
 * padding 8 + línea 24 el borde de 1px sumaba por fuera y dejaba el botón
 * en 42, lo que a su vez estiraba el header a 74 en vez de 72. */
.vxl-header-demat .vxl-header-cta .wp-block-button__link {
	block-size: 40px;
	padding-block: 0;
	padding-inline: 32px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* La navegación ocupa la misma caja de 40px que el botón, como en la maqueta.
 *
 * En Figma cada enlace es un botón con 8px de relleno a los lados: sus anchos
 * son 75/118/146/106, que son los del texto (59/102/130/90) más 16. Sin ese
 * relleno la lista medía 463 en lugar de 517 y, al ir anclada al borde
 * derecho, arrastraba todo el menú 52px hacia la derecha. */
.vxl-header-demat .wp-block-navigation__container > li > a {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 8px;
}

/* -----------------------------------------------------------------------
 * Menú de hamburguesa
 *
 * WordPress saca el overlay por debajo de su `$break-small` (600px), pero la
 * navegación de DeMÁT no cabe ahí: los cuatro enlaces más el logotipo y el
 * CTA piden unos 870px, y entre 600 y 1024 las etiquetas se partían en dos
 * líneas y estiraban el header de 72 a 76. Estas reglas adelantan el corte a
 * 1024 replicando —e invirtiendo— las tres del núcleo que gobiernan el
 * cambio. Llevan `.vxl-header-demat` delante para ganarles en especificidad.
 * ----------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 1023.98px) {
	.vxl-header-demat .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vxl-header-demat
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		display: block;
	}
}

/* El enlace «Visítanos» que viaja dentro de la navegación solo se ve cuando
 * el overlay está abierto; en escritorio manda el botón de fuera. */
.vxl-header-demat .vxl-nav-cta {
	display: none;
}

@media (max-width: 1023.98px) {
	/* Con el menú plegado, el botón suelto sobra: el CTA pasa a estar dentro */
	.vxl-header-demat .vxl-header-cta {
		display: none;
	}
}

@media (max-width: 781px) {
	.vexel-header.vxl-header-demat {
		padding-inline: 24px;
	}
}

/* Panel a pantalla completa. El navy y el blanco llegan por los atributos
 * `overlayBackgroundColor` / `overlayTextColor` del bloque, de modo que
 * siguen siendo editables; aquí solo se resuelve la retícula. */
/* El navy y el blanco se declaran aquí y no como atributos del bloque
 * justamente para que no se filtren al submenú de escritorio.
 *
 * El precio es que hay que ganarle a la regla del núcleo que pinta el panel
 * de blanco cuando la navegación no lleva fondo propio:
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open:not(…)
 * son cinco clases. De ahí que el nombre vaya repetido: sin eso el panel
 * salía blanco con el texto también blanco. */
.vxl-header-demat
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open.is-menu-open {
	background: var(--demat-navy);
	color: #FFFFFF;
	padding: 24px;
	align-items: stretch;
}

/* La cruz, arriba a la derecha, centrada en la banda que deja el padding
 * superior del contenido. */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	inset-block-start: 12px;
	inset-inline-end: 0;
	inline-size: 24px;
	block-size: 24px;
	color: #FFFFFF;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	/* Sin margen: al no tener el diálogo ni relleno ni borde, un margen aquí
	 * se colapsaba hacia fuera y arrastraba todo el panel. */
	padding-block-start: 48px;
	inline-size: 100%;
}

/* El bloque lleva `justifyContent: right` para el header de escritorio, que
 * en vertical se traduce en `align-items: flex-end` y empujaba el submenú
 * contra el borde derecho. Dentro del overlay todo va alineado a la
 * izquierda. */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0;
	inline-size: 100%;
	align-items: flex-start;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container .wp-block-navigation-item {
	align-items: flex-start;
}

/* Enlaces de primer nivel: 16px y caja de 48 para que se puedan pulsar */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	inline-size: 100%;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-block-size: 48px;
	inline-size: 100%;
	/* Los 8px del menú horizontal no pintan nada dentro del panel, donde las
	 * filas ya van a ancho completo sobre el gutter. */
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	color: #FFFFFF;
}

/* Filete tenue entre secciones, como en el pie.
 *
 * Ojo con el árbol: el diálogo no cuelga directamente del contenedor, sino de
 * `.wp-block-navigation__responsive-close`, así que aquí no vale el `>`. */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item + .wp-block-navigation-item {
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

/* Submenú de Espacios dentro del overlay: deja de ser un panel blanco
 * flotante y pasa a ser una lista indentada sobre el mismo navy. Sin esto
 * los enlaces salen en navy sobre navy y no se leen. */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	position: static;
	inline-size: 100%;
	min-inline-size: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* La clase va repetida porque el núcleo hace lo mismo para imponer sus
	 * 32px de sangrado; con un solo nombre de clase esta regla no llegaba. */
	padding: 0 0 8px 16px;
	opacity: 1;
	visibility: visible;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item {
	inline-size: 100%;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	min-block-size: 40px;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.78);
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--demat-coral);
}

/* El CTA, al final del panel y con el mismo aspecto de botón fantasma
 * que tiene en el header de escritorio. */
/* El filete separador no debe caer sobre el CTA: la regla repite el nombre
 * para superar en especificidad a la de los separadores. */
.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .vxl-nav-cta.vxl-nav-cta {
	display: block;
	margin-block-start: 32px;
	border-block-start: 0;
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.vxl-nav-cta
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	justify-content: center;
	min-block-size: 48px;
	/* En tableta el panel mide 720px de ancho y el botón se estiraba entero */
	max-inline-size: 320px;
	border: 1px solid var(--demat-coral);
	border-radius: 999px;
	color: var(--demat-coral);
	font-size: var(--wp--preset--font-size--sm);
}

.vxl-header-demat .wp-block-navigation__responsive-container.is-menu-open
	.vxl-nav-cta
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--demat-coral);
	color: #FFFFFF;
}

/* -----------------------------------------------------------------------
 * Footer DeMÁT — bloque oscuro
 * ----------------------------------------------------------------------- */

.vexel-footer.vxl-footer-demat {
	background: var(--demat-navy);
	color: #FFFFFF;
	padding-block: 80px 0;
}

/* Mismo caso que en el header: los dos bloques del pie heredaban el
 * `wideSize` del tema como `max-width: 1440px` y se quedaban anclados a la
 * izquierda. El navy sí llegaba de borde a borde, pero el filete que separa
 * los legales se cortaba a los 1440 —en una pantalla de 1920 dejaba 465px sin
 * línea— y el gutter derecho crecía sin control. */
.vxl-footer-demat > .wp-block-group {
	max-inline-size: none;
	inline-size: 100%;
}

.vxl-footer-demat a,
.vxl-footer-demat .wp-block-site-title a {
	color: #FFFFFF;
	text-decoration: none;
}

.vxl-footer-demat a:hover {
	color: var(--demat-coral);
}

.vxl-footer-demat .vexel-footer__bottom {
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	border-block-end: 0;
	/* Maqueta: bloque superior 360px (80 de padding + 280 de contenido) y
	 * barra inferior de 88px, 448 en total. */
	padding-block: 0;
	margin-block-start: 0;
	min-block-size: 88px;
	display: flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(255, 255, 255, 0.64);
}

.vxl-footer-demat .vexel-footer__top {
	min-block-size: 280px;
	align-content: start;
}

.vxl-footer-demat .vexel-footer__top {
	border-block-end: 0;
}

/* Columnas del footer — maqueta: marca a la izquierda, dos listas a la derecha */

.vxl-footer-demat .vexel-footer__top {
	padding-inline: var(--demat-gutter);
	gap: 64px;
	align-items: flex-start;
}

/* Maqueta (Frame 392): 40px entre el logotipo, la dirección y las redes.
 * Con 24 la columna medía 168 en vez de los 194 del diseño. */
.vxl-footer__brand {
	gap: 40px;
	max-inline-size: 40ch;
}

/* Logotipo del pie — mismas medidas que en el header (160x25 en la maqueta) */
.vxl-footer-demat .wp-block-site-logo,
.vxl-footer-demat .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.vxl-footer-demat .wp-block-site-logo img {
	inline-size: 160px;
	block-size: auto;
	max-inline-size: none;
}

/* El nombre del sitio queda de respaldo: si hay logotipo se oculta a la vista
 * pero sigue disponible para lectores de pantalla y buscadores; si faltara,
 * el pie no se queda sin marca. Mismo criterio que en el header. */
.vxl-footer__brand:has(.wp-block-site-logo img) .wp-block-site-title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vxl-footer__address {
	margin: 0;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.vxl-footer__address strong {
	color: #FFFFFF;
	font-weight: 500;
}

/* La dirección enlaza a Google Maps. Hereda el color del párrafo en lugar del
 * blanco que la regla general da a los enlaces del pie: si no, el bloque
 * pasaría de gris claro a blanco y perdería su jerarquía frente al resto.
 * El coral al pasar por encima es lo que delata que se puede pulsar. */
.vxl-footer-demat a.vxl-footer__mapa {
	color: inherit;
	display: inline-block;
}

.vxl-footer-demat a.vxl-footer__mapa:hover,
.vxl-footer-demat a.vxl-footer__mapa:focus-visible {
	color: var(--demat-coral);
}

.vxl-footer-demat a.vxl-footer__mapa:hover strong,
.vxl-footer-demat a.vxl-footer__mapa:focus-visible strong {
	color: var(--demat-coral);
}

/* Maqueta: las dos listas ocupan 360 (156 + 48 + 156) y terminan justo en el
 * gutter derecho (1272 a 1440), de modo que «Inicio» arranca en 912. Con
 * 180 + 80 la caja medía 440 y las columnas caían 80px a la izquierda. */
.vxl-footer__cols {
	gap: 48px;
	align-items: flex-start;
}

.vxl-footer__col {
	/* La maqueta separa los enlaces 33px entre líneas base */
	gap: 12px;
	min-inline-size: 156px;
}

.vxl-footer__col p {
	margin: 0;
}

.vxl-footer__col-title a {
	font-weight: 500;
	color: #FFFFFF;
}

.vxl-footer__col p:not(.vxl-footer__col-title) a {
	color: rgba(255, 255, 255, 0.78);
}

.vxl-footer__col p:not(.vxl-footer__col-title) a:hover {
	color: var(--demat-coral);
}

.vxl-footer-demat .vexel-footer__bottom {
	padding-inline: var(--demat-gutter);
}

.vxl-footer__legal {
	gap: 40px;
}

.vxl-footer__legal p {
	margin: 0;
}

/* Redes sociales — iconos blancos, sin fondo.
 *
 * La maqueta (Frame 391) los dibuja a 16px, y así se probaron, pero a ese
 * tamaño quedan minúsculos frente al resto del pie: el logotipo mide 25 y los
 * enlaces 24 de línea. Se dejan en los 24 que sirve el bloque de WordPress,
 * que es como estaban y como se ven equilibrados. Desviación consciente. */
.vxl-footer-demat .wp-block-social-links {
	gap: 16px;
}

/* --- Logotipos de la subvención ----------------------------------------
 * Van en su propia línea dentro del bloque superior, alineados a la derecha
 * y abajo, como en la referencia. Al ocupar el ancho completo obligan a la
 * fila a envolver, así que caen bajo las columnas de enlaces sin tocar su
 * retícula. Los 40px de alto son los del propio SVG. */

/* Banda propia entre el bloque superior y la barra legal (Figma «Frame 191»:
 * 1440x80, relleno 0/168/40/168, hueco 26, alineada a la derecha).
 *   40 de logotipo + 40 de relleno inferior = 80
 * El pie pasa así de 448 a 498, que es lo que mide la maqueta actualizada. */
.vxl-footer__ayudas {
	box-sizing: border-box;
	/* La disposición de flujo de WordPress mete 24px de margen a cada hijo a
	 * partir del segundo. Sin anularlo la banda se despega del bloque
	 * superior y el pie mide 522 en vez de 498. */
	margin-block: 0;
	padding-inline: var(--demat-gutter);
	padding-block: 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 26px;
}

/* El bloque superior mide 330 en la maqueta: 80 de relleno superior (los pone
 * el pie), 200 de contenido y 50 por debajo. Antes eran 280 de alto mínimo
 * porque no existía la banda de logotipos. */
.vxl-footer-demat .vexel-footer__top {
	box-sizing: border-box;
	min-block-size: 250px;
	padding-block-end: 50px;
}

.vxl-footer__ayudas .wp-block-image {
	margin: 0;
	line-height: 0;
}

.vxl-footer__ayudas img {
	block-size: 40px;
	inline-size: auto;
	max-inline-size: 100%;
	display: block;
}

@media (max-width: 781px) {
	/* Los dos logotipos se mantienen en la misma línea. Como juntos piden
	 * 196 + 163 y en un móvil no caben, se les deja encoger: al darles como
	 * base sus anchos reales, el reparto del déficit que hace flexbox es
	 * proporcional a esas bases, de modo que ambos se reducen en la misma
	 * escala y conservan la misma altura entre sí. Por encima de ese punto no
	 * encogen y vuelven a su tamaño nativo de 40px de alto. */
	.vxl-footer__ayudas {
		justify-content: flex-start;
		flex-wrap: nowrap;
		align-items: center;
		gap: 16px;
	}

	.vxl-footer__ayudas .wp-block-image {
		min-inline-size: 0;
	}

	.vxl-footer__ayudas .wp-block-image:nth-child(1) { flex: 0 1 196px; }
	.vxl-footer__ayudas .wp-block-image:nth-child(2) { flex: 0 1 163px; }

	.vxl-footer__ayudas img {
		inline-size: 100%;
		block-size: auto;
		max-inline-size: none;
	}
}

/* --- Pie en pantallas estrechas -----------------------------------------
 * La maqueta solo existe a 1440. Aquí la fila de tres piezas (marca + dos
 * listas) pasa a columna, se recortan los huecos —80px entre listas dejaban
 * un pie de 853px en un móvil— y la barra inferior deja de intentar poner
 * los legales y el copyright en la misma línea. */

@media (max-width: 781px) {
	.vexel-footer.vxl-footer-demat {
		padding-block: 56px 0;
	}

	.vxl-footer-demat .vexel-footer__top {
		min-block-size: 0;
		flex-direction: column;
		gap: 48px;
		/* En columna, el `flex-start` heredado encogía cada bloque a su
		 * contenido y dejaba la parrilla de enlaces en 324px, obligándola a
		 * apilarse aun sobrando sitio. */
		align-items: stretch;
	}

	.vxl-footer__brand {
		max-inline-size: 100%;
	}

	.vxl-footer__cols {
		gap: 40px;
		inline-size: 100%;
	}

	.vxl-footer__col {
		/* Los 180px fijos impedían encoger. Con `flex: 1 1 180px` las dos
		 * listas siguen una al lado de la otra mientras quepan (tableta) y
		 * se apilan solas cuando no (móvil). */
		min-inline-size: 0;
		flex: 1 1 180px;
	}

	.vxl-footer-demat .vexel-footer__bottom {
		min-block-size: 0;
		padding-block: 24px;
	}

	.vxl-footer__legal {
		gap: 0 24px;
	}

	/* Zona de pulsación. En escritorio los enlaces del pie son líneas de 21px
	 * —lo que marca la maqueta— pero en táctil eso es un blanco imposible.
	 * Se les da 40px de alto y se quita el hueco, que ya lo aporta la propia
	 * caja del enlace. */
	.vxl-footer__col {
		gap: 0;
	}

	.vxl-footer__col p a,
	.vxl-footer__legal p a {
		display: flex;
		align-items: center;
		min-block-size: 40px;
	}
}

@media (max-width: 599.98px) {
	/* Ya no caben legales y copyright en la misma línea */
	.vxl-footer-demat .vexel-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* CTA del header: sin margen heredado de wp-block-buttons */
.vxl-header-cta {
	margin: 0;
}

/* -----------------------------------------------------------------------
 * Ritmo vertical de las secciones — la maqueta usa 80px entre bloques
 * ----------------------------------------------------------------------- */

.wp-block-group.is-vexel-section {
	padding-block: var(--wp--preset--spacing--70);
}

/* Franja de marcas y de cita previa: fondo suave, centrado */
.vxl-band {
	padding-block: 56px;
	text-align: center;
}

.vxl-band--soft { background: var(--demat-gris-1); }
.vxl-band--dark { background: var(--demat-navy); color: #FFFFFF; }

.vxl-band__label {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--demat-gris-3);
	margin-block-end: 24px;
}

/* -----------------------------------------------------------------------
 * Ritmo vertical entre secciones
 *
 * WordPress separa los bloques de primer nivel con un hueco uniforme
 * (--wp--style--block-gap, 24px por defecto). La maqueta no funciona así:
 * las bandas de color van pegadas entre sí y solo hay aire donde el diseño
 * lo pide. Se anula el hueco automático y cada sección declara el suyo
 * desde el editor (Ajustes → Dimensiones → Margen), que es lo que hace el
 * importador en la portada.
 * ----------------------------------------------------------------------- */

.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* El mismo hueco aparece un nivel más arriba, entre header, main y footer:
 * en la maqueta el hero arranca pegado al header y el footer al showroom.
 *
 * Y también dentro de <main>, entre bloques hermanos: en las plantillas que
 * componen algo antes del contenido (single-proyecto pinta la entradilla a
 * partir del título y el extracto), el propio contenedor del contenido
 * arrastraba 24px. Cada sección declara su separación por su cuenta. */
.wp-site-blocks > *,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* El contenido arranca justo bajo el header, sin hueco */
.wp-block-post-content > :first-child {
	margin-block-start: 0;
}

/* -----------------------------------------------------------------------
 * Secciones de la Home compuestas con bloques nativos
 *
 * El contenido son bloques core (titular, párrafo, imagen, botón) para que
 * siga siendo editable; la retícula la fija este CSS a partir de las medidas
 * de la maqueta. Las proporciones se expresan en % sobre 1440 para que la
 * composición aguante al reducir la ventana.
 * ----------------------------------------------------------------------- */

/* --- Espacio profesional (Figma Frame 338, 1440x888, fondo #0F1822) ------
 * Retícula superior: 1104 de ancho útil = 249 + 224 (hueco) + 631
 * Después, imagen a sangre de 456px de alto y CTA al gutter. */

.vxl-profesional {
	background: var(--demat-navy);
	color: #FFFFFF;
	padding-block: 80px;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.vxl-profesional__top {
	padding-inline: var(--demat-gutter);
	/* Frame 346 de la maqueta mide 112px de alto. Se fija como mínimo (no como
	 * alto fijo) para que el bloque siga creciendo si el cliente alarga el
	 * texto desde el editor. */
	min-block-size: 112px;
	display: grid;
	/* 249:631 es la proporción exacta de la maqueta. El mínimo de 16rem es
	 * necesario porque en Figma la columna está ajustada al texto al píxel
	 * («Un espacio para» mide 249px justos): cualquier redondeo a la baja
	 * —la barra de desplazamiento ya se come 15px— parte el titular en tres
	 * líneas en lugar de dos. */
	grid-template-columns: minmax(16rem, 249fr) 631fr;
	column-gap: 20.29%; /* 224 / 1104 */
	align-items: start;
}

.vxl-profesional__top > * { margin: 0; }

.vxl-profesional .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.64);
}

.vxl-profesional h2,
.vxl-profesional h3 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
	color: #FFFFFF;
}

.vxl-profesional__intro p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

.vxl-profesional__media {
	margin: 0;
}

.vxl-profesional__media img {
	inline-size: 100%;
	block-size: 456px;
	object-fit: cover;
	display: block;
}

.vxl-profesional__cta {
	padding-inline: var(--demat-gutter);
	/* La maqueta separa el CTA 32px de la imagen, no los 80 del bloque */
	margin-block-start: calc(32px - 80px);
}

/* El enlace de flecha viaja dentro de un párrafo para seguir siendo
 * editable como bloque core; el párrafo no debe aportar márgenes. */
.vxl-arrow-link { margin: 0; }

/* El enlace de flecha sobre fondo oscuro va en coral, como en la maqueta */
.vxl-profesional .vxl-btn-arrow,
.vxl-showroom .vxl-btn-arrow {
	color: var(--demat-coral);
}

/* --- Banner de las subpáginas de Espacios -------------------------------
 * Imagen a sangre de 400px pegada al header, sin hueco. */

.wp-block-image.vxl-espacio-banner {
	margin: 0;
}

/* La clase se repite junto a .alignfull para superar la regla del núcleo
 * `.wp-block-image.alignfull img { height: auto }`, que si no deja la imagen
 * a su proporción natural (529px de alto en pantalla ancha) en lugar de los
 * 400 de la maqueta. */
.wp-block-image.alignfull.vxl-espacio-banner img,
.wp-block-image.vxl-espacio-banner img {
	inline-size: 100%;
	block-size: 400px;
	object-fit: cover;
	display: block;
	max-inline-size: none;
}

@media (max-width: 781px) {
	.wp-block-image.alignfull.vxl-espacio-banner img,
	.wp-block-image.vxl-espacio-banner img {
		block-size: 240px;
	}
}

/* --- Sobre DeMÁT (Figma Frame 342, 1440x549, fondo blanco) --------------
 * 168 (gutter) + 368 (texto) + 80 (hueco) + 824 (imagen a sangre) = 1440 */

.vxl-sobre {
	background: var(--wp--preset--color--bg);
	display: flex;
	align-items: center;
	gap: 80px;
	padding-inline-start: var(--demat-gutter);
	min-block-size: 549px;
}

.vxl-sobre__text {
	/* Columna de medida fija, como en la maqueta */
	flex: 0 0 368px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.vxl-sobre__text > * { margin: 0; }

.vxl-sobre__text h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
}

.vxl-sobre__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vxl-sobre__body p { margin: 0; }

/* El destacado de «Empresa con vocación de excelencia.» viaja como <strong>
 * en el contenido, no como regla de posición: así el cliente puede moverlo,
 * quitarlo o aplicarlo a otro párrafo desde el editor. */

.vxl-sobre__media {
	margin: 0;
	/* Rellena el espacio restante hasta el borde derecho.
	 *
	 * No es un porcentaje: en la maqueta la retícula es 168 (gutter) + 368
	 * (texto) + 80 (hueco) + el resto para la foto. Con un ancho porcentual
	 * la imagen dejaba un margen muerto a la derecha en cuanto la ventana
	 * superaba los 1440. */
	flex: 1 1 auto;
	min-inline-size: 0;
	/* Alto explícito: sin él la imagen (vertical) se despliega a su
	 * proporción natural y dispara la sección a más del doble de alto. */
	block-size: 549px;
}

.vxl-sobre__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* --- Visítanos (Figma #Visitanos, 1440x1848) ----------------------------
 * Entradilla, formulario y banda de contacto sobre gris. */

.vxl-vis-intro {
	padding-inline: var(--demat-gutter);
}

.vxl-vis-intro .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vxl-vis-intro h1 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
	max-inline-size: 717px;
}

.vxl-vis-intro p:not(.vxl-eyebrow) {
	margin: 56px 0 0 0;
	max-inline-size: 624px;
	line-height: 1.5;
}

/* --- Banda de contacto --------------------------------------------------
 * 168 (gutter) + 320 (dónde estamos) + 128 (hueco) + 656 (teléfonos) */

.vxl-vis-datos {
	background: var(--wp--preset--color--bg-soft);
	padding-block: 80px;
	padding-inline: var(--demat-gutter);
	display: flex;
	gap: 128px;
	min-block-size: 360px;
}

.vxl-vis-datos__donde {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.vxl-vis-datos__donde > * { margin: 0; }

.vxl-vis-datos__donde h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
}

.vxl-vis-datos__direccion { line-height: 24px; }

/* Los tres bloques de teléfono se alinean con la base de la columna */
.vxl-vis-datos__contactos {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-self: flex-end;
}

.vxl-vis-datos__contacto { margin: 0; line-height: 24px; }
.vxl-vis-datos__contacto strong { display: block; font-weight: 500; }
/* El teléfono va en navy y el email en coral, como en la maqueta */
.vxl-vis-datos__contacto a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
}

.vxl-vis-datos__contacto a[href^="mailto:"] {
	color: var(--demat-coral);
	text-decoration: none;
}

.vxl-vis-datos__contacto a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	.vxl-vis-datos { gap: 56px; }

	/* A 1024 las tres columnas se quedaban en 135-155px, justo al límite de
	 * «direccion@demat.es». Con dos caben holgadas. */
	.vxl-vis-datos__contactos {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 32px;
	}
}

@media (max-width: 781px) {
	.vxl-vis-datos {
		flex-direction: column;
		gap: 40px;
		padding-block: 48px;
		min-block-size: 0;
	}
	.vxl-vis-datos__donde { flex: 1 1 auto; }
	.vxl-vis-datos__contactos {
		grid-template-columns: 1fr;
		gap: 24px;
		align-self: stretch;
	}
	.vxl-vis-intro p:not(.vxl-eyebrow) { margin-block-start: 32px; }
}

/* --- Sobre DeMÁT (Figma #Grupo_demat, 1440x3560) ------------------------
 * Entradilla, dos filas de imagen + texto y una parrilla de equipo. */

/* Las tres piezas del cuerpo se separan 80px */
.vxl-sd > * + * {
	margin-block-start: 80px;
}

.vxl-sd-intro {
	padding-inline: var(--demat-gutter);
}

.vxl-sd-intro .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vxl-sd-intro h1 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
	max-inline-size: 717px;
}

/* --- Fila con logotipos (Sobre DeMÁT, sección 2) ------------------------
 * Texto de 398px anclado al gutter, imagen rellenando hasta el borde
 * derecho. En la columna: párrafo, los dos logotipos y el enlace. */

.vxl-sd-split {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	padding-inline-start: var(--demat-gutter);
	min-block-size: 528px;
}

.vxl-sd-split__text {
	flex: 0 0 398px;
	display: flex;
	flex-direction: column;
	/* La maqueta separa 48px los tres elementos de la columna */
	gap: 48px;
	padding-block-start: 40px;
}

.vxl-sd-split__text > * { margin: 0; }

.vxl-sd-split__pie {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.vxl-sd-split__pie > * { margin: 0; }

.vxl-sd-split__logos {
	display: flex;
	align-items: center;
	gap: 48px;
}

.vxl-sd-split__logos .wp-block-image { margin: 0; }

/* Los dos logotipos van en SVG: se declaran sus medidas de la maqueta para
 * que no dependan del viewBox que traiga cada archivo. */
.vxl-sd-split__logos img {
	block-size: auto;
	max-inline-size: none;
}

/* Se fija el alto y no el ancho: así ambos logotipos quedan exactamente a la
 * medida de la maqueta sin depender de cómo redondee el viewBox cada SVG. */
.vxl-sd-split__logos .vxl-logo-construccion img { block-size: 77px; inline-size: auto; }
.vxl-sd-split__logos .vxl-logo-studio img       { block-size: 74px; inline-size: auto; }

.vxl-sd-split__media {
	margin: 0;
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 528px;
}

.vxl-sd-split__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.vxl-sd-split {
		flex-direction: column;
		gap: 32px;
		padding-inline: 0;
		min-block-size: 0;
	}
	.vxl-sd-split__text {
		flex: 1 1 auto;
		/* Sin esto el `min-width: auto` de un elemento flex mantenía la
		 * columna en los 454px que pedían los dos logotipos a su altura de
		 * escritorio, y la página desbordaba 94px a 375. */
		min-inline-size: 0;
		padding-inline: var(--demat-gutter);
		padding-block-start: 0;
		gap: 32px;
	}
	.vxl-sd-split__logos {
		gap: 24px;
		flex-wrap: wrap;
	}
	.vxl-sd-split__logos img { max-inline-size: 100%; }
	.vxl-sd-split__logos .vxl-logo-construccion img { block-size: 48px; }
	.vxl-sd-split__logos .vxl-logo-studio img { block-size: 46px; }
	.vxl-sd-split__media { block-size: 320px; }
}

/* --- Parrilla de equipo -------------------------------------------------
 * Dos filas de cuatro fichas de 208px repartidas a lo ancho del gutter.
 * Cada ficha: retrato 208x256, 16px de hueco y el bloque de nombre y cargo. */

.vxl-equipo {
	padding-inline: var(--demat-gutter);
}

.vxl-equipo__cabecera {
	/* El bloque de texto va centrado y mide 752px en la maqueta */
	max-inline-size: 752px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-block-end: 56px;
}

.vxl-equipo__cabecera > * { margin: 0; }

.vxl-equipo__cabecera h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
}

.vxl-equipo__parrilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 208px));
	justify-content: space-between;
	row-gap: 56px;
	column-gap: 24px;
}

.vxl-equipo__ficha {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Los grupos de WordPress traen su disposición de flujo, que añade 24px de
 * margen a cada hijo a partir del segundo. Dentro de la parrilla la
 * separación la marca el hueco del flex, así que esos márgenes sobran y
 * descuadran la altura de cada ficha. */
.vxl-equipo .vxl-equipo__ficha > *,
.vxl-equipo .vxl-equipo__parrilla > *,
.vxl-equipo .vxl-equipo__datos > * {
	margin-block: 0;
}

.vxl-equipo__ficha .wp-block-image { margin: 0; }

.vxl-equipo__ficha img {
	inline-size: 100%;
	block-size: 256px;
	object-fit: cover;
	display: block;
}

.vxl-equipo__datos {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vxl-equipo__datos > * { margin: 0; line-height: 24px; }

.vxl-equipo__nombre { font-weight: 500; }
.vxl-equipo__cargo  { color: var(--wp--preset--color--text-muted); }

@media (max-width: 1024px) {
	.vxl-equipo__parrilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
	}
	/* Proporción de la maqueta (208x256) en lugar de un alto fijo: así el
	 * recorte del retrato es el mismo a cualquier ancho de columna. */
	.vxl-equipo__ficha img { block-size: auto; aspect-ratio: 208 / 256; }
}

@media (max-width: 781px) {
	.vxl-equipo__parrilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
		column-gap: 16px;
	}
	.vxl-equipo__ficha img { block-size: auto; aspect-ratio: 208 / 256; }
	.vxl-equipo__cabecera { margin-block-end: 32px; }
}

/* --- Espacio profesional (Figma #Espacio_profesional, 1440x4080) --------
 * Página oscura: el fondo de todo el bloque de contenido es navy, y solo el
 * cierre «Visítanos» vuelve a gris claro. */

.vxl-ep {
	background: var(--demat-navy);
	color: #FFFFFF;
	/* Los 120px de separación con el header y los 80 con el cierre van como
	 * relleno, no como margen: así el navy llega hasta el header. Se usa el
	 * mismo preajuste fluido que el resto de entradillas para que a 1024 esta
	 * página no se quede en 120 mientras las demás bajan a 85. */
	padding-block: var(--wp--preset--spacing--seccion, 120px) 80px;
}

.vxl-ep > * + * {
	margin-block-start: 120px;
}

.vxl-ep__intro {
	padding-inline: var(--demat-gutter);
}

.vxl-ep__intro .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Gris claro sobre el navy, como en la maqueta */
	color: var(--wp--preset--color--border);
}

.vxl-ep__intro h1 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
	color: #FFFFFF;
	max-inline-size: 717px;
}

.vxl-ep__intro p:not(.vxl-eyebrow) {
	margin: 56px 0 0 0;
	max-inline-size: 624px;
	line-height: 1.5;
	color: #FFFFFF;
}

/* Las cuatro piezas del cuerpo se separan 80px */
.vxl-ep__cuerpo > * + * {
	margin-block-start: 80px;
}

/* Las filas de imagen + texto heredan el bloque de Espacios, que está pensado
 * para fondo claro: aquí hay que devolverles el color sobre oscuro. */
.vxl-ep .vexel-espacios-rows__title,
.vxl-ep .vexel-espacios-rows__body {
	color: #FFFFFF;
}

@media (max-width: 781px) {
	.vxl-ep {
		/* Solo el cierre: la separación con el header ya la resuelve el
		 * preajuste fluido, y fijarla aquí en 48 la descuadraba respecto a
		 * las demás páginas en la franja de tableta. */
		padding-block-end: 48px;
	}
	.vxl-ep > * + * {
		margin-block-start: 48px;
	}
	.vxl-ep__cuerpo > * + * {
		margin-block-start: 48px;
	}
	.vxl-ep__intro p:not(.vxl-eyebrow) {
		margin-block-start: 32px;
	}
}

/* --- Historia ampliada (Figma #Historia_ampliada, 1440x5400) ------------
 * Página de detalle de un proyecto. Cuatro piezas propias que no se repiten
 * en el resto del sitio; las filas de imagen + texto reutilizan el bloque
 * vexel/espacios-rows. */

/* Entradilla: antetítulo, titular de 48px y párrafo de 624 */
.vxl-ha-intro {
	padding-inline: var(--demat-gutter);
}

.vxl-ha-intro .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 300;
	/* 24px fijos: con el 1.5 heredado del cuerpo la línea queda en 21 y el
	 * bloque se descuadra 3px respecto a la maqueta. */
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vxl-ha-intro h1 {
	margin: 0;
	font-size: var(--demat-fs-4xl, var(--wp--preset--font-size--4xl, 3rem));
	font-weight: 400; /* Lexend Regular, como en la maqueta */
	line-height: 1.1667;
}

/* El bloque de extracto trae su propio margen inferior, que se escapa del
 * grupo y suma 24px al hueco con el cuerpo. */
.vxl-ha-intro .wp-block-post-excerpt {
	margin: 0;
}

.vxl-ha-intro p:not(.vxl-eyebrow) {
	margin: 56px 0 0 0;
	max-inline-size: 624px;
	line-height: 1.5;
	/* En Figma este párrafo ocupa 6 líneas (144px) y el navegador lo resuelve
	 * en 5: Lexend mide algo más estrecho al renderizar que al maquetar. Se
	 * reserva el alto de la maqueta para que el ritmo vertical de la página
	 * no dependa de esa diferencia de métricas; el texto sigue fluyendo. */
	min-block-size: 144px;
}

/* Imagen ancha dentro del gutter (1104x664), sin sangrar */
.wp-block-image.vxl-ha-figura {
	margin: 0;
	padding-inline: var(--demat-gutter);
}

.wp-block-image.vxl-ha-figura img {
	inline-size: 100%;
	block-size: 664px;
	object-fit: cover;
	display: block;
}

/* Parrilla de seis fotos en dos filas de tres */
.vxl-ha-grid {
	padding-inline: var(--demat-gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.vxl-ha-grid .wp-block-image {
	margin: 0;
}

.vxl-ha-grid img {
	inline-size: 100%;
	block-size: 360px;
	object-fit: cover;
	display: block;
}

/* Bloque de texto suelto, alineado a la derecha del gutter (656 de ancho) */
.vxl-ha-texto {
	padding-inline: var(--demat-gutter);
	display: flex;
	justify-content: flex-end;
}

.vxl-ha-texto__inner {
	max-inline-size: 656px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 40px;
}

.vxl-ha-texto__inner > * { margin: 0; }

.vxl-ha-texto__inner h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
}

/* Imagen final a sangre, 664 de alto */
.wp-block-image.alignfull.vxl-ha-full img,
.wp-block-image.vxl-ha-full img {
	inline-size: 100%;
	block-size: 664px;
	object-fit: cover;
	display: block;
	max-inline-size: none;
}

.wp-block-image.vxl-ha-full { margin: 0; }

/* El hueco de 80px entre las seis secciones del cuerpo.
 *
 * Con `> * + *` no basta: el universal no suma especificidad, así que la regla
 * valdría una sola clase y la pisaría `.wp-block-image.vxl-ha-full` (dos),
 * dejando la última sección pegada a la anterior. `:not(:first-child)` sí
 * aporta la suya, con lo que empata a dos clases y gana por ir después. */
.vxl-ha > *:not(:first-child) {
	margin-block-start: 80px;
}

@media (max-width: 1024px) {
	.wp-block-image.vxl-ha-figura img,
	.wp-block-image.alignfull.vxl-ha-full img,
	.wp-block-image.vxl-ha-full img { block-size: 460px; }
	.vxl-ha-grid img { block-size: 260px; }
}

@media (max-width: 781px) {
	.wp-block-image.vxl-ha-figura img,
	.wp-block-image.alignfull.vxl-ha-full img,
	.wp-block-image.vxl-ha-full img { block-size: 280px; }

	/* Con tres columnas las fotos quedarían en miniaturas ilegibles */
	.vxl-ha-grid { grid-template-columns: repeat(2, 1fr); }
	.vxl-ha-grid img { block-size: 180px; }

	.vxl-ha-texto { justify-content: flex-start; }
	.vxl-ha-texto__inner { padding-block: 24px; }
	.vxl-ha-intro p:not(.vxl-eyebrow) { margin-block-start: 32px; }
}

/* --- Bloque «Visítanos» (Figma componente visitanos, 1440x544) ----------
 * Cierre de la página de Historias. Retícula:
 *   168 (gutter) + 400 (texto) + 56 (hueco) + el resto para la foto,
 * que sangra hasta el borde derecho. Mismo criterio que «Sobre DeMÁT»:
 * la columna de texto es fija y la imagen rellena, para que siga pegada al
 * borde por encima de 1440. */

.vxl-visitanos {
	display: flex;
	align-items: center;
	gap: 56px;
	padding-inline-start: var(--demat-gutter);
	min-block-size: 544px;
	/* Gris suave (#F8F8F8) como en la maqueta, no blanco: el fondo se ve
	 * tras la columna de texto, a la izquierda de la fotografía. */
	background: var(--wp--preset--color--bg-soft);
}

.vxl-visitanos__text {
	flex: 0 0 400px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.vxl-visitanos__text > * { margin: 0; }

.vxl-visitanos__text h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
}

.vxl-visitanos__media {
	margin: 0;
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 544px;
}

.vxl-visitanos__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.vxl-visitanos {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding-inline: 0;
		min-block-size: 0;
		/* En escritorio el aire sobre el titular lo daba el centrado vertical
		 * dentro de los 544px de la banda (140px reales). Al pasar a columna
		 * se anulan los dos y el texto quedaba pegado al borde del gris; el
		 * relleno lo repone. Abajo no hace falta: la foto va a sangre. */
		padding-block-start: var(--wp--preset--spacing--seccion, 48px);
	}

	.vxl-visitanos__text {
		flex: 1 1 auto;
		padding-inline: var(--demat-gutter);
	}

	.vxl-visitanos__media {
		block-size: 320px;
	}
}

/* --- Visita nuestro showroom (Figma Frame 341, 1440x328) ----------------
 * Banda oscura con fotografía de fondo muy velada.
 * Retícula: 1104 útiles = 440 + 224 (hueco) + 440 */

/* Es un bloque «Portada» (core/cover): la imagen de fondo y el velo los
 * gestiona WordPress, de modo que el cliente puede reemplazar la foto desde
 * el editor con el control «Reemplazar» del propio bloque. Aquí solo se
 * ajustan el gutter y la retícula interior. */
.vxl-showroom {
	color: #FFFFFF;
	padding-inline: var(--demat-gutter) !important;
	min-block-size: 328px;
}

.vxl-showroom .wp-block-cover__inner-container {
	inline-size: 100%;
}

.vxl-showroom__grid {
	display: grid;
	grid-template-columns: 440fr 440fr;
	column-gap: 20.29%; /* 224 / 1104 */
	align-items: start;
	/* Frame 346 de la maqueta: 168px */
	min-block-size: 168px;
}

.vxl-showroom__grid > * { margin: 0; }

.vxl-showroom h2 {
	margin: 0 0 32px 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 1.25;
	color: #FFFFFF;
}

.vxl-showroom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Responsive común de las tres secciones ----------------------------- */

@media (max-width: 1024px) {
	.vxl-profesional__top,
	.vxl-showroom__grid {
		column-gap: 10%;
	}

	.vxl-sobre { min-block-size: 0; }
	.vxl-sobre__media img { min-block-size: 420px; }
	.vxl-profesional__media img { block-size: 340px; }
}

@media (max-width: 781px) {
	.vxl-profesional,
	.vxl-showroom {
		padding-block: 48px;
		gap: 40px;
	}

	.vxl-profesional__top,
	.vxl-showroom__grid {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.vxl-profesional__cta {
		margin-block-start: calc(24px - 40px);
	}

	.vxl-sobre {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding-inline: 0;
		padding-block: 48px;
	}

	.vxl-sobre__text {
		flex: 1 1 auto;
		padding-inline: var(--demat-gutter);
	}

	.vxl-sobre__media {
		inline-size: 100%;
	}

	.vxl-sobre__media img { min-block-size: 320px; }
	.vxl-profesional__media img { block-size: 240px; }
}

/* --- Error 404 (Figma #Error404, 1440x1136) -----------------------------
 * Una sola columna sobre el gutter, sin imagen. Retícula de la maqueta:
 *   120  bajo el header (va en el margen del bloque, no aquí)
 *    24  antetítulo + 8 + 40  titular            = 72
 *    56  hasta el mensaje
 *    80  mensaje (dos líneas de 40)
 *    32  hasta el párrafo
 *    48  párrafo (dos líneas de 24)
 *    80  hasta el enlace de vuelta
 *    48  enlace (24 de línea + 12 arriba y abajo)
 *    80  hasta el pie
 * ----------------------------------------------------------------------- */

.vxl-404 {
	padding-inline: var(--demat-gutter);
	padding-block-end: 80px;
}

.vxl-404 .vxl-eyebrow {
	margin: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vxl-404 h1,
.vxl-404 h2 {
	margin: 0;
	font-size: var(--demat-fs-2xl, var(--wp--preset--font-size--2xl, 2rem));
	font-weight: 300;
	line-height: 40px;
}

.vxl-404 h2 {
	margin-block-start: 56px;
	/* 600 en vez de los 583 que ocupa la primera línea: deja holgura para las
	 * métricas del navegador pero corta igualmente tras «busca». */
	max-inline-size: 600px;
}

.vxl-404 p:not(.vxl-eyebrow):not(.vxl-arrow-link) {
	margin: 32px 0 0 0;
	max-inline-size: 600px;
	line-height: 24px;
}

/* Gana a la regla general `.vxl-arrow-link { margin: 0 }` */
.vxl-404 .vxl-arrow-link {
	margin: 80px 0 0 0;
}

@media (max-width: 781px) {
	.vxl-404 {
		padding-block-end: 56px;
	}

	.vxl-404 h1,
	.vxl-404 h2 {
		font-size: var(--wp--preset--font-size--xl, 1.5rem);
		line-height: 32px;
	}

	.vxl-404 h2 { margin-block-start: 32px; }
	.vxl-404 .vxl-arrow-link { margin-block-start: 40px; }
}

/* --- Páginas legales (Figma #Aviso_legal, #Política_privacidad, ---------
 *     #Política_cookies) — las tres comparten retícula:
 *       antetítulo sobre el gutter (168) y cuerpo en columna de 880 centrada
 *       (la maqueta lo resuelve con 280 de padding a cada lado de 1440)
 *       48 entre apartados, 16 entre el encabezado y el texto y entre párrafos
 * ----------------------------------------------------------------------- */

.vxl-legal {
	padding-block-end: 80px;
}

.vxl-legal .vxl-eyebrow {
	margin: 0;
	padding-inline: var(--demat-gutter);
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vxl-legal__cuerpo {
	margin-block-start: 80px;
	margin-inline: auto;
	/* El ancho máximo incluye el gutter, de modo que a 1440 la columna útil
	 * mide los 880 de la maqueta (1216 = 880 + 2×168) y por debajo se encoge
	 * sin llegar a desbordar. */
	box-sizing: border-box;
	max-inline-size: calc(880px + 2 * var(--demat-gutter));
	padding-inline: var(--demat-gutter);
}

.vxl-legal__seccion + .vxl-legal__seccion {
	margin-block-start: 48px;
}

.vxl-legal h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 1.5rem); /* 24 */
	font-weight: 300;
	line-height: 30px;
	color: var(--wp--preset--color--navy);
}

/* `> * + *` no sirve aquí: el selector universal no suma especificidad y
 * `.vxl-legal p { margin: 0 }` le ganaba, dejando los apartados sin aire.
 * `:not(:first-child)` sí puntúa como clase y se impone. */
.vxl-legal__seccion > :not(:first-child) {
	margin-block-start: 16px;
}

.vxl-legal p,
.vxl-legal ul,
.vxl-legal ol {
	margin: 0;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	font-weight: 300;
	line-height: 24px;
	color: var(--wp--preset--color--navy);
}

.vxl-legal ul,
.vxl-legal ol {
	padding-inline-start: 24px;
}

.vxl-legal li + li {
	margin-block-start: 16px;
}

/* Los enlaces del texto legal van en coral y subrayados, para distinguirlos
 * de la letra corrida sin depender solo del color. */
.vxl-legal a {
	color: var(--demat-coral);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* Las URLs largas de la política de cookies no deben desbordar la columna */
	overflow-wrap: anywhere;
}

.vxl-legal a:hover {
	color: var(--wp--preset--color--primary-hover);
}

@media (max-width: 781px) {
	.vxl-legal {
		padding-block-end: 56px;
	}

	.vxl-legal__cuerpo {
		margin-block-start: 40px;
	}

	.vxl-legal__seccion + .vxl-legal__seccion {
		margin-block-start: 40px;
	}
}

/* -----------------------------------------------------------------------
 * Utilidad full-bleed — para las filas que rompen el gutter (carrusel, hero)
 * ----------------------------------------------------------------------- */

.vxl-full-bleed {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}