/* =========================================================================
   LATITUD CERO — motion.css
   Movimiento con propósito. Todo se apaga con prefers-reduced-motion.
   Vocabulario: la línea se dibuja, los grados aparecen, el texto sube
   desde la línea, los anillos se cruzan.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base del sistema de revelado
   El elemento arranca desplazado y en reposo; .is-in lo coloca.
   Si el JS no carga, .no-js deja todo visible (ver functions.php).
   ------------------------------------------------------------------------- */

.lat-reveal {
	--lat-reveal-y: 1.35rem;
	--lat-reveal-dur: var(--lat-dur);
	--lat-reveal-delay: 0ms;

	opacity: 0;
	transform: translate3d(0, var(--lat-reveal-y), 0);
	transition:
		opacity var(--lat-reveal-dur) var(--lat-ease-out) var(--lat-reveal-delay),
		transform var(--lat-reveal-dur) var(--lat-ease-out) var(--lat-reveal-delay);
	will-change: opacity, transform;
}

.lat-reveal.is-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* Variantes ------------------------------------------------------- */

/* Desde la izquierda, como si la línea fuera arrastrándola */
.lat-reveal--from-left {
	--lat-reveal-y: 0;
	transform: translate3d(-1.5rem, 0, 0);
}

.lat-reveal--from-right {
	--lat-reveal-y: 0;
	transform: translate3d(1.5rem, 0, 0);
}

/* Sin desplazamiento: solo opacidad (texto de cuerpo) */
.lat-reveal--fade {
	--lat-reveal-y: 0;
}

/* Escala suave para las marcas */
.lat-reveal--scale {
	--lat-reveal-y: 0;
	transform: scale(0.9);
}

/* Barrido desde la línea inferior: el ocre revela el bloque */
.lat-reveal--wipe::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: 2px;
	background-color: var(--lat-ochre, #e0a93b);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms var(--lat-ease-out) 120ms;
}

.lat-reveal--wipe.is-in::before {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   2. Título del hero — palabras que emergen desde la línea
   ------------------------------------------------------------------------- */

.lat-hero__title {
	margin: 0;
}

.lat-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-block-end: 0.06em;
	margin-block-end: -0.06em;
}

.lat-hero__word > span {
	display: inline-block;
	transform: translate3d(0, 105%, 0);
	transition: transform 900ms var(--lat-ease-out);
	transition-delay: var(--lat-word-delay, 0ms);
}

.is-in .lat-hero__word > span,
.lat-hero__title.is-in .lat-hero__word > span {
	transform: translate3d(0, 0, 0);
}

.lat-hero__word--accent > span {
	color: var(--lat-ochre, #e0a93b);
}

/* -------------------------------------------------------------------------
   3. La línea de latitud se dibuja
   ------------------------------------------------------------------------- */

.lat-scale__line,
.lat-scale__tick {
	stroke-dasharray: var(--lat-dash, 2000);
	stroke-dashoffset: var(--lat-dash, 2000);
}

.lat-scale.is-in .lat-scale__line,
.lat-scale.is-in .lat-scale__tick {
	animation: lat-draw 1500ms var(--lat-ease-out) forwards;
	animation-delay: var(--lat-draw-delay, 0ms);
}

.lat-scale__label,
.lat-scale__caption,
.lat-scale__name {
	opacity: 0;
	transition: opacity 520ms var(--lat-ease-out) var(--lat-label-delay, 0ms);
}

.lat-scale.is-in .lat-scale__label,
.lat-scale.is-in .lat-scale__caption,
.lat-scale.is-in .lat-scale__name {
	opacity: revert;
}

.lat-scale__label--zero {
	opacity: 0;
}

.lat-scale.is-in .lat-scale__label--zero {
	opacity: 1;
	animation: lat-pulse-zero 2600ms var(--lat-ease-inout) 1400ms infinite;
}

@keyframes lat-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes lat-pulse-zero {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.52;
	}
}

/* Regla simple (separadores): se despliega desde la izquierda */
.lat-rule__line {
	transform: scaleX(var(--lat-rule-scale, 1));
	transform-origin: left center;
	transition: transform 780ms var(--lat-ease-out) var(--lat-rule-delay, 0ms);
}

.lat-rule.is-in .lat-rule__line {
	--lat-rule-scale: 1;
}

/* -------------------------------------------------------------------------
   4. Anillos que se cruzan
   ------------------------------------------------------------------------- */

.lat-orbits__ring {
	transform: scale(var(--lat-ring-scale, 1));
	transform-origin: center;
}

.lat-orbits--draw .lat-orbits__ring {
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	animation: lat-draw 1100ms var(--lat-ease-out) forwards;
}

.lat-orbits--draw .lat-orbits__ring:nth-of-type(2) {
	animation-delay: 180ms;
}

.lat-orbits--draw .lat-orbits__lens {
	animation: lat-lens 700ms var(--lat-ease-out) 900ms backwards;
}

@keyframes lat-lens {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 0.9;
		transform: scale(1);
	}
}

/* -------------------------------------------------------------------------
   5. Contadores de pasos
   ------------------------------------------------------------------------- */

.lat-step {
	opacity: 0;
	transform: translate3d(0, 1.1rem, 0);
	transition:
		opacity 560ms var(--lat-ease-out) var(--lat-step-delay, 0ms),
		transform 560ms var(--lat-ease-out) var(--lat-step-delay, 0ms);
}

.lat-step.is-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* -------------------------------------------------------------------------
   6. Barra de progreso de lectura (una latitud que avanza)
   ------------------------------------------------------------------------- */

.lat-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	z-index: 600;
	background-color: transparent;
	pointer-events: none;
}

.lat-progress__bar {
	block-size: 100%;
	background-color: var(--lat-clay, #a8482a);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 90ms linear;
}

.lat-progress__zero {
	position: absolute;
	inset-block-start: -3px;
	inline-size: 1px;
	block-size: 8px;
	background-color: var(--lat-ochre, #e0a93b);
	transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
   7. Pulso sutil en el botón de acción principal
   Solo en pantallas grandes y sin movimiento reducido: no distrae.
   ------------------------------------------------------------------------- */

@media (min-width: 68em) {
	.lat-btn--pulse::after {
		content: "";
		position: absolute;
		inset: -1px;
		border: 1px solid var(--lat-clay, #a8482a);
		border-radius: inherit;
		opacity: 0;
		pointer-events: none;
		animation: lat-pulse-ring 3200ms var(--lat-ease-out) infinite;
	}
}

@keyframes lat-pulse-ring {
	0% {
		opacity: 0.5;
		transform: scale(1);
	}
	70%,
	100% {
		opacity: 0;
		transform: scale(1.07);
	}
}

/* -------------------------------------------------------------------------
   8. Enlace con subrayado que barre
   ------------------------------------------------------------------------- */

.lat-link-sweep {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(var(--lat-clay, #a8482a), var(--lat-clay, #a8482a));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--lat-dur) var(--lat-ease-out), color var(--lat-dur-fast) var(--lat-ease-out);
}

.lat-link-sweep:hover,
.lat-link-sweep:focus-visible {
	background-size: 100% 1px;
	color: var(--lat-clay, #a8482a);
}

/* -------------------------------------------------------------------------
   9. Enlace de WhatsApp: barrido verde
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   10. RESPETA A QUIEN PIDIÓ MENOS MOVIMIENTO
   Esta es la parte más importante del archivo. Nada de lo anterior se
   ejecuta si el usuario pidió menos movimiento.
   ------------------------------------------------------------------------- */

@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;
		scroll-behavior: auto !important;
	}

	/* Todo visible, en su sitio, sin transformaciones heredadas */
	.lat-reveal,
	.lat-step,
	.lat-hero__word > span {
		opacity: 1 !important;
		transform: none !important;
	}

	/* La línea aparece completa, sin animarse */
	.lat-scale__line,
	.lat-scale__tick {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}

	.lat-scale__label,
	.lat-scale__caption,
	.lat-scale__name,
	.lat-scale__label--zero {
		opacity: revert !important;
		animation: none !important;
	}

	.lat-orbits--draw .lat-orbits__ring {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}

	.lat-orbits--draw .lat-orbits__lens {
		animation: none !important;
	}

	.lat-reveal--wipe::before {
		transform: scaleX(1);
		transition: none;
	}

	.lat-btn--pulse::after {
		animation: none !important;
		opacity: 0 !important;
	}

	.lat-progress__bar {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   11. Impresión: el papel no se mueve
   ------------------------------------------------------------------------- */

@media print {
	.lat-reveal,
	.lat-step,
	.lat-hero__word > span {
		opacity: 1 !important;
		transform: none !important;
	}

	.lat-drawer,
	.lat-to-top,
	.lat-progress,
	.lat-burger,
	body::before {
		display: none !important;
	}
}