/**
 * Norte — estilos globales.
 *
 * La portada se mide en vw a partir del diseño original (1024 px de
 * ancho): las piezas claras y oscuras encajan igual a cualquier anchura
 * de escritorio. Por debajo de 960 px todo se apila.
 */

/* --------------------------------------------------------------------------
 * Variables
 * ----------------------------------------------------------------------- */

:root {
	--n-paper: var(--wp--preset--color--paper);
	--n-paper-line: var(--wp--preset--color--paper-line);
	--n-ink: var(--wp--preset--color--ink);
	--n-night: var(--wp--preset--color--night);
	--n-coal: var(--wp--preset--color--coal);
	--n-night-line: var(--wp--preset--color--night-line);
	--n-ash: var(--wp--preset--color--ash);
	--n-snow: var(--wp--preset--color--snow);

	--n-display: var(--wp--preset--font-family--display);
	--n-text: var(--wp--preset--font-family--text);
	--n-serif: var(--wp--preset--font-family--serif);
	--n-headline: var(--wp--preset--font-family--headline);
	--n-mono: var(--wp--preset--font-family--text);

	--n-gutter: var(--wp--custom--gutter);
	--n-header: var(--wp--custom--header-height);
	--n-label: clamp(10px, 0.7vw, 12px);
	--n-small: clamp(13px, 0.98vw, 15px);
	--n-rule-x: 6.35vw;

	--n-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h23M19 1l4 4-4 4'/%3E%3C/svg%3E");
	--n-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h47M43 1l4 4-4 4'/%3E%3C/svg%3E");
	--n-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 64' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M5 64V1M1 5l4-4 4 4'/%3E%3C/svg%3E");
}

/* Modo oscuro (sol / luna de la cabecera): los paneles de papel pasan a
 * gris carbón y la tinta a nieve; las piezas de noche no cambian. */
:root[data-theme="dark"] {
	--wp--preset--color--paper: #1c1c1b;
	--wp--preset--color--paper-line: #343432;
	--wp--preset--color--ink: #efede8;
	color-scheme: dark;
}

:root[data-theme="dark"] :is(.wp-element-button, .wp-block-button__link) {
	color: var(--wp--preset--color--night);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

::selection {
	background: var(--n-ink);
	color: var(--n-snow);
}

/* Márgenes propios en las piezas de diseño: nada hereda el espaciado
 * del flujo de bloques. */
:is(.norte-site-header, .norte-hero, .norte-stories, .norte-projects, .norte-journal, .norte-footer, .norte-entry-hero, .norte-archive-head, .norte-more, .norte-archive__query, .norte-404) :is(p, h1, h2, h3, h4, figure, ul) {
	margin-block: 0;
}

:is(.norte-site-header, .norte-hero, .norte-stories, .norte-projects, .norte-journal, .norte-footer, .norte-entry-hero, .norte-archive-head, .norte-more, .norte-archive__query) a:hover {
	text-decoration: none;
}

.norte-site-header,
.norte-site-footer,
.norte-front,
.norte-archive,
.norte-single,
.norte-page,
.norte-404 {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
 * Piezas reutilizables: flecha, etiqueta y enlace con flecha
 * ----------------------------------------------------------------------- */

.norte-arrow {
	display: inline-block;
	width: 16px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
	vertical-align: middle;
}

.norte-arrow--left {
	transform: scaleX(-1);
}

.is-style-norte-label,
.norte-label {
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.is-style-norte-link {
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.is-style-norte-link a {
	display: inline-flex;
	align-items: center;
	gap: 1.5em;
	text-decoration: none;
}

.is-style-norte-link a::after {
	content: "";
	flex: none;
	width: 15px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.is-style-norte-link a:hover::after {
	transform: translateX(4px);
}

.norte-section-link a::after {
	width: clamp(32px, 3.7vw, 56px);
	-webkit-mask-image: var(--n-arrow-long);
	mask-image: var(--n-arrow-long);
	margin-left: 1.2vw;
}

/* Imagen que rellena su contenedor (tarjetas, cita, fotografía). */
.is-style-norte-fill,
.wp-block-image.is-style-norte-fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	overflow: hidden;
}

.is-style-norte-fill img,
.wp-block-image.is-style-norte-fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Titular vertical (de abajo arriba). */
.is-style-norte-vertical {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* Paneles. */
.is-style-norte-paper {
	background: var(--n-paper);
	color: var(--n-ink);
}

.is-style-norte-night {
	background: var(--n-night);
	color: var(--n-snow);
}

/* Enlace que ocupa toda la tarjeta. */
:is(.norte-card__title, .norte-list__title, .norte-latest__title, .norte-feature__title) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --------------------------------------------------------------------------
 * Portada · Héroe
 * ----------------------------------------------------------------------- */

.norte-hero {
	--hero-h: max(540px, 45.4vw);
	position: relative;
	isolation: isolate;
	min-height: var(--hero-h);
	overflow: hidden;
	background: var(--n-paper);
	color: var(--n-ink);
}

/* El panel claro se ensancha sobre la foto en su parte superior. */
.norte-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 40.8%;
	height: 70.5%;
	background: var(--n-paper);
	pointer-events: none;
}

.norte-hero__panel {
	position: relative;
	z-index: 2;
	width: 40.8%;
	padding: 10.4vw 2.5vw 4.6vw 9.5vw;
}

/* Línea vertical con el número de sección. */
.norte-hero__panel::before {
	content: "";
	position: absolute;
	left: var(--n-rule-x);
	top: 8.8vw;
	height: 32.2vw;
	width: 1px;
	background: color-mix(in srgb, currentColor 55%, transparent);
}

.norte-hero__index {
	position: absolute;
	left: var(--n-rule-x);
	top: 33.4vw;
	padding: 0.7em 0;
	background: var(--n-paper);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.1em;
	line-height: 1;
	transform: translateX(-50%) rotate(-90deg);
}

.norte-hero__kicker {
	letter-spacing: 0.16em;
}

.norte-hero__title {
	margin-top: 0.9vw !important;
	font-size: clamp(2.6rem, 4.75vw, 6.25rem);
	font-weight: 300;
	line-height: 0.93;
	letter-spacing: -0.02em;
	font-family: var(--n-display);
}

.norte-hero__lead {
	max-width: 19em;
	margin-top: 2.4vw !important;
	font-size: var(--n-small);
	line-height: 1.5;
}

.norte-hero__panel .is-style-norte-link {
	margin-top: 3.1vw !important;
}

/* Carrusel. */
.norte-hero > .wp-block-norte-hero-slider {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 35.6%;
	z-index: 0;
	margin: 0;
}

.norte-hero > .wp-block-norte-hero-slider .norte-slider {
	position: absolute;
	inset: 0;
}

.norte-slider {
	display: grid;
	grid-template-columns: 1fr 13.9vw;
	background: var(--n-paper);
}

.norte-slider__stage {
	position: relative;
	overflow: hidden;
	background: var(--n-night);
}

.norte-slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.norte-slide.is-active {
	z-index: 1;
	visibility: visible;
	opacity: 1;
	transition: opacity 1.1s ease, visibility 0s;
}

.norte-slide__media {
	position: absolute;
	inset: 0;
	display: block;
}

.norte-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.norte-slide.is-active .norte-slide__media img {
	transform: scale(1);
}

.norte-slide__caption {
	position: absolute;
	top: 9.3vw;
	right: 4.4vw;
	width: max(150px, 9.6vw);
	color: #fff;
	text-shadow: 0 1px 14px rgb(0 0 0 / 0.35);
}

.norte-slide__kicker {
	font-family: var(--n-mono);
	font-size: clamp(9px, 0.62vw, 11px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.8;
}

.norte-slide__title {
	margin-top: 0.9vw !important;
	font-family: var(--n-headline);
	font-size: clamp(17px, 1.42vw, 23px);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: 0;
}

.norte-slide__title a {
	text-decoration: none;
}

.norte-slide__title a::after {
	content: "";
	position: absolute;
	inset: -1rem;
}

.norte-slide__caption .norte-arrow {
	margin-top: 1.3vw;
	width: 14px;
}

.norte-slider__aside {
	position: relative;
	margin-top: var(--n-header);
	overflow: hidden;
	background: var(--n-night);
	color: var(--n-snow);
}

.norte-slider__peek {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.norte-slider__peek img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: brightness(0.62) saturate(0.85);
	transition: opacity 1.1s ease;
}

.norte-slider__peek img.is-next {
	opacity: 1;
}

.norte-slider__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, rgb(0 0 0 / 0.9) 82%);
	pointer-events: none;
}

.norte-slider__nav {
	position: absolute;
	left: 2.8vw;
	bottom: 2.4vw;
	z-index: 1;
}

.norte-slider__count {
	font-family: var(--n-mono);
	font-size: clamp(9px, 0.62vw, 11px);
	letter-spacing: 0.1em;
}

.norte-slider__buttons {
	display: flex;
	gap: 1.4vw;
	margin-top: 0.9vw;
}

.norte-slider__buttons button {
	display: grid;
	place-items: center;
	padding: 4px 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.norte-slider__buttons button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

.norte-slider__buttons .norte-arrow {
	width: 13px;
	transition: transform 0.25s ease;
}

.norte-slider__prev:hover .norte-arrow {
	transform: scaleX(-1) translateX(3px);
}

.norte-slider__next:hover .norte-arrow {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
 * Portada · Destacado, lista y cita
 * ----------------------------------------------------------------------- */

.norte-stories {
	display: grid;
	grid-template-columns: 35.6% 35.8% 1fr;
	min-height: 35.4vw;
	background: var(--n-night);
	color: var(--n-snow);
}

/* Tarjeta con palabra gigante. */
.norte-feature {
	position: relative;
	overflow: hidden;
	padding: 2.6vw 0 3.7vw 4.5vw;
}

.norte-feature__card {
	position: relative;
	isolation: isolate;
	height: 100%;
	min-height: 26vw;
	overflow: hidden;
}

.norte-feature__card .is-style-norte-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 45%);
}

.norte-feature__card:hover .is-style-norte-fill img,
.norte-card:hover :is(.is-style-norte-fill, .norte-card__media) img {
	transform: scale(1.035);
}

.norte-feature__caption {
	padding: 2.2vw 2vw;
}

.norte-feature__caption::after {
	content: "";
	display: block;
	width: 14px;
	height: 8px;
	margin-top: 1.4vw;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
}

.norte-feature__title {
	margin-top: 1.2vw !important;
	font-family: var(--n-headline);
	font-size: clamp(18px, 1.7vw, 28px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
}

.norte-feature__title a {
	text-decoration: none;
}

.norte-feature__word {
	position: absolute;
	left: -0.7vw;
	bottom: 2.3vw;
	z-index: 2;
	font-family: var(--n-display);
	font-size: 13.2vw;
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.035em;
	white-space: nowrap;
	color: var(--n-snow);
	pointer-events: none;
}

/* Lista numerada sobre papel. */
.norte-list {
	display: flex;
	flex-direction: column;
	padding: 0.6vw 2vw 0.6vw 2.7vw;
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-list .wp-block-post-template {
	display: grid;
	flex: 1;
	grid-auto-rows: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: norte-list;
}

.norte-list .wp-block-post-template > li {
	margin: 0;
	counter-increment: norte-list;
	border-bottom: 1px solid var(--n-paper-line);
}

.norte-list .wp-block-post-template > li:last-child {
	border-bottom: 0;
}

.norte-list__item {
	position: relative;
	display: grid;
	grid-template-columns: 2.5vw 1fr 12.1vw;
	align-items: center;
	height: 100%;
	padding: 1.1vw 0;
}

.norte-list__item::before {
	content: counter(norte-list, decimal-leading-zero);
	align-self: start;
	padding-top: 1.05vw;
	font-family: var(--n-mono);
	font-size: clamp(9px, 0.62vw, 11px);
	letter-spacing: 0.08em;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.norte-list__item::after {
	content: "";
	position: absolute;
	right: calc(12.1vw + 1.6vw);
	top: calc(50% + 0.6vw);
	width: 12px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.norte-list__item:hover::after {
	transform: translateX(3px);
}

.norte-list__text {
	align-self: start;
	padding: 1vw 4.2vw 0 0;
}

.norte-list__text .wp-block-post-terms,
.norte-card .wp-block-post-terms {
	position: relative;
	z-index: 2;
	font-size: clamp(9px, 0.6vw, 11px);
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.norte-list__text .wp-block-post-terms a,
.norte-card .wp-block-post-terms a {
	text-decoration: none;
}

.norte-list__title {
	margin-top: 0.5vw !important;
	font-family: var(--n-headline);
	font-size: clamp(16px, 1.28vw, 21px);
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: 0;
}

.norte-list__title a {
	text-decoration: none;
}

.norte-list__thumb {
	width: 12.1vw;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}

.norte-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.norte-list__item:hover .norte-list__thumb img {
	transform: scale(1.05);
}

/* Cita vertical sobre fotografía. */
.norte-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--n-snow);
}

.norte-quote .is-style-norte-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.25));
}

.norte-quote__text {
	position: absolute !important;
	left: 6.2vw;
	bottom: 6.6vw;
	font-size: clamp(2rem, 3.6vw, 4.5rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.015em;
	font-family: var(--n-display);
}

.norte-quote__label {
	position: absolute;
	top: 5vw;
	right: 4.2vw;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--n-snow);
	font-size: clamp(9px, 0.6vw, 11px);
}

.norte-quote::after {
	content: "";
	position: absolute;
	right: calc(4.2vw + 0.5em - 5px);
	bottom: 3.7vw;
	width: 10px;
	height: clamp(48px, 6.4vw, 96px);
	background: currentColor;
	-webkit-mask: var(--n-arrow-up) top center / 100% 100% no-repeat;
	mask: var(--n-arrow-up) top center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
 * Tarjetas (proyectos y rejillas de entradas)
 * ----------------------------------------------------------------------- */

.norte-projects {
	padding: 1.9vw var(--n-gutter) 2vw 5.1vw;
	background: var(--n-night);
	color: var(--n-snow);
}

.norte-projects__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1.07fr 1.11fr;
	gap: 2vw;
	margin-top: 1.5vw;
}

.norte-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 20.4vw;
	padding: 1.3vw 1.3vw 0.9vw;
	overflow: hidden;
	background: var(--n-coal);
	color: var(--n-snow);
}

.norte-card :is(.is-style-norte-fill, .norte-card__media) {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	height: auto !important;
}

.norte-card :is(.is-style-norte-fill, .norte-card__media)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.08) 55%, transparent);
}

.norte-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.norte-card__title {
	font-family: var(--n-headline);
	font-size: clamp(18px, 1.56vw, 25px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.norte-card__title a {
	text-decoration: none;
}

.norte-card__more {
	display: flex;
	align-items: center;
	gap: 1.2vw;
	margin-top: 1.25vw !important;
	color: var(--n-snow);
	font-size: clamp(9px, 0.6vw, 11px);
}

.norte-card__more::after {
	content: "";
	width: 12px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.norte-card:hover .norte-card__more::after {
	transform: translateX(3px);
}

.norte-card__num {
	position: absolute;
	right: 1.3vw;
	bottom: 0.9vw;
	color: var(--n-snow);
	font-size: clamp(9px, 0.6vw, 11px);
}

.norte-card__terms {
	margin-bottom: 0.8vw !important;
}

.norte-card__date {
	margin-top: 0.9vw !important;
	font-size: clamp(9px, 0.6vw, 11px) !important;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* --------------------------------------------------------------------------
 * Portada · Blog y últimas entradas
 * ----------------------------------------------------------------------- */

.norte-journal {
	display: grid;
	grid-template-columns: 33.9% 30.4% 1fr;
	min-height: 31.8vw;
	background: var(--n-night);
	color: var(--n-snow);
}

.norte-journal__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 4.3vw 3.5vw 2.1vw 5.4vw;
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-journal__title {
	font-size: clamp(2rem, 3.15vw, 4rem);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-family: var(--n-display);
}

.norte-journal__lead {
	max-width: 19em;
	margin-top: 3.6vw !important;
	font-size: var(--n-small);
	line-height: 1.5;
}

.norte-journal__intro .is-style-norte-link {
	margin-top: 2.6vw !important;
}

.norte-count {
	display: flex;
	align-items: center;
	gap: 1.1vw;
	margin-top: auto !important;
	padding-top: 2rem;
	font-family: var(--n-mono);
	font-size: clamp(9px, 0.6vw, 11px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.norte-count__bar {
	position: relative;
	width: 5.4vw;
	min-width: 48px;
	height: 1px;
	background: color-mix(in srgb, currentColor 30%, transparent);
}

.norte-count__bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 28%;
	height: 3px;
	background: currentColor;
}

.norte-journal__latest {
	padding: 3.6vw 2.4vw 1.6vw 2.2vw;
}

.norte-journal__head a {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.norte-journal__head {
	margin-bottom: 0.9vw !important;
}

.norte-latest .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.norte-latest .wp-block-post-template > li {
	margin: 0;
	border-bottom: 1px solid var(--n-night-line);
}

.norte-latest .wp-block-post-template > li:last-child {
	border-bottom: 0;
}

.norte-latest__item {
	position: relative;
	display: grid;
	grid-template-columns: 5.7vw 1fr;
	align-items: center;
	gap: 1.2vw;
	padding: 0.9vw 2.6vw 0.9vw 0;
}

.norte-latest__item::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 12px;
	height: 8px;
	background: currentColor;
	-webkit-mask: var(--n-arrow) center / contain no-repeat;
	mask: var(--n-arrow) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.norte-latest__item:hover::after {
	transform: translateX(3px);
}

.norte-latest__thumb {
	width: 5.7vw;
	min-width: 56px;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.norte-latest__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.norte-latest__title {
	font-family: var(--n-headline);
	font-size: clamp(15px, 1.2vw, 20px);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: 0;
}

.norte-latest__title a {
	text-decoration: none;
}

.norte-latest__text .wp-block-post-date {
	margin-top: 0.7vw;
	font-size: clamp(9px, 0.6vw, 11px);
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.norte-journal__photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.norte-journal__photo .is-style-norte-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgb(0 0 0 / 0.5), transparent 55%);
}

.norte-journal__quote {
	position: absolute;
	top: 3.2vw;
	right: 4.4vw;
	width: max(170px, 10.6vw);
}

.norte-journal__quote-text {
	font-family: var(--n-headline);
	font-size: clamp(16px, 1.25vw, 22px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
}

.norte-journal__quote-author {
	margin-top: 1.1vw !important;
	padding-left: 0.6vw;
	color: var(--n-snow);
	font-size: clamp(9px, 0.56vw, 10px);
}

/* --------------------------------------------------------------------------
 * Pie
 * ----------------------------------------------------------------------- */

.norte-footer {
	padding: 2.2vw var(--n-gutter) 2.1vw 4.5vw;
	border-top: 1px solid var(--n-night-line);
	background: #0a0a0a;
	color: var(--n-snow);
}

.norte-footer__top {
	display: grid;
	grid-template-columns: 25.6% 29.2% 1fr auto;
	align-items: start;
}

.norte-social.wp-block-social-links {
	gap: 1.4vw;
	margin: 0.3vw 0 0 1vw;
	font-size: 14px;
}

.norte-social .wp-social-link {
	color: var(--n-snow) !important;
	background: none !important;
}

.norte-social .wp-block-social-link-anchor {
	padding: 0 !important;
}

.norte-social .wp-social-link:hover {
	transform: none;
	opacity: 0.65;
}

.norte-footer__brand {
	margin-top: 0.7vw !important;
	font-size: clamp(11px, 0.88vw, 14px);
	letter-spacing: 0.3em;
	line-height: 1;
}

.norte-footer__brand a {
	text-decoration: none;
}

.norte-footer__newsletter .is-style-norte-label {
	color: var(--n-snow);
	font-size: clamp(9px, 0.56vw, 10px);
}

.norte-footer__note {
	margin-top: 0.3vw !important;
	font-size: clamp(10px, 0.62vw, 12px);
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.norte-newsletter {
	display: flex;
	align-items: center;
	max-width: max(260px, 20vw);
	height: max(32px, 1.9vw);
	margin-top: 0.8vw;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.norte-newsletter input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 0.9em;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--n-mono);
	font-size: clamp(11px, 0.62vw, 12px);
}

.norte-newsletter input::placeholder {
	color: color-mix(in srgb, currentColor 50%, transparent);
}

.norte-newsletter input:focus {
	outline: none;
}

.norte-newsletter:focus-within {
	border-color: currentColor;
}

.norte-newsletter button {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 0 0.9em;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.norte-newsletter .norte-arrow {
	width: 12px;
}

.norte-footer__nav {
	align-self: stretch;
	padding-left: 1.8vw;
	border-left: 1px solid var(--n-night-line);
	font-family: var(--n-mono);
	font-size: clamp(9px, 0.56vw, 10px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--n-snow) 75%, transparent);
}

.norte-footer__nav.wp-block-navigation,
.norte-footer__nav .wp-block-navigation__container {
	gap: 0.15em;
}

.norte-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--n-snow);
}

.norte-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.4vw;
}

.norte-footer__bottom .is-style-norte-label {
	font-size: clamp(8px, 0.52vw, 10px);
	color: color-mix(in srgb, var(--n-snow) 45%, transparent);
}

/* --------------------------------------------------------------------------
 * Entrada y página
 * ----------------------------------------------------------------------- */

.norte-entry-hero {
	display: grid;
	grid-template-columns: 40.8% 1fr;
	min-height: max(440px, 38vw);
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-entry-hero:not(:has(.norte-entry-hero__image)) {
	grid-template-columns: 1fr;
	min-height: 0;
}

.norte-entry-hero__panel,
.norte-archive-head__panel,
.norte-404__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 5vw 3.5vw 4.4vw 9.5vw;
}

.norte-entry-hero__panel::before,
.norte-archive-head__panel::before,
.norte-404__panel::before {
	content: "";
	position: absolute;
	left: var(--n-rule-x);
	top: 3vw;
	bottom: 4.4vw;
	width: 1px;
	background: color-mix(in srgb, currentColor 45%, transparent);
}

.norte-entry-hero__panel .wp-block-post-terms {
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.norte-entry-hero__panel .wp-block-post-terms a {
	text-decoration: none;
}

.norte-entry-hero__title {
	margin-top: 1.2vw !important;
	font-size: clamp(2.25rem, 4vw, 5rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-wrap: balance;
	font-family: var(--n-display);
}

.norte-entry-hero__lead {
	max-width: 30em;
	margin-top: 2vw !important;
	font-size: var(--n-small);
	line-height: 1.55;
}

.norte-entry-hero__lead .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.norte-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 2.4em;
	margin-top: 2.6vw;
}

.norte-entry-meta > *,
.norte-reading-time {
	margin: 0;
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.norte-entry-hero__image {
	margin: 0;
	height: 100% !important;
	overflow: hidden;
}

.norte-entry-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cuerpo del artículo, como en el tema Kalunat original -------------------
 * Hasta 1280px la columna mide 52,5rem (840px) y va centrada. Desde
 * 1280px se coloca como en el modo «Suizo» de Kalunat: una rejilla de 12
 * columnas entre los márgenes, con la columna de texto en las columnas
 * 3 a 8 (sin la barra lateral, el hueco de la derecha queda libre).
 * --n-shift es lo que la columna se aparta del centro; todo se calcula desde
 * su ancho real (--n-col-w), sin porcentajes, para que valga igual a
 * cualquier profundidad: los artículos escritos con Eroica envuelven el
 * texto en grupos, que aquí ocupan la columna. --norte-sbw es el ancho
 * de la barra de desplazamiento (header.js), para no provocar
 * desplazamiento lateral.
 */
.norte-entry {
	--n-view: calc(100vw - var(--norte-sbw, 0px));
	--n-col-w: min(var(--wp--custom--measure, 52.5rem), var(--n-view) - 2 * var(--n-gutter));
	--n-bleed: calc((var(--n-view) - var(--n-col-w)) / 2);
	--n-shift: 0px;
	--n-article-text: color-mix(in srgb, var(--n-ink) 80%, var(--n-paper));
	--n-muted: color-mix(in srgb, var(--n-ink) 55%, var(--n-paper));
	padding: clamp(3rem, 6vw, 6rem) var(--n-gutter) clamp(4rem, 7vw, 7rem);
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-entry > * {
	max-width: var(--n-col-w);
	margin-left: max(0px, var(--n-bleed) - var(--n-gutter) - var(--n-shift)) !important;
	margin-right: auto !important;
}

/* Rejilla «suiza» de Kalunat: 12 columnas entre los márgenes con 1,5rem
 * entre ellas; la columna de texto ocupa de la 3 a la 8 (la mitad del
 * ancho, tras dos columnas libres) y no pasa de 60rem en pantallas muy
 * grandes. --n-col-x es su sangría desde el margen izquierdo. */
@media (min-width: 1280px) {

	.norte-entry {
		--n-grid-gap: 1.5rem;
		--n-grid-c: calc((var(--n-view) - 2 * var(--n-gutter) - 11 * var(--n-grid-gap)) / 12);
		--n-col-x: calc(2 * (var(--n-grid-c) + var(--n-grid-gap)));
		--n-col-w: min(6 * var(--n-grid-c) + 5 * var(--n-grid-gap), 60rem);
		--n-shift: calc(var(--n-bleed) - var(--n-gutter) - var(--n-col-x));
	}
}

/* Párrafos y listas en Freight Text, a un tamaño fluido: 18px en móvil y
 * hasta 1,4rem (22,4px) desde unos 1280px de ancho, con interlineado de
 * 1,33. */
.norte-entry__content {
	counter-reset: norte-figure;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
	line-height: 1.33;
	letter-spacing: 0;
}

.norte-entry__content :is(p, li):not(blockquote p, .is-style-label, .is-style-cnvs-paragraph-callout) {
	font-family: var(--n-serif);
	line-height: 1.33;
}

/* El espacio normal entre bloques, también dentro de los grupos. */
.norte-entry__content > * + *,
.norte-entry__content :is(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: clamp(1rem, 1.5vw, 1.5rem);
}

.norte-entry__content > :first-child {
	margin-block-start: 0;
}

/* Los grupos del contenido ocupan la columna entera. */
.norte-entry__content .is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	max-width: none;
}

/* Párrafos en gris muy oscuro; las negritas, a 700 y en el color pleno
 * del texto, para que contrasten. Se respetan los tamaños elegidos en el
 * editor y no se tocan las citas. */
.norte-entry__content p:not(blockquote p) {
	color: var(--n-article-text);
	font-weight: 400;
}

.norte-entry__content p:not([class*="-font-size"], blockquote p) {
	font-size: inherit;
}

.norte-entry__content :is(b, strong) {
	color: var(--n-ink);
	font-weight: 700;
}

/* «Rótulo» (is-style-label, también en el contenido escrito con
 * Eroica): mayúsculas pequeñas y muy espaciadas, en la letra de la
 * interfaz; si se le eligió un tamaño en el editor, a ese tamaño. */
.norte-entry__content .is-style-label {
	color: var(--n-ink);
	font-family: var(--n-mono);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.19em;
	word-spacing: 0;
	text-transform: uppercase;
}

/* Los rótulos que hacen de título de sección (h2), más grandes (de 1,25rem
 * en móvil a 1,8rem desde unos 1280px) y con algo menos de espaciado, que
 * a este tamaño se abre demasiado. */
.norte-entry__content h2.is-style-label:not([class*="-font-size"]) {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
	line-height: 1.15;
	letter-spacing: 0.12em;
}

/* Encabezados: más aire por encima (separan secciones) y algo más por
 * debajo que el espacio normal; tamaños de Kalunat. */
.norte-entry__content :is(h2, h3) {
	margin-block-start: clamp(2rem, 3.75vw, 4rem);
	margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}

.norte-entry__content :is(h2, h3, h4):not(.is-style-label) {
	text-wrap: balance;
	word-break: keep-all;
}

.norte-entry__content h2:not(.is-style-label, [class*="-font-size"]) {
	font-size: clamp(2.97rem, 1.62rem + 5.4vw, 6.48rem);
	line-height: 1;
	letter-spacing: -0.02em;
	font-family: var(--n-display);
	font-weight: 300;
}

.norte-entry__content h3:not(.is-style-label, [class*="-font-size"]) {
	font-size: clamp(2.16rem, 1.404rem + 2.808vw, 3.78rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-family: var(--n-headline);
	font-weight: 400;
}

.norte-entry__content h4:not(.is-style-label, [class*="-font-size"]) {
	font-size: clamp(1.728rem, 1.35rem + 1.512vw, 2.592rem);
	line-height: 1.1;
	letter-spacing: 0;
	font-family: var(--n-headline);
	font-weight: 400;
}

/* Más aire entre el texto y las imágenes o galerías (el espacio normal
 * se queda entre párrafos y entre fotos seguidas). */
.norte-entry__content :not(figure) + :is(figure.wp-block-image, .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery),
.norte-entry__content :is(figure.wp-block-image, .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery) + :not(figure, h2, h3) {
	margin-block-start: clamp(1.5rem, 2.5vw, 2.5rem);
}

.norte-entry__content .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
	display: block;
}

/* Imágenes y galerías «amplias»: solo un 8% más anchas que el texto,
 * centradas, para un conjunto recogido. Otros bloques amplios, hasta los
 * márgenes. Lo «completo», de borde a borde. */
.norte-entry__content :is(.wp-block-image, .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery).alignwide {
	box-sizing: border-box;
	width: calc(var(--n-col-w) * 1.08) !important;
	max-width: none !important;
	margin-left: calc(var(--n-col-w) * -0.04) !important;
	margin-right: 0 !important;
}

.norte-entry__content .alignwide:not(.wp-block-image, .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery) {
	box-sizing: border-box;
	width: calc(var(--n-view) - 2 * var(--n-gutter)) !important;
	max-width: none !important;
	margin-left: calc(var(--n-gutter) - var(--n-bleed) + var(--n-shift)) !important;
	margin-right: 0 !important;
}

.norte-entry__content .alignfull {
	box-sizing: border-box;
	width: var(--n-view) !important;
	max-width: none !important;
	margin-left: calc(var(--n-shift) - var(--n-bleed)) !important;
	margin-right: 0 !important;
}

.norte-entry__content .wp-block-image:is(.alignwide, .alignfull) img {
	width: 100%;
	height: auto;
}

/* En la rejilla suiza, las imágenes y galerías amplias se ensanchan una
 * columna de la rejilla por cada lado (de la 2 a la 9), centradas en el
 * texto. */
@media (min-width: 1280px) {

	.norte-entry__content :is(.wp-block-image, .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery).alignwide {
		width: calc(var(--n-col-w) + 2 * (var(--n-grid-c) + var(--n-grid-gap))) !important;
		margin-left: calc(-1 * (var(--n-grid-c) + var(--n-grid-gap))) !important;
	}
}

/* En móvil las fotos y galerías van de borde a borde: en una pantalla
 * estrecha cada píxel de foto cuenta. */
@media (max-width: 768px) {

	.norte-entry__content :is(.wp-block-image:not(.alignleft, .alignright, .wp-block-gallery .wp-block-image), .wp-block-gallery, .ejg-gallery, .wp-block-eroica-justified-gallery) {
		box-sizing: border-box;
		width: var(--n-view) !important;
		max-width: none !important;
		margin-left: calc(var(--n-shift) - var(--n-bleed)) !important;
		margin-right: 0 !important;
	}
}

/* Pies de foto: pequeños, en la letra de la interfaz, alineados a la
 * izquierda bajo la foto y numerados en cada entrada (01, 02, 03…), con
 * el número en el color pleno del texto. Valen para las imágenes
 * sueltas, el pie de las galerías y el de las galerías justificadas
 * (.ejg-gallery-caption). Los pies de cada foto dentro de una galería
 * siguen con el diseño de WordPress. */
.norte-entry__content .wp-block-image:not(.wp-block-gallery .wp-block-image) > .wp-element-caption,
.norte-entry__content .wp-block-gallery > .blocks-gallery-caption,
.norte-entry__content .ejg-gallery-caption {
	display: block;
	max-width: none;
	margin: 0.9em 0 0;
	color: var(--n-muted);
	font-family: var(--n-mono);
	font-size: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: none;
}

.norte-entry__content .wp-block-image:not(.wp-block-gallery .wp-block-image) > .wp-element-caption::before,
.norte-entry__content .wp-block-gallery > .blocks-gallery-caption::before,
.norte-entry__content .ejg-gallery-caption::before {
	content: counter(norte-figure, decimal-leading-zero);
	margin-right: 1em;
	color: var(--n-ink);
	counter-increment: norte-figure;
}

/* A sangre (y en móvil, donde todas lo van), el pie recupera el margen. */
.norte-entry__content :is(.wp-block-image.alignfull, .wp-block-gallery.alignfull) > :is(.wp-element-caption, .blocks-gallery-caption),
.norte-entry__content .ejg-gallery.alignfull .ejg-gallery-caption {
	/* Bajo una foto de borde a borde, el pie empieza en la línea del texto
	 * (columna 3 en la rejilla), no en el margen de la página. */
	padding-inline: max(var(--n-gutter), var(--n-bleed) - var(--n-shift)) var(--n-gutter);
}

@media (max-width: 768px) {

	.norte-entry__content .wp-block-image:not(.wp-block-gallery .wp-block-image) > .wp-element-caption,
	.norte-entry__content .ejg-gallery .ejg-gallery-caption {
		padding-inline: var(--n-gutter);
	}
}

/* Enlaces: subrayado fino y separado; los que abren otra pestaña, con una
 * flecha en diagonal (los lectores de pantalla oyen «abre en una pestaña
 * nueva»). */
.norte-entry__content a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.norte-entry__content a[target="_blank"]:not(:has(img))::after {
	content: "\2197";
	content: "\2197" / " (abre en una pestaña nueva)";
	display: inline-block;
	margin-left: 0.15em;
	font-family: var(--n-mono);
	font-weight: 400;
	text-decoration: none;
}

/* Citas grandes, en la letra de los titulares y sin filete. */
.norte-entry__content .wp-block-quote {
	margin-block: clamp(2.5rem, 6vw, 6rem);
	padding: 0;
	border: 0;
	font-family: var(--n-display);
	font-size: clamp(1.89rem, 1.2rem + 2.2vw, 3.24rem);
	font-style: normal;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.norte-entry__content .wp-block-quote p {
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-wrap: balance;
}

.norte-entry__content .wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--n-mono);
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.norte-entry__content .wp-block-pullquote {
	padding: clamp(2rem, 3.75vw, 4rem) 0;
	border: 0;
	font-family: var(--n-display);
	font-size: clamp(2.7rem, 1.6rem + 3.6vw, 5.4rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* Entradilla destacada (estilo «callout» de Eroica/Kalunat) y capitular:
 * también en Freight Big. */
.norte-entry__content p.is-style-cnvs-paragraph-callout {
	margin-block: clamp(1.5rem, 2.5vw, 2.5rem);
	color: var(--n-ink);
	font-family: var(--n-display);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.norte-entry__content .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--n-ink);
	font-family: var(--n-display);
	font-size: 4.6em;
	font-weight: 300;
	font-style: normal;
	line-height: 0.8;
}

.norte-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3.5rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--n-paper-line);
	font-size: var(--n-label);
}

.norte-entry__tags a {
	padding: 0.45em 0.9em;
	border: 1px solid var(--n-paper-line);
	text-decoration: none;
}

.norte-entry__tags a:hover {
	border-color: currentColor;
}

.norte-entry__tags .wp-block-post-terms__separator {
	display: none;
}

/* «Info práctica» (variación del bloque Grupo, assets/js/editor.js): un
 * panel con el fondo de la página en cada modo (papel en claro, carbón en
 * oscuro), enmarcado por un filete fino y con el filete vertical de Norte. Arriba el rótulo, el título en Freight Big y una entradilla;
 * después una fila de datos rápidos entre filetes y, debajo, las
 * secciones numeradas (cómo llegar, dónde alojarse, consejos…) en
 * columnas que se adaptan al ancho. Vale igual en la web y en el editor. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info {
	--i-line: var(--n-paper-line);
	--i-muted: color-mix(in srgb, var(--n-ink) 55%, var(--n-paper));
	--i-text: color-mix(in srgb, var(--n-ink) 80%, var(--n-paper));
	position: relative;
	box-sizing: border-box;
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4.4vw, 3.75rem) clamp(2.75rem, 7vw, 6rem);
	border: 1px solid var(--i-line);
	background: var(--n-paper);
	color: var(--n-ink);
	counter-reset: norte-info;
}

.norte-entry__content > .norte-info {
	margin-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}

/* El filete vertical de los paneles de Norte. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info::before {
	content: "";
	position: absolute;
	top: clamp(1.75rem, 4vw, 3.5rem);
	bottom: clamp(2rem, 4.4vw, 3.75rem);
	left: clamp(1.25rem, 3.2vw, 2.6rem);
	width: 1px;
	background: color-mix(in srgb, var(--n-ink) 35%, transparent);
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info :is(p, li) {
	color: var(--i-text);
	font-family: var(--n-text);
	font-size: var(--n-small);
	font-weight: 350;
	line-height: 1.5;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info :is(strong, b) {
	color: var(--n-ink);
	font-weight: 600;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info a {
	color: var(--n-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
	text-underline-offset: 0.2em;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info a:hover {
	text-decoration-color: currentColor;
}

/* Cabeza. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__head > * {
	margin: 0;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__kicker {
	color: var(--i-muted);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 400;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__heading {
	max-width: 18ch;
	margin-top: 0.9rem;
	color: var(--n-ink);
	font-family: var(--n-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__lead {
	max-width: 46ch;
	margin-top: 1.1rem;
}

/* Datos rápidos: una fila entre filetes, separados por filetes finos. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	border-block: 1px solid var(--i-line);
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact {
	margin: 0;
	padding: 1rem 1.1rem 1.05rem;
	border-left: 1px solid var(--i-line);
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact:first-child {
	padding-left: 0;
	border-left: 0;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact > * {
	margin: 0;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact-label {
	color: var(--i-muted);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact-value {
	margin-top: 0.35rem;
	color: var(--n-ink);
	font-family: var(--n-headline);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 400;
	line-height: 1.15;
}

/* Secciones numeradas, en columnas que se adaptan al ancho. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3.25rem);
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__section {
	margin: 0;
	counter-increment: norte-info;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__section::before {
	content: counter(norte-info, decimal-leading-zero);
	display: block;
	margin-bottom: 0.7rem;
	color: var(--i-muted);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.16em;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__section > * {
	margin: 0;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__section > * + * {
	margin-top: 0.75rem;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info :is(h3, .norte-info__title) {
	margin: 0 0 0.85rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--i-line);
	color: var(--n-ink);
	font-family: var(--n-headline);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Listas: una raya corta en lugar de la viñeta. */
:is(.norte-entry__content, .editor-styles-wrapper) .norte-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info ul li {
	position: relative;
	margin: 0;
	padding-left: 1.3em;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info ul li + li {
	margin-top: 0.5rem;
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info ul li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 0.7em;
	height: 1px;
	background: var(--i-muted);
}

:is(.norte-entry__content, .editor-styles-wrapper) .norte-info ol {
	margin: 0;
	padding-left: 1.2em;
}

/* En móvil, enmarcado en la columna de texto y sin el filete vertical. */
@media (max-width: 768px) {

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info {
		padding: 1.75rem 1.25rem 2rem;
	}

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info::before {
		content: none;
	}

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact,
	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact:first-child {
		padding: 0.9rem 0.9rem 0.95rem 0;
		border-left: 0;
	}

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact:nth-child(even) {
		padding-left: 0.9rem;
		border-left: 1px solid var(--i-line);
	}

	:is(.norte-entry__content, .editor-styles-wrapper) .norte-info .norte-info__fact:nth-child(n + 3) {
		border-top: 1px solid var(--i-line);
	}
}

/* Comentarios, como en el tema Kalunat pero compactos y en una sola
 * columna, del ancho exacto del texto (son hijos de .norte-entry):
 * 1. Barra «Comentarios (3)» entre dos filetes.
 * 2. Los comentarios: avatar, nombre en Freight Display, fecha en
 *    versalitas, texto y «Responder» subrayado a la derecha; las
 *    respuestas, sangradas. Sin comentarios, la silueta de dos
 *    comentarios vacíos y una frase invitando a empezar.
 * 3. Debajo, el formulario: cada campo es una caja con su etiqueta
 *    montada sobre el borde superior; nombre, email y web en una fila. */
.norte-comments {
	--n-muted: color-mix(in srgb, var(--n-ink) 55%, var(--n-paper));
	--n-field-h: 3rem;
	margin-top: clamp(3rem, 5vw, 4.5rem) !important;
}

.norte-comments > * {
	margin-block: 0;
}

/* 1. Barra. */
.norte-comments .norte-comments__bar {
	gap: 0.5em;
	padding-block: 0.85rem;
	border-block: 1px solid var(--n-ink);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 400;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.norte-comments__bar > * {
	margin: 0;
}

.norte-comments .norte-comments__count {
	color: var(--n-muted);
	font: inherit;
}

.norte-comments__count::before {
	content: "(";
}

.norte-comments__count::after {
	content: ")";
}

/* 2. Los comentarios. */
.norte-comments .norte-comments__list {
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.norte-comments__list > * {
	margin-block: 0;
}

.norte-comments__list .wp-block-comment-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.norte-comments__list .wp-block-comment-template li {
	margin: 0;
}

.norte-comments__list .wp-block-comment-template li + li,
.norte-comments__list .wp-block-comment-template ol {
	margin-top: 1.25rem;
}

.norte-comments__list .wp-block-comment-template li + li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--n-paper-line);
}

.norte-comments__list .wp-block-comment-template ol {
	padding-left: clamp(1.25rem, 4vw, 3.5rem);
	list-style: none;
}

.norte-comment > * {
	margin-block: 0;
}

.norte-comment .norte-comment__heading {
	gap: 0.9rem;
	margin-bottom: 0.6rem;
}

.norte-comment__avatar img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.norte-comment__meta > * {
	margin: 0;
}

.norte-comment .norte-comment__author {
	font-family: var(--n-headline);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
	font-weight: 400;
	line-height: 1.1;
}

.norte-comment__author a {
	color: inherit;
	text-decoration: none;
}

/* El autor de la entrada, con una etiqueta. */
.bypostauthor > .norte-comment .norte-comment__author::after {
	content: "Autor";
	display: inline-block;
	margin-left: 0.6em;
	padding: 0.35em 0.65em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--n-mono);
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: middle;
}

.norte-comment .norte-comment__date {
	margin-top: 0.3em;
	color: var(--n-muted);
	font-size: var(--n-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.norte-comment__date a {
	color: inherit;
	text-decoration: none;
}

.norte-comment .norte-comment__text {
	color: color-mix(in srgb, var(--n-ink) 80%, var(--n-paper));
	font-size: var(--n-small);
	font-weight: 350;
	line-height: 1.45;
}

.norte-comment__text p {
	margin: 0 0 0.6em;
}

.norte-comment__text .comment-awaiting-moderation {
	display: inline-block;
	padding: 0.3em 0.9em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--n-label);
	opacity: 0.55;
}

.norte-comment .norte-comment__reply {
	width: fit-content;
	margin-left: auto;
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.norte-comment__reply a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.norte-comments .norte-comments__pagination {
	margin-top: 1.5rem;
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.norte-comments__list:has(.wp-block-comment-template) .norte-comments__empty {
	display: none;
}

/* Sin comentarios: dos siluetas (avatar y tres líneas) con degradados
 * en un solo pseudo-elemento que se repite cada 96px. */
.norte-comments__empty {
	--n-ghost: color-mix(in srgb, var(--n-ink) 7%, transparent);
}

.norte-comments__empty::before {
	content: "";
	display: block;
	height: 168px;
	background:
		radial-gradient(circle at 22px 22px, var(--n-ghost) 21px, transparent 22px) 0 0 / 44px 96px repeat-y,
		linear-gradient(var(--n-ghost) 0 9px, transparent 9px) 60px 8px / 40% 96px repeat-y,
		linear-gradient(var(--n-ghost) 0 9px, transparent 9px) 60px 30px / calc(100% - 60px) 96px repeat-y,
		linear-gradient(var(--n-ghost) 0 9px, transparent 9px) 60px 50px / calc(70% - 60px) 96px repeat-y;
}

.norte-comments__empty p {
	margin: 0.75rem 0 0;
	color: var(--n-muted);
	font-size: var(--n-small);
}

/* Al pulsar «Responder», WordPress mueve el formulario bajo el
 * comentario. */
.norte-comments__list .wp-block-post-comments-form {
	margin-top: 1.25rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--n-paper-line);
}

/* 3. El formulario. */
.norte-comments .norte-comments__form {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.norte-comments__form:empty {
	display: none;
}

.norte-comments .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 0.5rem;
	font-family: var(--n-mono);
	font-size: var(--n-label);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.norte-comments .comment-reply-title small {
	font-size: inherit;
}

.norte-comments .comment-reply-title small a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.norte-comments :is(.comment-notes, .logged-in-as, .must-log-in) {
	margin: 0;
	color: var(--n-muted);
	font-size: var(--n-small);
	line-height: 1.4;
}

.norte-comments :is(.comment-notes, .logged-in-as) a {
	color: inherit;
}

.norte-comments .comment-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem 0.75rem;
	margin-top: 1.25rem;
}

.norte-comments .comment-form > * {
	grid-column: 1 / -1;
	position: relative;
	margin: 0;
}

.norte-comments .comment-form > :is(.comment-form-author, .comment-form-email, .comment-form-url) {
	grid-column: auto;
}

/* La etiqueta, montada sobre el borde (con el fondo de la página para
 * «cortar» el filete). */
.norte-comments .comment-form > p:not(.comment-form-cookies-consent, .form-submit) > label {
	position: absolute;
	top: 0;
	left: 0.7rem;
	z-index: 1;
	padding: 0 0.4em;
	background: var(--n-paper);
	font-family: var(--n-mono);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transform: translateY(-50%);
}

.norte-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--n-field-h);
	padding: 0.6rem 1rem;
	border: 1px solid var(--n-ink);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--n-text);
	font-size: var(--n-small);
	font-weight: 350;
}

.norte-comments textarea {
	height: auto;
	min-height: 8.5rem;
	padding-top: 1rem;
	resize: vertical;
}

.norte-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
	box-shadow: 0 0 0 1px var(--n-ink);
	outline: none;
}

.norte-comments .comment-form-cookies-consent {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
}

.norte-comments .comment-form-cookies-consent label {
	color: var(--n-muted);
	font-size: var(--n-label);
	line-height: 1.4;
}

.norte-comments .comment-form-cookies-consent input {
	margin-top: 0.15em;
	accent-color: var(--n-ink);
}

/* El botón (el de todo el tema): a la derecha, de la altura de los
 * campos. */
.norte-comments .comment-form > .form-submit {
	justify-self: end;
	width: min(100%, 15rem);
}

.norte-comments .form-submit .wp-element-button {
	width: 100%;
	height: var(--n-field-h);
	padding-block: 0;
	cursor: pointer;
}

.norte-comments .required {
	color: var(--n-muted);
}

@media (max-width: 640px) {

	.norte-comments .comment-form > :is(.comment-form-author, .comment-form-email, .comment-form-url) {
		grid-column: 1 / -1;
	}

	.norte-comments .comment-form > .form-submit {
		width: 100%;
	}
}

/* Sigue leyendo. */
.norte-more {
	padding: 2.6vw var(--n-gutter) 4vw 5.1vw;
	background: var(--n-night);
	color: var(--n-snow);
}

.norte-more__query {
	margin-top: 1.5vw;
}

/* Títulos de las relacionadas, más grandes que en la rejilla del blog. */
.norte-more .norte-grid .norte-card__title {
	font-size: clamp(20px, 1.95vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
 * Plantilla «Hero: imagen completa» (como Keel)
 * La imagen destacada a pantalla completa con un velo oscuro y el título
 * muy grande a la izquierda, algo por debajo de la mitad; junto a él, el
 * extracto, y los datos de la entrada en una tira vertical en el borde
 * derecho de la foto, como el borde de un negativo.
 * Al cargar, la foto aparece desde la oscuridad con un zoom apenas
 * perceptible; al bajar, va algo más despacio que la página y se oscurece
 * un poco. La cabecera
 * flota en claro sobre la foto hasta que se baja.
 * ----------------------------------------------------------------------- */

.norte-single--hero {
	background: var(--n-paper);
}

.norte-post-hero.wp-block-cover {
	align-items: stretch;
	align-content: stretch;
	flex-wrap: nowrap;
	min-height: 100vh !important;
	min-height: 100svh !important;
	margin: 0;
	overflow: hidden;
	color: var(--n-snow);
}

/* Sin imagen destacada: un panel de noche, más bajo. */
.norte-post-hero.wp-block-cover:not(:has(.wp-block-cover__image-background)) {
	min-height: 75vh !important;
	background: var(--n-night);
}

.norte-post-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.wp-block-cover.norte-post-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

/* Velo: más denso a la izquierda (título) y abajo; un poco arriba
 * (cabecera). */
.norte-post-hero .wp-block-cover__background.has-background-gradient {
	background:
		linear-gradient(0deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 45%),
		linear-gradient(90deg, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0) 65%),
		linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 25%) !important;
	opacity: 1 !important;
}

/* Título: como en Keel, cerca del 60 % del ancho (Freight Big es más
 * estrecha que una grotesca, así que va a 12vw) y algo bajo la mitad. */
.norte-post-hero .wp-block-cover__inner-container > .norte-post-hero__content {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-block: auto 0;
	padding: calc(var(--n-header) + 2rem) var(--n-gutter) max(24vh, 9rem);
}

.norte-post-hero__content > * {
	margin-block: 0;
}

.norte-post-hero .norte-post-hero__title {
	max-width: 12ch;
	color: inherit;
	font-family: var(--n-display);
	font-size: clamp(3.4rem, 12vw, 17rem);
	font-weight: 300;
	line-height: 0.88;
	letter-spacing: -0.035em;
	text-wrap: balance;
	animation: norte-hero-rise 1.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.4s both;
}

/* Títulos de más de 26 caracteres (inc/setup.php): más pequeños y algo
 * más anchos, para quedarse en dos o tres líneas. */
.norte-hero-long-title .norte-post-hero .norte-post-hero__title {
	max-width: 17ch;
	font-size: clamp(3rem, 8.4vw, 12rem);
}

.norte-post-hero .norte-post-hero__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.norte-post-hero .wp-block-post-excerpt__more-text {
	display: none;
}

/* --- Datos en vertical y extracto junto al título ------------------------ */

.norte-post-hero--edge .wp-block-cover__inner-container > .norte-post-hero__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: end;
	padding-right: calc(var(--n-gutter) + 3.5rem);
}

.norte-post-hero--edge .norte-post-hero__excerpt {
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--n-snow) 45%, transparent);
	color: inherit;
	font-family: var(--n-serif);
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
	line-height: 1.35;
	opacity: 0.9;
	animation: norte-hero-rise 1.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.7s both;
}

/* El velo también oscurece el borde derecho, bajo la tira. */
.norte-post-hero--edge .wp-block-cover__background.has-background-gradient {
	background:
		linear-gradient(270deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 16%),
		linear-gradient(0deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 45%),
		linear-gradient(90deg, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0) 65%),
		linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 25%) !important;
}

/* La tira: de abajo arriba, pegada al borde derecho. */
.norte-hero-edge {
	position: absolute;
	right: var(--n-gutter);
	bottom: max(24vh, 9rem);
	display: flex;
	gap: 1.4em;
	margin: 0 !important;
	color: var(--n-snow);
	font-family: var(--n-text);
	font-size: 0.75rem;
	text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	animation: norte-hero-fade 1.6s ease 1s both;
}

.norte-hero-edge > * {
	margin: 0 !important;
	font: inherit;
	color: inherit;
}

.norte-hero-edge > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.6em;
	margin-bottom: 1.4em;
	background: currentColor;
	opacity: 0.5;
	vertical-align: middle;
}

.norte-hero-edge a {
	color: inherit;
	text-decoration: none;
}

/* --- Animaciones --------------------------------------------------------- */

/* Al cargar, la foto aparece desde la oscuridad con un zoom apenas
 * perceptible; el título, el extracto y la tira llegan con un fundido y un
 * desplazamiento mínimo. Al bajar, la foto va un poco más despacio que la
 * página y se oscurece ligeramente. */
@media (prefers-reduced-motion: no-preference) {

	.norte-post-hero.wp-block-cover {
		background-color: var(--n-night);
	}

	.norte-post-hero .wp-block-cover__image-background {
		animation: norte-hero-in 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both;
	}

	@supports (animation-timeline: view()) {

		.norte-post-hero.wp-block-cover {
			view-timeline: --norte-hero block;
		}

		.norte-post-hero .wp-block-cover__image-background {
			animation:
				norte-hero-in 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both,
				norte-hero-drift linear both;
			animation-timeline: auto, --norte-hero;
			animation-range: normal, exit 0% exit 100%;
		}

		.norte-post-hero.wp-block-cover::after {
			content: "";
			position: absolute;
			z-index: 1;
			inset: 0;
			background: #000;
			opacity: 0;
			pointer-events: none;
			animation: norte-hero-dim linear both;
			animation-timeline: --norte-hero;
			animation-range: exit 0% exit 100%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.norte-post-hero__title,
	.norte-post-hero__excerpt,
	.norte-hero-edge {
		animation: none !important;
	}
}

@keyframes norte-hero-in {
	from {
		opacity: 0;
		scale: 1.03;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes norte-hero-drift {
	from {
		translate: 0 0;
	}
	to {
		translate: 0 8%;
	}
}

@keyframes norte-hero-dim {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.25;
	}
}

@keyframes norte-hero-rise {
	from {
		opacity: 0;
		translate: 0 10px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes norte-hero-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.norte-single--hero .norte-entry {
	padding-top: clamp(2.5rem, 5vw, 5rem);
}

/* Cabecera clara sobre la foto (body.norte-header-on-image, inc/setup.php). */
body.norte-header-on-image .norte-site-header:not(.is-scrolled) {
	color: var(--n-snow);
}

@media (max-width: 781px) {

	.norte-post-hero .wp-block-cover__inner-container > .norte-post-hero__content {
		padding-bottom: 3rem;
	}

	.norte-post-hero .norte-post-hero__title {
		font-size: clamp(3rem, 14vw, 5rem);
	}

	/* El extracto bajo el título, todo algo más arriba, y la tira en
	 * vertical en el borde derecho, más pequeña. */
	.norte-post-hero--edge .wp-block-cover__inner-container > .norte-post-hero__content {
		display: block;
		padding-right: calc(var(--n-gutter) + 1.75rem);
		padding-bottom: max(20vh, 8rem);
	}

	.norte-post-hero--edge .norte-post-hero__excerpt {
		margin-top: 1.25rem !important;
		font-size: 1rem;
	}

	.norte-hero-edge {
		right: calc(var(--n-gutter) * 0.55);
		bottom: max(20vh, 8rem);
		gap: 1.1em;
		font-size: 0.625rem;
		letter-spacing: 0.2em;
	}

	.norte-hero-edge > * + *::before {
		height: 1.2em;
		margin-bottom: 1.1em;
	}

	.norte-post-hero--edge .wp-block-cover__background.has-background-gradient {
		background:
			linear-gradient(270deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0) 18%),
			linear-gradient(0deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0) 60%),
			linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 25%) !important;
	}
}

/* --------------------------------------------------------------------------
 * Archivo, blog y búsqueda
 * ----------------------------------------------------------------------- */

.norte-archive-head {
	display: grid;
	grid-template-columns: 64.3% 1fr;
	background: var(--n-night);
}

.norte-archive-head__panel {
	min-height: max(320px, 26vw);
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-archive-head__title {
	max-width: 13em;
	margin-top: 1.2vw !important;
	font-size: clamp(2.25rem, 4.2vw, 5.25rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-wrap: balance;
	font-family: var(--n-display);
}

.norte-archive-head__lead {
	max-width: 30em;
	margin-top: 2vw !important;
	font-size: var(--n-small);
	line-height: 1.55;
}

.norte-archive-head__panel .norte-count {
	margin-top: 2.6vw !important;
	padding-top: 0;
}

.norte-archive__query {
	padding: 3vw var(--n-gutter) 4vw 5.1vw;
}

.norte-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.norte-grid--four {
	grid-template-columns: repeat(4, 1fr);
}

.norte-grid > li {
	margin: 0;
	display: flex;
}

.norte-grid .norte-card {
	flex: 1;
	min-height: 0;
	aspect-ratio: 4 / 3;
	padding: 1.6vw;
}

.norte-grid .norte-card__title {
	font-size: clamp(16px, 1.45vw, 24px);
	text-wrap: balance;
}

.norte-grid--four .norte-card__title {
	font-size: clamp(15px, 1.25vw, 20px);
}

.norte-pagination {
	margin-top: 3vw !important;
	padding-top: 1.4vw;
	border-top: 1px solid var(--n-night-line);
	font-family: var(--n-mono);
	font-size: var(--n-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.norte-pagination a,
.norte-pagination .page-numbers {
	text-decoration: none;
}

.norte-pagination .page-numbers {
	padding: 0 0.5em;
}

.norte-pagination .current {
	border-bottom: 1px solid currentColor;
}

.norte-empty {
	max-width: 32em;
	font-size: var(--n-small);
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* Buscador. */
.norte-search .wp-block-search__inside-wrapper {
	max-width: 30rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.norte-search .wp-block-search__input {
	padding: 0.85em 1em;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--n-small);
}

.norte-search .wp-block-search__button {
	margin: 0;
	padding: 0 1em;
	background: none;
	color: inherit;
}

.norte-archive-head__panel .norte-search,
.norte-404__panel .norte-search {
	margin-top: 2.2vw;
}

/* 404. */
.norte-404 {
	display: grid;
	grid-template-columns: 64.3% 1fr;
	background: var(--n-night);
}

.norte-404__panel {
	min-height: 70vh;
	background: var(--n-paper);
	color: var(--n-ink);
}

.norte-404__panel h1 {
	max-width: 12em;
	margin-top: 1.2vw;
	font-size: clamp(2.25rem, 4.75vw, 5.5rem);
	font-weight: 300;
	font-family: var(--n-display);
	letter-spacing: -0.02em;
}

.norte-404__panel > p:not([class]) {
	max-width: 30em;
	margin-top: 2vw;
	font-size: var(--n-small);
}

.norte-404__panel .is-style-norte-link {
	margin-top: 2.6vw;
}

/* --------------------------------------------------------------------------
 * Editor
 * ----------------------------------------------------------------------- */

/* El editor da position: relative a cada bloque; el carrusel sigue
 * ocupando su columna del héroe. */
.editor-styles-wrapper .norte-hero > .wp-block-norte-hero-slider {
	position: absolute !important;
}

.editor-styles-wrapper .norte-hero > .wp-block-norte-hero-slider > div,
.editor-styles-wrapper .norte-hero > .wp-block-norte-hero-slider > div > div {
	height: 100%;
}

.editor-styles-wrapper .norte-hero > .wp-block-norte-hero-slider .norte-slider {
	pointer-events: none;
}

@media (max-width: 959px) {
	.editor-styles-wrapper .norte-hero > .wp-block-norte-hero-slider {
		position: relative !important;
	}
}

.editor-styles-wrapper .norte-slide:not(.is-active) {
	display: none;
}

/* --------------------------------------------------------------------------
 * Pantallas medianas y móviles
 * ----------------------------------------------------------------------- */

@media (max-width: 959px) {
	:root {
		--n-label: 11px;
		--n-small: 15px;
		--n-rule-x: calc(var(--n-gutter) * 0.5);
	}

	/* Héroe apilado: panel, foto y controles sobre la foto. */
	.norte-hero {
		min-height: 0;
	}

	.norte-hero::before {
		display: none;
	}

	.norte-hero__panel {
		width: auto;
		padding: calc(var(--n-header) + 2.5rem) var(--n-gutter) 2.75rem calc(var(--n-gutter) + 1.25rem);
	}

	.norte-hero__panel::before {
		top: calc(var(--n-header) + 0.5rem);
		height: auto;
		bottom: 2.75rem;
	}

	.norte-hero__index {
		display: none;
	}

	.norte-hero__title {
		margin-top: 1rem !important;
		font-size: clamp(2.75rem, 11vw, 4.5rem);
	}

	.norte-hero__lead {
		margin-top: 1.5rem !important;
	}

	.norte-hero__panel .is-style-norte-link {
		margin-top: 2rem !important;
	}

	.norte-hero > .wp-block-norte-hero-slider {
		position: relative;
		inset: auto;
		height: min(78vh, 125vw);
		min-height: 420px;
	}

	.norte-slider {
		grid-template-columns: 1fr;
	}

	.norte-slider__stage::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 50%);
		pointer-events: none;
	}

	.norte-slide__caption {
		top: auto;
		right: var(--n-gutter);
		bottom: 5rem;
		left: var(--n-gutter);
		z-index: 2;
		width: auto;
	}

	.norte-slide__kicker {
		font-size: 11px;
	}

	.norte-slide__title {
		margin-top: 0.6rem !important;
		max-width: 18em;
		font-family: var(--n-headline);
		font-size: clamp(1.75rem, 7vw, 2.6rem);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -0.005em;
	}

	.norte-slide__caption .norte-arrow {
		display: none;
	}

	.norte-slider__aside {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		margin: 0;
		overflow: visible;
		background: none;
	}

	.norte-slider__peek,
	.norte-slider__aside::after {
		display: none;
	}

	.norte-slider__nav {
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.4rem var(--n-gutter);
	}

	.norte-slider__count {
		font-size: 11px;
	}

	.norte-slider__buttons {
		gap: 1.5rem;
		margin: 0;
	}

	.norte-slider__buttons .norte-arrow {
		width: 20px;
		height: 10px;
	}

	/* Destacado, lista y cita. */
	.norte-stories,
	.norte-journal {
		grid-template-columns: 1fr;
	}

	.norte-feature {
		padding: var(--n-gutter) var(--n-gutter) calc(var(--n-gutter) + 2rem);
	}

	.norte-feature__card {
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.norte-feature__caption {
		padding: 1.5rem;
	}

	.norte-feature__caption::after {
		margin-top: 1rem;
	}

	.norte-feature__title {
		margin-top: 0.75rem !important;
		font-size: clamp(1.4rem, 5.6vw, 2rem);
	}

	.norte-feature__word {
		left: -1vw;
		bottom: 1.25rem;
		font-size: 25vw;
	}

	.norte-list {
		padding: 1rem var(--n-gutter);
	}

	.norte-list__item {
		grid-template-columns: 2.25rem 1fr 32vw;
		padding: 1.25rem 0;
	}

	.norte-list__item::before {
		padding-top: 0.15rem;
		font-size: 11px;
	}

	.norte-list__item::after {
		display: none;
	}

	.norte-list__text {
		padding: 0 1rem 0 0;
	}

	.norte-list__text .wp-block-post-terms,
	.norte-card .wp-block-post-terms {
		font-size: 10px;
	}

	.norte-list__title {
		margin-top: 0.35rem !important;
		font-size: 17px;
	}

	.norte-list__thumb {
		width: 32vw;
		aspect-ratio: 3 / 2;
	}

	.norte-quote {
		min-height: 0;
		aspect-ratio: 4 / 5;
		max-height: 90vh;
		width: 100%;
	}

	.norte-quote__text {
		left: var(--n-gutter);
		bottom: var(--n-gutter);
		font-size: clamp(2.25rem, 10vw, 3.75rem);
	}

	.norte-quote__label {
		top: var(--n-gutter);
		right: var(--n-gutter);
		font-size: 10px;
	}

	.norte-quote::after {
		right: calc(var(--n-gutter) + 2px);
		bottom: var(--n-gutter);
		height: 56px;
	}

	/* Proyectos y rejillas. */
	.norte-projects,
	.norte-more,
	.norte-archive__query {
		padding: 2.5rem var(--n-gutter) 3rem;
	}

	.norte-projects__grid,
	.norte-grid,
	.norte-grid--four {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		margin-top: 1.25rem;
	}

	.norte-card,
	.norte-grid .norte-card {
		min-height: 0;
		aspect-ratio: 4 / 5;
		padding: 1rem;
	}

	.norte-card__title,
	.norte-grid .norte-card__title,
	.norte-grid--four .norte-card__title {
		font-size: clamp(17px, 4.2vw, 23px);
	}

	.norte-more .norte-grid .norte-card__title {
		font-size: clamp(19px, 5vw, 27px);
	}

	.norte-card__more,
	.norte-card__num,
	.norte-card__date {
		font-size: 10px !important;
	}

	.norte-card__more {
		margin-top: 0.75rem !important;
		gap: 0.75rem;
	}

	.norte-card__num {
		right: 1rem;
		bottom: 1rem;
	}

	.norte-section-link a::after {
		margin-left: 1rem;
	}

	/* Blog y últimas entradas. */
	.norte-journal__intro {
		padding: 3rem var(--n-gutter) 2.5rem;
	}

	.norte-journal__title {
		font-size: clamp(2.25rem, 9vw, 3.5rem);
	}

	.norte-journal__lead {
		margin-top: 1.5rem !important;
	}

	.norte-journal__intro .is-style-norte-link {
		margin-top: 1.5rem !important;
	}

	.norte-count {
		gap: 1rem;
		font-size: 10px;
	}

	.norte-journal__latest {
		padding: 2.5rem var(--n-gutter);
	}

	.norte-journal__head {
		margin-bottom: 0.75rem !important;
	}

	.norte-latest__item {
		grid-template-columns: 76px 1fr;
		gap: 1rem;
		padding: 0.9rem 2rem 0.9rem 0;
	}

	.norte-latest__title {
		font-size: 17px;
	}

	.norte-latest__text .wp-block-post-date {
		margin-top: 0.35rem;
		font-size: 10px;
	}

	.norte-journal__photo {
		aspect-ratio: 4 / 5;
		max-height: 90vh;
	}

	.norte-journal__quote {
		top: var(--n-gutter);
		right: var(--n-gutter);
		width: min(15rem, 60%);
	}

	.norte-journal__quote-text {
		font-size: 15px;
	}

	.norte-journal__quote-author {
		margin-top: 0.75rem !important;
		font-size: 10px;
	}

	/* Pie. */
	.norte-footer {
		padding: 3rem var(--n-gutter) 2rem;
	}

	.norte-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem 1.5rem;
	}

	.norte-social.wp-block-social-links {
		gap: 1.25rem;
		margin: 0;
		font-size: 18px;
	}

	.norte-footer__brand {
		margin-top: 0.2rem !important;
		justify-self: end;
		font-size: 12px;
	}

	.norte-footer__newsletter {
		grid-column: 1 / -1;
	}

	.norte-footer__newsletter .is-style-norte-label,
	.norte-footer__nav,
	.norte-footer__bottom .is-style-norte-label {
		font-size: 10px;
	}

	.norte-footer__note {
		margin-top: 0.4rem !important;
		font-size: 13px;
	}

	.norte-newsletter {
		max-width: none;
		height: 46px;
		margin-top: 1rem;
	}

	.norte-newsletter input {
		font-size: 15px;
	}

	.norte-footer__nav {
		grid-column: 1 / -1;
		padding: 1.25rem 0 0;
		border-top: 1px solid var(--n-night-line);
		border-left: 0;
	}

	.norte-footer__nav.wp-block-navigation .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.norte-footer__bottom {
		margin-top: 2rem;
	}

	/* Entrada, página, archivo y 404. */
	.norte-entry-hero,
	.norte-archive-head,
	.norte-404 {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.norte-entry-hero__panel,
	.norte-archive-head__panel,
	.norte-404__panel {
		min-height: 0;
		padding: 3rem var(--n-gutter) 2.75rem calc(var(--n-gutter) + 1.25rem);
	}

	.norte-entry-hero__panel::before,
	.norte-archive-head__panel::before,
	.norte-404__panel::before {
		top: 1.5rem;
		bottom: 2.75rem;
	}

	.norte-entry-hero__title,
	.norte-archive-head__title,
	.norte-404__panel h1 {
		margin-top: 0.9rem !important;
		font-size: clamp(2.25rem, 9.5vw, 3.75rem);
	}

	.norte-entry-hero__lead,
	.norte-archive-head__lead,
	.norte-404__panel > p:not([class]) {
		margin-top: 1.25rem !important;
	}

	.norte-entry-meta {
		margin-top: 1.75rem;
	}

	.norte-entry-hero__image {
		aspect-ratio: 4 / 3;
	}

	.norte-archive-head__panel .norte-count,
	.norte-archive-head__panel .norte-search,
	.norte-404__panel .norte-search,
	.norte-404__panel .is-style-norte-link {
		margin-top: 1.75rem !important;
	}

	.norte-404__panel {
		min-height: 70vh;
	}

	.norte-pagination {
		margin-top: 2rem !important;
		padding-top: 1rem;
	}
}

@media (max-width: 599px) {
	.norte-projects__grid,
	.norte-grid,
	.norte-grid--four {
		grid-template-columns: 1fr;
	}

	.norte-card,
	.norte-grid .norte-card {
		aspect-ratio: 4 / 3;
	}

	.norte-list__item {
		grid-template-columns: 2rem 1fr 30vw;
	}

	.norte-list__thumb {
		width: 30vw;
	}

	.norte-pagination .wp-block-query-pagination-numbers {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.norte-slide,
	.norte-slide.is-active,
	.norte-slide__media img,
	.norte-slider__peek img,
	.is-style-norte-fill img,
	.norte-card__media img {
		transition: none !important;
		transform: none !important;
	}
}