/* Cartel «en camino»: mismos colores y letras que la web (tokens de src/styles/global.css). */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-display: swap;
	font-weight: 200 800;
	src: url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
}

:root {
	--color-fondo: #c3d1db;
	--color-texto: #142b4d;
	--color-acento: #29538c;
	--color-corteza: #1d2f4a;
	--color-hoja: #2d5583;
	--color-hoja-luz: #8db4dc;
	--color-flor: #e3edf6;
	--color-polen: #7fa6cf;
	--font-display: 'Newsreader', Georgia, serif;
	--font-ui: 'Hanken Grotesk', system-ui, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	background: var(--color-fondo);
	color: var(--color-texto);
	-webkit-text-size-adjust: 100%;
}
body {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
	background: var(--color-fondo);
	font-family: var(--font-display);
}
::selection {
	background: var(--color-texto);
	color: var(--color-fondo);
}

/* Rama de níspero arriba a la derecha, como en la bienvenida. */
.rama {
	position: absolute;
	top: 2rem;
	right: 0;
	width: 100%;
	height: 26%;
	overflow: visible;
	pointer-events: none;
	animation: aparece 2.4s ease-out both;
}
.nispero-corteza {
	stroke: var(--color-corteza);
}
.nispero-limbo {
	fill: var(--color-hoja);
}
.nispero-hoja-clara .nispero-limbo {
	fill: color-mix(in srgb, var(--color-hoja) 62%, var(--color-hoja-luz));
}
.nispero-nervio {
	stroke: color-mix(in srgb, var(--color-hoja) 55%, white);
	stroke-width: 1.4;
}
.nispero-petalo {
	fill: var(--color-flor);
}
.nispero-polen {
	fill: var(--color-polen);
}

main {
	position: relative;
	display: grid;
	min-height: 100svh;
	place-content: center;
	justify-items: center;
	gap: 1.25rem;
	padding: 6rem 1rem 3rem;
	text-align: center;
}
h1 {
	font-size: clamp(3.5rem, 13vw, 10rem);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.02em;
	animation: aparece 1.6s ease-out 0.2s both;
}
.camino {
	font-size: 1.3125rem;
	font-style: italic;
	animation: aparece 1.6s ease-out 0.9s both;
}
.contacto {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	margin-top: 1rem;
	list-style: none;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	letter-spacing: 0.01em;
	animation: aparece 1.6s ease-out 1.3s both;
}
.contacto a {
	display: inline-block;
	padding: 0.8125rem 0.25rem;
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
.contacto a:hover {
	color: var(--color-acento);
}
a:focus-visible {
	outline: 2px solid var(--color-acento);
	outline-offset: 2px;
}

@keyframes aparece {
	from {
		opacity: 0;
	}
}

@media (min-width: 48rem) {
	.rama {
		top: 1.25rem;
		width: 52%;
		height: 33%;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
	}
}