/* ****************************************************************
 * PIXEL CAFE PERU -- reset.css
 * Reset base + tokens de marca + tipografia + utilidades de accesibilidad.
 * Persona de codigo: p06-vintage-html (tab indent, hex en mayusculas,
 * desktop-first con max-width, unidades px como base).
 * NO USAR !important en ninguna parte de este archivo.
 * **************************************************************** */

/* ---- 1. Fuentes self-hosted (Unbounded display + Manrope texto) ---- */
/* Unbounded: variable font servida por Google como un unico archivo
   para los pesos 600/700/800, por eso declaramos rango de peso. */
@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/unbounded-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
}

/* ---- 2. Custom properties -- paleta y escala de marca ---- */
:root {
	--papel: #F5F7F4;
	--papel-alt: #ECEFEC;
	--tinta: #24292B;
	--tinta-suave: #3A4144;
	--menta: #2FD9A0;
	--menta-tinta: #0C6B4D;
	--plata: #C6CDCF;
	--plata-linea: #D8DDDB;
	--blanco: #FFFFFF;
	--rojo-hp: #E8567B;

	--gradiente-menta: linear-gradient(135deg, #2FD9A0 0%, #3FC1D9 100%);

	--fuente-display: "Unbounded", "Segoe UI", Arial, sans-serif;
	--fuente-texto: "Manrope", "Segoe UI", Arial, sans-serif;
	--fuente-mono: ui-monospace, "Courier New", Courier, monospace;

	--contenedor: 1180px;
	--radio-s: 4px;
	--radio-m: 10px;
	--radio-l: 18px;

	--sombra-tarjeta: 0 18px 40px -22px rgba(36, 41, 43, 0.35);
	--borde-fino: 1px solid var(--plata-linea);

	--z-header: 10;
	--z-menu: 60;
	--z-cookie: 70;
}

/* ---- 3. Reset universal ---- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

body {
	position: relative;
	min-height: 100vh;
	background-color: var(--papel);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

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

ul,
ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ---- 4. Tipografia base ---- */
h1,
h2,
h3,
h4 {
	font-family: var(--fuente-display);
	font-weight: 700;
	line-height: 1.18;
	color: var(--tinta);
}

h1 {
	font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
	font-weight: 600;
}

p {
	max-width: 62ch;
}

strong {
	font-weight: 700;
}

/* ---- 5. Contenedor y utilidades de layout ---- */
.container {
	max-width: var(--contenedor);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.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;
}

/* ---- 6. Skip link (accesibilidad, salta al contenido principal) ---- */
.skip-nav {
	position: absolute;
	top: -80px;
	left: 16px;
	z-index: 100;
	background-color: var(--tinta);
	color: var(--papel);
	padding: 12px 20px;
	border-radius: var(--radio-s);
	font-weight: 700;
	transition: top 0.2s ease;
}

.skip-nav:focus {
	top: 16px;
}

/* ---- 7. Foco visible en toda la web (no se usa outline: none en ningun lado) ---- */
:focus-visible {
	outline: 3px solid var(--menta-tinta);
	outline-offset: 2px;
}

/* ---- 8. Preferencia de movimiento reducido -- solo transiciones puntuales ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.stage__veil,
	.route-path__line,
	.xp-bar__fill,
	.logro,
	.reveal {
		transition: none;
	}
}