/*
Theme Name:   Pharo-Nox
Theme URI:    https://revistapharo-nox.com
Author:       Pharo-Nox
Description:  Tema propio para la revista digital Pharo-Nox (ocultismo, magia, misticismo). Diseñado para convivir con el plugin pharo-nox-flipbook.
Version:      1.2.5
Requires PHP: 8.0
Text Domain:  pharo-nox
*/

/* ─────────────────────────────────────────────
   IDENTIDAD VISUAL
   Paleta y tipografía verificadas contra
   revistapharo-nox.com; el dorado plano de ahí se
   despliega aquí en varios tonos (dorado brillante
   para énfasis, bronce envejecido para texto largo,
   vino oscuro como acento puntual) para dar
   jerarquía real sin traicionar la marca.
   ───────────────────────────────────────────── */
:root {
	--pn-ink: #07080a;           /* fondo — negro con un punto frío, no negro plano */
	--pn-gold: #c6af2d;          /* dorado — títulos, enlaces, marca */
	--pn-gold-dim: #a3903a;      /* bronce envejecido — cuerpo de texto largo */
	--pn-wine: #7a2530;          /* vino — acento puntual (hover, divisores) */
	--pn-parchment: #eee6d6;     /* pergamino — solo en el estado invertido de botones */
	--pn-font-display: "Cormorant", Georgia, serif; /* títulos — alto contraste, delicada, "grabada" */
	--pn-font-body: "Literata", Georgia, serif;     /* cuerpo — serif literaria, pensada para leer */
	--pn-max-width: 1160px;
	--pn-measure: 65ch;
	--pn-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
}

* {
	box-sizing: border-box;
}

@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Fondo base limpio y sin textura: no hace falta que todo el sitio lleve
   la misma trama — eso se reserva para el hero (ver más abajo), que es
   donde de verdad debe tener impacto. El resto respira sobre --pn-ink liso. */
body {
	margin: 0;
	background: var( --pn-ink );
	color: var( --pn-gold-dim );
	font-family: var( --pn-font-body );
	font-size: 1.0625rem;
	line-height: 1.7;
}

h1, h2, h3, h4 {
	font-family: var( --pn-font-display );
	font-weight: 600;
	line-height: 1.15;
	color: var( --pn-gold );
	text-wrap: balance;
	margin: 0 0 1rem;
}

h1 {
	font-size: clamp( 2.5rem, 1.8rem + 3vw, 4.25rem );
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp( 1.75rem, 1.5rem + 1.2vw, 2.5rem );
}

p {
	max-width: var( --pn-measure );
}

a {
	color: var( --pn-gold );
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 1px solid var( --pn-gold );
	outline-offset: 3px;
}

.pn-container {
	max-width: var( --pn-max-width );
	margin: 0 auto;
	padding: 0 1.5rem;
}

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

/* Etiqueta pequeña en versalitas, tono utilitario */
.pn-eyebrow {
	font-family: var( --pn-font-body );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --pn-wine );
	margin: 0 0 0.75rem;
}

.pn-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var( --pn-wine );
	margin-right: 0.8em;
	vertical-align: middle;
}

/* ── Header ─────────────────────────────────── */
.pn-site-header {
	padding: 2.25rem 0;
	border-bottom: 1px solid rgba( 198, 175, 45, 0.15 );
}

.pn-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.pn-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.pn-logo img {
	max-height: 104px;
	width: auto;
}

@media ( max-width: 640px ) {
	.pn-logo img {
		max-height: 76px;
	}
}

.pn-primary-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pn-primary-nav a {
	position: relative;
	color: var( --pn-gold );
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	padding-bottom: 0.2rem;
}

.pn-primary-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.25s var( --pn-ease );
}

.pn-primary-nav a:hover::after,
.pn-primary-nav .current-menu-item a::after {
	transform: scaleX( 1 );
}

.pn-site-header .pn-social-links a {
	color: var( --pn-gold );
}

.pn-site-header .pn-social-links a:hover {
	color: var( --pn-wine );
}

/* ── Enlaces sociales (compartidos header/footer) ──────────── */
.pn-social-links {
	display: flex;
	gap: 1rem;
}

.pn-social-links a {
	display: inline-flex;
	transition: color 0.2s var( --pn-ease ), transform 0.2s var( --pn-ease );
}

.pn-social-links a:hover {
	transform: translateY( -2px );
}

/* ── Hero ───────────────────────────────────────────────────────────
   A pantalla completa, con un solo dispositivo central haciendo todo el
   trabajo: un astrolabio de anillos concéntricos (pn_hero_instrument(),
   gira despacio vía CSS) tras el emblema real, sobre un foco direccional
   real (claro hacia el instrumento, negro puro en los bordes — no una
   trama repetida). Probado antes como HTML suelto en el navegador. ── */
.pn-hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var( --pn-ink );
}

.pn-hero-spotlight {
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 68% 50%, rgba( 198, 175, 45, 0.16 ) 0%, rgba( 198, 175, 45, 0.05 ) 28%, transparent 55% ),
		radial-gradient( ellipse 140% 100% at 50% 50%, transparent 40%, #000 100% );
	z-index: 1;
}

.pn-hero-frame {
	position: absolute;
	inset: 2.5rem;
	border: 1px solid rgba( 198, 175, 45, 0.16 );
	z-index: 2;
	pointer-events: none;
}

/* Brasas ascendiendo (lienzo dibujado por assets/js/main.js) */
.pn-embers {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.pn-hero-grid {
	position: relative;
	z-index: 3;
	width: 100%;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: 2rem;
}

.pn-hero-content p {
	color: var( --pn-gold-dim );
	font-size: 1.2rem;
	line-height: 1.7;
}

.pn-hero-content h1 {
	font-style: italic;
	font-size: clamp( 3rem, 2rem + 4.2vw, 6.2rem );
	line-height: 0.98;
}

/* El instrumento: tres anillos, cada uno a su propia velocidad, el
   emblema real inmóvil en el centro. */
.pn-instrument {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
	max-width: 480px;
	justify-self: end;
}

.pn-instrument svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pn-ring-outer  { transform-origin: 300px 300px; animation: pn-spin-cw 140s linear infinite; }
.pn-ring-middle { transform-origin: 300px 300px; animation: pn-spin-ccw 100s linear infinite; }
.pn-ring-inner  { transform-origin: 300px 300px; animation: pn-spin-cw 70s linear infinite; }

@keyframes pn-spin-cw  { to { transform: rotate( 360deg ); } }
@keyframes pn-spin-ccw { to { transform: rotate( -360deg ); } }

.pn-emblem-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pn-hero-emblem {
	width: 34%;
	height: auto;
	filter: drop-shadow( 0 0 26px rgba( 198, 175, 45, 0.3 ) );
}

.pn-scroll-cue {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var( --pn-gold-dim );
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.pn-scroll-line {
	width: 1px;
	height: 34px;
	background: linear-gradient( var( --pn-gold ), transparent );
	animation: pn-cue-pulse 2.2s ease-in-out infinite;
}

@keyframes pn-cue-pulse {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

@media ( max-width: 900px ) {
	.pn-hero {
		min-height: auto;
		padding: 7rem 0 5rem;
	}

	.pn-hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.pn-hero-content .pn-eyebrow::before {
		display: none;
	}

	.pn-instrument {
		max-width: 260px;
		margin: 0 auto;
		order: -1;
	}

	.pn-scroll-cue {
		display: none;
	}
}

/* ── Reveal al hacer scroll ─────────────────────
   .pn-reveal-armed solo lo añade el JS: sin JS o con
   "movimiento reducido" activado, el contenido se ve
   siempre, directamente — nunca depende del script. ── */
.pn-reveal {
	transition: opacity 0.7s var( --pn-ease ), transform 0.7s var( --pn-ease );
}

.pn-reveal.pn-reveal-armed {
	opacity: 0;
	transform: translateY( 28px );
}

.pn-reveal.pn-reveal-armed.is-visible {
	opacity: 1;
	transform: none;
}

.pn-issues-grid .pn-issue-card:nth-child( 2 ) {
	transition-delay: 0.1s;
}

.pn-issues-grid .pn-issue-card:nth-child( 3 ) {
	transition-delay: 0.2s;
}

/* ── Contenido (páginas, newsletter, donación): sin tarjeta, sobre el fondo ──── */
.pn-content-card,
.pn-newsletter,
.pn-donate {
	text-align: center;
	padding: 3rem 1.5rem;
	margin: 1rem auto 3rem;
}

.pn-content-card p,
.pn-newsletter p,
.pn-donate p {
	margin-left: auto;
	margin-right: auto;
}

/* Separador horizontal reutilizable en contenido de página: línea fina
   dorada que se desvanece en los extremos — misma idea que
   .pn-footer-divider (vertical), en horizontal. */
.pn-hr {
	width: 100%;
	max-width: 240px;
	height: 1px;
	margin: 2.5rem auto;
	border: none;
	background: linear-gradient( to right, transparent, var( --pn-gold ) 15%, var( --pn-gold ) 85%, transparent );
	opacity: 0.45;
}

/* Logotipo de la Asociación en cabecera de página (página "La Asociación"). */
.pn-asociacion-logo {
	display: flex;
	justify-content: center;
	margin: 0 auto 2.5rem;
}

.pn-asociacion-logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
}

/* Botón de Ko-fi: el widget lo pinta con su propio estilo (no hereda la
   tipografía del tema), así que solo se centra y se le da aire — no se
   fuerza más para no arriesgarse a romper su propio JS. El texto del botón
   sí se sobrescribe a nuestro dorado de marca (el widget lo pone en blanco
   con !important, así que hace falta otro !important con más especificidad
   para ganarle). */
.pn-kofi-button {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0 0.5rem;
}

.pn-kofi-button .kofitext,
.pn-kofi-button .kofitext a {
	color: var( --pn-gold ) !important;
}



/* ── El Archivo: tarjetas por número ──────────────────────────────
   Mismo lenguaje visual que .pn-issue-card (borde fino dorado, portada
   3:4, zoom al pasar el ratón) — para que se sienta la misma familia de
   tarjetas que "Últimos números" en portada, no un componente aparte. ── */
.pn-archivo-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 2.5rem;
	margin: 2.5rem 0;
	text-align: left;
}

.pn-archivo-card {
	position: relative;
	padding: 1.25rem;
	border: 1px solid rgba( 198, 175, 45, 0.25 );
	transition: transform 0.4s var( --pn-ease ), border-color 0.4s var( --pn-ease ), box-shadow 0.4s var( --pn-ease );
}

.pn-archivo-card:hover {
	transform: translateY( -8px );
	border-color: var( --pn-gold );
	box-shadow: 0 24px 48px rgba( 198, 175, 45, 0.16 );
}

.pn-archivo-card-cover {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: rgba( 198, 175, 45, 0.06 );
}

.pn-archivo-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var( --pn-ease );
}

.pn-archivo-card:hover .pn-archivo-card-cover img {
	transform: scale( 1.06 );
}

.pn-archivo-card h3 {
	margin: 1rem 0 0.25rem;
	font-size: 1.3rem;
}

.pn-archivo-card-credit {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	opacity: 0.75;
	max-width: none;
}

.pn-archivo-card-more {
	display: inline-block;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var( --pn-ease );
}

.pn-archivo-card-more:hover {
	border-color: var( --pn-gold );
}

.pn-archivo-card-soon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 200px;
	border-style: dashed;
	opacity: 0.55;
}

.pn-archivo-card-soon:hover {
	transform: none;
	box-shadow: none;
}

/* ── Ficha de una portada (páginas "archivo-portada-*") ──────────────
   Composición editorial "a la antigua": la portada queda flotando a la
   izquierda con un ancho fijo y el texto (justificado) la envuelve por
   la derecha; en cuanto el texto supera la altura de la imagen, sigue a
   todo el ancho por debajo — como el maquetado del original, no una
   simple rejilla de dos columnas. En móvil (< 620px) no flota: la
   portada va centrada arriba y el texto debajo, porque a poco ancho el
   texto envolviendo a la imagen queda demasiado estrecho para leer. ── */
.pn-archivo-detail {
	margin-top: 1rem;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Clearfix: sin esto, si el texto es más corto que la portada flotante,
   el contenedor no la envuelve del todo y lo que venga después (el
   lightbox, por ejemplo) queda descolocado. */
.pn-archivo-detail::after {
	content: '';
	display: table;
	clear: both;
}

.pn-archivo-detail-cover {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 2rem;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid rgba( 198, 175, 45, 0.25 );
}

.pn-archivo-detail-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pn-archivo-detail-body p {
	margin: 0 0 1.25rem;
	max-width: none;
	text-align: justify;
	hyphens: auto;
}

@media ( min-width: 620px ) {
	.pn-archivo-detail-cover {
		float: left;
		width: 300px;
		margin: 0 2rem 1.5rem 0;
	}
}

.pn-archivo-author {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.pn-archivo-author-photo {
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba( 198, 175, 45, 0.35 );
}

.pn-archivo-author-name {
	margin: 0 0 0.4rem;
	color: var( --pn-gold );
	font-family: var( --pn-font-display );
	font-size: 1.25rem;
}

.pn-archivo-author-ig {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var( --pn-gold );
	color: var( --pn-gold );
	transition: background 0.25s var( --pn-ease ), color 0.25s var( --pn-ease );
}

.pn-archivo-author-ig:hover {
	background: var( --pn-gold );
	color: var( --pn-ink );
}

/* Botón que envuelve la portada en la ficha: reset de botón + cursor de
   "acercar", para que quede claro que se puede ampliar. */
.pn-archivo-cover-trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}

/* Lightbox: portada a tamaño completo al pulsarla, para apreciar el
   detalle real de la ilustración. */
.pn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba( 7, 8, 10, 0.92 );
}

.pn-lightbox[hidden] {
	display: none;
}

.pn-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.6 );
}

.pn-lightbox-close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 42px;
	height: 42px;
	border: 1px solid var( --pn-gold );
	background: none;
	color: var( --pn-gold );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s var( --pn-ease ), color 0.25s var( --pn-ease );
}

.pn-lightbox-close:hover {
	background: var( --pn-gold );
	color: var( --pn-ink );
}

body.pn-lightbox-lock {
	overflow: hidden;
}

/* ── Media: vídeos y podcast embebidos ───────────────────────────── */
.pn-media-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 2.5rem;
	margin: 2.5rem 0;
	text-align: left;
}

.pn-media-item--audio {
	grid-column: 1 / -1;
}

.pn-media-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba( 198, 175, 45, 0.06 );
	border: 1px solid rgba( 198, 175, 45, 0.25 );
}

.pn-media-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* El reproductor de iVoox no es 16:9 — es una barra compacta con altura
   fija, como en el original. */
.pn-media-embed--audio {
	aspect-ratio: auto;
	height: 200px;
}

.pn-media-embed--audio iframe {
	position: static;
}

.pn-media-caption {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var( --pn-gold-dim );
	max-width: none;
}

.pn-media-caption a {
	color: var( --pn-gold );
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var( --pn-ease );
}

.pn-media-caption a:hover {
	border-color: var( --pn-gold );
}

/* ── Valores y equipo editorial (página "Que es Pharo-Nox") ─────────
   Mismo criterio "sin tarjeta" que el resto del sitio: nada de cajas
   rellenas, solo una fina línea dorada arriba de cada bloque, como los
   divisores del footer. Texto a la izquierda dentro del bloque, aunque
   .pn-content-card centre el resto de la página — una lista de títulos
   y bios centrada se lee peor que en columna. ──────────────────────── */
.pn-values-grid,
.pn-team-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 2.5rem;
	margin: 2.5rem auto;
	text-align: left;
}

.pn-value,
.pn-team-member {
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 198, 175, 45, 0.35 );
}

.pn-value h3,
.pn-team-member h3 {
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
}

.pn-value p,
.pn-team-member p {
	margin: 0 0 0.75rem;
	max-width: none;
	font-size: 0.95rem;
}

.pn-team-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.pn-team-links a {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var( --pn-ease );
}

.pn-team-links a:hover {
	border-color: var( --pn-gold );
}

.pn-team-photo {
	width: 150px;
	max-width: 100%;
	margin: 0 auto 1rem;
}

.pn-team-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.pn-team-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0.9rem 0 0;
}

.pn-team-social a {
	display: inline-flex;
	color: var( --pn-gold-dim );
	transition: color 0.2s var( --pn-ease );
}

.pn-team-social a:hover {
	color: var( --pn-gold );
}

/* ── Manifiesto: vídeo a la izquierda, texto a la derecha ───────────
   Igual que en el original — ahí el vídeo queda en una columna a la
   izquierda del texto en escritorio, y encima de él en móvil. El vídeo
   va primero en el HTML a propósito (ver pn_get_manifiesto_content()):
   con flex-direction:column en móvil eso ya lo deja arriba del texto sin
   tocar nada más; en escritorio, flex-direction:row lo deja como primera
   columna (izquierda) sin necesidad de "order" ni reordenar por CSS. ── */
.pn-manifiesto-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	text-align: center;
}

.pn-manifiesto-text {
	max-width: var( --pn-measure );
}

@media ( min-width: 780px ) {
	.pn-manifiesto-layout {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 3rem;
	}

	.pn-manifiesto-layout .pn-video-embed {
		flex: 0 0 320px;
		position: sticky;
		top: 2rem;
	}

	.pn-manifiesto-text {
		flex: 1;
		min-width: 0;
		max-width: none;
	}

	.pn-manifiesto-text p {
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}
}

/* Proporción 3:4 tal cual el vídeo original (480×640, formato vertical). */
.pn-video-embed {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 3 / 4;
	border: 1px solid rgba( 198, 175, 45, 0.35 );
}

.pn-video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Colaboradores por número (pestañas Nº I / Nº II) ────────────────
   El separador entre pestañas es una línea fina dorada — no la barra "|"
   tipográfica del original — para que combine con el resto del sitio
   (mismo recurso que los divisores del footer y el techo de las tarjetas
   de "valores"). ──────────────────────────────────────────────────── */
.pn-collab-box {
	margin: 2.5rem auto 0;
}

.pn-collab-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}

.pn-collab-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.4rem 0.1rem;
	font-family: var( --pn-font-display );
	font-size: clamp( 1.1rem, 0.95rem + 0.6vw, 1.4rem );
	color: var( --pn-gold-dim );
	cursor: pointer;
	transition: color 0.25s var( --pn-ease ), border-color 0.25s var( --pn-ease );
}

.pn-collab-tab:hover {
	color: var( --pn-gold );
}

.pn-collab-tab.is-active {
	color: var( --pn-gold );
	border-color: var( --pn-gold );
}

.pn-collab-sep {
	flex: 0 0 1px;
	width: 1px;
	height: 1.4rem;
	background: rgba( 198, 175, 45, 0.35 );
}

.pn-collab-panel {
	max-width: var( --pn-measure );
	margin: 0 auto;
	text-align: left;
}

.pn-collab-panel p {
	margin: 0 0 1.35rem;
	max-width: none;
}

.pn-collab-panel h3 {
	font-size: 1.15rem;
	color: var( --pn-gold );
	margin: 1.75rem 0 0.4rem;
	scroll-margin-top: 6rem;
}

.pn-collab-panel h3:first-child {
	margin-top: 0;
}

.pn-collab-panel strong {
	color: var( --pn-gold );
}

.pn-collab-panel a {
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var( --pn-ease );
}

.pn-collab-panel a:hover {
	border-color: var( --pn-gold );
}

.pn-newsletter-note {
	font-size: 0.85rem;
	opacity: 0.75;
}

/* Formulario real de Mailrelay (plugin oficial): su HTML/CSS interno lo
   sirve el propio Mailrelay, aquí solo se centra y se le da un ancho
   máximo cómodo dentro de la sección. */
.pn-mailrelay-form {
	max-width: 420px;
	margin: 1.5rem auto 0;
}

/* Botón tipo "Leer más": borde dorado, sin relleno. También se usa en
   <button> (banner de cookies) — de ahí el reset de fondo/cursor. */
.pn-button {
	display: inline-block;
	padding: 0.8rem 1.9rem;
	border: 1px solid var( --pn-gold );
	background: none;
	color: var( --pn-gold );
	font-family: var( --pn-font-display );
	font-size: 0.95rem;
	margin-top: 1rem;
	cursor: pointer;
	transition: background 0.25s var( --pn-ease ), color 0.25s var( --pn-ease ), border-color 0.25s var( --pn-ease );
}

.pn-button:hover {
	background: var( --pn-gold );
	border-color: var( --pn-gold );
	color: var( --pn-ink );
	text-decoration: none;
	box-shadow: 0 0 24px rgba( 198, 175, 45, 0.45 );
}

/* ── Banner de cookies ──────────────────────────────────────────────
   Aceptar y Rechazar con el mismo estilo (.pn-button) y el mismo peso
   visual a propósito — la AEPD exige que rechazar sea tan fácil como
   aceptar, nada de un enlace pequeño escondido al lado de un botón
   grande y llamativo. */
.pn-cookie-banner {
	position: fixed;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: var( --pn-ink );
	border: 1px solid rgba( 198, 175, 45, 0.35 );
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.5 );
}

.pn-cookie-banner[hidden] {
	display: none;
}

.pn-cookie-banner p {
	max-width: 56ch;
	margin: 0;
	font-size: 0.9rem;
	color: var( --pn-gold-dim );
}

.pn-cookie-banner p a {
	text-decoration: underline;
}

.pn-cookie-actions {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}

.pn-cookie-actions .pn-button {
	margin-top: 0;
	padding: 0.6rem 1.4rem;
	font-size: 0.85rem;
}

@media ( max-width: 640px ) {
	.pn-cookie-banner {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.pn-cookie-actions {
		justify-content: center;
	}
}

/* ── Últimos números ─────────────────────────────────────────────── */
.pn-latest-issues {
	text-align: center;
	padding: 1rem 1.5rem 3rem;
}

.pn-eyebrow--large {
	font-size: clamp( 1.4rem, 1.1rem + 1vw, 2rem );
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
}

.pn-eyebrow--large::before {
	width: 40px;
}

.pn-issues-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 2.5rem;
	margin: 2.5rem 0;
	text-align: left;
}

.pn-issue-card {
	position: relative;
	display: block;
	color: var( --pn-gold-dim );
	padding: 1.25rem;
	border: 1px solid rgba( 198, 175, 45, 0.25 );
	transition: opacity 0.6s var( --pn-ease ), transform 0.4s var( --pn-ease ), border-color 0.4s var( --pn-ease ), box-shadow 0.4s var( --pn-ease );
}

/* Especificidad a propósito igualada a ".pn-reveal.pn-reveal-armed.is-visible"
   (3 clases) y declarada después en el archivo — si no, una vez revelada,
   la tarjeta se quedaba con transform:none y el hover dejaba de moverla. */
.pn-issue-card.pn-reveal:hover {
	transform: translateY( -8px );
	border-color: var( --pn-gold );
	box-shadow: 0 24px 48px rgba( 198, 175, 45, 0.16 );
}

.pn-issue-cover {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: rgba( 198, 175, 45, 0.06 );
}

.pn-issue-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var( --pn-ease );
}

.pn-issue-card:hover .pn-issue-cover img {
	transform: scale( 1.06 );
}

.pn-issue-index {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: block;
	background: var( --pn-ink );
	border: 1px solid rgba( 198, 175, 45, 0.4 );
	padding: 0.2rem 0.55rem;
	font-family: var( --pn-font-body );
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var( --pn-wine );
}

.pn-issue-title {
	display: block;
	margin-top: 1rem;
	font-family: var( --pn-font-display );
	font-size: 1.3rem;
	color: var( --pn-gold );
}

.pn-issue-date {
	display: block;
	margin-top: 0.2rem;
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	opacity: 0.7;
}

.pn-issues-grid .pn-issue-card:nth-child( 1 ) { transition-delay: 0s; }
.pn-issues-grid .pn-issue-card:nth-child( 2 ) { transition-delay: 0.12s; }
.pn-issues-grid .pn-issue-card:nth-child( 3 ) { transition-delay: 0.24s; }

.pn-see-all {
	display: inline-block;
	margin-top: 1rem;
}

/* ── Footer ─────────────────────────────────────────────────────────
   Dos columnas separadas por una línea vertical fina: marca (logo,
   tagline, redes, copyright) a la izquierda; manifiesto enmarcado por
   el mismo ornamento a la derecha. El ornamento reutiliza el trazo fino
   y los rombos del astrolabio del hero — un solo sistema visual. ── */
.pn-site-footer {
	padding: 3.5rem 0 2rem;
	color: var( --pn-gold-dim );
	border-top: 1px solid rgba( 198, 175, 45, 0.15 );
}

.pn-footer-grid {
	display: grid;
	grid-template-columns: minmax( 220px, 1fr ) 1px minmax( 320px, 1.3fr );
	align-items: center;
	gap: 3rem;
	padding-bottom: 2.5rem;
}

.pn-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	text-align: center;
}

.pn-footer-logo {
	width: 200px;
	height: auto;
}

.pn-footer-tagline {
	font-family: var( --pn-font-display );
	font-style: italic;
	font-size: 1.1rem;
	color: var( --pn-gold );
	margin: 0;
}

.pn-footer-brand .pn-copyright {
	margin: 0;
}

.pn-footer-divider {
	align-self: stretch;
	width: 1px;
	background: linear-gradient( to bottom, transparent, var( --pn-gold ) 15%, var( --pn-gold ) 85%, transparent );
	opacity: 0.45;
}

.pn-footer-manifesto-col {
	text-align: center;
}

.pn-footer-ornament {
	display: flex;
	justify-content: center;
	color: var( --pn-gold );
}

.pn-footer-ornament svg {
	width: 180px;
	height: auto;
}

.pn-footer-manifesto {
	margin: 1.25rem 0;
}

.pn-footer-manifesto p {
	max-width: none;
	font-family: var( --pn-font-body );
	font-size: 1.05rem;
	line-height: 1.8;
	text-align: justify;
	text-align-last: center;
	color: var( --pn-gold-dim );
}

.pn-footer-nav {
	margin-top: 1.5rem;
}

.pn-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pn-footer-nav a {
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.pn-footer-nav a:hover {
	opacity: 1;
}

@media ( max-width: 860px ) {
	.pn-footer-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.pn-footer-divider {
		width: 60%;
		height: 1px;
		margin: 0 auto;
		background: linear-gradient( to right, transparent, var( --pn-gold ) 15%, var( --pn-gold ) 85%, transparent );
	}
}

.pn-copyright {
	opacity: 0.6;
	font-size: 0.85rem;
}