/* ================================================
   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 - NUEVA ESTRUCTURA
   ================================================ */

.contacto-bloque-2-desktop {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 2rem; /* 32px */
	padding: 2rem; /* 32px */
	height: 100vh;
}

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

/* ================================================
   FILA SUPERIOR: H1 + PÁRRAFO
   ================================================ */

.contacto-fila-superior {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Columna 1: H1 */
.contacto-fila-superior-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;
	leading-trim: both;
	text-edge: cap;
}

/* Columna 2: Párrafo */
.contacto-fila-superior-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;
	leading-trim: both;
	text-edge: cap;
	width: 65%;
}

/* ================================================
   FILA INFERIOR: MAPA + FORMULARIO/DATOS
   ================================================ */

.contacto-fila-inferior {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem; /* 32px */
	min-height: 0;
	height: 30rem;
	margin-top: auto;
}

/* ================================================
   COLUMNA IZQUIERDA: MAPA
   ================================================ */

.contacto-fila-inferior-col-1 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
}

.contacto-mapa-wrapper {
	display: flex;
	flex-direction: column;
}

.contacto-mapa-wrapper .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: 100%;
	height: 25.4375rem; /* 407px */
	background: #ccc;
	border-radius: 0;
}

.leaflet-bottom {
	display: none;
}

/* ================================================
   COLUMNA DERECHA: FORMULARIO + DATOS
   ================================================ */

.contacto-fila-inferior-col-2 {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 2rem; /* 32px */
	min-height: 0;
}

/* ================================================
   ÁREA FORMULARIO (Fila superior derecha)
   ================================================ */

.contacto-formulario-area {
	display: flex;
	flex-direction: column;
}

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

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

/* Estilos del formulario CF7 - Grid 2 columnas */
.contacto-formulario-wrapper .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

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

/* Cada párrafo ocupa una columna */
.contacto-formulario-wrapper .wpcf7-form p {
	margin: 0;
}

/* Acepto y Enviar en la última fila */
.contacto-formulario-wrapper .wpcf7-form p:nth-last-child(2) {
	grid-column: 1;
	display: flex;
	align-items: flex-end;
}

.contacto-formulario-wrapper .wpcf7-form p:last-of-type {
	grid-column: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

/* 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.4rem;
	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: 10%;
	text-underline-position: from-font;
	transition: opacity 0.3s ease;
}

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

/* ================================================
   ÁREA DATOS (Fila inferior derecha - 3 columnas)
   ================================================ */

.contacto-datos-area {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem; /* 32px */
	align-self: flex-end;
}

/* Columnas de datos */
.contacto-datos-col {
	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 1rem 0;
	leading-trim: both;
	text-edge: cap;
}

.contacto-datos-titular:not(:first-child) {
	margin-top: 2rem;
}

/* Textos */
.contacto-datos-texto {
	color: #202020;
	font-family: 'Switzer Variable';
	font-size: 0.9rem;
	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 */
}

.wpcf7-list-item {
	margin: 0 !important;
	font-size: 0.9rem;
}

.wpcf7-list-item a {
	color: #202020 !important;
	font-size: 0.9rem;
}

.wpcf7-list-item-label {
	margin-left: 5px !important;
}

.wpcf7-list-item input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background: transparent !important;
  border: 1px solid #202020;
  cursor: pointer;
  vertical-align: middle;
}

.wpcf7-list-item input:checked {
  background: #202020 !important;
}


/* ================================================
   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: 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: 32px;
	}

	/* 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-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;
	}
	
	.wpcf7-list-item {
		font-size: 12px;
	}

	.wpcf7-list-item a {
		font-size: 12px;
	}
}