/**
 * Bloque uts/inv-cifras — la investigación en cifras.
 *
 * Versión clara (8 oct): justo encima van las tres tarjetas de velo verde y
 * un panel verde más se veía recargado. Sección blanca con borde, como las
 * demás. Arriba, cinco fichas papel con ícono en círculo limón y la cifra en
 * tinta, grande. Abajo, una franja beige de lado a lado con cinco cifras en
 * verde escudo y la nota.
 *
 * Contraste: tinta sobre papel 17:1; gris sobre papel 6,9:1 y sobre beige
 * 6,2:1; verde escudo sobre beige 7,2:1; verde oscuro sobre limón (íconos)
 * 8,99:1. Fichas, trazos y divisores son decoración.
 *
 * @package uts
 */

.uts-inv-cifras {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) 0;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--base);
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
}

/* Sin franja limón al final, el panel cierra con su relleno de abajo. */
.uts-inv-cifras:not( :has( .uts-inv-cifras__franja ) ) {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* La bombilla del fondo: en la versión clara chocaba con las fichas; se oculta. */
.uts-inv-cifras__marca {
	display: none;
	position: absolute;
	top: -40px;
	right: -60px;
	width: 380px;
	height: 380px;
	color: var(--wp--preset--color--arena);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.uts-inv-cifras__cabecera {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-width: 760px;
}

.uts-inv-cifras__cejilla {
	margin: 0;
	color: var(--wp--preset--color--gris);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
}

.uts-inv-cifras .uts-inv-cifras__titulo {
	margin: 0;
	/* El tamaño de cualquier otro título de sección de la página (h2 del tema). */
	font-size: var(--wp--preset--font-size--titulo-2);
}

/* --------------------------------------------------------------------------
   Los dos pisos
   -------------------------------------------------------------------------- */

.uts-inv-cifras__piso {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
	/* Las cifras se miden contra el ancho del piso (cqi): las cinco iguales. */
	container-type: inline-size;
}

.uts-inv-cifras__dato {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.uts-inv-cifras__numero {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.uts-inv-cifras__rotulo {
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 1.35;
}

.uts-inv-cifras__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.uts-inv-cifras__svg {
	display: block;
}

/* Piso 1 · fichas grandes ------------------------------------------------- */

.uts-inv-cifras__piso.es-principales {
	gap: var(--wp--preset--spacing--40);
}

.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato {
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-top: 3px solid var(--wp--preset--color--verde-limon);
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--papel);
}

.uts-inv-cifras__piso.es-principales .uts-inv-cifras__icono {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-inv-cifras__piso.es-principales .uts-inv-cifras__numero {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--tinta);
	font-size: 3rem;
	/* 5,2 cqi: «1.123» (cinco caracteres) cabe en su ficha a cualquier ancho. */
	font-size: clamp( 2.25rem, 5.2cqi, 4.5rem );
}

.uts-inv-cifras__piso.es-principales .uts-inv-cifras__rotulo {
	color: var(--wp--preset--color--gris);
}

/* Piso 2 · la franja limón ------------------------------------------------ */

.uts-inv-cifras__franja {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	/* De lado a lado del panel y hasta su pie: se come el relleno. */
	margin: 0 calc( var(--wp--preset--spacing--70) * -1 );
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	/* Beige y no arena: la sección de investigadores, justo debajo, es arena. */
	background: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--verde-escudo);
}

.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato {
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-inline-start: 1px solid var(--wp--custom--investigacion--cifras-divisor);
}

.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__icono {
	width: 28px;
	height: 28px;
	margin-bottom: var(--wp--preset--spacing--20);
}

.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__numero {
	font-size: 2.25rem;
	font-size: clamp( 1.75rem, 4.2cqi, 3rem );
}

.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__rotulo {
	color: var(--wp--preset--color--gris);
}

.uts-inv-cifras__nota {
	margin: 0;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.5;
}

.uts-inv-cifras__franja .uts-inv-cifras__nota {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--investigacion--cifras-divisor);
	color: var(--wp--preset--color--gris);
}

.uts-inv-cifras > .uts-inv-cifras__nota {
	color: var(--wp--preset--color--gris);
}

/* --------------------------------------------------------------------------
   Fondo «Degradado: verde abajo» (es-fondo-abajo)

   El verde nace en la franja y sube por detrás de la mitad baja de las
   fichas, hasta perderse en blanco. Va en la franja y no en la sección para
   que la parte oscura caiga SIEMPRE detrás de las cifras de la franja, mida
   lo que mida la sección (en el teléfono es el doble de alta). Encima: cifras
   en limón (8,99:1 sobre verde oscuro, 4,6:1 sobre verde escudo) y rótulos en
   blanco al 82 %.
   -------------------------------------------------------------------------- */

.uts-inv-cifras.es-fondo-abajo,
.uts-inv-cifras.es-fondo-derecha {
	border-color: transparent;
}

.uts-inv-cifras.es-fondo-abajo .uts-inv-cifras__piso.es-principales {
	z-index: 1;
}

.uts-inv-cifras.es-fondo-abajo .uts-inv-cifras__franja {
	margin-top: -150px;
	padding-top: calc( 150px + var(--wp--preset--spacing--60) );
	background: var(--wp--custom--investigacion--cifras-degradado-abajo);
	color: var(--wp--preset--color--verde-limon);
}

.uts-inv-cifras.es-fondo-abajo .uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__rotulo {
	color: var(--wp--custom--investigacion--cifras-texto);
}

.uts-inv-cifras.es-fondo-abajo .uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato {
	border-inline-start-color: var(--wp--custom--investigacion--cifras-trazo);
}

.uts-inv-cifras.es-fondo-abajo .uts-inv-cifras__franja .uts-inv-cifras__nota {
	border-top-color: var(--wp--custom--investigacion--cifras-trazo);
	color: var(--wp--custom--investigacion--cifras-nota);
}

/* --------------------------------------------------------------------------
   Fondo «Degradado: verde a la derecha» (es-fondo-derecha)

   Blanco donde está el título y verde hacia la derecha. Las fichas (papel) y
   la franja (beige) conservan su fondo, así que el texto no cruza el verde.
   -------------------------------------------------------------------------- */

.uts-inv-cifras.es-fondo-derecha {
	background-image: var(--wp--custom--investigacion--cifras-degradado-derecha);
	/* Desde el borde: si no, el degradado se repite bajo el borde transparente
	   y deja una línea verde de 1 px a la izquierda. */
	background-origin: border-box;
}

.uts-inv-cifras.es-fondo-derecha .uts-inv-cifras__franja {
	margin-inline: 0;
	margin-bottom: var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radio--base);
}

/* --------------------------------------------------------------------------
   Tableta · tres y dos
   -------------------------------------------------------------------------- */

@media ( max-width: 1100px ) {

	.uts-inv-cifras__piso.es-principales {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}

	/* Tres arriba y dos abajo, más anchas: ninguna ficha queda suelta. */
	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato {
		grid-column: span 2;
	}

	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato:nth-child( n + 4 ) {
		grid-column: span 3;
	}

	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__numero {
		font-size: clamp( 2.25rem, 8.5cqi, 4.25rem );
	}

	.uts-inv-cifras__piso.es-secundarias {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		row-gap: var(--wp--preset--spacing--40);
	}

	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato:nth-child( 3n + 1 ) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__numero {
		font-size: clamp( 1.75rem, 7cqi, 2.75rem );
	}
}

/* --------------------------------------------------------------------------
   Móvil · dos por fila
   -------------------------------------------------------------------------- */

@media ( max-width: 640px ) {

	.uts-inv-cifras {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) 0;
	}

	.uts-inv-cifras:not( :has( .uts-inv-cifras__franja ) ) {
		padding-bottom: var(--wp--preset--spacing--70);
	}

	.uts-inv-cifras__marca {
		width: 240px;
		height: 240px;
		right: -70px;
	}

	.uts-inv-cifras__piso.es-principales,
	.uts-inv-cifras__piso.es-secundarias {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato,
	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato:nth-child( n + 4 ) {
		grid-column: auto;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* Con cinco, la primera va a lo ancho: es la que más pesa. */
	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__dato:first-child:nth-last-child( odd ) {
		grid-column: 1 / -1;
	}

	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__icono {
		width: 40px;
		height: 40px;
	}

	.uts-inv-cifras__piso.es-principales .uts-inv-cifras__numero {
		font-size: clamp( 1.75rem, 11cqi, 3rem );
	}

	.uts-inv-cifras__franja {
		margin-inline: calc( var(--wp--preset--spacing--50) * -1 );
		padding-inline: var(--wp--preset--spacing--50);
	}

	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato,
	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato:nth-child( 3n + 1 ) {
		border-inline-start: 1px solid var(--wp--custom--investigacion--cifras-divisor);
		padding-inline-start: var(--wp--preset--spacing--40);
	}

	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__dato:nth-child( odd ) {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.uts-inv-cifras__piso.es-secundarias .uts-inv-cifras__numero {
		font-size: clamp( 1.6rem, 12cqi, 2.5rem );
	}
}