/*
 * Contacto
 * ---------------------------------------------------------------------------
 * El tipo de sección que estrenan las cuatro páginas de «Contacto» —las
 * preguntas frecuentes, con sus categorías y su acordeón— y lo que se le añadió
 * a «Dos campus» y al formulario para que sirvieran aquí sin duplicarlos:
 *
 * - «Dos campus» reparte ahora en una, dos o tres columnas, admite tarjeta
 *   compacta, dos tonos más y la fotografía al costado de las tarjetas.
 * - El formulario admite una ficha de datos al lado —la dirección, los
 *   teléfonos, el horario—, a izquierda o a derecha.
 *
 * Va después de « formularios », que es la última hoja de la cadena: lo de aquí
 * es la caja donde vive el formulario, no su piel.
 *
 * Las medidas son fluidas, no las del Figma: cada clamp() lleva el mínimo de la
 * maqueta de 390, el valor proporcional al lienzo de 1440 (px / 14,4 = vw) y el
 * máximo de la maqueta de escritorio.
 */

.sjo-s--preguntas {
	--sjo-c-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-c-medio: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-c-celeste: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-c-tenue: var( --wp--preset--color--azul-tenue, #c9dcea );
	--sjo-c-crema: var( --wp--preset--color--crema, #f4f1ec );
	--sjo-c-rojo: var( --wp--preset--color--rojo, #e00026 );
	--sjo-c-forma: 0 24px 24px 24px;
}

/* ---------------------------------------------------------------------------
 * Preguntas frecuentes
 * ------------------------------------------------------------------------ */

.sjo-s__preguntas-cabecera {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	column-gap: clamp( 2rem, 4.17vw, 3.75rem );
	align-items: start;
}

.sjo-s--preguntas .sjo-s__encabezado {
	max-width: none;
}

.sjo-s__preguntas-cabecera > .sjo-s__bajada {
	/* Lo que hay del filete al titular: así la bajada arranca a la altura del
	   titular y no a la del filete. */
	margin-top: clamp( 2.5rem, 3.89vw, 3.5rem );
	max-width: none;
}

/* --- Las categorías --- */

.sjo-s__categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: clamp( 1.5rem, 4.17vw, 3.75rem ) 0 0;
}

.sjo-s__categoria {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	height: clamp( 2.75rem, 3.33vw, 3rem );
	padding: 0 1.5rem;
	border: 1px solid var( --wp--preset--color--azul-100, #e0e9f1 );
	border-radius: 999px;
	background: var( --wp--preset--color--base, #fff );
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sjo-s__categoria:hover,
.sjo-s__categoria:focus-visible {
	border-color: var( --sjo-c-celeste );
}

.sjo-s__categoria.es-activa,
.sjo-s__categoria[ aria-selected="true" ] {
	border-color: var( --sjo-c-azul );
	background: var( --sjo-c-azul );
	color: var( --wp--preset--color--base, #fff );
	font-weight: 600;
}

.sjo-s__categoria-num {
	color: var( --sjo-c-celeste );
	font-weight: 600;
}

.sjo-s__categoria.es-activa .sjo-s__categoria-num,
.sjo-s__categoria[ aria-selected="true" ] .sjo-s__categoria-num {
	color: rgba( 255, 255, 255, 0.7 );
}

/* --- El acordeón de preguntas --- */

.sjo-s__preguntas {
	display: grid;
	gap: clamp( 0.625rem, 0.83vw, 0.75rem );
	margin: clamp( 1.5rem, 3.33vw, 3rem ) 0 0;
}

/* Hay que decirlo: « display: grid » de la regla de arriba pisa el
   « display: none » que el navegador da a « [hidden] », y las tres categorías
   se quedarían apiladas aunque el guion las hubiera cerrado. */
.sjo-s__preguntas[ hidden ] {
	display: none;
}

.sjo-s__pregunta {
	border-radius: var( --sjo-c-forma );
	background: var( --wp--preset--color--base, #fff );
	overflow: hidden;
}

/* Sobre fondo blanco la tarjeta se perdería: ahí es crema. */
.sjo-s--preguntas.es-fondo-blanco .sjo-s__pregunta {
	background: var( --sjo-c-crema );
}

.sjo-s__pregunta-cabeza {
	display: flex;
	gap: clamp( 1rem, 2.22vw, 2rem );
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: clamp( 1.25rem, 1.94vw, 1.75rem ) clamp( 1.5rem, 3.33vw, 3rem );
	border: 0;
	background: none;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1rem, 1.39vw, 1.25rem );
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.015em;
	text-align: start;
	cursor: pointer;
}

.sjo-s__pregunta-tit {
	max-width: 56rem;
}

/* El signo: dos filetes rojos en cruz que se quedan en uno al abrir. Lo dibuja
   el CSS porque es una cruz; no hace falta un SVG para eso. */
.sjo-s__pregunta-signo {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.sjo-s__pregunta-signo::before,
.sjo-s__pregunta-signo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var( --sjo-c-rojo );
	transform: translateY( -50% );
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.sjo-s__pregunta-signo::after {
	transform: translateY( -50% ) rotate( 90deg );
}

.sjo-s__pregunta.es-abierto .sjo-s__pregunta-signo::after {
	opacity: 0;
	transform: translateY( -50% ) rotate( 0deg );
}

.sjo-s__respuesta {
	padding: 0 clamp( 1.5rem, 3.33vw, 3rem ) clamp( 1.25rem, 2.22vw, 2rem );
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

.sjo-s__respuesta p {
	margin: 0;
	max-width: 56rem;
}

.sjo-s__respuesta p + p {
	margin-top: clamp( 0.75rem, 1.11vw, 1rem );
}

/* --- El panel de cierre --- */

.sjo-s__preguntas-panel {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: clamp( 1.25rem, 2.78vw, 2.5rem );
	align-items: center;
	margin: clamp( 2rem, 4.17vw, 3.75rem ) 0 0;
	padding: clamp( 1.5rem, 2.36vw, 2.125rem ) clamp( 1.75rem, 3.33vw, 3rem );
	border-radius: var( --sjo-c-forma );
	background: var( --sjo-c-azul );
}

.sjo-s__preguntas-panel-tit {
	margin: 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.67vw, 1.5rem );
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.017em;
}

.sjo-s__preguntas-panel-txt {
	margin: clamp( 0.375rem, 0.56vw, 0.5rem ) 0 0;
	color: var( --sjo-c-tenue );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.6;
}

.sjo-s__preguntas-panel-accion {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Dos campus»
 * ------------------------------------------------------------------------ */

.sjo-s--campus.es-columnas-1 .sjo-s__sedes {
	grid-template-columns: minmax( 0, 1fr );
}

.sjo-s--campus.es-columnas-3 .sjo-s__sedes {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2.85vw, 2.5625rem );
}

/* La tarjeta compacta se ajusta a lo que tiene dentro: un correo, un enlace.
   Sin esto, el alto mínimo de la tarjeta de dirección le deja media caja
   vacía. */
.sjo-s--campus.es-compacta .sjo-s__sede {
	min-height: 0;
}

/* Dos tonos más para la escala de «Tres cifras». */
.sjo-s__sede.es-tono-medio {
	background: var( --wp--preset--color--azul-medio, #006ba1 );
}

.sjo-s__sede.es-tono-tenue {
	background: var( --wp--preset--color--azul-tenue, #c9dcea );
}

.sjo-s__sede.es-tono-medio .sjo-s__sede-rotulo,
.sjo-s__sede.es-tono-medio .sjo-s__sede-txt {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

.sjo-s__sede.es-tono-medio .sjo-s__sede-tit,
.sjo-s__sede.es-tono-medio .sjo-s__sede-dato,
.sjo-s__sede.es-tono-medio .sjo-s__sede-enlace {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__sede.es-tono-tenue .sjo-s__sede-rotulo {
	color: var( --wp--preset--color--rojo, #e00026 );
}

.sjo-s__sede.es-tono-tenue .sjo-s__sede-tit,
.sjo-s__sede.es-tono-tenue .sjo-s__sede-dato {
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__sede.es-tono-tenue .sjo-s__sede-txt {
	color: rgba( 0, 64, 120, 0.85 );
}

/* En la tarjeta de dato, la cifra manda y el rótulo va encima pequeño. */
.sjo-s--campus.es-estilo-dato.es-columnas-3 .sjo-s__sede-tit {
	font-size: clamp( 1.75rem, 3.06vw, 2.75rem );
}

/* Sin fotografía, la cabecera no reparte nada: el encabezado ocupa la fila
   entera. Hasta ahora guardaba la mitad para una fotografía que no estaba, y el
   titular salía en una columna de dos palabras. Con « foto_lado » pasa lo
   mismo: la fotografía se fue al costado de las tarjetas. */
.sjo-s--campus:not( .es-con-foto ) .sjo-s__campus-cabecera,
.sjo-s--campus.es-foto-lado .sjo-s__campus-cabecera {
	grid-template-columns: minmax( 0, 1fr );
}

/* La bajada a la derecha del titular. */
.sjo-s--campus.es-cabecera-doble .sjo-s__encabezado {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	column-gap: clamp( 2rem, 4.17vw, 3.75rem );
	align-content: start;
}

.sjo-s--campus.es-cabecera-doble .sjo-s__encabezado > * {
	grid-column: 1;
}

.sjo-s--campus.es-cabecera-doble .sjo-s__encabezado > .sjo-s__bajada {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	margin-top: clamp( 2.5rem, 3.89vw, 3.5rem );
	max-width: none;
}

/* La fotografía al costado de las tarjetas, y no en el encabezado. */
.sjo-s__campus-reja {
	display: grid;
	grid-template-columns: minmax( 0, 43% ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4.17vw, 3.75rem );
	align-items: start;
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
}

.sjo-s__campus-reja .sjo-s__campus-foto {
	border-radius: var( --sjo-i-forma, 0 24px 24px 24px );
	overflow: hidden;
}

.sjo-s__campus-reja .sjo-s__campus-foto img {
	aspect-ratio: 620 / 480;
}

/* Dentro de la reja, las tarjetas ya no llevan el aire de arriba: lo pone la
   reja. */
.sjo-s__campus-reja .sjo-s__sedes {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió al formulario: la ficha de datos al lado
 * ------------------------------------------------------------------------ */

/* 760 de formulario y 440 de ficha sobre el interior de 1240. */
.sjo-s--formulario.es-estilo-ancha.es-con-datos .sjo-s__form-reja {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 36%  );

	/* 40 px de calle, como en la maqueta: la reja del formulario en columna
	   usa 60, que aquí deja la ficha despegada del formulario. */
	gap: clamp( 1rem, 2.78vw, 2.5rem );
	margin-top: clamp( 1.5rem, 4.17vw, 3.75rem );

	/* Las dos fichas miden lo mismo de alto, como en la maqueta —en
	   «Consúltanos» las dos son de 576 y en «Postula» de 702—. La reja del
	   formulario en columna las deja a su aire con « align-items: start », y
	   ahí la ficha azul quedaba a media altura del formulario, como un recorte
	   suelto al lado. */
	align-items: stretch;
}

/* Con la ficha a la izquierda, la columna estrecha es la primera: lo que
   cambia de sitio es la ficha, no el reparto. El formulario se queda siempre
   con la columna ancha. */
.sjo-s--formulario.es-estilo-ancha.es-datos-izquierda .sjo-s__form-reja {
	grid-template-columns: minmax( 0, 36% ) minmax( 0, 1fr );
}

/* Sin ficha, la reja no reparte nada: el formulario ocupa la fila. */
.sjo-s--formulario.es-estilo-ancha:not( .es-con-datos ) .sjo-s__form-reja {
	grid-template-columns: minmax( 0, 1fr );
}

/* En «Postula» la ficha se ve a la izquierda. En el marcado va después —el
   formulario es lo que se viene a hacer, y quien use un lector de pantalla
   llega antes a él—, así que el sitio en pantalla se da por celda.
   No con « order »: en una rejilla, « order » cambia el turno de colocación, y
   la ficha se llevaba la columna ancha dejando el formulario en la estrecha. */
.sjo-s--formulario.es-datos-izquierda .sjo-s__form-tarjeta {
	grid-column: 2;
	grid-row: 1;
}

.sjo-s--formulario.es-datos-izquierda .sjo-s__form-datos {
	grid-column: 1;
	grid-row: 1;
}

.sjo-s--formulario.es-estilo-ancha.es-con-datos .sjo-s__form-tarjeta {
	margin-top: 0;
}

.sjo-s__form-datos {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem );
	border-radius: var( --sjo-c-forma, 0 24px 24px 24px );
	background: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__form-datos-rotulo {
	margin: 0 0 clamp( 1.25rem, 2.22vw, 2rem );
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.sjo-s__form-datos-lista {
	display: grid;
	gap: clamp( 1.25rem, 2.08vw, 1.875rem );
	margin: 0;
}

.sjo-s__form-dato-rotulo {
	margin: 0;
	color: var( --wp--preset--color--celeste, #a7c6dd );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.454;
	letter-spacing: 0.164em;
	text-transform: uppercase;
}

.sjo-s__form-dato-valor {
	display: grid;
	margin: 0.375rem 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	font-weight: 500;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Pantallas medianas
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {

	.sjo-s__preguntas-cabecera,
	.sjo-s--campus.es-cabecera-doble .sjo-s__encabezado {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s__preguntas-cabecera > .sjo-s__bajada,
	.sjo-s--campus.es-cabecera-doble .sjo-s__encabezado > .sjo-s__bajada {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1.25rem;
	}

	/* Tres tarjetas en una fila dejan cada una en una columna de dos palabras:
	   a este ancho van de dos en dos. */
	.sjo-s--campus.es-columnas-3 .sjo-s__sedes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* La fotografía deja de ir al costado: a este ancho se lleva media
	   pantalla y las tarjetas se quedan sin sitio para su texto. */
	.sjo-s__campus-reja {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--formulario.es-estilo-ancha.es-con-datos .sjo-s__form-reja,
	.sjo-s--formulario.es-estilo-ancha.es-datos-izquierda .sjo-s__form-reja {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Apilada, la ficha de datos va debajo del formulario también en
	   «Postula»: el orden del marcado es el que toca, así que se les quita la
	   celda asignada y vuelven a colocarse solas. */
	.sjo-s--formulario.es-datos-izquierda .sjo-s__form-tarjeta,
	.sjo-s--formulario.es-datos-izquierda .sjo-s__form-datos {
		grid-column: auto;
		grid-row: auto;
	}

	.sjo-s__preguntas-panel {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ---------------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	/* Las categorías no caben en una línea y partirlas en tres filas rompe la
	   barra: se recorren de lado, como los chips del visor. */
	.sjo-s__categorias {
		flex-wrap: nowrap;
		margin-inline: calc( -1 * var( --sjo-gutter ) );
		padding-inline: var( --sjo-gutter );
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sjo-s__categorias::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__categoria {
		flex: none;
	}

	.sjo-s--campus.es-columnas-3 .sjo-s__sedes,
	.sjo-s--campus.es-columnas-2 .sjo-s__sedes {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s__campus-reja .sjo-s__campus-foto img {
		aspect-ratio: 16 / 10;
	}
}