/**
 * Tema base — Dr. Paul Terán
 *
 * Cabecera, pie, tipografía base, botones y utilidades.
 * No contiene contenido de páginas: eso se edita en Elementor.
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
	background-color: var(--pt-bg-0);
	/*
	 * La luz del sitio se pinta aquí, en el flujo de la página, no en una
	 * capa fija por detrás. Ver la nota «Telón de fondo» más abajo.
	 */
	background-image:
		radial-gradient(120% 62% at 50% 0%, rgba(0, 92, 226, 0.24), transparent 62%),
		radial-gradient(86% 38% at 8% 62%, rgba(119, 236, 255, 0.09), transparent 70%),
		radial-gradient(90% 40% at 96% 100%, rgba(123, 140, 255, 0.1), transparent 70%);
	background-repeat: no-repeat;
	color: var(--pt-text);
	font-family: var(--pt-font-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pt-font-heading);
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 600;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

p { margin: 0 0 1.15em; color: var(--pt-muted); }

a {
	color: var(--pt-cyan);
	text-decoration: none;
	transition: color var(--pt-transition-base);
}

a:hover,
a:focus-visible { color: #fff; }

:focus-visible {
	outline: 2px solid var(--pt-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

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

/* ==========================================================================
   1b. Telón de fondo del sitio

   Antes había aquí una capa «position: fixed» a pantalla completa —esferas de
   luz en movimiento, retícula, grano y viñeta— por detrás de todo el
   contenido. En Chrome salía casi gratis; en Firefox no.

   Firefox no puede desplazar contenido semitransparente por encima de una
   capa fija sin volver a componer la ventana entera en cada fotograma.
   Medido con el mismo recorrido de scroll en la página del podcast:

       Firefox, con el telón fijo ....... 25,8 s
       Firefox, sin él .................. 6,9 s
       Chrome, con el telón fijo ........  4,2 s

   Promocionar la capa («will-change», «translateZ») no cambió nada, y
   pasarla a «absolute» sólo la dejaba en 10,7 s.

   Así que la luz del sitio se pinta ahora donde no estorba:

     - el degradado general, en el fondo del «body» (arriba en este archivo);
     - la luz de cada sección, en su propio fondo («blocks.css», sección 1);
     - el movimiento, en la portada, con «pt-aurora», que es local a la
       sección y desaparece al pasar de largo.

   Si alguna vez se quiere recuperar el movimiento en toda la página, hay que
   contar con ese coste en Firefox.
   ========================================================================== */

/* ==========================================================================
   2. Contenedor
   ========================================================================== */

.pt-container {
	width: 100%;
	max-width: var(--pt-container);
	margin-inline: auto;
	padding-inline: var(--pt-gutter);
}

/* ==========================================================================
   3. Cabecera
   ========================================================================== */

.pt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/*
	 * Sin «backdrop-filter». Es una franja pequeña, pero va pegada arriba y
	 * en Firefox obliga a rehacer lo que tiene debajo en cada fotograma del
	 * scroll: ella sola pasaba el recorrido de 25,8 s a 11,3 s al quitarla.
	 * El fondo sube de opacidad para que el titular y las tarjetas flotantes
	 * no se transparenten a través de la cabecera, que era lo único que el
	 * desenfoque aportaba.
	 */
	background: rgba(4, 11, 22, 0.94);
	border-bottom: 1px solid var(--pt-line);
	transition: background var(--pt-transition-base), border-color var(--pt-transition-base);
}

.pt-header.is-scrolled {
	background: rgba(3, 8, 15, 0.95);
	border-bottom-color: var(--pt-line-strong);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/*
 * Barra de progreso de lectura. La crea assets/js/site.js y avanza con el
 * scroll mediante la variable --pt-progress.
 */
.pt-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	transform: scaleX(var(--pt-progress, 0));
	transform-origin: left;
	background: var(--pt-grad-brand);
	box-shadow: 0 0 12px rgba(119, 236, 255, 0.6);
	pointer-events: none;
}

.pt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--pt-header-height);
	padding-block: 14px;
}

.pt-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Logotipo a 100 px de alto en todos los anchos, con 14 px de aire arriba y
   abajo (--pt-header-height: 128 px). Es el SVG del cliente, así que se ve
   nítido a cualquier tamaño. */
.pt-header__brand { flex-shrink: 0; line-height: 0; }

.pt-logo {
	display: block;
	width: auto;
	max-width: none;
	overflow: visible;
}

.pt-logo--cabecera { height: 100px; }

/*
 * Colores del logotipo sobre fondo oscuro.
 *
 * El SVG entregado está pensado para fondo blanco: el texto «Terán», la
 * leyenda y parte del corredor van en azul casi negro y en este fondo no se
 * ven. Aquí se cambian sólo esos tonos oscuros a blanco y azul claro; los
 * azules de marca no se tocan y el archivo sigue siendo el original.
 *
 * Las clases (.st0, .st3…) son las que exportó Illustrator en
 * logo-horizontal-pt.svg / logo-vertical-pt.svg. Si se sube otro logotipo
 * con otras clases, estas reglas dejan de aplicarse y se ve con sus colores
 * propios.
 */
.pt-logo .st0  { fill: #ffffff; } /* #1A2337 → texto «Terán» y leyenda */
.pt-logo .st3,
.pt-logo .st9,
.pt-logo .st10 { fill: #e8f3fb; } /* #08192F, #051223, #081629 */
.pt-logo .st7  { fill: #cde6f7; } /* #041C35 */
.pt-logo .st6  { fill: #3b8fd6; } /* #044680 */
.pt-logo .st8  { fill: #2f7dc0; } /* #093B69 */

.pt-header__actions { display: flex; align-items: center; gap: 12px; }

/* --- Navegación --- */

.pt-nav ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-nav a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--pt-radius-pill);
	color: var(--pt-muted);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-nav a:hover,
.pt-nav a:focus-visible { color: #fff; background: rgba(130, 220, 255, 0.1); }

.pt-nav .current-menu-item > a,
.pt-nav .current_page_item > a {
	color: #fff;
	background: rgba(130, 220, 255, 0.14);
}

/* --- Botón hamburguesa --- */

.pt-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--pt-glass-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: background var(--pt-transition-base);
}

.pt-nav-toggle:hover { background: rgba(130, 220, 255, 0.14); }

.pt-nav-toggle span {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--pt-transition-smooth), background var(--pt-transition-base);
}

.pt-nav-toggle span::before,
.pt-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--pt-transition-smooth);
}

.pt-nav-toggle span::before { top: -6px; }
.pt-nav-toggle span::after  { top: 6px; }

.pt-nav-toggle[aria-expanded="true"] span { background: transparent; }
.pt-nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.pt-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   4. Botones
   ========================================================================== */

.pt-btn {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--pt-radius-pill);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--pt-transition-smooth), box-shadow var(--pt-transition-smooth),
		background var(--pt-transition-base), color var(--pt-transition-base);
}

.pt-btn:hover,
.pt-btn:focus-visible { transform: translateY(-2px); }

.pt-btn--primary {
	background: linear-gradient(135deg, var(--pt-cyan), var(--pt-blue));
	color: #04121f;
	box-shadow: var(--pt-glow);
}

.pt-btn--primary:hover,
.pt-btn--primary:focus-visible {
	color: #04121f;
	box-shadow: 0 0 42px rgba(79, 210, 255, 0.34);
}

.pt-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	border: var(--pt-glass-border);
	color: #fff;
}

.pt-btn--ghost:hover,
.pt-btn--ghost:focus-visible { background: rgba(130, 220, 255, 0.14); color: #fff; }

/* ==========================================================================
   5. Pie
   ========================================================================== */

.pt-footer {
	position: relative;
	margin-top: 0;
	padding: 72px 0 32px;
	background: linear-gradient(180deg, rgba(6, 17, 32, 0.4) 0%, rgba(3, 8, 15, 0.85) 100%);
	border-top: 1px solid var(--pt-line);
}

.pt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.pt-footer__title {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pt-cyan);
	margin-bottom: 18px;
}

.pt-footer__logo {
	display: block;
	width: auto;
	height: 100px;
	max-width: 100%;
	margin-bottom: 18px;
}

.pt-footer ul { list-style: none; margin: 0; padding: 0; }
.pt-footer li { margin-bottom: 10px; }
.pt-footer li a, .pt-footer address { color: var(--pt-muted); font-style: normal; }
.pt-footer li a:hover { color: #fff; }

.pt-footer__socials { display: flex; gap: 10px; margin-top: 18px; }

.pt-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: var(--pt-glass-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	transition: background var(--pt-transition-base), transform var(--pt-transition-smooth);
}

.pt-footer__socials a:hover { background: rgba(130, 220, 255, 0.16); transform: translateY(-2px); }
.pt-footer__socials svg { width: 18px; height: 18px; fill: currentColor; }

.pt-footer__bottom {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--pt-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: 0.86rem;
	color: var(--pt-faint);
}

/* ==========================================================================
   6. Utilidades de superficie (usables desde Elementor > Avanzado > Clases CSS)
   ========================================================================== */

.pt-glass {
	background: var(--pt-glass-bg);
	border: var(--pt-glass-border);
	border-radius: var(--pt-radius-lg);
	box-shadow: var(--pt-glass-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pt-hairline { border: 1px solid var(--pt-line); border-radius: var(--pt-radius-md); }

.pt-accent { color: var(--pt-cyan); }

/*
 * Antetítulo: pastilla con un punto luminoso. Da un punto de anclaje visual
 * antes del titular y separa la sección de la anterior.
 */
.pt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Los hijos de un contenedor Elementor se estiran; esto lo evita. */
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding: 7px 16px 7px 12px;
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius-pill);
	background: rgba(119, 236, 255, 0.07);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-eyebrow p { margin: 0; }

.pt-eyebrow::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pt-cyan);
	box-shadow: 0 0 10px var(--pt-cyan);
	animation: pt-eyebrow-pulse 2.6s ease-in-out infinite;
}

@keyframes pt-eyebrow-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
	.pt-eyebrow::before { animation: none; }
}

/* Sólo para lectores de pantalla */
.pt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   8. Páginas sin Elementor: 404 y resultados de búsqueda
   Usan las plantillas del tema padre (la 404, sustituida en
   template-parts/404.php). Sin esto el titular quedaba pegado a la cabecera
   y, con tan poco contenido, el pie no llegaba al final de la ventana.
   ========================================================================== */

.error404 .site-main,
.search .site-main {
	min-height: calc(100vh - var(--pt-header-height));
	min-height: calc(100dvh - var(--pt-header-height));
	padding-block: var(--pt-rhythm);
}

.search .site-main .page-header,
.search .site-main .page-content {
	max-width: var(--pt-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.pt-aviso {
	display: flex;
	align-items: center;
}

.pt-aviso__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pt-space-5);
}

.pt-aviso__titulo { margin: 0; max-width: 18ch; }

.pt-aviso__texto { margin: 0; max-width: 56ch; color: var(--pt-muted); font-size: 1.08rem; }

.pt-aviso__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--pt-space-2); }

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.pt-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/*
 * El menú pasa a desplegable por debajo de 1290 px: logotipo (275 px), los
 * siete enlaces y el botón suman 1.236 px, más 24 px de margen a cada lado.
 */
@media (max-width: 1290px) {
	.pt-nav-toggle { display: inline-flex; }

	.pt-nav {
		position: fixed;
		inset: var(--pt-header-height) 0 auto 0;
		max-height: calc(100dvh - var(--pt-header-height));
		overflow-y: auto;
		padding: 18px var(--pt-gutter) 28px;
		background: var(--pt-bg-0);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
		border-bottom: 1px solid var(--pt-line-strong);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity var(--pt-transition-base), transform var(--pt-transition-smooth), visibility var(--pt-transition-base);
	}

	.pt-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

	.pt-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.pt-nav a { padding: 13px 14px; font-size: 1.02rem; border-radius: 12px; }

	.pt-header__actions .pt-btn--ghost { display: none; }
}

@media (max-width: 720px) {
	/* El botón de la cabecera se compacta para que quepa en una línea. */
	.pt-header__actions .pt-btn--primary {
		padding: 10px 15px;
		font-size: 0.83rem;
		white-space: nowrap;
	}

	.pt-header__brand { font-size: 0.95rem; }
}

@media (max-width: 580px) {
	/* Por debajo de 580 px el botón no cabe junto al logotipo de 100 px: se
	   recoge y la cita queda en el menú y en cada página. */
	.pt-header__actions .pt-btn--primary { display: none; }
}

@media (max-width: 366px) {
	/* En los teléfonos más estrechos el logotipo cede lo justo para que el
	   botón del menú quepa a su lado (360 px de ancho: 91 px de alto). */
	.pt-logo--cabecera { height: auto; width: calc(100vw - 110px); }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.pt-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.pt-footer { padding-top: 56px; }
}