/* =============================================================
   PAISANA.Living — hoja de estilos del tema
   Orden: tokens · reset · tipografía · shell · hero · cases
          transición · secciones de la home · ficha · pie
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	/* Paleta de Living: verde profundo para el armazón, blanco para el
	   contenido largo. Son los mismos valores del sitio publicado. */
	--pl-bg: #0f1d13;
	--pl-ink: #ffffff;
	--pl-black: #100f0e;
	--pl-cover: #0f1010;
	--pl-paper: #ffffff;
	--pl-paper-ink: #000000;
	--pl-paper-soft: rgba(0, 0, 0, 0.5);
	--pl-paper-line: rgba(0, 0, 0, 0.12);
	--pl-chip: #ebebeb;
	--pl-ink-soft: rgba(255, 255, 255, 0.5);
	--pl-ink-line: rgba(255, 255, 255, 0.1);

	/* Tipos del kit de Adobe Fonts de Living */
	--pl-display: "ivypresto-headline", "Playfair Display", Georgia, serif;
	--pl-sans: "ivyjournal", "Inter", -apple-system, "Segoe UI", sans-serif;

	/* Ritmo */
	--pl-pad: 2.5vw;
	--pl-max: 1380px;
	--pl-radius: 4px;
	--pl-header-h: 72px;

	/* Alto de pantalla. En escritorio svh va bien; en móvil deja un hueco
	   abajo cuando la barra del navegador se esconde, así que allí se usa dvh,
	   que sigue a la barra y llena siempre. */
	--pl-viewport: 100svh;

	/* Curva de Living, la misma en todo el sitio */
	--pl-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
	--pl-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: auto; /* lo gobierna Lenis */
	-webkit-text-size-adjust: 100%;
	scrollbar-width: none;
	background: var(--pl-bg);
}

html::-webkit-scrollbar {
	width: 0;
	height: 0;
}

html.lenis-stopped {
	overflow: hidden;
}

body {
	background: var(--pl-bg);
	color: var(--pl-ink);
	font-family: var(--pl-display);
	font-weight: 200;
	font-size: 18px;
	line-height: 1.35;
	letter-spacing: -0.2px;
	/* clip y no hidden: `hidden` convierte al body en contenedor de scroll y
	   rompe el position:sticky de los cases. */
	overflow-x: clip;
	overscroll-behavior-y: none;
	-webkit-font-smoothing: antialiased;
}

body.pl-locked {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

em,
i {
	font-style: italic;
	font-weight: inherit;
}

/* Ivypresto se usa SIEMPRE a peso 200: es el peso de la marca. Sin esta regla,
   cualquier titular sin peso declarado hereda el bold del navegador (700) — le
   pasaba a los h4/h5/h6 escritos desde el editor de bloques. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 200;
}

::selection {
	color: #fff;
	background-color: var(--pl-bg);
}

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

.pl-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	background: #fff;
	color: #000;
	border-radius: var(--pl-radius);
	transform: translateY(-200%);
	transition: transform 0.25s var(--pl-ease);
}

.pl-skip:focus-visible {
	transform: none;
}

/* Fallback sin JS: nada se queda escondido esperando una animación */
.no-js [data-anim] .pl-line > span {
	transform: none !important;
}

/* ---------- 3. Tipografía ---------- */
.pl-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.pl-line > span {
	display: block;
	will-change: transform;
}

/* ---------- 4. Cabecera y CTA flotante ---------- */
.pl-header {
	position: fixed;
	z-index: 999;
	top: 4px;
	left: var(--pl-pad);
	width: calc(100% - var(--pl-pad) * 2);
	display: flex;
	align-items: center;
	gap: 2rem;
	pointer-events: none;

	/* Blanco por defecto, que es lo que hay debajo la mayor parte del recorrido:
	   vídeos y fondos oscuros. El JS pone `is-light` cuando toca fondo claro.
	   Antes esto lo resolvía `mix-blend-mode: difference`, que acierta el
	   contraste solo pero no deja elegir el color: sobre una imagen de tonos
	   medios devuelve cualquier cosa menos blanco o negro. */
	color: #fff;
	transition: color 0.45s var(--pl-ease);
}

.pl-header.is-light {
	color: #000;
}

/* El logo va incrustado, así que sus trazados heredan el color de arriba. */
.pl-header__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pl-header a {
	pointer-events: auto;
}

.pl-header__logo {
	display: block;
	padding: 5px 10px;
	margin-left: -10px;
	max-width: 140px;
	width: 100%;
}

.pl-header__logo img {
	width: 100%;
	height: auto;
}

.pl-nav {
	display: flex;
	gap: 1.5rem;
	font-family: var(--pl-sans);
	font-size: 16px;
}

.pl-nav a {
	position: relative;
}

.pl-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s var(--pl-ease);
}

.pl-nav a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.pl-cta {
	position: fixed;
	z-index: 9999;
	top: 20px;
	font-family: var(--pl-sans);
	font-weight: 200;
	font-size: 18px;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-radius: var(--pl-radius);
	transition: background-color 0.5s var(--pl-ease);
}

.pl-cta:hover {
	background: rgba(0, 0, 0, 0.55);
}

.pl-cta--label {
	right: calc(var(--pl-pad) + 68px);
	padding: 20px 30px;
}

.pl-cta--icon {
	right: var(--pl-pad);
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.pl-cta--icon svg {
	width: 21px;
	height: 20px;
}

/* ---------- 5. Hero ---------- */
.pl-hero {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--pl-viewport);
	overflow: hidden;
	background: #000;
	color: #fff;
}

.pl-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pl-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	opacity: var(--pl-hero-dim, 0.5);
}

.pl-hero__bg video,
.pl-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transform: scale3d(1.1, 1.1, 1.1);
}

.pl-hero__inner {
	position: absolute;
	z-index: 2;
	left: var(--pl-pad);
	right: var(--pl-pad);
	bottom: 60px;
}

.pl-hero__title {
	font-size: calc(20px + 5vw);
	line-height: 1;
	font-weight: 200;
	letter-spacing: -0.02em;
}

/* Telón que baja sobre el hero cuando el contenido lo cubre: sin él, el vídeo
   se ve por debajo del borde superior de la sección que sube. */
.pl-hero__cover {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--pl-cover);
	opacity: 0;
	pointer-events: none;
}

/* El contenido sube por encima del hero pegado */
.pl-flow {
	position: relative;
	z-index: 1;
}

/* ---------- 6. Latest projects: cases a pantalla completa ---------- */
/* Cada case es sticky: ocupa su hueco de 100svh en el flujo pero se queda
   pegado arriba, así el siguiente sube y lo va tapando de abajo arriba. */
.pl-cases {
	position: relative;
	background: var(--pl-paper);
}

/* Sin max-width ni centrado: el rótulo tiene que arrancar en la misma vertical
   que el logo de la cabecera, que vive a var(--pl-pad) del borde. */
.pl-cases__intro {
	padding: 0 var(--pl-pad) 20px var(--pl-pad);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	color: var(--pl-paper-ink);
}

.pl-cases__label {
	font-size: 24px;
	font-weight: 200;
}

.pl-cases__all {
	font-family: var(--pl-sans);
	font-size: 16px;
	opacity: 0.5;
	transition: opacity 0.5s var(--pl-ease);
}

.pl-cases__all:hover {
	opacity: 1;
}

/* La pista sólo existe para dar distancia de scroll: vara y media de pantalla
   por case. No se ve nada de ella. */
.pl-cases-track {
	position: relative;
	height: calc(var(--pl-cases, 1) * 1.5 * var(--pl-viewport));
}

/* La ventana se queda pegada mientras la pista pasa por debajo, y dentro de
   ella los cases están apilados y quietos. Al acabar la pista se despega sola,
   así que no tapa lo que viene después. */
.pl-cases-viewport {
	position: sticky;
	top: 0;
	height: var(--pl-viewport);
	overflow: hidden;
	isolation: isolate;
}

/* Todos ocupan la ventana entera, uno encima de otro por orden del documento.
   Cada uno entra recortado por abajo y la máscara sube hasta destaparlo: la
   imagen no se desplaza mientras aparece, se descubre en su sitio. */
.pl-case {
	position: absolute;
	inset: 0;
	display: block;
	clip-path: inset(100% 0 0 0);
	min-height: 30rem;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background: var(--pl-black);
}

.pl-case__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--pl-black);
	transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* El media llena su ventana exactamente. El movimiento no lo da un
   desplazamiento sino la escala: entra un punto ampliado y se va asentando
   mientras la máscara lo descubre.

   El overlay de la transición usa exactamente la misma geometría, así el
   encuadre coincide al milímetro al aterrizar en la ficha. Si se toca aquí se
   tocan los tres a la vez, que para eso comparten regla. */
.pl-case__media > video,
.pl-case__media > img,
.pl-case-hero__media > video,
.pl-case-hero__media > img,
.pl-transition__media > video,
.pl-transition__media > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.pl-case__media > video {
	z-index: 1;
}

.pl-case:hover .pl-case__media {
	transform: scale(1.03);
}

/* Durante una transición no queremos que el hover compita por el compositor
   con la animación del overlay. */
body.pl-transitioning .pl-case__media {
	transition: none;
}

.pl-case__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 9, 8, 0.45) 0%,
		rgba(10, 9, 8, 0.05) 38%,
		rgba(10, 9, 8, 0.8) 100%
	);
}

/* Velo que lava la sección que se queda atrás hacia el blanco de la página */
.pl-case__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: var(--pl-paper);
	opacity: 0;
}

.pl-case__inner {
	position: relative;
	z-index: 4;
	height: 100%;
	will-change: transform, opacity;
}

/* Título y meta comparten línea a media altura del media, alineados por la
   base para que se lean como una sola. El desplazamiento hacia el borde
   inferior lo hace el JS con el scroll: aquí sólo queda el punto de partida.
   Sin max-width ni centrado, así arrancan en la misma vertical que el logo. */
.pl-case__row {
	position: absolute;
	left: var(--pl-pad);
	right: var(--pl-pad);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	will-change: transform;
}

/* Tamaño fijo en escritorio: la fila comparte línea con la meta y un titular
   que escalara con el ancho acabaría empujándola. En móvil sigue escalando,
   porque allí van apilados y el titular manda. */
.pl-case__title {
	font-size: 40px;
	line-height: 0.95;
	font-weight: 200;
	letter-spacing: -0.02em;
}

.pl-case__meta {
	flex-shrink: 0;
	text-align: right;
	font-family: var(--pl-sans);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.7);
}

.pl-case__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 18px 28px;
	font-family: var(--pl-sans);
	font-size: 14px;
	letter-spacing: 0.06em;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--pl-radius);
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background-color 0.5s var(--pl-ease), color 0.5s var(--pl-ease),
		border-color 0.5s var(--pl-ease);
}

.pl-case__cta i {
	width: 1rem;
	height: 1px;
	background: currentColor;
	transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.pl-case:hover .pl-case__cta {
	background: #fff;
	color: #000;
	border-color: #fff;
}

.pl-case:hover .pl-case__cta i {
	width: 1.6rem;
}

/* ---------- 7. Overlay de transición ---------- */
.pl-transition {
	position: fixed;
	inset: 0;
	/* Por encima de los botones flotantes de contacto (9999): mientras la
	   máscara viaja no puede quedarse nada de la página anterior a la vista. */
	z-index: 10050;
	pointer-events: none;
	display: grid;
	place-items: center;
	visibility: hidden;
}

.pl-transition.is-active {
	visibility: visible;
}

.pl-transition__panel {
	position: absolute;
	inset: 0;
	background: var(--pl-cover);
	opacity: 0;
	will-change: opacity, transform;
}

.pl-transition__label {
	position: relative;
	font-family: var(--pl-display);
	font-size: calc(20px + 3vw);
	font-weight: 200;
	color: #fff;
	opacity: 0;
	will-change: transform, opacity;
}

/* El rectángulo que vuela. Sin fondo propio: quien tapa es el panel, que entra
   por detrás, así en los primeros fotogramas se ve la página real debajo. */
.pl-transition__media {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;
	background: transparent;
	/* Sólo transform y opacity: las dos propiedades que el navegador resuelve
	   en el compositor sin recalcular layout ni repintar el vídeo. */
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* El póster va siempre debajo como base; el vídeo encima sólo si tiene
   fotogramas. Si tarda en pintar, debajo ya está la imagen. */
.pl-transition__media img {
	z-index: 1;
}

.pl-transition__media video {
	display: none;
	z-index: 2;
}

.pl-transition__media.use-video video {
	display: block;
}

/* Al entrar en una ficha desde un case, el panel tiene que estar opaco desde
   el PRIMER fotograma: si esperásemos a que arrancara el JS del pie se vería la
   ficha entera un instante antes de la animación. De eso se encarga la clase
   que el script inline del <head> pone en <html>. */
html.pl-entering .pl-transition {
	visibility: visible;
}

html.pl-entering .pl-transition__panel {
	opacity: 1;
}

html.pl-entering body {
	overflow: hidden;
}

/* Mientras entra la ficha, su hero se mantiene invisible: quien enseña el
   media es el overlay, y dos copias del mismo vídeo desincronizadas cantan. */
html.pl-entering .pl-case-hero__media {
	opacity: 0;
}

/* ---------- 8. Overview ---------- */
.pl-overview {
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	padding: calc(10vw + 20px) var(--pl-pad);
	text-align: center;
}

.pl-overview__lead {
	max-width: 1200px;
	margin: 0 auto;
	font-size: calc(24px + 2.5vw);
	line-height: 1.1;
	font-weight: 200;
	text-align: left;
	text-indent: calc(30px + 10vw);
}

.pl-overview__list {
	margin: 50px auto 0;
	font-size: calc(24px + 2.5vw);
	line-height: 1.1;
	display: flex;
	flex-direction: column;
}

.pl-overview__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0;
	font-weight: 200;
}

.pl-overview__list img {
	display: inline-flex;
	margin-right: 10px;
	border-radius: var(--pl-radius);
	width: 12%;
	max-width: 90px;
	height: auto;
}

/* ---------- 9. Why ---------- */
.pl-why {
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	padding: calc(20px + 10vw) var(--pl-pad) calc(20px + 5vw);
}

.pl-why__title {
	width: 80%;
	font-size: calc(24px + 3vw);
	line-height: 1.1;
	font-weight: 200;
}

.pl-why__text {
	margin-top: 30px;
	max-width: 90%;
}

.pl-why__text p {
	max-width: 420px;
	margin-left: auto;
	font-family: var(--pl-sans);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 200;
}

.pl-why__text > div {
	max-width: 420px;
	margin: 40px 0 0 auto;
}

.pl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 20px 30px;
	border-radius: var(--pl-radius);
	background: #000;
	color: #fff;
	font-family: var(--pl-display);
	font-size: 20px;
	font-weight: 200;
	transition: opacity 0.5s var(--pl-ease);
}

.pl-btn:hover {
	opacity: 0.75;
}

/* ---------- 10. Separador y mood ---------- */
.pl-separator {
	overflow: hidden;
	background: var(--pl-black);
}

.pl-separator img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: bottom;
}

.pl-mood {
	position: relative;
	z-index: 2;
	background: var(--pl-black);
}

.pl-mood video {
	width: 100%;
	height: auto;
}

/* ---------- 11. Services ---------- */
.pl-services {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 2rem;
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	padding: calc(20px + 5vw) var(--pl-pad);
}

.pl-services__text {
	position: sticky;
	top: 100px;
	flex: 1;
	margin-bottom: auto;
}

.pl-services__text h2 {
	max-width: 960px;
	padding-right: calc(20px + 2vw);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 200;
}

.pl-services__text p {
	margin-top: 40px;
	max-width: 420px;
	font-family: var(--pl-sans);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 300;
}

.pl-services__list {
	width: 50%;
}

.pl-services__list h3 {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 200;
}

.pl-services__list li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: var(--pl-radius);
	background: #f5f5f5;
	font-size: calc(24px + 3vw);
	line-height: 1;
	font-weight: 200;
}

.pl-services__info p {
	margin-top: calc(30px + 3vw);
	max-width: 600px;
	font-family: var(--pl-sans);
	font-size: 16px;
	line-height: 1.25;
}

.pl-services__info strong {
	opacity: 0.5;
	font-weight: 400;
}

/* ---------- 12. Founders ---------- */
.pl-founders {
	position: relative;
	z-index: 2;
	background: var(--pl-black);
	padding: calc(20px + 5vw) var(--pl-pad);
}

.pl-founders__title {
	padding-bottom: calc(20px + 5vw);
	text-align: center;
	font-size: calc(20px + 8vw);
	font-weight: 200;
}

.pl-founders__wrapper {
	max-width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
}

.pl-founder {
	margin-bottom: 40px;
}

.pl-founder__image {
	overflow: hidden;
	border-radius: var(--pl-radius);
}

.pl-founder__image img {
	width: 100%;
	height: auto;
	display: block;
}

.pl-founder__info h3 {
	margin-top: 10px;
	font-size: 32px;
	font-weight: 200;
}

.pl-founder__info p {
	margin: 20px 0;
	font-family: var(--pl-sans);
	font-weight: 200;
	opacity: 0.5;
}

.pl-founder__links a {
	margin-right: 10px;
	font-family: var(--pl-sans);
}

.pl-founder__links a span {
	display: inline-block;
	transition: transform 0.5s var(--pl-ease);
}

.pl-founder__links a:hover span {
	transform: translateX(4px);
}

/* ---------- 13. Ficha de proyecto ---------- */
.pl-case-hero {
	position: relative;
	height: var(--pl-viewport);
	overflow: hidden;
	background: var(--pl-black);
	isolation: isolate;
}

.pl-case-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pl-case-hero__media > video {
	z-index: 1;
}

/* Oscurece arriba y abajo: arriba para el logo, abajo para que el título del
   proyecto se lea sobre cualquier plano. */
.pl-case-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 9, 8, 0.35) 0%,
		rgba(10, 9, 8, 0) 35%,
		rgba(10, 9, 8, 0.7) 100%
	);
}

/* El título vive sobre la imagen de cabecera, anclado abajo. */
.pl-case-hero__titles {
	position: absolute;
	z-index: 4;
	left: var(--pl-pad);
	right: var(--pl-pad);
	bottom: 60px;
	color: #fff;
}

.pl-case-hero__titles h1,
.pl-case-hero__titles h2 {
	max-width: 50%;
	font-size: calc(20px + 1.6vw);
	line-height: 0.95;
	font-weight: 200;
}

.pl-case-hero__titles h2 {
	opacity: 0.6;
	text-wrap: balance;
}

.pl-detail {
	position: relative;
	z-index: 2;
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	padding-bottom: calc(20px + 5vw);
}

.pl-detail__wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(40px + 3vw) 1.5vw 0;
}

/* El titular se fue al hero, así que aquí sólo queda la meta: este bloque ya no
   reserva una pantalla entera. */
.pl-detail__head {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.pl-detail__facts {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 20px;
	font-family: var(--pl-sans);
	font-size: 16px;
}

.pl-detail__facts dt {
	opacity: 0.5;
	font-weight: 400;
}

.pl-detail__facts dd {
	font-weight: 500;
	line-height: 1;
}

.pl-detail__content {
	width: 100%;
}

.pl-detail__content figure,
.pl-detail__content .wp-block-image,
.pl-detail__content .wp-block-video {
	margin: 0 0 10px;
	background: #fbf8f2;
	overflow: hidden;
	border-radius: var(--pl-radius);
}

.pl-detail__content img,
.pl-detail__content video {
	display: block;
	width: 100%;
	height: auto;
}

.pl-detail__content .wp-block-columns {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.pl-detail__content .wp-block-columns .wp-block-column {
	flex: 1;
	min-width: 0;
}

.pl-detail__content p:not(:empty) {
	max-width: 1280px;
	margin: calc(30px + 8vw) 0 calc(30px + 8vw) auto;
	font-size: calc(20px + 0.6vw);
	line-height: 1.05;
}

.pl-detail__content h2,
.pl-detail__content h3 {
	max-width: 1280px;
	margin: calc(30px + 8vw) 0 calc(30px + 8vw) auto;
	font-size: calc(20px + 2.6vw);
	line-height: 0.95;
	font-weight: 200;
}

.pl-detail__content h2 em,
.pl-detail__content h3 em {
	opacity: 0.5;
	font-style: normal;
}

.pl-detail__foot {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	margin: calc(20px + 5vw) 0;
}

.pl-detail__summary {
	max-width: 50%;
}

.pl-detail__summary p {
	margin-bottom: 40px;
	font-size: calc(20px + 2vw);
	line-height: 1.05;
	font-weight: 200;
}

.pl-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	font-family: var(--pl-sans);
}

.pl-detail__tags span {
	padding: 5px 10px;
	border-radius: 2px;
	background: var(--pl-chip);
	font-size: 14px;
	font-weight: 500;
}

.pl-detail__visit {
	margin-top: auto;
	font-family: var(--pl-sans);
}

.pl-detail__visit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pl-detail__visit span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	transition: opacity 0.6s var(--pl-ease);
}

.pl-detail__visit a:hover span {
	opacity: 0.5;
}

/* ---------- 14. More projects ---------- */
.pl-related {
	position: relative;
	z-index: 2;
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	padding: 0 1.5vw calc(40px + 3vw);
}

.pl-related__title {
	margin-bottom: 30px;
	font-size: calc(20px + 0.8vw);
	font-weight: 200;
}

.pl-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.pl-related__media {
	overflow: hidden;
	border-radius: var(--pl-radius);
	aspect-ratio: 4 / 3;
	background: var(--pl-chip);
}

.pl-related__media img,
.pl-related__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.pl-related__item:hover .pl-related__media img,
.pl-related__item:hover .pl-related__media video {
	transform: scale(1.04);
}

.pl-related__item h3 {
	margin-top: 10px;
	font-size: calc(20px + 0.2vw);
	font-weight: 200;
}

/* ---------- 15. Listado de projects ---------- */
.pl-main--archive {
	background: var(--pl-paper);
	color: var(--pl-paper-ink);
	min-height: 100vh;
	/* Mismo ancho útil que la columna de contenido de una ficha: 1.5vw a cada
	   lado y sin max-width, así el listado y la ficha comparten retícula. */
	padding: calc(var(--pl-header-h) + 6vw) 1.5vw calc(40px + 5vw);
}

.pl-archive__head h1 {
	margin: 0 0 calc(20px + 3vw);
	font-size: calc(24px + 3vw);
	font-weight: 200;
}

.pl-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 20px;
}

.pl-archive__media {
	overflow: hidden;
	border-radius: var(--pl-radius);
	aspect-ratio: 1080 / 1350;
	background: var(--pl-chip);
}

.pl-archive__media img,
.pl-archive__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.pl-archive__item:hover .pl-archive__media img,
.pl-archive__item:hover .pl-archive__media video {
	transform: scale(1.04);
}

.pl-archive__item h2 {
	margin-top: 10px;
	font-size: 32px;
	font-weight: 200;
}

.pl-archive__item p {
	font-family: var(--pl-sans);
	font-size: 15px;
	opacity: 0.5;
}

.pl-archive__empty {
	font-family: var(--pl-sans);
	opacity: 0.6;
}

/* ---------- 16. Páginas sueltas ---------- */
.pl-main--page {
	min-height: 100vh;
	padding: calc(var(--pl-header-h) + 6vw) var(--pl-pad) calc(40px + 5vw);
}

.pl-page {
	max-width: 900px;
	margin: 0 auto;
}

.pl-page__title {
	font-size: calc(24px + 3vw);
	font-weight: 200;
	margin-bottom: 2rem;
}

.pl-page__content {
	font-family: var(--pl-sans);
	font-size: 18px;
	line-height: 1.5;
}

.pl-page__content > * + * {
	margin-top: 1.2em;
}

.pl-page__content img {
	height: auto;
	border-radius: var(--pl-radius);
}

.pl-postlist {
	max-width: var(--pl-max);
	margin: 0 auto;
	display: grid;
	gap: 2rem;
}

.pl-postlist__item h2 {
	font-size: 28px;
	font-weight: 200;
}

.pl-postlist__item p {
	font-family: var(--pl-sans);
	opacity: 0.6;
}

.pl-error {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background: var(--pl-cover);
	text-align: center;
}

.pl-error__mark {
	display: block;
	font-size: calc(24px + 8vw);
	line-height: 1;
	opacity: 0.3;
}

.pl-error h1 {
	font-size: calc(20px + 2vw);
	font-weight: 200;
	margin: 1rem 0;
}

.pl-error a {
	font-family: var(--pl-sans);
	border-bottom: 1px solid currentColor;
}

/* ---------- 17. Pie ---------- */
.pl-footer {
	position: relative;
	z-index: 2;
	background: var(--pl-black);
	color: #fff;
	padding: 0 1.5vw 20px;
	margin-top: -1px;
}

.pl-footer__talk {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(60px + 5vw) 0;
}

.pl-footer__claim {
	margin-bottom: 30px;
	text-align: center;
	font-size: calc(20px + 3vw);
	line-height: 1.1;
	font-weight: 200;
}

.pl-footer__cta {
	overflow: hidden;
	padding: 30px 60px;
	border-radius: var(--pl-radius);
	background: #fff;
	color: #000;
	font-family: var(--pl-display);
	font-size: 24px;
	font-weight: 200;
}

.pl-footer__cta svg {
	display: inline;
	margin-left: 4px;
	transition: margin 0.3s var(--pl-ease);
}

.pl-footer__cta:hover svg {
	margin-left: 10px;
}

.pl-footer__contact {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.pl-footer__contact small {
	margin-left: 10px;
	font-family: var(--pl-sans);
	font-size: 16px;
	font-weight: 200;
	opacity: 0.3;
}

.pl-footer__contact a {
	margin: 0 10px 0 6px;
	font-family: var(--pl-sans);
	font-size: 16px;
	font-weight: 200;
}

.pl-footer__nav {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.pl-footer__menu {
	display: flex;
	gap: 1rem;
	font-family: var(--pl-sans);
	font-size: 16px;
	opacity: 0.6;
}

.pl-footer__logo {
	border-top: 1px solid var(--pl-ink-line);
	padding-top: 20px;
}

.pl-footer__logo img {
	width: 100%;
	height: auto;
	opacity: 0.1;
}

.pl-footer__credit {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	font-family: var(--pl-sans);
	font-size: 12px;
	font-weight: 300;
	opacity: 0.3;
}

/* ---------- 18. Modal de contacto ---------- */
.pl-modal {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 99999;
	color: #fff;
	pointer-events: none;
	height: 100%;
}

.pl-modal::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 10px;
	background: #000;
	transform: translate3d(0, calc(-100% - 10px), 0);
	transform-origin: bottom;
	transition: transform 0.5s var(--pl-ease);
	will-change: transform;
}

.pl-modal.is-open {
	pointer-events: auto;
}

.pl-modal.is-open::before {
	transform: none;
}

.pl-modal__close {
	position: absolute;
	z-index: 3;
	top: 2vw;
	right: calc(6vw - 10px);
	padding: 12px;
	font-size: 24px;
	font-weight: 200;
	opacity: 0;
	transition: opacity 0.9s var(--pl-ease) 0.3s;
}

.pl-modal__close::before {
	content: "×  Close";
}

.pl-modal.is-open .pl-modal__close {
	opacity: 1;
}

.pl-modal__wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: calc(50px + 4vw) 30px calc(50px + 6vw);
}

.pl-modal__email {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 1.2s var(--pl-ease) 0.3s;
}

.pl-modal.is-open .pl-modal__email,
.pl-modal.is-open .pl-modal__claim {
	opacity: 1;
}

.pl-modal__email > span {
	position: relative;
	padding-right: 20px;
	margin-right: 10px;
	font-size: calc(24px + 4vw);
	line-height: 1.2;
	font-weight: 200;
}

.pl-modal__email > span::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: #fff;
	opacity: 0.2;
}

.pl-modal__copy {
	display: flex;
	flex-direction: column;
}

.pl-modal__msg {
	padding: 20px 10px 0;
	margin-bottom: -18px;
	font-size: 20px;
	font-weight: 200;
	opacity: 0.5;
	pointer-events: none;
}

.pl-modal__copy button {
	padding: 20px 10px;
	font-family: var(--pl-display);
	font-size: 20px;
	font-weight: 200;
	color: #fff;
	transition: opacity 1s var(--pl-ease);
}

.pl-modal__claim {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--pl-sans);
	font-size: 18px;
	font-weight: 300;
	color: #676767;
	opacity: 0;
	transition: opacity 1.2s var(--pl-ease) 0.3s;
}

.pl-modal__claim a {
	display: inline-flex;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--pl-radius);
	color: #fff;
	transition: border-color 1s var(--pl-ease);
}

.pl-modal__claim a:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- 19. Paginación ---------- */
.pagination {
	max-width: var(--pl-max);
	margin: calc(20px + 3vw) auto 0;
	display: flex;
	gap: 12px;
	font-family: var(--pl-sans);
	font-size: 16px;
}

.pagination .current {
	opacity: 0.4;
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 960px) {
	:root {
		--pl-pad: 1.25rem;
		--pl-header-h: 58px;

		/* dvh y no svh: svh mide la pantalla con la barra del navegador SIEMPRE
		   visible, así que al esconderse quedaba una franja muerta abajo y el case
		   no llenaba. dvh sigue a la barra y llena siempre. */
		--pl-viewport: 100dvh;
	}

	.pl-cta {
		top: 10px;
	}

	.pl-cta--label {
		padding: 16px 20px;
		font-size: 16px;
		right: calc(var(--pl-pad) + 58px);
	}

	.pl-cta--icon {
		width: 55px;
		height: 55px;
	}

	.pl-header__nav {
		display: none;
	}

	.pl-hero__title {
		font-size: calc(26px + 2.5vw);
	}

	/* En móvil el titular ya ocupa el ancho entero: la meta no cabe a su lado
	   y se apila debajo, alineada con él. */
	.pl-case__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}

	/* Aquí el titular sí escala con el ancho, como antes. */
	.pl-case__title {
		font-size: calc(28px + 4vw);
	}

	.pl-case__meta {
		text-align: left;
	}

	.pl-why__title {
		width: 100%;
	}

	.pl-services {
		flex-direction: column;
		padding: calc(20px + 6vw) calc(20px + 1.5vw);
	}

	.pl-services__text {
		position: static;
	}

	.pl-services__text h2 {
		font-size: 24px;
		margin: calc(20px + 2vw) 0 calc(40px + 5vw);
	}

	.pl-services__list {
		width: 100%;
	}

	.pl-services__list li {
		font-size: calc(24px + 1.5vw);
	}

	.pl-founders__wrapper {
		grid-template-columns: 1fr;
		padding: 0 20px;
	}

	.pl-case-hero__titles h1,
	.pl-case-hero__titles h2,
	.pl-detail__summary {
		max-width: 100%;
	}

	.pl-case-hero__titles {
		bottom: 40px;
	}

	/* Dos columnas siempre, no lo que quepa: con flex y wrap la fila se
	   repartía sola y quedaba Client/Industry/Service en una línea y Year
	   descolgado. En rejilla el reparto es fijo y siempre cuadra. */
	.pl-detail__facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
	}

	.pl-detail__foot {
		flex-direction: column;
	}

	.pl-detail__content .wp-block-columns {
		flex-direction: column;
	}

	.pl-related__grid,
	.pl-archive__grid {
		grid-template-columns: 1fr;
	}

	/* En móvil el contenido de la ficha respiraba 6 píxeles (1.5vw), que es
	   nada: se comía el aire de los lados. El mismo margen que el titular del
	   hero, para que todo caiga en la misma vertical. */
	.pl-detail__wrapper {
		padding-left: var(--pl-pad);
		padding-right: var(--pl-pad);
	}

	.pl-related {
		padding-left: var(--pl-pad);
		padding-right: var(--pl-pad);
	}

	/* Apilados en una columna, 10 píxeles los dejaba pegados unos a otros. */
	.pl-related__grid {
		gap: 34px;
	}

	/* El claim del pie parte por donde empieza la cursiva, que es donde el
	   texto cambia de idea. */
	.pl-footer__claim em {
		display: block;
	}
}

@media (max-width: 720px) {
	.pl-overview__lead {
		text-indent: 0;
	}

	.pl-footer__claim {
		max-width: 320px;
		font-size: calc(26px + 3vw);
	}

	.pl-footer__cta {
		padding: 20px 30px;
		font-size: 20px;
	}

	.pl-footer__contact {
		flex-direction: column;
		align-items: center;
	}

	.pl-footer__credit {
		flex-direction: column;
		text-align: center;
	}

	.pl-modal__email {
		flex-direction: column;
		align-items: flex-start;
	}

	.pl-modal__email > span::before {
		display: none;
	}
}

/* ---------- 21. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.pl-case {
		position: relative;
	}
}

/* La barra de administración no debe empujar los elementos fijos */
body.admin-bar .pl-header {
	top: calc(32px + 4px);
}

body.admin-bar .pl-cta {
	top: calc(32px + 20px);
}

@media (max-width: 782px) {
	body.admin-bar .pl-header {
		top: calc(46px + 4px);
	}

	body.admin-bar .pl-cta {
		top: calc(46px + 10px);
	}
}