/* =========================================================================
   LATITUD CERO — chrome.css
   Cabecera, navegación, menú lateral, selector de idioma y pie de página.
   ========================================================================= */

/* ==========================================================================
   1. CABECERA
   ========================================================================== */

.lat-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: rgba(250, 246, 239, 0.9);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: var(--lat-line) solid transparent;
	transition: border-color var(--lat-dur) var(--lat-ease-out),
		box-shadow var(--lat-dur) var(--lat-ease-out),
		background-color var(--lat-dur) var(--lat-ease-out);
}

/* Estado pegado con la línea de latitud siempre presente */
.lat-header[data-scrolled="true"] {
	border-bottom-color: var(--lat-rule, #e2d8c6);
	box-shadow: 0 1px 20px rgba(22, 35, 61, 0.06);
}

.lat-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
	min-height: 4.75rem;
	padding-block: 0.7rem;
}

/* --- Identidad --- */

.lat-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--lat-ink, #16233d);
	flex: none;
	margin-right: auto;
}

.lat-brand__mark {
	inline-size: 2.35rem;
	block-size: 2.35rem;
	flex: none;
	color: var(--lat-clay, #a8482a);
}

.lat-brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.05;
}

.lat-brand__name {
	font-family: var(--lat-font-display, serif);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--lat-ink, #16233d);
	text-decoration: none;
	line-height: 1.1;
}

.lat-brand__sub {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.5625rem;
	font-weight: 660;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
	line-height: 1.2;
}

.lat-brand:hover .lat-brand__name {
	color: var(--lat-clay, #a8482a);
}

/* Marca de la Fundación: discreta, arriba a la izquierda */
.lat-foundation {
	position: absolute;
	inset-block-start: -1.35rem;
	inset-inline-start: var(--lat-gutter, 1.5rem);
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.5625rem;
	font-weight: 620;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
	white-space: nowrap;
	opacity: 0.8;
}

/* ==========================================================================
   2. NAVEGACIÓN PRINCIPAL

   Móvil primero: la barra horizontal se oculta por debajo de 67em y la
   muestra el menú lateral. Por encima, se restaura explícitamente — sin
   este display:none la navegación no aparecería nunca en escritorio.
   ========================================================================== */

.lat-nav {
	display: none;
}

.lat-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.1rem, 0rem + 0.35vw, 0.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-nav__link {
	position: relative;
	display: block;
	padding: 0.55rem 0.7rem;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.875rem;
	font-weight: 520;
	letter-spacing: -0.002em;
	color: var(--lat-ink, #16233d);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 2px;
	transition: color var(--lat-dur-fast) var(--lat-ease-out);
}

/* Subrayado que crece desde la izquierda */
.lat-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0.7rem;
	bottom: 0.28rem;
	block-size: 1.5px;
	background-color: var(--lat-clay, #a8482a);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--lat-dur) var(--lat-ease-out);
}

.lat-nav__link:hover,
.lat-nav__link:focus-visible {
	color: var(--lat-clay, #a8482a);
}

.lat-nav__link:hover::after,
.lat-nav__link:focus-visible::after {
	transform: scaleX(1);
}

/* Estado actual (página abierta) */
.lat-nav__link[aria-current="page"],
.lat-nav__link[aria-current="true"] {
	color: var(--lat-ink, #16233d);
	font-weight: 620;
}

.lat-nav__link[aria-current="page"]::after,
.lat-nav__link[aria-current="true"]::after {
	transform: scaleX(1);
	background-color: var(--lat-ochre, #e0a93b);
}

/* Submenú */
.lat-nav__item--has-children {
	position: relative;
}

.lat-nav__sub {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-start: 0;
	min-inline-size: 15rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background-color: var(--lat-base, #fff);
	border: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	border-radius: var(--lat-card-radius);
	box-shadow: var(--lat-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--lat-dur-fast) var(--lat-ease-out),
		transform var(--lat-dur-fast) var(--lat-ease-out),
		visibility var(--lat-dur-fast);
}

.lat-nav__item--has-children:hover .lat-nav__sub,
.lat-nav__item--has-children:focus-within .lat-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lat-nav__sub .lat-nav__link {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.55rem 0.7rem;
	white-space: normal;
	font-size: 0.875rem;
}

.lat-nav__sub .lat-nav__link::before {
	content: "";
	inline-size: 12px;
	block-size: 1px;
	background-color: var(--lat-ochre, #e0a93b);
	flex: none;
	transform: translateY(-0.28em);
	opacity: 0;
	transition: opacity var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-nav__sub .lat-nav__link:hover::before {
	opacity: 1;
}

.lat-nav__sub .lat-nav__link::after {
	display: none;
}

/* --- Utilidades a la derecha --- */

.lat-header__tools {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

/* Selector de idioma */
.lat-lang {
	position: relative;
}

.lat-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45rem 0.6rem;
	background: transparent;
	border: var(--lat-line) solid transparent;
	border-radius: 2px;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.75rem;
	font-weight: 620;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
	cursor: pointer;
	transition: color var(--lat-dur-fast) var(--lat-ease-out),
		border-color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-lang__toggle:hover {
	color: var(--lat-ink, #16233d);
	border-color: var(--lat-rule, #e2d8c6);
}

.lat-lang__caret {
	transition: transform var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-lang__toggle[aria-expanded="true"] .lat-lang__caret {
	transform: rotate(180deg);
}

.lat-lang__menu {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-end: 0;
	min-inline-size: 13rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background-color: var(--lat-base, #fff);
	border: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	border-radius: var(--lat-card-radius);
	box-shadow: var(--lat-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--lat-dur-fast) var(--lat-ease-out),
		transform var(--lat-dur-fast) var(--lat-ease-out),
		visibility var(--lat-dur-fast);
}

.lat-lang__toggle[aria-expanded="true"] + .lat-lang__menu,
.lat-lang__menu:hover,
.lat-lang__menu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lat-lang__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.875rem;
	font-weight: 520;
	color: var(--lat-ink, #16233d);
	text-decoration: none;
	border-radius: 2px;
	transition: background-color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-lang__link:hover {
	background-color: var(--lat-sand, #f1e9da);
	color: var(--lat-clay, #a8482a);
}

.lat-lang__link[aria-current="true"] {
	color: var(--lat-clay, #a8482a);
	font-weight: 640;
}

.lat-lang__code {
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.1em;
	color: var(--lat-ink-soft, #3a4a6b);
}

/* Botón de menú móvil */
.lat-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background: transparent;
	border: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	border-radius: 2px;
	cursor: pointer;
	color: var(--lat-ink, #16233d);
	transition: border-color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-burger:hover {
	border-color: var(--lat-clay, #a8482a);
}

.lat-burger__box {
	position: relative;
	display: block;
	inline-size: 17px;
	block-size: 11px;
}

.lat-burger__bar {
	position: absolute;
	inset-inline: 0;
	block-size: 1.5px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--lat-dur) var(--lat-ease-out),
		opacity var(--lat-dur-fast) var(--lat-ease-out),
		top var(--lat-dur) var(--lat-ease-out);
}

.lat-burger__bar:nth-child(1) {
	top: 0;
}

.lat-burger__bar:nth-child(2) {
	top: 4.75px;
}

.lat-burger__bar:nth-child(3) {
	top: 9.5px;
}

.lat-burger[aria-expanded="true"] .lat-burger__bar:nth-child(1) {
	top: 4.75px;
	transform: rotate(45deg);
}

.lat-burger[aria-expanded="true"] .lat-burger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.3);
}

.lat-burger[aria-expanded="true"] .lat-burger__bar:nth-child(3) {
	top: 4.75px;
	transform: rotate(-45deg);
}

/* ==========================================================================
   3. MENÚ LATERAL (off-canvas)
   ========================================================================== */

.lat-drawer {
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
}

.lat-drawer[hidden] {
	display: none;
}

.lat-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(16, 26, 46, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--lat-dur) var(--lat-ease-out);
}

.lat-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(24rem, 88vw);
	display: flex;
	flex-direction: column;
	background-color: var(--lat-parchment, #faf6ef);
	box-shadow: var(--lat-shadow-lg);
	transform: translateX(100%);
	transition: transform var(--lat-dur) var(--lat-ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lat-drawer[data-open="true"] {
	pointer-events: auto;
}

.lat-drawer[data-open="true"] .lat-drawer__scrim {
	opacity: 1;
}

.lat-drawer[data-open="true"] .lat-drawer__panel {
	transform: translateX(0);
}

.lat-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem var(--lat-gutter, 1.5rem);
	border-bottom: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-drawer__title {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lat-ink-soft, #3a4a6b);
	margin: 0;
}

.lat-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	background: transparent;
	border: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	border-radius: 2px;
	color: var(--lat-ink, #16233d);
	cursor: pointer;
	transition: border-color var(--lat-dur-fast) var(--lat-ease-out),
		color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-drawer__close:hover {
	border-color: var(--lat-clay, #a8482a);
	color: var(--lat-clay, #a8482a);
}

.lat-drawer__body {
	flex: 1;
	padding: 1.5rem var(--lat-gutter, 1.5rem) 2.5rem;
}

.lat-drawer__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-drawer__nav > li {
	border-bottom: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-drawer__nav a {
	display: block;
	padding: 1rem 0;
	font-family: var(--lat-font-display, serif);
	font-size: 1.1875rem;
	font-weight: 520;
	letter-spacing: -0.014em;
	color: var(--lat-ink, #16233d);
	text-decoration: none;
	transition: color var(--lat-dur-fast) var(--lat-ease-out),
		padding-inline-start var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-drawer__nav a:hover,
.lat-drawer__nav a:focus-visible {
	color: var(--lat-clay, #a8482a);
	padding-inline-start: 0.6rem;
}

.lat-drawer__nav a[aria-current="page"] {
	color: var(--lat-clay, #a8482a);
}

/* Subniveles del drawer */
.lat-drawer__nav ul {
	margin: 0 0 1rem;
	padding: 0 0 0 1.1rem;
	list-style: none;
	border-inline-start: var(--lat-line) solid var(--lat-rule, #e2d8c6);
}

.lat-drawer__nav ul a {
	font-family: var(--lat-font-text, sans-serif);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.55rem 0;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-drawer__foot {
	margin-top: 1.75rem;
	display: grid;
	gap: 0.75rem;
}

.lat-drawer__meta {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: var(--lat-line) solid var(--lat-rule, #e2d8c6);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--lat-ink-soft, #3a4a6b);
}

.lat-drawer__meta p {
	margin: 0 0 0.4rem;
}

/* Bloquea el scroll del body cuando el drawer está abierto.
   La clase la añade el JS sobre <html>. */
.lat-drawer-open,
.lat-drawer-open body {
	overflow: hidden;
}

/* ==========================================================================
   4. PIE DE PÁGINA
   ========================================================================== */

.lat-footer {
	background-color: var(--lat-ink, #16233d);
	color: rgba(250, 246, 239, 0.72);
	font-size: 0.9375rem;
	line-height: 1.65;
	position: relative;
	overflow: hidden;
}

/* Halo de ocre muy tenue arriba, como luz rasante */
.lat-footer::before {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: 50%;
	inline-size: 90%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(224, 169, 59, 0.09) 0%, transparent 62%);
	pointer-events: none;
}

.lat-footer__inner {
	position: relative;
	padding-block: clamp(3rem, 1.8rem + 4.4vw, 4.5rem) clamp(1.5rem, 1rem + 1.6vw, 2rem);
}

.lat-footer__top {
	display: grid;
	gap: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	grid-template-columns: 1fr;
	max-inline-size: calc(var(--wp--style--global--wide-size, 72rem) + 2 * var(--lat-gutter));
	margin-inline: auto;
	padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

@media (min-width: 62em) {
	.lat-footer__top {
		grid-template-columns: minmax(16rem, 1.35fr) repeat(2, minmax(9rem, 1fr));
	}
}

.lat-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	max-width: 26rem;
}

.lat-footer__logo {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.lat-footer__logo .lat-brand__mark {
	color: var(--lat-ochre, #e0a93b);
}

.lat-footer__name {
	font-family: var(--lat-font-display, serif);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--lat-parchment, #faf6ef);
	line-height: 1.15;
}

.lat-footer__org {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.625rem;
	font-weight: 660;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: rgba(250, 246, 239, 0.55);
	line-height: 1.3;
}

.lat-footer__mission {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(250, 246, 239, 0.7);
	margin: 0;
}

.lat-footer__col-title {
	font-family: var(--lat-font-label, sans-serif);
	font-size: 0.6875rem;
	font-weight: 680;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lat-ochre, #e0a93b);
	margin: 0 0 1.1rem;
}

.lat-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.lat-footer__list a {
	color: rgba(250, 246, 239, 0.78);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-footer__list a:hover,
.lat-footer__list a:focus-visible {
	color: var(--lat-ochre, #e0a93b);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lat-footer__contact {
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.lat-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.lat-footer__contact-row svg,
.lat-footer__contact-row .lat-footer__ico {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	margin-top: 0.28em;
	color: var(--lat-ochre, #e0a93b);
}

.lat-footer__contact-row a {
	color: rgba(250, 246, 239, 0.82);
	text-decoration: none;
	word-break: break-word;
}

.lat-footer__contact-row a:hover {
	color: var(--lat-ochre, #e0a93b);
	text-decoration: underline;
}

/* Nota de registro institucional */
.lat-footer__registry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.9rem;
	margin: 0 auto;
	/* Se acota aquí y no solo en el bloque que lo envuelve: si alguien
	   cambia el contenedor, el aviso de estado no debe ocupar el ancho
	   completo de la pantalla. */
	max-inline-size: calc(var(--wp--style--global--wide-size, 72rem) + 2 * var(--lat-gutter));
	padding: 1.1rem 1.25rem;
	background-color: rgba(250, 246, 239, 0.04);
	border: var(--lat-line) solid rgba(250, 246, 239, 0.13);
	border-radius: 2px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(250, 246, 239, 0.68);
}

.lat-footer__registry strong {
	font-weight: 640;
	color: var(--lat-parchment, #faf6ef);
}

.lat-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem 1.5rem;
	max-inline-size: calc(var(--wp--style--global--wide-size, 72rem) + 2 * var(--lat-gutter));
	margin-inline: auto;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: var(--lat-line) solid rgba(250, 246, 239, 0.12);
	font-size: 0.8125rem;
	color: rgba(250, 246, 239, 0.55);
}

.lat-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lat-footer__legal a {
	color: rgba(250, 246, 239, 0.62);
	text-decoration: none;
}

.lat-footer__legal a:hover {
	color: var(--lat-ochre, #e0a93b);
	text-decoration: underline;
}

/* Botón de volver arriba */
.lat-to-top {
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 400;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	background-color: var(--lat-ink, #16233d);
	color: var(--lat-parchment, #faf6ef);
	border: var(--lat-line) solid var(--lat-ink, #16233d);
	border-radius: 50%;
	box-shadow: var(--lat-shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--lat-dur) var(--lat-ease-out),
		transform var(--lat-dur) var(--lat-ease-out),
		visibility var(--lat-dur),
		background-color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-to-top[data-visible="true"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lat-to-top:hover {
	background-color: var(--lat-clay, #a8482a);
	border-color: var(--lat-clay, #a8482a);
}

/* ==========================================================================
   5. PUNTOS DE CORTE
   ========================================================================== */

/* Barra de acción de la home (solo bajo el header en móvil) */
@media (max-width: 67em) {
	.lat-nav {
		display: none;
	}

	.lat-burger {
		display: inline-flex;
	}
}

@media (min-width: 67.01em) {
	.lat-burger {
		display: none;
	}

	/* La navegación se recupera aquí. Si se borra esta regla, el menú
	   horizontal desaparece y solo queda el lateral. */
	.lat-nav {
		display: block;
	}
}

/* En el header oscuro no hay barra fija: la navegación se apila */
@media (max-width: 67em) {
	.lat-header__bar {
		flex-wrap: wrap;
	}

	.lat-header__tools {
		order: 3;
		inline-size: 100%;
		padding-bottom: 0.6rem;
	}
}

/* Dispositivos táctiles: sin hover, más aire en los objetivos */
@media (hover: none) {
	.lat-nav__link {
		padding: 0.75rem 0.7rem;
	}

	.lat-nav__link::after {
		bottom: 0.4rem;
	}

	.lat-card:hover {
		transform: none;
	}
}

/* Coherencia tipográfica */
.lat-eyebrow,
.lat-step__num,
.lat-footer__col-title,
.lat-field__label,
.lat-lat__k,
.lat-dl__key,
.lat-meta__key {
	font-variant-numeric: tabular-nums;
}