/* =========================================================
 * base.css — Tema JP 2026
 * Reset suave + reglas tipográficas globales.
 * Mobile-first. Sin reset agresivo: no rompemos plugins.
 * ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--pm-surface);
	color: var(--pm-ink);
	font-family: var(--pm-font-sans);
	font-size: var(--pm-fs-body-md);
	line-height: var(--pm-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
	text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

a {
	color: var(--pm-primary);
	text-decoration: none;
	transition: color var(--pm-dur-fast) var(--pm-ease);
}
a:hover { color: var(--pm-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--pm-shadow-focus); border-radius: var(--pm-radius-sm); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pm-space-3) 0;
	color: var(--pm-ink);
	font-weight: var(--pm-weight-bold);
	line-height: var(--pm-lh-headline);
	text-wrap: balance;
}
h1 { font-size: var(--pm-fs-display-lg-mobile); letter-spacing: var(--pm-tracking-display); line-height: var(--pm-lh-display); }
h2 { font-size: var(--pm-fs-headline-md); }
h3 { font-size: var(--pm-fs-body-lg); }
h4 { font-size: var(--pm-fs-body-md); }

p { margin: 0 0 var(--pm-space-4) 0; }
small { font-size: var(--pm-fs-body-sm); color: var(--pm-ink-2); }

ul, ol { margin: 0 0 var(--pm-space-4) var(--pm-space-6); padding: 0; }
li { margin: 0 0 var(--pm-space-2) 0; }

strong, b { font-weight: var(--pm-weight-semibold); }

/* Selección con marca personal */
::selection { background: var(--pm-tech-accent); color: var(--pm-on-primary); }

/* Foco accesible global */
:focus-visible {
	outline: none;
	box-shadow: var(--pm-shadow-focus);
	border-radius: var(--pm-radius-sm);
}

/* Layout helpers */
.jp-container {
	width: 100%;
	max-width: var(--pm-container);
	margin-inline: auto;
	padding-inline: var(--pm-gutter-mobile);
}
@media (min-width: 768px) {
	.jp-container { padding-inline: var(--pm-gutter); }
}

/* Compensación para el header sticky al hacer anchor jumps */
[id] { scroll-margin-top: calc(var(--pm-header-h) + 12px); }

/* "skip to content" para teclado */
.jp-skip {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.jp-skip:focus {
	position: fixed; left: var(--pm-space-4); top: var(--pm-space-4);
	width: auto; height: auto; padding: var(--pm-space-3) var(--pm-space-4);
	background: var(--pm-primary); color: var(--pm-on-primary);
	border-radius: var(--pm-radius-sm); z-index: 9999;
}

/* Tipo escala desktop */
@media (min-width: 768px) {
	h1 { font-size: var(--pm-fs-display-lg); }
}

/* sr-only para accesibilidad */
.sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}

/* Material Symbols (sólo asegura el render correcto) */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
}