/**
 * pFolio — secciones de contenido: piezas comunes (antetítulo, enlace con
 * flecha) y la presentación de la portada.
 */

/* ---------- Piezas comunes ---------- */

.pfolio-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--ash);
}

.pfolio-link a {
	display: inline-flex;
	align-items: center;
	gap: 38px;
	color: inherit;
	text-decoration: none;
}

.pfolio-link a::after {
	content: "";
	width: 70px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: 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") right center / 84px 10px no-repeat;
	mask: 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") right center / 84px 10px no-repeat;
	transition: width 0.5s var(--pfolio-ease);
}

.pfolio-link a:hover {
	text-decoration: none;
}

.pfolio-link a:hover::after,
.pfolio-link a:focus-visible::after {
	width: 84px;
}

/* ---------- Página «Sobre mí» (templates/page-sobre-mi.html) ----------
   El contenido de la página, con el aire y la sangría del tema; debajo,
   el formulario de contacto (blocks/contact-form). */

.pfolio-about,
.pfolio-about.pfolio-about > * {
	margin-block: 0;
}

.pfolio-about__content:not(:empty) {
	padding: clamp(64px, 7vw, 120px) var(--wp--custom--gutter) 0 var(--pfolio-indent);
}

/* ---------- Portada editorial (templates/front-editorial.html) ----------
   Arriba, una frase muy grande en Freight Display y, a su derecha, el
   retrato redondo, un texto breve y un botón cuadrado. Debajo, el carrusel
   de destacadas (blocks/featured-carousel) y las últimas entradas con el
   diseño de las categorías. Sigue el modo claro / oscuro. */

.pfolio-frontalt,
.pfolio-frontalt.pfolio-frontalt > *,
.pfolio-lead.pfolio-lead > * {
	margin-block: 0;
}

.pfolio-lead {
	display: grid;
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(40px, 6vw, 140px);
	padding: clamp(40px, 5vw, 110px) var(--wp--custom--gutter) clamp(48px, 5.5vw, 120px);
}

.pfolio-lead .pfolio-lead__title {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: clamp(3rem, 6.4vw, 11rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

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

.pfolio-lead .pfolio-lead__photo {
	width: clamp(96px, 7.5vw, 180px);
}

.pfolio-lead__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 30%;
}

.pfolio-lead .pfolio-lead__text {
	margin-top: clamp(20px, 2vw, 40px);
	max-width: 26em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.625rem);
	line-height: 1.35;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.pfolio-lead .pfolio-lead__button {
	margin-top: clamp(24px, 2.2vw, 44px);
}

.pfolio-lead__button a {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding: 1.15em 1.7em;
	border: 1px solid currentColor;
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(12px, 0.78vw, 17px);
	line-height: 1;
	letter-spacing: 0.2em;
	text-decoration: none;
	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-lead__button a:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* Las últimas entradas, bajo el carrusel. */
.pfolio-homelist {
	padding: clamp(72px, 8vw, 160px) var(--wp--custom--gutter) clamp(72px, 8vw, 160px);
}

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

.pfolio-homelist .pfolio-homelist__head {
	align-items: baseline;
	margin-bottom: clamp(24px, 2.6vw, 48px);
}

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

.pfolio-homelist .pfolio-homelist__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 1rem + 2vw, 3.25rem);
	font-weight: var(--pfolio-h1-weight);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.pfolio-homelist .pfolio-homelist__all {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.pfolio-lead {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
	}

	.pfolio-lead .pfolio-lead__title {
		font-size: clamp(2.75rem, 12.5vw, 5rem);
	}

	.pfolio-homelist .pfolio-link a {
		gap: 18px;
	}

	.pfolio-homelist .pfolio-link a::after {
		width: 36px;
	}
}

/* ---------- Presentación ---------- */

.pfolio-intro {
	padding: clamp(88px, 10vw, 160px) var(--wp--custom--gutter) clamp(88px, 10vw, 160px) var(--pfolio-indent);
}

.pfolio-intro .pfolio-intro__cols {
	gap: clamp(40px, 6vw, 112px);
	margin: 0;
}

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

.pfolio-intro .pfolio-intro__lead {
	margin-top: 28px;
	max-width: 18em;
	font-size: clamp(30px, 3.2vw, 48px);
	font-weight: var(--pfolio-heading-weight);
	line-height: 1.2;
	letter-spacing: 0;
}

.pfolio-intro .pfolio-intro__body {
	margin-top: 36px;
	max-width: 36em;
	color: color-mix(in srgb, currentColor 72%, transparent);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
	line-height: 1.5;
}

.pfolio-intro .pfolio-link {
	margin-top: 52px;
}

.pfolio-intro__photo {
	margin: 0;
}

.pfolio-intro__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
}

@media (max-width: 781px) {
	.pfolio-intro__media {
		max-width: 320px;
	}
}

/* ---------- Pie: gran cabecera final (parts/footer.html) ----------
 * Como el cierre de una revista: arriba, los enlaces; debajo, el lema y los
 * avisos legales; y, pegado al final de la página, el logo a todo el ancho,
 * cortado por abajo. Sigue el modo claro / oscuro. */

.pfolio-mfoot {
	margin: 0;
	padding: clamp(24px, 2.4vw, 40px) var(--wp--custom--gutter) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.pfolio-mfoot.pfolio-mfoot > *,
.pfolio-mfoot__top > *,
.pfolio-mfoot__bottom > * {
	margin: 0;
}

.pfolio-mfoot :is(.pfolio-mfoot__top, .pfolio-mfoot__bottom) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 32px;
}

.pfolio-mfoot .pfolio-mfoot__links,
.pfolio-mfoot .pfolio-mfoot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px clamp(20px, 2.8vw, 38px);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

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

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

.pfolio-mfoot .pfolio-mfoot__links--social,
.pfolio-mfoot .pfolio-mfoot__legal {
	color: var(--wp--preset--color--ash);
}

.pfolio-mfoot.pfolio-mfoot > .pfolio-mfoot__bottom {
	margin-top: clamp(20px, 2.4vw, 40px);
	padding-top: clamp(20px, 2.4vw, 40px);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* El logo, a todo el ancho, cortado por abajo: la proporción es la del logo
 * (1742 de ancho) con 330 de sus 468 de alto, por encima del lema. */
:root .pfolio-mfoot .pfolio-mfoot__name {
	margin-block: clamp(28px, 3.6vw, 60px) 0;
	line-height: 0;
}

.pfolio-mfoot__name a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1742 / 330;
}

.pfolio-mfoot .pfolio-mfoot__tagline {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	line-height: 1.35;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pfolio-serif-ink) 72%, transparent);
}

/* ---------- Pie anterior: el de Kalunat («Sígueme», parts/footer-kalunat.html) ----------
 * Con los estilos exactos del pie de Kalunat (assets/css/header.css,
 * sección 6) en su modo oscuro: tres piezas a la izquierda, «Sígueme» y
 * las redes en texto grande, una frase de contacto y el copyright con
 * los avisos legales; a la derecha, «Volver arriba» con su flecha
 * (inc/footer.php). Sobre el mismo fondo que el resto de la web, con un
 * filete arriba que lo separa, y en sus colores: sigue el modo claro /
 * oscuro. */

.pfolio-footer {
	/* Los colores del tema: tinta, gris y el acento de Kalunat. */
	--pfolio-f-contrast: var(--wp--preset--color--ink);
	--pfolio-f-muted: var(--wp--preset--color--ash);
	--pfolio-f-accent: var(--pfolio-accent);
	--pfolio-f-ease: cubic-bezier(0.29, 0.09, 0.22, 0.98);

	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(3rem, 5vw, 5.5rem) var(--wp--custom--gutter) clamp(1.5rem, 2.2vw, 2.25rem);
	border-top: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--paper);
	color: var(--pfolio-f-contrast);
}

.pfolio-footer__intro,
.pfolio-footer__follow {
	display: flex;
	flex-direction: column;
}

.pfolio-footer__intro {
	gap: clamp(1.75rem, 2.6vw, 2.75rem);
}

.pfolio-footer__follow {
	gap: 0.6rem;
}

.pfolio-footer .pfolio-footer__intro > *,
.pfolio-footer .pfolio-footer__follow > * {
	margin: 0;
}

/* «Sígueme»: en la serif, atenuado. */
.pfolio-footer .pfolio-footer__label {
	color: var(--pfolio-f-muted);
	font-family: var(--wp--preset--font-family--serif);
	font-size: calc(clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) * 1.2);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
}

/* Redes: solo el nombre (sin icono), en grande. La línea del acento
   crece de izquierda a derecha al pasar por encima. */
.pfolio-footer .pfolio-footer__social.wp-block-social-links {
	gap: 0.4em 1.6em;
	margin: 0;
	padding: 0;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

.pfolio-footer__social .wp-social-link,
.pfolio-footer__social.is-style-logos-only .wp-social-link {
	background: none !important;
	color: inherit !important;
	font-size: inherit;
}

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

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

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

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

.pfolio-footer__social .wp-social-link a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--pfolio-f-accent);
	transition: width 400ms var(--pfolio-f-ease);
}

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

/* Contacto: en la serif, también lo que va en negrita; el email, en la
   fuente de la interfaz. */
.pfolio-footer .pfolio-footer__contact {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

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

.pfolio-footer__contact a {
	color: inherit;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 500;
	text-decoration: none;
}

.pfolio-footer__contact a:hover {
	text-decoration: underline;
	text-decoration-color: var(--pfolio-f-accent);
}

/* «‘hola’» lleva al correo: sigue en la cursiva de la serifa, con un
 * subrayado fino que se aparta al pasar. */
:root .pfolio-footer__contact .pfolio-footer__hola {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-underline-offset 0.3s var(--pfolio-ease), text-decoration-color 0.3s ease;
}

:root .pfolio-footer__contact .pfolio-footer__hola:is(:hover, :focus-visible) {
	text-underline-offset: 0.3em;
	text-decoration-color: currentColor;
}

/* El copyright y, a su lado, los enlaces legales, igual de pequeños y
   separados por un punto. */
.pfolio-footer .pfolio-footer__legal {
	gap: 0.3em 1.2em;
	align-items: baseline;
}

.pfolio-footer__legal > * {
	margin: 0;
}

.pfolio-footer .pfolio-footer__credit,
.pfolio-footer .pfolio-footer__links {
	margin: 0;
	color: var(--pfolio-f-muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
	font-weight: 400;
}

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

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

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

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

/* Volver arriba: texto gris y una flecha (SVG de inc/footer.php) que
   en reposo tiene un gancho abajo. Al pasar por encima el gancho se
   recoge hacia el palo, el palo crece hacia abajo y la punta sube, hasta
   quedar una flecha recta y alta. */
.pfolio-footer .pfolio-footer__totop {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
	font-weight: 500;
}

.pfolio-footer__totop a {
	display: inline-flex;
	gap: 0.6em;
	align-items: flex-end;
	color: var(--pfolio-f-muted);
	text-decoration: none;
	transition: color 200ms ease;
}

.pfolio-footer__totop a:is(:hover, :focus-visible) {
	color: var(--pfolio-f-contrast);
	text-decoration: none;
}

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

.pfolio-footer__arrow path {
	transition-duration: 400ms;
	transition-timing-function: var(--pfolio-f-ease);
}

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

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

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

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

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

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.pfolio-footer__arrow path,
	.pfolio-footer__social .wp-social-link a::after {
		transition: none;
	}
}

/* ---------- Página no encontrada (patterns/not-found.php) ---------- */
.pfolio-notfound {
	--c-gutter: var(--wp--custom--gutter);

	padding: clamp(48px, 9vw, 140px) var(--c-gutter) clamp(56px, 8vw, 120px);
}

.pfolio-notfound .pfolio-notfound__number,
.pfolio-notfound__links,
.pfolio-notfound__search button,
.pfolio-notfound__pieces h2,
.pfolio-notfound__pieces span {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pfolio-notfound .pfolio-notfound__number {
	margin: 0 0 16px;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.pfolio-notfound .pfolio-notfound__title {
	max-width: 14em;
	margin: 0;
	font-family: var(--pfolio-title-font-large);
	font-size: clamp(3rem, 2rem + 5vw, 6.5rem);
	font-weight: var(--pfolio-head-large);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--pfolio-title-ink);
}

.pfolio-notfound .pfolio-notfound__lead {
	margin: clamp(16px, 2vw, 28px) 0 clamp(28px, 4vw, 48px);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.4;
}

.pfolio-notfound__search {
	display: flex;
	gap: 16px;
	max-width: 560px;
	border-bottom: 1px solid currentColor;
}

.pfolio-notfound__search input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	outline-offset: 4px;
}

.pfolio-notfound__search input::placeholder {
	color: color-mix(in srgb, currentColor 55%, transparent);
	opacity: 1;
}

.pfolio-notfound__search button {
	padding: 12px 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.pfolio-notfound__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	margin-top: 16px;
}

.pfolio-notfound__links a {
	padding-block: 14px;
	text-decoration: none;
}

.pfolio-notfound__links a:is(:hover, :focus-visible),
.pfolio-notfound__search button:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

.pfolio-notfound__pieces {
	margin-top: clamp(48px, 7vw, 96px);
}

.pfolio-notfound .pfolio-notfound__pieces h2 {
	margin: 0 0 14px;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

.pfolio-notfound__pieces > div {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
}

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

.pfolio-notfound__pieces img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.pfolio-notfound__pieces a:is(:hover, :focus-visible) img {
	opacity: 0.82;
}

.pfolio-notfound__pieces span {
	display: block;
	margin-top: 8px;
	font-size: 10px;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

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