/* Ortuno Vidal site - base: tokens, reset, type */

/* font block from assets.py, paths point one level up from css/ */
@font-face {
	font-family:'Instrument Serif';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('../fonts/instrument-serif-ov.woff2') format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:'Instrument Serif Fallback';
	src:local('Georgia');
	size-adjust:75%;
}
@font-face {
	font-family:'Geist';
	font-style:normal;
	font-weight:300 700;
	font-display:swap;
	src:url('../fonts/geist-ov.woff2') format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:'Geist Fallback';
	src:local('Arial');
	size-adjust:102%;
}

:root {
	--color-granate: rgb(138, 32, 52);
	--color-granate-hondo: rgb(112, 24, 42);
	--color-azafran: rgb(214, 146, 58);
	--color-escena: rgb(23, 22, 28);
	--color-escena-alta: rgb(33, 32, 40);
	--color-escena-borde: rgb(62, 60, 72);
	--color-escena-marca: rgb(40, 38, 48);
	--color-escena-texto: rgb(240, 240, 244);
	--color-escena-suave: rgb(168, 168, 180);
	--color-fondo: rgb(247, 247, 250);
	--color-tarjeta: rgb(255, 255, 255);
	--color-niebla: rgb(234, 234, 240);
	--color-texto: rgb(30, 29, 36);
	--color-gris: rgb(108, 108, 120);
	--color-borde: rgb(214, 214, 222);

	--space-gutter: clamp(1.25rem, 4vw, 3rem);
	--space-offset: 8px;
	--space-small: 0.75rem;
	--space-medium: 1.5rem;
	--space-large: 2.5rem;

	--font-titular: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
	--font-texto: 'Geist', 'Geist Fallback', Arial, sans-serif;

	--radius-medio: 10px;
	--sombra-suave: 0 12px 32px rgb(30 29 36 / 8%);
	--sombra-dura: var(--space-offset) var(--space-offset) 0 var(--color-granate);
}

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

html {
	scroll-padding-top: 1rem;

	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;

	font-family: var(--font-texto);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-texto);

	background: var(--color-fondo);
}

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

h1,
h2,
h3 {
	margin: 0 0 1rem;

	font-family: var(--font-titular);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h2 {
	font-size: clamp(2.2rem, 4.2vw, 3.6rem);
}

h3 {
	font-size: 1.5rem;
	line-height: 1.15;
}

p {
	margin: 0 0 1rem;
}

a {
	color: var(--color-granate);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-granate-hondo);
}

:focus-visible {
	outline: 2px solid var(--color-azafran);
	outline-offset: 3px;
}

strong {
	font-weight: 600;
}

/* skip link sits above the dark header until focused */
.salto {
	position: absolute;
	top: -5rem;
	left: 1rem;
	z-index: 100;

	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.2rem;

	color: var(--color-tarjeta);
	text-decoration: none;

	background: var(--color-granate);
	border-radius: 999px;
}

.salto:focus {
	top: 1rem;
}

.ceja {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;

	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-granate);
}

.ceja::before {
	content: "";

	width: 2rem;
	height: 1px;

	background: currentColor;
}

.ceja-escena {
	color: var(--color-azafran);
}

/* reveal only when JS is present; popup.js adds inview */
.js .aparece {
	opacity: 0;
	transform: translateY(14px);

	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .aparece.inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .aparece {
		transition: none;
	}
}