/*
 * Andaventura — portada.
 *
 * Cada sección tiene su propia gramática de composición: ninguna repite la
 * anterior. La línea de ruta (.av-route) recorre el borde izquierdo y va
 * marcando el avance, como el perfil de una etapa: es el elemento que hereda
 * el "camino" del isotipo y lo que impide que esto sea intercambiable con
 * cualquier otra web de viajes.
 */

/* ========================================================== LÍNEA DE RUTA */

.av-route {
	position: fixed;
	left: max(14px, calc(var(--av-gutter) * 0.4));
	top: 22vh;
	bottom: 22vh;
	width: 1px;
	z-index: var(--av-z-route);
	background: currentColor;
	opacity: 0.18;
	color: var(--av-ivory);
	transition: color var(--av-mid) var(--av-ease), opacity var(--av-mid) var(--av-ease);
	pointer-events: none;
}

.av-route::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--av-progress, 0%);
	background: var(--av-clay-bright);
	transition: background-color var(--av-mid) var(--av-ease);
}

/* La ruta invierte su tinta según el mundo por el que pasa. */
body.av-on-light .av-route { color: var(--av-ink); opacity: 0.22; }
body.av-on-light .av-route::after { background: var(--av-clay); }

.av-route__dot {
	position: absolute;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

@media (max-width: 1100px) { .av-route { display: none; } }

/* ====================================================== SECCIÓN GENÉRICA */

.av-section { position: relative; padding-block: var(--av-s-5); }
.av-section--tight { padding-block: var(--av-s-4); }

/*
 * Ritmo. Dos secciones seguidas sobre marfil suman sus dos paddings y el
 * hueco resultante (~290px) se lee como un fallo, no como aire. La de abajo
 * cede la mitad. Donde cambia el mundo —marfil a verde— la costura ya hace
 * de separación y no hace falta tocar nada.
 */
.av-seasonal + .av-escapes,
.av-europe + .av-ways {
	padding-top: var(--av-s-4);
}

/*
 * Título lateral pegajoso: el titular se queda mientras el contenido pasa.
 * Sustituye al eyebrow repetido — es una gramática, no un adorno.
 */
/* La columna del título necesita ancho real: con 220px el titular se partía
   en cuatro líneas y el desalineado de la segunda dejaba de leerse. */
.av-side {
	display: grid;
	grid-template-columns: minmax(300px, 1.05fr) minmax(0, 2fr);
	gap: var(--av-s-4) var(--av-s-5);
	align-items: start;
}

.av-side__head { position: sticky; top: calc(var(--av-header-h) + var(--av-s-4)); }

.av-side__title {
	/* Un punto por debajo de la escala general: es un título de sección, no
	   compite con el hero ni con Venezuela. */
	font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem);
	font-weight: 400;
	line-height: 1.06;
	text-wrap: initial;
}

.av-side__title span { display: block; }
.av-side__title span:nth-child(2) { padding-left: 0.85em; } /* desalineado a propósito */

.av-side__lede {
	margin-top: var(--av-s-2);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--av-ink-muted);
	max-width: 32ch;
}

.av-side__count {
	margin-top: var(--av-s-3);
	font-size: var(--av-t-meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-clay);
}

@media (max-width: 900px) {
	.av-side { grid-template-columns: 1fr; gap: var(--av-s-3); }
	.av-side__head { position: static; }
	.av-side__title span:nth-child(2) { padding-left: 0; }
}

/* ==================================================== DERIVA DE DESTINOS */

/*
 * El bloque que sigue al hero. Nada de tarjetas alineadas: cada pieza cae a
 * su altura y se mueve a su velocidad. La rejilla existe para poder romperla:
 * la última se sale del contenedor por la derecha.
 */
/*
 * El colchon inferior es corto a proposito: los offsets escalonados dejan las
 * piezas impares muy por encima del borde y ese desnivel ya es el aire de
 * salida del capitulo. Con s-5 abajo eran 250px de marfil vacio.
 */
.av-drift {
	position: relative;
	background: var(--av-ivory);
	padding-block: var(--av-s-5) var(--av-s-3);
	overflow: clip;
}

.av-drift__head {
	position: relative;
	z-index: 2;
	width: min(100% - var(--av-gutter) * 2, 1600px);
	margin: 0 auto var(--av-s-4);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--av-s-4);
	align-items: end;
}

.av-drift__title {
	margin: 0;
	font-size: clamp(2.4rem, 7vw, 5.6rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-wrap: initial;
}

.av-drift__title span { display: block; }
.av-drift__title span:nth-child(2) { padding-left: 1.6em; }

.av-drift__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--av-ink-muted);
	max-width: 34ch;
}

.av-drift__field {
	position: relative;
	width: min(100% - var(--av-gutter) * 2, 1600px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--av-s-3);
	align-items: start;
}

/* Offsets irregulares a propósito: alineados se leerían como una rejilla con
   errores; desalineados se leen como composición. */
.av-drift__item {
	position: relative;
	grid-row: 1;
	display: block;
	margin-top: var(--dy, 0px);
	will-change: transform;
}

/*
 * Offsets recortados: los de antes (hasta 290px) empujaban la sección 300px
 * de aire muerto. El desalineado se mantiene, el hueco desaparece.
 */
.av-drift__item:nth-child(1) { grid-column: 1 / span 3; --dy: 0px; }
.av-drift__item:nth-child(2) { grid-column: 4 / span 3; --dy: clamp(34px, 6.5vw, 104px); }
.av-drift__item:nth-child(3) { grid-column: 7 / span 3; --dy: clamp(12px, 2.6vw, 42px); }
.av-drift__item:nth-child(4) { grid-column: 10 / span 3; --dy: clamp(50px, 9vw, 146px); }
.av-drift__item:nth-child(5) { grid-column: 13 / span 3; --dy: clamp(20px, 4vw, 66px); }

.av-drift__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 3px;
	background: var(--av-ivory-deep);
}

.av-drift__item:nth-child(3) .av-drift__media { aspect-ratio: 4 / 5; }
.av-drift__item:nth-child(4) .av-drift__media { aspect-ratio: 2 / 3; }

/* Una pieza manda: más ancha, más cerca, y en motion la más lenta. */
.av-drift__item:nth-child(1) { grid-column: 1 / span 4; }
.av-drift__item:nth-child(1) .av-drift__media { aspect-ratio: 4 / 5; }
.av-drift__item:nth-child(2) { grid-column: 5 / span 3; }
.av-drift__item:nth-child(3) { grid-column: 8 / span 3; }
.av-drift__item:nth-child(4) { grid-column: 11 / span 3; }
.av-drift__item:nth-child(5) { grid-column: 14 / span 3; }

.av-drift__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-story) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
	.av-drift__item:hover .av-drift__media img { transform: scale(1.045); }
}

.av-drift__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(6 11 10 / 0.5), rgb(6 11 10 / 0) 46%);
	opacity: 0;
	transition: opacity var(--t-move) var(--e-out);
}

.av-drift__item:hover .av-drift__media::after { opacity: 1; }

.av-drift__cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 0.75rem;
	padding-top: 0.55rem;
	border-top: 1px solid var(--av-ink-hair);
}

.av-drift__name {
	margin: 0;
	font-family: var(--av-display);
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 400;
	line-height: 1.15;
}

.av-drift__when {
	flex: none;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-clay);
}

@media (max-width: 1000px) {
	.av-drift__head { grid-template-columns: 1fr; }
	.av-drift__title span:nth-child(2) { padding-left: 0.6em; }
	.av-drift__field {
		display: flex;
		gap: var(--av-s-2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(var(--av-gutter) * -1);
		padding-right: var(--av-gutter);
	}
	.av-drift__field::-webkit-scrollbar { display: none; }
	.av-drift__item {
		flex: 0 0 clamp(210px, 62vw, 280px);
		scroll-snap-align: start;
		margin-top: 0;
	}
	.av-drift__item:nth-child(even) { margin-top: clamp(24px, 7vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
	.av-stage__h1 .l > span,
	.av-stage__kicker,
	.av-stage__copy,
	.av-stage__actions { animation: none; }
}

/* ============================================================ ESCAPADAS */

.av-escapes { background: var(--av-ivory); }

.av-escapes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--av-s-2) var(--av-s-4);
	margin-bottom: var(--av-s-4);
}

.av-escapes__title { font-size: var(--av-t-lg); font-weight: 400; line-height: 1.05; }
.av-escapes__title span { display: block; }
.av-escapes__title span:nth-child(2) { padding-left: 1.1em; }

.av-escapes__lede {
	max-width: 34ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--av-ink-muted);
}

/* El expediente: índice · escena · filas. */
/*
 * La escena era 3:4 —540px de alto— contra 250 de las dos filas de la
 * derecha: casi 300px de marfil vacio a la derecha de la fotografia. Con la
 * escena cuadrada y la columna de filas mas ancha, las tres columnas acaban
 * a alturas parecidas.
 */
.av-plan {
	display: grid;
	grid-template-columns: minmax(160px, 0.65fr) minmax(0, 1fr) minmax(0, 1.5fr);
	gap: var(--av-s-4);
	align-items: start;
}

.av-plan__index {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--av-ink-hair);
}

.av-plan__tab {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	text-align: left;
	padding: 0.75rem 0 0.75rem 1.1rem;
	font-family: var(--av-display);
	font-size: 1.25rem;
	color: var(--av-ink-muted);
	transition: color var(--t-ui) var(--e-out), padding-left var(--t-ui) var(--e-out);
}

.av-plan__tab::before {
	content: '';
	position: absolute;
	left: -1px; top: 0; bottom: 0;
	width: 2px;
	background: var(--av-clay);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--t-move) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
	.av-plan__tab:hover { color: var(--av-ink-strong); padding-left: 1.35rem; }
}

.av-plan__tab[aria-selected='true'] { color: var(--av-ink-strong); padding-left: 1.35rem; }
.av-plan__tab[aria-selected='true']::before { transform: scaleY(1); }

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

/* La escena: una fotografía por intención, crossfade al cambiar. */
.av-plan__scene {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: 4px;
	overflow: hidden;
	background: var(--av-ivory-deep);
}

.av-plan__scene img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 600ms var(--e-out), transform 1200ms var(--e-out);
}

.av-plan__scene img.is-on { opacity: 1; transform: scale(1); }

/* Filas editoriales, no cards. */
.av-plan__panel[hidden] { display: none; }

.av-planrow {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: start;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--av-ink-hair);
}

.av-plan__panel .av-planrow:first-child { padding-top: 0.2rem; }

.av-planrow__time {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--av-clay);
	padding-top: 0.4rem;
}

.av-planrow__title {
	font-family: var(--av-display);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.15;
	transition: color var(--t-ui) var(--e-out);
}

.av-planrow__copy { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.55; color: var(--av-ink-muted); }

.av-planrow__go {
	color: var(--av-ink-hair);
	padding-top: 0.35rem;
	transition: color var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
	.av-planrow:hover .av-planrow__title { color: var(--av-clay); }
	.av-planrow:hover .av-planrow__go { color: var(--av-clay); transform: translateX(5px); }
}

@media (max-width: 1000px) {
	.av-plan { grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr); }
	.av-plan__scene { display: none; }
}

@media (max-width: 700px) {
	.av-plan { grid-template-columns: 1fr; gap: var(--av-s-2); }
	.av-plan__index {
		flex-direction: row;
		overflow-x: auto;
		border-left: 0;
		border-bottom: 1px solid var(--av-ink-hair);
		scrollbar-width: none;
	}
	.av-plan__index::-webkit-scrollbar { display: none; }
	.av-plan__tab { white-space: nowrap; padding: 0.6rem 0.9rem; font-size: 1.05rem; }
	.av-plan__tab:hover, .av-plan__tab[aria-selected='true'] { padding-left: 0.9rem; }
	.av-plan__tab::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
	.av-plan__tab[aria-selected='true']::before { transform: scaleX(1); }
	.av-planrow { grid-template-columns: minmax(0, 1fr) auto; }
	.av-planrow__time { grid-column: 1 / -1; padding-top: 0; }
}

/* ============================================================ VENEZUELA */

.av-ve {
	position: relative;
	background: var(--av-forest);
	color: var(--av-on-forest);
	/* La costura de curva de nivel ya anuncia el cambio de mundo: no hace
	   falta además un colchón de 144px antes del titular. */
	padding-block: var(--av-s-5) var(--av-s-5);
	overflow: clip;
}

/* Entrada: el verde llega con un borde de curva de nivel, no con un corte. */
.av-ve__seam {
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(80px, 10vw, 150px);
	background: var(--av-ivory);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v58c-260 44-470-6-742 12S250 132 0 96z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v58c-260 44-470-6-742 12S250 132 0 96z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.av-ve__inner { position: relative; }

.av-ve__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--av-s-4);
	align-items: end;
	margin-bottom: var(--av-s-4);
}

.av-ve__title {
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.028em;
	color: var(--av-on-forest);
	text-wrap: initial;
}

.av-ve__title span { display: block; }
.av-ve__title span:nth-child(2) { padding-left: 0.9em; }
.av-ve__title span:nth-child(4) { padding-left: 0.45em; }

.av-ve__lede { color: rgb(245 242 235 / 0.8); max-width: 42ch; }

/* Dos columnas: índice a la izquierda, imagen fija a la derecha que responde
   al recorrido del cursor o del foco. */
/*
 * Dos columnas y dos filas: el índice arriba a la izquierda, el CTA debajo
 * y la fotografía ocupando la altura completa de la derecha. Antes el CTA
 * era una fila aparte y la diferencia de alto entre lista y foto se pagaba
 * en verde vacío.
 */
.av-ve__body {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	grid-template-rows: auto auto;
	gap: var(--av-s-4);
	align-items: start;
}

.av-ve__groups { grid-column: 1; grid-row: 1; }

.av-ve__foot {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
}

.av-ve__stage { grid-column: 2; grid-row: 1 / span 2; }

.av-ve__groups { display: flex; flex-direction: column; gap: var(--av-s-3); }

.av-ve__grouptitle {
	font-family: var(--av-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--av-clay-bright);
	padding-bottom: 0.6rem;
	margin-bottom: 0.4rem;
	border-bottom: 1px solid var(--av-forest-line);
}

.av-ve__item {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.34rem 0;
	font-family: var(--av-display);
	font-size: clamp(1.12rem, 1.7vw, 1.42rem);
	line-height: 1.2;
	color: rgb(245 242 235 / 0.72);
	transition: color var(--av-fast) var(--av-ease), transform var(--av-fast) var(--av-ease);
}

.av-ve__item:hover,
.av-ve__item:focus-visible,
.av-ve__item.is-active {
	color: var(--av-on-forest);
	transform: translateX(8px);
}

/* Coordenada discreta: aparece con el elemento activo. Cartografía, no HUD. */
.av-ve__coord {
	font-family: var(--av-sans);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	color: var(--av-clay-bright);
	opacity: 0;
	transition: opacity var(--av-fast) var(--av-ease);
}

.av-ve__item:hover .av-ve__coord,
.av-ve__item.is-active .av-ve__coord { opacity: 1; }

/*
 * Cuadrada, no 3:4. En vertical la fotografía medía 840px de alto contra los
 * 560 del índice: la sección entera existía para sostener una foto.
 */
.av-ve__stage {
	position: sticky;
	top: calc(var(--av-header-h) + var(--av-s-3));
	aspect-ratio: 1;
	border-radius: 3px;
	overflow: hidden;
	background: var(--av-forest-lift);
}

.av-ve__stage img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 700ms var(--av-ease), transform 1400ms var(--av-ease);
}

.av-ve__stage img.is-on { opacity: 1; transform: scale(1); }

.av-ve__stagelabel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.1rem 1.2rem;
	background: linear-gradient(to top, rgb(6 30 24 / 0.8), rgb(6 30 24 / 0));
	font-family: var(--av-display);
	font-size: 1.2rem;
	color: var(--av-on-forest);
}

.av-ve__out {
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(60px, 7vw, 110px);
	background: var(--av-ivory);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 74c250-36 470 16 742-4s448-48 698-16v56H0z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 74c250-36 470 16 742-4s448-48 698-16v56H0z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.av-ve__foot { position: relative; }

.av-btn--onforest {
	background: transparent;
	color: var(--av-on-forest);
	border: 1px solid var(--av-forest-line);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.av-btn--onforest:hover { background: var(--av-forest-lift); border-color: var(--av-on-forest-muted); }
}

@media (max-width: 900px) {
	.av-ve__head, .av-ve__body { grid-template-columns: 1fr; }
	.av-ve__title span { padding-left: 0 !important; }
	.av-ve__stage { position: relative; top: 0; aspect-ratio: 4 / 3; grid-column: 1; grid-row: 1; margin-bottom: var(--av-s-3); }
	.av-ve__groups { grid-row: 2; }
	.av-ve__foot { grid-row: 3; margin-top: 0; }
}

/* =============================================================== EUROPA */

.av-europe { background: var(--av-ivory); padding-block: var(--av-s-5); }

.av-europe__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--av-s-2);
	margin-bottom: var(--av-s-4);
}

.av-europe__title { font-size: var(--av-t-lg); font-weight: 400; line-height: 1.05; }
.av-europe__title span { display: block; }
.av-europe__title span:nth-child(2) { padding-left: 1.4em; }

.av-panels { display: flex; gap: 10px; height: clamp(330px, 40vw, 460px); }

.av-panel {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: 3px;
	display: block;
	transition: flex-grow 780ms var(--av-ease);
}

/* En escritorio el panel apuntado gana ancho y los otros ceden. */
@media (min-width: 861px) and (hover: hover) {
	.av-panels:hover .av-panel { flex-grow: 0.72; }
	.av-panels .av-panel:hover,
	.av-panels .av-panel:focus-visible { flex-grow: 1.9; }
}

.av-panel img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1100ms var(--av-ease);
}

.av-panel:hover img { transform: scale(1.06); }

.av-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(6 30 24 / 0.82) 0%, rgb(6 30 24 / 0.18) 52%, rgb(6 30 24 / 0.05) 100%);
}

.av-panel__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(1rem, 2vw, 1.8rem);
	color: var(--av-ivory);
	z-index: 1;
}

.av-panel__country {
	font-family: var(--av-display);
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	line-height: 1.05;
	color: var(--av-ivory);
	margin-bottom: 0.4rem;
}

.av-panel__places {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: rgb(245 242 235 / 0.82);
	/* Revelado al apuntar: en reposo el panel es solo el país. */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--av-mid) var(--av-ease), opacity var(--av-mid) var(--av-ease);
}

.av-panel__places span + span::before { content: '· '; margin-right: 0.35rem; }

@media (hover: hover) {
	.av-panel:hover .av-panel__places,
	.av-panel:focus-visible .av-panel__places { max-height: 4rem; opacity: 1; }
}

@media (hover: none) {
	.av-panel__places { max-height: 4rem; opacity: 1; }
}

@media (max-width: 860px) {
	.av-panels {
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(var(--av-gutter) * -1);
		padding-right: var(--av-gutter);
	}
	.av-panels::-webkit-scrollbar { display: none; }
	.av-panel { flex: 0 0 76%; scroll-snap-align: start; aspect-ratio: 3 / 4; }
}

/* ==================================================== CÓMO QUIERES VIAJAR */

.av-ways { background: var(--av-ivory); position: relative; }

.av-ways__head { margin-bottom: var(--av-s-3); }
.av-ways__title { font-size: var(--av-t-lg); font-weight: 400; line-height: 1.05; }
.av-ways__title span { display: block; }
.av-ways__title span:nth-child(2) { padding-left: 1.4em; }

.av-ways__list { border-top: 1px solid var(--av-ink-hair); }

/*
 * Cada intención es una línea enorme, no una caja. La fotografía entra en el
 * hueco que queda entre el rótulo y su nota —el mismo hueco que antes estaba
 * vacío y hacía que la sección se leyera como una tabla de administración— y
 * se abre de izquierda a derecha al apuntar la fila. Nada se desplaza: la
 * franja ocupa un sitio que ya existía.
 */
.av-way {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(0.5rem, 1vw, 0.85rem) 0;
	border-bottom: 1px solid var(--av-ink-hair);
}

.av-way__label {
	font-family: var(--av-display);
	font-size: clamp(1.75rem, 0.9rem + 3vw, 3.3rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--av-ink-strong);
	transition: transform var(--t-move) var(--e-out), color var(--t-ui) var(--e-out);
}

/*
 * En reposo asoma un trozo de fotografía justo detrás del rótulo; al apuntar
 * la fila, la franja se abre hasta la nota. El asomo importa: sin él la
 * sección en reposo eran seis renglones y dos filetes, es decir, una tabla.
 * Como cada rótulo mide distinto, los asomos arrancan a alturas distintas y
 * el bloque se lee con el borde irregular de un poema, no de una rejilla.
 *
 * La máscara difumina el final para que la franja no termine en un canto
 * recto; por la izquierda apenas 4%, o el asomo se quedaría en nada.
 */
.av-way__strip {
	--av-peek: clamp(64px, 8.5vw, 132px);
	position: relative;
	display: block;
	height: clamp(46px, 4.6vw, 78px);
	border-radius: 2px;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--av-peek)) 0 0);
	transition: clip-path var(--t-story) var(--e-out);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 78%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 78%, transparent);
}

.av-way__strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.av-way__note {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	transition: color var(--t-ui) var(--e-out);
	white-space: nowrap;
}

/* El teclado ve exactamente lo mismo que el ratón. */
.av-way:focus-visible .av-way__strip,
.av-way:hover .av-way__strip { clip-path: inset(0 0 0 0); }

@media (hover: hover) and (pointer: fine) {
	.av-way:hover .av-way__label { transform: translateX(14px); color: var(--av-clay); }
	.av-way:hover .av-way__note { color: var(--av-ink-strong); }
}

.av-way:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 4px; }

/* En táctil no hay apuntado que valga: la franja se queda abierta. */
@media (hover: none) {
	.av-way__strip { clip-path: inset(0 0 0 0); }
}

/*
 * En móvil no cabe la franja larga, pero quitarla dejaba seis renglones
 * pelados: la fotografía se queda como un trozo fijo al final de cada fila,
 * ocupando el sitio de la nota. Misma idea que el asomo de escritorio.
 */
@media (max-width: 700px) {
	.av-way { grid-template-columns: minmax(0, 1fr) auto; }
	.av-way__note { display: none; }

	.av-way__strip {
		width: 96px;
		height: 52px;
		clip-path: inset(0);
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ============================================================= ORGANIZA */

/*
 * Variación mínima de fondo (--av-ivory-deep): separa el capítulo sin volver
 * a la página por bloques. El verde queda reservado a Venezuela.
 */
.av-organise {
	background: var(--av-ivory-deep);
	padding-block: var(--av-s-5);
}

.av-organise__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
	gap: var(--av-s-3) var(--av-s-5);
	align-items: center;
	margin-bottom: var(--av-s-4);
}

.av-organise__title { font-size: var(--av-t-lg); font-weight: 400; line-height: 1.05; }
.av-organise__title span { display: block; }
.av-organise__title span:nth-child(2) { padding-left: 1.2em; }

.av-organise__lede {
	margin-top: var(--av-s-2);
	font-size: 0.95rem;
	color: var(--av-ink-muted);
	max-width: 34ch;
}

/* El constructor de frase. */
.av-madlib__line {
	font-family: var(--av-display);
	font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
	line-height: 1.6;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
}

.av-madlib__slot { position: relative; display: inline-flex; align-items: baseline; }

.av-madlib__select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--av-clay);
	border-bottom: 2px solid var(--av-clay);
	padding: 0 1.4em 0.05em 0.15em;
	cursor: pointer;
	max-width: 100%;
	transition: color var(--t-ui) var(--e-out), border-color var(--t-ui) var(--e-out);
}

.av-madlib__select:hover { color: var(--av-clay-bright); }
.av-madlib__select:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 4px; }

.av-madlib__caret {
	position: absolute;
	right: 0.25em;
	bottom: 0.35em;
	pointer-events: none;
	color: var(--av-clay);
	rotate: 90deg;
}

.av-madlib__cta { margin-top: var(--av-s-3); }

/*
 * Los cuatro frentes: filas de dos columnas, no cards.
 *
 * Llevaban un 01/02/03/04 y un icono de linea por fila. Los numeros de
 * seccion como decoracion estan prohibidos en el ADN visual de la casa y el
 * icono al lado convertia cada fila en el bloque de "features" de cualquier
 * plantilla. Sin ellos, y con el resumen a la derecha en vez de debajo, las
 * cuatro filas ocupan la mitad y se leen como un indice editorial.
 */
.av-front {
	display: grid;
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.35fr) auto;
	gap: clamp(0.9rem, 2.4vw, 2.2rem);
	align-items: baseline;
	padding: clamp(0.8rem, 1.4vw, 1.15rem) 0;
	border-bottom: 1px solid var(--av-ink-hair);
}

.av-front__title {
	font-family: var(--av-display);
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
	font-weight: 500;
	line-height: 1.15;
	transition: color var(--t-ui) var(--e-out);
}

.av-front__copy { font-size: 0.9rem; line-height: 1.55; color: var(--av-ink-muted); max-width: 52ch; }

.av-front__go { color: var(--av-ink-hair); transition: color var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
	.av-front:hover .av-front__title { color: var(--av-clay); }
	.av-front:hover .av-front__go { color: var(--av-clay); transform: translateX(5px); }
}

.av-front:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 4px; }

@media (max-width: 860px) {
	.av-organise__grid { grid-template-columns: 1fr; }
	/* Sin sitio para dos columnas: el resumen vuelve debajo del titulo. */
	.av-front { grid-template-columns: minmax(0, 1fr) auto; }
	.av-front__title { grid-column: 1; }
	.av-front__copy { grid-column: 1; margin-top: 0.3rem; }
	.av-front__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ================================================================ GUÍAS */

.av-guides {
	background: var(--av-ivory);
	padding-block: var(--av-s-5) var(--av-s-4);
	overflow: clip;
}

.av-guides__title {
	font-size: var(--av-t-lg);
	font-weight: 400;
	line-height: 1.05;
	margin-bottom: var(--av-s-4);
}

.av-guides__title span { display: block; }
.av-guides__title span:nth-child(2) { padding-left: 1.3em; }

/*
 * El escaparate ocupa el ancho de la página, no la caja de 1600px del resto de
 * la portada: con el tope general, cuatro piezas quedaban en el centro entre
 * dos franjas de marfil vacío. El titular usa el mismo contenedor, así que
 * arranca a plomo con la primera pieza.
 */
.av-guides__inner {
	position: relative;
	width: min(100% - var(--av-gutter) * 2, 1900px);
	margin-inline: auto;
}

/*
 * ESCAPARATE ESCALONADO.
 *
 * Una fila de cuatro. Todas las piezas miden lo mismo —una cuarta parte del
 * ancho, que en una pantalla de 1920 son 435px— y lo que las separa es la
 * altura de salida y la proporción de la fotografía: ninguna comparte línea de
 * base ni formato con la de al lado.
 *
 * Los desniveles los pone el CSS. El parallax de motion.js solo los exagera al
 * pasar; sin JavaScript la composición es la misma, quieta.
 */
.av-works {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1.2rem, 2.2vw, 2.8rem);
	row-gap: 0;
	align-items: start;
}

.av-work:nth-child(1) { margin-top: 0; }
.av-work:nth-child(2) { margin-top: clamp(70px, 9vw, 170px); }
.av-work:nth-child(3) { margin-top: clamp(30px, 4vw, 75px); }
.av-work:nth-child(4) { margin-top: clamp(95px, 12vw, 235px); }

.av-work__link { display: block; color: inherit; }

/*
 * El marco recorta y la fotografía se mueve dentro. La capa interior va
 * sobredimensionada para que al desplazarse no asome el fondo por ningún borde.
 */
.av-work__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 14px;
	background: var(--av-ivory-deep);
}

.av-work:nth-child(2) .av-work__media { aspect-ratio: 3 / 4; }
.av-work:nth-child(3) .av-work__media { aspect-ratio: 1; }
.av-work:nth-child(4) .av-work__media { aspect-ratio: 3 / 4; }

.av-work__inner {
	display: block;
	position: absolute;
	inset: -14% 0;
	will-change: transform;
}

.av-work__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-story) var(--e-out);
}

/*
 * Barrido de luz al apuntar: una banda diagonal cruza la lámina una vez. Es el
 * gesto que dice "esto responde" sin mover nada de sitio.
 */
.av-work__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(104deg, transparent 34%, rgb(255 255 255 / 0.3) 48%, transparent 62%);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

@keyframes av-sweep {
	from { transform: translateX(-120%); opacity: 1; }
	to { transform: translateX(120%); opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
	.av-work__link:hover .av-work__media::after { animation: av-sweep 900ms var(--e-out) forwards; }
	.av-work__link:hover .av-work__inner img { transform: scale(1.05); }
	.av-work__link:hover .av-work__title::after { transform: scaleX(1); }
}

.av-work__body { display: block; margin-top: clamp(0.95rem, 1.4vw, 1.5rem); }

.av-work__title {
	position: relative;
	display: inline-block;
	font-family: var(--av-display);
	font-size: clamp(1.25rem, 1.45vw, 1.85rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var(--av-ink-strong);
}

.av-work__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.1em;
	width: 100%;
	height: 1px;
	background: var(--av-clay);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-move) var(--e-out);
}

.av-work__meta {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--av-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--av-clay);
}

.av-work__copy {
	display: block;
	margin-top: 0.65rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--av-ink-muted);
	max-width: 34ch;
}

.av-work__link:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 8px; }
.av-work__link:focus-visible .av-work__title::after { transform: scaleX(1); }

/*
 * Notas al margen: sostienen la composición por las esquinas que la rejilla
 * deja vacías. No son un eyebrow ni un titular: son voz de la casa en la
 * medida de un pie de foto.
 */
.av-note {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	max-width: 22ch;
	font-family: var(--av-sans);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--av-clay);
}

/* La marca es el trazo del isotipo: una cumbre, no un icono de stock. */
.av-note__mark {
	flex: none;
	width: 16px;
	height: 14px;
	margin-top: 0.1em;
	background: currentColor;
	clip-path: polygon(50% 0, 100% 100%, 72% 100%, 50% 55%, 28% 100%, 0 100%);
}

.av-note {
	max-width: 24ch;
	font-size: clamp(0.72rem, 0.85vw, 0.86rem);
}

.av-note--top { top: clamp(10px, 2vw, 40px); right: 0; }
.av-note--bottom { bottom: clamp(1.5rem, 5vw, 6rem); left: 0; }

.av-guides__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 5rem);
}

@media (max-width: 1000px) {
	.av-works { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--av-s-4); }
	.av-work:nth-child(1) { grid-column: 1; grid-row: 1; margin-top: 0; }
	.av-work:nth-child(2) { grid-column: 2; grid-row: 1; margin-top: clamp(50px, 9vw, 110px); }
	.av-work:nth-child(3) { grid-column: 1; grid-row: 2; margin-top: 0; }
	.av-work:nth-child(4) { grid-column: 2; grid-row: 2; margin-top: clamp(50px, 9vw, 110px); }
	.av-work .av-work__media { aspect-ratio: 4 / 5; }
	.av-note { position: static; max-width: none; margin-bottom: var(--av-s-3); }
	.av-note--bottom { margin: var(--av-s-3) 0 0; }
}

@media (max-width: 620px) {
	.av-works { grid-template-columns: minmax(0, 1fr); }
	.av-work { grid-column: 1 !important; margin-top: 0 !important; }
	.av-work:nth-child(1) { grid-row: 1; }
	.av-work:nth-child(2) { grid-row: 2; }
	.av-work:nth-child(3) { grid-row: 3; }
	.av-work:nth-child(4) { grid-row: 4; }
}

/* ============================================================== CIERRE */

/*
 * Sin borde superior: la separación entre capítulos la hace el espacio y el
 * cambio de escala, nunca una línea que anuncie "aquí termina la sección".
 */
.av-closing {
	background: var(--av-ivory);
	padding-block: var(--av-s-5) var(--av-s-5);
}

.av-closing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--av-s-4);
	align-items: end;
}

.av-closing__title {
	font-size: clamp(2.2rem, 5.4vw, 4.4rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.028em;
	text-wrap: initial;
}

.av-closing__title span { display: block; }
.av-closing__title span:nth-child(2) { padding-left: 0.7em; }

.av-closing__copy { margin-bottom: var(--av-s-2); color: var(--av-ink-body); }

.av-form { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }

.av-form__field { flex: 1 1 220px; }

.av-form__label {
	display: block;
	font-size: var(--av-t-meta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	margin-bottom: 0.4rem;
}

.av-form__input {
	width: 100%;
	padding: 0.8rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--av-ink-body);
	color: var(--av-ink-strong);
	transition: border-color var(--av-fast) var(--av-ease);
}

/* El placeholder también tiene que cumplir contraste, no ser gris decorativo. */
.av-form__input::placeholder { color: var(--av-ink-muted); }
.av-form__input:focus { outline: none; border-color: var(--av-clay); }
.av-form__input:focus-visible { outline: 2px solid var(--av-clay); outline-offset: 4px; }

.av-form__note { flex-basis: 100%; font-size: 0.78rem; color: var(--av-ink-muted); }

@media (max-width: 860px) {
	.av-closing__inner { grid-template-columns: 1fr; gap: var(--av-s-3); }
	.av-closing__title span:nth-child(2) { padding-left: 0; }
}

/* ============================================ revelado al entrar en pantalla */

/*
 * El contenido es visible por defecto. Solo si el script confirma que puede
 * observar, se añade .av-reveal-on al <html> y entonces se aplica el estado
 * inicial. Así una pestaña en segundo plano o un render sin JS nunca deja la
 * página en blanco.
 */
.av-reveal-on .av-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 800ms var(--av-ease), transform 800ms var(--av-ease);
}

.av-reveal-on .av-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.av-reveal-on .av-reveal { opacity: 1; transform: none; }
}

/* ================================================ REVELADOS RESILIENTES */

/*
 * Patrón obligatorio para todo lo que "aparece" en la portada.
 *
 * `animation-fill-mode: backwards` aplica el primer fotograma SOLO durante el
 * retardo. Si la animación no llega a correr nunca —pestaña en segundo plano,
 * observador que no dispara, JavaScript caído— la pieza se queda en su estilo
 * normal, que es visible. Es lo contrario de poner el estado oculto en CSS y
 * confiar en que algo lo quite: eso ya dejó fotografías invisibles una vez.
 *
 * El estado inicial solo existe cuando `.av-reveal-on` confirma que hay
 * observador, y se dispara al recibir `.is-in`.
 */

@keyframes av-wipe-up { from { clip-path: inset(100% 0 0 0); } }
@keyframes av-zoom-out { from { transform: scale(1.12); } }
@keyframes av-wipe-line { from { clip-path: inset(0 0 100% 0); transform: translateY(20px); } }

.av-reveal-on .av-drift__item.is-in .av-drift__media {
	animation: av-wipe-up 900ms var(--e-out) backwards;
	animation-delay: calc(var(--av-i, 0) * 70ms);
}

.av-reveal-on .av-drift__item.is-in .av-drift__media img {
	animation: av-zoom-out 1300ms var(--e-out) backwards;
	animation-delay: calc(var(--av-i, 0) * 70ms);
}

.av-reveal-on li.av-wipe.is-in .av-way {
	animation: av-wipe-line 720ms var(--e-out) backwards;
	animation-delay: calc(var(--av-i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
	.av-reveal-on .av-drift__item.is-in .av-drift__media,
	.av-reveal-on .av-drift__item.is-in .av-drift__media img,
	.av-reveal-on li.av-wipe.is-in .av-way { animation: none; }
}

/*
 * Titulares por líneas. El marcado lo prepara motion.js (envolver cada
 * renglón); la animación es de CSS y con `backwards`, así que sin JavaScript
 * —o sin que el observador dispare— el titular se lee igual.
 */
@keyframes av-line-up { from { transform: translateY(108%); } }

.av-lines > span { display: block; overflow: hidden; }
.av-lines > span > span { display: block; }

.av-lines.is-in > span > span {
	animation: av-line-up 900ms var(--e-io) backwards;
}

.av-lines.is-in > span:nth-child(2) > span { animation-delay: 70ms; }
.av-lines.is-in > span:nth-child(3) > span { animation-delay: 140ms; }
.av-lines.is-in > span:nth-child(4) > span { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
	.av-lines.is-in > span > span { animation: none; }
}