/* Contacto.
   Figma (lienzo 1512): panel del formulario 89..763 (674x930), columna de
   datos desde 838, mapa de 498x500. Los valores fluidos alcanzan la medida
   del Figma justo a 1512 px. */

/* ---------------- Cabecera ---------------- */

/* El panel sangra hasta 1462, 39 más allá del contenedor de 1334. */
.agn-hero-pagina--contacto {
	padding-bottom: clamp(1.5rem, 3.97vw, 60px);
}

.agn-hero-pagina--contacto .agn-hero-pagina__interior {
	/* El titular es más alto que la caja, así que van centrados entre sí. */
	align-items: center;
	gap: 0;
}

/* El panel se pasa 39 del contenedor; la cabecera recorta el sobrante. */
.agn-hero-pagina--contacto .agn-hero-pagina__panel {
	width: calc(100% + clamp(0px, 2.58vw, 39px));
}

/* Figma: «Contacto» de 56 y «¿Necesitas información?» de 120 en dos líneas. */
.agn-hero-pagina--contacto .agn-hero-pagina__titulo {
	margin-top: 0;
	font-size: var(--agn-fs-display);
	line-height: 1.09;
}

/* Panel de 895x179 con 49 arriba y 57 a los lados. */
.agn-hero-pagina--contacto .agn-hero-pagina__panel {
	gap: 0;
	/* Sin alto minimo: la caja se ajusta al texto y no sobra espacio abajo.
	   Sin margen inferior: con la alineación centrada, ese margen desplazaba
	   la caja media altura respecto del titular. */
	padding: clamp(1rem, 3.24vw, 49px) clamp(1.25rem, 3.77vw, 57px);
}

@media (max-width: 860px) {
	.agn-hero-pagina--contacto .agn-hero-pagina__interior {
		gap: 1.5rem;
	}

	.agn-hero-pagina--contacto .agn-hero-pagina__panel {
		width: 100%;
	}
}

/* ---------------- Cuerpo ---------------- */

.agn-contacto {
	padding-block: clamp(1.5rem, 2.65vw, 40px) clamp(2.5rem, 4.7vw, 71px);
}

.agn-contacto__rejilla {
	/* El relleno del panel amarillo y el desfase de la columna derecha salen
	   del mismo valor: asi los dos titulares arrancan siempre a la misma
	   altura, aunque se cambie el tamano del formulario. */
	--agn-contacto-pad: clamp(1.25rem, 2.12vw, 32px);

	display: grid;
	grid-template-columns: minmax(0, 674fr) minmax(0, 585fr);
	gap: clamp(1.5rem, 4.96vw, 75px);
	align-items: start;
}

.agn-contacto__formulario {
	/* El cliente pidió un formulario de tamaño más normal: menos relleno,
	   campos más bajos y menos aire entre ellos. Entra entero en una
	   pantalla de portatil sin tener que desplazarse. */
	padding: var(--agn-contacto-pad) clamp(1rem, 2.12vw, 32px);
	border-radius: var(--agn-r-lg);
	background: var(--agn-amarillo);
}

.agn-contacto__titulo {
	margin: 0 0 clamp(1rem, 1.32vw, 20px);
	font-size: var(--agn-fs-lg);
	font-weight: var(--agn-peso-bold);
	line-height: 1.22;
	color: var(--agn-gris);
}

/* El titular y las etiquetas van 12 más adentro que los campos. */
.agn-contacto__formulario .agn-contacto__titulo,
.agn-campo label {
	padding-inline: 12px;
}

/* La columna derecha se estira hasta el pie de la tarjeta amarilla. */
.agn-contacto__rejilla {
	align-items: stretch;
}

.agn-contacto__datos {
	display: flex;
	flex-direction: column;
	padding-top: var(--agn-contacto-pad);
}

.agn-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 12px;
}

.agn-campo label {
	font-size: var(--agn-fs-body);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-campo input,
.agn-campo textarea {
	width: 100%;
	/* Cuatro pixeles mas bajos que un boton: multiplicado por los cuatro
	   campos es lo que termina de cuadrar el formulario en pantalla. */
	height: 44px;
	padding: .625rem 1.25rem;
	border: 0;
	border-radius: var(--agn-r-pill);
	background: var(--agn-naranja-palido);
	color: var(--agn-gris);
	font-family: inherit;
	font-size: var(--agn-fs-sm);
}

.agn-campo textarea {
	height: clamp(88px, 6.61vw, 100px);
	border-radius: var(--agn-r-lg);
	resize: vertical;
}

.agn-campo input:focus-visible,
.agn-campo textarea:focus-visible {
	outline: 2px solid var(--agn-azul-fuerte);
	outline-offset: 2px;
}

.agn-campo--area {
	margin-bottom: 0;
}

.agn-campo--trampa {
	position: absolute !important;
	left: -9999px;
}

.agn-formulario .agn-btn--mini {
	margin-top: clamp(1rem, 1.46vw, 22px);
	margin-left: 0;
}

.agn-aviso {
	margin-bottom: 1.25rem;
	padding: .875rem 1.125rem;
	border-radius: var(--agn-r-xs);
	font-size: var(--agn-fs-sm);
}

.agn-aviso--ok {
	background: var(--agn-verde-palido);
	color: var(--agn-gris);
}

.agn-aviso--error {
	background: #ffe0e0;
	color: #8a1f1f;
}

/* ---------------- Datos de contacto ---------------- */

.agn-contacto__lista {
	display: flex;
	flex-direction: column;
	gap: clamp(.875rem, 1.46vw, 22px);
	margin: 0 0 clamp(1.25rem, 2.12vw, 32px);
	margin-right: calc(-1 * clamp(0px, .93vw, 14px));
	padding: 0;
	list-style: none;
}

.agn-contacto__lista li {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	font-size: var(--agn-fs-body);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-contacto__lista a {
	color: inherit;
	text-decoration: none;
}

.agn-contacto__lista a:hover,
.agn-contacto__lista a:focus-visible {
	text-decoration: underline;
}

/* Los SVG del Figma traen su propio circulo; no se dibuja borde aqui. */
.agn-contacto__icono {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	color: var(--agn-gris);
}

.agn-contacto__icono svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Mapa de 498x500. */
.agn-contacto__mapa {
	/* Crece hasta igualar el alto de la tarjeta; el aspecto es solo el mínimo. */
	flex: 1 1 auto;
	/* Minimo bajo a proposito: el mapa crece con flex hasta el pie del panel
	   amarillo, y si el minimo fuera alto lo empujaria mas abajo que el
	   formulario y las dos columnas dejarian de terminar parejas. */
	min-height: clamp(180px, 13.23vw, 200px);
	max-width: 498px;
	border-radius: var(--agn-r-xs);
	overflow: hidden;
	background: var(--agn-gris-claro);
}

.agn-contacto__mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.agn-contacto__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.agn-contacto__mapa {
		max-width: none;
	}

	.agn-contacto__datos {
		padding-top: 0;
	}

	.agn-contacto__lista {
		margin-right: 0;
	}
}

/* Cloudflare Turnstile ------------------------------------------------ */

.agn-formulario__turnstile {
	margin-bottom: 1.25rem;
	max-width: 100%;
	overflow: hidden;
}

.agn-formulario__turnstile iframe {
	max-width: 100%;
}