/* =============================================================================
   Nota de Transparencia: Código generado/refactorizado con asistencia de IA
   Generativa (Claude Code) bajo la Política ODTI012 del CCS. Requiere
   supervisión y validación humana permanente.

   ARISE - Movimiento e interacción del sitio.

   Complementa a AOS, que resuelve la aparición al hacer scroll. Aquí va lo que
   AOS no cubre: la entrada de la página, el comportamiento de los enlaces del
   menú, los botones y las imágenes al pasar el cursor.

   Regla que se respeta en todo el archivo: la animación acompaña una acción o
   una llegada de contenido, nunca se mueve por decorar. Todo se apaga cuando
   el visitante pide movimiento reducido.
   ============================================================================= */

/* ---------- Entrada de página --------------------------------------------- */

/* Suaviza el corte seco entre navegaciones. Es corto a propósito: por encima
   de ~350 ms la transición deja de leerse como fluidez y empieza a leerse
   como demora. */
@keyframes arise-entrada {
	from { opacity: 0; transform: translate3d(0, 8px, 0); }
	to   { opacity: 1; transform: none; }
}

body.pagina-entra {
	animation: arise-entrada 320ms cubic-bezier(.22, .61, .36, 1) both;
}

/* ---------- Menú ----------------------------------------------------------- */

.nav-link {
	position: relative;
	transition: color 180ms ease;
}

/* Subrayado que crece desde el centro al pasar el cursor. Se anima solo
   transform, que el navegador resuelve en la GPU sin recalcular el diseño. */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: #ffa800;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
}

.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

.nav-link.esta-activo::after { transform: scaleX(1); }

/* ---------- Botones -------------------------------------------------------- */

.btn-border,
.btn-home,
.btn-page,
.btn-page_orange,
.btn-light,
.boton {
	transition: transform 180ms cubic-bezier(.22, .61, .36, 1),
	            box-shadow 180ms ease,
	            background-color 180ms ease,
	            border-color 180ms ease,
	            color 180ms ease;
	will-change: transform;
}

.btn-border:hover,
.btn-home:hover,
.btn-page:hover,
.btn-page_orange:hover,
.btn-light:hover,
.boton:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(31, 33, 36, .16);
}

/* Respuesta al presionar: confirma el toque en pantallas táctiles, donde no
   existe el hover. */
.btn-border:active,
.btn-home:active,
.btn-page:active,
.btn-page_orange:active,
.btn-light:active,
.boton:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(31, 33, 36, .18);
}

/* ---------- Enlaces del pie ------------------------------------------------ */

.back_footer a,
.footer a {
	transition: opacity 180ms ease, transform 180ms ease;
	display: inline-block;
}

.back_footer a:hover,
.footer a:hover { opacity: .75; transform: translateY(-1px); }

/* ---------- Ajuste sobre AOS ----------------------------------------------- */

/* AOS trae 400 ms; 650 ms con esta curva se siente más asentado para bloques
   grandes de contenido institucional. */
[data-aos] {
	transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Preferencia de movimiento reducido ----------------------------- */

/* Cuando el sistema operativo pide menos movimiento, no se negocia: se apaga
   todo, incluida la entrada de página. */
@media (prefers-reduced-motion: reduce) {
	body.pagina-entra { animation: none; }

	.nav-link::after,
	.btn-border, .btn-home, .btn-page, .btn-page_orange, .btn-light, .boton,
	.back_footer a, .footer a {
		transition: none !important;
	}

	.btn-border:hover, .btn-home:hover, .btn-page:hover,
	.btn-page_orange:hover, .btn-light:hover, .boton:hover,
	.back_footer a:hover, .footer a:hover {
		transform: none !important;
	}

	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Misma desactivación cuando el JavaScript detecta la preferencia y marca el
   body, por si el navegador no soporta la media query. */
body.sin-movimiento [data-aos] {
	opacity: 1 !important;
	transform: none !important;
}