/*!
 * EDESAC — página «Industrias»
 * =============================================================================
 * Secciones propias de Industrias (Figma, nodo 203:1919). Los tokens y los
 * componentes compartidos están en `base.css`, que se carga antes — incluidos
 * el hero de página (`.edh-hero-pagina`) y la banda de ventajas
 * (`.edh-ventajas`), idénticos a los de Nosotros.
 *
 * ESTRUCTURA
 *   1. Máscara propia de la página
 *   2. Bloque de industria
 *   3. Responsive
 */

/* ────────────────────────────── 1. Máscara propia de la página ── */

.edh {
	/* La silueta de las fotos: un rectángulo deformado, más ancho arriba que
	   abajo y con las esquinas muy redondeadas (Figma 257:2207). Un solo
	   trazo. Se aplica como máscara con `mask-size: 100% 100%` sobre un SVG
	   con `preserveAspectRatio="none"`, así escala a cualquier tamaño. */
	--edh-mask-industria: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 429.469 412.627' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M389.879 0H291.349H95.9201C65.9043 0 56.0078 23.4348 54.8115 35.1521L0 368.605C0 401.457 25.8832 411.641 38.8248 412.627H336.047C360.32 411.313 373.566 382.731 377.155 368.605L429.357 44.3508C431.445 10.4471 403.908 0.657049 389.879 0Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────── 2. Bloque de industria ── */

.edh-ind-lista {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 96px);
	padding-block: clamp(48px, 6vw, 90px);
	background: #fff;
}

.edh-ind {
	display: grid;
	/* Figma: foto de ~430 px y texto de 548 sobre un contenedor de 1090. */
	grid-template-columns: minmax(0, 430fr) minmax(0, 548fr);
	align-items: center;
	gap: clamp(24px, 3.7vw, 53px);
	max-width: 1090px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

/* Los bloques alternan el lado de la foto. Se hace invirtiendo el orden de las
   columnas con `direction`, y no duplicando el marcado: así el orden del DOM
   sigue siendo foto → texto en todos, que es el orden correcto de lectura y el
   que se mantiene al colapsar a una columna en móvil. */
.edh-ind--invertido {
	grid-template-columns: minmax(0, 548fr) minmax(0, 430fr);
	direction: rtl;
}

.edh-ind--invertido > * {
	direction: ltr;
}

.edh-ind__foto {
	width: 100%;
	aspect-ratio: 429 / 413;
	object-fit: cover;
	-webkit-mask-image: var(--edh-mask-industria);
	mask-image: var(--edh-mask-industria);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.edh-ind__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 18 y no 13: con un solo hueco para todo, el titular, el párrafo y la
	   lista quedaban a la misma distancia entre sí y el bloque se leía como
	   tres cosas sueltas en vez de como un titular con su explicación. La
	   separación mayor hasta las viñetas la pone `vc.css`. */
	gap: 18px;
}

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

/* Titular a dos colores, como en el resto del sitio: el primer tramo en rojo y
   el segundo en azul. */
.edh-ind__titulo {
	margin: 0;
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--edesac-blue-section);
}

.edh-ind__titulo span {
	/* #d93223 y no el --edesac-red (#d73520): en esta pantalla el Figma usa un
	   rojo dos puntos distinto. Es deriva del diseño; se respeta. */
	color: #d93223;
}

.edh-ind__desc {
	max-width: 478px;
	font-family: var(--edesac-font-alt);
	font-size: 0.875rem;
	line-height: 1.6;

	/* Mismo negro que las viñetas de abajo.
	   Antes era #69a0c2, un azul aguado que dejaba el párrafo —donde está lo que
	   de verdad se vende— con menos peso que la lista de cuatro palabras que
	   viene después. El literal es la reserva por si `vc.css` no llega a
	   cargarse: el token lo declara `.edh`, que vive en esa hoja. */
	color: var(--edh-acero-900, #10161d);
}

/* Caja con borde gris y el icono de etiqueta. */
.edh-ind__feature {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 470px;
	padding: 14px 20px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
}

.edh-ind__feature svg {
	display: block;
	width: 32px;
	height: auto;
	flex-shrink: 0;
	color: var(--edesac-red);
}

.edh-ind__feature p {
	font-family: 'Poppins', var(--edesac-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: #000;
}

.edh-ind__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 11px;
	padding: 10px 24px;
	border-radius: 6px;
	background: var(--edesac-red);
	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.edh-ind__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

/* ─────────────────────────────────────────────────── 3. Responsive ── */

@media (max-width: 900px) {
	.edh-ind,
	.edh-ind--invertido {
		grid-template-columns: 1fr;
		/* Se anula la inversión: en una columna el orden del DOM ya es el
		   correcto (foto y luego texto). */
		direction: ltr;
	}

	.edh-ind__foto {
		max-width: 430px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edh-ind__cta {
		transition: none;
	}
}