/**
 * 01-base.css — Reset moderno + tipografía.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pjv-header-h) + var(--pjv-s5));
	/* Nada de destello de color por defecto al tocar en móvil (el "fucsia"). */
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--pjv-bg);
	color: var(--pjv-fg);
	font-family: var(--pjv-font-text);
	font-size: var(--pjv-fs-base);
	line-height: var(--pjv-lh-base);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Regla de seguridad global: ningún SVG puede desbordar su contenedor.
   Es la segunda barrera contra el icono gigante del menú. */
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--pjv-font-display);
	font-weight: 700;
	line-height: var(--pjv-lh-snug);
	letter-spacing: var(--pjv-track-tight);
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

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

button {
	-webkit-tap-highlight-color: transparent;
}

/* Foco visible y consistente en todo el sitio. */
:focus-visible {
	outline: 3px solid var(--pjv-gold-500);
	outline-offset: 3px;
	border-radius: var(--pjv-r-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--pjv-gold-200);
	color: var(--pjv-blue-900);
}

/* --- Utilidades --------------------------------------------------------- */

.pjv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pjv-skip {
	position: fixed;
	top: var(--pjv-s3);
	left: var(--pjv-s3);
	z-index: var(--pjv-z-skip);
	padding: var(--pjv-s3) var(--pjv-s5);
	background: var(--pjv-blue-800);
	color: var(--pjv-white);
	border-radius: var(--pjv-r-pill);
	transform: translateY(-200%);
	transition: transform var(--pjv-t-fast) var(--pjv-ease);
}

.pjv-skip:focus {
	transform: translateY(0);
}

.pjv-eyebrow {
	font-family: var(--pjv-font-text);
	font-size: var(--pjv-fs-xs);
	font-weight: 600;
	letter-spacing: var(--pjv-track-wide);
	text-transform: uppercase;
	color: var(--pjv-gold-600);
}

.pjv-eyebrow--light {
	color: var(--pjv-gold-500);
}

/* ------------------------------------------------------------------------ *
 * Animación de entrada
 * ------------------------------------------------------------------------ *
 * Sin JS, `data-reveal` no existe y todo se ve (opacidad 1). El JS marca el
 * estado "out" al arrancar y lo pasa a "in" cuando el elemento entra en
 * pantalla. Ahora con más volumen (desplazamiento + escala + desenfoque
 * suave) para que la entrada no sea plana.
 * ------------------------------------------------------------------------ */

[data-reveal='out'] {
	opacity: 0;
	transform: translateY(26px) scale(0.985);
	filter: blur(3px);
}

[data-reveal='in'] {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity var(--pjv-t-slow) var(--pjv-ease) var(--pjv-delay),
		transform var(--pjv-t-slow) var(--pjv-ease) var(--pjv-delay),
		filter var(--pjv-t-slow) var(--pjv-ease) var(--pjv-delay);
}

/*
 * Entrada escalonada de los hijos (tarjetas, campos del formulario, ítems).
 * El retardo por hijo lo pone reveal.js con la variable --pjv-i.
 */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(20px) scale(0.99);
}

[data-reveal-stagger][data-reveal='in'] > * {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--pjv-t-base) var(--pjv-ease) calc(var(--pjv-i, 0) * 70ms),
		transform var(--pjv-t-base) var(--pjv-ease) calc(var(--pjv-i, 0) * 70ms);
}

/* Movimiento reducido: nada de transiciones ni de estados ocultos. */
@media (prefers-reduced-motion: reduce) {
	[data-reveal='out'],
	[data-reveal-stagger] > * {
		opacity: 1;
		transform: none;
		filter: none;
	}
}