/*
Theme Name: Pau Ninja
Theme URI:
Author: Pau Ninja
Author URI:
Description: Tema base mínimo para Pau Ninja. Solo el código básico: topbar global, contenedor de contenido centrado y tipografía configurable. Sin estilos superfluos.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pau-ninja
*/

/* ==========================================================================
   Variables de marca — única fuente de verdad para los colores compartidos
   por la topbar. Cambia aquí y todo se actualiza.
   ========================================================================== */
:root {
	--brand-bg:     #000;     /* fondo del topbar */
	--brand-fg:     #fff;     /* texto del topbar y del CTA */
	--brand-accent: #57ad68;  /* verde acento — bg del CTA */
}

/* ==========================================================================
   Portada — above fold copiado de pau.ninja sin navbar de origen.
   ========================================================================== */
.pn-portada {
	background: var( --brand-bg, #071217 );
	color: var( --brand-fg, #fff );
	margin: 0;
	overflow: hidden;
}

.pn-portada__projects {
	background: #fff;
	color: #1f2a37;
}

body.page-template-page-portada,
body.page-portada {
	background: var( --brand-bg, #071217 );
}

.pn-portada__hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background-image: var( --pn-portada-bg );
	background-position: center center;
	background-size: cover;
	isolation: isolate;
	font-family: var( --pn-font-head, Montserrat, "Helvetica Neue", Arial, sans-serif );
}

.pn-portada__shade {
	position: absolute;
	inset: 0;
	background: var( --brand-bg, #000 );
	opacity: 0.5;
	z-index: -1;
}

.pn-portada__inner {
	width: min( 100%, 1740px );
	margin: 0 auto;
	padding: 92px 88px 86px;
	display: grid;
	grid-template-columns: 43% 57%;
	align-items: center;
	gap: 56px;
}

.pn-portada__headline {
	text-align: right;
	padding-right: 0;
}

.pn-portada__headline h1 {
	margin: 0;
	color: var( --brand-fg, #fff );
	font-family: inherit;
	font-size: clamp( 2.15rem, 3vw, 2.5rem );
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
}

.pn-portada__line {
	display: block;
}

.pn-portada__line--small {
	font-size: 0.8em;
	white-space: nowrap;
}

.pn-portada__line--accent {
	color: var( --brand-accent, #fec52e );
	font-size: 1em;
}

.pn-portada__line--spaced {
	margin-top: clamp( 44px, 4.85vw, 66px );
	font-size: 0.8em;
	white-space: nowrap;
}

.pn-portada__line em {
	color: var( --brand-accent, #fec52e );
	font-style: normal;
}

.pn-portada__copy {
	align-self: start;
	margin-top: 0;
	padding-left: 0;
	color: var( --brand-fg, #fff );
	font-family: var( --pn-font-head, Montserrat, "Helvetica Neue", Arial, sans-serif );
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	max-width: 820px;
}

.pn-portada__copy p {
	margin: 0 0 20px;
}

.pn-portada__copy p:last-child {
	margin-bottom: 0;
}

.pn-portada__copy strong {
	color: var( --brand-accent, #fec52e );
	font-weight: 700;
}

.pn-portada .sn-rocket-btn {
	--bg: var( --brand-cta-fg, #0a0a0a );
	--fg: var( --brand-accent, #fec52e );
	--a: var( --brand-accent, #fec52e );
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 14.3px 26.4px;
	background: var( --bg );
	color: var( --fg );
	border: 1.45px solid var( --a );
	border-radius: 18.7px;
	font-family: var( --pn-font-head, Montserrat, "Helvetica Neue", Arial, sans-serif );
	font-size: 15.4px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 4.5px 4.5px 0 var( --a );
	transform: skewX( -8deg );
	transition: transform .16s ease, box-shadow .16s ease;
}

.pn-portada .sn-rocket-btn span {
	position: relative;
	z-index: 3;
	transform: skewX( 8deg ) translateX( 16px );
	transition: transform .5s cubic-bezier( .76, 0, .24, 1 );
}

.pn-portada .sn-rocket-btn__icon {
	position: absolute;
	left: 11px;
	z-index: 3;
	color: currentColor;
	pointer-events: none;
	transform: skewX( 8deg ) rotate( 30deg );
	transition: transform .5s cubic-bezier( .76, 0, .24, 1 );
}

.pn-portada .sn-rocket-btn:hover {
	color: var( --fg );
	transform: skewX( -8deg ) translate( -2px, -2px );
	box-shadow: 6.3px 6.3px 0 var( --a );
}

.pn-portada .sn-rocket-btn:hover .sn-rocket-btn__icon {
	transform: skewX( 8deg ) translateX( 5px ) rotate( 90deg );
}

.pn-portada .sn-rocket-btn:hover span {
	transform: skewX( 8deg ) translateX( 15px );
}

@media ( max-width: 980px ) {
	.pn-portada__hero {
		min-height: 100vh;
		background-position: 58% center;
	}

	.pn-portada__inner {
		grid-template-columns: 1fr;
		padding: 86px 26px 72px;
		gap: 0;
	}

	.pn-portada__headline {
		text-align: left;
		padding-right: 0;
		max-width: 620px;
	}

	.pn-portada__copy {
		margin-top: 46px;
		padding-left: 0;
		max-width: 680px;
	}

	.pn-portada__line--spaced {
		margin-top: 40px;
	}

	.pn-portada__line--small,
	.pn-portada__line--spaced {
		white-space: normal;
	}
}

@media ( max-width: 640px ) {
	.pn-portada__hero {
		background-position: 55% center;
	}

	.pn-portada__inner {
		padding: 68px 20px 64px;
	}

	.pn-portada__copy {
		font-size: 18px;
		line-height: 1.5;
	}

	.pn-portada__copy p {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   Topbar (.site-topbar) — barra superior sticky en TODAS las páginas.
   Banda negra al borde superior del viewport con el nombre del sitio
   pegado a la izquierda y los items del menú alineados a la derecha.
   El markup vive en header.php.
   ========================================================================== */
.site-topbar {
	background: var( --brand-bg );
	color: var( --brand-fg );
	width: 100%;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	position: sticky;
	top: 0;
	z-index: 1000;
	transform: translateY( 0 );
	transition: transform 0.28s ease;
	will-change: transform;
}

/* Auto-hide al hacer scroll hacia abajo. La clase .is-hidden la pone el JS;
   se quita al hacer scroll hacia arriba o al estar cerca del top. */
.site-topbar.is-hidden {
	transform: translateY( -100% );
}

.site-topbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "navleft brand navright";
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 32px;
	gap: 24px;
}

/* Columnas 1fr iguales a los lados => el logo (columna auto) queda SIEMPRE
   centrado en el viewport, independientemente del ancho de cada menú. */
/* Cada menú se centra dentro de su mitad (el espacio entre su extremo y el
   logo), no pegado al borde. El logo (columna auto) sigue centrado en el
   viewport porque las dos columnas 1fr son iguales. */
.site-topbar__nav--left  { grid-area: navleft;  justify-self: center; }
.site-topbar__brand      { grid-area: brand;    justify-self: center; }
.site-topbar__right      { grid-area: navright; justify-self: stretch; }

/* Grupo derecho: menú 2 centrado en su mitad + búsqueda anclada al extremo
   derecho (fuera de flujo, para no descentrar el menú). */
.site-topbar__right {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

.site-topbar__right .site-topbar__actions {
	position: absolute;
	right: 0;
}

.site-topbar__brand {
	color: var( --brand-fg );
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}

/* Logo del topbar: forzado para que sea idéntico en TODO el sitio (lms.css
   pone `body.lp-archive-courses img{height:auto!important}` y desajustaba el
   logo en las páginas de cursos/contenidos). */
.site-topbar .site-topbar__logo {
	display: block;
	height: 44.4px !important;
	width: auto !important;
	max-width: none !important;
}

.site-topbar__brand:hover,
.site-topbar__brand:focus {
	color: var( --brand-accent );
}

.site-topbar__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
}

/* CTA: botón pill con acento del tema. Pegado al borde derecho por el grid.
   box-sizing: border-box para que en mobile, cuando está colapsado a
   max-height: 0, el padding NO se sume y deje un trozo negro abajo. */
.site-topbar__cta {
	display: inline-block;
	box-sizing: border-box;
	background: var( --brand-accent );
	color: var( --brand-fg );
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 8px 22px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.site-topbar__cta:hover,
.site-topbar__cta:focus {
	background: var( --brand-fg );
	color: var( --brand-bg );
}

.site-topbar__menu li {
	margin: 0;
	padding: 0;
	background: none;
}

.site-topbar__menu a {
	color: var( --brand-fg );
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.site-topbar__menu a:hover,
.site-topbar__menu a:focus,
.site-topbar__menu .current-menu-item > a,
.site-topbar__menu .current_page_item > a {
	color: var( --brand-accent );
}

/* --------------------------------------------------------------------------
   Botón hamburguesa: oculto en desktop, visible en mobile.
   El JS toggle-a aria-expanded y la clase .is-open en .site-topbar.
   -------------------------------------------------------------------------- */
.site-topbar__toggle {
	display: none;
	position: relative;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.site-topbar__toggle:focus-visible {
	outline: 2px solid #57ad68;
	outline-offset: 2px;
}

.site-topbar__toggle-bars,
.site-topbar__toggle-bars::before,
.site-topbar__toggle-bars::after {
	display: block;
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	background: #fff;
	transition: transform 0.2s ease, top 0.2s ease, background 0.2s ease;
}

.site-topbar__toggle-bars {
	top: 50%;
	transform: translate(-50%, -50%);
}

.site-topbar__toggle-bars::before,
.site-topbar__toggle-bars::after {
	content: "";
	transform: translateX(-50%);
}

.site-topbar__toggle-bars::before { top: -8px; }
.site-topbar__toggle-bars::after  { top:  8px; }

/* Estado abierto = X */
.site-topbar.is-open .site-topbar__toggle-bars {
	background: transparent;
}
.site-topbar.is-open .site-topbar__toggle-bars::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}
.site-topbar.is-open .site-topbar__toggle-bars::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile: nombre + hamburguesa en la fila superior; menú desplegable debajo
   y CTA al final del desplegable (después del último item).

   Reseteo del grid: en mobile usamos flex con wrap. La hamburguesa pasa a
   ocupar la posición derecha de la primera fila, y nav/cta se muestran como
   filas completas solo cuando .site-topbar.is-open.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.site-topbar__inner {
		display: flex;
		flex-wrap: wrap;
		grid-template-areas: none;
		grid-template-columns: none;
		padding: 8px 16px;
		gap: 0;
	}

	.site-topbar__brand,
	.site-topbar__toggle,
	.site-topbar__nav,
	.site-topbar__cta {
		justify-self: auto;
	}

	/* Desmonta el grupo derecho para poder ordenar sus hijos por separado:
	   la búsqueda va a la fila superior y el menú 2 al desplegable. */
	.site-topbar__right { display: contents; }

	/* Primera fila: logo a la izquierda, búsqueda empujada a la derecha y
	   hamburguesa al lado. Los dos menús quedan como filas full-width
	   (solo visibles al abrir). */
	.site-topbar__brand      { order: 1; }
	.site-topbar__actions    { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
	.site-topbar__toggle     { order: 3; display: block; margin-left: 12px; }
	.site-topbar__nav--left  { order: 4; }
	.site-topbar__nav--right { order: 5; }

	/* En escritorio la búsqueda va absoluta al extremo derecho; en móvil debe
	   volver al flujo normal (misma especificidad que la regla de escritorio,
	   pero dentro del media query => gana por orden de origen). */
	.site-topbar__right .site-topbar__actions {
		position: static;
		right: auto;
	}

	/* Solo el menú colapsa. El estado cerrado lo deja sin altura/padding
	   para que la banda negra termine pegada a la primera fila. */
	.site-topbar__nav {
		flex-basis: 100%;
		box-sizing: border-box;
		max-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
	}

	.site-topbar.is-open .site-topbar__nav {
		max-height: 100vh;
		opacity: 1;
		margin-top: 8px;
	}

	.site-topbar__menu {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.site-topbar__menu li {
		width: 100%;
		border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	}

	.site-topbar__menu a {
		display: block;
		padding: 14px 4px;
	}
}

/* Reserva SIEMPRE el hueco de la barra de scroll vertical, de modo que el
   ancho útil de la página sea idéntico en páginas cortas (sin scroll) y largas
   (con scroll). Sin esto, el header centrado (.site-topbar__inner) y el
   contenido se desplazan unos píxeles según la página tenga scroll o no. */
html {
	scrollbar-gutter: stable;
	overflow-y: scroll; /* fallback para navegadores sin scrollbar-gutter */
}

/* Reset mínimo del body para que la topbar quede pegada al borde superior. */
body { margin: 0; }

/* El marcado manual <b>/<strong> nunca altera el peso propio de un titular.
   Se aplica globalmente a h1–h6 para cubrir entradas, episodios, páginas,
   cursos, recursos y cualquier otro tipo de contenido del sitio. */
html body :is( h1, h2, h3, h4, h5, h6 ) :is( b, strong ) {
	font-weight: inherit !important;
}

/* box-sizing CONSISTENTE en el header. LearnPress aplica
   `*{box-sizing:border-box}` SOLO en sus páginas (archivo de cursos, curso…),
   con lo que el padding del header contaba distinto y el menú/CTA se
   descuadraban respecto a las páginas normales (home, etc.). Forzamos
   border-box en el header SIEMPRE para que sea idéntico en todas las páginas. */
.site-topbar,
.site-topbar *,
.site-topbar *::before,
.site-topbar *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Notas al pie ([mfn], en inc/footnotes.php). Número en superíndice que abre
   un tooltip con la referencia. Sin depender de ningún plugin.
   ========================================================================== */
sup.acfn {
	position: relative;
}

.acfn__ref {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0 1px;
	margin: 0 1px;
	font: inherit;
	font-weight: 700;
	color: var( --brand-accent, #57ad68 );
	line-height: 0;
}

.acfn__ref:hover,
.acfn__ref:focus-visible {
	text-decoration: underline;
}

.acfn__note {
	display: none;
	position: absolute;
	left: 0;
	top: 1.7em;
	z-index: 60;
	width: 300px;
	max-width: min( 80vw, 360px );
	background: #fff;
	color: #222;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.16 );
	padding: 10px 13px;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	vertical-align: baseline;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.acfn.is-open .acfn__note {
	display: block;
}

/* Bibliografía (lista de referencias [mfn], en inc/footnotes.php). Hereda la
   tipografía del contenido; numeración = superíndices del texto. */
.acfn-biblio {
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid #e2e2e2;
}

.acfn-biblio__title {
	font-size: 1.15em;
	margin: 0 0 14px;
}

.acfn-biblio__list {
	margin: 0;
	padding-left: 1.6em;
	font-size: 0.9em;
	line-height: 1.5;
}

.acfn-biblio__list li {
	margin: 0 0 10px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.acfn-biblio__list li::marker {
	color: var( --brand-accent, #57ad68 );
	font-weight: 700;
}

/* ==========================================================================
   Contenedor de contenido centrado — usado por page.php / single.
   max-width legible (~75 caracteres) y márgenes auto a los lados.
   ========================================================================== */
.page-wrap {
	max-width: 720px;
	margin: 48px auto;
	padding: 0 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.6;
	color: #1a1a1a;
}

.page-wrap .entry-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 32px;
	text-align: center;
}

.page-wrap .entry-content p,
.mpc-detail p {
	margin: 0 0 1.4em;
}

/* Resultados de búsqueda (search.php): MISMA estructura y medidas que
   /contenidos/ y /recursos/ (.pn-layout) y /podcast/. Rejilla de 3 columnas
   (raíl 220px | contenido 760px centrado | canalón), envoltorio 1440px con
   padding 34px 20px 40px. El título vive en el raíl izquierdo y los resultados
   en la columna central. Bajo 1279px se apila en bloque y ambos se centran a
   760px. search.php ya no envuelve el contenido en .page-wrap, así que el ancho
   de lectura estrecho (720px) no lo constriñe. */
.pn-search-layout {
	display: grid;
	grid-template-columns: minmax( 220px, 1fr ) minmax( 0, 760px ) minmax( 220px, 1fr );
	column-gap: 0;
	align-items: start;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 34px 20px 40px;
	box-sizing: border-box;
}
.pn-search-layout__rail {
	grid-column: 1;
	width: 220px;
	margin: 6px 0 0;
}
.pn-search-layout__rail .entry-header {
	margin: 0 0 22px;
}
.pn-search-layout__rail .entry-title {
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 8px;
	text-align: left;
}
.pn-search-layout__col {
	grid-column: 2;
	min-width: 0;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.6;
	color: #1a1a1a;
}
@media ( max-width: 600px ) {
	.page-wrap {
		margin: 32px auto;
		padding: 0 16px;
		font-size: 17px;
	}
	.page-wrap .entry-title {
		font-size: 28px;
		margin-bottom: 24px;
	}
}
@media ( max-width: 1279px ) {
	.pn-search-layout {
		display: block;
	}
	.pn-search-layout__rail,
	.pn-search-layout__col {
		width: 100%;
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.pn-search-layout__rail {
		margin-bottom: 20px;
	}
}
@media ( max-width: 560px ) {
	.pn-search-layout__rail .entry-title {
		font-size: 27px;
	}
}

/* Citas / quotes — mismo estilo que pau.ninja: marca de comillas decorativa
   arriba a la izquierda, texto serif en cursiva indentado y resplandor dorado. */
.page-wrap blockquote,
.entry-content blockquote,
.mpc-detail blockquote,
body.woocommerce .term-description blockquote,
.classpress-lms .course-summary blockquote {
	display: block;
	margin: 1em 40px 1em 7%;
	padding: 40px 10px 10px;
	min-height: 100px;
	border: 0;
	background: url( ../../uploads/2022/12/citas-1.png ) no-repeat 0 0;
	color: #263338;
}
.page-wrap blockquote p,
.entry-content blockquote p,
.mpc-detail blockquote p,
body.woocommerce .term-description blockquote p,
.classpress-lms .course-summary blockquote p {
	margin: 0 5% 30px 14%;
	font-size: 24px;
	line-height: 1.7em;
	font-weight: 400;
	font-style: italic;
	color: #263338;
	text-shadow: #fec52e 1px 0 8px;
}
.page-wrap blockquote p:last-child,
.entry-content blockquote p:last-child,
.mpc-detail blockquote p:last-child,
body.woocommerce .term-description blockquote p:last-child,
.classpress-lms .course-summary blockquote p:last-child {
	margin-bottom: 0;
}
@media (max-width: 600px) {
	.page-wrap blockquote p,
	.entry-content blockquote p,
	.mpc-detail blockquote p,
	body.woocommerce .term-description blockquote p,
	.classpress-lms .course-summary blockquote p {
		font-size: 20px;
	}
}

/* Listas de contenido — mismo estilo que pau.ninja: viñetas limpias con
   espacio generoso entre puntos. La tipografía se hereda del sitio local. */
.page-wrap .entry-content ul,
.mpc-detail ul,
.classpress-lms .course-summary .entry-content ul {
	list-style: disc;
	padding-left: 1.4em;
	margin: 0 0 1.5em;
}
.page-wrap .entry-content ol,
.mpc-detail ol,
.classpress-lms .course-summary .entry-content ol {
	list-style: decimal;
	padding-left: 1.5em;
	margin: 0 0 1.5em;
}
.page-wrap .entry-content li,
.mpc-detail li,
.classpress-lms .course-summary .entry-content li {
	margin: 0 0 0.8em;
	line-height: 1.6;
}
.page-wrap .entry-content li::marker,
.mpc-detail li::marker,
body.woocommerce .term-description li::marker,
.classpress-lms .course-summary .entry-content li::marker {
	color: var( --brand-accent, #57ad68 );
}

/* Spoiler / toggle plegable — clon del estilo de pau.ninja (su-spoiler):
   título clicable con icono +/-, resplandor dorado, y contenido que colapsa.
   La familia tipográfica se hereda del sitio local; no se importa ninguna. */
.pn-spoiler {
	margin-bottom: 1.5em;
}
.pn-spoiler-title {
	position: relative;
	cursor: pointer;
	min-height: 20px;
	line-height: 20px;
	padding: 7px 7px 7px 27px;
	font-weight: 700;
	font-size: 17px;
	color: #000;
	text-shadow: #ffd76d 2px 2px 3px;
}
.pn-spoiler-icon {
	position: absolute;
	left: 0;
	top: 7px;
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}
.pn-spoiler-icon::before {
	content: "\2212"; /* minus cuando está abierto */
}
.pn-spoiler.pn-spoiler-closed .pn-spoiler-icon::before {
	content: "+";
}
.pn-spoiler-content {
	padding: 1em 0 1em 27px;
	transition: padding-top 0.2s;
}
.pn-spoiler.pn-spoiler-closed .pn-spoiler-content {
	height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	border: none;
	opacity: 0;
	pointer-events: none;
}
.pn-spoiler-content > :last-child {
	margin-bottom: 0;
}

/* Imágenes del contenido (entradas, lecciones y cursos) centradas. */
.page-wrap .entry-content img,
.luzroja-contenido img,
.mpc-detail img,
body.woocommerce .term-description img,
.classpress-lms .course-summary .entry-content img,
.classpress-lms .course-summary .cp-tab img {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/* Incrustados del contenido (YouTube, Vimeo, mapas…) pegados con ancho fijo,
   p. ej. <iframe width="560" height="315">. Sin tope ensanchan la maqueta:
   en móvil aparece scroll horizontal y, además, iOS encoge la página entera
   (shrink-to-fit), con lo que el botón fijo del reproductor deja de caer en
   la esquina inferior derecha visible. Sólo se limita el ancho: no se toca
   la altura ni se impone una proporción, para no deformar mapas ni vídeos
   que no sean 16:9. El iframe oculto del reproductor de audio (.acyt__yt,
   1x1 fuera de pantalla) queda excluido a propósito. */
.page-wrap .entry-content iframe:not(.acyt__yt),
.page-wrap .entry-content embed,
.page-wrap .entry-content object,
.page-wrap .entry-content video,
.luzroja-contenido iframe:not(.acyt__yt),
.mpc-detail iframe:not(.acyt__yt),
body.woocommerce .term-description iframe:not(.acyt__yt),
.classpress-lms .course-summary .entry-content iframe:not(.acyt__yt),
.classpress-lms .course-summary .cp-tab iframe:not(.acyt__yt) {
	max-width: 100%;
}

/* Pies de foto (captions) al estilo pau.ninja: bloque centrado y el texto
   dentro de una caja oscura pegada bajo la imagen, exactamente del ancho de
   la imagen. Aplica en entradas, lecciones, cursos y notas de episodio
   (contenido importado). Usamos display:table para que el contenedor se
   ajuste a la imagen y anulamos el width inline de WP (imagen + 10px). */
.page-wrap .entry-content .wp-caption,
.luzroja-contenido .wp-caption,
.mpc-detail .wp-caption,
.classpress-lms .course-summary .entry-content .wp-caption,
.classpress-lms .course-summary .cp-tab .wp-caption,
.page-wrap .entry-content figure.wp-block-image:has(figcaption),
.luzroja-contenido figure.wp-block-image:has(figcaption),
.mpc-detail figure.wp-block-image:has(figcaption),
.classpress-lms .course-summary .entry-content figure.wp-block-image:has(figcaption),
.classpress-lms .course-summary .cp-tab figure.wp-block-image:has(figcaption) {
	display: table;
	width: auto !important;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.4em;
	float: none;
}
.page-wrap .entry-content .wp-caption img,
.luzroja-contenido .wp-caption img,
.mpc-detail .wp-caption img,
.classpress-lms .course-summary .entry-content .wp-caption img,
.classpress-lms .course-summary .cp-tab .wp-caption img,
.page-wrap .entry-content figure.wp-block-image:has(figcaption) img,
.luzroja-contenido figure.wp-block-image:has(figcaption) img,
.mpc-detail figure.wp-block-image:has(figcaption) img,
.classpress-lms .course-summary .entry-content figure.wp-block-image:has(figcaption) img,
.classpress-lms .course-summary .cp-tab figure.wp-block-image:has(figcaption) img {
	margin: 0;
	max-width: 100%;
	height: auto;
}
.page-wrap .entry-content .wp-caption-text,
.luzroja-contenido .wp-caption-text,
.mpc-detail .wp-caption-text,
.classpress-lms .course-summary .entry-content .wp-caption-text,
.classpress-lms .course-summary .cp-tab .wp-caption-text,
.page-wrap .entry-content figure.wp-block-image figcaption,
.luzroja-contenido figure.wp-block-image figcaption,
.mpc-detail figure.wp-block-image figcaption,
.classpress-lms .course-summary .entry-content figure.wp-block-image figcaption,
.classpress-lms .course-summary .cp-tab figure.wp-block-image figcaption {
	display: table-caption;
	caption-side: bottom;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	background: #1b1b1b;
	color: #f4f2ec;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.page-wrap .entry-content .wp-caption-text a,
.luzroja-contenido .wp-caption-text a,
.mpc-detail .wp-caption-text a,
.classpress-lms .course-summary .wp-caption-text a,
.page-wrap .entry-content figure.wp-block-image figcaption a,
.luzroja-contenido figure.wp-block-image figcaption a,
.mpc-detail figure.wp-block-image figcaption a,
.classpress-lms .course-summary figure.wp-block-image figcaption a {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   Hero de las entradas individuales (single.php) + topbar transparente.
   Imagen destacada a sangre, capa oscura, título blanco y 2 metadatos
   (autor + fecha). La topbar flota transparente encima y se vuelve sólida al
   hacer scroll (clase .is-solid puesta por js/topbar.js).
   ========================================================================== */

/* Topbar transparente sobre el hero; sólida tras hacer scroll. Fixed para que
   no reserve espacio en el flujo y el hero arranque pegado al borde superior. */
body.pn-has-hero .site-topbar {
	position: fixed;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, .45 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	transition: background 0.28s ease, transform 0.28s ease;
}
/* La topbar fija no debe quedar tapada por la barra de administración de WP. */
body.pn-has-hero.admin-bar .site-topbar { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.pn-has-hero.admin-bar .site-topbar { top: 46px; }
}
body.pn-has-hero .site-topbar.is-solid {
	background: var( --brand-bg );
}
body.page-template-page-portada .site-topbar:not(.is-solid):not(.is-open):not(.is-searching) {
	background: transparent;
}

.pn-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 78vh;
	background-color: #0c1a12;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.pn-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, .35 ) 0%, rgba( 0, 0, 0, .45 ) 45%, rgba( 0, 0, 0, .82 ) 100% );
}
.pn-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px 56px;
	color: #fff;
}
.pn-hero__title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: clamp( 2rem, 5vw, 3.4rem );
	line-height: 1.08;
	margin: 0 0 22px;
	color: #fff;
}
/* Subtítulo de la entrada dentro del <h1> del hero (equivale al plugin
   Secondary Title de pau.ninja: mismo tamaño/peso/separación). */
.pn-hero__title .subtitulo {
	font-size: 0.7em;
	font-weight: 500;
	margin-top: 0.3em;
	max-width: none;
}
/* Aspecto de "meta" de la etiqueta de categoría / tipo de las tarjetas. */
.pn-card-cat,
.pn-card-type {
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: .95rem;
	letter-spacing: .4px;
	text-transform: uppercase;
	font-weight: 700;
}
/* El meta del hero (autor + fecha) calca la tipografía de los enlaces del
   menú de la topbar: la topbar usa la fuente de titulares del personalizador
   (--pn-font-head, Montserrat), 14px, peso 600, 0.5px y mayúsculas.
   Si cambia el menú (.site-topbar__menu a), cambiar también aquí. */
.pn-hero__meta {
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}
.pn-hero__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pn-hero__avatar {
	border-radius: 50%;
	display: block;
}
.pn-hero__date { opacity: .92; }

/* El cuerpo del artículo arranca justo bajo el hero (sin el margin-top del
   .page-wrap genérico, que dejaría un hueco entre hero y texto). */
.pn-post .page-wrap { margin-top: 40px; }

@media ( max-width: 860px ) {
	.pn-hero { min-height: 62vh; }
	.pn-hero__inner { padding: 0 22px 40px; }
}

/* ==========================================================================
   Producto WooCommerce — precio del single
   El precio debe verse como el título del producto (.pn-product__title, que
   hereda la tipografía de cabecera Montserrat 700) pero más pequeño, y la
   coletilla «Impuestos incluidos» va debajo, en gris y negrita, igual que en
   pau.ninja. Solo afecta al precio del resumen del producto y al de la
   variación seleccionada; los productos relacionados quedan intactos.
   ========================================================================== */
.pn-product .summary.entry-summary > p.price,
.pn-product .woocommerce-variation-price .price {
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
	/* Mismo cuerpo que el precio de pau.ninja (37,33 px). */
	font-size: 2.33rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1a1a1a;
	margin: 0 0 22px;
}
.pn-product .summary.entry-summary > p.price .woocommerce-price-suffix,
.pn-product .woocommerce-variation-price .price .woocommerce-price-suffix {
	display: block;
	margin-top: 4px;
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	color: #8a8a8a;
}

@media ( max-width: 600px ) {
	.pn-product .summary.entry-summary > p.price,
	.pn-product .woocommerce-variation-price .price {
		font-size: 1.9rem;
	}
	.pn-product .summary.entry-summary > p.price .woocommerce-price-suffix,
	.pn-product .woocommerce-variation-price .price .woocommerce-price-suffix {
		font-size: 0.82rem;
	}
}

/* ==========================================================================
   Producto WooCommerce — tipografía de titular en la interfaz del single.
   Igual que la coletilla «Impuestos incluidos» del precio, las pestañas
   (Descripción / Información adicional), la categoría del producto, el estado
   de stock y el botón de compra usan la fuente de titulares (--pn-font-head,
   Montserrat) para dar coherencia a toda la ficha.
   ========================================================================== */
.pn-product .woocommerce-tabs .tabs li a,
.pn-product .woocommerce-tabs .panel h2,
.pn-product .product_meta,
.pn-product .product_meta a,
.pn-product .stock,
.pn-product form.cart .single_add_to_cart_button {
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
}

/* El estado de stock se muestra como la píldora verde de pau.ninja: fondo
   #c3eab2 ajustado al texto y tinta oscura, conservando la fuente de la ficha. */
.pn-product .woocommerce div.product p.stock.in-stock {
	display: block;
	width: max-content;
	max-width: 100%;
	padding: 0 10px;
	background-color: #c3eab2;
	color: #222;
	font-size: 0.92em;
}

/* ==========================================================================
   Footer global — réplica autocontenida del pie de pau.ninja.
   Markup en footer.php; fondo y avatar originales en assets/img/.
   ========================================================================== */
.pn-footer,
.pn-footer *,
.pn-footer *::before,
.pn-footer *::after {
	box-sizing: border-box;
}

.pn-footer {
	--pn-footer-gold: #fec52e;
	--pn-footer-ink: var( --brand-fg, #fff );
	--pn-footer-dark: var( --brand-bg, #000 );
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var( --pn-footer-dark );
	color: var( --pn-footer-ink );
	font-family: var( --pn-font-head, "Montserrat", Helvetica, Arial, sans-serif );
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	overflow: hidden;
}

.pn-footer :is( ul, ol ) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pn-footer :is( h2, p ) {
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

.pn-footer img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.pn-footer svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pn-footer a {
	color: inherit;
	text-decoration: none;
}

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

.pn-footer a:focus-visible {
	outline: 2px solid var( --pn-footer-gold );
	outline-offset: 4px;
	border-radius: 3px;
}

.pn-footer__topics {
	position: relative;
	z-index: 2;
	background: var( --pn-footer-dark );
}

.pn-footer__topics-inner {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 18px 28px;
}

.pn-footer__topic-list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) 100px minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: center;
	column-gap: 34px;
}

.pn-footer__topic {
	min-width: 0;
}

.pn-footer__topic > :is( a, span ) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 48px;
	color: var( --pn-footer-ink );
	font-size: 20px;
	line-height: 1.2;
	white-space: nowrap;
	transition: color .18s ease;
}

.pn-footer__topic-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	color: var( --pn-footer-gold );
	font-size: 27px;
}

.pn-footer__avatar-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pn-footer__avatar-item img {
	width: 77px;
	height: 77px;
	object-fit: contain;
}

.pn-footer__main {
	position: relative;
	isolation: isolate;
	background: var( --pn-footer-dark );
}

.pn-footer__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
}

.pn-footer__inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px 38px;
}

.pn-footer__columns {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	align-items: start;
	gap: 72px;
	padding: 0 20px 58px;
	border-bottom: 1px solid #8a8a8a;
}

.pn-footer__brand {
	min-width: 0;
	text-align: center;
}

.pn-footer__quote {
	max-width: 360px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.55;
	text-wrap: balance;
}

.pn-footer__logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	margin-top: 64px;
}

.pn-footer__logo {
	width: 240px;
	height: 64px;
	object-fit: contain;
}

.pn-footer__links,
.pn-footer__contact {
	min-width: 0;
}

.pn-footer__links h2,
.pn-footer__contact h2 {
	font-family: inherit;
	font-weight: 700;
}

.pn-footer__links h2 {
	margin-bottom: 15px;
	font-size: 15px;
}

.pn-footer__links h2:not( :first-child ) {
	margin-top: 30px;
}

.pn-footer__links ul,
.pn-footer__contact-list {
	display: grid;
	gap: 6px;
}

.pn-footer__links li,
.pn-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	min-width: 0;
}

.pn-footer__links li {
	gap: 9px;
}

.pn-footer__links li > :is( a, span ):last-child,
.pn-footer__contact-list li > :is( a, span ):last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.pn-footer__links a,
.pn-footer__contact-list a {
	transition: color .18s ease;
}

.pn-footer__list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 22px;
	color: var( --pn-footer-gold );
	font-size: 16px;
}

.pn-footer__contact h2 {
	margin-bottom: 20px;
	color: var( --pn-footer-gold );
	font-size: 20px;
	line-height: 1.2;
}

.pn-footer__contact-list {
	gap: 9px;
}

.pn-footer__contact-list li {
	gap: 14px;
	min-height: 23px;
}

.pn-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 23px;
	color: var( --pn-footer-ink );
	font-size: 17px;
}

.pn-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 24px;
}

.pn-footer .pn-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 5px;
	color: #fff;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pn-footer .pn-footer__social svg {
	width: 25px;
	height: 25px;
}

.pn-footer .pn-footer__social:hover {
	color: #fff;
	filter: brightness( 1.08 );
	transform: translateY( -2px );
	box-shadow: 0 8px 18px rgba( 0, 0, 0, .28 );
}

.pn-footer__social--youtube { background: #cd201f; }
.pn-footer__social--twitter { background: #1da1f2; }
.pn-footer__social--instagram { background: #e3267d; }
.pn-footer .pn-footer__social--tiktok { background: #fff; color: #000; }
.pn-footer .pn-footer__social--tiktok:hover { color: #000; }

.pn-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 34px;
	padding: 34px 16px 0;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.pn-footer__bottom > :is( a, span ) {
	overflow-wrap: anywhere;
}

@media ( max-width: 960px ) {
	.pn-footer__topic-list {
		column-gap: 16px;
	}

	.pn-footer__topic > :is( a, span ) {
		font-size: 17px;
	}

	.pn-footer__columns {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 52px 44px;
	}

	.pn-footer__contact {
		grid-column: 1 / -1;
		width: min( 100%, 420px );
		margin: 0 auto;
	}

	.pn-footer__contact h2,
	.pn-footer__socials {
		justify-content: center;
		text-align: center;
	}
}

@media ( max-width: 640px ) {
	.pn-footer__topics-inner {
		padding: 22px 20px;
	}

	.pn-footer__topic-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 8px 12px;
	}

	.pn-footer__avatar-item {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 4px 0;
	}

	.pn-footer__topic > :is( a, span ) {
		min-height: 44px;
		font-size: 16px;
		white-space: normal;
		text-align: center;
	}

	.pn-footer__inner {
		padding: 50px 20px 32px;
	}

	.pn-footer__columns {
		grid-template-columns: minmax( 0, 1fr );
		gap: 46px;
		padding: 0 0 46px;
	}

	.pn-footer__brand,
	.pn-footer__links,
	.pn-footer__contact {
		width: min( 100%, 420px );
		margin: 0 auto;
	}

	.pn-footer__logo-link {
		margin-top: 34px;
	}

	.pn-footer__contact {
		grid-column: auto;
	}

	.pn-footer__bottom {
		flex-direction: column;
		gap: 12px;
		padding-top: 28px;
	}
}

@media ( max-width: 360px ) {
	.pn-footer__topic > :is( a, span ) {
		gap: 7px;
		font-size: 15px;
	}

	.pn-footer__topic-icon {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
		font-size: 23px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pn-footer *,
	.pn-footer *::before,
	.pn-footer *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}