/*
 * Sistema "Ambato florece": flores por categoría, hero animado, dibujo al hacer scroll,
 * mano del logo, pétalos al compartir y transiciones entre páginas.
 *
 * Regla: todo se ve completo y quieto por defecto. El movimiento solo se agrega dentro de
 * prefers-reduced-motion: no-preference, y lo que depende del scroll, solo si el navegador
 * soporta animation-timeline (si no, se ve igual pero sin animar).
 */

/* ---------- Flores (sprite) ---------- */

.ap-flor {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	fill: var(--ap-flor-relleno, none);
	stroke: currentColor;
	stroke-width: var(--ap-flor-trazo, 3);
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.ap-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.ap-chip__flor {
	width: 1.15rem;
	height: 1.15rem;
	margin-block: -0.2rem;
	--ap-flor-trazo: 4;
}

.ap-titulo-flor {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ap-titulo-flor__flor {
	width: 1.1em;
	height: 1.1em;
	color: var(--ap-magenta);
	--ap-flor-trazo: 3.2;
	--ap-flor-relleno: color-mix(in oklch, var(--ap-magenta) 18%, transparent);
}

.ap-titulo-flor--grande .ap-titulo-flor__flor {
	width: 0.9em;
	height: 0.9em;
	--ap-flor-trazo: 2.6;
}

.ap-franja--magenta .ap-titulo-flor__flor,
.ap-franja--tinta .ap-titulo-flor__flor {
	color: currentColor;
	--ap-flor-relleno: none;
}

/* ---------- Hero ---------- */

.ap-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(1.75rem, 1rem + 4vw, 4.5rem);
	background: var(--ap-celeste);
	color: var(--ap-tinta);
}

.ap-hero__rejilla {
	display: grid;
	grid-template-areas:
		"cabeza"
		"paisaje"
		"titulares";
}

.ap-hero__cabeza {
	position: relative;
	z-index: 1;
	grid-area: cabeza;
}

.ap-hero__antetitulo {
	font-size: var(--ap-t--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ap-hero__titulo {
	margin-top: 0.4rem;
	font-size: clamp(3.1rem, 1.6rem + 7.5vw, 7.25rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
}

.ap-hero__bajada {
	max-width: 26rem;
	margin-top: 0.9rem;
	font-family: var(--ap-fuente-texto);
	font-size: var(--ap-t-1);
	line-height: 1.4;
}

.ap-hero__paisaje {
	--u: min(100vw / 400, 62vh / 300); /* Cuánto mide en pantalla una unidad del dibujo. */
	--ap-rayo: color-mix(in srgb, var(--ap-celeste) 84%, var(--ap-papel));
	position: relative;
	grid-area: paisaje;
	margin-inline: calc(50% - 50vw);
	margin-top: 0.5rem;
}

.ap-hero__escena {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-height: 62vh;
	overflow: hidden;
	stroke: var(--ap-tinta);
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/*
 * Cielo. Sol y rayos se colocan en unidades del dibujo para quedar detrás del volcán en cualquier
 * pantalla. Los rayos solo giran 18°, lo que mide un par rayo-hueco: al reiniciar no se nota el salto.
 */
.ap-hero__cielo {
	position: absolute;
	inset: 0;
}

.ap-hero__rayos,
.ap-hero__sol {
	position: absolute;
	left: calc(50% + 58 * var(--u));
	bottom: calc(160 * var(--u));
	border-radius: 50%;
	transform: translate(-50%, 50%);
}

.ap-hero__rayos {
	width: min(150vw + 20rem, 110rem);
	aspect-ratio: 1;
	background:
		radial-gradient(closest-side, transparent 20%, var(--ap-celeste) 100%),
		repeating-conic-gradient(var(--ap-rayo) 0 8.8deg, transparent 9.2deg 17.8deg, var(--ap-rayo) 18deg);
}

.ap-hero__sol {
	width: calc(64 * var(--u));
	aspect-ratio: 1;
	border: calc(2.4 * var(--u)) solid var(--ap-tinta);
	background: var(--ap-papel);
}

.ap-hero__amanecer {
	display: none;
}

.ap-hero__nube {
	position: absolute;
	left: var(--x);
	bottom: calc(var(--y) * var(--u));
	width: calc(var(--ancho) * var(--u));
	height: auto;
	overflow: visible;
	fill: var(--ap-papel);
}

.ap-hero__nube--1 {
	--x: 6%;
	--y: 236;
	--ancho: 92;
}

.ap-hero__nube--2 {
	--x: 62%;
	--y: 252;
	--ancho: 70;
	opacity: 0.8;
}

.ap-hero__nube--3 {
	--x: 38%;
	--y: 206;
	--ancho: 56;
	opacity: 0.65;
}

.ap-hero__humo {
	position: absolute;
	left: calc(50% - 30 * var(--u));
	bottom: calc(216 * var(--u));
	width: calc(50 * var(--u));
	height: calc(74 * var(--u));
	overflow: visible;
	fill: none;
	stroke: var(--ap-papel);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.85;
	transform-origin: 40% 100%;
}

/* Escena, de lejos a cerca: lo lejano más claro y con línea más fina. */
.ap-hero__cordillera {
	fill: color-mix(in srgb, var(--ap-celeste) 74%, var(--ap-papel));
	stroke: none;
}

.ap-hero__filo {
	stroke-width: 1.2;
}

.ap-hero__nieve {
	fill: var(--ap-papel);
	stroke: none;
}

.ap-hero__volcan {
	stroke-width: 2.6;
	fill: color-mix(in srgb, var(--ap-celeste) 62%, var(--ap-papel));
}

.ap-hero__pliegue {
	stroke-width: 1.2;
}

.ap-hero__colina {
	fill: color-mix(in srgb, var(--ap-celeste) 34%, var(--ap-papel));
	stroke: none;
}

.ap-hero__cerro,
.ap-hero__borde {
	stroke-width: 2;
}

.ap-hero__suelo {
	fill: var(--ap-papel);
	stroke: none;
}

/* Barrios. */
.ap-hero__muro-casa {
	stroke-width: 1.1;
	fill: var(--ap-papel-hondo);
}

.ap-hero__techo {
	stroke-width: 1.1;
	fill: color-mix(in srgb, var(--ap-magenta) 62%, var(--ap-papel));
}

.ap-hero__ventana {
	stroke-width: 1.3;
}

/* Catedral. */
.ap-hero__muro {
	stroke-width: 1.5;
	fill: var(--ap-papel);
}

.ap-hero__sombra {
	stroke-width: 1.5;
	fill: color-mix(in srgb, var(--ap-celeste) 22%, var(--ap-papel));
}

.ap-hero__celosia {
	stroke-width: 1.5;
	fill: color-mix(in srgb, var(--ap-celeste) 52%, var(--ap-papel));
}

.ap-hero__barra {
	stroke: var(--ap-tinta);
	stroke-width: 1.05;
}

.ap-hero__linea {
	stroke-width: 1;
}

.ap-hero__vidrio {
	stroke-width: 1;
	fill: color-mix(in srgb, var(--ap-celeste) 60%, var(--ap-tinta));
}

.ap-hero__puerta {
	stroke-width: 1.2;
	fill: var(--ap-magenta);
}

.ap-hero__roseta {
	stroke: var(--ap-magenta-oscuro);
	stroke-width: 2.4;
}

/* Monumento a la Primera Imprenta: metal bruñido, tres tonos de cielo reflejado. */
.ap-hero__plaza {
	stroke-width: 1.3;
	fill: var(--ap-papel);
}

.ap-hero__acero,
.ap-hero__acero-luz,
.ap-hero__acero-hondo {
	stroke-width: 1.3;
}

.ap-hero__acero {
	fill: color-mix(in srgb, var(--ap-celeste) 55%, var(--ap-papel));
}

.ap-hero__acero-luz {
	fill: var(--ap-papel);
}

.ap-hero__acero-hondo {
	fill: color-mix(in srgb, var(--ap-celeste) 72%, var(--ap-tinta));
}

.ap-hero__destello {
	stroke: none;
	fill: var(--ap-papel);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* Vegetación. */
.ap-hero__tronco {
	stroke-width: 1.2;
	fill: var(--ap-papel-hondo);
}

.ap-hero__penacho {
	stroke-width: 1.1;
	fill: color-mix(in srgb, var(--ap-celeste) 50%, var(--ap-papel));
}

.ap-hero__tronco-fino {
	stroke-width: 1.5;
}

.ap-hero__copa {
	stroke-width: 1.3;
	fill: color-mix(in srgb, var(--ap-celeste) 45%, var(--ap-papel));
}

.ap-hero__fruta-arbol {
	stroke: var(--ap-magenta);
	stroke-width: 3;
}

/* Flores y frutas del frente. */
.ap-hero__tallo {
	stroke-width: 2.2;
}

.ap-hero__hojita {
	stroke-width: 1.8;
	fill: color-mix(in srgb, var(--ap-celeste) 45%, var(--ap-papel));
}

.ap-hero__corola {
	stroke-width: 2;
	fill: var(--ap-magenta);
}

.ap-hero__cabezal--celeste .ap-hero__corola {
	fill: var(--ap-celeste);
}

.ap-hero__cabezal {
	transition: rotate 400ms var(--ap-curva), scale 400ms var(--ap-curva);
}

.ap-hero__fruta-forma {
	stroke-width: 2.4;
	fill: var(--ap-magenta);
}

.ap-hero__fruta--durazno {
	fill: color-mix(in srgb, var(--ap-magenta) 42%, var(--ap-papel));
}

.ap-hero__fruta--pera {
	fill: var(--ap-papel-hondo);
}

.ap-hero__fruta--mora {
	fill: color-mix(in srgb, var(--ap-magenta) 55%, var(--ap-tinta));
}

.ap-hero__pasto {
	stroke-width: 1.5;
}

/* Titulares: cada uno con la flor de su noticia. */
.ap-hero__titulares {
	position: relative;
	z-index: 1;
	grid-area: titulares;
	display: grid;
	margin-inline: calc(50% - 50vw);
	padding: 0.75rem var(--ap-margen) clamp(2rem, 1.5rem + 2vw, 3rem);
	background: var(--ap-papel);
	list-style: none;
}

.ap-hero__titular a {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--ap-linea);
	color: var(--ap-tinta);
	font-family: var(--ap-fuente-titulos);
	font-size: var(--ap-t-1);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ap-hero__titular:last-child a {
	border-bottom: 0;
}

.ap-hero__titular a span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.ap-hero__titular a:hover span,
.ap-hero__titular a:focus-visible span {
	text-decoration: underline;
	text-decoration-color: var(--ap-magenta);
	text-decoration-thickness: 2px;
}

.ap-hero__icono {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--ap-tinta);
	--ap-flor-trazo: 2.4;
	--ap-flor-relleno: var(--ap-magenta);
}

.ap-hero__titular:nth-child(even) .ap-hero__icono:not(.ap-flor--fruta) {
	--ap-flor-relleno: var(--ap-celeste);
}

@media (min-width: 60rem) {
	.ap-hero {
		padding-top: clamp(2rem, 1rem + 2vw, 3.5rem);
	}

	.ap-hero__rejilla {
		grid-template-areas:
			"cabeza titulares"
			"paisaje paisaje";
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: end;
		column-gap: clamp(2rem, 1rem + 3vw, 4rem);
	}

	/*
	 * El paisaje ocupa lo que queda de la primera pantalla. Sube un 29 % sobre la fila de arriba,
	 * lo justo para que la torre y el monumento no toquen el texto; el 71 % restante tiene que caber
	 * bajo esa fila. 33rem es lo que miden la cabecera del sitio, el aire de arriba y los titulares;
	 * con sesión iniciada también se descuenta la barra de WordPress.
	 */
	.ap-hero__paisaje {
		--alto: clamp(18rem, min(40vw, (100svh - 33rem - var(--wp-admin--admin-bar--height, 0px)) / 0.71), 48rem);
		--u: calc(var(--alto) / 300);
		margin-top: calc(var(--alto) * -0.29);
	}

	.ap-hero__escena {
		height: var(--alto);
		max-height: none;
	}

	.ap-hero__titulares {
		margin-inline: 0;
		padding: 0.5rem 1.25rem;
		border-radius: var(--ap-radio);
	}

	.ap-hero__titular a {
		padding-block: 0.65rem;
		font-size: clamp(1rem, 0.7rem + 0.5vw, 1.15rem);
	}
}

/* Pasar el cursor por un titular mueve su flor. */
.ap-hero:has(.ap-hero__titular:nth-child(1) a:is(:hover, :focus-visible)) .ap-hero__flor:nth-of-type(1) .ap-hero__cabezal,
.ap-hero:has(.ap-hero__titular:nth-child(2) a:is(:hover, :focus-visible)) .ap-hero__flor:nth-of-type(2) .ap-hero__cabezal,
.ap-hero:has(.ap-hero__titular:nth-child(3) a:is(:hover, :focus-visible)) .ap-hero__flor:nth-of-type(3) .ap-hero__cabezal,
.ap-hero:has(.ap-hero__titular:nth-child(4) a:is(:hover, :focus-visible)) .ap-hero__flor:nth-of-type(4) .ap-hero__cabezal,
.ap-hero:has(.ap-hero__titular:nth-child(5) a:is(:hover, :focus-visible)) .ap-hero__flor:nth-of-type(5) .ap-hero__cabezal {
	rotate: 14deg;
	scale: 1.14;
}

/* ---------- Nosotros: franja celeste con los temas ---------- */

.ap-nosotros__franja {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	background: var(--ap-celeste);
	color: var(--ap-tinta);
}

.ap-nosotros__titulo {
	margin-top: 0.4rem;
	font-size: clamp(3rem, 1.8rem + 6vw, 6rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.ap-nosotros__subtitulo {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-size: var(--ap-t-1);
}

.ap-nosotros__temas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr));
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.ap-nosotros__temas a {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	padding: 1.25rem 0.75rem 1rem;
	border-radius: var(--ap-radio);
	background: var(--ap-papel);
	color: var(--ap-tinta);
	font-family: var(--ap-fuente-titulos);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: transform var(--ap-rapido) var(--ap-curva);
}

.ap-nosotros__temas a:hover {
	transform: translateY(-3px);
}

.ap-nosotros__temas a:hover .ap-nosotros__flor {
	rotate: 14deg;
	scale: 1.1;
}

.ap-nosotros__flor {
	width: 3rem;
	height: 3rem;
	color: var(--ap-tinta);
	transition: rotate 400ms var(--ap-curva), scale 400ms var(--ap-curva);
	--ap-flor-trazo: 2.4;
	--ap-flor-relleno: var(--ap-magenta);
}

.ap-nosotros__temas li:nth-child(even) .ap-nosotros__flor:not(.ap-flor--fruta) {
	--ap-flor-relleno: var(--ap-celeste);
}

.ap-nosotros__texto {
	padding-top: clamp(2rem, 1.5rem + 3vw, 4rem);
}

/* ---------- Franja "Comparte tu historia": flores que brotan de un globo ---------- */

.ap-cta__dibujo {
	grid-area: dibujo;
	justify-self: center;
	width: min(100%, 24rem);
}

.ap-cta__dibujo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	stroke: var(--ap-tinta);
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.ap-cta__tallo {
	stroke-width: 2.6;
}

.ap-cta__corola {
	stroke-width: 2.4;
	fill: var(--ap-papel);
}

.ap-cta__flor:nth-child(even) .ap-cta__corola {
	fill: var(--ap-celeste);
}

.ap-cta__globo {
	fill: var(--ap-papel);
	stroke-width: 3;
}

.ap-cta__globo-texto {
	fill: var(--ap-magenta-oscuro);
	stroke: none;
	font-family: var(--ap-fuente-titulos);
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ap-cta__cabezal {
	transition: rotate 400ms var(--ap-curva), scale 400ms var(--ap-curva);
}

.ap-cta:has(.ap-cta__boton:is(:hover, :focus-visible)) .ap-cta__cabezal {
	rotate: 12deg;
	scale: 1.1;
}

@media (min-width: 56rem) {
	.ap-cta__dibujo {
		width: min(100%, 30rem);
	}
}

/* ---------- Franja magenta (ranking) ---------- */

.ap-franja--magenta {
	background: var(--ap-magenta-fondo);
	color: var(--ap-papel);
}

.ap-franja--magenta a {
	color: var(--ap-papel);
}

.ap-franja--magenta .ap-ranking__item {
	border-top-color: color-mix(in oklch, var(--ap-papel) 35%, transparent);
}

.ap-franja--magenta .ap-seccion__mas {
	text-decoration-color: var(--ap-papel);
}

@media (min-width: 56rem) {
	.ap-franja--magenta .ap-ranking {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 3rem;
	}
}

/* ---------- Mano del logo ---------- */

.ap-logo svg {
	width: auto;
	height: 2.6rem;
	overflow: visible;
}

.ap-logo__mano {
	transform-box: fill-box;
	transform-origin: 45% 100%;
}

@media (min-width: 56rem) {
	.ap-logo svg {
		height: 3rem;
	}
}

/* ---------- Pétalos al compartir ---------- */

.ap-petalo {
	position: fixed;
	z-index: 50;
	width: 0.9rem;
	height: 1.4rem;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	pointer-events: none;
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
	/*
	 * Hero. Entrada: amanece detrás del Tungurahua, la ciudad se dibuja de lejos a cerca y al final
	 * crecen las flores y caen las frutas. Después solo se mueve el cielo: rayos, nubes y humo van
	 * sueltos de la escena, así el dibujo no se repinta. sitio.js los pausa fuera de pantalla.
	 */
	.ap-hero .ap-trazo,
	.ap-hero .ap-pintar,
	.ap-hero .ap-trazo-grupo {
		stroke-dasharray: 1 2;
		stroke-dashoffset: 1.02;
		animation: ap-trazar var(--dur, 1.1s) var(--ap-curva) var(--d, 0s) both;
	}

	.ap-hero .ap-pintar,
	.ap-hero .ap-trazo-grupo {
		animation:
			ap-trazar var(--dur, 1.1s) var(--ap-curva) var(--d, 0s) both,
			ap-colorear 0.6s ease-out calc(var(--d, 0s) + var(--dur, 1.1s) * 0.7) both;
	}

	.ap-hero__flor .ap-trazo {
		--dur: 0.7s;
	}

	.ap-hero .ap-hero__volcan {
		animation:
			ap-trazar 1.6s var(--ap-curva) both,
			ap-colorear 0.8s ease-out 1.1s both;
	}

	.ap-hero__cordillera,
	.ap-hero__colina,
	.ap-hero__nieve {
		animation: ap-colorear 0.8s ease-out 0.4s both;
	}

	.ap-hero__nieve {
		animation-delay: 1.3s;
	}

	.ap-hero .ap-hero__hojita {
		animation:
			ap-trazar 0.7s var(--ap-curva) calc(var(--d) + 0.3s) both,
			ap-colorear 0.4s ease-out calc(var(--d) + 0.7s) both;
	}

	.ap-hero__cabezal {
		animation: ap-abrir 0.9s var(--ap-curva) calc(var(--d) + 0.45s) both;
	}

	.ap-hero__corola {
		stroke-dasharray: 1 2;
		animation:
			ap-trazar 0.8s var(--ap-curva) calc(var(--d) + 0.45s) both,
			ap-colorear 0.6s ease-out calc(var(--d) + 0.95s) both;
	}

	.ap-hero__fruta {
		animation: ap-caer 0.6s var(--ap-curva) calc(2.3s + var(--i) * 0.09s) both;
	}

	/* El sol sale de atrás del volcán y le da su destello al monumento. */
	.ap-hero__sol {
		animation: ap-salir 2.6s var(--ap-curva) both;
	}

	.ap-hero__destello {
		animation: ap-destello 1.1s ease-out 2.5s both;
	}

	/* Antes de que salga el sol, el horizonte está rosado. */
	.ap-hero__amanecer {
		display: block;
		position: absolute;
		inset: -30% 0 0;
		background: linear-gradient(to top, color-mix(in srgb, var(--ap-magenta) 72%, var(--ap-papel)), color-mix(in srgb, var(--ap-magenta) 22%, var(--ap-papel)) 45%, transparent 85%);
		animation: ap-clarear 2.8s ease-out 0.2s both;
		pointer-events: none;
	}

	/* Lo único que sigue en movimiento: constante y lento, por eso lineal. */
	.ap-hero__rayos {
		animation: ap-girar 48s linear infinite;
	}

	.ap-hero__nube {
		left: 0;
		animation: ap-cruzar var(--vuelta) linear var(--desde) infinite;
	}

	.ap-hero__nube--1 {
		--vuelta: 150s;
		--desde: -24s;
	}

	.ap-hero__nube--2 {
		--vuelta: 210s;
		--desde: -128s;
	}

	.ap-hero__nube--3 {
		--vuelta: 270s;
		--desde: -105s;
	}

	.ap-hero__humo {
		animation: ap-mecer 11s ease-in-out infinite alternate;
	}

	.ap-hero--quieto :is(.ap-hero__rayos, .ap-hero__nube, .ap-hero__humo) {
		animation-play-state: paused;
	}

	.ap-hero__titular {
		animation: ap-aparecer 0.6s var(--ap-curva) calc(var(--d) + 0.2s) both;
	}

	.ap-hero__cabeza > * {
		animation: ap-aparecer 0.7s var(--ap-curva) both;
	}

	/* El titular es lo primero que mide Google: visible desde el primer instante, solo se desliza. */
	.ap-hero__titulo {
		animation-name: ap-asomar;
	}

	.ap-hero__bajada {
		animation-delay: 0.16s;
	}

	/* Nosotros: las flores de los temas se dibujan una tras otra. */
	.ap-nosotros__flor {
		stroke-dasharray: 1 2;
		animation:
			ap-trazar 0.9s var(--ap-curva) calc(0.15s + var(--i, 0) * 0.12s) both,
			ap-colorear 0.5s ease-out calc(0.75s + var(--i, 0) * 0.12s) both;
	}

	.ap-nosotros__temas li {
		animation: ap-aparecer 0.6s var(--ap-curva) calc(var(--i, 0) * 0.08s) both;
	}

	/* Al enviar una historia, la flor del agradecimiento se dibuja y se pinta. */
	.ap-formulario__gracias .ap-formulario__flor {
		stroke-dasharray: 1 2;
		animation:
			ap-trazar 1s var(--ap-curva) 0.2s both,
			ap-colorear 0.5s ease-out 0.9s both;
	}

	/* La mano del logo saluda al llegar al home y al pasar el cursor (no en cada página: cansaría). */
	.home .ap-logo__mano {
		animation: ap-saludar 1.1s var(--ap-curva) 0.4s both;
	}

	.ap-logo:hover .ap-logo__mano {
		animation-name: ap-saludar-otra-vez;
		animation-delay: 0s;
	}

	/* Al cambiar de página, la foto viaja de la tarjeta a la nota. */
	@view-transition {
		navigation: auto;
	}

	::view-transition-group(*) {
		animation-duration: 420ms;
		animation-timing-function: var(--ap-curva);
	}

	/*
	 * Volver al home en la misma pestaña (atrás, logo, menú) no repite el dibujo: el hero aparece
	 * ya florecido, con el cielo andando. Recargar la página sí lo repite. La clase la pone enqueue.php.
	 */
	.ap-florecio :is(.ap-hero__cabeza > *, .ap-hero__titular, .ap-hero__escena *, .ap-hero__humo path, .ap-hero__sol, .ap-hero__amanecer, .ap-logo:not(:hover) .ap-logo__mano) {
		animation-duration: 0s !important;
		animation-delay: 0s !important;
	}
}

/* Lo que depende del scroll: solo si el navegador sabe animar con él. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* El paisaje se hunde un poco al bajar: las flores dan paso a las noticias. */
		.ap-hero__paisaje {
			animation: ap-hundir linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}

		/* Las flores de los títulos se dibujan cuando el título entra en pantalla. */
		.ap-titulo-flor__flor {
			stroke-dasharray: 1 2;
			animation: ap-trazar linear both, ap-colorear linear both;
			animation-timeline: view(), view();
			animation-range: entry 20% cover 40%, cover 35% cover 45%;
		}

		/*
		 * Las flores de "Comparte tu historia" brotan del globo cuando el dibujo entra en pantalla.
		 * La línea de tiempo se nombra en el contenedor: las piezas de dentro del SVG no tienen caja propia.
		 */
		.ap-cta__dibujo {
			view-timeline-name: --ap-cta;
		}

		.ap-cta__dibujo .ap-trazo {
			stroke-dasharray: 1 2;
			animation: ap-trazar linear both;
			animation-timeline: --ap-cta;
			animation-range: entry calc(10% + var(--i) * 6%) cover calc(30% + var(--i) * 4%);
		}

		.ap-cta__cabezal {
			animation: ap-abrir linear both;
			animation-timeline: --ap-cta;
			animation-range: entry calc(30% + var(--i) * 6%) cover calc(40% + var(--i) * 4%);
		}

		.ap-cta__globo {
			animation: ap-subir linear both;
			animation-timeline: --ap-cta;
			animation-range: entry 0% entry 60%;
		}

		/* Los títulos de sección se engrosan, como si se pintaran. */
		.ap-seccion__titulo {
			animation: ap-engrosar linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 40%;
		}

		/* Las noticias suben al aparecer. */
		.ap-principal-nota,
		.ap-fila,
		.ap-doc,
		.ap-ranking__item {
			animation: ap-subir linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}
}

/* Parte de 1.02 y no de 1: con puntas redondas, un guion de largo cero se ve como un punto. */
@keyframes ap-trazar {
	from {
		stroke-dashoffset: 1.02;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ap-colorear {
	from {
		fill-opacity: 0;
	}
}

@keyframes ap-abrir {
	from {
		opacity: 0;
		transform: scale(0.25) rotate(-35deg);
	}
}

@keyframes ap-aparecer {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}
}

@keyframes ap-asomar {
	from {
		transform: translateY(0.6rem);
	}
}

@keyframes ap-subir {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

@keyframes ap-engrosar {
	from {
		font-weight: 500;
	}
	to {
		font-weight: 800;
	}
}

@keyframes ap-hundir {
	to {
		transform: translateY(14%);
	}
}

@keyframes ap-salir {
	from {
		transform: translate(-50%, 50%) translateY(calc(70 * var(--u)));
	}
}

@keyframes ap-clarear {
	to {
		opacity: 0;
	}
}

@keyframes ap-girar {
	to {
		transform: translate(-50%, 50%) rotate(18deg);
	}
}

@keyframes ap-cruzar {
	from {
		transform: translateX(-110%);
	}
	to {
		transform: translateX(100vw);
	}
}

@keyframes ap-mecer {
	from {
		transform: skewX(-2.5deg);
	}
	to {
		transform: skewX(3.5deg);
	}
}

@keyframes ap-caer {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
}

@keyframes ap-destello {
	0% {
		opacity: 0;
		transform: scale(0.4) rotate(-30deg);
	}
	45% {
		opacity: 1;
		transform: scale(1) rotate(10deg);
	}
	100% {
		opacity: 0;
		transform: scale(0.5) rotate(30deg);
	}
}

@keyframes ap-saludar {
	0% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(-14deg);
	}
	50% {
		transform: rotate(10deg);
	}
	75% {
		transform: rotate(-6deg);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes ap-saludar-otra-vez {
	0% {
		transform: rotate(0);
	}
	30% {
		transform: rotate(-12deg);
	}
	65% {
		transform: rotate(8deg);
	}
	100% {
		transform: rotate(0);
	}
}