/*
 * Interacciones
 * ---------------------------------------------------------------------------
 * Lo que responde a la mano en las piezas de las últimas tandas —Propuesta,
 * Vida Sanjo, Infraestructura, Admisión y Contacto— y, sobre todo, **la
 * respuesta al pulsar**, que no tenía ninguna sección: se pasaba el cursor y
 * algo se movía, pero al hacer clic no pasaba nada y el sitio se sentía duro.
 *
 * Sigue las reglas de « animaciones-paginas », que es de donde salen la curva,
 * las sombras y el fundido de los paneles:
 *
 * - **Se levanta lo que se puede pulsar.** Una caja informativa que reacciona
 *   como un botón promete algo que no va a pasar. Por eso las tarjetas usan
 *   « :has( a ) »: si dentro hay un enlace, se levanta; si no, solo se marca el
 *   canto con una sombra corta.
 * - **Nada que sostenga la maqueta se mueve.** Los peldaños de la escalera y
 *   los tramos de la línea de etapas se apoyan unos en otros y su alto sale de
 *   « --sjo-i »: levantarlos rompe el dibujo. Se quedan fuera a propósito.
 * - **Cada pulsación se nota.** Un « :active » que hunde la pieza es la
 *   diferencia entre un botón y el dibujo de un botón.
 * - **El foco se ve.** Todo lo pulsable del cuerpo comparte un mismo anillo,
 *   azul sobre claro y blanco sobre azul.
 * - **« prefers-reduced-motion » manda.** Al final se apaga el movimiento; los
 *   colores y las sombras se quedan, que son los que dicen qué está activo.
 *
 * Va al final de la cola, después de « formularios »: aquí se reclama el
 * « :active » de piezas que las hojas de cada familia ya han vestido, y algún
 * « transform » que solo gana por orden de aparición.
 */

.sjo-s,
.sjo-cta,
.sjo-p {
	/* Las mismas de « animaciones-paginas », repetidas para que la hoja
	   funcione sola si un día cambia el orden de la cola. */
	--sjo-fx-curva: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--sjo-fx-sombra: 0 18px 32px rgba( 0, 26, 56, 0.16 );
	--sjo-fx-sombra-corta: 0 10px 18px rgba( 0, 26, 56, 0.12 );
	--sjo-fx-anillo: 0 0 0 3px rgba( 0, 64, 120, 0.22 );
}

/* ---------------------------------------------------------------------------
 * Las tarjetas nuevas
 *
 * Tres cajas con fondo propio y la forma de la familia. La de «Dos campus»
 * lleva a veces un teléfono o una página: cuando lo lleva se levanta, y cuando
 * no —la ficha de datos de Contacto— se queda quieta.
 * ------------------------------------------------------------------------ */

.sjo-s__sede,
.sjo-s__paso-tarjeta,
.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio {
	transition: transform 0.35s var( --sjo-fx-curva ), box-shadow 0.35s var( --sjo-fx-curva );
}

.sjo-s__sede:has( a ):hover {
	transform: translateY( -6px );
	box-shadow: var( --sjo-fx-sombra );
}

.sjo-s__sede:has( a ):active {
	transform: translateY( -2px );
	box-shadow: var( --sjo-fx-sombra-corta );
}

/* Sin enlace dentro no se mueven: levantan el canto, que basta para decir
   «esto es una pieza» sin prometer un clic que no existe. */
.sjo-s__paso-tarjeta:hover,
.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio:hover {
	box-shadow: var( --sjo-fx-sombra-corta );
}

/* El numeral crece un punto con su tarjeta: es el gesto que ya hacen los de las
   fichas de «Nosotros». */
.sjo-s__espacio-num,
.sjo-s__paso-cifra {
	transition: transform 0.35s var( --sjo-fx-curva );
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio:hover .sjo-s__espacio-num,
.sjo-s__paso-tarjeta:hover .sjo-s__paso-cifra {
	transform: scale( 1.08 );
}

/* Las baldosas de Vida Sanjo ya crecen al señalarlas —« vida.css »—. Lo que
   falta es el cierre del gesto: al pulsar vuelven casi a su sitio, y la
   diferencia entre el 1.02 del cursor y esto se lee como un botón que cede. */
.sjo-s__tesela:active,
.sjo-s__baldosa:active {
	transform: scale( 1.005 );
}

/* ---------------------------------------------------------------------------
 * Los botones
 *
 * El cambio de color y el desplazamiento de la flecha ya están en el UI Kit.
 * Falta la pulsación: sin ella, un botón que abre un diálogo o envía un
 * formulario no da ninguna señal de haber recibido el clic, y en una conexión
 * lenta el visitante vuelve a pulsar.
 * ------------------------------------------------------------------------ */

.sjo-s .sjo-p__boton,
.sjo-cta .sjo-p__boton,
.sjo-s__form-tarjeta .forminator-button-submit {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.18s ease, box-shadow 0.3s var( --sjo-fx-curva );
}

.sjo-s .sjo-p__boton:hover,
.sjo-cta .sjo-p__boton:hover {
	box-shadow: var( --sjo-fx-sombra-corta );
}

.sjo-s .sjo-p__boton:active,
.sjo-cta .sjo-p__boton:active,
.sjo-s__form-tarjeta .forminator-button-submit:active {
	transform: scale( 0.97 );
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Lo que se elige: pestañas y paradas
 *
 * Los chips del visor, las categorías de las preguntas y las asignaturas del
 * explorador son « role="tab" », y el guion les pone « es-activa ». Comparten
 * el gesto: un empujón corto al señalar y un hundido al pulsar. La que ya está
 * elegida no se mueve —moverla sugiere que aún se puede elegir—.
 * ------------------------------------------------------------------------ */

.sjo-s__visor-chip,
.sjo-s__categoria,
.sjo-s__asignatura,
.sjo-s__parada {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.25s var( --sjo-fx-curva );
}

.sjo-s__visor-chip:hover,
.sjo-s__categoria:hover,
.sjo-s__asignatura:hover {
	transform: translateY( -2px );
}

.sjo-s__visor-chip.es-activa:hover,
.sjo-s__categoria.es-activa:hover,
.sjo-s__asignatura.es-activa:hover {
	transform: none;
}

.sjo-s__visor-chip:active,
.sjo-s__categoria:active,
.sjo-s__asignatura:active,
.sjo-s--recorrido.es-con-detalle .sjo-s__parada:active {
	transform: scale( 0.97 );
}

/* En el recorrido de Admisión lo que reacciona es el nodo, no la fila: el
   nombre de la parada es su etiqueta y moverlo desalinea la línea del tiempo.
   El rebote corto del final de la curva es lo que hace que el nodo parezca
   engancharse al cursor. */
.sjo-s--recorrido.es-con-detalle .sjo-s__parada .sjo-s__parada-nodo {
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), background-color 0.25s ease,
		border-color 0.25s ease, color 0.25s ease;
}

.sjo-s--recorrido.es-con-detalle .sjo-s__parada:hover .sjo-s__parada-nodo {
	transform: scale( 1.12 );
}

/* ---------------------------------------------------------------------------
 * Los acordeones
 *
 * La cabecera entera es el mando, así que se entibia al señalarla y el signo
 * gira un cuarto de vuelta anunciando lo que va a pasar. Abierto ya es una
 * raya: girarlo otra vez no diría nada.
 * ------------------------------------------------------------------------ */

.sjo-s__pregunta-cabeza {
	transition: background-color 0.25s ease;
}

.sjo-s__pregunta-cabeza:hover {
	background-color: rgba( 0, 64, 120, 0.04 );
}

.sjo-s__pregunta-signo {
	transition: transform 0.3s var( --sjo-fx-curva );
}

.sjo-s__pregunta:not( .es-abierto ) .sjo-s__pregunta-cabeza:hover .sjo-s__pregunta-signo {
	transform: rotate( 90deg );
}

/* ---------------------------------------------------------------------------
 * Los paneles que entran
 *
 * Cambiar de pestaña o abrir una pregunta cambiaba el contenido de golpe. Con
 * el fundido se entiende que lo que aparece es **lo mismo visto de otra
 * manera** y no una página nueva.
 *
 * Se anima el panel que está a la vista. El guion le pone « es-activo » al
 * abrirlo, así que la animación arranca ahí sola, sin que nadie tenga que
 * avisar. « sjo-fx-panel » es el de « animaciones-paginas »: fundido y ocho
 * píxeles, el mismo que ya usan las pestañas de «Equipos».
 * ------------------------------------------------------------------------ */

.sjo-s__vista.es-activo,
.sjo-s__preguntas.es-activo,
.sjo-s__paso-panel.es-activo {
	animation: sjo-fx-panel 0.35s ease both;
}

/* El acordeón se despliega desde su cabecera, hacia abajo. */
.sjo-s__pregunta.es-abierto .sjo-s__respuesta,
.sjo-s__frente.es-abierto .sjo-s__frente-panel {
	animation: sjo-fx-desplegar 0.4s var( --sjo-fx-curva ) both;
}

@keyframes sjo-fx-desplegar {
	from {
		opacity: 0;
		transform: translateY( -6px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Las fotografías nuevas
 *
 * Se acercan dentro de su marco, como las de «Nosotros». Solo las que están en
 * una caja con « overflow: hidden »: una fotografía que crece sin recorte se
 * sale por las esquinas y deja ver el canto recto.
 *
 * Quedan fuera las baldosas de Vida Sanjo: sus fotografías ya llevan un
 * « scale( 1.04 ) » fijo para esconder los picos transparentes del PNG, y
 * moverlas los devolvería a la vista.
 * ------------------------------------------------------------------------ */

.sjo-s--campus .sjo-s__campus-foto img,
.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto img,
.sjo-s__tour-medio img,
.sjo-s__vista-medio img {
	transition: transform 0.6s var( --sjo-fx-curva );
}

.sjo-s--campus .sjo-s__campus-foto:hover img,
.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto:hover img,
.sjo-s__tour-medio:hover img {
	transform: scale( 1.04 );
}

/* En el visor, la panorámica se acerca cuando el cursor está sobre el botón que
   abre el recorrido —no en cualquier parte del panel—. Cuando no hay recorrido
   enlazado el botón es « es-adorno », un « span », y aquí no entra: un adorno
   que reacciona miente. */
.sjo-s__vista:has( a.sjo-s__vista-boton:hover ) .sjo-s__vista-medio img {
	transform: scale( 1.04 );
}

/* La insignia del Tour 360: el gesto de «entra aquí».
 *
 * Crece por « --sjo-i-crece » y no con un « transform » propio, que es la
 * trampa que costó medirlo: la insignia va centrada con
 * « translate( -50%, -50% ) » en escritorio y con « translateY( 50% ) » cuando
 * el panel se apila, así que un « transform: scale() » de aquí le borraría el
 * centrado y la mandaría a la esquina. La variable se multiplica dentro del
 * « transform » que cada uno ya tiene —« infraestructura.css »—, y la
 * transición sigue siendo de « transform »: el cambio de la variable la
 * dispara igual. */
.sjo-s__tour-insignia {
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.sjo-s__tour-medio:hover .sjo-s__tour-insignia {
	--sjo-i-crece: 1.08;
}

/* ---------------------------------------------------------------------------
 * El foco, uno para todo el cuerpo
 *
 * Quien navega con teclado tiene que ver dónde está, y el anillo del navegador
 * se pierde sobre el azul y se come las esquinas de la familia.
 * ------------------------------------------------------------------------ */

.sjo-s :is( a, button ):focus-visible,
.sjo-cta :is( a, button ):focus-visible {
	outline: none;
	box-shadow: var( --sjo-fx-anillo );
}

/* Sobre fondo azul el anillo azul no se ve: ahí es blanco. */
.sjo-s.es-fondo-azul :is( a, button ):focus-visible,
.sjo-s__sede.es-tono-azul :is( a, button ):focus-visible,
.sjo-cta :is( a, button ):focus-visible {
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.55 );
}

/* ---------------------------------------------------------------------------
 * Lo que sigue vivo mientras estás en la sección
 *
 * Las animaciones de entrada dejan la sección quieta en cuanto terminan. Si te
 * paras a leer, nada se mueve, y una página en la que nada respira se siente
 * parada aunque cada sección haya entrado muy bien.
 *
 * Todo lo de aquí cuelga de « es-a-la-vista », la clase que pone el vigía de
 * « secciones.js »: una animación de CSS corre igual esté la sección en
 * pantalla o a seis mil píxeles, y nueve secciones respirando a la vez para
 * que se vea una se paga en batería y en desplazamiento. Lo que no se ve, no
 * corre.
 *
 * Son tres y no diez a propósito. Lo que se mueve todo el rato llama la
 * atención, y la atención es lo que se estaba pidiendo para el titular. Las
 * bandas grandes ya se mueven solas con el desplazamiento —« profundidad() »
 * en « animaciones-paginas.js » las lleva al ritmo de la rueda— y los
 * carruseles avanzan por su cuenta cada cinco segundos: eso ya es la mitad del
 * pulso de la página, y aquí solo se añade lo que quedaba clavado.
 * ------------------------------------------------------------------------ */

/* 1. La flecha de «ver más» se asoma cada cinco segundos.
 *
 * Es el mismo gesto de su « :hover », repetido solo de vez en cuando: dice que
 * ahí se sigue, sin ser un reclamo. Al señalarla se apaga el bucle y manda la
 * transición, que es la que responde a la mano. */
.sjo-s.es-a-la-vista .sjo-p__enlace::after,
.sjo-p.es-a-la-vista .sjo-p__enlace::after {
	animation: sjo-fx-asoma 5s ease-in-out infinite;
}

.sjo-p__enlace:hover::after,
.sjo-p__enlace:focus-visible::after {
	animation: none;
}

@keyframes sjo-fx-asoma {

	0%,
	84%,
	100% {
		transform: none;
	}

	90% {
		transform: translateX( 0.3rem );
	}
}

/* 2. La insignia del Tour 360 late.
 *
 * Es el único sitio del recorrido donde se entra a otra cosa, y estaba tan
 * quieta como la fotografía que la sostiene. Late en el halo y no en el tamaño:
 * el tamaño es lo que responde al cursor —« --sjo-i-crece », arriba— y dos
 * cosas sobre la misma medida se pisan. */
.sjo-s--tour.es-a-la-vista .sjo-s__tour-insignia {
	animation: sjo-fx-halo 2.8s ease-out infinite;
}

@keyframes sjo-fx-halo {

	0% {
		box-shadow: 0 0 0 0 rgba( 224, 0, 38, 0.5 );
	}

	70% {
		box-shadow: 0 0 0 1.25rem rgba( 224, 0, 38, 0 );
	}

	100% {
		box-shadow: 0 0 0 0 rgba( 224, 0, 38, 0 );
	}
}

/* 3. El punto del mapa no deja de latir mientras se le mira.
 *
 * « animaciones-paginas.css » lo hace latir tres veces al entrar y lo deja
 * quieto. Tres veces es un aviso; estando en la sección, lo que dice «aquí
 * estamos nosotros» es que siga. Más despacio que el aviso de la entrada, que
 * ese sí tenía prisa. */
.sjo-s.es-a-la-vista .sjo-s__marcador-local::before {
	animation: sjo-fx-latido 2.6s ease-out infinite;
}

/* ---------------------------------------------------------------------------
 * En pantalla táctil no hay cursor que pasar
 *
 * Lo que el navegador llama « :hover » en un móvil es el último sitio donde se
 * tocó, y ahí se queda hasta que se toca otra cosa. Una tarjeta que sigue
 * levantada después del toque, o una pestaña que se quedó dos píxeles arriba,
 * parecen un error del sitio. Al toque le sobra el « :hover »: le basta el
 * « :active », que dura lo que dura el dedo encima y es exactamente la señal
 * que se buscaba.
 *
 * Se apagan solo los gestos de esta hoja. Los « :hover » que traen las hojas
 * de cada familia —el color de un enlace, el fondo de un botón— se quedan: son
 * los de siempre y nunca han estorbado.
 * ------------------------------------------------------------------------ */

@media ( hover: none ) {

	.sjo-s__sede:has( a ):hover {
		transform: none;
		box-shadow: none;
	}

	.sjo-s__paso-tarjeta:hover,
	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio:hover,
	.sjo-s .sjo-p__boton:hover,
	.sjo-cta .sjo-p__boton:hover {
		box-shadow: none;
	}

	.sjo-s__visor-chip:hover,
	.sjo-s__categoria:hover,
	.sjo-s__asignatura:hover,
	.sjo-s--recorrido.es-con-detalle .sjo-s__parada:hover .sjo-s__parada-nodo,
	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio:hover .sjo-s__espacio-num,
	.sjo-s__paso-tarjeta:hover .sjo-s__paso-cifra,
	.sjo-s__pregunta:not( .es-abierto ) .sjo-s__pregunta-cabeza:hover .sjo-s__pregunta-signo,
	.sjo-s--campus .sjo-s__campus-foto:hover img,
	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto:hover img,
	.sjo-s__tour-medio:hover img {
		transform: none;
	}

	.sjo-s__tour-medio:hover .sjo-s__tour-insignia {
		--sjo-i-crece: 1;
	}

	.sjo-s__pregunta-cabeza:hover {
		background-color: transparent;
	}
}

/* ---------------------------------------------------------------------------
 * Con « prefers-reduced-motion », los colores se quedan y el movimiento no
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.sjo-s__sede,
	.sjo-s__paso-tarjeta,
	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio,
	.sjo-s__espacio-num,
	.sjo-s__paso-cifra,
	.sjo-s .sjo-p__boton,
	.sjo-cta .sjo-p__boton,
	.sjo-s__form-tarjeta .forminator-button-submit,
	.sjo-s__visor-chip,
	.sjo-s__categoria,
	.sjo-s__asignatura,
	.sjo-s__parada,
	.sjo-s__pregunta-signo,
	.sjo-s__tour-insignia,
	.sjo-s--campus .sjo-s__campus-foto img,
	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto img,
	.sjo-s__tour-medio img,
	.sjo-s__vista-medio img,
	.sjo-s--recorrido.es-con-detalle .sjo-s__parada .sjo-s__parada-nodo {
		transition-property: background-color, border-color, color, box-shadow;
	}

	.sjo-s__sede:has( a ):hover,
	.sjo-s__sede:has( a ):active,
	.sjo-s__tesela:active,
	.sjo-s__baldosa:active,
	.sjo-s .sjo-p__boton:active,
	.sjo-cta .sjo-p__boton:active,
	.sjo-s__form-tarjeta .forminator-button-submit:active,
	.sjo-s__visor-chip:hover,
	.sjo-s__categoria:hover,
	.sjo-s__asignatura:hover,
	.sjo-s__visor-chip:active,
	.sjo-s__categoria:active,
	.sjo-s__asignatura:active,
	.sjo-s--recorrido.es-con-detalle .sjo-s__parada:active,
	.sjo-s--recorrido.es-con-detalle .sjo-s__parada:hover .sjo-s__parada-nodo,
	.sjo-s__pregunta:not( .es-abierto ) .sjo-s__pregunta-cabeza:hover .sjo-s__pregunta-signo,
	.sjo-s--campus .sjo-s__campus-foto:hover img,
	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto:hover img,
	.sjo-s__tour-medio:hover img,
	.sjo-s__vista:has( a.sjo-s__vista-boton:hover ) .sjo-s__vista-medio img,
	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio:hover .sjo-s__espacio-num,
	.sjo-s__paso-tarjeta:hover .sjo-s__paso-cifra {
		transform: none;
	}

	.sjo-s__tour-medio:hover .sjo-s__tour-insignia {
		--sjo-i-crece: 1;
	}

	.sjo-s__vista.es-activo,
	.sjo-s__preguntas.es-activo,
	.sjo-s__paso-panel.es-activo,
	.sjo-s__pregunta.es-abierto .sjo-s__respuesta,
	.sjo-s__frente.es-abierto .sjo-s__frente-panel,
	.sjo-s.es-a-la-vista .sjo-p__enlace::after,
	.sjo-p.es-a-la-vista .sjo-p__enlace::after,
	.sjo-s--tour.es-a-la-vista .sjo-s__tour-insignia,
	.sjo-s.es-a-la-vista .sjo-s__marcador-local::before {
		animation: none;
	}
}