/**
 * Tokens de diseño — Dr. Paul Terán
 *
 * Único lugar donde se definen colores, degradados, radios, sombras y
 * tipografía. Cambiar un valor aquí lo actualiza en todo el sitio.
 *
 * Paleta tomada de la referencia visual aprobada por el cliente:
 * https://dralexandersoto.com/
 */

:root {
	/*
	 * Declara el sitio como oscuro. El navegador dibuja entonces en oscuro
	 * todo lo que pinta él: barras de desplazamiento, controles de formulario
	 * y el reproductor de audio del podcast.
	 */
	color-scheme: dark;

	/* ------------------------------------------------------------------
	   Fondos
	   Tres niveles de profundidad, del más hundido al más elevado.
	   ------------------------------------------------------------------ */
	--pt-bg-0: #03080f; /* fondo base, el más oscuro */
	--pt-bg-1: #061120; /* bandas y secciones alternas */
	--pt-bg-2: #0a1a30; /* tarjetas y superficies elevadas */
	--pt-bg-3: #0e2342; /* superficie destacada o estado activo */

	/* --- Texto --- */
	--pt-text: rgba(255, 255, 255, 0.94);
	--pt-muted: rgba(214, 232, 255, 0.68);
	--pt-faint: rgba(214, 232, 255, 0.44);

	/* --- Acentos de marca --- */
	--pt-cyan: #77ecff;
	--pt-cyan-soft: #a6f3ff;
	--pt-blue: #58a6ff;
	--pt-brand: #005ce2;
	--pt-violet: #7b8cff; /* tercer tono, sólo para degradados y luces */

	/* ------------------------------------------------------------------
	   Degradados
	   Reunidos aquí para que botones, textos y bordes compartan la misma
	   transición de color.
	   ------------------------------------------------------------------ */
	--pt-grad-brand: linear-gradient(135deg, var(--pt-cyan) 0%, var(--pt-blue) 55%, var(--pt-violet) 100%);
	--pt-grad-text: linear-gradient(120deg, #ffffff 0%, #d7f4ff 38%, var(--pt-cyan) 70%, var(--pt-blue) 100%);
	--pt-grad-line: linear-gradient(90deg, transparent, var(--pt-line-strong) 22%, var(--pt-cyan) 50%, var(--pt-line-strong) 78%, transparent);

	/* --- Líneas y bordes --- */
	--pt-line: rgba(130, 220, 255, 0.13);
	--pt-line-strong: rgba(130, 220, 255, 0.3);

	/* ------------------------------------------------------------------
	   Superficies "glass"
	   El borde superior claro imita una luz cenital y da volumen a la
	   tarjeta sin recurrir a sombras pesadas.
	   ------------------------------------------------------------------ */
	--pt-glass-bg: linear-gradient(158deg, rgba(32, 58, 98, 0.66) 0%, rgba(14, 30, 54, 0.86) 56%, rgba(9, 20, 38, 0.94) 100%);
	--pt-glass-border: 1px solid rgba(160, 215, 255, 0.16);
	--pt-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.34);

	/* --- Elevación --- */
	--pt-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.3);
	--pt-shadow-2: 0 22px 60px rgba(0, 0, 0, 0.42);
	--pt-shadow-3: 0 40px 100px rgba(0, 0, 0, 0.55);
	--pt-glass-shadow: var(--pt-shadow-2), var(--pt-glass-highlight);

	/* --- Resplandores --- */
	--pt-glow: 0 0 34px rgba(79, 210, 255, 0.22);
	--pt-glow-strong: 0 0 60px rgba(79, 210, 255, 0.38);

	/* --- Radios --- */
	--pt-radius-sm: 16px;
	--pt-radius-md: 22px;
	--pt-radius-lg: 26px;
	--pt-radius-xl: 34px;
	--pt-radius-pill: 999px;

	/* ------------------------------------------------------------------
	   Transiciones
	   ------------------------------------------------------------------ */
	--pt-transition-base: 0.25s ease;
	--pt-transition-smooth: 0.45s cubic-bezier(0.22, 0.8, 0.24, 1);
	--pt-ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
	--pt-ease-spring: cubic-bezier(0.16, 1.05, 0.3, 1);

	/* --- Tipografía --- */
	--pt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pt-font-heading: var(--pt-font-sans);

	/* ------------------------------------------------------------------
	   Escala de espaciado
	   Un solo conjunto de pasos para todo el sitio. Los huecos, los
	   rellenos y el ritmo entre secciones salen de aquí, para que dos
	   bloques distintos nunca respiren de forma distinta.
	   ------------------------------------------------------------------ */
	--pt-space-1: 4px;
	--pt-space-2: 8px;
	--pt-space-3: 12px;
	--pt-space-4: 16px;
	--pt-space-5: 24px;
	--pt-space-6: 32px;
	--pt-space-7: 40px;
	--pt-space-8: 56px;
	--pt-space-9: 72px;
	--pt-space-10: 96px;

	/* Ritmo vertical entre secciones. */
	--pt-rhythm: clamp(64px, 6.4vw, 96px);
	--pt-rhythm-lg: clamp(84px, 8.4vw, 124px);
	--pt-rhythm-sm: clamp(40px, 4.4vw, 60px);

	/* Hueco entre las piezas de una rejilla o de una pila. */
	--pt-gap: clamp(18px, 1.7vw, 24px);
	--pt-gap-lg: clamp(28px, 3.4vw, 48px);

	/* ------------------------------------------------------------------
	   Relleno de las superficies
	   Un único relleno para todas las tarjetas: así un episodio del
	   podcast, una tarjeta de servicio y el formulario respiran igual.
	   ------------------------------------------------------------------ */
	--pt-pad-card: clamp(24px, 2.2vw, 32px);
	--pt-pad-panel: clamp(28px, 2.8vw, 40px);
	--pt-pad-hero-panel: clamp(30px, 3vw, 42px);

	/* --- Medidas --- */
	--pt-container: 1400px; /* 1352 px de contenido + 24 px de margen a cada lado; igual que el ancho de Elementor */
	--pt-container-wide: 1440px;
	--pt-gutter: 24px;
	--pt-header-height: 128px; /* logotipo de 100 px + 14 px arriba y abajo */
}