/**
 * Formulario de contacto — nodo 61:1155.
 *
 * MainRow de 486px: FormCol 972 + gap 48 + InfoCol 420.
 */

.cvp-contacto {
	background: var(--cvp-white);
	padding: var(--cvp-sp-7) 0 var(--cvp-sp-8);
}

.cvp-contacto__inner {
	display: grid;
	grid-template-columns: 972fr 420fr;
	gap: var(--cvp-sp-6);
	align-items: start;
}

/* --- Columna del formulario ------------------------------------------- */

.cvp-contacto__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cvp-sp-3);
}

.cvp-contacto__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px var(--cvp-sp-2);   /* 20px verticales, como el Figma */
	width: 100%;
}

.cvp-contacto__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cvp-contacto__field--full {
	grid-column: 1 / -1;
}

.cvp-contacto__label {
	font-family: var(--cvp-font-text);
	font-size: var(--cvp-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cvp-tracking-nav);
	text-transform: uppercase;
	color: #4d4d4d;
}

.cvp-contacto__input {
	font-family: var(--cvp-font-text);
	font-size: var(--cvp-fs-base);
	color: var(--cvp-black);
	background: var(--cvp-white);
	border: 1px solid #d9d9d9;
	border-radius: 0;
	padding: 0 12px;
	height: 46px;
	width: 100%;
	transition: border-color var(--cvp-dur) var(--cvp-ease);
}

.cvp-contacto__input--area {
	height: auto;
	min-height: 100px;
	padding: 10px 12px;
	resize: vertical;
	line-height: var(--cvp-lh-normal);
}

.cvp-contacto__input:focus-visible {
	outline: none;
	border-color: var(--cvp-navy);
	box-shadow: 0 0 0 2px rgba(0, 70, 150, 0.18);
}

.cvp-contacto__input.is-error {
	border-color: var(--cvp-orange);
}

.cvp-contacto__error {
	font-size: var(--cvp-fs-xs);
	color: var(--cvp-orange);
	font-weight: 500;
}

.cvp-contacto__error-general,
.cvp-contacto__ok {
	font-family: var(--cvp-font-text);
	font-size: var(--cvp-fs-base);
	font-weight: 500;
	padding: 12px 16px;
	margin: 0 0 var(--cvp-sp-3);
	border-left: 4px solid;
}

.cvp-contacto__ok {
	background: #eaf5e3;
	border-left-color: var(--cvp-green);
	color: #2f6b18;
}

.cvp-contacto__error-general {
	background: #fdece0;
	border-left-color: var(--cvp-orange);
	color: #a33d00;
}

/* Submit: 169x50, naranja del Figma. */
.cvp-contacto__submit {
	background: var(--cvp-orange);
	color: var(--cvp-white);
	border: 0;
	min-width: 169px;
	height: 50px;
	padding: 0 var(--cvp-sp-4);
	font-family: var(--cvp-font-text);
	font-size: 0.9375rem;   /* 15 */
	font-weight: 700;
	letter-spacing: var(--cvp-tracking-btn);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--cvp-dur) var(--cvp-ease);
}

.cvp-contacto__submit:hover {
	background: #e06200;
}

.cvp-contacto__submit:focus-visible {
	outline: 3px solid var(--cvp-navy);
	outline-offset: 2px;
}

/* reCAPTCHA: el cuadro de Google mide 304x78 fijo y en 320 px no entra
   con el margen del contenedor; se achica en vez de desbordar. */
.cvp-contacto__captcha {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--cvp-sp-3);
}

@media (max-width: 359px) {
	.cvp-contacto__captcha .g-recaptcha {
		transform: scale(0.88);
		transform-origin: 0 0;
		/* El ancho y el alto que ocupa achicado: si no, los 304 originales
		   estiran la columna del formulario. */
		width: 268px;
		height: 69px;
	}
}

/* Honeypot: fuera de pantalla, no display:none — algunos bots lo detectan. */
.cvp-contacto__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Caja de datos ---------------------------------------------------- */

.cvp-contacto__info {
	background: var(--cvp-sky);
	padding: var(--cvp-sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--cvp-sp-3);
}

.cvp-contacto__info-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cvp-contacto__info-label {
	margin: 0;
	font-family: var(--cvp-font-text);
	font-size: var(--cvp-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cvp-tracking-nav);
	text-transform: uppercase;
	color: var(--cvp-navy);
}

.cvp-contacto__info-value {
	margin: 0;
	font-family: var(--cvp-font-text);
	font-size: var(--cvp-fs-base);
	color: var(--cvp-navy);
	line-height: var(--cvp-lh-normal);
}

.cvp-contacto__info-value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 70, 150, 0.3);
}

.cvp-contacto__info-value a:hover {
	border-bottom-color: currentColor;
}

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 900px) {
	.cvp-contacto__inner {
		grid-template-columns: 1fr;
	}

	.cvp-contacto__row {
		grid-template-columns: 1fr;
	}

	.cvp-contacto__field--half {
		grid-column: 1 / -1;
	}

	.cvp-contacto__submit {
		width: 100%;
	}
}

/* Figma del 6 de octubre de 2026 (nodos 1:396 y 1:408): los campos son una línea gris de 1,5 abajo, sin
   caja; la columna de datos lleva borde navy de 1px y 400 de alto. Con
   doble clase, porque los input[type=…] de Astra ganan a una sola. */
.cvp-contacto .cvp-contacto__input {
	border: 0;
	border-bottom: 1.5px solid #ccc;
	background: transparent;
	padding: 0 2px;
}
.cvp-contacto .cvp-contacto__input--area { padding: 8px 2px; }
.cvp-contacto .cvp-contacto__input:focus-visible { border-bottom-color: var(--cvp-navy); box-shadow: 0 1.5px 0 var(--cvp-navy); }
.cvp-contacto .cvp-contacto__input.is-error { border-bottom-color: var(--cvp-orange); }
.cvp-contacto__info { border: 1px solid var(--cvp-navy); }
@media (min-width: 901px) {
	.cvp-contacto__info { min-height: 400px; }
}