/*
  Contáctanos.

  Una cabecera oscura con la imagen de fondo del diseño original y, montada
  sobre su borde inferior, la tarjeta blanca con los datos de contacto y el
  formulario. Debajo, la sección clara hasta el pie.

  El azul termina siempre a media altura del panel del formulario, también
  cuando la tarjeta se apila y el panel queda muy abajo (decisión de la
  directora: el panel solo sobre fondo claro se ve raro). Por eso el fondo
  azul es del envoltorio .contacto y la parte clara la pinta un elemento
  colgado del panel (.contacto-fondo-claro), por detrás de la tarjeta.

  Medidas tomadas de los mockups de 1512 px y de 360 px
  (docs/mockups/contactanos/). Cada clamp() une esos dos puntos y llega a su
  máximo en 1440 px. Los textos de cuerpo tienen tamaño fijo, como en el
  resto del sitio; los títulos, la píldora y los espacios, clamp().
*/

.contacto {
	/* Cuánto sube la tarjeta sobre la cabecera: 162 px a 1512, 139.5 a 360. */
	--contacto-montaje: clamp(8.72rem, 8.25rem + 2.083vw, 10.125rem);
	/* Radio de la tarjeta y del panel del formulario: 32 px a 1512, 14 a 360. */
	--contacto-radio: clamp(0.875rem, 0.5rem + 1.667vw, 2rem);
	/* Cuánto se mete el panel dentro de la tarjeta: 16 px a 1512, 9 a 360. */
	--contacto-margen: clamp(0.5625rem, 0.417rem + 0.648vw, 1rem);

	/*
	  El padding de arriba pone la píldora a 156 px del borde de la página
	  (132.5 en móvil); lo aplica layout.css a la primera sección.
	*/
	--primera-seccion-pt: clamp(8.28rem, 7.79rem + 2.176vw, 9.75rem);

	/* Contexto propio: la parte clara va detrás de la tarjeta, pero delante de este fondo. */
	position: relative;
	z-index: 0;
	overflow: clip;
	background: var(--bg-dark) url("../img/fotos/contactanos/fondo.webp") center top / 100% 100% no-repeat;
}

/*
  La parte clara: arranca dentro del panel, a la misma distancia de su
  borde de arriba que en el mockup de escritorio (146 px: el azul termina
  a los 631.5 y el panel empieza a los 485.5), y baja hasta el pie. El
  overflow: clip de .contacto la corta ahí.
*/
.contacto-fondo-claro {
	position: absolute;
	z-index: -1;
	top: calc(var(--contacto-montaje) - var(--contacto-margen));
	right: -100vw;
	bottom: -200vh;
	left: -100vw;
	background-color: var(--bg-light);
}

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

/*
  El padding de abajo deja el hueco hasta la tarjeta (105.6 px → 62) más lo
  que la tarjeta se monta encima.
*/
.contacto-cabecera {
	padding-bottom: calc(clamp(3.875rem, 2.967rem + 4.037vw, 6.6rem) + var(--contacto-montaje));
	color: var(--text-1);
	text-align: center;
}

.contacto-cabecera__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 171.5 × 31.5 a 1512; 144 × 18.5 a 360. Texto blanco en 500, sin espaciado. */
.contacto-cabecera__pildora {
	display: inline-flex;
	align-items: center;
	height: clamp(1.156rem, 0.885rem + 1.204vw, 1.969rem);
	padding-inline: clamp(0.6875rem, 0.6458rem + 0.185vw, 0.8156rem);
	border-radius: var(--radius-pill);
	background-color: var(--hover-cyan);
	color: var(--text-1);
	font-size: clamp(0.7125rem, 0.6667rem + 0.2037vw, 0.85rem);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
}

/* 47.6 px a 1512, 24.7 a 360, en 700. */
.contacto-cabecera__titulo {
	margin-top: clamp(0.58rem, 0.436rem + 0.648vw, 1.02rem);
	font-size: clamp(1.544rem, 1.067rem + 2.12vw, 2.975rem);
	font-weight: 700;
	color: var(--text-1);
}

/*
  13.7 px con renglones de 22. El ancho corta como el original: "…en
  contacto con / nosotros. En RIAL, … la inteligencia / artificial en…".
*/
.contacto-cabecera__bajada {
	max-width: 49.2em;
	margin-top: clamp(1.225rem, 0.958rem + 1.185vw, 2.025rem);
	font-size: 0.85625rem;
	line-height: 1.6;
	color: var(--text-1);
}

/* ---------- Sección clara y tarjeta ---------- */

/* El hueco de abajo, hasta el pie: 108 px a 1512, 58.5 a 360. */
.contacto-seccion {
	padding-bottom: clamp(3.656rem, 2.625rem + 4.583vw, 6.75rem);
}

/*
  1147 px a 1512: el 84.3 % del contenedor. El panel del formulario va
  metido 16 px por dentro del borde, así que ese es el padding de la
  tarjeta; la columna de los datos suma el suyo propio.
*/
/* Sin position ni z-index: así la parte clara del panel queda detrás de ella. */
.contacto-tarjeta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 52.06%);
	width: 84.3%;
	margin-inline: auto;
	margin-top: calc(var(--contacto-montaje) * -1);
	padding: var(--contacto-margen);
	border-radius: var(--contacto-radio);
	background-color: var(--bg-white);
	box-shadow: var(--sombra-tarjeta-clara);
	color: var(--bg-dark);
}

/* ---------- Columna de los datos ---------- */

/* Centrada en el alto de la tarjeta; el texto, a 54 px del borde. */
.contacto-datos {
	align-self: center;
	padding: 2rem 2rem 2rem 2.375rem;
}

/* 48 px a 1512, 25 a 360. */
.contacto-datos__titulo {
	font-size: clamp(1.5625rem, 1.083rem + 2.13vw, 3rem);
	font-weight: 700;
	text-wrap: wrap;
}

/* Corta en "…y explorar / oportunidades de colaboración.". */
.contacto-datos__bajada {
	max-width: 27.5em;
	margin-top: 0.35rem;
	font-size: 0.85625rem;
	line-height: 1.6;
}

.contacto-datos__lista {
	display: flex;
	flex-direction: column;
	gap: 1.42rem;
	margin: 2.95rem 0 0;
	padding: 0;
	list-style: none;
}

/*
  Ícono a la izquierda, centrado en el alto de las dos líneas; nombre en
  600 y valor en gris debajo.
*/
.contacto-dato {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0.72rem;
	row-gap: 0.17rem;
	align-items: center;
}

.contacto-icono {
	grid-row: 1 / 3;
	width: clamp(1.1875rem, 0.8958rem + 1.2963vw, 2rem);
	height: auto;
}

.contacto-dato__nombre {
	font-size: 0.95625rem;
	font-weight: 600;
	line-height: 1.4;
}

.contacto-dato__valor {
	font-size: 0.85625rem;
	line-height: 1.6;
	color: var(--text-3);
}

.contacto-dato__valor a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.contacto-dato__valor a:hover,
.contacto-dato__valor a:focus-visible {
	color: var(--bg-dark);
}

.contacto-dato__separador {
	margin-inline: 0.25em;
}

/*
  254.5 × 42 a 1512, con el texto en 13 px (medido) y más aire a la derecha
  de la flecha que a la izquierda del texto. La flecha gira hacia abajo al
  pasar el cursor, como en Nosotros.
*/
.contacto-datos__boton {
	margin-top: 2.22rem;
	padding-inline: 1.625rem 1.875rem;
	gap: 1.05rem;
	font-size: 0.8125rem;
}

.contacto-datos__flecha {
	flex: none;
	width: 0.95rem;
	height: auto;
	transition: transform 0.25s ease;
}

.contacto-datos__boton:hover .contacto-datos__flecha,
.contacto-datos__boton:focus-visible .contacto-datos__flecha {
	transform: rotate(90deg);
}

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

/*
  El panel celeste, medido del mockup y pasado a sRGB. Los campos van en
  dos columnas: nombre y apellido comparten fila; el resto ocupa las dos.
*/
.contacto-formulario {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: clamp(0.625rem, 0.53rem + 0.426vw, 0.92rem);
	position: relative; /* de aquí cuelga la parte clara de la página */
	align-content: start;
	padding: 3.95rem clamp(1.125rem, 0.5625rem + 2.5vw, 2.8125rem) 3.8rem;
	border-radius: var(--contacto-radio);
	background-color: var(--panel-contacto);
}

.contacto-campo {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	grid-column: 1 / -1;
}

.contacto-campo--nombre,
.contacto-campo--apellido {
	grid-column: auto;
}

.contacto-campo__etiqueta {
	font-size: 0.925rem;
	line-height: 1.5;
	color: var(--bg-dark);
}

/* Blancos, sin borde, radio de 6 y 32 px de alto (29 en móvil). */
.contacto-campo__control {
	width: 100%;
	height: clamp(1.8125rem, 1.75rem + 0.278vw, 2rem);
	padding: 0.35rem 0.75rem;
	border: 0;
	border-radius: 6px;
	background-color: #FFFFFF;
	color: var(--bg-dark);
	font-size: 0.925rem;
	line-height: 1.4;
}

textarea.contacto-campo__control {
	height: clamp(5.375rem, 5.25rem + 0.556vw, 5.75rem);
	resize: vertical;
}

/* El foco en azul noche: el cian del resto del sitio no se ve sobre el panel. */
.contacto-campo__control:focus-visible {
	outline: 2px solid var(--bg-dark);
	outline-offset: 1px;
}

/*
  Relleno en azul noche y del ancho de una columna, centrado. Al pasar el
  cursor se vacía y queda contorneado, el mismo gesto que el resto de los
  botones rellenos del sitio.
*/
.contacto-formulario__enviar {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - 1.5rem) / 2);
	margin-top: 0.02rem;
	border-color: var(--bg-dark);
	background-color: var(--bg-dark);
	color: var(--text-1);
	font-size: 0.91875rem;
	font-weight: 400;
}

.contacto-formulario__enviar:hover,
.contacto-formulario__enviar:focus-visible {
	background-color: transparent;
	color: var(--bg-dark);
}

.contacto-formulario__enviar:focus-visible {
	outline-color: var(--bg-dark);
}

.contacto-formulario__enviar:disabled {
	opacity: 0.6;
	cursor: progress;
}

.contacto-formulario__aviso {
	grid-column: 1 / -1;
	font-size: 0.925rem;
	line-height: 1.5;
	text-align: center;
	color: var(--bg-dark);
}

.contacto-formulario__aviso--enviado {
	font-weight: 600;
}

/* El campo trampa: fuera de la pantalla, pero no con display: none, que algunos robots saltan. */
.contacto-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Tablet (menú de hamburguesa): todo apilado y centrado ---------- */

@media (max-width: 991px) {
	/* Con la tarjeta apilada el fondo es muy alto: se recorta en vez de estirarse. */
	.contacto {
		background-size: cover;
	}

	/* La tarjeta ocupa todo el contenedor; el formulario, debajo de los datos. */
	.contacto-tarjeta {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.contacto-datos {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: clamp(1.8rem, 1.5rem + 1.3vw, 2.5rem) 1rem clamp(3rem, 2.6rem + 1.7vw, 4rem);
		text-align: center;
	}

	.contacto-datos__lista {
		align-items: center;
		gap: 1rem;
		margin-top: 2rem;
	}

	/* En móvil el ícono va arriba y el nombre y el valor, debajo. */
	.contacto-dato {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 0.2rem;
	}

	.contacto-icono {
		grid-row: auto;
		margin-bottom: 0.3rem;
	}

	.contacto-datos__boton {
		margin-top: 2.4rem;
	}
}

/* ---------- Móvil vertical: una columna de campos y el botón a todo el ancho ---------- */

@media (max-width: 479px) {
	.contacto-campo--nombre,
	.contacto-campo--apellido {
		grid-column: 1 / -1;
	}

	.contacto-formulario__enviar {
		width: 100%;
	}

	.contacto-formulario {
		padding-bottom: 4.4rem;
	}
}