/*
 * Sección «Stay Informed» (CTA Default, Figma 1608:10000 y equivalentes en las otras
 * 11 páginas). Fondo de barras de degradado repetidas, titular grande y formulario de
 * suscripción de una sola línea. Ver class-cta.php para el porqué de que estuviera
 * oculta en el diseño.
 */

.acturion-cta {
	--cta-bar-w: 103px; /* [figma] ancho fijo de cada barra */

	position: relative;
	overflow: hidden;
	background: var(--acturion-deep-blue); /* visible solo si el navegador no soporta color-mix/flex gap */
	color: var(--acturion-soft-beige);
	padding-block: var(--acturion-space-section);
}

/* ---------------------------------------------------------------- Barras */
/* Mismo truco que --acturion-gradient-strip (tokens.css) pero con el punto de corte
   por barra en vez de fijo al 29.5%. Los cortes van en reglas :nth-child (no en
   línea) como en .acturion-service__bar: así cada breakpoint trae su ciclo y
   reveal.js repone la cascada al soltar el barrido. */

.acturion-cta__bars {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
}

.acturion-cta__bar {
	flex: 0 0 var(--cta-bar-w);
	/* El +1px solapa las dos capas: ancladas a bordes opuestos, sus alturas se
	   redondean por separado y en cortes fraccionarios quedaba una rendija por la
	   que asomaba el deep-blue del fondo — la «línea negra» al pie de cada tramo. */
	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;
	/* 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));
}

/* [figma] CTA Default desktop: 14 columnas de 103, corte ciclando 650/514/360/182
   sobre 722 de alto. */
.acturion-cta__bar:nth-child(4n + 1) { --bar-split: 90.03%; }
.acturion-cta__bar:nth-child(4n + 2) { --bar-split: 71.19%; }
.acturion-cta__bar:nth-child(4n + 3) { --bar-split: 49.86%; }
.acturion-cta__bar:nth-child(4n)     { --bar-split: 25.21%; }

/* [figma 2157:5034 «CALL TO ACTION MOBILE»] en mobile el gráfico son 6 columnas de
   62.5 (375/6) con su propio ciclo de cortes: 150/261/472/261 sobre 512 de alto. */
@media (max-width: 767px) {
	.acturion-cta { --cta-bar-w: 62.5px; }

	.acturion-cta__bar:nth-child(4n + 1) { --bar-split: 29.30%; }
	.acturion-cta__bar:nth-child(4n + 2) { --bar-split: 50.98%; }
	.acturion-cta__bar:nth-child(4n + 3) { --bar-split: 92.19%; }
	.acturion-cta__bar:nth-child(4n)     { --bar-split: 50.98%; }
}

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

/* ---------------------------------------------------------------- Contenido */

.acturion-cta__content {
	position: relative; /* por encima de .acturion-cta__bars, ver hero-video.css */
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--acturion-space-8);
}

.acturion-cta__title {
	flex: 1 1 480px;
	margin: 0;
	max-width: 620px;
	font-size: var(--acturion-cta-title);
	font-weight: var(--acturion-weight-medium);
	/* [figma] 0.9: la única sección del sitio que no usa el 1.2 estándar. */
	line-height: 0.9;
}

.acturion-cta__form-wrap {
	flex: 1 1 var(--acturion-col);
	max-width: var(--acturion-col);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-4);
}

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

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

/* [figma] branch 2157:6254 «Input»: caja de una sola línea (57px + filete de 2) con el
   «Email» dentro como placeholder; ya no hay label visible encima. */
.acturion-cta__field {
	display: flex;
	background: var(--acturion-light-seashell);
	color: var(--acturion-dark-blue);
}

/* Solo para lectores de pantalla (el placeholder no es un nombre accesible fiable). */
.acturion-cta__field-label {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.acturion-cta__field input {
	width: 100%;
	min-height: 57px;
	border: 0;
	border-bottom: 2px solid var(--acturion-dark-blue);
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 0 var(--acturion-space-4);
}

.acturion-cta__field input::placeholder {
	color: inherit;
	opacity: 1;
}

/* El placeholder se esconde al entrar al campo, no al empezar a escribir. */
.acturion-cta__field input:focus::placeholder {
	color: transparent;
}

/* El honeypot se saca de la vista sin display:none, que algunos bots reconocen. */
.acturion-cta__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* [figma] «Button primary» (189:9778): DOS cajas separadas por un hueco de 5px —
   la etiqueta y el cuadro de la flecha de 57 — que juntas suman el mismo ancho que
   el campo de email de arriba (391 en el frame, la columna completa). Antes era una
   sola caja continua con un divisor interior, que no es la anatomía del kit. */
.acturion-cta__submit {
	display: flex;
	gap: 5px;
	align-items: stretch;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--acturion-dark-blue);
	font: inherit;
	cursor: pointer;
}

.acturion-cta__submit-label,
.acturion-cta__submit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--acturion-light-seashell);
	transition: background var(--acturion-duration) var(--acturion-ease),
	            color var(--acturion-duration) var(--acturion-ease);
}

.acturion-cta__submit-label {
	flex: 1 1 auto;
	min-height: 57px;
	padding-inline: var(--acturion-space-5);
	/* [figma MCP] estilo «Button» del UI Kit: Medium 21/1.2 FIJO (el mobile 2157:4974
	   dice 21 explícito), como .acturion-button. */
	font-size: var(--acturion-button-label);
	font-weight: var(--acturion-weight-medium);
}

.acturion-cta__submit-icon {
	flex: 0 0 57px;
}

/* :focus a secas, no solo :focus-visible: en un <button> real un click de ratón activa
   :focus pero no :focus-visible, y Hello Elementor trae `[type=submit]:focus` a
   (0,2,0) — la misma especificidad que este selector — para pintarlo rosa. Con las
   cajas en los spans, el raíz se reafirma transparente para que ese rosa no asome
   por el hueco de 5px. */
.acturion-cta__submit:hover,
.acturion-cta__submit:focus {
	background: transparent;
}

/* El kit no documenta hover (sus dos «estados» son variantes adaptativas por fondo,
   nota 189:9833): el hover INVIERTE al colorway opuesto, el mismo comportamiento
   que .acturion-button. */
.acturion-cta__submit:hover .acturion-cta__submit-label,
.acturion-cta__submit:hover .acturion-cta__submit-icon,
.acturion-cta__submit:focus .acturion-cta__submit-label,
.acturion-cta__submit:focus .acturion-cta__submit-icon {
	background: var(--acturion-dark-blue);
	color: var(--acturion-light-seashell);
}

.acturion-cta__notice {
	margin: 0;
	padding: var(--acturion-space-4) var(--acturion-space-5);
	border-left: 4px solid currentColor;
	font-size: var(--acturion-body);
	background: color-mix(in srgb, var(--acturion-soft-beige) 20%, transparent);
}

.acturion-cta__notice--error { color: var(--acturion-tan); }

@media (prefers-reduced-motion: reduce) {
	.acturion-cta__submit-label,
	.acturion-cta__submit-icon { transition: none; }
}