/*!
 * EDESAC — Contacto (Figma 514:3502)
 * =============================================================================
 * Hero compartido + un split de dos columnas: formulario de CF7 a la izquierda,
 * tarjeta corporativa, CTA de WhatsApp y mapa a la derecha.
 *
 * ESTA PÁGINA NO USA LA PALETA DE `base.css` EN LOS FORMULARIOS
 * El diseño trae aquí una escala de grises propia (#0f172a, #475569, #94a3b8,
 * #cbd5e1) que no existe en el resto del sitio, y tipografías Inter/Montserrat
 * donde las demás páginas usan Be Vietnam Pro. Se declaran como variables
 * locales en `.edh-contacto` en lugar de ensuciar los tokens globales: si
 * mañana el diseño unifica la escala, se borra este bloque y ya está.
 *
 * Los azules y el rojo sí salen de los tokens: son los de marca.
 */

/* ─────────────────────────────────────── 1. Hero de la página ── */

/* El hero es el partial compartido (`edesac_seccion_hero`), pero el Figma pide
   para Contacto otra foto y otro degradado. Esta hoja solo se carga aquí, así
   que se puede pisar sin tocar Nosotros ni Industrias. */

/* La foto va espejada: en el Figma el nodo está rotado 180° y volteado en Y,
   que es exactamente un espejo horizontal. Así el operario queda a la derecha
   y la planta —donde cae el degradado— a la izquierda. */
.edh-contacto-hero .edh-hero-pagina__img {
	transform: scaleX(-1);
}

/* Degradado del Figma (nodo 554:3906): #2474a6 sólido hasta el 3,25 %, al
   71,7 % de opacidad en el 31,4 % y transparente en el 46,9 %. Es bastante más
   corto y más opaco que el de las otras interiores: aquí el título queda sobre
   la zona de la planta, que es la parte clara de la foto. */
.edh-contacto-hero .edh-hero-pagina__velo {
	background: linear-gradient(
		90deg,
		#2474a6 3.25%,
		rgba(36, 116, 166, 0.717) 31.41%,
		rgba(36, 116, 166, 0) 46.9%
	);
}

/* ──────────────────────────────────────── 2. Rejilla del split ── */

.edh-contacto {
	--edh-cnt-font: 'Inter', system-ui, sans-serif;
	--edh-cnt-head: 'Montserrat', var(--edesac-font-body);

	/* Escala de grises propia del diseño de esta página. */
	--edh-cnt-ink: #0f172a;      /* etiquetas y textos fuertes */
	--edh-cnt-text: #475569;     /* párrafo introductorio */
	--edh-cnt-muted: #94a3b8;    /* placeholders */
	--edh-cnt-border: #cbd5e1;   /* bordes de campos y tarjetas */

	background: #fff;
	padding-block: clamp(40px, 5.55vw, 80px);
}

/* El Figma da 80 px de margen lateral sobre un lienzo de 1440: el contenido
   mide 1280, más ancho que el contenedor de 1208 que usa el resto del sitio.
   Se respeta el del diseño, que es lo que alinea el formulario con el mapa. */
.edh-contacto__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 64px;
	align-items: start;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5.55vw, 80px);
}

/* ────────────────────────────────── 3. Columna del formulario ── */

.edh-contacto__col-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* En el Figma es una barra de pestañas con una sola pestaña activa. Se maqueta
   como tal —y no como un simple <h2> subrayado— porque el diseño deja sitio
   para más pestañas (cotización, reclamos) y así añadirlas es sumar un <li>. */
/* The7 pinta `.content ul { list-style: disc }` (0,1,1), que gana a una sola
   clase: por eso los selectores de listas van prefijados con `.edh-contacto`.
   Sin esto salen viñetas delante de la pestaña y de cada dato de contacto. */
.edh-contacto .edh-contacto__tabs,
.edh-contacto .edh-corp__lista {
	list-style: none;
}

.edh-contacto .edh-contacto__tab,
.edh-contacto .edh-dato {
	list-style: none;
}

.edh-contacto__tabs {
	display: flex;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--edh-cnt-border);
	list-style: none;
}

.edh-contacto__tab {
	/* El borde de 3 px monta sobre el de 1 px del contenedor en vez de sumarse
	   debajo. */
	margin-bottom: -1px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--edesac-red);
	font-family: var(--edh-cnt-head);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--edesac-blue-section);
}

.edh-contacto__intro {
	font-family: var(--edh-cnt-font);
	font-size: 0.9375rem; /* 15 px */
	line-height: 1.45;
	color: var(--edh-cnt-text);
}

/* El hueco de 24 px del Figma va entre el texto introductorio, la rejilla de
   campos y el botón. El párrafo queda fuera del <form> de CF7 (es contenido de
   la página, no del formulario), así que el hueco se declara dos veces: en el
   envoltorio y dentro del <form>. */
.edh-contacto__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.edh-contacto__form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.edh-contacto__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.edh-contacto__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.edh-contacto .edh-campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.edh-contacto .edh-campo__label {
	font-family: var(--edh-cnt-font);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--edh-cnt-ink);
}

/* El segundo selector cubre los campos que se añadan más adelante sin la clase
   explícita, igual que en `desarrollo.css`. */
.edh-contacto .edh-contacto-input,
.edh-contacto .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--edh-cnt-border);
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font-family: var(--edh-cnt-font);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--edh-cnt-ink);
	appearance: none;
}

.edh-contacto .edh-contacto-input::placeholder {
	color: var(--edh-cnt-muted);
	opacity: 1;
}

.edh-contacto textarea.edh-contacto-input {
	height: 100px;
	min-height: 100px;
	resize: vertical;
}

.edh-contacto .edh-contacto-input:focus {
	outline: 2px solid var(--edesac-blue-section);
	outline-offset: 1px;
	border-color: var(--edesac-blue-section);
}

/* Botón de envío. La flecha es el SVG exportado del Figma (nodo 514:3739)
   incrustado como fondo: `[submit]` de CF7 pinta un <input>, que no admite
   hijos, así que no puede llevar el <svg> dentro como en el diseño.
   Reserva: 40 px de padding + 16 px de icono + 8 px de hueco = 64 px.

   El selector lleva `.edh.edh-contacto .edh-contacto__form` porque The7 repinta
   `.wpcf7-submit` desde `custom.css`, que se encola DESPUÉS de esta hoja: con
   `background` (abreviada) borra la flecha y deja su degradado azul-verde. Con
   cuatro clases se le gana sin recurrir a `!important`. */
.edh.edh-contacto .edh-contacto__form .wpcf7-submit {
	/* El <form> es una columna flex y por defecto estira a sus hijos: sin esto
	   el botón ocupa todo el ancho en vez de ajustarse a su texto, que es como
	   está en el Figma (nodo 514:3735, `shrink-0`). */
	align-self: flex-start;
	width: auto;
	padding: 16px 64px 16px 40px;
	border: 0;
	border-radius: 6px;
	background-color: var(--edesac-red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.3328 8H12.6672M8 12.6672L12.6672 8L8 3.3328' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 40px center;
	background-size: 16px 16px;
	box-shadow: none;
	font-family: var(--edh-cnt-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	/* The7 aplica `font`, `text-transform` y `letter-spacing` desde sus
	   variables de botón; se neutralizan una a una. */
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.edh.edh-contacto .edh-contacto__form .wpcf7-submit:hover {
	background-color: #b82a17;
}

/* The7 pinta sus botones con dos capas absolutas (::before base y ::after
   hover) que taparían el fondo rojo y la flecha. Mismo apaño que en
   `desarrollo.css`. */
.edh.edh-contacto .edh-contacto__form .wpcf7-submit:before,
.edh.edh-contacto .edh-contacto__form .wpcf7-submit:after {
	display: none;
}

/* Aviso de CF7 («Revise los campos…»). El color NO se toca: The7 lo pinta
   desde `custom.css` con `!important` —caja azul de marca y texto blanco— y
   pelearlo obligaría a otro `!important`. Queda legible y en la paleta del
   sitio, así que aquí solo se corrige el espaciado, que por defecto trae un
   margen de 2em que rompe el ritmo de la columna. El diseño no define este
   elemento. */
.edh.edh-contacto .edh-contacto__form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	font-family: var(--edh-cnt-font);
	font-size: 0.875rem;
}

.edh.edh-contacto .edh-contacto__form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-family: var(--edh-cnt-font);
	font-size: 0.8125rem;
	color: var(--edesac-red);
}

/* ─────────────────────────────────── 4. Columna de información ── */

.edh-contacto__col-info {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* 4.1 Tarjeta corporativa */

.edh-corp {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px;
	border-radius: 12px;
	background: var(--edesac-blue-section);
	box-shadow: 0 12px 12px rgba(26, 26, 84, 0.13);
	color: #fff;
}

.edh-corp__cabecera {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.edh-corp__titulo {
	margin: 0;
	font-family: var(--edh-cnt-head);
	font-weight: 800;
	font-size: 1.375rem; /* 22 px */
	line-height: 1.25;
	color: #fff;
}

.edh-corp__ruc {
	font-family: var(--edh-cnt-font);
	font-size: 0.875rem;
	line-height: 1.2;
	opacity: 0.7;
}

/* En el Figma es un nodo <line> blanco al 15 % de opacidad; como regla de CSS
   se comporta igual y no hace falta un SVG. */
.edh-corp__sep {
	height: 1px;
	border: 0;
	margin: 0;
	background: rgba(255, 255, 255, 0.15);
}

.edh-corp__lista {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edh-dato {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.edh-dato__icono {
	display: flex;
	flex-shrink: 0;
	padding: 8px;
	border-radius: 8px;
	background: #1b5687;
}

.edh-dato__icono svg {
	display: block;
	width: 18px;
	height: 18px;
}

.edh-dato__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.edh-dato__label {
	font-family: var(--edh-cnt-font);
	font-weight: 700;
	font-size: 0.75rem;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: 0.6;
}

.edh-dato__valor {
	font-family: var(--edh-cnt-font);
	font-size: 0.9375rem; /* 15 px */
	line-height: 1.4;
	color: #fff;
}

/* Teléfonos y correos son enlaces reales (tel:, mailto:) aunque en el Figma
   sean texto plano: en un móvil es la diferencia entre llamar y copiar a mano.
   Se pintan sin subrayado para que el bloque se vea como en el diseño. */
.edh-dato__valor a {
	color: #fff;
	text-decoration: none;
	word-break: break-word;
}

.edh-dato__valor a:hover {
	color: #fff;
	text-decoration: underline;
}

/* 4.2 CTA de WhatsApp */

.edh-wa {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid #25d366;
	border-radius: 12px;
	background: #e8f9ee;
}

.edh-wa__texto {
	font-family: var(--edh-cnt-font);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #14532d;
}

.edh-wa__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: 8px;
	background: #25d366;
	font-family: var(--edh-cnt-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.edh-wa__btn:hover {
	background: #1eb356;
	color: #fff;
}

.edh-wa__btn svg {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* 4.3 Mapa */

.edh-mapa {
	position: relative;
	display: block;
	height: 220px;
	border: 1px solid var(--edh-cnt-border);
	border-radius: 12px;
	overflow: hidden;
}

.edh-mapa__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edh-mapa__etiqueta {
	position: absolute;
	top: 11px;
	left: 11px;
	padding: 8px 12px;
	border: 1px solid var(--edh-cnt-border);
	border-radius: 6px;
	background: #fff;
	font-family: var(--edh-cnt-font);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--edh-cnt-ink);
}

/* ───────────────────────────────────────────── 5. Responsive ── */

/* La columna de información es fija de 480 px: por debajo de ~1100 px el
   formulario se queda sin sitio antes que ella, así que se apilan. */
@media (max-width: 1100px) {
	.edh-contacto__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.edh-contacto__col-info {
		max-width: 480px;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.edh-contacto__fila {
		grid-template-columns: minmax(0, 1fr);
	}

	.edh-corp {
		padding: 28px 24px;
	}

	/* A pantalla estrecha el botón ocupa el ancho completo; la flecha se queda
	   pegada al borde derecho con el mismo hueco proporcional. */
	.edh.edh-contacto .edh-contacto__form .wpcf7-submit {
		align-self: stretch;
		width: 100%;
		text-align: center;
		padding-inline: 24px 48px;
		background-position: right 24px center;
	}
}