/*
 * Componentes compartidos entre secciones: el enlace «Secondary button», la etiqueta
 * de categoría y la franja de degradado.
 *
 * Viven aquí y no dentro de una sección porque el marcado lo emite News_Card, al que
 * llaman varios widgets y también single.php. Antes estaban en news.css y el enlace
 * salía sin estilo en Home, donde ese archivo no se encola.
 */

/* ---------------------------------------------------------------- Enlace */
/* [figma] «Secondary button»: texto, flecha y filete inferior. 126x33 en las tarjetas
   y 396x33 cuando ocupa una columna entera (modificador --wide). */

/* [figma MCP] «Secondary button» (189:9843, y la instancia «Contacts» del header
   189:8733): etiqueta en el estilo «Button» del kit — Medium 21/1.2 — y filete
   inferior de 2px. Antes iba en 18 Regular con 1px, la lectura vieja del volcado. */
.acturion-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--acturion-space-5);
	padding-bottom: var(--acturion-space-2);
	border-bottom: 2px solid currentColor;
	/* Vía property y no un color literal para que los estados de abajo reafirmen
	   EXACTAMENTE el mismo valor sin tener que saber en qué contexto van: un fondo
	   oscuro solo cambia --acturion-link-ink (ver .acturion-header__contacts en
	   layout.css) y los tres estados lo siguen juntos. */
	color: var(--acturion-link-ink, var(--acturion-dark-blue));
	font-size: var(--acturion-body-21);
	font-weight: var(--acturion-weight-medium);
	line-height: var(--acturion-lh-body);
	text-decoration: none;
}

.acturion-link--wide { display: flex; }

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

.acturion-link:hover .acturion-link__icon,
.acturion-link:focus-visible .acturion-link__icon {
	transform: translateX(var(--acturion-space-1));
	transition: transform var(--acturion-duration) var(--acturion-ease);
}

/* Cuando el marcado es un <button> (p. ej. «Read More» de las tarjetas de Leadership)
   y no un <a>, Hello Elementor pinta su :hover/:focus en rosa por defecto a (0,2,0)
   — este enlace no lleva fondo propio, así que hay que reafirmar transparente. */
.acturion-link:hover,
.acturion-link:focus {
	background: transparent;
	/* Ese mismo reset trae ADEMÁS `color: #fff`, que a (0,2,0) le gana al color del
	   componente —(0,1,0)—. Y como el filete y la flecha se pintan con currentColor,
	   el enlace entero se iba a blanco: invisible sobre el beige de la tarjeta. En
	   «Read More» no era solo el hover, se QUEDABA así tras cerrar el pop-up, porque
	   leaders.js devuelve el foco al botón que lo abrió y el :focus no se suelta
	   hasta clicar en otro sitio. */
	color: var(--acturion-link-ink, var(--acturion-dark-blue));
}

/* Mismo choque, otro reset del padre: `button:focus-visible` de Hello Elementor pinta
   aro NEGRO de 2px con halo blanco de 4px y también le gana al `:focus-visible`
   genérico de base.css (0,1,0). Se repone el aro del sitio, igual que hacen
   .acturion-control aquí abajo y .acturion-leaders__photo en leaders.css. */
.acturion-link:focus-visible {
	outline: var(--acturion-focus-ring) solid var(--acturion-color-focus);
	outline-offset: var(--acturion-space-1);
	box-shadow: none;
}

/* Foco devuelto por script tras cerrar un pop-up que se abrió con RATÓN (leaders.js
   marca el opener con este atributo hasta que el foco se va): el usuario de ratón
   nunca ve aros, así que aquí tampoco; y la flecha vuelve a su sitio. A (0,3,0) para
   ganar a las dos reglas de arriba. Con teclado el atributo no se pone y el aro queda. */
.acturion-link[data-acturion-pointer-focus]:focus-visible {
	outline: none;
	box-shadow: none;
}

.acturion-link[data-acturion-pointer-focus]:focus-visible .acturion-link__icon {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.acturion-link__icon { transition: none !important; } /* pisa la transición de arriba */
}

/* ---------------------------------------------------------------- Error de campo */
/* [figma] estado «Mistake» de los inputs del UI Kit (189:9904 y análogos): mensaje
   pequeño en el «Red» de la lámina Additional, con aspa, pegado bajo el campo.
   Lo inserta forms.js; el aspa va en CSS para que el texto quede limpio para los
   lectores de pantalla (aria-describedby). */
.acturion-form-error {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--acturion-space-2);
	font-size: var(--acturion-description);
	line-height: var(--acturion-lh-body);
	color: var(--acturion-red);
}

.acturion-form-error::before {
	content: "\2715"; /* ✕ */
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- Etiqueta */
/* [figma] «Tag»: 22 de alto, fondo tenue, texto de 12. El ancho lo da el texto. */

.acturion-news-card__tag {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding-inline: var(--acturion-space-2);
	background: color-mix(in srgb, var(--acturion-sky) 35%, transparent);
	color: var(--acturion-dark-blue);
	font-size: var(--acturion-description);
	line-height: var(--acturion-lh-body);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Franja */
/* Los dos degradados apilados, cortados al 29.5% (ver tokens.css). */

.acturion-strip,
.acturion-news-card__strip {
	flex: 0 0 var(--acturion-strip);
	background: var(--acturion-gradient-strip);
}

/* [figma] las franjas de News (portada y tarjetas) NO llevan el tramo azul oscuro:
   son solo Gradient2 (sky -> sand -> tan). Muestreado en el frame mobile 1365:9620
   (píxel a píxel: 8AB4ED arriba, D1A676 abajo) y en news-listing-desktop.png. */
.acturion-news-card__strip {
	background: var(--acturion-gradient-2);
}

/* ---------------------------------------------------------------- Control redondo */
/* [figma] «Left controller» / «Button arrow»: 48x48 con filete. Lo usan el carrusel
   de «Why Acturion?» y las secciones de Leadership, así que vive aquí y no dentro de
   una sección: en Leadership no se encola sections.css. */

.acturion-control {
	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: transparent;
	color: var(--acturion-dark-blue);
	cursor: pointer;
}

/* [figma] el UI Kit («Button arrow», 189:9725) documenta Default y Hover IDÉNTICOS
   —mismo filete, mismo relleno vacío— y solo Disabled cambia (opacidad, ya cubierto
   abajo). Antes esto invertía a relleno dark-blue en :hover, un invento que Figma
   contradice. Se deja sin cambio de color; solo hace falta pisar el rosa por
   defecto de Hello Elementor para <button> en :hover/:focus ((0,2,0)). */
.acturion-control:hover:not([disabled]),
.acturion-control:focus:not([disabled]) {
	background: transparent;
	color: var(--acturion-dark-blue);
}

/* Foco visible por teclado (criterio de terminado, sección 7): Figma no modela estados
   de teclado, así que esto no compite con ningún spec. `:focus-visible` no dispara con
   un click de ratón real en Chromium, así que no reintroduce el relleno quitado arriba. */
.acturion-control:focus-visible:not([disabled]) {
	outline: 2px solid var(--acturion-dark-blue);
	outline-offset: 2px;
}

/* Un botón puede quedar disabled mientras el ratón/foco siguen encima (p. ej. al llegar
   al final del carrusel con la flecha bajo el cursor): sin repetir aquí el transparente,
   el rosa de Hello Elementor gana porque `:not([disabled])` de arriba ya no aplica. */
.acturion-control[disabled],
.acturion-control[disabled]:hover,
.acturion-control[disabled]:focus {
	background: transparent;
	color: var(--acturion-dark-blue);
	opacity: 0.35;
	cursor: default;
}

/* ---------------------------------------------------------------- Botón primario */
/* [figma] «Button primary»: 347x57 partido en la etiqueta y un cuadro de flecha de
   57, separados 5 — igual que el botón del hero. Usado por el envío del formulario
   de contacto y por «Contact Us» en la ficha ampliada de Leadership.
   Movido aquí desde leaders.css (2026-09-08): vivía solo ahí, así que en cualquier
   página que no cargara el widget de Leaders (Contact, por ejemplo) este botón salía
   sin estilo — el nativo del navegador, con el rosa de hover/focus por defecto de
   Hello Elementor de fondo. Sitio compartido = funciona en cualquier página.

   `:hover` sin más no basta contra Hello Elementor: su reset trae
   `[type="submit"]:focus` a especificidad (0,2,0), y con un botón real (no un
   `<a>`) el foco de un simple click de ratón activa `:focus` pero NO `:focus-visible`
   — de ahí que haga falta cubrir también `:focus` a secas. */
.acturion-button {
	display: flex;
	gap: 5px;
	color: var(--acturion-light-seashell);
	/* [figma MCP] la etiqueta del «Button primary» es el estilo «Button» del UI Kit:
	   Medium 21/1.2 (hoja 189:8494 y glifos del componente 189:9778) — 21 FIJO
	   también en mobile (2157:4974), no el fluido del cuerpo. */
	font-size: var(--acturion-button-label);
	font-weight: var(--acturion-weight-medium);
	line-height: var(--acturion-lh-body);
	text-decoration: none;
	border: 0;
	/* El reset del tema da padding al <button>; aquí las cajas son los spans. */
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.acturion-button__label,
.acturion-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	background: var(--acturion-dark-blue);
	transition: background var(--acturion-duration) var(--acturion-ease);
}

.acturion-button__label { flex: 1 1 auto; padding-inline: var(--acturion-space-5); font: inherit; }
.acturion-button__icon  { flex: 0 0 57px; }

/* Hello Elementor pinta el propio <button> raíz de rosa en :hover/:focus a (0,2,0);
   con las cajas invertidas a claro, ese fondo asomaba por el hueco de 5px y el
   padding del reset. El raíz no lleva fondo propio: se reafirma transparente. */
.acturion-button:hover,
.acturion-button:focus {
	background: transparent;
}

/* El kit no documenta hover para este botón (sus dos «estados» son las variantes
   adaptativas por fondo, nota 189:9833): el hover INVIERTE al colorway opuesto,
   igual que hace el envío del CTA — un solo comportamiento para todos los botones
   primarios del sitio. El color se reafirma porque el tema pisa el de :hover. */
.acturion-button:hover .acturion-button__label,
.acturion-button:hover .acturion-button__icon,
.acturion-button:focus .acturion-button__label,
.acturion-button:focus .acturion-button__icon {
	background: var(--acturion-light-seashell);
	color: var(--acturion-dark-blue);
}

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