/*
 * Cimentia — estilos base del tema.
 * El CSS específico de cada bloque vive en wp-content/blocks/<slug>/style.css
 * y lo encola el plugin Cimentia Blocks.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-body);
	color: var(--cmt-color-text);
	background: var(--cmt-color-bg);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* El core de WP pone display:table en .wp-block-image.aligncenter (shrink-wrap)
   pero solo da margin auto a la variante anidada .wp-block-image .aligncenter,
   no al figure con ambas clases juntas. Sin margin auto en el propio figure,
   el shrink-wrap queda pegado a la izquierda. */
.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

a {
	color: inherit;
}

.cmt-container {
	width: 100%;
	max-width: var(--cmt-container-max);
	margin-inline: auto;
	padding-inline: var(--cmt-container-pad);
}

.cmt-single-proyecto__content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
	padding-inline: var(--cmt-container-pad);
}

.cmt-single-proyecto__back {
	display: inline-block;
	margin-top: var(--cmt-space-lg);
	margin-bottom: var(--cmt-space-lg);
	font-family: var(--cmt-font-mono);
	font-size: var(--cmt-fs-small);
	text-transform: uppercase;
	text-decoration: underline;
	color: #79a8fe; /* mismo azul que los badges de cmt-proyecto-cabecera__term */
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Site header (overlay sobre el hero) ---- */
.cmt-site-header {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 10;
	width: 100%;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.cmt-site-header__inner {
	position: relative; /* ancla del dropdown móvil (.cmt-site-header__nav absoluto) */
	width: 100%;
	max-width: calc(1320px + var(--cmt-container-pad) * 2);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cmt-space-lg);
	padding: var(--cmt-space-lg) var(--cmt-container-pad) var(--cmt-space-md);
}

/* Botón hamburguesa: oculto en escritorio, visible en móvil. */
.cmt-site-header__toggle {
	display: none;
}

.cmt-site-header__brand {
	display: inline-flex;
	flex-shrink: 0;
}

.cmt-site-header__logo {
	width: 240px;
	height: auto;
	transition: filter 0.2s ease;
}

.cmt-site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--cmt-space-lg);
}

.cmt-site-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--cmt-space-sm);
}

.cmt-site-header__menu > li {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--cmt-space-sm);
}

.cmt-site-header__menu > li:not(:last-child)::after {
	content: "/";
	font-family: var(--cmt-font-mono);
	font-size: var(--cmt-fs-small);
	color: var(--cmt-color-text-invert);
}

.cmt-site-header__menu a {
	font-family: var(--cmt-font-mono);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-body);
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	color: var(--cmt-color-text-invert);
	transition: color 0.2s ease;
}

.cmt-site-header__menu a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cmt-menu-item-head {
	display: contents;
}

.cmt-submenu-toggle {
	display: none;
}

.cmt-site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--cmt-space-xs);
	flex-shrink: 0;
	background: var(--cmt-color-light);
	color: var(--cmt-color-text);
	border-radius: var(--cmt-radius-md);
	padding: var(--cmt-space-xs) var(--cmt-space-sm);
	font-family: var(--cmt-font-mono);
	font-size: var(--cmt-fs-small);
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cmt-site-header__cta-icon {
	width: 19px;
	height: 18px;
}

/* Header sólido (páginas que NO son la home): fondo blanco, borde inferior
   negro 1px, en flujo normal (no overlay) y con contenido en oscuro. */
.cmt-site-header--solid {
	position: static;
	background: var(--cmt-color-light);
	border-bottom: 1px solid var(--cmt-color-dark);
}

.cmt-site-header--solid .cmt-site-header__logo,
.cmt-site-header--sticky .cmt-site-header__logo {
	filter: brightness(0); /* el logo.svg es blanco; lo pasamos a negro */
}

.cmt-site-header--solid .cmt-site-header__menu > li > a,
.cmt-site-header--solid .cmt-site-header__menu > li > .cmt-menu-item-head > a,
.cmt-site-header--solid .cmt-site-header__menu > li:not(:last-child)::after,
.cmt-site-header--sticky .cmt-site-header__menu > li > a,
.cmt-site-header--sticky .cmt-site-header__menu > li > .cmt-menu-item-head > a,
.cmt-site-header--sticky .cmt-site-header__menu > li:not(:last-child)::after {
	color: var(--cmt-color-primary);
}

.cmt-site-header--solid .cmt-site-header__cta,
.cmt-site-header--sticky .cmt-site-header__cta {
	background: var(--cmt-color-primary);
	color: var(--cmt-color-text-invert);
}

.cmt-site-header--solid .cmt-site-header__cta-icon,
.cmt-site-header--sticky .cmt-site-header__cta-icon {
	filter: brightness(0) invert(1);
}

/* ---- Header sticky (fijo al hacer scroll) ---- */
.cmt-site-header--sticky {
	position: fixed;
	background: var(--cmt-color-light);
	box-shadow: 0 4px 16px rgba(11, 18, 34, 0.12);
	border-bottom: 1px solid var(--cmt-color-dark);
}

/* ---- Submenú desplegable (escritorio) ---- */
@media (min-width: 1200px) {
	.cmt-site-header__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 240px;
		margin: var(--cmt-space-xs) 0 0;
		padding: var(--cmt-space-xs);
		list-style: none;
		background: var(--cmt-color-dark);
		border-radius: var(--cmt-radius-md);
		box-shadow: 0 12px 24px rgba(11, 18, 34, 0.25);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(4px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	}

	.cmt-site-header__menu .sub-menu li {
		display: block;
		width: 100%;
	}

	.cmt-site-header__menu .sub-menu a {
		display: block;
		padding: var(--cmt-space-xs) var(--cmt-space-sm);
		border-radius: var(--cmt-radius-sm);
		color: var(--cmt-color-text-invert);
		white-space: nowrap;
	}

	.cmt-site-header__menu .sub-menu a:hover {
		color: var(--cmt-color-accent);
	}

	.cmt-site-header__menu > li:hover > .sub-menu,
	.cmt-site-header__menu > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}

/* En páginas que NO son la home, el contenido arranca con el mismo padding
   superior que la home (el padding-top del header). En la home el header es
   overlay y el hero gestiona su propio espacio, así que no se aplica. */
body:not(.home) .cmt-site-main {
	padding-top: var(--cmt-space-md);
}

body.cmt-header-sticky:not(.home) .cmt-site-main {
	padding-top: calc(var(--cmt-space-md) + var(--cmt-header-height, 0px));
}

@media (max-width: 1199px) {
	/* ---- Botón hamburguesa ---- */
	.cmt-site-header__toggle {
		position: relative;
		z-index: 30; /* por encima del overlay a pantalla completa */
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 10px;
		margin: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.cmt-site-header__toggle-bar {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: var(--cmt-color-text-invert); /* header overlay (home): barras blancas */
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	/* Header sólido o sticky: barras oscuras sobre fondo blanco. */
	.cmt-site-header--solid .cmt-site-header__toggle-bar,
	.cmt-site-header--sticky .cmt-site-header__toggle-bar {
		background: var(--cmt-color-primary);
	}

	/* Overlay abierto: barras siempre blancas sobre el fondo oscuro. */
	.cmt-site-header__toggle[aria-expanded="true"] .cmt-site-header__toggle-bar,
	.cmt-site-header--solid .cmt-site-header__toggle[aria-expanded="true"] .cmt-site-header__toggle-bar {
		background: var(--cmt-color-text-invert);
	}

	/* Animación a "X" al abrir. */
	.cmt-site-header__toggle[aria-expanded="true"] .cmt-site-header__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.cmt-site-header__toggle[aria-expanded="true"] .cmt-site-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.cmt-site-header__toggle[aria-expanded="true"] .cmt-site-header__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ---- Menú abierto: overlay a pantalla completa (fondo export menu-movil) ---- */
	.cmt-site-header__nav {
		position: fixed;
		inset: 0;
		z-index: 20;
		display: none; /* cerrado por defecto; JS añade .is-open */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--cmt-space-md);
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: var(--cmt-space-xl) var(--cmt-container-pad);
		background: #0b1222;
	}

	.cmt-site-header__nav.is-open {
		display: flex;
	}

	.cmt-site-header__menu {
		flex-direction: column;
		align-items: center;
		gap: var(--cmt-space-md);
		width: 100%;
	}

	.cmt-site-header__menu li {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 8px;
	}

	/* Sin separador "/" en el overlay vertical. */
	.cmt-site-header__menu > li:not(:last-child)::after {
		content: none;
	}

	/* Cabecera del item con hijos: enlace + flecha de despliegue, en fila. */
	.cmt-menu-item-head {
		display: flex;
		align-items: center;
		gap: var(--cmt-space-xs);
	}

	.cmt-submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		color: #fff;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.cmt-submenu-toggle-icon {
		display: block;
		width: 8px;
		height: 8px;
		border: solid currentColor;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.cmt-submenu-toggle[aria-expanded="true"] .cmt-submenu-toggle-icon {
		transform: rotate(-135deg);
	}

	/* Submenú colapsado por defecto; se despliega al tocar la flecha. */
	.cmt-site-header__menu .sub-menu {
		display: none;
		flex-direction: column;
		align-items: center;
		gap: var(--cmt-space-xs);
		width: 100%;
		margin: var(--cmt-space-xs) 0 0;
		padding: 0;
		list-style: none;
	}

	.cmt-site-header__menu > li.is-submenu-open > .sub-menu {
		display: flex;
	}

	.cmt-site-header__menu .sub-menu li {
		padding: 0;
	}

	.cmt-site-header__nav .cmt-site-header__menu .sub-menu a,
	.cmt-site-header--solid .cmt-site-header__nav .cmt-site-header__menu .sub-menu a {
		font-size: var(--cmt-fs-lead);
	}

	/* Enlaces siempre blancos en el overlay (también en header --solid o --sticky). */
	.cmt-site-header__nav .cmt-site-header__menu a,
	.cmt-site-header--solid .cmt-site-header__nav .cmt-site-header__menu a,
	.cmt-site-header--sticky .cmt-site-header__nav .cmt-site-header__menu a {
		color: #fff;
		font-size: var(--cmt-fs-h3);
		line-height: 1.4;
	}

	/* CTA dentro del overlay. */
	.cmt-site-header__cta {
		margin-top: var(--cmt-space-md);
	}
}

/* Bloquea el scroll de fondo con el overlay abierto. */
body.cmt-nav-open {
	overflow: hidden;
}

/* ---- Site footer ---- */
.cmt-site-footer {
	width: 100%;
	background: var(--cmt-color-bg-dark);
	color: var(--cmt-color-text-invert);
	font-family: var(--cmt-font-base);
	padding-block: var(--cmt-space-lg);
}

.cmt-site-footer__inner {
	width: 100%;
	max-width: var(--cmt-container-max);
	margin-inline: auto;
	padding-inline: var(--cmt-container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-xl);
	box-sizing: border-box;
}

.cmt-site-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--cmt-space-xl);
	flex-wrap: wrap;
}

.cmt-site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-sm);
}

.cmt-site-footer__logo {
	display: block;
	width: 179px;
	max-width: 100%;
	color: var(--cmt-color-text-invert);
}

.cmt-site-footer__logo-svg,
.cmt-site-footer__logo-img {
	width: 100%;
	height: auto;
	display: block;
}

.cmt-site-footer__address {
	font-size: var(--cmt-fs-body);
	font-weight: var(--cmt-fw-light);
	line-height: 1.5;
	font-style: normal;
	max-width: 320px;
}

.cmt-site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cmt-site-footer__contact-link {
	font-size: var(--cmt-fs-body);
	font-weight: var(--cmt-fw-light);
	line-height: 1.5;
	color: var(--cmt-color-text-invert);
	text-decoration: none;
}

.cmt-site-footer__contact-link:hover {
	text-decoration: underline;
}

.cmt-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--cmt-space-md);
}

.cmt-site-footer__social-link {
	display: inline-flex;
	color: var(--cmt-color-text-invert);
	transition: opacity 0.2s ease;
}

.cmt-site-footer__social-link:hover {
	opacity: 0.7;
}

.cmt-site-footer__icon,
.cmt-site-footer__icon-img {
	width: auto;
	height: 16px;
	display: block;
}

.cmt-site-footer__nav {
	display: flex;
	align-items: flex-start;
	gap: var(--cmt-space-xl);
	flex-wrap: wrap;
}

.cmt-site-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-xs);
}

.cmt-site-footer__col-title {
	margin: 0;
	font-size: var(--cmt-fs-lead);
	font-weight: var(--cmt-fw-regular);
	line-height: 1.33;
	color: var(--cmt-color-text-invert);
}

.cmt-site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cmt-site-footer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cmt-space-sm);
	padding-block: var(--cmt-space-xs);
	font-size: var(--cmt-fs-body);
	font-weight: var(--cmt-fw-light);
	line-height: 1.5;
	color: var(--cmt-color-text-invert);
	text-decoration: none;
	transform: translateX(0);
	transition: transform 0.2s ease, color 0.2s ease;
}

.cmt-site-footer__link:hover {
	color: var(--cmt-color-accent);
	transform: translateX(4px);
}

.cmt-site-footer__arrow {
	width: 19px;
	height: 15px;
	flex-shrink: 0;
	color: inherit;
}

.cmt-site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-md);
}

.cmt-site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cmt-space-md);
}

.cmt-site-footer__legal-link {
	font-size: var(--cmt-fs-small);
	font-weight: var(--cmt-fw-regular);
	line-height: 1.5;
	color: var(--cmt-color-text-invert);
	text-decoration: none;
}

.cmt-site-footer__legal-link:hover {
	text-decoration: underline;
}

.cmt-site-footer__copyright-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--cmt-space-md);
	flex-wrap: wrap;
}

.cmt-site-footer__copyright {
	margin: 0;
	font-size: var(--cmt-fs-small);
	font-weight: var(--cmt-fw-regular);
	line-height: 1.5;
	color: var(--cmt-color-text-invert);
}

.cmt-site-footer__badges {
	display: flex;
	align-items: flex-start;
	gap: var(--cmt-space-md);
}

.cmt-site-footer__badge {
	display: block;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	color: var(--cmt-color-text-invert);
}

.cmt-site-footer__badge-svg,
.cmt-site-footer__badge-img {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 768px) {
	.cmt-site-footer__top {
		flex-direction: column;
		gap: var(--cmt-space-lg);
	}
	.cmt-site-footer__nav {
		flex-direction: column;
		gap: var(--cmt-space-lg);
	}
	.cmt-site-footer__copyright-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Plantilla textos legales ---- */
.cmt-legal {
	--cmt-legal-color: #051d2e; /* navy del export de textos legales */
}

.cmt-legal__header {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cmt-container-max);
	margin-inline: auto;
	padding: 80px 24px;
}

.cmt-legal__title {
	margin: 0;
	max-width: 683px;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: 56px;
	line-height: 64px;
	color: var(--cmt-color-text);
}

.cmt-legal__content {
	box-sizing: border-box;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	padding-bottom: 160px;
	color: var(--cmt-legal-color);
	font-family: var(--cmt-font-base);
}

.cmt-legal__content > :first-child {
	margin-top: 0;
}

.cmt-legal__content p,
.cmt-legal__content ul,
.cmt-legal__content ol {
	margin: var(--cmt-space-sm) 0 0; /* 16px entre párrafos */
	font-size: var(--cmt-fs-body); /* 16px */
	font-weight: var(--cmt-fw-light);
	line-height: 24px;
	color: var(--cmt-legal-color);
}

.cmt-legal__content h2,
.cmt-legal__content h3 {
	margin: 48px 0 0; /* separación de sección */
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-h3); /* 32px */
	line-height: 40px;
	color: var(--cmt-legal-color);
}

.cmt-legal__content a {
	color: var(--cmt-legal-color);
	text-decoration: underline;
}

@media (max-width: 920px) {
	.cmt-legal__content {
		padding-inline: var(--cmt-container-pad);
	}
}

@media (max-width: 768px) {
	.cmt-legal__header {
		padding: var(--cmt-space-xl) var(--cmt-container-pad);
	}

	.cmt-legal__title {
		font-size: var(--cmt-fs-h1);
		line-height: 1.1;
	}
}

/* ---- Página 404 ---- */
.cmt-404 {
	/* Full-bleed: fondo naranja a todo el ancho, pegado al header. */
	background: var(--cmt-color-accent);
}

.cmt-404__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cmt-container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-lg);
	padding: 80px 168px clamp(64px, 20vw, 376px) 168px;
}

.cmt-404__head {
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-sm);
}

.cmt-404__kicker {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-body);
	line-height: 24px;
	color: var(--cmt-color-text);
}

.cmt-404__title {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-display); /* 64px (40 en móvil por tokens) */
	line-height: 1.125;
	color: var(--cmt-color-text);
}

.cmt-404__body {
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-lg);
}

.cmt-404__text {
	display: flex;
	flex-direction: column;
	gap: var(--cmt-space-xs);
}

.cmt-404__lead,
.cmt-404__desc {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-body);
	line-height: 24px;
	color: var(--cmt-color-text);
}

.cmt-404__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cmt-space-xs);
	align-self: flex-start;
	min-height: 40px;
	padding: var(--cmt-space-xs) var(--cmt-space-sm);
	background: var(--cmt-color-dark);
	border-radius: var(--cmt-radius-md);
	font-family: var(--cmt-font-mono);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-small);
	line-height: 24px;
	color: var(--cmt-color-text-invert);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.cmt-404__button:hover {
	opacity: 0.9;
}

.cmt-404__button-icon {
	display: inline-flex;
	width: 19px;
	height: 19px;
	color: var(--cmt-color-text-invert);
}

.cmt-404__button-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 768px) {
	.cmt-404__inner {
		padding: var(--cmt-space-xl) var(--cmt-container-pad);
	}
}