/**
 * UNEI — Qué podemos ofrecerte (tabs).
 *
 * Design reference: Figma, 1440px frame. Only the Smart Supply tab is designed;
 * the other four reuse the same layout with their own copy.
 */

.unei-servicios {
	--unei-yellow: #fcba24;
	--unei-salmon: #fc887b;
	--unei-dark: #474949;
	--unei-ink: #000000;
	--unei-white: #ffffff;
	--unei-cream: #f0ede7; /* measured from the Figma export, not from a token */

	--unei-serv-gutter: clamp(24px, 8.3333vw, 120px); /* 120px @1440 */
	--unei-serv-pad-top: 126px; /* Figma: section at 3034, title at 3160 */
	--unei-serv-pad-bottom: 142px; /* 126 + 652 of content + 142 = 920 */
	--unei-serv-rail: max(var(--unei-serv-gutter), (100cqw - 1200px) / 2);
	--unei-serv-tab-pad: 30px; /* derived: makes the active tab 162px wide, as in Figma */

	position: relative;
	box-sizing: border-box;
	min-height: 920px; /* Figma section frame: 1440x920 */
	padding: var(--unei-serv-pad-top) 0 var(--unei-serv-pad-bottom);
	background: var(--unei-cream);
	overflow: hidden; /* the salmon block and the photo bleed to the right edge */
	isolation: isolate; /* the pills multiply against this section only */
}

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

.unei-servicios__inner,
.unei-servicios__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-serv-rail);
}

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

/*
 * Figma: 595x930 at (891, 3281.75), rotated 180deg. Same shape as the photo —
 * a 595px rectangle with a semicircular end — so rotating it turns the curve up.
 * It runs to the section's bottom instead of its 930px, since the frame clips it.
 */
.unei-servicios__salmon {
	position: absolute;
	left: 61.875%; /* 891/1440 */
	top: 247.75px; /* 3281.75 - 3034 */
	width: 41.3194%; /* 595/1440 */
	bottom: 0;
	background: var(--unei-salmon);
	border-radius: 297.5px 297.5px 0 0; /* 595/2 */
	z-index: 0;
}

/*
 * Figma: 595x1049 at (689, 2681.75). The section starts at 3034, so the photo
 * bleeds 352.25px above it and the frame crops it flat.
 */
.unei-servicios .unei-servicios__photo {
	position: absolute;
	left: 47.8472%; /* 689/1440 */
	top: -352.25px; /* 2681.75 - 3034 */
	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; /* 595/2 */
	z-index: 1;
}

/* Title ------------------------------------------------------------------ */

.unei-servicios .unei-servicios__title {
	margin: 0 0 38px;
	max-width: 500px;
	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; /* Astra sets letter-spacing: 100px on headings. */
	text-transform: uppercase;
}

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

.unei-servicios__tabs {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 6px;
	border-radius: 72px;
	background: var(--unei-white);
}

.unei-servicios .unei-servicios__tab {
	margin: 0;
	padding: 0 var(--unei-serv-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-servicios .unei-servicios__tab.is-active {
	background: var(--unei-salmon);
	color: var(--unei-white);
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.25 );
}

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

.unei-servicios__tabs.has-marker .unei-servicios__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-servicios .unei-servicios__tabs.has-marker .unei-servicios__tab {
	position: relative; /* above the marker */
}

.unei-servicios .unei-servicios__tabs.has-marker .unei-servicios__tab.is-active {
	background: transparent;
	box-shadow: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.unei-servicios__tabs.has-marker .unei-servicios__marker {
		transition: none;
	}
}

/*
 * Changing tab carries the photo away the way the row reads — up towards the
 * next tab, down towards the previous — while the copy that is leaving fades
 * where it stood, out of the flow so the arriving copy can take its place.
 * tabs.js runs both, and only above 901px, where the photo is pinned to the
 * section instead of sitting in the flow.
 */
@media ( min-width: 901px ) {
	.unei-servicios__panel.is-leaving .unei-servicios__content {
		position: absolute;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	/*
	 * The same four pills the 3S row carries: 239x770, cornerRadius 245, blend
	 * MULTIPLY, above the coloured shape and below the photo. 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. Over salmon instead of yellow they
	 * read as their own colours, which is what the multiply is for.
	 */
	.unei-servicios__pills {
		position: absolute;
		inset: 0;
		z-index: 0;
		mix-blend-mode: multiply;
		pointer-events: none;
	}

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

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

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

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

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

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

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

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

.unei-servicios__content {
	padding-top: 38px;
}

.unei-servicios .unei-servicios__mark {
	display: block;
	width: 67px;
	height: auto;
	max-width: none;
	margin: 0 0 4px;
}

/*
 * Widths live on the text elements, never on the padded column: Astra sets
 * box-sizing: border-box globally, so a max-width there would include the
 * 120px gutter and shrink every line.
 */
.unei-servicios .unei-servicios__heading {
	margin: 0 0 16px;
	max-width: 500px;
	color: var(--unei-ink);
	font-family: "Open Sans", sans-serif;
	font-size: clamp(24px, 2.5vw, 36px); /* 36px @1440 */
	font-weight: 800;
	line-height: 1.1111; /* 40/36 */
	letter-spacing: -0.01em;
}

.unei-servicios .unei-servicios__subtitle {
	margin: 0 0 16px;
	max-width: 476px;
	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 */
}

.unei-servicios .unei-servicios__body {
	margin: 0 0 32px;
	max-width: 485px;
	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-servicios__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.unei-servicios .unei-servicios__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-servicios .unei-servicios__btn--primary {
	background: var(--unei-yellow);
	color: var(--unei-dark);
}

.unei-servicios .unei-servicios__btn--secondary {
	background: var(--unei-dark);
	color: var(--unei-white);
}

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

.unei-servicios__arrow {
	flex: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.unei-servicios .unei-servicios__btn,
	.unei-servicios .unei-servicios__tab {
		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-servicios {
		min-height: 0;
		padding-bottom: 0;
	}

	.unei-servicios__inner,
	.unei-servicios__content {
		/*
		 * --unei-serv-rail, not --unei-servicios-rail: the second name does not
		 * exist, so the declaration was invalid and dropped, and the tab row ran
		 * flush to the right edge of the screen with air only on its left.
		 */
		padding-right: var(--unei-serv-rail);
	}

	.unei-servicios__salmon {
		display: none;
	}

	/*
	 * The tab row is one pill 693 wide, which on a phone runs 343 past the
	 * edge. It keeps its shape and scrolls sideways instead of wrapping: three
	 * stacked pills inside a rounded box stop reading as a tab bar.
	 */
	.unei-servicios__tabs {
		display: flex;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	.unei-servicios .unei-servicios__tab {
		flex: none;
	}

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

/*
 * The tab bar keeps scrolling sideways, but at 48px tall with 16px type each
 * pill was eating a third of the screen width, so two of the three were always
 * off-frame. Shorter pills and smaller type fit the first two whole and hint at
 * the third, which is what tells anyone there is more to the right.
 */
@media ( max-width: 640px ) {
	.unei-servicios__tabs {
		padding: 4px;
	}

	/*
	 * A scroll container drops its end padding once the content overflows, so
	 * the last pill ends flush against the rounded corner while the first one
	 * has its 4px. The spacer puts that air back.
	 */
	.unei-servicios__tabs::after {
		content: "";
		flex: none;
		width: 4px;
	}

	.unei-servicios .unei-servicios__tab {
		padding: 0 14px;
		height: 38px;
		font-size: 14px;
		line-height: 38px;
	}
}

/* Editor only -------------------------------------------------------------
 * The pickers and the tab 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-servicios__marca-edit {
	position: relative;
	z-index: 3;
	max-width: 320px;
	margin: 0 0 8px;
}

.unei-servicios__tabs-edit {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Same column as the photo, so the picker lands on the picture it changes. */
.unei-servicios__foto-edit {
	position: absolute;
	z-index: 3;
	left: 47.8472%;
	bottom: 40px;
	box-sizing: border-box;
	width: 41.3194%;
	padding: 0 16px;
}

@media ( max-width: 900px ) {
	.unei-servicios__foto-edit {
		position: static;
		width: auto;
		padding: 16px 0 0;
	}
}