/**
 * UNEI — Tu Partner 3S.
 *
 * Design reference: Figma, 1440px frame, section 1440x920 at Top 901.
 * Same construction as "Qué podemos ofrecerte": a 595px photo with a
 * semicircular end bleeding above the section, and the same shape rotated 180deg
 * behind it — here in yellow instead of salmon.
 */

.unei-partner {
	--unei-yellow: #fcba24;
	--unei-dark: #474949;
	--unei-ink: #000000;
	--unei-white: #ffffff;
	--unei-cream: #f0ede7;

	--unei-partner-gutter: clamp(24px, 8.3333vw, 120px); /* 120px @1440 */
	--unei-partner-pad-y: 88px; /* Figma: section at 901, kicker at 989 */
	--unei-partner-rail: max(var(--unei-partner-gutter), (100cqw - 1200px) / 2);
	--unei-partner-tab-pad: 31.5px; /* derived: makes the active tab 109px wide */

	position: relative;
	box-sizing: border-box;
	min-height: 920px; /* Figma section frame: 1440x920 */
	padding: var(--unei-partner-pad-y) 0;
	background: var(--unei-cream);
	overflow: hidden;
	isolation: isolate; /* the pills multiply against this section only */
}

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

.unei-partner__inner,
.unei-partner__content {
	position: relative;
	z-index: 2;
	/* Content rides a centred 1200px rail so it never hugs the edge on wide screens. */
	padding-left: var(--unei-partner-rail);
}

/* Background shapes ------------------------------------------------------ */

/* Figma: 595x930 at (891, 1148.75), rotated 180deg. */
.unei-partner__shape {
	position: absolute;
	left: 61.875%; /* 891/1440 */
	top: 247.75px; /* 1148.75 - 901 */
	width: 41.3194%; /* 595/1440 */
	bottom: 0;
	background: var(--unei-yellow);
	border-radius: 297.5px 297.5px 0 0; /* 595/2 */
	z-index: 0;
}

/* Figma: 595x1049 at (697, 548.75) — bleeds above the section, cropped flat. */
.unei-partner .unei-partner__photo {
	position: absolute;
	left: 48.4028%; /* 697/1440 */
	top: -352.25px; /* 548.75 - 901 */
	width: 41.3194%; /* 595/1440 */
	height: 1049px;
	max-width: none; /* Astra sets img { max-width: 100% }. */
	object-fit: cover;
	border-radius: 0 0 297.5px 297.5px;
	z-index: 1;
}

/* Tab transition ----------------------------------------------------------
 * Figma draws one frame per tab: Animacion Smart 1641:1445, Animacion
 * Sostenible 1641:1513 and Animacion Social 1641:1479, each 1440x920 — the
 * height this section actually measures — and plays them as Smart Animate:
 * 800ms, ease-in-out.
 *
 * Smart and Sostenible leave the yellow shape where it is. Social moves it:
 * the shape climbs from y 252 to y -491 and grows from 970 to 1104 tall, so it
 * ends at y 613. Its photo rests at y 225 with the semicircle flipped to the
 * top (Figma keeps it as `foto2`, rotated 180deg).
 *
 * The photos and the four pills travel in view.js, which knows where each
 * frame puts them. The shape only needs to know which tab is on: view.js
 * writes it to data-unei-active the moment the tab changes, while the old
 * panel is still on screen. Without the script the :has() rule does the same.
 *
 * Below 901px none of this exists: the shape and the pills are hidden and the
 * photo returns to the flow, where these offsets would shove it around.
 */
@media ( min-width: 901px ) {
	.unei-partner .unei-partner__shape {
		transition:
			top 0.8s ease-in-out,
			bottom 0.8s ease-in-out,
			border-radius 0.8s ease-in-out;
	}

	.unei-partner:not([data-unei-active]):has(.unei-partner__panel[data-unei-tab="2"]:not([hidden])) .unei-partner__shape,
	.unei-partner[data-unei-active="2"] .unei-partner__shape {
		top: -491px;
		bottom: 307px; /* 920 - 613 */

		/*
		 * The resting rule rounds the top, which is the end that shows when the
		 * shape sits low. Up here the top is off-screen and the BOTTOM is what
		 * you see, so the radius travels with it. 245 is the frame's own
		 * cornerRadius, and it leaves the flat stretch between both corners that
		 * the render shows — a half-pill would close it into a semicircle.
		 */
		border-radius: 245px;
	}

	.unei-partner .unei-partner__panel[data-unei-tab="2"] .unei-partner__photo {
		top: 225px;
		border-radius: 297.5px 297.5px 0 0;
	}

	/*
	 * The pills: 239x770, cornerRadius 245, blend MULTIPLY, above the yellow
	 * shape and below the photos. Multiplied, one pill reads as two colours —
	 * the peach turns orange over the yellow, the cyan turns green — which is
	 * the whole effect, so the fills are the frame's, not what the eye sees.
	 * They rest above the section and only cross it while a tab changes.
	 */
	/*
	 * The blend sits on the layer, not on each pill: z-index makes this box a
	 * stacking context, and a pill multiplying inside it would only meet the
	 * box's own empty backdrop, never the shape underneath.
	 */
	.unei-partner__pills {
		position: absolute;
		inset: 0;
		z-index: 0;
		mix-blend-mode: multiply;
		pointer-events: none;
	}

	.unei-partner__pill {
		position: absolute;
		top: 0;
		width: 16.5972%; /* 239/1440 */
		height: 770px;
		border-radius: 245px;
		transform: translateY(-800px);
	}

	.unei-partner__pill--peach {
		left: 51.6667%; /* 744/1440 */
		background: #fec6ab;
	}

	.unei-partner__pill--cyan {
		left: 81.3194%; /* 1171/1440 */
		background: #70e7f0;
	}

	.unei-partner__pill--blue {
		left: 78.0556%; /* 1124/1440 */
		background: #7094f0;
	}

	.unei-partner__pill--salmon {
		left: 48.4722%; /* 698/1440 */
		background: #fc887b;
	}

	/* The copy that is leaving fades where it stood, out of the flow. */
	.unei-partner__panel.is-leaving .unei-partner__content {
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	@media ( prefers-reduced-motion: reduce ) {
		.unei-partner .unei-partner__shape {
			transition: none;
		}
	}
}

@media ( max-width: 900px ) {
	.unei-partner__pills {
		display: none;
	}
}

/* Lockup ----------------------------------------------------------------- */

.unei-partner .unei-partner__kicker {
	margin: 0;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(24px, 3.3333vw, 48px); /* 48px @1440 */
	font-weight: 500;
	line-height: 1; /* 48/48 */
	letter-spacing: -0.01em;
}

.unei-partner .unei-partner__kicker-accent {
	color: var(--unei-yellow);
}

.unei-partner__lockup {
	display: flex;
	align-items: flex-start;
	gap: 29px; /* 3S ends at 283, words start at 312 */
	margin-top: 16px; /* kicker ends at 136, lockup starts at 152 */
}

.unei-partner .unei-partner__lockup-mark {
	color: var(--unei-yellow);
	font-family: "UNEI Namu", sans-serif;
	font-size: 132px; /* calibrated against UNEI Namu: 163px wide, as in Figma */
	font-weight: 700;
	line-height: 99px;
	letter-spacing: -0.01em;
}

.unei-partner .unei-partner__lockup-words {
	color: var(--unei-yellow);
	font-family: "UNEI Namu", sans-serif;
	font-size: 35px; /* calibrated against UNEI Namu: 224px wide, as in Figma */
	font-weight: 700;
	line-height: 33px; /* three lines make the 99px block */
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: pre-line; /* one word per line, as written in the editor */
}

/* Tabs ------------------------------------------------------------------- */

.unei-partner__tabs {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: 61px; /* lockup ends at 251, tabs start at 312 */
	padding: 4px;
	border-radius: 72px;
	background: var(--unei-white);
}

.unei-partner .unei-partner__tab {
	margin: 0;
	padding: 0 var(--unei-partner-tab-pad);
	height: 48px;
	border: 0;
	border-radius: 72px;
	background: transparent;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 48px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.unei-partner .unei-partner__tab.is-active {
	background: var(--unei-dark);
	color: var(--unei-white);
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.25 );
}

/*
 * The dark pill slides to the tab you pick, as "pill over" does in the
 * prototype. view.js sizes and places it, then adds .has-marker — only from
 * then on does the active tab stop painting its own fill.
 */
.unei-partner__marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: 72px;
	background: var(--unei-dark);
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.25 );
	pointer-events: none;
}

.unei-partner__tabs.has-marker .unei-partner__marker {
	transition:
		transform 0.8s ease-in-out,
		width 0.8s ease-in-out,
		height 0.8s ease-in-out,
		background-color 0.2s ease;
}

.unei-partner .unei-partner__tabs.has-marker .unei-partner__tab {
	position: relative; /* above the marker */
	transition: background-color 0.2s ease, color 0.8s ease-in-out;
}

.unei-partner .unei-partner__tabs.has-marker .unei-partner__tab.is-active {
	background: transparent;
	box-shadow: none;
}

/* Panels ----------------------------------------------------------------- */

/* No positioning context here: the photo anchors to the section. */
.unei-partner__panel[hidden] {
	display: none;
}

/*
 * Fixed box so the buttons land at y=776 no matter how long the copy is:
 * Sostenible has no body paragraph and Social has a long one.
 */
.unei-partner__content {
	display: flex;
	flex-direction: column;
	min-height: 464px; /* 40 of padding + 424 from heading to the button's bottom */
	padding-top: 40px; /* tabs end at 368, heading starts at 408 */
}

.unei-partner .unei-partner__heading {
	display: flex;
	align-items: center;
	gap: 16px; /* icon ends at 160, text starts at 176 */
	margin: 0 0 16px;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(24px, 2.5vw, 36px); /* 36px @1440 */
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.01em;
}

.unei-partner .unei-partner__icon {
	flex: none;
	width: 40px;
	height: 40px;
	max-width: none;
}

.unei-partner .unei-partner__subtitle {
	margin: 0;
	max-width: 492px;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(17px, 1.6667vw, 24px); /* 24px @1440 */
	font-weight: 500;
	line-height: 1.6667; /* 40/24 */
}

/* The subtitle and the body sit flush in the design: no gap between them. */
.unei-partner .unei-partner__body {
	margin: 0;
	max-width: 492px;
	color: var(--unei-dark);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(14px, 1.1111vw, 16px); /* 16px @1440 */
	font-weight: 500;
	line-height: 2; /* 32/16 */
}

/* Buttons ---------------------------------------------------------------- */

.unei-partner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: auto; /* pinned to the bottom of the fixed content box */
}

.unei-partner .unei-partner__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-radius: 8px;
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px; /* 16 + 24 + 16 = 56px tall */
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.unei-partner .unei-partner__btn--dark {
	background: var(--unei-dark);
	color: var(--unei-white);
}

.unei-partner .unei-partner__btn--yellow {
	background: var(--unei-yellow);
	color: var(--unei-dark);
}

.unei-partner .unei-partner__btn:hover,
.unei-partner .unei-partner__btn:focus-visible {
	background: var(--unei-white);
	color: var(--unei-dark);
}

.unei-partner__arrow {
	flex: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.unei-partner .unei-partner__btn,
	.unei-partner .unei-partner__tab,
	.unei-partner .unei-partner__tabs.has-marker .unei-partner__tab,
	.unei-partner__tabs.has-marker .unei-partner__marker {
		transition: none;
	}
}

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

/*
 * The photo and the shape behind it are absolutely positioned into the right
 * half, which only exists while there are two halves. On a phone the photo
 * drops back into the flow — it already sits after the copy in the markup —
 * and the coloured shape goes, since half a semicircle behind a full-width
 * photo reads as a stray band.
 */
@media ( max-width: 900px ) {
	.unei-partner {
		min-height: 0;
		padding-bottom: 0;
	}

	.unei-partner__inner,
	.unei-partner__content {
		padding-right: var(--unei-partner-rail);
		/* 464 is the height the desktop panel needs; on a phone the copy is
		   taller than that anyway and the leftover showed as dead space. */
		min-height: 0;
	}

	.unei-partner__shape {
		display: none;
	}

	/* Same tab row as «qué podemos ofrecerte»: it scrolls rather than wraps. */
	.unei-partner__tabs {
		display: flex;
		max-width: 100%;
		margin-top: 40px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.unei-partner__tabs::-webkit-scrollbar {
		display: none;
	}

	.unei-partner .unei-partner__tab {
		flex: none;
	}

	/*
	 * «Smart Sostenible Social» is set at a fixed 35px, calibrated so the
	 * three words measure the 224 of the design. On a phone that block runs
	 * past the edge, so it scales with the screen instead.
	 */
	.unei-partner .unei-partner__lockup-words {
		font-size: clamp(20px, 7vw, 35px);
		line-height: 1;
	}

	.unei-partner .unei-partner__lockup-mark {
		font-size: clamp(64px, 22vw, 110px);
	}

	.unei-partner .unei-partner__photo {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		margin-top: 48px;
		aspect-ratio: 595 / 620;
		border-radius: 0;
	}
}

@media ( max-width: 640px ) {
	/* Same row as the other pills: it drags sideways when it does not fit. */
	.unei-partner__tabs {
		display: flex;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.unei-partner__tabs::-webkit-scrollbar {
		display: none;
	}

	.unei-partner__tabs::after {
		content: "";
		flex: none;
		width: 4px;
	}

	.unei-partner .unei-partner__tab {
		flex: none;
		padding: 0 14px;
		height: 38px;
		font-size: 14px;
		line-height: 38px;
	}
}

/* Editor only -------------------------------------------------------------
 * The pickers and the two buttons the canvas adds while the block is selected,
 * plus the slot that stands in for the photo before there is one. None of this
 * reaches the front end, so it only needs to stay out of the design's way.
 */
.unei-partner__editor-media {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.unei-partner__cambiar-foto.unei-partner__cambiar-foto {
	position: absolute;
	left: 50%;
	top: 24px;
	z-index: 3;
}

.unei-partner__foto-hueco {
	position: relative;
	z-index: 2;
	margin: 24px var(--unei-partner-gutter) 0;
	max-width: 480px;
}

.unei-partner__anadir {
	margin-top: 24px;
}