/**
 * pFolio — prueba: la portada y los archivos de Specimen 2.0, con las
 * fuentes y los elementos del tema: Freight Big en los titulares, Acumin
 * Light en secciones y Acumin en extractos;
 * filetes en el color de línea, la flecha larga y controles redondeados.
 * Sigue el modo claro / oscuro, salvo lo que va sobre foto.
 *
 * 1. Piezas comunes
 * 2. Portada a pantalla completa
 * 3. Últimas historias
 * 4. Reportaje a lo ancho
 * 5. Portfolio
 * 6. Banda final
 * 7. Archivos
 * 8. Pantallas estrechas
 * 9. Portada: mosaico y categorías en columnas
 * 10. Portada: carrusel
 * 11. Portada: carrusel a dos columnas
 */

:root {
	--pfolio-mag-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M0 5h83M78 1l5 4-5 4'/%3E%3C/svg%3E");
}

/* =====================================================================
   1. PIEZAS COMUNES
   ===================================================================== */

.pfolio-mag,
.pfolio-mag :is(p, h1, h2, h3, ul, ol) {
	margin: 0;
}

.pfolio-mag :is(ul, ol) {
	padding: 0;
	list-style: none;
}

.pfolio-mag a {
	color: inherit;
	text-decoration: none;
}

.pfolio-mag-label,
.pfolio-mag-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 1.3em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* «Ver todo»: la flecha larga, que crece al pasar. */
.pfolio-mag-all {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pfolio-mag-all::after,
.pfolio-mag-pill::after {
	content: "";
	width: 40px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: var(--pfolio-mag-arrow) right center / 84px 10px no-repeat;
	mask: var(--pfolio-mag-arrow) right center / 84px 10px no-repeat;
	transition: width 0.5s var(--pfolio-ease);
}

.pfolio-mag-all:is(:hover, :focus-visible)::after,
.pfolio-mag-pill:is(:hover, :focus-visible)::after {
	width: 60px;
}

/* El botón: una píldora con la flecha, que se invierte al pasar. */
.pfolio-mag .pfolio-mag-pill {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 14px;
	padding: 14px 24px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background-color 0.35s var(--pfolio-ease), color 0.35s var(--pfolio-ease), border-color 0.35s var(--pfolio-ease);
}

.pfolio-mag .pfolio-mag-pill:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--snow);
	background-color: var(--wp--preset--color--snow);
	color: var(--wp--preset--color--night);
}

/* El velo de la cabecera sobre la foto. */
body.pfolio-veiled-header .pfolio-site-header:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	inset: 0 0 -48px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(14, 13, 12, 0.5) 0%, rgba(14, 13, 12, 0) 100%);
	pointer-events: none;
}

html:is(.pfolio-menu-is-open, .pfolio-finder-is-open) body.pfolio-veiled-header .pfolio-site-header::before {
	display: none;
}

/* Secciones: con el margen del tema; cabecera entre título y filete. */
.pfolio-mag-section {
	margin-top: clamp(56px, 7vw, 112px);
	padding-inline: var(--wp--custom--gutter);
}

.pfolio-mag-section:last-child {
	margin-bottom: clamp(56px, 7vw, 112px);
}

.pfolio-mag-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pfolio-mag .pfolio-mag-head__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3rem);
	font-weight: var(--pfolio-h1-weight);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/* =====================================================================
   2. PORTADA A PANTALLA COMPLETA
   ===================================================================== */

.pfolio-mag-cover {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--snow);
}

.pfolio-mag .pfolio-mag-cover__img,
.pfolio-mag .pfolio-mag-spot__img,
.pfolio-mag .pfolio-mag-band__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pfolio-mag-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 13, 12, 0.32) 0%, rgba(14, 13, 12, 0.1) 30%, rgba(14, 13, 12, 0.16) 60%, rgba(14, 13, 12, 0.6) 100%);
	pointer-events: none;
}

.pfolio-mag-cover__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: calc(var(--pfolio-header) + 24px) var(--wp--custom--gutter) clamp(24px, 3vw, 40px);
}

.pfolio-mag .pfolio-mag-cover__lead {
	margin-block: auto;
	padding-block: 32px;
}

.pfolio-mag .pfolio-mag-cover__title {
	max-width: 15em;
	margin-top: 18px;
	font-family: var(--pfolio-title-font-large);
	font-size: clamp(44px, 5.6vw, 96px);
	font-weight: var(--pfolio-head-large);
	line-height: 1;
	letter-spacing: -0.01em;
}

.pfolio-mag-cover__title a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.6s var(--pfolio-ease);
}

.pfolio-mag-cover__title a:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

.pfolio-mag .pfolio-mag-cover__dek {
	max-width: 34rem;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	line-height: 1.45;
}

.pfolio-mag .pfolio-mag-byline {
	margin-top: 24px;
	color: rgba(255, 255, 255, 0.8);
}

.pfolio-mag-cover__strip {
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.pfolio-mag-cover__strip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.pfolio-mag .pfolio-mag-minis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px clamp(20px, 3vw, 40px);
	margin-top: 20px;
}

.pfolio-mag-mini a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.pfolio-mag-mini__date {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pfolio-mag-mini__title {
	display: block;
	margin-top: 6px;
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.125rem, 1rem + 0.35vw, 1.4375rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.15;
}

.pfolio-mag-mini__img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

/* =====================================================================
   3. ÚLTIMAS HISTORIAS
   ===================================================================== */

.pfolio-mag-row {
	display: grid;
	grid-template-columns: minmax(120px, 11vw) minmax(0, 1fr) 110px minmax(130px, 11vw);
	gap: 24px clamp(20px, 3vw, 40px);
	align-items: start;
	padding-block: clamp(20px, 2vw, 32px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pfolio-mag .pfolio-mag-row__meta {
	flex-direction: column;
	color: var(--wp--preset--color--ash);
}

.pfolio-mag .pfolio-mag-row__title {
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.75rem, 1.35rem + 1vw, 2.625rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.1;
}

.pfolio-mag .pfolio-mag-row__excerpt {
	max-width: 48ch;
	margin-top: 10px;
	color: color-mix(in srgb, currentColor 78%, transparent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
	line-height: 1.45;
}

.pfolio-mag .pfolio-mag-row__date {
	justify-content: flex-end;
	color: var(--wp--preset--color--ash);
	white-space: nowrap;
}

.pfolio-mag-row__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.pfolio-mag-row__media img,
.pfolio-mag-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--pfolio-ease);
}

.pfolio-mag-row:hover .pfolio-mag-row__media img,
.pfolio-mag-card a:is(:hover, :focus-visible) img {
	transform: scale(1.04);
}

/* =====================================================================
   4. REPORTAJE A LO ANCHO
   ===================================================================== */

.pfolio-mag-spot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: clamp(440px, 37vw, 760px);
	padding: clamp(48px, 7vw, 96px) var(--wp--custom--gutter);
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--snow);
	text-align: center;
}

.pfolio-mag-spot::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(11, 11, 12, 0.62);
}

.pfolio-mag-spot__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.pfolio-mag-spot .pfolio-mag-label {
	justify-content: center;
}

.pfolio-mag .pfolio-mag-spot__title {
	margin-top: 18px;
	font-family: var(--pfolio-title-font-large);
	font-size: clamp(36px, 4.6vw, 72px);
	font-weight: var(--pfolio-head-large);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.pfolio-mag .pfolio-mag-spot__dek {
	max-width: 34rem;
	margin: 18px auto 28px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	line-height: 1.45;
}

/* =====================================================================
   5. PORTFOLIO
   ===================================================================== */

.pfolio-mag .pfolio-mag-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin-top: clamp(20px, 2vw, 32px);
}

.pfolio-mag-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	margin-bottom: 16px;
}

.pfolio-mag-card__date {
	display: block;
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pfolio-mag-card__title {
	display: block;
	margin-top: 8px;
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.375rem, 1.75vw, 2rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.1;
}

/* =====================================================================
   6. BANDA FINAL
   ===================================================================== */

.pfolio-mag-band {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--snow);
}

.pfolio-mag-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(11, 11, 12, 0.6);
}

.pfolio-mag-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: clamp(28px, 3.4vw, 56px);
}

.pfolio-mag .pfolio-mag-band__title {
	max-width: 18em;
	margin-top: 12px;
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.08;
	text-wrap: balance;
}

/* =====================================================================
   7. ARCHIVOS
   ===================================================================== */

.pfolio-mag-archive {
	margin: 0;
	padding: clamp(40px, 5vw, 88px) var(--wp--custom--gutter) clamp(64px, 7vw, 120px);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.pfolio-mag-archive.pfolio-mag-archive > * {
	margin-block: 0;
}

.pfolio-mag-archive-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	padding-bottom: clamp(20px, 3vw, 32px);
}

.pfolio-mag-archive-head .pfolio-mag-archive-head__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 6.4vw, 7.5rem);
	font-weight: var(--pfolio-h1-weight);
	line-height: 0.95;
	letter-spacing: -0.015em;
}

.pfolio-mag-archive-head__desc {
	max-width: 34em;
	margin-top: 12px;
	color: color-mix(in srgb, currentColor 72%, transparent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
	line-height: 1.4;
}

.pfolio-mag-archive-head__desc p {
	margin: 0;
}

/* Rejilla o lista: dos píldoras, como las de las categorías. */
.pfolio-mag-switch {
	display: flex;
	gap: 8px;
}

.pfolio-mag-switch__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.pfolio-mag-switch__option:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--ink);
}

.pfolio-mag-switch__option[aria-pressed="true"] {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Filtro: una fila de categorías y otra de etiquetas, con píldoras como las
 * del selector de vista. */
.pfolio-mag-filter {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: 8px;
	padding-top: clamp(4px, 1vw, 12px);
}

.pfolio-mag-filter__row {
	display: grid;
	grid-template-columns: clamp(88px, 8vw, 120px) minmax(0, 1fr);
	gap: 8px 16px;
	align-items: baseline;
}

.pfolio-mag-filter .pfolio-mag-filter__label {
	margin: 0;
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pfolio-mag-filter .pfolio-mag-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfolio-mag-filter__list > li {
	margin: 0;
}

.pfolio-mag-filter .pfolio-mag-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.pfolio-mag-filter .pfolio-mag-filter__item:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--ink);
}

.pfolio-mag-filter .pfolio-mag-filter__item[aria-current] {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.pfolio-mag-filter__count {
	color: color-mix(in srgb, currentColor 60%, transparent);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

@media (max-width: 600px) {
	.pfolio-mag-filter__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.pfolio-mag-filter .pfolio-mag-filter__item {
		padding-block: 9px;
	}
}

/* Rejilla. */
.pfolio-mag-entries .wp-block-post-template {
	gap: clamp(32px, 3vw, 48px) clamp(20px, 2.2vw, 32px);
	margin: 0;
	padding-top: clamp(20px, 2vw, 32px);
	border-top: 1px solid var(--wp--preset--color--line);
}

.pfolio-mag-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pfolio-mag-entry.pfolio-mag-entry > * {
	margin-block: 0;
}

.pfolio-mag-entry a {
	color: inherit;
	text-decoration: none;
}

.pfolio-mag-entry .pfolio-mag-entry__image {
	overflow: hidden;
	margin-bottom: 18px;
}

.pfolio-mag-entry__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--pfolio-ease);
}

.pfolio-mag-entry:hover .pfolio-mag-entry__image img {
	transform: scale(1.04);
}

.pfolio-mag-entry .pfolio-mag-entry__meta,
.pfolio-mag-entry .pfolio-mag-entry__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 1.3em;
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pfolio-mag-entry__meta > *,
.pfolio-mag-entry__byline > * {
	margin: 0;
	font-size: inherit !important;
}

.pfolio-mag-entry .pfolio-mag-entry__title {
	margin-top: 12px;
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.125rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.1;
	letter-spacing: 0;
}

.pfolio-mag-entry .pfolio-mag-entry__excerpt {
	margin-top: 10px;
	color: color-mix(in srgb, currentColor 78%, transparent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
	line-height: 1.45;
}

.pfolio-mag-entry__excerpt p {
	margin: 0;
}

.pfolio-mag-entry__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.pfolio-mag-entry .pfolio-mag-entry__byline {
	margin-top: auto;
	padding-top: 14px;
}

/* En la tarjeta, el número a un lado y la clase al otro. */
.pfolio-mag-entry .pfolio-mag-entry__meta {
	justify-content: space-between;
}

/* Índice: la vista de lista como registro del catálogo, con las filas de
 * «Últimas historias» de la portada (título, entradilla y miniatura) bajo una
 * cabecera con las mismas columnas. */
.pfolio-mag-archive-head,
:root[data-archive-view="list"] .pfolio-mag-entry {
	--pfolio-index-cols: clamp(52px, 5vw, 80px) minmax(0, 1fr) clamp(100px, 9vw, 150px) clamp(84px, 7vw, 110px) minmax(130px, 11vw);
}

.pfolio-mag-index-head {
	display: none;
}

:root[data-archive-view="list"] .pfolio-mag-index-head {
	display: grid;
	flex-basis: 100%;
	grid-template-columns: var(--pfolio-index-cols);
	gap: clamp(16px, 2vw, 32px);
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

:root[data-archive-view="list"] .pfolio-mag-entries .wp-block-post-template {
	display: block !important;
	padding-top: 0;
}

:root[data-archive-view="list"] .pfolio-mag-entries .wp-block-post-template > li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

:root[data-archive-view="list"] .pfolio-mag-entry {
	display: grid;
	grid-template-columns: var(--pfolio-index-cols);
	grid-template-rows: auto 1fr;
	gap: 10px clamp(16px, 2vw, 32px);
	align-items: start;
	padding-block: clamp(20px, 2vw, 32px);
}

:root[data-archive-view="list"] .pfolio-mag-entry.pfolio-mag-entry > * {
	margin: 0;
}

:root[data-archive-view="list"] .pfolio-mag-entry__byline .wp-block-post-author-name {
	display: none;
}

:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__image {
	grid-row: 1 / span 2;
	grid-column: 5;
	aspect-ratio: 3 / 2 !important;
}

:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__excerpt {
	grid-row: 2;
	grid-column: 2;
	max-width: 48ch;
}

:root[data-archive-view="list"] .pfolio-mag-entry__excerpt p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Número, clase y fecha son hijos de otras piezas: suben a la rejilla. */
:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__meta,
:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__byline {
	display: contents;
}

:root[data-archive-view="list"] .pfolio-catalog-mark__number,
:root[data-archive-view="list"] .pfolio-catalog-mark__class,
:root[data-archive-view="list"] .pfolio-mag-entry__byline .wp-block-post-date {
	grid-row: 1 / span 2;
	padding-top: 0.5em;
	color: var(--wp--preset--color--ash);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

:root[data-archive-view="list"] .pfolio-catalog-mark__number {
	grid-column: 1;
}

:root[data-archive-view="list"] .pfolio-catalog-mark__class {
	grid-column: 3;
}

:root[data-archive-view="list"] .pfolio-mag-entry__byline .wp-block-post-date {
	grid-column: 4;
}

:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__title {
	grid-row: 1;
	grid-column: 2;
	font-size: clamp(1.75rem, 1.35rem + 1vw, 2.625rem);
}

/* Paginación: en versalitas, entre filetes. */
.pfolio-mag-entries .pfolio-mag-pages {
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pfolio-mag-pages a {
	color: inherit;
	text-decoration: none;
}

.pfolio-mag-pages .current {
	color: var(--wp--preset--color--ash);
}

/* =====================================================================
   8. PANTALLAS ESTRECHAS
   ===================================================================== */

@media (max-width: 1100px) {
	.pfolio-mag-entries .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.pfolio-mag .pfolio-mag-minis,
	.pfolio-mag .pfolio-mag-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pfolio-mag-row {
		grid-template-areas:
			"meta meta"
			"text image";
		grid-template-columns: minmax(0, 1fr) 120px;
		gap: 12px 20px;
	}

	.pfolio-mag .pfolio-mag-row__meta {
		grid-area: meta;
		flex-direction: row;
	}

	.pfolio-mag-row__text {
		grid-area: text;
	}

	.pfolio-mag-row__media {
		grid-area: image;
	}

	.pfolio-mag .pfolio-mag-row__date {
		display: none;
	}

	/* En el móvil, sin cabecera: número y clase arriba; debajo, el texto y la
	 * miniatura, como las filas de la portada. */
	:root[data-archive-view="list"] .pfolio-mag-index-head {
		display: none;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry {
		grid-template-columns: minmax(0, 1fr) 120px;
		grid-template-rows: auto;
		gap: 8px 20px;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__meta {
		display: flex;
		grid-row: 1;
		grid-column: 1 / -1;
	}

	:root[data-archive-view="list"] .pfolio-catalog-mark__number,
	:root[data-archive-view="list"] .pfolio-catalog-mark__class {
		padding-top: 0;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__title {
		grid-row: 2;
		grid-column: 1;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__image {
		grid-row: 2 / span 3;
		grid-column: 2;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry .pfolio-mag-entry__excerpt {
		grid-row: 3;
		grid-column: 1;
	}

	:root[data-archive-view="list"] .pfolio-mag-entry__byline .wp-block-post-date {
		grid-row: 4;
		grid-column: 1;
		padding-top: 0;
	}
}

@media (max-width: 600px) {
	.pfolio-mag .pfolio-mag-minis {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.pfolio-mag-mini:nth-child(n + 3) {
		display: none;
	}

	.pfolio-mag-section .pfolio-mag-spot {
		min-height: 440px;
		padding-inline: 24px;
	}

	.pfolio-mag-entries .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfolio-mag-all::after,
	.pfolio-mag-pill::after,
	.pfolio-mag .pfolio-mag-pill,
	.pfolio-mag-cover__title a,
	.pfolio-mag-row__media img,
	.pfolio-mag-card__media img,
	.pfolio-mag-entry__image img,
	.pfolio-mag-switch__option {
		transition: none;
	}
}

/* =====================================================================
   9. PORTADA: MOSAICO (bloque pfolio/magazine-mosaic)
   La entrada principal, a dos filas; a su lado, cuatro piezas de otras
   categorías, una de ellas solo texto. El mosaico llena la primera pantalla.
   Al final, las categorías en imagen. Sobre las fotos, un velo solo donde
   está el texto.
   ===================================================================== */

.pfolio-mag-mosaic {
	--pfolio-mosaic-gap: clamp(8px, 0.9vw, 14px);
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, clamp(240px, calc((100svh - var(--pfolio-header) - var(--pfolio-mosaic-gap)) / 2), 560px));
	gap: var(--pfolio-mosaic-gap);
}

/* El reportaje a lo ancho, también de borde a borde. */
.pfolio-mag-mosaic ~ .pfolio-mag-section:has(> .pfolio-mag-spot) {
	padding-inline: 0;
}

.pfolio-mag .pfolio-mag-tile {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--snow);
}

.pfolio-mag-tile--lead {
	grid-row: 1 / 3;
}

.pfolio-mag-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--pfolio-ease);
}

.pfolio-mag-tile:is(:hover, :focus-visible) .pfolio-mag-tile__img {
	transform: scale(1.04);
}

.pfolio-mag-tile:not(.is-plain)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 13, 12, 0.62) 0%, rgba(14, 13, 12, 0.3) 32%, rgba(14, 13, 12, 0) 62%);
	pointer-events: none;
}

.pfolio-mag-tile__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
	padding: clamp(14px, 1.3vw, 22px);
}

.pfolio-mag-tile--lead .pfolio-mag-tile__text {
	gap: 12px;
	padding: clamp(18px, 2.4vw, 40px) clamp(18px, 2.4vw, 40px) clamp(18px, 2.4vw, 40px) var(--wp--custom--gutter);
}

.pfolio-mag .pfolio-mag-tile__title {
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.25rem, 1rem + 0.75vw, 1.875rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.08;
	letter-spacing: 0;
	color: inherit;
}

.pfolio-mag .pfolio-mag-tile--lead .pfolio-mag-tile__title {
	max-width: 15em;
	font-size: clamp(2.25rem, 1.4rem + 3vw, 4.5rem);
	font-weight: 100;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* La pieza sin foto, sobre el papel y con su extracto. */
.pfolio-mag .pfolio-mag-tile.is-plain {
	border: 1px solid var(--wp--preset--color--line);
	background-color: transparent;
	color: inherit;
}

.pfolio-mag-tile__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: color-mix(in srgb, currentColor 78%, transparent);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.pfolio-mag-tile.is-plain:is(:hover, :focus-visible) .pfolio-mag-tile__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.pfolio-mag .pfolio-mag-tile:focus-visible {
	outline: 2px solid var(--pfolio-accent);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.pfolio-mag-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: minmax(230px, auto);
	}

	.pfolio-mag-tile--lead {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: min(68svh, 560px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfolio-mag-tile__img {
		transition: none;
	}
}

/* Las categorías en columnas (las de Kalunat): altas, separadas por filetes,
 * con su número arriba y el nombre abajo. Al pasar el cursor, la columna se
 * ensancha empujando a las vecinas y la foto sube desde abajo hasta llenarla.
 * En móvil y en pantallas táctiles, bandas con la foto a la vista. */
.pfolio-mag .pfolio-mag-columns {
	display: flex;
	height: clamp(26rem, 72svh, 46rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pfolio-mag-column {
	flex: 1 1 0;
	min-width: 0;
	border-left: 1px solid var(--wp--preset--color--line);
	transition: flex-grow 0.8s var(--pfolio-ease);
}

.pfolio-mag-column:last-child {
	border-right: 1px solid var(--wp--preset--color--line);
}

.pfolio-mag-column:is(:hover, :focus-within) {
	flex-grow: 1.7;
}

.pfolio-mag .pfolio-mag-column__link {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 8px;
	height: 100%;
	padding: clamp(16px, 1.6vw, 24px);
	overflow: hidden;
	isolation: isolate;
	transition: color 0.4s ease;
}

/* La cruz fina en el centro de cada columna. */
.pfolio-mag-column__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	opacity: 0.35;
	translate: -50% -50%;
	transition: opacity 0.4s ease, rotate 0.8s var(--pfolio-ease);
}

.pfolio-mag-column__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--wp--preset--color--night);
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.9s var(--pfolio-ease);
}

.pfolio-mag-column__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 13, 12, 0.62) 0%, rgba(14, 13, 12, 0.2) 40%, rgba(14, 13, 12, 0) 65%);
}

.pfolio-mag-column__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.18;
	transition: scale 1.4s var(--pfolio-ease);
}

.pfolio-mag-column__name {
	margin-top: auto;
	font-family: var(--pfolio-title-font);
	font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3.25rem);
	font-weight: var(--pfolio-head-small);
	line-height: 1.02;
	hyphens: auto;
}

.pfolio-mag-column__count {
	color: var(--wp--preset--color--ash);
	transition: color 0.4s ease;
}

.pfolio-mag-column__desc {
	display: -webkit-box;
	overflow: hidden;
	max-width: 30ch;
	max-height: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
	line-height: 1.45;
	opacity: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: max-height 0.6s var(--pfolio-ease), opacity 0.4s ease;
}

.pfolio-mag .pfolio-mag-column__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--snow);
}

.pfolio-mag-column__link:is(:hover, :focus-visible)::before {
	opacity: 0;
	rotate: 90deg;
}

.pfolio-mag-column__link:is(:hover, :focus-visible) .pfolio-mag-column__media {
	clip-path: inset(0);
}

.pfolio-mag-column__link:is(:hover, :focus-visible) .pfolio-mag-column__img {
	scale: 1;
}

.pfolio-mag-column__link:is(:hover, :focus-visible) .pfolio-mag-column__count {
	color: inherit;
}

.pfolio-mag-column__link:is(:hover, :focus-visible) .pfolio-mag-column__desc {
	max-height: 5em;
	opacity: 0.85;
}

.pfolio-mag-column__link:focus-visible {
	outline: 2px solid var(--pfolio-accent);
	outline-offset: -2px;
}

@media (hover: none), (max-width: 781px) {
	.pfolio-mag .pfolio-mag-column__link {
		color: var(--wp--preset--color--snow);
	}

	.pfolio-mag-column__link::before {
		display: none;
	}

	.pfolio-mag-column__media {
		clip-path: none;
	}

	.pfolio-mag-column__img {
		scale: 1;
	}

	.pfolio-mag-column__count {
		color: inherit;
	}

	.pfolio-mag-column__desc {
		max-height: 5em;
		opacity: 0.85;
	}
}

@media (max-width: 781px) {
	.pfolio-mag .pfolio-mag-columns {
		flex-direction: column;
		gap: 8px;
		height: auto;
		border: 0;
	}

	.pfolio-mag-column,
	.pfolio-mag-column:last-child {
		border: 0;
	}

	.pfolio-mag .pfolio-mag-column__link {
		min-height: 13rem;
	}
}

/* =====================================================================
   10. PORTADA: CARRUSEL (bloque pfolio/magazine-carousel)
   El de Kalunat, a pantalla completa bajo la cabecera transparente. La foto
   se desplaza un poco más despacio que la diapositiva; el texto, centrado y
   con el título muy grande, entra suave. Encima de la foto, una
   barra con un paso por entrada y una línea que se llena mientras está a la
   vista, la pausa y las flechas. En móvil solo quedan las líneas y la pausa.
   ===================================================================== */

.pfolio-carousel {
	--pfolio-carousel-delay: 7s;
	position: relative;
	overflow: clip;
	background-color: var(--wp--preset--color--night);
	color: var(--wp--preset--color--snow);
	isolation: isolate;
}

.pfolio-mag .pfolio-carousel__track {
	display: grid;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pfolio-carousel__track::-webkit-scrollbar {
	display: none;
}

.pfolio-carousel__slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: max(34rem, 100svh);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.pfolio-carousel__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
}

.pfolio-carousel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(14, 13, 12, 0.5) 0%, rgba(14, 13, 12, 0) 30%),
		radial-gradient(ellipse 70% 60% at center, rgba(14, 13, 12, 0.38) 0%, rgba(14, 13, 12, 0.14) 100%);
}

.pfolio-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@supports (animation-timeline: view(inline)) {
	.pfolio-carousel__img {
		scale: 1.12;
		animation: pfolio-carousel-pan linear both;
		animation-timeline: view(inline);
	}
}

@keyframes pfolio-carousel-pan {
	from {
		translate: -9% 0;
	}

	to {
		translate: 9% 0;
	}
}

.pfolio-carousel__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 92rem;
	padding: calc(var(--pfolio-header) + 16px) var(--wp--custom--gutter) calc(clamp(24px, 3vw, 48px) + 5rem);
	text-align: center;
}

.pfolio-carousel__body .pfolio-mag-label {
	justify-content: center;
}

.pfolio-mag .pfolio-carousel__title {
	margin-top: 18px;
	font-family: var(--pfolio-title-font-large);
	font-size: clamp(3.25rem, 1.5rem + 7.2vw, 10rem);
	font-weight: var(--pfolio-head-large);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: inherit;
	text-wrap: balance;
}

/* Toda la diapositiva enlaza con la entrada. */
.pfolio-carousel__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.pfolio-carousel__link:focus-visible {
	outline: none;
}

.pfolio-carousel__link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

.pfolio-mag .pfolio-carousel__excerpt {
	max-width: 34rem;
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
}

.pfolio-mag .pfolio-carousel__more {
	margin-top: 24px;
}

.pfolio-carousel__slide:hover .pfolio-carousel__more::after {
	width: 60px;
}

/* Con el script, el texto de la diapositiva que llega entra suave. */
.pfolio-carousel.is-ready .pfolio-carousel__body > * {
	opacity: 0;
	translate: 0 20px;
	transition: opacity 0.5s ease, translate 0.9s var(--pfolio-ease);
}

.pfolio-carousel.is-ready .is-active .pfolio-carousel__body > * {
	opacity: 1;
	translate: 0 0;
}

.pfolio-carousel.is-ready .is-active .pfolio-carousel__title {
	transition-delay: 0.08s;
}

.pfolio-carousel.is-ready .is-active .pfolio-carousel__excerpt {
	transition-delay: 0.16s;
}

.pfolio-carousel.is-ready .is-active .pfolio-carousel__more {
	transition-delay: 0.24s;
}

/* La barra, con un filete encima de lado a lado. */
.pfolio-carousel__bar {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	gap: clamp(20px, 3vw, 48px);
	padding: 0 var(--wp--custom--gutter) clamp(24px, 3vw, 48px);
}

.pfolio-carousel__bar[hidden] {
	display: none;
}

.pfolio-mag .pfolio-carousel__steps {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(var(--pfolio-carousel-count, 5), minmax(0, 1fr));
	gap: clamp(8px, 1.5vw, 24px);
}

.pfolio-carousel__steps > li {
	min-width: 0;
}

.pfolio-carousel__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	width: 100%;
	padding: 12px 0 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 12px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.3s ease;
}

.pfolio-carousel__step:is(:hover, :focus-visible, [aria-current="true"]) {
	opacity: 1;
}

.pfolio-carousel__step:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.pfolio-carousel__step-number {
	font-variant-numeric: tabular-nums;
}

.pfolio-carousel__step-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pfolio-carousel__step-line {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1;
	height: 1px;
	margin-bottom: 8px;
	background-color: color-mix(in srgb, currentColor 35%, transparent);
}

.pfolio-carousel__step-line::after {
	content: "";
	position: absolute;
	inset: -0.5px 0;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
}

.pfolio-carousel__step[aria-current="true"] .pfolio-carousel__step-line::after {
	transform: scaleX(1);
}

.pfolio-carousel.is-playing .pfolio-carousel__step[aria-current="true"] .pfolio-carousel__step-line::after {
	animation: pfolio-carousel-progress var(--pfolio-carousel-delay) linear both;
}

.pfolio-carousel.is-playing:is(.is-held, .is-paused) .pfolio-carousel__step[aria-current="true"] .pfolio-carousel__step-line::after {
	animation-play-state: paused;
}

@keyframes pfolio-carousel-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.pfolio-carousel__controls {
	display: flex;
	flex: none;
	gap: 8px;
}

.pfolio-carousel__controls button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 75%, transparent);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.pfolio-carousel__controls button:hover {
	border-color: var(--wp--preset--color--snow);
	background-color: var(--wp--preset--color--snow);
	color: var(--wp--preset--color--night);
}

.pfolio-carousel__controls button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pfolio-carousel__arrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	rotate: 45deg;
	translate: -2px 0;
}

.pfolio-carousel__arrow--prev::before {
	rotate: -135deg;
	translate: 2px 0;
}

.pfolio-carousel__pause::before {
	content: "";
	width: 8px;
	height: 10px;
	border-inline: 1.5px solid currentColor;
}

.pfolio-carousel__pause[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	border-block: 5px solid transparent;
	border-inline: 9px solid currentColor;
	border-right-width: 0;
	translate: 1px 0;
}

@media (max-width: 781px) {
	.pfolio-carousel__slide {
		min-height: max(30rem, 100svh);
	}

	.pfolio-carousel__media::after {
		background:
			linear-gradient(0deg, rgba(14, 13, 12, 0.5) 0%, rgba(14, 13, 12, 0) 25%),
			radial-gradient(ellipse 110% 48% at center, rgba(14, 13, 12, 0.46) 0%, rgba(14, 13, 12, 0.12) 100%);
	}

	.pfolio-carousel__body {
		padding-bottom: 5.5rem;
	}

	.pfolio-carousel__bar {
		align-items: center;
	}

	.pfolio-carousel__step {
		padding-block: 14px;
	}

	.pfolio-carousel__step-number,
	.pfolio-carousel__step-title {
		display: none;
	}

	.pfolio-carousel__step-line {
		margin: 0;
	}

	.pfolio-carousel__arrow {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfolio-carousel__img {
		scale: none;
		animation: none;
	}

	.pfolio-carousel.is-ready .pfolio-carousel__body > * {
		translate: none;
	}

	.pfolio-mag-column,
	.pfolio-mag-column__media,
	.pfolio-mag-column__img {
		transition-duration: 0.01s;
	}
}

/* =====================================================================
   11. PORTADA: CARRUSEL A DOS COLUMNAS (bloque pfolio/magazine-slider)
   Como el de Eroica: sobre el papel, con la fecha, la firma, el título y el
   extracto a un lado y la foto al otro. Se arrastra (assets/js/slider.js) y
   «Arrastra» sigue al cursor. Se queda fijo bajo la cabecera y el resto de la
   página le pasa por encima, tras un filete. En móvil, la foto llena la
   diapositiva y el texto va en una tarjeta de papel encima.
   ===================================================================== */

.pfolio-slider {
	--pfolio-slider-h: calc(100svh - var(--pfolio-header) - clamp(48px, 7svh, 88px));
	/* El título y el extracto crecen con la pantalla, en ancho y en alto: la
	 * unidad es 1vw en 16:9 y menos si la ventana es más baja. */
	--pfolio-slider-u: min(1vw, 1.78svh);
	position: sticky;
	top: var(--pfolio-header-compact);
	z-index: 0;
	padding-block: clamp(16px, 2vw, 32px);
	will-change: transform;
}

.pfolio-mag .pfolio-slider__track {
	display: grid;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pfolio-slider__track::-webkit-scrollbar {
	display: none;
}

.pfolio-slider__slide {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 64px);
	height: max(26rem, calc(var(--pfolio-slider-h) - clamp(32px, 4vw, 64px)));
	padding-inline: var(--wp--custom--gutter);
	scroll-snap-align: start;
}

/* Con el script, las diapositivas se colocan una a una. */
.pfolio-slider.is-ready .pfolio-slider__track {
	position: relative;
	overflow: hidden;
	height: max(26rem, calc(var(--pfolio-slider-h) - clamp(32px, 4vw, 64px)));
	cursor: grab;
	scroll-snap-type: none;
	touch-action: pan-y;
	user-select: none;
}

.pfolio-slider.is-ready .pfolio-slider__track.is-dragging {
	cursor: grabbing;
}

.pfolio-slider.is-ready .pfolio-slider__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	will-change: transform;
}

.pfolio-slider__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pfolio-mag .pfolio-slider__text .pfolio-mag-byline {
	margin-top: 0;
	color: inherit;
}

.pfolio-mag .pfolio-slider__title {
	margin-top: clamp(14px, 1.6vw, 28px);
	font-family: var(--pfolio-title-font-large);
	font-size: max(3rem, calc(var(--pfolio-slider-u) * 6.2));
	font-weight: var(--pfolio-head-large);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: inherit;
}

/* Los títulos cortos, más grandes, para que no quede tanto aire. */
.pfolio-mag .pfolio-slider__title--short {
	font-size: max(3.5rem, calc(var(--pfolio-slider-u) * 8.4));
}

.pfolio-slider__title a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

.pfolio-mag .pfolio-slider__excerpt {
	max-width: 30em;
	margin-top: max(16px, calc(var(--pfolio-slider-u) * 1.8));
	font-family: var(--wp--preset--font-family--ui);
	font-size: max(0.9375rem, calc(var(--pfolio-slider-u) * 1.2));
	line-height: 1.4;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.pfolio-mag .pfolio-slider__more {
	align-self: flex-start;
	margin-block: max(16px, calc(var(--pfolio-slider-u) * 1.5)) 16px;
	font-size: max(11px, calc(var(--pfolio-slider-u) * 0.8));
}

/* En ventanas muy bajas no cabe todo: el extracto da paso al enlace. */
@media (min-width: 782px) and (max-height: 620px) {
	.pfolio-mag .pfolio-slider__excerpt {
		display: none;
	}
}

/* Abajo, a la altura de la base de la foto: el contador y las flechas. Van
 * fuera de las diapositivas, para que no se muevan al deslizar. */
.pfolio-slider__foot {
	position: absolute;
	z-index: 2;
	bottom: clamp(16px, 2vw, 32px);
	left: var(--wp--custom--gutter);
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: calc((100% - var(--wp--custom--gutter) * 2 - clamp(24px, 4vw, 64px)) / 2);
	padding-top: max(12px, calc(var(--pfolio-slider-u) * 0.9));
	border-top: 1px solid var(--wp--preset--color--line);
}

.pfolio-slider.is-ready .pfolio-slider__foot {
	display: flex;
}

.pfolio-slider.is-ready .pfolio-slider__text {
	padding-bottom: max(56px, calc(var(--pfolio-slider-u) * 4));
}

.pfolio-slider__count {
	font-family: var(--wp--preset--font-family--ui);
	font-size: max(11px, calc(var(--pfolio-slider-u) * 0.8));
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--ash);
}

.pfolio-slider__nav {
	display: flex;
	gap: 8px;
}

.pfolio-slider__go {
	display: grid;
	place-items: center;
	width: max(40px, calc(var(--pfolio-slider-u) * 2.9));
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.pfolio-slider__go:hover {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.pfolio-slider__go:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.pfolio-slider__go::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	rotate: 45deg;
	translate: -2px 0;
}

.pfolio-slider__go--prev::before {
	rotate: -135deg;
	translate: 2px 0;
}

.pfolio-slider__media {
	position: relative;
	overflow: hidden;
	min-height: 0;
	background-color: var(--wp--preset--color--night);
}

.pfolio-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* «Arrastra», junto al cursor. */
.pfolio-slider__cursor {
	position: fixed;
	z-index: 40;
	top: 0;
	left: 0;
	display: none;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}

.pfolio-slider__cursor-label {
	padding: 10px 16px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: var(--wp--preset--color--paper);
}

@media (hover: hover) {
	.pfolio-slider.is-pointing:not(:has(a:hover, button:hover)) .pfolio-slider__cursor {
		display: inline-flex;
	}
}

/* Los títulos sobre el papel, con su color. */
.pfolio-mag .pfolio-slider__title,
.pfolio-mag .pfolio-mag-row__title,
.pfolio-mag .pfolio-mag-head__title,
.pfolio-mag-entry .pfolio-mag-entry__title,
.pfolio-mag-archive-head .pfolio-mag-archive-head__title {
	color: var(--pfolio-title-ink);
}

/* La rejilla de seis entradas, con las piezas de los archivos. */
.pfolio-mag .pfolio-mag-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 3vw, 48px) clamp(20px, 2.2vw, 32px);
}

.pfolio-mag-grid .pfolio-mag-entry__image {
	display: block;
	aspect-ratio: 4 / 3;
}

.pfolio-slider-rest > .pfolio-mag-section:first-child {
	margin-top: clamp(32px, 4vw, 64px);
}

@media (max-width: 900px) {
	.pfolio-mag .pfolio-mag-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pfolio-mag .pfolio-mag-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* El resto de la página, por encima. */
.pfolio-slider-rest {
	position: relative;
	z-index: 1;
	display: flow-root;
	background-color: var(--wp--preset--color--paper);
}

.pfolio-slider-rest::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--wp--custom--gutter);
	left: var(--wp--custom--gutter);
	height: 1px;
	background-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.pfolio-slider {
		padding-block: 0;
	}

	.pfolio-slider__slide {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.pfolio-slider__media {
		position: absolute;
		z-index: 0;
		inset: 0;
	}

	.pfolio-slider__text {
		position: relative;
		z-index: 1;
		align-self: end;
		box-sizing: border-box;
		padding: 20px;
		background-color: var(--wp--preset--color--paper);
	}

	.pfolio-mag .pfolio-slider__excerpt {
		margin-top: 12px;
		font-size: 0.9375rem;
		line-height: 1.45;
	}

	/* En la tarjeta: el contador junto al enlace, sin flechas. */
	.pfolio-mag .pfolio-slider__more {
		margin-block: 14px 0;
	}

	.pfolio-slider.is-ready .pfolio-slider__text {
		padding-bottom: 20px;
	}

	.pfolio-slider__foot {
		right: 36px;
		bottom: 38px;
		left: auto;
		width: auto;
		padding-top: 0;
		border-top: 0;
	}

	.pfolio-slider__nav {
		display: none;
	}

	.pfolio-mag :is(.pfolio-slider__title, .pfolio-slider__title--short) {
		font-family: var(--pfolio-title-font);
		font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
		font-weight: var(--pfolio-head-small);
	}

	.pfolio-mag .pfolio-mag-spot__title {
		font-family: var(--pfolio-title-font);
		font-weight: var(--pfolio-head-small);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfolio-slider {
		will-change: auto;
	}
}