/* ================================================
   CONTACTO - BLOQUE 1: INTRO
   ================================================ */

.contacto-intro-section {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #F6F3E8;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	will-change: transform;
}

@supports (height: 100svh) {
	.contacto-intro-section {
		height: 100svh;
	}
}

/* H1 CONTACTO */
.contacto-intro-title {
	z-index: 2;
	position: relative;
	color: #202020;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
	/* Estado inicial para animación */
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

/* Imagen de fondo detrás del H1 */
.contacto-intro-background {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	z-index: 1;
	height: auto;
	width: 100%;
	max-width: none;
	will-change: transform;
}

/* ================================================
   CONTACTO - BLOQUE 2: CONTENIDO DESKTOP
   ================================================ */

.contacto-bloque-2-section {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #F6F3E8;
}

@supports (height: 100svh) {
	.contacto-bloque-2-section {
		min-height: 100svh;
	}
}

/* ================================================
   DESKTOP LAYOUT
   ================================================ */

.contacto-bloque-2-desktop {
	display: grid;
	grid-template-columns: 1.71fr 1.33fr 0.78fr;
	column-gap: 2rem; /* 32px */
	padding: 2rem; /* 32px */
	min-height: 100vh;
}

@supports (height: 100svh) {
	.contacto-bloque-2-desktop {
		min-height: 100svh;
	}
}

/* ================================================
   COLUMNA 1: TÍTULO + MAPA
   ================================================ */

.contacto-col-1 {
	display: flex;
	flex-direction: column;
}

.contacto-titulo {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 5rem; /* 80px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	text-transform: uppercase;
	margin: 0 0 auto 0;
	leading-trim: both;
	text-edge: cap;
}

.contacto-col-1 .contacto-subtitulo {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 2rem; /* 32px */
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	margin: 0 0 2.25rem 0; /* 36px abajo */
	leading-trim: both;
	text-edge: cap;
}

.contacto-mapa {
	width: 86%;
	height: 25.4375rem; /* 407px */
	background: #ccc;
	border-radius: 0;
}

.leaflet-bottom {
	display: none;
}

/* ================================================
   COLUMNA 2: PÁRRAFO + FORMULARIO
   ================================================ */

.contacto-col-2 {
	display: flex;
	flex-direction: column;
}

.contacto-parrafo {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: 155%;
	margin: 0 0 auto 0;
	leading-trim: both;
	text-edge: cap;
}

.contacto-col-2 .contacto-subtitulo {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 2rem; /* 32px */
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	margin: 0 0 2.25rem 0; /* 36px abajo */
	leading-trim: both;
	text-edge: cap;
}

.contacto-formulario-wrapper {
	width: 21.125rem; /* 338px */
	height: 25.4375rem; /* 407px - misma altura del mapa */
	display: flex;
	flex-direction: column;
}

/* Estilos del formulario CF7 */
.contacto-formulario-wrapper .wpcf7-form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Ocultar spinner de CF7 */
.wpcf7-spinner {
	display: none;
}

/* Height 100% para el form específico */
#wpcf7-f228-o1 {
	height: 100%;
}

.contacto-formulario-wrapper .wpcf7-form p {
	margin: 0 0 2.625rem 0; /* 42px entre inputs */
}

.contacto-formulario-wrapper .wpcf7-form p:nth-last-child(2) {
	margin-bottom: 0;
}

.contacto-formulario-wrapper .wpcf7-form p:last-of-type {
	margin-top: auto;
	margin-bottom: 0;
	text-align: right;
}

/* Inputs del formulario */
.contacto-input {
	width: 100%;
	padding: 0.375rem 0.25rem; /* 6px 4px */
	border: none;
	border-bottom: 1px solid #202020;
	border-radius: 0;
	background: transparent;
	color: #202020;
	font-family: 'Utile Display';
	font-size: 1.5rem; /* 24px */
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	outline: none;
	transition: opacity 0.3s ease;
}

.contacto-input::placeholder {
	color: #202020;
	opacity: 0.25;
}

.contacto-input:focus {
	opacity: 1;
}

/* Submit button */
.contacto-submit {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #202020;
	font-family: 'Utile Display';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 5.5%;
	text-underline-offset: 15%;
	text-underline-position: from-font;
	transition: opacity 0.3s ease;
}

.contacto-submit:hover {
	opacity: 0.7;
}

/* ================================================
   COLUMNA 3: DATOS DE CONTACTO
   ================================================ */

.contacto-col-3 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.contacto-datos {
	display: flex;
	flex-direction: column;
}

/* Titulares */
.contacto-datos-titular {
	color: #202020;
	font-family: 'Utile Display';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.16px;
	text-transform: uppercase;
	margin: 0 0 1.5rem 0; /* 24px */
	leading-trim: both;
	text-edge: cap;
}

.contacto-datos-titular:not(:first-child) {
	margin-top: 3rem; /* 48px */
}

/* Textos */
.contacto-datos-texto {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	leading-trim: both;
	text-edge: cap;
}

/* Enlaces */
.contacto-datos-link {
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.contacto-datos-link:hover {
	opacity: 0.7;
}

/* Redes en columna */
.contacto-datos-redes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px */
}

/* ================================================
   MOBILE LAYOUT
   ================================================ */

.contacto-bloque-2-mobile {
	display: none;
}

@media (max-width: 767px) {

	/* Ocultar desktop */
	.contacto-bloque-2-desktop {
		display: none;
	}

	/* Mostrar mobile */
	.contacto-bloque-2-mobile {
		display: block;
		min-height: 100vh;
		position: relative;
	}

	@supports (height: 100svh) {
		.contacto-bloque-2-mobile {
			min-height: 100svh;
		}
	}

	/* ================================================
	   BLOQUE 1 INTRO MOBILE
	   ================================================ */

	.contacto-intro-title {
		font-size: 46px;
		letter-spacing: -0.46px;
	}

	.contacto-intro-background {
		width: 150%;
	}

	/* ================================================
	   ESTADO 1: TÍTULO + PÁRRAFO + DATOS
	   ================================================ */

	.contacto-mobile-estado-1 {
		padding: 80px 16px 16px 16px;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	@supports (height: 100svh) {
		.contacto-mobile-estado-1 {
			min-height: 100svh;
		}
	}

	.contacto-mobile-estado-1 .contacto-titulo {
		font-size: 46px;
		line-height: 100%;
		letter-spacing: -0.46px;
		margin-bottom: 38px;
	}

	.contacto-mobile-estado-1 .contacto-parrafo {
		font-size: 14px;
		line-height: 135%;
		letter-spacing: -0.14px;
		margin-bottom: 90px;
	}

	/* Footer contenido en estado 1 mobile */
	.contacto-mobile-estado-1 .footer-contenido {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		width: 100%;
	}

	/* ================================================
	   ESTADO 2: FORMULARIO + MAPA
	   ================================================ */

	.contacto-mobile-estado-2 {
		padding: 16px;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%);
		will-change: transform;
	}

	@supports (height: 100svh) {
		.contacto-mobile-estado-2 {
			min-height: 100svh;
		}
	}

	/* Formulario mobile */
	.contacto-formulario-wrapper-mobile {
		margin-bottom: auto;
	}

	.contacto-formulario-wrapper-mobile .contacto-subtitulo {
		color: #202020;
		font-family: 'Utile Display';
		font-size: 28px;
		font-style: normal;
		font-weight: 500;
		line-height: 115%;
		letter-spacing: -0.56px;
		margin: 0 0 24px 0;
		leading-trim: both;
		text-edge: cap;
	}

	.contacto-formulario-wrapper-mobile .wpcf7-form {
		display: flex;
		flex-direction: column;
	}

	.contacto-formulario-wrapper-mobile .wpcf7-form p {
		margin: 0 0 24px 0;
	}

	.contacto-formulario-wrapper-mobile .wpcf7-form p:nth-last-child(2) {
		margin-bottom: 0;
	}

	.contacto-formulario-wrapper-mobile .wpcf7-form p:last-of-type {
		margin-top: 32px;
		margin-bottom: 0;
		text-align: right;
	}

	.contacto-formulario-wrapper-mobile .contacto-input {
		font-size: 20px;
		line-height: 110%;
		padding: 6px 4px;
	}

	.contacto-formulario-wrapper-mobile .contacto-submit {
		font-size: 16px;
	}

	/* Mapa mobile */
	.contacto-mapa-wrapper-mobile .contacto-subtitulo {
		color: #202020;
		font-family: 'Utile Display';
		font-size: 28px;
		font-style: normal;
		font-weight: 500;
		line-height: 115%;
		letter-spacing: -0.56px;
		margin: 0 0 24px 0;
		leading-trim: both;
		text-edge: cap;
	}

	.contacto-mapa-mobile {
		width: 100%;
		height: 250px;
		background: #ccc;
		border-radius: 0;
	}
	
	.leaflet-container {
		font-size: 11px;
	}

	/* Ajustar separación entre formulario y mapa */
	.contacto-mapa-wrapper-mobile {
		margin-top: auto;
	}
}