/*
 * Página de contacto: datos con foto y formulario.
 *
 * Referencia: docs/pages/contact-desktop.txt, Section1 [0,0 1440x804] y
 * Section2 [0,804 1440x976]. Solo consume tokens.
 */

.acturion-contact-details,
.acturion-contact-form {
	--contact-col:   396px; /* [figma] columna de datos y del formulario en móvil */
	--contact-photo: 816px; /* [figma] foto de la portada */
	--contact-form:  816px; /* [figma] ancho del formulario */
	--contact-bars:  375px; /* [figma] gráfico de 5 barras de 75 */

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

/* [figma] la portada arranca en 174, no en 100. */
/* [figma] 174 es el arranque de página en DESKTOP; en mobile manda el 28 genérico
   de base.css (Section1 y=136). */
@media (min-width: 768px) {
	.acturion-contact-details { padding-block-start: 174px; }
}

.acturion-contact-details__body,
.acturion-contact-form__body {
	margin-top: var(--acturion-space-10);
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-8);
}

/* [figma MCP] «Acturion Headquarter» es el subtítulo Medium 32/0.9 (1365:12056). */
.acturion-contact-details__label {
	margin: 0 0 var(--acturion-space-5);
	font-size: var(--acturion-subtitle);
	font-weight: var(--acturion-weight-medium);
	line-height: 0.9;
}

.acturion-contact-details__media {
	display: flex;
	aspect-ratio: 816 / 374; /* [figma] foto 816x374 */
}

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

.acturion-contact-details__image img {
	width: 100%;
	/* !important: Elementor trae `.elementor img { height: auto }` (0,1,1), empatada en
	   especificidad con este selector — sin esto la foto sale a su alto intrínseco. */
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------- Formulario */

.acturion-contact-form__graphic {
	display: flex;
	/* [figma] 576 de alto; se deja encoger para no dominar en pantallas pequeñas. */
	height: clamp(240px, 40vw, 576px);
}

.acturion-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-5); /* [figma] campos separados 24 */
}

.acturion-contact-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--acturion-space-2);
}

.acturion-contact-form__label {
	font-size: var(--acturion-body-14);
	color: color-mix(in srgb, var(--acturion-dark-blue) 55%, transparent);
}

.acturion-contact-form__required { color: var(--acturion-blue); }

/* [figma] los campos son cajas RELLENAS (light seashell) con solo el filete
   inferior en dark blue — sin borde perimetral ni radio (render desktop y frame
   mobile del branch). */
.acturion-contact-form__field input,
.acturion-contact-form__field textarea {
	width: 100%;
	padding: var(--acturion-space-4) var(--acturion-space-5);
	border: 0;
	border-bottom: 1px solid var(--acturion-dark-blue);
	border-radius: 0;
	background: var(--acturion-color-surface);
	color: inherit;
	font: inherit;
	font-size: var(--acturion-body);
}

/* [figma] los campos de una línea miden 56 de alto y el multilínea 129. */
.acturion-contact-form__field input { min-height: 56px; }
.acturion-contact-form__field textarea { min-height: 129px; resize: vertical; }

.acturion-contact-form__submit {
	align-self: stretch;
	margin-top: var(--acturion-space-5); /* [figma] botón 48 por debajo del bloque */
	border: 0;
	cursor: pointer;
	/* La tipografía (Medium 21) la pone .acturion-button: un `font: inherit` aquí
	   la reseteaba al cuerpo del formulario y dejaba la etiqueta en 18/400. */
}

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

.acturion-contact-form__notice {
	margin: 0;
	padding: var(--acturion-space-4) var(--acturion-space-5);
	border-left: 4px solid currentColor;
	font-size: var(--acturion-body);
}

.acturion-contact-form__notice--ok {
	background: color-mix(in srgb, var(--acturion-sky) 25%, transparent);
	color: var(--acturion-dark-blue);
}

.acturion-contact-form__notice--error {
	background: color-mix(in srgb, var(--acturion-tan) 30%, transparent);
	color: var(--acturion-dark-blue);
}

/* [figma] mobile (1365:10749): la foto va ENTRE el titular y el bloque del
   Headquarter, a sangre (imagen 327 + franja 48, 230 de alto), el gráfico de barras
   del formulario no existe y los campos se leen por su placeholder, sin etiqueta. */
@media (max-width: 767px) {
	.acturion-contact-details__body { margin-top: var(--acturion-space-8); }

	.acturion-contact-details__media {
		order: -1;
		aspect-ratio: auto;
		height: 230px;
		margin-inline: calc(-1 * var(--acturion-gutter));
	}

	.acturion-contact-form__graphic { display: none; }

	.acturion-contact-form__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

@media (min-width: 1024px) {

	/* [figma] datos de 396 a la izquierda y foto de 816 a la derecha. */
	.acturion-contact-details__body {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--acturion-space-5);
	}

	.acturion-contact-details__text  { flex: 0 0 var(--contact-col); }
	.acturion-contact-details__media { flex: 1 1 0; min-width: 0; }

	/* [figma] el gráfico mide 375 pero ocupa la primera COLUMNA de 396: el formulario
	   arranca en 420, no pegado al gráfico. Por eso una retícula y no un flex. */
	.acturion-contact-form__body {
		display: grid;
		grid-template-columns: var(--acturion-col) minmax(0, 1fr);
		column-gap: var(--acturion-space-5);
		align-items: start;
	}

	.acturion-contact-form__graphic {
		max-width: var(--contact-bars);
		height: 576px;
	}

	/* [figma] «Button primary» del formulario (1365:12136): 816x57, el MISMO ancho
	   que los campos — se estira a la columna igual que en mobile. */
	.acturion-contact-form__submit { align-self: stretch; }
}