/*
 * Leadership: secciones de personas y su ficha ampliada.
 *
 * Referencias: docs/pages/leadership-desktop.txt (Section1 [0,0 1440x1111]),
 * -mobile.txt (Section1 [24,136 327x788]) y leadership-popup-desktop.txt
 * (Pop-up 878x597). Solo consume tokens.
 *
 * El área gráfica sigue el branch «Confirmed» (fileKey zM7XVlil5TUhDeflLpR16J):
 * tres composiciones de colage (--s1/--s2/--s3) con los bloques de degradado detrás
 * y el retrato delante. Ver el bloque [figma branch] más abajo.
 */

.acturion-leaders {
	--leader-card:   291px; /* [figma] ancho de la foto/botón dentro de la tarjeta */
	/* [figma] paso real entre tarjetas: medido en 1365:8356, las 4 fotos arrancan en
	   x=0/420/840/1260 — un paso de 420, no de 291+24=315. 420 = 396 (--acturion-col,
	   la misma columna de 3 que usa el resto del sitio) + 24 (--acturion-space-5, el
	   gap ya puesto abajo). La tarjeta reserva 396 de ancho aunque la foto/botón
	   midan 291: por eso antes las tarjetas se veían pegadas. */
	--leader-slot:   396px;
	--leader-photo:  436px; /* [figma] alto del recorte de la foto */
	--leader-text:   279px; /* [figma] ancho del bloque de texto dentro de la tarjeta */
	--leader-gap:    80px;  /* [figma] titular (152) -> tarjetas (232) */
	--dialog-pad:    80px;  /* [figma] padding del pop-up */
	--dialog-text:   347px; /* [figma] columna de texto del pop-up */

	padding-block: var(--acturion-space-section);
	color: var(--acturion-dark-blue);
	/* El carrusel se sale por la derecha, como en el diseño. */
	overflow: hidden;
}

/* En mobile, el `overflow: hidden` de arriba NO basta: el wrapper que pone Elementor
   alrededor del widget (`.elementor-widget-acturion_leaders`) es un flex item del
   `e-con e-parent` de la página, y el cálculo de tamaño de un flex item mira el ancho
   intrínseco de su contenido AUNQUE un descendiente más abajo ya lo recorte con
   `overflow: hidden` — así que el carrusel sin recortar (921px a 375 de viewport)
   se filtraba hasta `document.documentElement.scrollWidth` y abría scroll horizontal
   en TODA la página. Solo se corta poniendo `overflow: hidden` en el wrapper mismo,
   no más abajo. Confirmado con un iframe de prueba: sin esto, 670px de ancho de
   página a un viewport de 375; con esto, 371 (limpio) y el carrusel sigue
   desplazándose igual por dentro. Mismo arreglo en jobs.css. */
.elementor-widget-acturion_leaders { overflow: hidden; }

.acturion-leaders__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--acturion-space-5);
}

.acturion-leaders__heading {
	margin: 0;
	/* El salto lo pone el widget con un <br> explícito (ver break_last_word). */
	font-size: var(--acturion-h2);
	font-weight: var(--acturion-weight-regular);
	line-height: var(--acturion-lh-heading);
}

.acturion-leaders__controls {
	display: flex;
	gap: var(--acturion-space-4);
	flex: 0 0 auto;
}

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

.acturion-leaders__cards {
	list-style: none;
	margin: var(--acturion-space-8) 0 0;
	padding: 0;
	display: flex;
	gap: var(--acturion-space-5);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.acturion-leaders__card {
	scroll-snap-align: start;
	flex: 0 0 min(var(--leader-slot), 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* [figma branch] Área gráfica de 291x436. El diseño alterna TRES composiciones
   (--s1 1365:8357, --s2 1365:8369, --s3 1365:8381): dos bloques de degradado DETRÁS
   y el retrato DELANTE. Lo que entrelaza las capas es el canal alfa del retrato:
   los tres PNG del diseño traen el colage horneado —fondo de estudio solo alrededor
   del sujeto, desvanecido inferior y el hueco por donde asoma el bloque de arena—
   y ese es el modo --prepared. Para un headshot normal, la CSS lo encuadra en el
   rectángulo del estilo y le pone el desvanecido con mask-image: no clava el arte
   hecho a mano del diseñador, pero mantiene el colage con cualquier foto. */
.acturion-leaders__photo {
	position: relative;
	overflow: hidden;
	/* Desvanecido del retrato genérico: el borde superior entra suave (como el fondo
	   de estudio de los PNG del diseño), sólido hasta --img-solid y fundido a nada
	   abajo. El #000 es canal alfa (opaco), no un color de diseño. */
	--img-mask: linear-gradient(180deg, transparent 0, #000 3%, #000 var(--img-solid, 100%), transparent 100%);
	/* No 100%: la tarjeta ahora reserva --leader-slot (396) para el espaciado, pero la
	   foto en sí sigue midiendo --leader-card (291), como en Figma. */
	width: var(--leader-card);
	max-width: 100%;
	aspect-ratio: 291 / 436;
	/* La foto de la tarjeta (no la del pop-up, que sigue siendo un <div>) es un
	   <button>: abre la misma ficha que «Read More», así el CTA no depende solo del
	   enlace de texto. Reset de los estilos nativos del navegador para <button>. */
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* Mismo motivo que el resto de <button> del sitio: sin esto, Hello Elementor pinta
   el :hover/:focus por defecto en rosa a (0,2,0). Aquí no hay fondo propio que
   reafirmar aparte del transparent, así que basta con esto. */
.acturion-leaders__photo:hover,
.acturion-leaders__photo:focus {
	background: none;
}

/* El `:focus-visible` genérico de base.css (0,1,0) no le gana a algo en el CSS de
   Elementor/Hello para este botón en concreto: al cerrar la ficha con teclado (Esc),
   el foco vuelve aquí con el anillo NEGRO por defecto del navegador, no el azul del
   sitio. Igual que .acturion-control, hace falta la regla propia a (0,2,0). */
.acturion-leaders__photo:focus-visible {
	outline: var(--acturion-focus-ring) solid var(--acturion-color-focus);
	outline-offset: var(--acturion-space-1);
	/* La misma regla de Hello trae un `box-shadow: 0 0 0 4px #fff` que sobrevivía al
	   cambio de outline: un halo blanco de 4px alrededor del colage, casi invisible
	   sobre el beige pero ahí. Se apaga; aquí no hay sombra propia que preservar. */
	box-shadow: none;
}

/* Mismo caso que .acturion-link en components.css: foco devuelto por leaders.js tras
   cerrar con ratón un pop-up abierto desde la foto — sin aro. */
.acturion-leaders__photo[data-acturion-pointer-focus]:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Cada bloque ocupa su MITAD de ancho: el de arena pegado arriba a la derecha y el
   azul abajo a la izquierda; el alto lo pone la composición (--sky-h/--blue-h en las
   clases --s* de abajo). Los degradados son los de las tarjetas del branch
   (--acturion-card-gradient-*, tokens.css), NO gradient-1/-2 de las barras. */
.acturion-leaders__block {
	position: absolute;
	width: 50%;
}

.acturion-leaders__block--sky {
	top: 0;
	right: 0;
	height: var(--sky-h, 39.68%);
	background: var(--acturion-card-gradient-sand);
}

.acturion-leaders__block--blue {
	bottom: 0;
	left: 0;
	height: var(--blue-h, 83.22%);
	background: var(--acturion-card-gradient-blue);
}

/* El retrato vive en la caja de su composición (--img-*), no a sangre: en el diseño
   el rectángulo de la foto flota sobre los bloques y el sujeto respira (~30px de aire
   hasta el tope: --img-y 6.6%, medido por canal alfa en los tres PNG del branch). */
/* La especificidad NO es decorativa: Elementor trae `.elementor img { height: auto }`
   (0,1,1) en su frontend.css, que le ganaría a `.acturion-leaders__image` (0,1,0).
   Con el padre delante son (0,2,0) y mandan. */
.acturion-leaders__photo .acturion-leaders__image {
	position: absolute;
	left: var(--img-x, 0);
	top: var(--img-y, 0);
	width: var(--img-w, 100%);
	/* El `img { max-width: 100% }` global capaba la caja --prepared (137% del marco)
	   a 291px mientras el alto sí crecía: `cover` recortaba los lados y el sujeto
	   salía estrecho. Aquí la caja sobresale a propósito y el marco ya recorta. */
	max-width: none;
	height: var(--img-h, 100%);
	object-fit: cover;
	/* --photo-y es el "Photo vertical focus" de la ficha (Fields::LEADER_PHOTO_FOCUS,
	   10 por defecto): dónde muerde `cover` un headshot cuya proporción no coincide
	   con la caja. En modo --prepared no aplica (la caja calca la del arte). */
	object-position: center var(--photo-y, 10%);
	-webkit-mask-image: var(--img-mask);
	mask-image: var(--img-mask);
	display: block;
	transition: transform var(--acturion-duration) var(--acturion-ease);
}

/* Headshot normal: el rectángulo del retrato va CENTRADO en el marco. Las --img-x de
   las composiciones de abajo son el bbox del colage que hizo el diseñador —donde cae
   el sujeto recortado dentro de SU arte, no donde debe ir una foto cualquiera—, y en
   --s1 ese bbox arranca en -1% con 86% de ancho: la foto se pegaba al borde izquierdo
   y dejaba 44px de fondo a la derecha. El ancho y la posición vertical siguen siendo
   los del diseño; solo se centra el eje horizontal.

   --photo-x es el «Photo horizontal position» de la ficha (Fields::LEADER_PHOTO_ALIGN,
   50 por defecto = centrada): 0 la pega al borde izquierdo del marco y 100 al derecho,
   por si una foto concreta necesita apoyarse en otro bloque.

   En modo --prepared no aplica: ahí la caja calca la del arte a propósito, porque el
   colage ya trae su propio encuadre horneado en el canal alfa. */
.acturion-leaders__photo:not(.acturion-leaders__photo--prepared) .acturion-leaders__image {
	left: calc((100% - var(--img-w, 100%)) * var(--photo-x, 50) / 100);
}

/* Las tres composiciones [figma]: altos de bloque sobre el alto del gráfico (173/363,
   364/145 y 273/273 sobre ~436) y rectángulo del retrato genérico —el bbox de la zona
   sólida de los PNG del diseño, medido por canal alfa— con su corte de desvanecido. */

/* Headshot normal: UNA sola caja de retrato para las tres composiciones. Las cajas
   --img-* de cada --s* de abajo son el bbox del colage que hizo el diseñador para ESA
   tarjeta (86% de ancho en --s1, 77% en --s2, 65% en --s3): con una foto cualquiera,
   `cover` la escala a la caja y la misma persona salía un 24% más pequeña en --s3 que
   en --s1 (Bayron, 2026-09-29: «deberían ajustarse a una dimensión»). Para retratos
   sin --prepared se toma la caja de --s1 como la común —la más grande, y la de la
   tarjeta del CEO, que es la referencia—; los bloques de color siguen variando por
   estilo, que es lo que realmente distingue a las tres tarjetas. Va a (0,2,0) para
   ganar a los --s* (0,1,0); los --prepared conservan su caja calcada del arte. */
.acturion-leaders__photo:not(.acturion-leaders__photo--prepared) {
	--img-y: 6.6%;
	--img-w: 86%;
	--img-h: 67.4%;
	--img-solid: 79%;
}

.acturion-leaders__photo--s1 {
	--sky-h: 39.68%;
	--blue-h: 83.22%;
	--img-x: -1%;
	--img-y: 6.6%;
	--img-w: 86%;
	--img-h: 67.4%;
	--img-solid: 79%;
}

.acturion-leaders__photo--s2 {
	--sky-h: 83.22%;
	--blue-h: 33.29%;
	--img-x: 15.1%;
	--img-y: 6.6%;
	--img-w: 77.3%;
	--img-h: 70.2%;
	--img-solid: 88.6%;
}

/* --s3 es también la composición del pop-up del diseño (1365:8866). */
.acturion-leaders__photo--s3 {
	--sky-h: 62.37%;
	--blue-h: 62.37%;
	--img-x: 16.2%;
	--img-y: 6.6%;
	--img-w: 65.3%;
	--img-h: 75.5%;
	--img-solid: 77.2%;
}

/* Retrato --prepared: el PNG del diseño trae el colage en su canal alfa. Va en la
   caja EXACTA del arte de Figma (sobresale del marco; el overflow del contenedor
   recorta, igual que la máscara «Union» del diseño) y sin máscara CSS: el fade viene
   horneado y doblarlo lo adelantaría. Las cajas salen de los nodos `image` de cada
   tarjeta (400x638 en -32,-67; 384x613 en -31,-50; 319x504 en -7,+9). */
.acturion-leaders__photo--prepared {
	--img-mask: none;
}

.acturion-leaders__photo--prepared .acturion-leaders__image {
	object-position: center;
}

.acturion-leaders__photo--s1.acturion-leaders__photo--prepared {
	--img-x: -11.18%;
	--img-y: -15.36%;
	--img-w: 137.53%;
	--img-h: 146.13%;
}

.acturion-leaders__photo--s2.acturion-leaders__photo--prepared {
	--img-x: -10.5%;
	--img-y: -11.4%;
	--img-w: 131.93%;
	--img-h: 140.2%;
}

.acturion-leaders__photo--s3.acturion-leaders__photo--prepared {
	--img-x: -2.42%;
	--img-y: 1.98%;
	--img-w: 109.64%;
	--img-h: 115.25%;
}

/* [convención] Figma es estático; hover/focus sutil para que la tarjeta se sienta
   interactiva sin desentonar con el resto del sitio (misma duración/curva que
   botones y enlaces). */
.acturion-leaders__card:hover .acturion-leaders__image,
.acturion-leaders__card:focus-within .acturion-leaders__image {
	transform: scale(1.05);
}

/* Al cerrar el pop-up el foco vuelve a un botón de la tarjeta y :focus-within la
   dejaba con la foto ampliada, como si siguiera «activa». Si el pop-up se abrió con
   ratón (atributo que pone leaders.js), la tarjeta vuelve a reposo; el :hover de
   arriba sigue mandando mientras el cursor esté encima. (0,3,0) > (0,2,0). */
.acturion-leaders__card:has([data-acturion-pointer-focus]) .acturion-leaders__image {
	transform: none;
}

.acturion-leaders__card:has([data-acturion-pointer-focus]):hover .acturion-leaders__image {
	transform: scale(1.05);
}

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

/* El SVG de relleno ya trae sus propios bloques dibujados dentro: si no, saldrían dos
   veces. Se ocultan los de CSS mientras no haya foto real, y sin foto tampoco hay
   colage que recomponer: caja completa y sin máscara. */
.acturion-leaders__photo:has(.is-placeholder) .acturion-leaders__block { display: none; }

.acturion-leaders__photo:has(.is-placeholder) {
	--img-x: 0;
	--img-y: 0;
	--img-w: 100%;
	--img-h: 100%;
	--img-mask: none;
}

/* [figma] texto a 32 de la foto, ancho 279. */
.acturion-leaders__role {
	margin: var(--acturion-space-6) 0 0;
	max-width: var(--leader-text);
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

/* [figma MCP] nombre 16 por debajo del cargo, en el H3 del kit: Medium 36/0.9
   (1365:12810; la caja de 32 = 36×0.9). Siempre en UNA línea, como todas las cajas
   de nombre del branch (279-281 de tinta): si partiera en dos, el «Read More» de esa
   tarjeta bajaría y rompería la alineación de la fila. La tinta puede asomar unos px
   más allá de la caja de 279 hacia el hueco de la grilla; no choca con nada. */
.acturion-leaders__name {
	margin: var(--acturion-space-4) 0 0;
	max-width: var(--leader-text);
	font-size: var(--acturion-h3);
	font-weight: var(--acturion-weight-medium);
	line-height: var(--acturion-lh-heading);
	white-space: nowrap;
}

/* [figma] enlace a 32 del nombre, a todo el ancho de la tarjeta. */
.acturion-leaders__more {
	margin-top: var(--acturion-space-6);
	/* [figma] el «Secondary button» de cada tarjeta mide 291, no los 396 de la
	   tarjeta entera. */
	width: var(--leader-card);
	max-width: 100%;
	/* Es un <button>: sin esto el navegador CENTRA su contenido y «Read More» salía
	   indentado; en el diseño el texto va pegado a la izquierda y la flecha al borde
	   derecho del filete. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--acturion-space-5);
	text-align: left;
	padding: 0 0 var(--acturion-space-2);
	border: 0;
	border-bottom: 1px solid currentColor;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: var(--acturion-body-18);
}

/* [figma] mobile: la tarjeta reserva 297 —foto de 291—, NO todo el ancho de
   contenido: la siguiente tarjeta asoma por el borde derecho (su foto arranca en
   x=345 en el frame 1365:9207). */
@media (max-width: 767px) {
	.acturion-leaders__card { flex-basis: 297px; }
}

@media (min-width: 768px) {
	.acturion-leaders__cards {
		margin-top: var(--leader-gap);
		margin-right: calc(var(--acturion-gutter) * -1);
		padding-right: var(--acturion-gutter);
	}
}

/* En pantallas pequeñas los controles bajan debajo del carrusel [figma mobile:
   tarjetas 116..708 y controles en 740]. */
@media (max-width: 767px) {
	.acturion-leaders .acturion-container {
		display: flex;
		flex-direction: column;
	}

	/* `display: contents` disuelve la fila del titular: así el titular, el carrusel y
	   los controles quedan como hermanos y `order` puede recolocarlos. Anidados, el
	   `order` de los controles no tenía efecto. */
	.acturion-leaders__head { display: contents; }

	.acturion-leaders__heading  { order: 1; }
	.acturion-leaders__cards    { order: 2; }
	.acturion-leaders__controls {
		order: 3;
		margin-top: var(--acturion-space-6);
		justify-content: flex-end;
	}
}

/* ================================================================ Ficha ampliada */

.acturion-leader-dialog {
	width: min(878px, calc(100vw - var(--acturion-space-8)));
	max-width: none;
	max-height: calc(100vh - var(--acturion-space-8));
	padding: 0;
	border: 0;
	background: var(--acturion-light-seashell);
	color: var(--acturion-dark-blue);
	overflow: auto;
}

.acturion-leader-dialog::backdrop {
	background: color-mix(in srgb, var(--acturion-dark-blue) 65%, transparent);
}

.acturion-leader-dialog__inner {
	position: relative;
	padding: var(--acturion-space-8);
	display: flex;
	flex-direction: column-reverse; /* la foto arriba en pantallas pequeñas */
	gap: var(--acturion-space-8);
}

/* El contenedor recibe el foco al abrir (ver leaders.js) y no es un control: nunca se
   llega a él tabulando, así que un aro ahí sólo sería ruido. Los controles de dentro
   conservan el suyo. */
.acturion-leader-dialog:focus,
.acturion-leader-dialog:focus-visible {
	outline: none;
}

.acturion-leader-dialog__close {
	position: absolute;
	top: var(--acturion-space-5);
	right: var(--acturion-space-5);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--acturion-dark-blue);
	border-radius: 50%;
	background: var(--acturion-light-seashell);
	color: var(--acturion-dark-blue);
	cursor: pointer;
}

/* El foco a secas NO pinta nada: deja la X como en reposo. Dos cosas a la vez.
   Una, el rosa de :focus/:hover por defecto de Hello Elementor para `button`
   ((0,2,0): ver acturion-button en components.css) taparía el círculo beige, y hay
   que reafirmarlo. Dos, la X es el PRIMER elemento enfocable del <dialog>, así que
   showModal() le da el foco sola y antes comía el relleno azul del hover nada más
   abrir, con el ratón lejos; en táctil se quedaba así toda la vida del modal porque
   no hay puntero que se aparte (Bayron, 2026-09-29). */
.acturion-leader-dialog__close:focus {
	background: var(--acturion-light-seashell);
	color: var(--acturion-dark-blue);
}

/* El relleno de verdad: ratón encima, o un foco que el navegador considera visible.
   Van DESPUÉS del :focus de arriba a propósito: misma especificidad (0,2,0), así que
   manda el orden. Medido: al abrir con ratón casa :focus y no :focus-visible, o sea
   reposo; con teclado casan las dos y gana éste, que es justo cuando el relleno hace
   falta. */
.acturion-leader-dialog__close:hover,
.acturion-leader-dialog__close:focus-visible {
	background: var(--acturion-dark-blue);
	color: var(--acturion-light-seashell);
}

/* Mismo choque que .acturion-link en components.css: `button:focus-visible` de Hello
   Elementor pinta aro NEGRO de 2px con halo blanco de 4px y le gana al genérico de
   base.css. Se repone el aro del sitio. */
.acturion-leader-dialog__close:focus-visible {
	outline: var(--acturion-focus-ring) solid var(--acturion-color-focus);
	outline-offset: var(--acturion-space-1);
	box-shadow: none;
}

/* [figma] Columna de texto del pop-up, medida sobre Content [80,80 347x437]:
   nombre  [0,0   250x29]  -> 24px
   cargo   [0,45  250x25]  -> 20px, o sea 16 por debajo del nombre
   bio     [0,102 347x176] -> 18px, 32 por debajo del cargo
   botones [0,318 347x113] -> 40 por debajo de la bio */
/* [figma MCP] en el pop-up el nombre baja al subtítulo Medium 32/0.9 (caja de 29,
   más chico que el 36 de la tarjeta) y el cargo va en BodyText_21 (caja de 25). */
.acturion-leader-dialog__name {
	margin: 0;
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

.acturion-leader-dialog__role {
	margin: var(--acturion-space-4) 0 0;
	font-size: var(--acturion-body-21);
	line-height: var(--acturion-lh-body);
}

.acturion-leader-dialog__bio {
	margin-top: var(--acturion-space-6);
	font-size: var(--acturion-body);
	line-height: var(--acturion-lh-body);
}

.acturion-leader-dialog__bio p { margin: 0; }
.acturion-leader-dialog__bio p + p { margin-top: 1.2em; }

.acturion-leader-dialog__actions {
	margin-top: var(--acturion-space-7);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5);
}

/* Las dos flechas del bloque en la misma vertical: la del botón primario va centrada
   en su cuadro de 57 (a 28.5 del borde) y la del enlace iba pegada al borde (a 12).
   El branch las deja desfasadas esos 16.5px; aquí se alinean los centros — decisión
   local: dos flechas casi alineadas leen como descuido, alineadas leen como columna.
   El filete no se mueve: es el borde del enlace completo. */
.acturion-leader-dialog__actions .acturion-link__icon {
	margin-right: calc((57px - 24px) / 2);
}

/* .acturion-button vive en components.css (compartido: lo usa también el formulario
   de contacto). Aquí solo queda lo específico del pop-up. */

.acturion-leader-dialog__photo { flex: 0 0 auto; }

@media (min-width: 768px) {
	.acturion-leader-dialog__inner {
		flex-direction: row;
		padding: var(--dialog-pad);
		gap: var(--dialog-pad);
	}

	.acturion-leader-dialog__text { flex: 1 1 var(--dialog-text); min-width: 0; }

	.acturion-leader-dialog__photo {
		flex: 0 0 var(--leader-card);
		width: var(--leader-card);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acturion-leaders__cards { scroll-behavior: auto; }
	.acturion-button__label,
	.acturion-button__icon { transition: none; }
}