/*
 * Página About: cifras destacadas y principios.
 *
 * Referencia: docs/pages/about-desktop.txt, Section2 [0,1646 1440x1017] y
 * Section3 [0,2663 1440x1638]. Solo consume tokens.
 */

.acturion-figures,
.acturion-principles {
	--fig-col:       396px; /* [figma] columna de texto */
	--fig-row-gap:   40px;  /* [figma] filas en 0, 215 y 411 con 175/156 de alto */
	--card:          396px; /* [figma] tarjeta de principios */
	--card-pad:      40px;  /* [figma] padding interno */
	--card-graphic:  297px; /* [figma] alto del gráfico de barras */
	--card-badge:    48px;  /* [figma] círculo del número */

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

/* ================================================================ Cifras */

.acturion-figures { position: relative; }

/* [figma] la franja recorre la sección entera por la derecha [1263,0 75x817]. */
.acturion-figures__strip {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--acturion-strip);
}

.acturion-figures__list {
	margin: var(--acturion-space-10) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--fig-row-gap);
}

/* [render] Cada fila cierra con un filete de 2px a todo el ancho del contenido, con 24
   de aire por encima: medido en about-desktop.png, filas 505-506, 701-702 y 897-898 de
   la Section2, siempre de x=102 a x=1337. */
.acturion-figures__row {
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5);
	padding-bottom: var(--acturion-space-5);
	border-bottom: 2px solid var(--acturion-dark-blue);
}

.acturion-figures__label {
	margin: 0;
	font-size: var(--acturion-h3);
	line-height: var(--acturion-lh-heading);
}

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

/* [figma MCP] caja de 130 = «Numbers_small» Light 145/0.9 (--acturion-display-sm). */
.acturion-figures__value {
	margin: 0;
	font-size: var(--acturion-display-sm);
	line-height: var(--acturion-lh-display);
	font-weight: var(--acturion-weight-light);
	font-variant-numeric: tabular-nums;
}

/* ================================================================ Principios */

.acturion-principles__list {
	list-style: none;
	counter-reset: none;
	margin: var(--acturion-space-10) 0 0;
	padding: 0;
	display: grid;
	gap: var(--acturion-space-5);
}

.acturion-principles__card {
	padding: var(--card-pad);
	background: var(--acturion-light-seashell);
	display: flex;
	flex-direction: column;
	transition: background var(--acturion-duration) var(--acturion-ease);
}

/* [convención] Figma es estático; mismo hover sutil que el resto de tarjetas del sitio. */
.acturion-principles__card:hover,
.acturion-principles__card:focus-within {
	background: var(--acturion-soft-beige);
}

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

/* Cinco barras con los dos degradados apilados y su propio corte, como en Services. */
.acturion-principles__graphic {
	display: flex;
	height: var(--card-graphic);
}

.acturion-principles__bar {
	flex: 1 1 0;
	min-width: 0;
	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)) no-repeat;
	/* Ver la nota junto a .acturion-service__bar en sections.css: mismo barrido de
	   acturion-reveal.js, mismo @property --bar-split de tokens.css. */
	transition: --bar-split var(--acturion-duration-reveal) var(--acturion-ease);
	transition-delay: calc(var(--i, 0) * var(--acturion-stagger-reveal));
}

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

/* [figma] la fila del título arranca 77 por debajo del gráfico (414 - 337). Van los 77
   exactos y no --acturion-space-10 (80): son 3px por tarjeta, 6 por sección. */
.acturion-principles__head {
	margin-top: 77px;
	display: flex;
	align-items: flex-start;
	gap: var(--acturion-space-7); /* [figma] número en 0 y título en 88 => 48 + 40 */
}

.acturion-principles__number {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--card-badge);
	height: var(--card-badge);
	border: 1px solid var(--acturion-dark-blue);
	border-radius: 50%;
	font-size: var(--acturion-body-18);
	line-height: 1;
}

.acturion-principles__title {
	margin: 0;
	font-size: var(--acturion-h3);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
}

/* [figma] el texto arranca 82 por debajo del inicio de la fila del título. */
.acturion-principles__text {
	margin: var(--acturion-space-5) 0 0;
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

@media (min-width: 768px) {

	/* [figma] texto a la izquierda (396) y cifra alineada al borde derecho. */
	.acturion-figures__row {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--acturion-space-5);
	}

	.acturion-figures__text  { flex: 0 1 var(--fig-col); }
	.acturion-figures__value { flex: 0 0 auto; text-align: right; }

	/* auto-fit y no un 3 fijo: a 1440 los 1236 de contenido siguen dando 3 columnas
	   de 396 exactos, pero a 768 caben 2 en vez de aplastar tres a 204. */
	.acturion-principles__list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	/* En desktop la rejilla enseña todas las tarjetas: sin carrusel, fuera flechas. */
	.acturion-principles__controls { display: none; }
}

/* [figma] mobile (Section4 de Asset/Insurance): las tarjetas pasan a carrusel de UNA
   por pantalla —scroll nativo con snap, como «Why Acturion?»— con las flechas
   debajo y a la derecha (Controller en 215,707). */
@media (max-width: 767px) {
	.acturion-principles__list {
		display: flex;
		gap: var(--acturion-space-5);
		margin-top: var(--acturion-space-8); /* [figma] intro (139) -> tarjetas (187) */
		overflow-x: auto;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.acturion-principles__card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	/* [figma] el gráfico de barras mide 247 en la tarjeta mobile, no 297. */
	.acturion-principles__graphic { height: 247px; }

	/* [figma] gráfico (287) -> fila del número (319). */
	.acturion-principles__head { margin-top: var(--acturion-space-6); }

	.acturion-principles__controls {
		margin-top: var(--acturion-space-5); /* [figma] tarjetas (683) -> controles (707) */
		display: flex;
		justify-content: flex-end;
		gap: var(--acturion-space-4); /* [figma] mismos 16 del resto de controles */
	}
}

/* ================================================================ Our Story */
/* [figma] 1608:9569 > Section2: subtítulo y primer párrafo en la columna 1, segundo
   párrafo en la 2, filete a todo el ancho y una segunda fila de dos párrafos corrida
   a las columnas 2-3; franja por el borde derecho. En mobile (1582:9801 > Section3)
   todo se apila y el filete queda entre las dos filas — el `order` lo colocan. */

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

.acturion-story__strip {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--acturion-strip);
	/* [render] la franja de Our Story es SOLO Gradient2 (sky -> tan), sin el tramo
	   azul oscuro: visible en el render desktop del branch. Pisa el .acturion-strip
	   genérico de components.css. */
	background: var(--acturion-gradient-2);
}

/* [figma] en mobile las franjas de borde de sección se afinan a 10 (Graphics
   341,116 10x864 en el volcado), no los 48 del token. OJO: la de .acturion-numbered
   lleva su override en SU bloque, más abajo — su regla base viene después de esta
   media query y, a especificidad igual, le ganaba: el 10px nunca aplicaba. */
@media (max-width: 767px) {
	.acturion-story__strip,
	.acturion-figures__strip {
		width: 10px;
	}
}

.acturion-story__grid {
	margin-top: var(--acturion-space-10); /* [figma] titular (176) -> subtítulo (256) */
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5);
}

/* [figma MCP 1608:9625] Medium 32/0.9 (mobile 24): el subtítulo nivel-3 de siempre
   (--acturion-subtitle), NO el H3 del kit — iba en h3 Regular y se veía más flaco. */
.acturion-story__subtitle {
	margin: 0;
	order: 0;
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: var(--acturion-lh-heading);
}

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

.acturion-story__text--1 { order: 1; }
.acturion-story__text--2 { order: 2; }
.acturion-story__text--3 { order: 4; }
.acturion-story__text--4 { order: 5; }

.acturion-story__divider {
	order: 3;
	width: 100%;
	margin: var(--acturion-space-4) 0;
	border: 0;
	border-top: 1px solid var(--acturion-dark-blue);
}

@media (min-width: 1024px) {
	.acturion-story__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--acturion-space-5);
		row-gap: var(--acturion-space-5); /* [figma] subtítulo (58) -> párrafos (82) */
	}

	.acturion-story__subtitle { grid-column: 1; grid-row: 1; }
	.acturion-story__text--1  { grid-column: 1; grid-row: 2; }
	.acturion-story__text--2  { grid-column: 2; grid-row: 2; }
	.acturion-story__divider  { grid-column: 1 / -1; grid-row: 3; }
	.acturion-story__text--3  { grid-column: 2; grid-row: 4; }
	.acturion-story__text--4  { grid-column: 3; grid-row: 4; }
}

/* ============================================================ Cabecera de sección */
/* [figma] titular a la izquierda y párrafo de entrada de 396 en la tercera columna. */

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

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

@media (min-width: 1024px) {
	.acturion-sectionhead {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--acturion-space-5);
	}

	.acturion-sectionhead .acturion-section__heading { flex: 1 1 auto; min-width: 0; }
	.acturion-sectionhead__intro { flex: 0 0 var(--acturion-col); max-width: var(--acturion-col); }
}

/* ============================================================ Lista numerada */

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

/* [figma] la franja abarca SOLO la lista (top/bottom del 01 al filete del último
   ítem, Insurance 1365:10300/12610) y sale a sangre hasta el borde de la pantalla:
   el -gutter empuja su borde derecho desde el límite del contenido (351 mobile,
   1338 desktop) hasta el del marco (375 / 1440). */
.acturion-numbered__body {
	position: relative;
	margin-top: var(--acturion-space-10);
}

.acturion-numbered__strip {
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(-1 * var(--acturion-gutter));
	width: var(--acturion-strip);
}

/* [figma] mobile: 10px (Insurance 1365:10300, 10x1614), no los 48 del token. El
   override va AQUÍ, después de la regla base, porque a especificidad igual gana el
   último — en el bloque de arriba del archivo quedaba pisado. */
@media (max-width: 767px) {
	.acturion-numbered__strip {
		width: 10px;
	}
}

.acturion-numbered__list {
	list-style: none;
	margin: 0; /* el aire con la cabecera lo pone .acturion-numbered__body */
	padding: 0;
	display: grid;
	gap: var(--acturion-space-5);
}

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

/* [figma MCP] caja de 130 = «Numbers_small» Light 145/0.9 (1365:12585). */
.acturion-numbered__number {
	font-size: var(--acturion-display-sm);
	line-height: var(--acturion-lh-display);
	font-weight: var(--acturion-weight-light);
	font-variant-numeric: tabular-nums;
}

/* [figma MCP] el título del ítem es el subtítulo Medium 32/0.9 (1365:12587); la caja
   de 58 (2 líneas de 29) también cuadraba con 24/1.2. Arranca 162 desde el numeral. */
.acturion-numbered__title {
	margin: var(--acturion-space-6) 0 0;
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

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

/* [figma] mobile (Section2 de Asset/Insurance): el numeral ocupa su fila; debajo,
   título y descripción en dos MEDIAS columnas (156 + 16 + 155) y un filete de 2px a
   todo el ancho 16 por debajo. Paso entre ítems 48 (stride 264 = 216 + 48). */
@media (max-width: 767px) {
	.acturion-numbered__body {
		margin-top: var(--acturion-space-8); /* [figma] intro (192) -> lista (240) */
	}

	.acturion-numbered__list {
		gap: var(--acturion-space-8);
	}

	.acturion-numbered__item {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--acturion-space-4);
		align-items: start;
		padding-bottom: var(--acturion-space-4);
		border-bottom: 2px solid var(--acturion-dark-blue);
	}

	.acturion-numbered__number { grid-column: 1 / -1; }

	.acturion-numbered__title,
	.acturion-numbered__text {
		margin-top: var(--acturion-space-6); /* [figma] numeral (90) -> fila (122) */
	}

	.acturion-numbered__text { font-size: var(--acturion-body-16); }
}

@media (min-width: 768px) {
	/* auto-fit: a 1440 los 1236 de contenido dan tres columnas de 396 exactos y a 768
	   pasa a dos, en vez de aplastar tres a 204. */
	.acturion-numbered__list {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

@media (min-width: 1200px) {
	/* [figma] la primera fila empieza en la SEGUNDA columna: los puntos 01 y 02
	   quedan a la derecha y la siguiente ocupa las tres. Solo tiene sentido con las
	   tres columnas puestas, de ahí el corte a 1200. */
	.acturion-numbered__list--offset > .acturion-numbered__item:first-child {
		grid-column-start: 2;
	}
}