/*
 * Secciones de contenido de Home: «About Us» y «Our Services».
 *
 * Referencia: docs/pages/home-desktop.txt, Section2 [0,800 1440x656] y
 * Section3 [0,1456 1440x986], con el render en assets-figma/screens/home-desktop.png.
 * Solo consume tokens; lo que el diseño fija y no es token va como custom property.
 */

.acturion-about,
.acturion-service {
	--section-photo:    396px; /* [figma] columna de la foto (75 franja + 321 imagen) */
	--section-photo-h:  300px; /* [figma] alto de la foto de About */
	--section-col:      396px; /* [figma] columna de texto; = --acturion-col */
	--section-gap-head: 80px;  /* [figma] titular (76) -> contenido (156) */
	--section-gap-sub:  24px;  /* [figma] subtítulo (29) -> texto (53) */
	--section-bars-h:   297px; /* [figma] alto del gráfico de barras */

	padding-block: var(--acturion-space-section);
	color: var(--acturion-dark-blue);
}

/* [figma] En «Portfolio Companies» (Insurance, Section3) los dos bloques NO son
   secciones propias: viven dentro de una sola, separados 120 (Portfolio1 acaba en 739
   y Portfolio2 abre en 859). Sin esto, cada uno metía sus 100+100 de padding y la
   sección crecía 337 por bloque. */
.acturion-service--stacked {
	padding-block: 0;
}

/* Elementor envuelve cada widget en su propio div, así que los dos <section> no son
   hermanos directos: el adyacente se busca a nivel de los envoltorios. */
.elementor-widget:has(> .acturion-service--stacked) + .elementor-widget > .acturion-service--stacked,
.acturion-service--stacked + .acturion-service--stacked {
	margin-top: 120px;
}

/* Titular de sección: 64 en desktop, 28 en mobile — igual que «Latest News». */
.acturion-section__heading {
	margin: 0;
	font-size: var(--acturion-h2);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
}

/* ============================================================ About Us */

.acturion-about__body {
	margin-top: var(--section-gap-head);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

.acturion-about__photo {
	display: flex;
	height: var(--section-photo-h);
}

.acturion-about__image {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--acturion-soft-beige);
}

.acturion-about__image img {
	width: 100%;
	/* !important: Elementor trae `.elementor img { height: auto }` (0,1,1), empatada en
	   especificidad con este selector — el empate lo decidiría el orden de encolado, y sin
	   esto la foto sale a su alto intrínseco en vez de cubrir el marco. */
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.acturion-about__columns {
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

/* [figma] mobile (Section2 de Home 1582:8093 y el bloque central de Careers): la foto
   va DESPUÉS de los textos y el enlace (Content 0-572, Photo en 604), a 32 y con 190
   de alto. En el DOM la foto va primero (orden de lectura del desktop); `order` la
   baja solo visualmente. */
@media (max-width: 767px) {
	.acturion-about__body {
		margin-top: var(--acturion-space-8); /* [figma] titular (34) -> contenido (82) */
		gap: var(--acturion-space-6);
	}

	.acturion-about__photo {
		order: 1;
		height: 190px;
	}
}

.acturion-about__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* [figma] branch: subtítulos de columna en Medium 32/0.9 (token --acturion-subtitle). */
.acturion-about__subtitle {
	margin: 0 0 var(--section-gap-sub);
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

.acturion-about__text {
	margin: 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

/* [figma] el enlace de la segunda columna queda pegado al fondo del bloque. */
.acturion-about__column .acturion-link {
	margin-top: var(--acturion-space-8);
	width: 100%;
}

/* ============================================================ Our Services */

/* [figma] aquí el salto es 106, no 80: el bloque arranca en 156 y dentro de él el
   nombre y el gráfico van a 26, porque encima queda la caja del numeral de 216px
   que el frame de Home tiene OCULTA (156 + 26 = 182). */
.acturion-service__body {
	margin-top: calc(var(--section-gap-head) + 26px);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5);
}

/* [figma MCP] el numeral es «Numbers_big»: Light 288/0.9 (1582:8402; la caja de 259
   tambien cuadraba con 216/1.2, el MCP zanjo). En Home esta capa va oculta. */
.acturion-service__number {
	display: block;
	font-size: var(--acturion-display);
	line-height: var(--acturion-lh-display);
	font-weight: var(--acturion-weight-light);
	font-variant-numeric: tabular-nums;
}

/* [figma] branch: el nombre del servicio es un subtítulo Medium 32/0.9, no un h3
   Regular — leído por MCP de los nodos de texto (Home «Asset Management» 1582:8403:
   Medium 32px lh 0.9; Insurance «American Gulf» 1365:12618, caja de 29 = 32x0.9).
   La caja de línea de 24/1.2 mide lo mismo (28.8), por eso el volcado no lo
   distinguía y quedó en h3 Regular. */
.acturion-service__name {
	margin: 0;
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

/* Nombre enlazado (Insurance: cada compañía puede apuntar a su web). Mismo trato
   que el título de las tarjetas de News: se ve como la etiqueta y solo se subraya
   al pasar el ratón o al enfocar con teclado. */
.acturion-service__name a {
	color: inherit;
	text-decoration: none;
}

.acturion-service__name a:hover,
.acturion-service__name a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Gráfico de barras: 11 barras iguales, cada una con los dos degradados apilados y
   un corte propio. [figma] los cortes son 149, 96 y 218 sobre 297, repitiendo. */
.acturion-service__graphic {
	display: flex;
	height: var(--section-bars-h);
}

.acturion-service__bar {
	flex: 1 1 0;
	min-width: 0;
	/* +1px de solape entre capas: ver la nota en .acturion-cta__bar (cta.css) — sin
	   él, el redondeo dejaba una rendija oscura al pie del tramo azul. */
	background:
		var(--acturion-gradient-1) left top / 100% var(--bar-split) no-repeat,
		var(--acturion-gradient-2) left bottom / 100% calc(100% - var(--bar-split) + 1px) no-repeat;
	/* [figma] UI Kit, página "Animation": acturion-reveal.js arranca --bar-split en un
	   29.5% uniforme (liso, sin escalones) y lo suelta a su valor real al entrar en
	   pantalla; este `transition` es lo que anima ese cambio. `--i` (en línea, puesto
	   por PHP) escalona el barrido de izquierda a derecha. Requiere el `@property
	   --bar-split` de tokens.css: sin registrar el tipo, el navegador no interpola
	   custom properties, solo salta de un valor a otro. */
	transition: --bar-split var(--acturion-duration-reveal) var(--acturion-ease);
	transition-delay: calc(var(--i, 0) * var(--acturion-stagger-reveal));
}

.acturion-service__bar:nth-child(3n + 1) { --bar-split: 50.17%; } /* 149 / 297 */
.acturion-service__bar:nth-child(3n + 2) { --bar-split: 32.32%; } /*  96 / 297 */
.acturion-service__bar:nth-child(3n + 3) { --bar-split: 73.40%; } /* 218 / 297 */

@media (prefers-reduced-motion: reduce) {
	.acturion-service__bar { transition: none; }
}

.acturion-service__eyebrow {
	margin: 0 0 var(--acturion-space-4);
	font-size: var(--acturion-description);
	line-height: var(--acturion-lh-body);
	/* [render] el «What we do» va más tenue que el cuerpo. */
	color: color-mix(in srgb, var(--acturion-dark-blue) 45%, transparent);
}

.acturion-service__text p {
	margin: 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

.acturion-service__text p + p { margin-top: 1.2em; }

.acturion-service__action { display: flex; }
.acturion-service__action .acturion-link { width: 100%; }

/* ============================================================ >= 768px */

@media (min-width: 768px) {

	/* About: foto de 396 y, al lado, el bloque de 816 en dos columnas. */
	.acturion-about__body {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--acturion-space-5);
	}

	.acturion-about__photo   { flex: 0 1 var(--section-photo); min-width: 0; }
	.acturion-about__columns { flex: 1 1 0; min-width: 0; }

	/* Home: foto estrecha (396) y dos columnas de texto al lado (816). */
	.acturion-about--photo-narrow .acturion-about__columns {
		flex-direction: row;
		gap: var(--acturion-space-5);
	}

	.acturion-about--photo-narrow .acturion-about__column { flex: 1 1 0; min-width: 0; }

	/* About: foto ancha (816) y UNA columna de 396 con los bloques apilados
	   [figma about-desktop Section1: Photo 816 y Content 396]. */
	.acturion-about--photo-wide .acturion-about__photo {
		flex: 1 1 0;
		aspect-ratio: 816 / 490;
		height: auto;
	}

	.acturion-about--photo-wide .acturion-about__columns {
		flex: 0 1 var(--section-col);
		flex-direction: column;
		gap: var(--acturion-space-8);
	}

	/* Services: el nombre a la izquierda; a la derecha el gráfico a lo ancho de dos
	   columnas, el texto en la primera y el enlace en la segunda.
	   [figma] nombre en x=0, gráfico y texto en x=420, enlace en x=840. */
	.acturion-service__body {
		display: grid;
		/* Tres columnas iguales, no tres de 396 fijos: a 1440 el contenido son 1236 y
		   (1236 - 48) / 3 = 396 exactos, pero por debajo se encogen. Fijas metían
		   1236 en un contenedor de 662 a 768px y sacaban scroll horizontal en toda
		   la página. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--acturion-space-5);
		row-gap: var(--acturion-space-5);
		align-items: start;
	}

	.acturion-service__name    { grid-column: 1; grid-row: 1; }
	.acturion-service__label   { grid-column: 1; grid-row: 1; }
	.acturion-service__graphic { grid-column: 2 / span 2; grid-row: 1; }
	.acturion-service__text    { grid-column: 2; grid-row: 2; }
	.acturion-service__action  { grid-column: 3; grid-row: 2; align-self: end; }
}

/* ============================================================ Why Acturion? */
/*
 * Referencia: docs/pages/home-desktop.txt, Section4 [0,2442 1440x836].
 * Titular con dos botones redondos a la derecha; debajo, la lista de argumentos
 * (341) y el carrusel de tarjetas (396 cada una), que se sale por el borde derecho.
 * Tarjeta [figma 1582:8576]: 396x480, padding 40, icono 160, filete a 184,
 * titular a 224, cuerpo a 334.
 */

.acturion-why {
	--why-points:    341px; /* [figma] columna de la lista de argumentos */
	--why-card:      396px; /* [figma] ancho de tarjeta */
	--why-card-h:    480px; /* [figma] alto de tarjeta */
	--why-card-pad:  40px;  /* [figma] padding interno */
	--why-icon:      160px; /* [figma] icono */
	--why-gap-head:  80px;  /* [figma] titular (76) -> contenido (156) */

	padding-block: var(--acturion-space-section);
	color: var(--acturion-dark-blue);
	/* El carrusel desborda a la derecha: sin esto aparecería scroll horizontal. */
	overflow: hidden;
}

.acturion-why__head {
	display: flex;
	/* [figma] los botones se alinean con la base del titular (y=28 en una fila de 76). */
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--acturion-space-5);
}

.acturion-why__controls {
	display: flex;
	gap: var(--acturion-space-4); /* [figma] botones en 0 y 64 => 48 + 16 */
	flex: 0 0 auto;
}

.acturion-why__body {
	margin-top: var(--why-gap-head);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

/* ---------------------------------------------------------------- Argumentos */

.acturion-why__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5); /* [figma] 51 -> 75 y 160 -> 184 = 24 */
}

.acturion-why__point {
	display: flex;
	/* [figma] icono y texto arrancan ambos en y=0: flecha al TOP de la primera línea.
	   Sin esto, el stretch por defecto estira el span del icono al alto del párrafo y
	   el `svg { height: auto }` global de base.css estira el SVG con él — la flecha
	   quedaba flotando centrada contra el bloque entero. */
	align-items: flex-start;
	gap: var(--acturion-space-4); /* [figma] icono 24, texto en x=40 */
	font-size: var(--acturion-body-14);
	line-height: var(--acturion-lh-body);
}

.acturion-why__point-icon { flex: 0 0 auto; display: inline-flex; }

/* ---------------------------------------------------------------- Carrusel */

.acturion-why__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--acturion-space-5);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Deja respirar el foco de la tarjeta sin cortar la sombra del anillo. */
	scroll-padding-inline: var(--acturion-space-1);
}

.acturion-why__cards::-webkit-scrollbar { display: none; }

.acturion-why__card {
	scroll-snap-align: start;
	/* [figma] 396 en desktop y 327 en mobile, que es justo el ancho de contenido. */
	flex: 0 0 min(var(--why-card), 100%);
	padding: var(--why-card-pad);
	background: var(--acturion-light-seashell);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* [figma] UI Kit (189:12810 y análogos): el fondo de la tarjeta NO cambia en Hover —
   lo único que cambia es que el icono pierde su gráfico de fondo (ver
   .acturion-why__card-icon--hover) y queda solo el círculo con el degradado plano. */
.acturion-why__card-icon-wrap {
	position: relative;
	display: block;
	width: var(--why-icon);
	height: var(--why-icon);
}

/* [figma] UI Kit, página "Animation" (sección «Icon animation», nodos 189:12783 y
   análogos): el gráfico de cada icono no aparece de golpe — un filo recto barre desde
   la esquina inferior izquierda hasta cubrirlo entero. NO es la misma silueta en los
   seis: se abrió cada SVG (assets/img/why-acturion/*.svg) para ver su propio dibujo
   de fondo en vez de adivinar sobre la referencia, y salieron cuatro familias
   distintas (Why::WIPE_SHAPES manda cuál usa cada icono):
     - institutional-asset-strategies (Dollar): tres barras a distinta altura ->
       "steps" — el SVG mismo trae tres rectángulos de 40/80/160 de alto.
     - robust-capital-base (Card): dos triángulos en zigzag -> "chevron".
     - trusted-partnership (Infinity) y tailored-financial-solutions (Target): dos
       triángulos enfrentados por el centro -> "diamond".
     - returns (Eye) y deep-sector-expertise (Magnifier): esquina cortada en
       diagonal -> "diagonal" (la familia por defecto si el wrap no trae
       [data-wipe], y la que ya traían las seis antes de separarlas).

   --wipe es el único valor que anima en las cuatro (registrado en tokens.css): un
   polygon() calcula sus vértices a partir de ese único porcentaje, así que se mueven
   juntos en vez de a saltos. En "diagonal" dos vértices se alejan del ancla al DOBLE
   de velocidad por los bordes izquierdo e inferior; a --wipe:50% ya tocan las
   esquinas opuestas y de ahí en adelante se salen de la caja, pero como el navegador
   igual recorta al borde del propio icono, el efecto es un barrido que termina
   cubriendo el cuadro completo a --wipe:100%. Las otras tres familias son variaciones
   del mismo truco con más vértices. */
.acturion-why__card-icon {
	position: absolute;
	inset: 0;
	width: var(--why-icon);
	/* !important: mismo empate de especificidad con `.elementor img { height: auto }`. */
	height: var(--why-icon) !important;
	display: block;
	--wipe: 0%;
	clip-path: polygon(0% 100%, 0% calc(100% - var(--wipe) * 2), calc(var(--wipe) * 2) 100%);
	transition: opacity var(--acturion-duration) var(--acturion-ease),
		--wipe var(--acturion-duration-reveal) var(--acturion-ease);
}

/* "chevron": el ancla y los dos bordes siguen igual que en diagonal, pero un tercer
   vértice a mitad de camino se queda MÁS CERCA del ancla que la línea recta —
   abre una muesca en el filo, el "zigzag" de las dos flechas del icono. */
.acturion-why__card-icon-wrap[data-wipe="chevron"] .acturion-why__card-icon {
	clip-path: polygon(
		0% 100%,
		0% calc(100% - var(--wipe) * 2),
		calc(var(--wipe) * 1.1) calc(100% - var(--wipe) * 1.1),
		calc(var(--wipe) * 2) 100%
	);
}

/* "diamond": mismo cuarto vértice que chevron, pero MÁS LEJOS del ancla que la recta
   — en vez de una muesca hacia adentro, un filo que abulta hacia afuera. */
.acturion-why__card-icon-wrap[data-wipe="diamond"] .acturion-why__card-icon {
	clip-path: polygon(
		0% 100%,
		0% calc(100% - var(--wipe) * 2),
		calc(var(--wipe) * 1.3) calc(100% - var(--wipe) * 1.3),
		calc(var(--wipe) * 2) 100%
	);
}

/* "steps": tres barras ancladas al borde inferior, igual de anchas, que crecen a
   distinta velocidad (más rápido la de la derecha) hasta llenar el cuadro entero —
   min() detiene cada una en el 100% de su propio alto en vez de seguir de largo. */
.acturion-why__card-icon-wrap[data-wipe="steps"] .acturion-why__card-icon {
	clip-path: polygon(
		0% 100%,
		0% calc(100% - min(var(--wipe) * 1, 100%)),
		33.33% calc(100% - min(var(--wipe) * 1, 100%)),
		33.33% calc(100% - min(var(--wipe) * 1.6, 100%)),
		66.66% calc(100% - min(var(--wipe) * 1.6, 100%)),
		66.66% calc(100% - min(var(--wipe) * 3, 100%)),
		100% calc(100% - min(var(--wipe) * 3, 100%)),
		100% 100%
	);
}

/* La capa de abajo (con patrón) se revela una sola vez, al entrar en pantalla —
   acturion-reveal.js pone `is-revealed`. La de arriba (plana, --hover) reutiliza el
   mismo barrido pero disparado por :hover/:focus-within, así que se puede repetir
   cada vez que el ratón entra y sale de la tarjeta. */
.acturion-why__card-icon-wrap.is-revealed .acturion-why__card-icon:not(.acturion-why__card-icon--hover) {
	--wipe: 100%;
}

.acturion-why__card:hover .acturion-why__card-icon--hover,
.acturion-why__card:focus-within .acturion-why__card-icon--hover {
	--wipe: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.acturion-why__card-icon { transition: none; }
	.acturion-why__card-icon:not(.acturion-why__card-icon--hover) { --wipe: 100%; }
}

/* [render] Medido en assets-figma/screens/home-desktop.png sobre la tarjeta de
   «Trusted Partnership» [522,2698 396x480]: el icono acaba en 200, el filete ocupa las
   filas 222-223 (2px llenos, sin antialias — un filete de 1px del sistema, como el del
   «Secondary button», sale de una sola fila) y el titular arranca en 267. O sea 22 de
   hueco, 2 de filete y 43 hasta el texto. */
.acturion-why__card-title {
	margin: 22px 0 0;
	padding-top: 43px;
	border-top: 2px solid var(--acturion-dark-blue);
	align-self: stretch;
	/* [figma] branch: las 6 instancias del Home (I1582:8576;873:17772 y análogas)
	   pisan el 36px del componente del kit y van todas en Medium 32/0.9 — el mismo
	   subtítulo que Our Services. Leído por MCP; 24/1.2 daba la misma caja de línea
	   (28.8) y por eso el error no se veía en el volcado. */
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

/* [figma] titular termina en 282 y el cuerpo arranca en 334. */
.acturion-why__card-text {
	margin: 52px 0 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

/* [figma home-mobile] Controller [215,838] va DEBAJO de Cards [0,366 327x448], a la
   derecha y a 24px: con las flechas arriba, al deslizar tarjetas quedan fuera de
   pantalla. La cabecera se disuelve (display: contents) para poder reordenar los
   controles al final sin duplicar markup. */
@media (max-width: 767px) {

	.acturion-why .acturion-container {
		display: flex;
		flex-direction: column;
	}

	.acturion-why__head { display: contents; }

	.acturion-why__controls {
		order: 1;
		align-self: flex-end;
		margin-top: var(--acturion-space-5);
	}
}

@media (min-width: 768px) {

	.acturion-why__body {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--acturion-space-5);
	}

	/* [figma] el texto mide 341 pero la COLUMNA es de 396: las tarjetas empiezan en
	   420 (396 + 24 de hueco), no justo detrás del texto. */
	.acturion-why__card   { min-height: var(--why-card-h); }

	.acturion-why__points { flex: 0 0 var(--acturion-col); }
	.acturion-why__point   { max-width: var(--why-points); }

	/* El carrusel se sale del contenedor hasta el borde de la ventana, como en el
	   diseño (el bloque interior mide 1334 frente a los 1236 de contenido). */
	.acturion-why__cards {
		flex: 1 1 auto;
		min-width: 0;
		margin-right: calc(var(--acturion-gutter) * -1);
		padding-right: var(--acturion-gutter);
	}
}

@media (prefers-reduced-motion: reduce) {
	
	.acturion-why__cards   { scroll-behavior: auto; }
}

/* ============================================================ Columnas de texto */
/* [figma career-desktop «Benefits» 0,748 1236x124]: tres columnas de 396 con 24. */

.acturion-columns {
	padding-block: var(--acturion-space-section);
	color: var(--acturion-dark-blue);
}

.acturion-columns__row {
	display: grid;
	gap: var(--acturion-space-5);
}

/* [figma] branch: mismo estilo de subtítulo que .acturion-about__subtitle. */
.acturion-columns__title {
	margin: 0 0 var(--acturion-space-5);
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

.acturion-columns__text {
	margin: 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

/* Viñetas de la segunda columna de About [figma career: «We Value:»]. */
.acturion-about__bullets {
	list-style: none;
	margin: var(--acturion-space-5) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-4); /* [figma] elementos en 0, 40 y 80 sobre cajas de 24 */
}

.acturion-about__bullet {
	display: flex;
	/* Ver la nota en .acturion-why__point: sin esto el SVG se estira al alto del texto. */
	align-items: flex-start;
	gap: var(--acturion-space-4); /* [figma] icono 24 y texto a 40 */
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

.acturion-about__bullet-icon { flex: 0 0 auto; display: inline-flex; }

@media (min-width: 768px) {
	.acturion-columns__row {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	}
}

/* [figma 1582:7493 «Benefits» de Career mobile] apilados, los bloques van a 48 de
   aire (frames en 0/140/280 sobre cajas de 92) y cada uno cierra con un filete de
   2px a 8px bajo el texto (stroke inferior del frame 1582:7494 — no sale en el
   volcado de metadata, solo en el nodo). SOLO mobile: el desktop (1608:9975) va
   sin filete, con pb 24 para alinear la fila. */
@media (max-width: 767px) {
	.acturion-columns__row { gap: var(--acturion-space-8); }

	.acturion-columns__item {
		padding-bottom: var(--acturion-space-2);
		border-bottom: 2px solid var(--acturion-dark-blue);
	}
}

/* ============================================================ Bloques apilados */
/* Cuando varios de estos bloques viven dentro de UNA sección del diseño en vez de ser
   secciones sueltas, se les quita el padding propio y el hueco lo pone el contenedor
   de Elementor. Sin esto cada bloque metía sus 100+100 y la página crecía: en Careers
   sobraban 148 y en «Portfolio Companies» de Insurance, 337 por bloque.

   Va AL FINAL del archivo a propósito: pisa el `padding-block` que cada bloque declara
   más arriba sin subir la especificidad. */
.acturion-about--stacked,
.acturion-columns--stacked,
.acturion-service--stacked {
	padding-block: 0;
}