/* ===========================================================================
   FICHA DE CONVENIO
   Figma: 6301:24022 (escritorio) y 6301:24494 (móvil).

   Se carga solo en /convenio/<slug>/: es una plantilla propia y su CSS no lo
   necesita ninguna otra página.

   Se escribe primero la versión móvil y luego se amplía.
   =========================================================================== */

.iacc-convenio {
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

.iacc-convenio__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 32px 48px;
}

/* --- Volver al listado --------------------------------------------------- */

.iacc-convenio__volver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: none;
}

.iacc-convenio__volver:hover span {
	text-decoration: underline;
}

/*
 * La flecha del catálogo apunta a la derecha y aquí se vuelve: se gira en vez
 * de dibujar otro icono, que es lo que hace el propio archivo de diseño.
 */
.iacc-convenio__volver-icono {
	flex: none;
	width: 18px;
	height: 18px;
	rotate: 180deg;
	transition: translate .2s ease;
}

.iacc-convenio__volver:hover .iacc-convenio__volver-icono {
	translate: -4px 0;
}

/* --- La cabecera --------------------------------------------------------- */

.iacc-convenio__cabecera {
	display: flex;
	flex-direction: column;

	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgb(8 33 41 / 10%);
	overflow: hidden;
}

/*
 * El mismo hueco del listado, y por lo mismo: mide igual con logotipo y sin
 * él, y la imagen nunca es más ancha que su sitio.
 */
.iacc-convenio__logo {
	display: grid;
	place-items: center;
	padding: 20px;
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
}

.iacc-convenio__img {
	display: block;
	/*
	 * El 100 % impide que se salga del hueco; los 180 px, que en pantalla
	 * pequeña —donde el hueco pasa a ser el ancho entero de la tarjeta— el
	 * logotipo se estire hasta dominar la ficha. Gana siempre el menor de los
	 * dos, así que el tope fijo nunca puede provocar un desbordamiento.
	 */
	max-width: min(100%, 180px);
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.iacc-convenio__sigla {
	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	color: var(--wp--preset--color--texto-medio, #4e6667);
}

.iacc-convenio__identidad {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 20px;
}

.iacc-convenio__badge {
	margin: 0;
	padding: 3px 10px;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-medio, #4e6667);
	background: var(--wp--preset--color--gris-suave, #f5f6f6);
	border-radius: 999px;
}

/*
 * Es el H1 de la página. El diseño lo dibuja al tamaño de un titular de
 * tarjeta —22— porque la ficha no tiene hero: el nombre de la institución es
 * lo único que titula, y ahí va.
 */
.iacc-convenio__titulo {
	margin: 0;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--wp--preset--color--texto, #272727);
}

/* --- Las píldoras -------------------------------------------------------- */

ul.iacc-convenio__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-convenio__descuento {
	margin: 0;
	padding: 6px 12px;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	background: var(--wp--preset--color--marca-sutil, #eef6e6);
	border-radius: 999px;
}

/* El texto no es el del diseño por contraste; ver blocks/convenios. */
.iacc-convenio__descuento--matricula {
	color: var(--wp--preset--color--verde-profundo, #033934);
	background: #d5f0df;
}

/* --- Las dos columnas ---------------------------------------------------- */

.iacc-convenio__columnas {
	display: grid;
	gap: 24px;
}

/* --- Lo que da el convenio ----------------------------------------------- */

.iacc-convenio__detalle {
	display: flex;
	flex-direction: column;
	gap: 24px;

	padding: 20px;
	background: var(--wp--preset--color--neutral-0, #fff);
	border: 1px solid var(--wp--preset--color--gris-claro, #e1e5e5);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgb(8 33 41 / 8%);
}

.iacc-convenio__bajada {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	color: var(--wp--preset--color--texto, #272727);
}

.iacc-convenio__bloque {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * El rótulo es un encabezado de verdad —parte la ficha en «a quién va» y «qué
 * da»—, solo que dibujado en versalitas. Va como h2 porque el h1 es el nombre
 * del convenio.
 */
.iacc-convenio__rotulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;

	font-size: var(--wp--preset--font-size--13, 13px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-convenio__rotulo-icono {
	flex: none;
	width: 18px;
	height: 18px;
}

.iacc-convenio__texto {
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

ul.iacc-convenio__beneficios {
	display: flex;
	flex-direction: column;
	gap: 8px;

	margin: 0;
	padding: 0;
	list-style: none;
}

.iacc-convenio__beneficio {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;

	font-size: var(--wp--preset--font-size--16, 16px);
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700, #304b4d);
}

/* A la altura de la primera línea, no centrada en un texto de dos. */
.iacc-convenio__check {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
}

.iacc-convenio__sitio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;

	font-size: var(--wp--preset--font-size--14, 14px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--marca-oscura, #3d7a00);
	text-decoration: none;
}

.iacc-convenio__sitio:hover span:not(.screen-reader-text) {
	text-decoration: underline;
}

.iacc-convenio__externo {
	flex: none;
	width: 16px;
	height: 16px;
}

/* --- El formulario ------------------------------------------------------- */

/*
 * La tarjeta la pinta iacc_formulario_tarjeta() y su aspecto sale de main.css,
 * que es donde vive .iacc-form: aquí solo se le da su sitio en la rejilla.
 */
.iacc-convenio__postular {
	min-width: 0;
}

/* ===========================================================================
   Escritorio
   =========================================================================== */

@media (min-width: 992px) {

	.iacc-convenio__inner {
		gap: 32px;
		padding-block: 72px 96px;
	}

	/* La cabecera se abre: el logo a un lado y la identidad al otro. */
	.iacc-convenio__cabecera {
		flex-direction: row;
		align-items: stretch;
	}

	.iacc-convenio__logo {
		flex: none;
		width: 180px;
		padding: 24px 28px;
	}

	.iacc-convenio__identidad {
		flex: 1 1 auto;
		padding: 24px 32px;
	}

	.iacc-convenio__titulo {
		font-size: var(--wp--preset--font-size--22, 22px);
	}

	/*
	 * 728 y 480 con los 32 de hueco son los 1240 del diseño. El formulario no
	 * se estira: es una tarjeta y crece lo que necesite.
	 */
	.iacc-convenio__columnas {
		grid-template-columns: minmax(0, 728fr) minmax(0, 480fr);
		gap: 32px;
		align-items: start;
	}

	.iacc-convenio__detalle {
		padding: 28px;
	}
}

/* --- Sin movimiento ------------------------------------------------------ */

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

	.iacc-convenio__volver-icono {
		transition: none;
	}

	.iacc-convenio__volver:hover .iacc-convenio__volver-icono {
		translate: none;
	}
}