/**
 * Kalunat — cabecera, menú móvil y pie.
 *
 * La cabecera es la parte de plantilla "header" con la clase
 * .kalunat-site-header (se la pone cada plantilla). Tiene tres estados:
 *
 * - Normal: fija arriba al hacer scroll, con fondo "base".
 * - .is-overlay: transparente y en blanco sobre la foto del hero; al hacer
 *   scroll recupera el fondo, como la cabecera del child de Eroica.
 * - .is-floating: sobre el hero con título en movimiento; transparente
 *   mientras dura y en blanco cuando la foto la cubre (lo marca el bloque).
 * - Con el menú a pantalla completa abierto: con los colores del propio
 *   menú (html.kalunat-menu-is-open, lo pone Kalunat Core).
 *
 * assets/js/header.js añade .is-scrolled en cuanto la página se desplaza.
 *
 * 1. Cabecera fija
 * 2. Logo con variante para fondos oscuros
 * 3. Menú de escritorio con el efecto "linear" de Eroica (3A), menú
 *    horizontal o solo el botón (3B) y cabecera con el menú abierto (3C)
 * 4. Variante sobre el hero
 * 5. Menú a pantalla completa (parte "mobile-menu")
 * 6. Pie
 */

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

.kalunat-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background-color: var(--wp--preset--color--base);
	transition:
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* En móvil la barra de administración no es fija: la cabecera va a 0. */
@media (max-width: 600px) {

	.kalunat-site-header {
		top: 0;
	}
}

.kalunat-site-header .kalunat-header__bar {
	transition: padding var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.kalunat-site-header.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.kalunat-site-header.is-scrolled .kalunat-header__bar {
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}

.kalunat-site-header .wp-block-site-logo img {
	width: clamp(112px, 11vw, 168px) !important;
	height: auto;
}

/* =====================================================================
   2. LOGO CON VARIANTE PARA FONDOS OSCUROS
   inc/logo.php añade .kalunat-logo-inverse junto al logo principal. Las
   dos imágenes ocupan el mismo sitio y solo cambia cuál se ve.
   ===================================================================== */

.wp-block-site-logo,
.wp-block-site-logo .custom-logo-link {
	position: relative;
}

.wp-block-site-logo .custom-logo-link {
	display: block;
}

.wp-block-site-logo .kalunat-logo-inverse {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100%;
	object-fit: contain;
	visibility: hidden;
	filter: none;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse) {
		visibility: hidden;
	}

	:root:not([data-theme="light"]) .wp-block-site-logo .kalunat-logo-inverse {
		visibility: visible;
	}
}

:root[data-theme="dark"] .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse),
.kalunat-is-dark .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse),
.kalunat-site-header.is-overlay:not(.is-scrolled) .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse),
html.kalunat-menu-is-open .kalunat-site-header .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse) {
	visibility: hidden;
}

:root[data-theme="dark"] .wp-block-site-logo .kalunat-logo-inverse,
.kalunat-is-dark .wp-block-site-logo .kalunat-logo-inverse,
.kalunat-site-header.is-overlay:not(.is-scrolled) .wp-block-site-logo .kalunat-logo-inverse,
html.kalunat-menu-is-open .kalunat-site-header .wp-block-site-logo .kalunat-logo-inverse {
	visibility: visible;
}

/* Con el menú abierto la cabecera es oscura, como el menú (sección
   3C): siempre el logo claro, por las reglas de arriba. */

/* Las páginas que van siempre en oscuro (plantillas Journal y
   Portfolio) no ofrecen el botón de modo claro/oscuro: no haría nada. */
.kalunat-is-dark .kalunat-site-header .kalunat-color-mode-toggle {
	display: none;
}

/* =====================================================================
   3A. MENÚ DE ESCRITORIO: EFECTO "LINEAR" DE EROICA
   El mismo efecto que el child de Eroica activaba con jQuery (clases
   listening, hidep, phovered, listen-active y no-dis), aquí solo con CSS:
   :has() sabe sobre qué elemento está el ratón (o el foco del teclado).

   - Sobre un elemento sin submenú: los demás se desvanecen.
   - Sobre un elemento con submenú: los demás casi desaparecen mientras
     suben; el elegido sube, se atenúa y deja su submenú, en fila, justo
     donde estaba el enlace.
   - Subrayado fino solo en la página actual (al pasar el cursor no hay
     subrayado: basta con el desvanecido de los demás).
   Tiempos y curvas, los de Eroica. Solo desde 1025px: por debajo solo
   está el botón del menú a pantalla completa.
   Recuperado el 2026-10-03 como prueba (se había quitado el 2026-09-28).
   ===================================================================== */

@media (min-width: 1025px) {

	.kalunat-header__bar .wp-block-navigation {
		--kalunat-nav-rise: 35px;
	}

	/* Con la cabecera compacta hay menos sitio por encima. */
	.kalunat-site-header.is-scrolled .kalunat-header__bar .wp-block-navigation {
		--kalunat-nav-rise: 22px;
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		transform: translate3d(0, 0, 0);
		transition: all 375ms cubic-bezier(0.29, 0.09, 0.22, 0.98);
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation-item__content {
		position: relative;
		padding-block: 9px;
		text-decoration: none !important;
	}

	/* Subrayado de la página actual. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 0;
		height: 1px;
		margin-top: -6px;
		background-color: currentcolor;
		opacity: 1;
		transition: width 100ms linear, opacity 375ms ease, transform 375ms ease;
	}

	.kalunat-header__bar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
	.kalunat-header__bar .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
		width: 100%;
	}

	/* listening: hay un elemento activo; los demás se atenúan y suben. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container:has(> li:is(:hover, :focus-within)) > li {
		opacity: 0.25;
		transform: translate3d(0, calc(-1 * var(--kalunat-nav-rise)), 0);
		transition: opacity 475ms ease 139ms, transform 475ms ease 139ms;
	}

	/* no-dis: el activo no tiene submenú; nadie se mueve. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container:has(> li:not(.has-child):is(:hover, :focus-within)) > li {
		transform: translate3d(0, 0, 0);
	}

	/* listen-active: el elemento activo, entero. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container:has(> li:is(:hover, :focus-within)) > li:is(:hover, :focus-within) {
		opacity: 1;
	}

	/* hidep: el activo tiene submenú; los demás casi desaparecen. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container:has(> li.has-child:is(:hover, :focus-within)) > li:not(:hover, :focus-within) {
		opacity: 0.025;
		pointer-events: none;
		transition: opacity 375ms ease 199ms, transform 555ms cubic-bezier(0.29, 0.09, 0.22, 0.98) 139ms;
	}

	/* phovered: el activo sube y su enlace se atenúa. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container:has(> li.has-child:is(:hover, :focus-within)) > li.has-child:is(:hover, :focus-within) {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--kalunat-nav-rise)), 0);
		transition: all 337.5ms cubic-bezier(0.29, 0.09, 0.22, 0.98) 215ms;
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > li.has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content {
		opacity: 0.35;
	}

	/* Con el teclado, el enlace que tiene el foco no se atenúa: el
	   contorno de foco se vería a un tercio de contraste. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content:focus-visible {
		opacity: 1;
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > li.has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content::after {
		opacity: 0;
		transform: translate3d(0, -5px, 0);
		transition: all 375ms ease 139ms;
	}

	/* Submenú en fila, en la línea donde estaba el enlace antes de subir
	   (tanto como sube el elemento). Toca al enlace que ha subido, así el
	   ratón no "se cae" del elemento por el camino. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		top: var(--kalunat-nav-rise);
		left: 0;
		flex-direction: row;
		gap: 18px;
		width: max-content;
		min-width: 0;
		height: auto;
		padding: 0;
		overflow: visible;
		border: 0;
		background: none;
		color: inherit;
		opacity: 0;
		visibility: hidden;
		transform: matrix(0.99939, 0.0145, 0, 1.111, 0, 3);
		transform-origin: left center;
		transition: opacity 150ms cubic-bezier(0.29, 0.09, 0.22, 0.98), transform 175ms cubic-bezier(0.29, 0.09, 0.22, 0.98), visibility 0s linear 175ms;
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: matrix(1, 0, 0, 1, 0, 0);
		transition: opacity 515ms cubic-bezier(0.29, 0.09, 0.22, 0.98) 315ms, transform 575ms cubic-bezier(0.29, 0.09, 0.22, 0.98) 315ms, visibility 0s linear 315ms;
	}

	/* Con el teclado el submenú es visible (y enfocable) al instante; si
	   no, un Tab rápido se lo saltaría durante el retardo de la animación. */
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
		transition-delay: 315ms, 315ms, 0s;
	}

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 9px 0;
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {

	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > li,
	.kalunat-header__bar .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		transform: none !important;
	}
}

/* =====================================================================
   3B. MENÚ HORIZONTAL Y BOTÓN DEL MENÚ A PANTALLA COMPLETA
   Desde 1025px (el punto de corte de Eroica) se ve el menú horizontal y,
   al final, "● Menú"; por debajo, solo "● Menú". Abre el menú a
   pantalla completa. La navegación de la cabecera nunca usa el menú
   móvil propio de WordPress.
   ===================================================================== */

@media (max-width: 1024px) {

	.kalunat-header__bar .wp-block-navigation {
		display: none;
	}
}

/* =====================================================================
   3C. CABECERA CON EL MENÚ ABIERTO
   ===================================================================== */

/* El menú a pantalla completa es siempre oscuro, sea cual sea el modo
   de la página. Sus reglas (aquí y en Kalunat Core) usan los colores de
   la página invertidos (fondo "contrast", texto "base"), así que dentro
   del menú, y en la cabecera mientras está abierto, esos colores son
   los del modo claro: tinta de fondo y papel en el texto. El acento, el
   del modo oscuro, que se lee mejor sobre tinta. */
.kalunat-menu,
html.kalunat-menu-is-open .kalunat-site-header {
	--wp--preset--color--contrast: var(--kalunat--ink);
	--wp--preset--color--base: var(--kalunat--paper);
	--wp--preset--color--accent: #fb864d;
}

/* Con el menú abierto la cabecera se funde con él. También sobre un
   hero (.is-overlay), cuya cabecera transparente con degradado pesaría
   más. */
html.kalunat-menu-is-open .kalunat-site-header,
html.kalunat-menu-is-open .kalunat-site-header.is-overlay {
	background-color: var(--wp--preset--color--contrast);
	background-image: none;
	box-shadow: none;
	color: var(--wp--preset--color--base);
}

/* =====================================================================
   4. VARIANTE SOBRE EL HERO
   Se sale del flujo para que la foto empiece arriba del todo. Un velo
   degradado muy suave asegura que el texto blanco se lea sobre fotos
   claras.
   ===================================================================== */

.kalunat-site-header.is-overlay {
	position: fixed;
	right: 0;
	left: 0;
}

.kalunat-site-header.is-overlay:not(.is-scrolled) {
	background-color: transparent;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
	color: var(--wp--preset--color--on-image);
}

/* Sobre el hero con título en movimiento (.is-floating, plantilla
   "Hero: título en movimiento"): fuera del flujo para que el escenario
   empiece arriba del todo. Mientras dura el hero, el bloque le pone
   .is-transparent, y .is-on-image cuando el círculo con la foto ya
   cubre la cabecera (texto y logo en blanco). */
.kalunat-site-header.is-floating {
	position: fixed;
	right: 0;
	left: 0;
}

html:not(.kalunat-menu-is-open) .kalunat-site-header.is-transparent {
	background-color: transparent;
	box-shadow: none;
}

html:not(.kalunat-menu-is-open) .kalunat-site-header.is-transparent.is-on-image {
	color: var(--wp--preset--color--on-image);
}

html:not(.kalunat-menu-is-open) .kalunat-site-header.is-on-image .wp-block-site-logo .custom-logo:not(.kalunat-logo-inverse) {
	visibility: hidden;
}

html:not(.kalunat-menu-is-open) .kalunat-site-header.is-on-image .wp-block-site-logo .kalunat-logo-inverse {
	visibility: visible;
}

/* =====================================================================
   5. MENÚ A PANTALLA COMPLETA (parte "mobile-menu")
   El contenedor, la hamburguesa, el fundido de apertura y la entrada en
   cascada están en Kalunat Core; aquí, el contenido:
   - los enlaces de primer nivel del menú de WordPress, uno debajo de
     otro y centrados, en la letra de los titulares, grande, y junto a
     los de las categorías el número de entradas (inc/menu-counts.php); al pasar
     por uno, los demás se atenúan. Los que tienen submenú lo despliegan
     debajo, en columnas, como en Keel;
   - al pie, la versión compacta del pie del sitio ("Sígueme" con las
     redes y el "di hola" con el email).
   El menú es siempre oscuro, tinta y papel (sección 3C): los grises
   salen del color de su texto.
   ===================================================================== */

.kalunat-mobile-menu {
	min-height: calc(100dvh - var(--kalunat-header-bottom, 5rem) - 3.5rem);
}

/* Cada bloque ocupa todo el ancho, para poder alinear su contenido. */
.kalunat-mobile-menu > * {
	align-self: stretch;
}

/* En la letra de los titulares, algo mayor que la de
   interfaz porque ópticamente es más pequeña. */
.kalunat-mobile-menu .kalunat-mobile-menu__nav {
	margin-top: clamp(1rem, 10vh, 8rem);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.1rem, 4.4vw, 4.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-transform: none;
}

/* Uno debajo de otro, centrados (sin el flex de WordPress, que haría
   la lista tan ancha como su contenido). */
.kalunat-menu .kalunat-mobile-menu .kalunat-mobile-menu__nav,
.kalunat-menu .kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container {
	display: block;
	width: 100%;
	text-align: center;
}

/* Sin menú asignado, WordPress muestra la lista de páginas, que mete sus
   elementos en una lista más (.wp-block-page-list): se aplana para que
   se vean igual que los de un menú. */
.kalunat-menu .kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-page-list {
	display: contents;
}

.kalunat-menu .kalunat-mobile-menu .kalunat-mobile-menu__nav :is(.wp-block-navigation__container, .wp-block-page-list) > li {
	display: block;
	padding-block: 0.06em;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav :is(.wp-block-navigation__container, .wp-block-page-list) > li > a {
	position: relative;
	display: inline-flex;
	gap: 0.3em;
	align-items: flex-start;
	padding: 0;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation-item__label {
	overflow-wrap: normal;
	word-break: normal;
}

/* El número de entradas de la categoría, arriba y entre corchetes, con
   el aspecto de los números de los pies de foto: pequeño, en la letra
   de la interfaz y en el color de acento. Fuera del flujo, para que no
   descentre el nombre. */
.kalunat-mobile-menu .kalunat-menu-count {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0.45em 0 0 0.3em;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	line-height: 1;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav :is(.wp-block-navigation__container, .wp-block-page-list):has(> li > a:is(:hover, :focus-visible)) > li > a:not(:hover, :focus-visible) {
	opacity: 0.45;
}

/* Submenús, como en Keel (Kalunat Core, submenus.js): el elemento
   abierto se queda encendido con una etiqueta "Contraer" encima, los
   demás se apagan y sus enlaces salen debajo, apilados en columnas de
   hasta 6. Los submenús
   de WordPress siguen ocultos: el script copia sus enlaces al panel. */
.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container.has-open > li > a {
	opacity: 0.35;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container.has-open > li:is(.is-open, :hover) > a,
.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container.has-open > li > a:focus-visible {
	opacity: 1;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container > li.is-open > a {
	position: relative;
}

.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__container > li.is-open > a::before {
	content: attr(data-kalunat-collapse);
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0.35em 0.6em;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: kalunat-menu-fade 0.3s ease both;
}

/* Los enlaces se apilan en columnas de hasta 6: el séptimo empieza una
   columna nueva. El espacio entre enlaces va en su relleno y no en
   "gap", que sumaría huecos también por las filas vacías. */
.kalunat-menu__secondary {
	display: grid;
	grid-template-rows: repeat(6, auto);
	grid-auto-columns: max-content;
	grid-auto-flow: column;
	column-gap: clamp(2rem, 6vw, 5rem);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	animation: kalunat-menu-rise 0.45s cubic-bezier(0.29, 0.09, 0.22, 0.98) both;
}

.kalunat-menu__secondary[hidden] {
	display: none;
}

.kalunat-menu__secondary li {
	padding-block: 0.2em;
}

.kalunat-menu__secondary a {
	color: color-mix(in srgb, currentcolor 70%, transparent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kalunat-menu .kalunat-menu__secondary a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
}

@keyframes kalunat-menu-fade {

	from {
		opacity: 0;
	}
}

@keyframes kalunat-menu-rise {

	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}
}


/* Los submenús de WordPress, ocultos (ver arriba). */
.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__submenu-container,
.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation__submenu-icon,
.kalunat-mobile-menu .kalunat-mobile-menu__nav .wp-block-navigation-submenu__toggle {
	display: none;
}

/* Pie del menú, abajo del todo: la versión compacta del pie del sitio.
   Usa las mismas clases que él (sección 6), en tamaño menor. El gris
   del rótulo sale del color del texto del menú. */
.kalunat-mobile-menu > .kalunat-mobile-menu__footer {
	margin-top: auto !important;
}

.kalunat-mobile-menu__footer .kalunat-footer__label {
	color: color-mix(in srgb, currentcolor 55%, transparent);
	font-size: var(--wp--preset--font-size--medium);
}

.kalunat-mobile-menu__footer .kalunat-footer__social.wp-block-social-links {
	gap: 0.3em 1.2em;
	font-size: var(--wp--preset--font-size--medium);
}

.kalunat-mobile-menu__footer .kalunat-footer__contact {
	font-size: var(--wp--preset--font-size--medium);
}

/* =====================================================================
   6. PIE
   ===================================================================== */

/* Pie del sitio (patterns/part-footer.php), como el del tema Readers:
   tras un filete, dos filas a lo ancho. Arriba, el logo y las redes en
   versalitas pequeñas y espaciadas; abajo, los enlaces de la web en la
   letra de los párrafos, separados por barras, y a la derecha el
   copyright con los avisos legales y un botón redondo para volver
   arriba. En móvil, todo apilado a la izquierda.
   Las reglas que siguen a este bloque (.kalunat-footer__*) son del pie
   anterior y las usa el pie compacto del menú a pantalla completa. */

.kalunat-site-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.kalunat-site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 25%, transparent);
}

.kalunat-site-footer__inner > * {
	margin-block: 0;
}

.kalunat-site-footer__row {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.kalunat-site-footer__row > * {
	margin: 0;
}

.kalunat-site-footer .kalunat-site-footer__social.wp-block-social-links {
	gap: 0.5em 2.2em;
	margin: 0;
}

.kalunat-site-footer__social .wp-social-link,
.kalunat-site-footer__social.is-style-logos-only .wp-social-link {
	color: inherit;
	font-size: inherit;
}

.kalunat-site-footer__social .wp-social-link:hover {
	transform: none;
}

.kalunat-site-footer__social .wp-social-link a {
	padding: 0 !important;
}

.kalunat-site-footer__social .wp-social-link svg {
	display: none;
}

.kalunat-site-footer__social .wp-social-link span.wp-block-social-link-label,
.kalunat-site-footer .kalunat-site-footer__credit,
.kalunat-site-footer .kalunat-site-footer__legal {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	line-height: 1.4;
	text-transform: uppercase;
}

.kalunat-site-footer__social .wp-social-link a:hover .wp-block-social-link-label {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.kalunat-site-footer .kalunat-site-footer__links {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--article, var(--wp--preset--font-family--body));
	font-size: var(--wp--preset--font-size--medium);
}

.kalunat-site-footer__links a,
.kalunat-site-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.kalunat-site-footer__links a:hover {
	color: var(--wp--preset--color--contrast);
}

.kalunat-site-footer__links a + a::before {
	content: "/";
	display: inline-block;
	margin-inline: 0.75em;
	color: var(--wp--preset--color--muted);
}

.kalunat-site-footer__end {
	gap: 0.75rem 1.5rem;
}

.kalunat-site-footer .kalunat-site-footer__credit,
.kalunat-site-footer .kalunat-site-footer__legal {
	color: var(--wp--preset--color--muted);
}

.kalunat-site-footer__legal a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.kalunat-site-footer__legal a + a::before {
	content: "·";
	display: inline-block;
	margin-inline: 0.7em;
}

.kalunat-site-footer .kalunat-site-footer__top {
	margin: 0;
}

.kalunat-site-footer__top a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 50%;
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.kalunat-site-footer__top a:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {

	.kalunat-site-footer__row {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* Pie en tres piezas, alineadas a la izquierda: "Sígueme" y las redes
   en texto grande; una frase de contacto; el copyright en pequeño.
   A la derecha, "Volver arriba" con una flecha curva.
   Todo en la letra de los titulares (700), salvo los nombres de las
   redes, el email y "Volver arriba", en la de la interfaz (600), y el
   copyright y los avisos legales (500). */

.kalunat-footer__label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* Redes: solo el nombre (sin icono), en grande. La línea del acento
   crece de izquierda a derecha al pasar por encima. */
.kalunat-footer__social.wp-block-social-links {
	gap: 0.4em 1.6em;
	font-size: var(--wp--preset--font-size--large);
}

.kalunat-footer__social .wp-social-link,
.kalunat-footer__social.is-style-logos-only .wp-social-link {
	color: inherit;
	font-size: inherit;
}

.kalunat-footer__social .wp-social-link:hover {
	transform: none;
}

.kalunat-footer__social .wp-social-link a {
	position: relative;
	padding: 0 0 0.12em !important;
}

.kalunat-footer__social .wp-social-link svg {
	display: none;
}

/* WordPress reduce la etiqueta al 65% y la separa del icono. */
.kalunat-footer__social .wp-social-link span.wp-block-social-link-label {
	margin: 0;
	font-size: 1em;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
}

.kalunat-footer__social .wp-social-link a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transition: width var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.kalunat-footer__social .wp-social-link a:is(:hover, :focus-visible)::after {
	width: 100%;
}

/* Contacto: en la serif, también lo que va en negrita; el email, en la
   fuente de la interfaz. */
.kalunat-footer__contact {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.kalunat-footer__contact strong {
	font-weight: inherit;
}

.kalunat-footer__contact a {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	text-decoration: none;
}

.kalunat-footer__contact a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
}

/* El copyright y, a su lado, los enlaces legales (cookies, aviso legal,
   afiliación), igual de pequeños y separados por un punto. */
.kalunat-footer .kalunat-footer__legal,
.kalunat-mobile-menu__footer .kalunat-footer__legal {
	gap: 0.3em 1.2em;
	align-items: baseline;
}

.kalunat-footer__credit,
.kalunat-footer__links {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xx-small);
}

.kalunat-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.6em;
}

.kalunat-footer__links a {
	color: inherit;
	text-decoration: none;
}

/* inline-block: así el subrayado del enlace no alcanza al punto. */
.kalunat-footer__links a + a::before {
	content: "·";
	display: inline-block;
	margin-right: 0.6em;
}

.kalunat-footer__links a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
}

/* Volver arriba: texto gris y una flecha (SVG de inc/footer.php) que
   en reposo tiene un gancho abajo. Al pasar por encima el gancho se
   recoge hacia el palo, el palo crece hacia abajo y la punta sube, hasta
   quedar una flecha recta y alta. Todo con stroke-dash*, que se anima
   en todos los navegadores: el palo es una sola línea de la que en
   reposo se ve solo el tramo central (del 18 al 40 de 46). El texto, en
   la letra de la interfaz, como las redes y el email. */
.kalunat-footer__top {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.kalunat-footer__top a {
	display: inline-flex;
	gap: 0.6em;
	align-items: flex-end;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) ease;
}

.kalunat-footer__top a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast);
}

.kalunat-footer__arrow {
	flex: none;
	width: 0.95em;
	height: 2.8em;
	overflow: visible;
	color: var(--wp--preset--color--contrast);
}

.kalunat-footer__arrow path {
	transition-duration: var(--wp--custom--motion--base);
	transition-timing-function: var(--wp--custom--motion--ease);
}

.kalunat-footer__arrow-stem {
	stroke-dasharray: 22 100;
	stroke-dashoffset: -18;
	transition-property: stroke-dasharray, stroke-dashoffset;
}

.kalunat-footer__arrow-hook {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
	transition-property: stroke-dashoffset;
}

.kalunat-footer__arrow-head {
	transition-property: transform;
}

.kalunat-footer__top a:is(:hover, :focus-visible) .kalunat-footer__arrow-stem {
	stroke-dasharray: 46 100;
	stroke-dashoffset: 0;
}

.kalunat-footer__top a:is(:hover, :focus-visible) .kalunat-footer__arrow-hook {
	stroke-dashoffset: -1;
}

.kalunat-footer__top a:is(:hover, :focus-visible) .kalunat-footer__arrow-head {
	transform: translateY(-18px);
}