/**
 * UNEI — Smart Supply intro and figures.
 *
 * Design reference: Figma, 1440px frame. The section runs from y 901 (where the
 * hero ends) to roughly y 1973, so every Top in the design is 901 less here.
 * The cards are the same component as the home "datos" block: 280x184, radius 8.
 */

.unei-ssintro {
	--unei-yellow: #fcba24;
	--unei-ink: #474949;
	--unei-dark: #474949;
	--unei-white: #ffffff;

	--unei-ssi-gutter: clamp(24px, 8.3333vw, 120px); /* 120px @1440 */
	--unei-ssi-rail: max(var(--unei-ssi-gutter), (100cqw - 1200px) / 2);
	/* Overwritten inline by render.php; these are Smart Supply's values. */
	--unei-ssi-pad-top: 80px; /* Figma: section at 901, title at 981 */
	--unei-ssi-pad-bottom: 120px; /* Figma: cards end at 1844, the beige starts at 1964 */
	--unei-ssi-card-gap: 26.6667px; /* 4 cards @1200; Natura uses 3 and 35.5 */
	--unei-ssi-title-gap: 40px;
	--unei-ssi-body-gap: 80px;
	--unei-ssi-bg: var(--unei-white);
	--unei-ssi-title-c: var(--unei-yellow);
	--unei-ssi-card-bg: var(--unei-yellow);
	--unei-ssi-value-c: var(--unei-white);

	box-sizing: border-box;
	padding: var(--unei-ssi-pad-top) var(--unei-ssi-rail) var(--unei-ssi-pad-bottom);
	background: var(--unei-ssi-bg);
	text-align: center;
}

/*
 * Smart Supply centres its intro; Natura sets the same block left. The heading
 * and the copy stop being auto-centred, the figures heading stays centred
 * because the design centres it on both pages.
 */
.unei-ssintro--izquierda {
	text-align: left;
}

/* Doubled: the base rules centre with `margin: 0 auto` and come later in the
   file, so an equal-specificity override would lose. */
.unei-ssintro--izquierda.unei-ssintro--izquierda .unei-ssintro__title,
.unei-ssintro--izquierda.unei-ssintro--izquierda .unei-ssintro__body {
	margin-left: 0;
	margin-right: auto;
}

/* Left-aligned, the headline runs the full rail (Figma: 1200 wide, not 1005). */
.unei-ssintro--izquierda.unei-ssintro--izquierda .unei-ssintro__title {
	max-width: none;
}

.unei-ssintro--izquierda .unei-ssintro__subtitle {
	text-align: center;
}

.unei-ssintro.unei-ssintro.alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
}

/* Headings --------------------------------------------------------------- */

.unei-ssintro .unei-ssintro__title {
	margin: 0 auto var(--unei-ssi-title-gap); /* title ends at 208, body starts at 248 */
	max-width: 1005px;
	color: var(--unei-ssi-title-c);
	font-family: "UNEI Namu", sans-serif;
	font-size: clamp(24px, 3.3333vw, 48px); /* 48px @1440 */
	font-weight: 700;
	line-height: 1.3333; /* 64/48 */
	letter-spacing: -0.01em; /* Astra sets letter-spacing: 100px on headings. */
}

.unei-ssintro .unei-ssintro__subtitle {
	margin: 0 auto 47px; /* subtitle ends at 712, cards start at 759 */
	max-width: 810px;
	color: var(--unei-yellow);
	font-family: "UNEI Namu", sans-serif;
	font-size: clamp(24px, 3.3333vw, 48px); /* 48px @1440 */
	font-weight: 700;
	line-height: 1.3333; /* 64/48 */
	letter-spacing: -0.01em;
}

/*
 * Servicios closes on a yellow band and sets its figures heading in Open Sans
 * 40/40 grey instead of the 48/64 Namu yellow the white sections use.
 */
.unei-ssintro--cifras-sans .unei-ssintro__subtitle {
	margin-bottom: 40px; /* Figma: heading ends at 4571, cards start at 4611 */
	max-width: none;
	color: var(--unei-dark);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(22px, 2.7778vw, 40px); /* 40px @1440 */
	line-height: 1; /* 40/40 */
}

/* Copy -------------------------------------------------------------------- */

.unei-ssintro__body {
	margin: 0 auto var(--unei-ssi-body-gap); /* body ends at 568, the figures heading starts at 648 */
	max-width: 971px;
}

/*
 * That 80 separates the copy from what follows it, so it has no business being
 * there when nothing does — on Activa the copy is the last thing in the block
 * and it was adding to the section's own 120, leaving 200 before the mosaic.
 */
.unei-ssintro > *:last-child {
	margin-bottom: 0;
}

.unei-ssintro .unei-ssintro__body p {
	margin: 0; /* Astra sets margin-bottom: 1.6em on entry-content p. */
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(22px, 2.2222vw, 32px); /* 32px @1440 */
	font-weight: 500;
	line-height: 1.25; /* 40/32 */
}

/* The design leaves one empty line between the two paragraphs. */
.unei-ssintro .unei-ssintro__body p + p {
	margin-top: 40px;
}

/*
 * Body copy rather than a lead: on Historia a long passage sits between the
 * rows and the timeline, and at the lead's 32px it read as one more change of
 * size. 24 at the weight and leading of running text, paragraphs one line apart.
 */
.unei-ssintro--texto .unei-ssintro__body p {
	font-size: clamp(18px, 1.6667vw, 24px); /* 24px @1440 */
	font-weight: 400;
	line-height: 1.5; /* 36/24 */
}

.unei-ssintro--texto .unei-ssintro__body p + p {
	margin-top: 24px;
}

.unei-ssintro .unei-ssintro__body strong {
	font-weight: 700;
}

/* Figure cards ------------------------------------------------------------ */

/*
 * No flex-wrap on purpose: with a scrollbar the rail leaves 1185px, just under
 * the 1200 the four cards need, and wrapping would drop the last card to its
 * own row. Without it they shrink the 4px instead and the row survives, which
 * is what the home "datos" block already does.
 */
.unei-ssintro .unei-ssintro__stats {
	display: flex;
	justify-content: space-between;
	gap: var(--unei-ssi-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.unei-ssintro .unei-ssintro__card {
	box-sizing: border-box;
	/* Equal share of the rail: four cards give the 280 of Smart Supply, three
	   the 376 of Natura. The height comes from the tallest label, since flex
	   stretches the row — 184 with three lines, 160 with two. */
	flex: 1 1 0;
	margin: 0;
	padding: 32px 22px;
	border-radius: 8px;
	background: var(--unei-ssi-card-bg);
}

.unei-ssintro .unei-ssintro__value {
	display: block;
	color: var(--unei-ssi-value-c);
	font-family: "Sora", sans-serif;
	font-size: clamp(24px, 3.3333vw, 48px); /* 48px @1440 */
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.04em;
}

/* The unit rides along at half size, as in "+30.000m²". */
.unei-ssintro .unei-ssintro__value span {
	font-size: 0.5em;
}

.unei-ssintro .unei-ssintro__label {
	display: block;
	margin-top: 8px;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(16px, 1.3889vw, 20px); /* 20px @1440 */
	font-weight: 500;
	line-height: 1.2; /* 24/20 */
	white-space: pre-line; /* keeps the line breaks written in the editor */
}

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

/* Same as the home's figures: the row that must not wrap on the rail wraps here. */
@media ( max-width: 900px ) {
	.unei-ssintro .unei-ssintro__stats {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px;
	}

	.unei-ssintro .unei-ssintro__card {
		flex: 1 1 calc(50% - 8px);
	}
}

/* Two and two, as on the home page — see the comment on unei-datos. */
@media ( max-width: 560px ) {
	.unei-ssintro .unei-ssintro__stats {
		gap: 12px;
	}

	/*
	 * min-width: 0 is what makes the pair actually pair. A flex item will not
	 * shrink under the width of its own longest word, and «+30.000m²» at the
	 * design's size is wider than half the screen, so that card took a row to
	 * itself and the four of them came out 1, 2, 1.
	 */
	.unei-ssintro .unei-ssintro__card {
		flex-basis: calc(50% - 6px);
		min-width: 0;
		padding: 20px 12px;
	}

	/* 24 is the largest size that keeps «+30.000m²» on one line at 125px. */
	.unei-ssintro .unei-ssintro__value {
		font-size: 24px;
		line-height: 30px;
	}

	.unei-ssintro .unei-ssintro__label {
		font-size: 14px;
	}
}

/* Editor only -------------------------------------------------------------
 * The buttons the canvas adds while the block is selected. They never reach
 * the front end, so they only need to stay out of the design's way.
 */
.unei-ssintro__parrafo-edit {
	margin-top: 8px;
	text-align: left;
}

/* The blank line between paragraphs survives the button sitting between them. */
.unei-ssintro .unei-ssintro__body .unei-ssintro__parrafo-edit + p {
	margin-top: 40px;
}

.unei-ssintro__borrar.unei-ssintro__borrar {
	margin-top: 12px;
	height: auto;
	font-size: 12px;
}

.unei-ssintro__anadir {
	margin: 24px 0 0;
	text-align: center;
}

/* The add row takes the last slot, so give the block back its own last child. */
.unei-ssintro > *:has( + .unei-ssintro__anadir ) {
	margin-bottom: 0;
}