/*!
 * EDESAC — portada
 * =============================================================================
 * Secciones propias de la portada (Figma, nodo 238:2176). Los tokens y los
 * componentes compartidos están en `base.css`, que se carga antes que este
 * archivo.
 *
 * ESTRUCTURA
 *   1. Máscaras propias de la portada
 *   2. Hero
 *   3. Líneas de producto
 *   4. Historia ("Más de 80 años")
 *   5. Banda de imagen
 *   6. Certificaciones
 *   7. Sectores
 *   8. CTA + formulario
 *   9. Responsive
 *  10. Movimiento reducido
 *
 * (La numeración de los separadores de abajo viene del archivo original y
 *  arranca en 4; se mantiene para no romper las referencias de los comentarios.)
 */

/* ──────────────────────────────── Máscaras propias de la portada ── */

.edh {
	/* La forma de las cards y de la banda: rectángulo redondeado con la
	   esquina superior izquierda biselada. Se aplica como máscara para
	   conservar a la vez el bisel y los radios; un `clip-path: polygon()`
	   obligaría a renunciar a las esquinas redondeadas. `preserveAspectRatio
	   ="none"` + `mask-size: 100% 100%` hace que escale a cualquier tamaño. */
	--edh-mask-card: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 262 434' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M53.5287 3.28857C55.7577 1.17692 58.7113 0 61.7817 0H250C256.627 0 262 5.37258 262 12V422C262 428.627 256.627 434 250 434H12C5.37258 434 0 428.627 0 422V59.1616C0 55.8665 1.35497 52.7163 3.74706 50.4501L53.5287 3.28857Z' fill='%23fff'/%3E%3C/svg%3E");
	--edh-mask-band: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 888 356' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M92.8247 1.19405C93.5766 0.430169 94.6036 0 95.6754 0L868 0C879.046 0 888 8.95431 888 20V336C888 347.046 879.046 356 868 356H20C8.95429 356 0 347.046 0 336L0 97.1383C0 96.0884 0.412783 95.0806 1.14927 94.3324L92.8247 1.19405Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ────────────────────────────────────────────────────────────── 4. Hero ── */

.edh-hero {
	background: #fff;
	overflow: hidden;
}

.edh-hero__inner {
	display: grid;
	/* Figma: columna de texto de 450 px a x=153, imagen de 843 px a sangre
	   por la derecha. */
	grid-template-columns: minmax(0, 450px) minmax(0, 843px);
	gap: clamp(24px, 3vw, 40px);
	align-items: end;
	max-width: 1440px;
	margin-inline: auto;
	padding-left: clamp(20px, 10.6vw, 153px);
	/* Hueco para el nav flotante, que va superpuesto (se monta en el tema). */
	padding-top: clamp(90px, 9vw, 130px);
}

.edh-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	padding-bottom: clamp(40px, 6vw, 90px);
}

.edh-hero__title {
	margin: 0;
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: clamp(1.65rem, 2.29vw, 2.0625rem); /* 33 px */
	line-height: 1.1;
	color: var(--edesac-blue-dark);
}

.edh-hero__desc {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--edesac-blue-section);
}

.edh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 21px;
	margin-top: 10px;
}

/* Bloque "Llámanos" — círculo rojo con el icono + dos líneas de texto. */
.edh-phone {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.edh-phone__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--edesac-red);
	color: #fff;
}

.edh-phone__badge svg {
	display: block;
	width: 20px;
	height: 20px;
}

.edh-phone__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: 'Barlow', var(--edesac-font-body);
	color: var(--edesac-blue);
}

.edh-phone__label {
	font-size: 0.9375rem;
	line-height: 1.2;
}

.edh-phone__number {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
}

.edh-phone__prefix {
	font-size: 0.6875rem;
	color: var(--edesac-red);
}

.edh-hero__media {
	align-self: end;
}

.edh-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ──────────────────────────────────────────── 5. Líneas de producto ── */

.edh-lineas {
	padding-block: clamp(48px, 6vw, 90px) clamp(60px, 7vw, 110px);
	background: #fff;
}

.edh-lineas__head {
	max-width: 752px;
	margin-inline: auto;
	text-align: center;
}

.edh-lineas__head .edh-lead {
	margin-top: 12px;
}

.edh-lineas__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 262px));
	justify-content: center;
	gap: clamp(12px, 1.5vw, 22px);
	margin-top: clamp(32px, 4vw, 56px);
	/* Figma: la primera card arranca en x=47, no pegada al borde. */
	padding-inline: clamp(20px, 3.3vw, 47px);
}

/* El escalonado vertical del Figma (tops 892/943/973/943/913 → desfases
   0/51/81/51/21). Es decorativo: en pantallas estrechas se anula. */
.edh-card:nth-child(1) { margin-top: 0; }
.edh-card:nth-child(2) { margin-top: 51px; }
.edh-card:nth-child(3) { margin-top: 81px; }
.edh-card:nth-child(4) { margin-top: 51px; }
.edh-card:nth-child(5) { margin-top: 21px; }

.edh-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 262 / 434;
	overflow: hidden;
	-webkit-mask-image: var(--edh-mask-card);
	mask-image: var(--edh-mask-card);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.edh-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.edh-card:hover .edh-card__img {
	transform: scale(1.06);
}

.edh-card__overlay {
	position: absolute;
	inset: 0;
	/* Figma: degradado hacia arriba, de #2270AE 60% en el 21.795% a #0C2B44
	   60% en el 46.308%. Las paradas van en orden ascendente o el navegador
	   las recorta y el degradado sale plano y gris. */
	background: linear-gradient(
		to top,
		rgba(34, 112, 174, 0.6) 21.795%,
		rgba(12, 43, 68, 0.6) 46.308%
	);
	pointer-events: none;
}

.edh-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	color: #fff;
}

.edh-card__title {
	margin: 0;
	font-family: var(--edesac-font-body);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}

.edh-card__desc {
	font-size: 1rem;
	line-height: 1.19;
	color: #fff;
}

/* ─────────────────────────────────────────── 6. Historia ("80 años") ── */

.edh-historia {
	position: relative;
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--edesac-grey-bg);
	/* Deja sitio abajo a la foto de la banda, que se superpone. */
	padding-bottom: clamp(120px, 14vw, 200px);
}

.edh-historia__inner {
	position: relative;
	max-width: 1170px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.edh-historia__title {
	max-width: 810px;
}

.edh-historia__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 580px));
	gap: clamp(24px, 2.9vw, 42px);
	margin-top: clamp(24px, 3vw, 40px);
}

.edh-historia__cols p {
	font-family: var(--edesac-font-alt);
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.5;
	color: #000;
}

.edh-historia__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: clamp(28px, 3.5vw, 46px);
}

/* Marca de agua: el isotipo, arriba a la derecha, muy tenue. */
.edh-historia__watermark {
	position: absolute;
	top: 0;
	right: clamp(20px, 9.2vw, 132px);
	width: clamp(56px, 6.3vw, 91px);
	height: auto;
	opacity: 0.5;
	pointer-events: none;
}

/* ──────────────────────────────────────────────── 7. Banda de imagen ── */

/* Franja azul profunda con la foto de planta montada encima, desbordando
   hacia arriba sobre la sección anterior, y el bloque rojo a la derecha. */
.edh-banda {
	position: relative;
	height: 245px;
	background: var(--edesac-navy);
}

.edh-banda__inner {
	position: relative;
	max-width: 1440px;
	height: 100%;
	margin-inline: auto;
}

.edh-banda__foto {
	position: absolute;
	left: clamp(20px, 9.4vw, 136px);
	/* Figma: top -186 sobre una banda de 245 → sube 186 px. Ojo con el orden
	   en valores negativos: `clamp()` es max(MIN, min(VAL, MAX)), así que el
	   más negativo va primero o el navegador devuelve siempre el mínimo. */
	top: clamp(-186px, -12.9vw, -120px);
	width: min(62vw, 888px);
	aspect-ratio: 888 / 356;
	object-fit: cover;
	-webkit-mask-image: var(--edh-mask-band);
	mask-image: var(--edh-mask-band);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.edh-banda__bloque {
	position: absolute;
	right: clamp(20px, 8.4vw, 121px);
	top: clamp(-178px, -12.4vw, -100px);
	width: clamp(150px, 19.2vw, 276px);
	height: clamp(220px, 24.6vw, 354px);
	border-radius: 10px;
	background: var(--edesac-red);
}

/* ─────────────────────────────────────────────── 8. Certificaciones ── */

.edh-cert {
	position: relative;
	/* Figma: banda de 202 px de alto con 19 px de padding. */
	min-height: 202px;
	display: flex;
	align-items: center;
	padding-block: 19px;
	background: var(--edesac-blue-section);
	overflow: hidden;
}

.edh-cert__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	opacity: 0.1;
	pointer-events: none;
}

.edh-cert__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 506px) 1px minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 2.5vw, 36px);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	/* El Figma pide 187 px de padding, pero con 506 + 575 px de columnas eso
	   suma 1482 sobre un lienzo de 1440: el propio diseño se desborda. Se baja
	   el padding lo justo para que los tres sellos quepan sin pisar el texto. */
	padding-inline: clamp(20px, 8vw, 115px);
}

.edh-cert__label {
	margin-bottom: 5px;
	font-family: var(--edesac-font-alt);
	font-size: 1.25rem;
	line-height: 1.5;
	color: #fff;
}

.edh-cert__logos {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 3vw, 44px);
	min-width: 0;
}

/* Los tres sellos tienen relaciones de aspecto distintas (111x115, 113x113,
   109x113). Se fija solo el ancho y cada uno conserva su proporción: una caja
   común los deformaría (CLAUDE.md, flujo Figma → página, punto 5). Se fija el
   ancho y no la altura porque es el ancho el que tiene que caber en la
   columna; las alturas resultantes (115/113/113) son justo las del diseño. */
.edh-cert__logos img {
	display: block;
	width: clamp(64px, 7.7vw, 111px);
	height: auto;
}

.edh-cert__divider {
	width: 1px;
	height: 103px;
	background: rgba(255, 255, 255, 0.4);
}

.edh-cert__title {
	margin: 0 0 10px;
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.22vw, 2rem);
	line-height: 1.16;
	color: #fff;
}

.edh-cert__text {
	font-family: var(--edesac-font-alt);
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.5;
	color: #fff;
}

/* ─────────────────────────────────────────────────────── 9. Sectores ── */

.edh-sectores {
	padding-block: clamp(56px, 7vw, 100px);
	background: #fff;
}

.edh-sectores__inner {
	max-width: 1070px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.edh-sectores__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	max-width: 748px;
	margin-inline: auto;
	text-align: center;
}

.edh-sectores__head .edh-lead {
	margin-top: 20px;
	color: var(--edesac-ink);
}

.edh-sectores__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 241px;
	align-items: center;
	gap: clamp(28px, 3.9vw, 55px);
	margin-top: clamp(40px, 5vw, 76px);
}

.edh-sectores__gallery {
	display: grid;
	grid-template-columns: 195fr 206fr 317fr;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
}

.edh-sectores__shot {
	position: relative;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

/* La imagen va posicionada, no en el flujo: en la tercera tarjeta el <figure>
   es flex y una imagen al 100 % de ancho comprimía al icono hermano hasta
   dejarlo en 0 px. Sacándola del flujo, el icono es el único flex item. */
.edh-sectores__shot img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Las dos primeras llevan un velo azul; la tercera, un degradado oscuro
   hacia abajo y el icono encima. */
.edh-sectores__shot--veil { aspect-ratio: 195 / 436; }
.edh-sectores__shot--veil:nth-of-type(2) { aspect-ratio: 206 / 440; }

.edh-sectores__shot--veil::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(34, 112, 174, 0.75);
}

.edh-sectores__shot--icon {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 317 / 576;
}

.edh-sectores__shot--icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(92, 31, 46, 0) 51.7%,
		rgba(56, 18, 28, 0.76) 83.9%
	);
}

.edh-sectores__shot--icon svg {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: clamp(48px, 5vw, 72px);
	height: auto;
	margin: 24px;
	color: #fff;
}

.edh-sectores__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.edh-sectores__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 58px;
	border-radius: 50%;
	/* Figma 238:2295: el óvalo es #2474A6, no el azul primario. */
	background: var(--edesac-blue-section);
	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1;
	color: #fff;
}

/* El Figma separa 26 px el óvalo del bloque de texto, y 49 px el titular de
   su descripción — de ahí el contenedor intermedio. */
.edh-sectores__itemtext {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3.4vw, 49px);
}

.edh-sectores__item h3 {
	margin: 0;
	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.36vw, 2.125rem);
	line-height: 1.2;
	color: var(--edesac-ink);
}

.edh-sectores__item p {
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--edesac-grey-text);
}

/* ─────────────────────────────────────────── 10. CTA + formulario ── */

.edh-cta {
	position: relative;
	padding-block: clamp(60px, 8vw, 110px) clamp(48px, 6vw, 75px);
	overflow: hidden;
}

.edh-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	pointer-events: none;
}

.edh-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 532px) minmax(0, 1fr);
	align-items: start;
	gap: 40px;
	max-width: 1238px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.edh-cta__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	text-align: right;
}

.edh-cta__title {
	max-width: 412px;
	margin: 0;
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.17vw, 3.75rem); /* 60 px */
	line-height: 1.05;
	color: #fff;
}

.edh-cta__text {
	max-width: 353px;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
}

.edh-cta__mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 6px;
	background: var(--edesac-red);
	font-family: 'Raleway', var(--edesac-font-body);
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	text-decoration: underline;
	transition: filter 0.2s ease;
}

.edh-cta__mail:hover {
	filter: brightness(1.08);
	color: #fff;
}

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

/* Panel rojo translúcido del formulario. */
.edh-cta__form {
	padding: 24px;
	border-radius: 16px;
	background: rgba(215, 53, 32, 0.83);
}

/* --- Contact Form 7 -------------------------------------------------- */
/* `WPCF7_AUTOP` está en false (docker-compose.yml), así que CF7 no mete
   <p>/<br> y las filas del grid quedan limpias (CLAUDE.md, trampa 6). */

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

.edh-f-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.edh-f-row--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edh .edh-input,
.edh .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	width: 100%;
	padding: 18px 20px;
	border: 2px solid #fff;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 2.5px rgba(0, 0, 0, 0.03);
	font-family: var(--edesac-font-body);
	font-size: 1rem;
	line-height: 1.2;
	color: var(--edesac-ink);
	appearance: none;
}

.edh .edh-input::placeholder {
	color: #666;
	opacity: 1;
}

.edh select.edh-input {
	color: #666;
	/* Caret del Figma (nodo 238:2327), como fondo para no depender del
	   control nativo del sistema. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 1l8 9 8-9' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 18px 12px;
	padding-right: 52px;
}

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

.edh .edh-input:focus {
	outline: 2px solid var(--edesac-navy);
	outline-offset: 1px;
}

.edh-f-acepto {
	margin-top: 30px;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.edh-f-acepto .wpcf7-list-item {
	margin: 0;
}

.edh-f-acepto a {
	color: #fff;
	text-decoration: underline;
}

.edh-f-acepto__desc {
	display: block;
	margin-top: 4px;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.edh-f-submit {
	margin-top: 30px;
}

/* The7 pinta sus botones con un `background-image: linear-gradient(...)` turquesa
   que se dibuja por encima de cualquier `background-color`. Hay que anular la
   imagen explícitamente, no basta con declarar el color. El selector lleva
   `.edh-cta__form` delante para ganar en especificidad. */
.edh .edh-cta__form .wpcf7-submit {
	padding: 12px 24px;
	border: 0;
	border-radius: 6px;
	background-color: var(--edesac-blue);
	background-image: none;
	box-shadow: none;
	font-family: 'ABeeZee', var(--edesac-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: #fff;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.edh .edh-cta__form .wpcf7-submit:hover {
	background-color: var(--edesac-blue);
	background-image: none;
	filter: brightness(1.12);
}

/* Avisos de CF7 legibles sobre el panel rojo. */
.edh .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid #fff;
	border-radius: 4px;
	color: #fff;
}

.edh .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: #fff;
	font-size: 0.8125rem;
}

/* ────────────────────────────────────────────────────── 11. Responsive ── */

@media (max-width: 1100px) {
	/* El escalonado de las cards deja de tener sentido cuando envuelven. */
	.edh-lineas__grid {
		grid-template-columns: repeat(3, minmax(0, 262px));
		row-gap: 24px;
	}

	.edh-card:nth-child(n) {
		margin-top: 0;
	}

	.edh-cert__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.edh-cert__divider {
		display: none;
	}

	.edh-sectores__body {
		grid-template-columns: 1fr;
	}

	.edh-cta__inner {
		grid-template-columns: 1fr;
	}

	.edh-cta__aside {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 900px) {
	.edh-hero__inner {
		grid-template-columns: 1fr;
		padding-right: clamp(20px, 4vw, 40px);
	}

	.edh-historia__cols {
		grid-template-columns: 1fr;
	}

	.edh-banda {
		height: 180px;
	}

	.edh-banda__bloque {
		display: none;
	}
}

@media (max-width: 640px) {
	.edh-lineas__grid {
		grid-template-columns: minmax(0, 262px);
	}

	.edh-sectores__gallery {
		grid-template-columns: 1fr 1fr;
	}

	.edh-sectores__shot--icon {
		grid-column: span 2;
		aspect-ratio: 16 / 9;
	}

	.edh-f-row--2 {
		grid-template-columns: 1fr;
	}

	.edh-hero__actions {
		gap: 14px;
	}
}

/* ───────────────────────────────────────── 12. Movimiento reducido ── */

@media (prefers-reduced-motion: reduce) {
	.edh *,
	.edh *::before,
	.edh *::after {
		transition: none !important;
		animation: none !important;
	}
}