/*
 * Andaventura — base: reset, tokens, tipografía.
 *
 * DIRECCIÓN DE ARTE
 * El logo es una montaña atravesada por un camino. Ese camino es el sistema
 * visual del sitio: una línea de ruta recorre la página de arriba abajo con
 * marcadores en cada sección, como el perfil de una etapa. Las curvas de nivel
 * aparecen como textura estructural, nunca como adorno. Es lo que hace que la
 * identidad no sea intercambiable: viene del isotipo, no de un moodboard.
 *
 * Fotografía primero: el color de la experiencia lo pone la imagen. La paleta
 * solo construye los dos mundos entre los que alterna la página —marfil y
 * verde bosque— y deja que la foto haga el resto.
 */

/* ---------------------------------------------------------------- fuentes */
/* Variables, autoalojadas. latin-ext se descarga solo si la página lo pide. */

@font-face {
	font-family: 'Petrona';
	src: url('../fonts/petrona-latin.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	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: 'Petrona';
	src: url('../fonts/petrona-latin-ext.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Schibsted Grotesk';
	src: url('../fonts/schibsted-latin.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	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: 'Schibsted Grotesk';
	src: url('../fonts/schibsted-latin-ext.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

:root {
	/*
	 * DIRECCIÓN DE COLOR (2026-08-09): blanco cálido casi puro + carbón +
	 * fotografía. El color lo ponen las fotos; el fondo solo da luz. El verde
	 * bosque deja de ser fondo alterno y pasa a ser MOMENTO —Venezuela, menú
	 * móvil, estados—. Nada de beige dominante ni bloques oscuros por ritmo.
	 */
	--av-ivory: oklch(98.6% 0.005 95);        /* #FCFBF8 blanco cálido, fondo dominante */
	--av-ivory-deep: oklch(96.3% 0.008 92);   /* #F5F3EE segundo plano, apenas visible */
	--av-white: #ffffff;
	/*
	 * Verde bosque, revisión 4.1. El anterior (#0E372A) pesaba como casi-negro
	 * sobre el blanco. Este sube luminosidad y gira el matiz hacia el petróleo:
	 * sigue siendo profundo, pero tiene aire y convive con #FCFBF8 sin dar un
	 * portazo. Aparece en pocos momentos —Venezuela y detalles—; su fuerza es
	 * llegar después de mucho blanco.
	 */
	--av-forest: oklch(41% 0.052 176);        /* verde mineral: mas luminoso y con deriva a petroleo que #1F453A */
	--av-forest-lift: oklch(45.5% 0.050 176); /* planos elevados dentro del verde */
	--av-forest-line: oklch(55% 0.042 176);   /* bordes dentro del verde */
	--av-ink: oklch(20.5% 0.01 110);          /* #171713 carbón orgánico */

	/* Tinta sobre marfil. Nada de gris claro "elegante": se lee mal. */
	--av-ink-strong: var(--av-ink);
	--av-ink-body: oklch(34% 0.008 150);      /* cuerpo: >7:1 sobre marfil */
	--av-ink-muted: oklch(46% 0.008 150);     /* metadatos: >4.5:1 */
	--av-ink-hair: oklch(88% 0.006 95);       /* filetes sobre blanco */

	/* Tinta sobre verde. */
	--av-on-forest: oklch(95.5% 0.011 85);
	--av-on-forest-muted: oklch(83% 0.018 176);

	/* Acento tierra/cobre. MUY contenido: estados activos, eyebrow, líneas,
	   coordenadas. No es color de botón por defecto. Nunca dorado. */
	--av-clay: oklch(57.5% 0.105 55);         /* #B96E3D */
	--av-clay-bright: oklch(67% 0.115 55);    /* el mismo acento sobre verde */

	/* Tipografía */
	--av-display: 'Petrona', ui-serif, Georgia, serif;
	--av-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Escala fluida. Ratio >=1.25 entre pasos: una escala plana no comunica. */
	--av-t-xl: clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem);
	--av-t-lg: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	--av-t-md: clamp(1.5rem, 1.2rem + 1.35vw, 2.25rem);
	--av-t-sm: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
	--av-t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--av-t-meta: 0.8125rem;

	/* Espacio: ritmo, no una sola medida repetida. */
	--av-s-1: 0.5rem;
	--av-s-2: 1rem;
	--av-s-3: 1.5rem;
	--av-s-4: 2.5rem;
	--av-s-5: clamp(3rem, 6vw, 5rem);
	--av-s-6: clamp(5rem, 10vw, 9rem);
	--av-s-7: clamp(7rem, 14vw, 13rem);

	--av-gutter: clamp(1.25rem, 4vw, 4.5rem);
	--av-measure: 68ch;
	--av-content: 1240px;

	/* Curvas: exponenciales hacia fuera. Sin rebote. */
	--av-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--av-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--av-fast: 220ms;
	--av-mid: 420ms;
	--av-slow: 900ms;

	/* Escala z semántica: nunca valores arbitrarios. */
	--av-z-base: 0;
	--av-z-route: 5;
	--av-z-sticky: 20;
	--av-z-header: 40;
	--av-z-menu: 60;
	--av-z-search: 70;
	--av-z-skip: 100;

	--av-header-h: 84px;
}

@media (max-width: 780px) {
	:root { --av-header-h: 64px; }
}

/* ------------------------------------------------------------------ reset */

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

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

body {
	margin: 0;
	min-height: 100svh;
	background: var(--av-ivory);
	color: var(--av-ink-body);
	font-family: var(--av-sans);
	font-size: var(--av-t-body);
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* ninguna composición puede provocar scroll lateral */
}

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

h1, h2, h3, h4 {
	font-family: var(--av-display);
	color: var(--av-ink-strong);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.025em; /* suelo -0.04em: más apretado y las letras se tocan */
	text-wrap: balance;
	margin: 0;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

input {
	font: inherit;
	color: inherit;
}

/* --------------------------------------------------------- accesibilidad */

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

.andaventura-skip-link:focus {
	position: fixed;
	inset: var(--av-s-2) auto auto var(--av-s-2);
	z-index: var(--av-z-skip);
	width: auto; height: auto;
	clip-path: none;
	padding: 0.85rem 1.25rem;
	background: var(--av-forest);
	color: var(--av-on-forest);
	font-size: var(--av-t-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

:focus-visible {
	outline: 2px solid var(--av-clay);
	outline-offset: 3px;
	border-radius: 2px;
}

.andaventura-site-header :focus-visible,
.av-on-dark :focus-visible {
	outline-color: var(--av-clay-bright);
}

/* ------------------------------------------------- primitivas compartidas */

.av-shell {
	width: min(100% - var(--av-gutter) * 2, var(--av-content));
	margin-inline: auto;
}

.av-wide {
	width: min(100% - var(--av-gutter) * 2, 1600px);
	margin-inline: auto;
}

/* Un único kicker de marca: repite el claim del logo. No se usa como
   encabezado de cada sección — ahí sería andamiaje, no voz. */
.av-kicker {
	font-family: var(--av-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
}

.av-on-dark .av-kicker { color: var(--av-on-forest-muted); }

.av-lede {
	font-size: var(--av-t-sm);
	line-height: 1.55;
	max-width: 46ch;
	color: var(--av-ink-body);
}

.av-on-dark { color: var(--av-on-forest); }
.av-on-dark h1, .av-on-dark h2, .av-on-dark h3 { color: var(--av-on-forest); }
/* Texto claro sobre oscuro pesa menos: necesita más aire entre líneas. */
.av-on-dark p { line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}