/*!
 * EDESAC — capa de diseño de los componentes de WPBakery
 * =============================================================================
 * `home.css` sigue siendo el dueño de la maqueta de cada sección. Esta hoja
 * solo añade lo que sube el listón, y se carga después para poder afinar sin
 * duplicar reglas. Quitarla devuelve la portada a su aspecto anterior.
 *
 * QUÉ ES «INDUSTRIAL» AQUÍ, EN CONCRETO
 * No es una textura de chapa ni una tipografía de estarcido. Es el lenguaje del
 * plano técnico y de la señalización de planta:
 *   · Reglas finas que dividen y alinean, en lugar de tarjetas que encajonan.
 *   · Cifras tabulares: los dígitos ocupan lo mismo, como en una ficha técnica.
 *   · Retículas explícitas y espaciado medido, no centrado decorativo.
 *   · Color de marca reservado para lo que informa; el resto, acero y hormigón.
 *
 * DE DÓNDE SALEN LAS DECISIONES
 * El suelo de calidad de `impeccable` (contraste, profundidad, superficies del
 * navegador, prohibiciones) y el marco de animación de `emil-design-eng`
 * (curvas propias, duraciones por tipo de elemento, nunca `ease-in`, nunca
 * `transition: all`).
 */

/* ─────────────────────────────────────────────── 1. Tokens de la capa ── */

.edh {
	/* Curvas propias: las de CSS son demasiado flojas y todo acaba pareciendo
	   lo mismo. Salida fuerte para entradas, in-out para desplazamientos. */
	--edh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--edh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	/* Neutros de acero y hormigón: el gris del sitio era uno solo y plano. */
	--edh-acero-900: #10161d;
	--edh-acero-600: #46525f;
	--edh-acero-300: #c3ccd4;
	--edh-acero-100: #e6eaee;

	/* Grosor de las reglas técnicas. Un pelo, no un borde. */
	--edh-regla: 1px;
}

/* ────────────────────────────────── 2. Superficies del navegador ── */

/* Lo que no dibujamos también viene con el diseño de nadie. Es lo más barato
   que distingue una página construida de una ensamblada. */

.edh ::selection {
	background: var(--edesac-blue);
	color: #fff;
}

/* Anillo de foco propio, visible sobre fondo claro y sobre el azul. Solo con
   `:focus-visible`, para que no salte al hacer clic con el ratón. */
.edh a:focus-visible,
.edh button:focus-visible,
.edh input:focus-visible,
.edh textarea:focus-visible,
.edh select:focus-visible,
.edh summary:focus-visible {
	outline: 2px solid var(--edesac-red);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Los enlaces de texto llevan el subrayado despegado de la letra, que es lo
   que separa un enlace legible de uno tachado. */
.edh p a:not([class]) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Cualquier cifra del sitio, en tabulares: en una ficha técnica los dígitos
   no bailan al cambiar de valor. */
.edh-vc-cifras,
.edh-vc-sello,
.edh-phone__number {
	font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────── 3. Tipografía ── */

/* El titular grande venía con un tracking de +0.005em, que en una condensada
   de 68px la afloja. En señalética industrial la display va cerrada. */
.edh-display,
.edh-hero__title {
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Medida de lectura. Un párrafo a 100 caracteres por línea se lee peor por
   mucho que el ancho de la sección lo permita. */
.edh-hero__desc,
.edh-lead,
.edh-historia__cols p,
.edh-cta__text {
	max-width: 68ch;
}

/* ──────────────────────────────────── 4. Movimiento (un solo gesto) ── */

/* UN gesto de entrada, el mismo para todas las secciones, y nada más. El marco
   de `emil-design-eng` es explícito: si todo se mueve, no se mueve nada. La
   portada se ve una vez por visita, así que una entrada está justificada;
   cualquier cosa que se vea decenas de veces al día, no.
   Desde un estado YA VISIBLE: si el JS o la animación fallan, el contenido
   está ahí igual. */
@media (prefers-reduced-motion: no-preference) {
	.edh-vc-hero .edh-hero__text > *,
	.edh-vc-lineas .edh-vc-card,
	.edh-vc-cifras__item,
	.edh-vc-capacidad {
		animation: edh-entrada 620ms var(--edh-ease-out) both;
	}

	/* Escalonado corto: 60ms basta para que se lea como una secuencia. Más
	   largo y la última tarjeta llega tarde. */
	.edh-vc-lineas .edh-vc-card:nth-child(2) { animation-delay: 60ms; }
	.edh-vc-lineas .edh-vc-card:nth-child(3) { animation-delay: 120ms; }
	.edh-vc-lineas .edh-vc-card:nth-child(4) { animation-delay: 180ms; }
	.edh-vc-lineas .edh-vc-card:nth-child(5) { animation-delay: 240ms; }
	.edh-vc-lineas .edh-vc-card:nth-child(6) { animation-delay: 300ms; }

	.edh-vc-hero .edh-hero__text > *:nth-child(2) { animation-delay: 70ms; }
	.edh-vc-hero .edh-hero__text > *:nth-child(3) { animation-delay: 140ms; }
}

@keyframes edh-entrada {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* Estados de pulsación. Un botón que no responde al dedo se siente roto, y es
   el detalle que más se nota sin notarse. Se declara la propiedad exacta,
   nunca `all`. */
.edh-btn,
.edh-pill,
.edh-phone {
	transition: transform 140ms var(--edh-ease-out),
	            box-shadow 140ms var(--edh-ease-out),
	            background-color 140ms ease;
}

.edh-btn:active,
.edh-pill:active,
.edh-phone:active {
	transform: translateY(1px) scale(0.985);
}

/* ─────────────────────────────────── 5. Sello de dato del hero ── */

/* La cifra va SOBRE la foto, no en una tarjeta aparte: es evidencia de la
   misma escena que se está mirando. La plantilla de «número grande + etiqueta»
   dentro de una caja es justo lo que el suelo de calidad rechaza. */
.edh-vc-sello {
	position: absolute;
	left: 0;
	bottom: 8%;
	display: flex;
	align-items: baseline;
	gap: 10px;
	max-width: 15rem;
	padding: 14px 20px 14px 18px;
	border-left: 3px solid var(--edesac-red);
	background: rgba(255, 255, 255, 0.94);
	/* Sombra con desplazamiento y difuminado. Un halo de color sin
	   desplazamiento es decoración, no profundidad. */
	box-shadow: 0 10px 24px -12px rgba(16, 22, 29, 0.45);
}

.edh-vc-sello__cifra {
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 0.9;
	color: var(--edesac-blue-dark);
}

.edh-vc-sello__texto {
	font-family: var(--edesac-font-body);
	font-size: 0.8125rem;
	line-height: 1.25;
	color: var(--edh-acero-600);
}

.edh-vc-hero .edh-hero__media {
	position: relative;
}

/* ────────────────────────────────── 6. Banda de cifras (trayectoria) ── */

/* Datos separados por reglas verticales, como una ficha técnica. No son
   tarjetas: no hay caja, ni sombra, ni fondo. */
.edh-vc-cifras {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding-top: 28px;
	border-top: var(--edh-regla) solid var(--edh-acero-300);
}

.edh-vc-cifras__item {
	position: relative;
	padding-left: 20px;
}

.edh-vc-cifras__item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 4px;
	bottom: 4px;
	width: var(--edh-regla);
	background: var(--edh-acero-300);
}

.edh-vc-cifras__item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 3px;
	height: 1.9rem;
	background: var(--edesac-blue);
}

.edh-vc-cifras__cifra {
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1;
	color: var(--edesac-blue-dark);
}

.edh-vc-cifras__texto {
	margin: 6px 0 0;
	font-family: var(--edesac-font-body);
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--edh-acero-600);
	max-width: 18ch;
}

/* ────────────────────────────── 7. Capacidades (sectores) ── */

/* Sustituyen al elemento numerado. La regla superior ordena sin prometer una
   secuencia que no existe. */
.edh-vc-capacidades {
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edh-vc-capacidad {
	padding-top: 16px;
	border-top: 2px solid var(--edesac-blue);
	list-style: none;
}

.edh-vc-capacidad__titulo {
	margin: 0 0 8px;
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--edh-acero-900);
}

.edh-vc-capacidad__texto {
	font-family: var(--edesac-font-alt);
	font-size: 1rem;
	line-height: 1.5;
	/* El gris del sitio (#a4a4a6) sobre blanco se queda en 2.6:1. Este acero
	   llega a 7:1 y sigue leyéndose como secundario. */
	color: var(--edh-acero-600);
	max-width: 46ch;
}

/* ───────────────────────────────────── 8. Tarjetas de línea ── */

/* La rejilla de `home.css` está fijada a CINCO columnas, con un escalonado en
   arco (`nth-child` del 1 al 5) copiado del Figma. Eso funcionaba cuando las
   tarjetas estaban escritas a mano y siempre eran cinco; ahora el cliente puede
   añadir y quitar líneas desde el constructor, así que la rejilla tiene que
   responder al número real. */
/* Flex y no `grid-template-columns`, y esto tiene su motivo: con
   `repeat(auto-fit, minmax(0, 262px))` el navegador calcula cuántas pistas de
   262px caben, y a 1440px caben CUATRO —262×5 más los huecos suman 1396 y solo
   hay 1331 disponibles—, así que la quinta tarjeta se caía a una segunda fila.
   La regla original de `home.css` no tenía ese problema porque forzaba cinco
   pistas y dejaba que encogieran; lo que no hacía era adaptarse a otro número.
   Con flex se consiguen las dos cosas: las tarjetas encogen desde 262px si no
   caben y se reparten solas sea cual sea su número. */
.edh-vc-lineas__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* `flex-basis: 0` y no 262px: con una base fija, `flex-wrap` parte la fila
   ANTES de encoger ningún elemento —encoger solo ocurre dentro de una línea ya
   formada—, y la quinta tarjeta se caía abajo. Con base 0 las cinco se
   reparten el ancho disponible y nunca desbordan; el `max-width` les pone el
   techo del Figma y el `min-width` es el que decide cuándo toca plegar. */
.edh-vc-lineas__grid > .edh-card {
	flex: 1 1 0;
	min-width: 180px;
	max-width: 262px;
}

/* El arco solo se sostiene con las cinco tarjetas para las que se dibujó: con
   tres o con seis, los márgenes escalonados se leen como un error de
   alineación. Se apagan salvo cuando hay exactamente cinco. */
.edh-vc-lineas__grid:not(:has(> :nth-child(5))) .edh-card,
.edh-vc-lineas__grid:has(> :nth-child(6)) .edh-card {
	margin-top: 0;
}


/* La tarjeta ya existía; lo que se añade es el comportamiento. La foto se
   acerca despacio y el velo se asienta: el movimiento ocurre DENTRO del marco,
   que no se mueve. Una tarjeta que se levanta entera es el gesto de catálogo
   de plantilla. */
.edh-vc-card {
	overflow: hidden;
}

.edh-vc-card .edh-card__img {
	transition: transform 480ms var(--edh-ease-out);
}

.edh-vc-card:hover .edh-card__img,
.edh-vc-card:focus-within .edh-card__img {
	transform: scale(1.04);
}

.edh-vc-card .edh-card__overlay {
	transition: opacity 240ms ease;
}

.edh-vc-card:hover .edh-card__overlay,
.edh-vc-card:focus-within .edh-card__overlay {
	opacity: 0.88;
}

/* ─────────────────────────────────── 9. Reglas de sección ── */

/* Un pelo entre secciones claras: alinea la página y da el aire de plano
   técnico sin añadir ni un color nuevo. Solo entre secciones sobre blanco;
   contra las bandas de color no hace falta. */
.edh-vc-lineas,
.edh-vc-sectores {
	border-top: var(--edh-regla) solid var(--edh-acero-100);
}

/* ──────────────────────────────────────────── 10. Responsive ── */

@media (max-width: 782px) {
	.edh-vc-sello {
		position: static;
		max-width: none;
		margin-top: 16px;
	}

	.edh-vc-cifras {
		gap: 20px 28px;
	}
}

/* ═══════════════════════════════ 11. Bloques de industria ═══ */

/* 11.1 Viñetas
   ---------------------------------------------------------------------------
   Rejilla 2×2, como en el Figma. NO son tarjetas: sin caja, sin sombra, sin
   fondo. Una regla superior las ordena y el icono da el color de marca. */

.edh-vc-vinetas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 28px;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	padding: 0;
	list-style: none;
	/* `.edh-ind__texto` es una columna flex sin `stretch`, así que sus hijos se
	   encogen a su contenido: la rejilla se quedaba en el ancho de la viñeta más
	   larga (213px de los 536 disponibles) y las dos columnas salían pegadas a
	   la izquierda. */
	width: 100%;
}

.edh-vc-vineta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--edh-acero-300);
	list-style: none;

	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--edh-acero-900);
}

.edh-vc-vineta__icono {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--edesac-blue);
}

/* 11.2 Hover de la foto
   ---------------------------------------------------------------------------
   La foto es un enlace a la industria, así que el hover señala algo real. El
   movimiento ocurre DENTRO del marco: la tarjeta no se levanta. Levantar el
   bloque entero es el gesto de plantilla, y además desplaza el texto de al
   lado.
   `@media (hover: hover)`: en táctil un toque dispara `:hover` y la foto se
   quedaría ampliada después de tocarla. */

.edh-vc-ind__foto {
	display: block;
	overflow: hidden;
	border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.edh-vc-ind__foto .edh-ind__foto {
		transition: transform 420ms var(--edh-ease-out);
	}

	.edh-vc-ind__foto:hover .edh-ind__foto,
	.edh-vc-ind__foto:focus-visible .edh-ind__foto {
		transform: scale(1.03);
	}
}

/* 11.3 El enlace del bloque
   ---------------------------------------------------------------------------
   Realimentación de pulsación: 140 ms, que es el tramo en el que un botón se
   siente vivo sin sentirse lento. Propiedades nombradas, nunca `all`. */

.edh-vc-ind__cta {
	transition: background-color 140ms ease,
	            transform 140ms var(--edh-ease-out);
}

.edh-vc-ind__cta:active {
	transform: translateY(1px) scale(0.985);
}

/* 11.4 Entrada al hacer scroll
   ---------------------------------------------------------------------------
   Los cinco bloques quedan por debajo del pliegue, así que una entrada por
   tiempo se dispararía toda de golpe con la página aún sin ver. Se usa una
   línea de tiempo de SCROLL (`animation-timeline: view()`), que es CSS puro:
   corre fuera del hilo principal y no necesita JavaScript ni observadores.

   Va dentro de `@supports` porque `animation-timeline` es reciente: sin
   soporte, la regla entera se ignora y el contenido se ve tal cual, que es el
   comportamiento correcto. Sin ese `@supports`, el navegador aplicaría la
   animación como si fuera por tiempo —ignorando solo la línea de tiempo— y los
   cinco bloques entrarían a la vez al cargar.

   EL RANGO TERMINA DENTRO DE `entry`, Y NO EN `cover`. ESTO NO ES UN DETALLE.

   Antes era `entry 5% cover 26%`. El tramo `cover` se mide sobre el recorrido
   completo del elemento por la pantalla —alto de ventana MÁS alto del elemento—
   y para el ÚLTIMO bloque de la página ese 26 % cae más allá del scroll que el
   documento tiene. Resultado medido: con la página en su tope, la animación del
   quinto bloque se quedaba con `progress = 0.590` para siempre. La sección se
   veía a media opacidad, y no había forma de arreglarlo desplazándose: no
   quedaba página que recorrer.

   El tramo `entry` se mide sobre la entrada del elemento en pantalla, así que
   su final está acotado por el alto del propio bloque y siempre se alcanza en
   cuanto el bloque acaba de entrar. Da igual lo cerca del pie que esté. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.edh-vc-ind__bloque {
			animation: edh-ind-entrada linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 80%;
		}

		/* Las viñetas entran escalonadas DENTRO del bloque. 45 ms basta para
		   leerlo como una secuencia; más y la última llega tarde. */
		.edh-vc-vineta {
			animation: edh-ind-vineta linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 90%;
		}

		.edh-vc-vineta:nth-child(2) { animation-delay: 45ms; }
		.edh-vc-vineta:nth-child(3) { animation-delay: 90ms; }
		.edh-vc-vineta:nth-child(4) { animation-delay: 135ms; }
	}
}

/* Solo `transform` y `opacity`: las dos se resuelven en la GPU y no provocan
   recálculo de maquetación. Y se parte de `scale(0.98)`, nunca de cero: nada
   en el mundo real aparece de la nada. */
@keyframes edh-ind-entrada {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.98);
		animation-timing-function: var(--edh-ease-out);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes edh-ind-vineta {
	from {
		opacity: 0;
		transform: translateY(10px);
		animation-timing-function: var(--edh-ease-out);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Movimiento reducido: se conserva la aparición —que ayuda a entender que hay
   contenido nuevo— y se quita el desplazamiento, que es lo que molesta. */
@media (prefers-reduced-motion: reduce) {
	.edh-vc-ind__bloque,
	.edh-vc-vineta {
		animation: none;
	}
}

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

	/* Objetivo táctil: 37px se acierta con el ratón, no con el dedo. */
	.edh-vc-ind__cta {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ═════════════════════════ 12. Banda de imagen con cifras ═══ */

/* Figma 649:3141: foto de 888×356 a la izquierda y un panel de 274 con tres
   cifras a la derecha, dentro de un contenedor de 1184. */

.edh-vc-cifras-banda {
	padding-block: clamp(24px, 3vw, 40px);
}

.edh-vc-cifras-banda__inner {
	display: grid;
	grid-template-columns: minmax(0, 888fr) minmax(0, 274fr);
	gap: 22px;
	max-width: 1184px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
	align-items: stretch;
}

.edh-vc-cifras-banda__foto {
	overflow: hidden;
	border-radius: 12px;
	/* La proporción la manda el diseño (888×356), no el archivo: la foto que
	   hay en la mediateca es 750×422 y sin esto la banda salía mucho más alta
	   de lo dibujado. `object-fit: cover` recorta, no deforma. */
	aspect-ratio: 888 / 356;
}

.edh-vc-cifras-banda__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El panel usa el azul oscuro, el mismo del pie: cierra el bloque sin competir
   con las bandas de sección en azul medio. */
.edh-vc-cifras-banda__datos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 24px;
	border-radius: 12px;
	background: var(--edesac-blue-dark);
	color: #fff;
}

.edh-vc-dato {
	padding-block: 18px;
}

/* Reglas entre cifras, no cajas: es una ficha de datos. */
.edh-vc-dato + .edh-vc-dato {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.edh-vc-dato__cifra {
	margin: 0;
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	line-height: 1;
	/* Tabulares: «+17» y «+80» tienen que alinearse en columna. */
	font-variant-numeric: tabular-nums;
}

.edh-vc-dato__texto {
	margin: 6px 0 0;
	font-family: var(--edesac-font-body);
	font-size: 0.875rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 860px) {
	.edh-vc-cifras-banda__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En una sola columna las tres cifras se leen mejor en fila. */
	.edh-vc-cifras-banda__foto {
		aspect-ratio: 16 / 9;
	}

	.edh-vc-cifras-banda__datos {
		flex-direction: row;
		gap: 20px;
	}

	.edh-vc-dato {
		flex: 1;
		padding-block: 0;
	}

	.edh-vc-dato + .edh-vc-dato {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.16);
		padding-left: 20px;
	}
}

/* ═══════════════════════════════ 13. Capacidades (acordeón) ═══ */

/* Figma 649:3148. Una tarjeta abierta (410px) y tres cerradas (~220px). El
   ancho se anima con `flex`, que sí toca maquetación: es la excepción que el
   patrón de acordeón admite, porque no hay equivalente con `transform` sin
   deformar la foto y el texto. */

.edh-vc-caps {
	padding-block: clamp(32px, 4vw, 48px);
}

.edh-vc-caps__inner {
	display: flex;
	gap: 14px;
	max-width: 1208px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
	height: clamp(380px, 40vw, 522px);
}

.edh-vc-cap {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 16px;
	overflow: hidden;
	transition: flex-grow 320ms var(--edh-ease-in-out);
}

/* La primera nace abierta para que la sección se entienda sin tocar nada. */
.edh-vc-cap--abierta {
	flex-grow: 2.1;
}

/* Al señalar cualquiera, esa manda y la que nacía abierta se recoge. El
   `:has()` sobre el contenedor es lo que permite que una tarjeta afecte a sus
   hermanas sin JavaScript. */
@media (hover: hover) and (pointer: fine) {
	.edh-vc-caps__inner:has(.edh-vc-cap:hover) .edh-vc-cap--abierta:not(:hover) {
		flex-grow: 1;
	}

	.edh-vc-cap:hover {
		flex-grow: 2.1;
	}
}

/* El teclado abre igual que el ratón. */
.edh-vc-caps__inner:has(.edh-vc-cap:focus-within) .edh-vc-cap--abierta:not(:focus-within) {
	flex-grow: 1;
}

.edh-vc-cap:focus-within {
	flex-grow: 2.1;
}

.edh-vc-cap__enlace {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

.edh-vc-cap__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo de abajo arriba: el texto se apoya en la parte baja de la foto. */
.edh-vc-cap__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 22, 29, 0) 32%, rgba(16, 22, 29, 0.82) 100%);
}

.edh-vc-cap__cuerpo {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding: 24px;
}

.edh-vc-cap__num {
	font-family: var(--edesac-font-display);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 0.85;
	color: rgba(255, 255, 255, 0.9);
	font-variant-numeric: tabular-nums;
}

.edh-vc-cap__texto {
	display: block;
	min-width: 0;
}

.edh-vc-cap__titulo {
	display: block;
	font-family: var(--edesac-font-body);
	font-weight: 700;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.2;
	color: #fff;
}

/* CERRADA: el título va en vertical, de abajo arriba, como en el Figma
   («Desarrollo de producto» mide allí 31 de ancho por 404 de alto). No es solo
   fidelidad: en horizontal, dentro de 213px, «Infraestructura completa» se
   salía de la tarjeta y quedaba cortada.
   `writing-mode` no transiciona, así que el giro es instantáneo mientras el
   ancho sí se anima; se lee como que la tarjeta se abre. */
.edh-vc-cap:not(.edh-vc-cap--abierta) .edh-vc-cap__titulo,
.edh-vc-caps__inner:has(.edh-vc-cap:hover) .edh-vc-cap--abierta:not(:hover) .edh-vc-cap__titulo {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

/* ABIERTA por hover o foco: vuelve a horizontal. */
@media (hover: hover) and (pointer: fine) {
	.edh-vc-cap:hover .edh-vc-cap__titulo {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}
}

.edh-vc-cap:focus-within .edh-vc-cap__titulo {
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal;
}

/* Con el título en vertical, el cuerpo se alinea abajo y el número manda. */
.edh-vc-cap:not(.edh-vc-cap--abierta) .edh-vc-cap__cuerpo {
	align-items: flex-end;
}

/* La descripción solo existe con la tarjeta abierta. Se anima con opacidad —no
   con `display`, que no transiciona— y el propio recorte del panel la esconde
   cuando está estrecho. */
.edh-vc-cap__desc {
	display: block;
	margin-top: 8px;
	max-width: 34ch;
	font-family: var(--edesac-font-alt);
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
	opacity: 0;
	transition: opacity 200ms ease;
}

.edh-vc-cap--abierta .edh-vc-cap__desc,
.edh-vc-cap:hover .edh-vc-cap__desc,
.edh-vc-cap:focus-within .edh-vc-cap__desc {
	opacity: 1;
}

.edh-vc-caps__inner:has(.edh-vc-cap:hover) .edh-vc-cap--abierta:not(:hover) .edh-vc-cap__desc {
	opacity: 0;
}

.edh-vc-cap__enlace:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
	border-radius: 16px;
}

/* Movimiento reducido: la tarjeta sigue abriéndose —es lo que da acceso al
   contenido— pero sin recorrido animado. */
@media (prefers-reduced-motion: reduce) {
	.edh-vc-cap,
	.edh-vc-cap__desc {
		transition: none;
	}
}

/* Por debajo de 860 el acordeón no cabe: las tarjetas se apilan abiertas, que
   es la única forma de que se lean las cuatro. */
@media (max-width: 860px) {
	.edh-vc-caps__inner {
		flex-direction: column;
		height: auto;
	}

	.edh-vc-cap,
	.edh-vc-cap--abierta {
		flex: none;
		height: 220px;
	}

	.edh-vc-cap__desc {
		opacity: 1;
	}

	/* Apiladas y abiertas: el título no tiene por qué girar.
	   Cuatro clases porque la regla que lo gira es
	   `.edh-vc-cap:not(.edh-vc-cap--abierta) .edh-vc-cap__titulo`, que ya suma
	   tres —el argumento de `:not()` cuenta— y ganaba a un selector más corto. */
	.edh-vc-caps__inner .edh-vc-cap:not(.edh-vc-cap--abierta) .edh-vc-cap__titulo,
	.edh-vc-caps__inner .edh-vc-cap .edh-vc-cap__titulo {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}

	/* Con el título horizontal, el cuerpo vuelve a alinearse abajo a la
	   izquierda como en la tarjeta abierta. */
	.edh-vc-caps__inner .edh-vc-cap:not(.edh-vc-cap--abierta) .edh-vc-cap__cuerpo {
		align-items: flex-end;
	}
}

/* ═════════════════ 14. Tarjeta de datos del cierre ═══ */

/* Figma 649:3297: los datos de la empresa junto al formulario. */

.edh-vc-cta-datos {
	padding: 28px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
}

.edh-vc-cta-datos__razon {
	margin: 0;
	font-family: 'Montserrat', var(--edesac-font-body);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.25;
}

.edh-vc-cta-datos__ruc {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.edh-vc-cta-datos__sep {
	height: 1px;
	border: 0;
	margin: 18px 0;
	background: rgba(255, 255, 255, 0.16);
}

.edh-vc-cta-datos__lista {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edh-vc-cta-datos__lista li {
	display: grid;
	gap: 2px;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.edh-vc-cta-datos__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.edh-vc-cta-datos__lista a {
	color: #fff;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: opacity 140ms ease;
}

.edh-vc-cta-datos__lista a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ═══════════════════════════ 15. Hero en pantalla estrecha ═══ */

/* Por debajo de 900 el hero deja de ser dos columnas. En vez de apilar texto y
   foto tal cual —que dejaba el titular arriba y la foto colgando con márgenes
   a los lados—, la foto pasa arriba y a sangre, y debajo va el bloque de texto
   centrado. Es la disposición de portada de móvil de toda la vida: la imagen
   sitúa, el texto explica.
   900px y no otro número: es el mismo punto en el que `home.css` ya colapsa la
   rejilla, y abrir un segundo punto de corte para lo mismo solo da problemas. */

@media (max-width: 900px) {
	.edh-vc-hero .edh-hero__inner {
		/* UNA columna, y hay que declararlo aquí aunque `home.css` ya lo haga:
		   en «Apariencia → Personalizar → CSS adicional» hay una copia de la
		   rejilla del hero SIN media query, y como el Personalizador imprime su
		   `<style>` después de las hojas encoladas, ganaba a la regla móvil del
		   proyecto y el hero seguía a dos columnas a 375px —con el titular
		   saliéndose de la pantalla—. Estas dos clases le ganan por
		   especificidad sin tener que tocar ese CSS. */
		grid-template-columns: minmax(0, 1fr);

		/* Sin hueco lateral: la foto tiene que llegar a los dos bordes. */
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}

	/* `order` cambia el orden VISUAL y deja el del documento intacto: en el
	   marcado el <h1> sigue siendo lo primero de la sección, que es lo que leen
	   un lector de pantalla y un buscador. */
	.edh-vc-hero .edh-hero__media {
		order: -1;
		width: 100%;
		position: relative;
	}

	.edh-vc-hero .edh-hero__media img {
		width: 100%;
		height: auto;
	}

	.edh-vc-hero .edh-hero__text {
		align-items: center;
		text-align: center;
		gap: 14px;
		padding: clamp(24px, 6vw, 36px) clamp(20px, 5vw, 32px) clamp(32px, 8vw, 48px);
	}

	/* Centrado de verdad: con `max-width` y sin márgenes automáticos, un
	   párrafo centrado se queda pegado a la izquierda de su caja. */
	.edh-vc-hero .edh-hero__desc {
		margin-inline: auto;
		max-width: 46ch;
	}

	.edh-vc-hero .edh-hero__title {
		max-width: 22ch;
		margin-inline: auto;
	}

	.edh-vc-hero .edh-hero__actions {
		justify-content: center;
		width: 100%;
	}

	/* El sello se queda SOBRE la foto, no debajo: con la imagen a todo el ancho
	   hay sitio de sobra, y sacarlo al flujo metía una caja más entre la foto y
	   el titular. Pisa la regla de la sección 10, que lo sacaba del flujo
	   cuando la foto todavía era una columna estrecha. */
	.edh-vc-hero .edh-vc-sello {
		position: absolute;
		left: 0;
		bottom: 16px;
		max-width: 15rem;
		margin-top: 0;
	}
}

/* En pantallas muy estrechas el sello ocupa demasiado sobre la foto. */
@media (max-width: 480px) {
	.edh-vc-hero .edh-vc-sello {
		bottom: 10px;
		padding: 10px 14px 10px 12px;
	}

	.edh-vc-hero .edh-vc-sello__cifra {
		font-size: 2rem;
	}
}

/* ═════════════════════ 16. Industrias — diseño del PDF ═══ */

/* Medido sobre el render del PDF que exportó EDESAC, no a ojo:
 *   · foto        546 × 521 px  (proporción 1.048)
 *   · bisel       56 px en horizontal y 55 en vertical → 45° exactos
 *   · panel       #F1F1F1 detrás del bloque entero
 *   · viñetas     icono en rojo de marca, rejilla 2×2
 *   · botón       pastilla blanca con texto rojo, SOBRE la foto, abajo a la izq.
 */

.edh-vc-ind__bloque {
	--edh-ind-panel: #f1f1f1;
	--edh-ind-radio: 16px;

	/* El panel gris del diseño. Va en el bloque y no en la sección para que
	   cada industria sea una tarjeta propia, como se ve en el PDF. */
	background: var(--edh-ind-panel);
	border-radius: var(--edh-ind-radio);
	padding: clamp(20px, 2.4vw, 32px);
}

/* 16.1 El marco de la foto: bisel a 45° con las uniones redondeadas
   ---------------------------------------------------------------------------
   Máscara SVG y no `clip-path: polygon()`, que es la misma decisión que ya
   documenta `home.css` para las tarjetas de la portada: un polígono da el
   bisel pero obliga a renunciar a las esquinas redondeadas, y el diseño tiene
   las dos cosas a la vez.

   El `viewBox` (546×521) coincide con la proporción que se le fija al marco,
   así que con `preserveAspectRatio="none"` la máscara encaja sin deformar el
   ángulo: el bisel sigue a 45° a cualquier tamaño. */
.edh-vc-ind__marco {
	position: relative;
	overflow: hidden;
	aspect-ratio: 546 / 521;

	--edh-mask-ind: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 546 521' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M62 0 L530 0 Q546 0 546 16 L546 505 Q546 521 530 521 L16 521 Q0 521 0 505 L0 62 Q0 55 5 50 L50 5 Q55 0 62 0 Z' fill='%23fff'/%3E%3C/svg%3E");

	-webkit-mask-image: var(--edh-mask-ind);
	mask-image: var(--edh-mask-ind);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* En los bloques invertidos la foto está a la derecha, así que el bisel va en
   su esquina superior DERECHA. Se refleja la máscara en lugar de escribir un
   segundo trazado: la foto no se voltea porque el reflejo se aplica solo a la
   máscara… y como `mask-image` no admite `transform`, se voltea el marco y se
   devuelve la imagen a su sitio. */
.edh-ind--invertido .edh-vc-ind__marco {
	transform: scaleX(-1);
}

.edh-ind--invertido .edh-vc-ind__marco > * {
	transform: scaleX(-1);
}

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

/* 16.2 Pastilla «Explorar catálogo» sobre la foto
   ------------------------------------------------------------------------- */

.edh-vc-ind__pill {
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 20px;
	border-radius: 40px;
	background: #fff;
	box-shadow: 0 6px 18px -8px rgba(16, 22, 29, 0.5);
	text-decoration: none;
	transition: background-color 140ms ease,
	            transform 140ms var(--edh-ease-out);
}

.edh-vc-ind__pill-texto {
	font-family: var(--edesac-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--edesac-red);
	white-space: nowrap;
}

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

.edh-vc-ind__pill-icono svg {
	width: 11px;
	height: 10px;
	transition: transform 140ms var(--edh-ease-out);
}

.edh-vc-ind__pill:hover {
	color: var(--edesac-red);
	transform: translateY(-1px);
}

.edh-vc-ind__pill:hover .edh-vc-ind__pill-icono svg {
	transform: translateX(2px);
}

.edh-vc-ind__pill:active {
	transform: translateY(1px) scale(0.985);
}

/* 16.3 Viñetas en rojo, como el diseño
   ------------------------------------------------------------------------- */

.edh-vc-ind .edh-vc-vineta__icono {
	color: var(--edesac-red);
}

.edh-vc-ind .edh-vc-vineta {
	/* El PDF no dibuja regla sobre cada viñeta: solo icono y texto. */
	border-top: 0;
	padding-top: 0;
	font-weight: 500;
}

/*
 * ESPACIADO DE LA REJILLA: HAY QUE GANARLE A THE7.
 *
 * El tema aplica `.content ul { margin: 0 0 10px 20px }`, que vale (0,1,1) y
 * ganaba a `.edh-vc-vinetas` (0,1,0): el margen superior de la lista se
 * quedaba en 0 —el párrafo y las viñetas se tocaban— y encima entraba un
 * sangrado de 20 px por la izquierda que descuadraba la columna respecto al
 * titular. Con `.edh-vc-ind` delante son (0,2,0) y gana sin `!important`.
 *
 * El margen se SUMA al hueco de 18 px de la columna: 18 + 16 = 34 px hasta el
 * párrafo, que es la pausa que el diseño pone antes de la lista.
 */
.edh-vc-ind .edh-vc-vinetas {
	margin: 16px 0 0;
	gap: 22px 28px;
}

/* 16.4 Entrada de las imágenes y hover
   ---------------------------------------------------------------------------
   ENTRADA — nivel «se ve una vez por visita», propósito: evitar que la foto
   aparezca de golpe al entrar en pantalla. Línea de tiempo de scroll en CSS
   puro, sin JavaScript; `@supports` porque si el navegador no la soporta, lo
   correcto es que la foto se vea y ya.
   Solo `transform` y `opacity`, y desde `scale(0.985)`, nunca desde cero.

   HOVER — el movimiento ocurre DENTRO del marco: la foto se acerca un 4 % y el
   marco no se mueve. Levantar la tarjeta entera desplazaría el texto de al
   lado. Va tras `@media (hover: hover)` porque en táctil un toque deja el
   `:hover` pegado. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.edh-vc-ind__marco {
			animation: edh-ind-foto linear both;
			animation-timeline: view();
			animation-range: entry 4% entry 78%;
		}
	}
}

@keyframes edh-ind-foto {
	from {
		opacity: 0;
		transform: translateY(22px) scale(0.985);
		animation-timing-function: var(--edh-ease-out);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* El bloque invertido ya lleva su propio `scaleX(-1)`: si la animación
   escribiera `transform`, lo pisaría y la foto saldría del revés. Por eso ahí
   la entrada es solo de opacidad. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.edh-ind--invertido .edh-vc-ind__marco {
			animation-name: edh-ind-foto-inv;
		}
	}
}

@keyframes edh-ind-foto-inv {
	from { opacity: 0; animation-timing-function: var(--edh-ease-out); }
	to   { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
	.edh-vc-ind__img {
		transition: transform 480ms var(--edh-ease-out);
	}

	.edh-vc-ind__marco:hover .edh-vc-ind__img,
	.edh-vc-ind__marco:focus-within .edh-vc-ind__img {
		transform: scale(1.04);
	}

	/* En el bloque invertido la imagen ya está reflejada: el acercamiento se
	   compone con ese reflejo o la foto se daría la vuelta al pasar el ratón. */
	.edh-ind--invertido .edh-vc-ind__marco:hover .edh-vc-ind__img,
	.edh-ind--invertido .edh-vc-ind__marco:focus-within .edh-vc-ind__img {
		transform: scaleX(-1) scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.edh-vc-ind__marco,
	.edh-vc-ind__img {
		animation: none;
		transition: none;
	}
}

@media (max-width: 900px) {
	.edh-vc-ind__pill {
		left: 14px;
		bottom: 14px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAPA DE PRESENCIA  ·  [edesac_paises] + [edesac_mapa]
   ───────────────────────────────────────────────────────────────────────────
   Los dos elementos viven en columnas distintas de la misma fila y se
   coordinan por `data-pais`.

   NO SE DECLARA NINGUNA `font-family`: el bloque hereda la del tema, que en
   Nosotros es la 'Be Vietnam Pro' configurada en The7. Escribir aquí una
   familia sería congelarla.

   El azul sale de `--edh-mapa-acento`, que el componente rellena con el color
   de acento de The7 (Theme Options → General).
   ═══════════════════════════════════════════════════════════════════════════ */

.edh-mapa,
.edh-paises {
	--edh-mapa-tierra: #c3ceda;   /* el resto del mundo */
	--edh-mapa-sede:   #d73520;
	--edh-mapa-curva:  cubic-bezier(.23, 1, .32, 1);
}

/* ─────────────────────────────────────────────────── Lista de países ── */

/*
 * EL ENVOLTORIO ES OBLIGATORIO, NO ADORNO.
 *
 * The7 aplica `.content ul { list-style: disc; margin-left: 20px }` y
 * `.content li` con su propio ritmo vertical. Esa regla vale (0,1,1) y una
 * clase suelta vale (0,1,0): perdía, y la lista salía con viñetas, sangrada y
 * con ítems de 108 px de alto. `.edh-paises-bloque .edh-paises` vale (0,2,0) y
 * gana sin necesidad de `!important`, que es lo que pide el proyecto.
 */
.edh-paises-bloque .edh-paises {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Dos columnas SIEMPRE, también en móvil: cuatro países en una sola
	   columna dejaban la ficha muy alta y desconectada del mapa. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 10px;
}

.edh-paises-bloque .edh-paises__item {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0;
	/* The7 pone `min-height: 72px` (y 90 en las de dos líneas) a los <li> del
	   contenido, para alinear sus iconos de viñeta. Aquí no hay viñeta y esa
	   altura dejaba las filas con 50 px de aire muerto. */
	min-height: 0;
	padding: 9px 12px;
	border-radius: 11px;
	transition: background .22s var(--edh-mapa-curva),
	            transform  .22s var(--edh-mapa-curva);
}

/* Y por si el tema las pinta con un pseudoelemento en vez de con `list-style`. */
.edh-paises-bloque .edh-paises__item::before { content: none; }
.edh-paises-bloque .edh-paises__item::marker { content: none; }

.edh-paises__bandera {
	width: 34px;
	height: 24px;
	flex: none;
	border-radius: 5px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .10), 0 2px 5px rgba(15, 23, 42, .10);
}

/* Perú no tiene icono en la biblioteca: su tricolor se dibuja. */
.edh-paises__bandera--pe {
	display: block;
	background: linear-gradient(90deg,
		#D91023 0 33.33%, #fff 33.33% 66.66%, #D91023 66.66% 100%);
}

.edh-paises-bloque .edh-paises__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.edh-paises-bloque .edh-paises__pais { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: #0f172a; letter-spacing: -.01em; }
.edh-paises-bloque .edh-paises__rol { font-size: 12.5px; line-height: 1.35; color: #94a3b8; text-wrap: balance; }

.edh-paises__item.is-sede .edh-paises__rol {
	color: var(--edh-mapa-sede);
	font-weight: 600;
}

@media (hover: hover) {
	.edh-paises-bloque .edh-paises__item:hover { background: #f4f7fa; transform: translateX(3px); }
}

@media (max-width: 520px) {
	.edh-paises        { gap: 4px 6px; }
	.edh-paises__item  { padding: 8px; gap: 10px; }
	.edh-paises-bloque .edh-paises__pais { font-size: 14.5px; }
	.edh-paises-bloque .edh-paises__rol { font-size: 11.5px; line-height: 1.3; }
}

/* ────────────────────────────────────────────────────────────── Globo ── */

.edh-mapa            { position: relative; }
.edh-mapa__svg       { display: block; width: 100%; height: auto; }

.edh-mapa__puntos    { fill: var(--edh-mapa-tierra); }
.edh-mapa__puntos circle {
	opacity: var(--o, 1);
	transform-box: fill-box;
	transform-origin: center;
}
.edh-mapa__puntos circle[data-pais]                  { fill: var(--edh-mapa-acento, #2270ae); opacity: 1; }
.edh-mapa__puntos circle[data-tipo="sede"]           { fill: var(--edh-mapa-sede); }

.edh-mapa__halo      { fill: #fff; }
.edh-mapa__aro       { fill: none; stroke: #fff; stroke-width: 2.5; }
.edh-mapa__pin.is-sede .edh-mapa__aro { stroke: var(--edh-mapa-sede); }
.edh-mapa__onda      { fill: none; stroke: var(--edh-mapa-sede); stroke-width: 2; opacity: 0; }
.edh-mapa__mov       {
	transform-box: fill-box;
	transform-origin: center;
	filter: drop-shadow(0 3px 7px rgba(15, 23, 42, .22));
}

/* ──────────────────────────────────────────────────────── Animación ── */
/* En reposo todo está invisible; `is-dentro` lo suelta, y cada pieza arranca
   con su propio `--d`. Sin JavaScript no se añade esa clase, así que la regla
   `:not(.is-dentro)` no puede ser la que esconde: se esconde solo cuando el
   guion ha marcado el bloque como suyo. */

@media (prefers-reduced-motion: no-preference) {
	.edh-mapa[data-listo] .edh-mapa__puntos circle { opacity: 0; transform: scale(.2); }
	.edh-mapa[data-listo] .edh-mapa__pin           { opacity: 0; }
	.edh-mapa[data-listo] .edh-mapa__mov           { transform: translateY(-16px) scale(.55); }

	.is-dentro .edh-mapa__puntos circle {
		animation: edh-mapa-brote .52s var(--edh-mapa-curva) var(--d) both;
	}
	.is-dentro .edh-mapa__pin {
		animation: edh-mapa-aparece .01s linear var(--d) both;
	}
	.is-dentro .edh-mapa__mov {
		/* Sobrepasa un pelo al aterrizar: da peso sin hacerlo saltar. */
		animation: edh-mapa-cae .62s cubic-bezier(.22, 1.28, .36, 1) var(--d) both;
	}
	.is-dentro .edh-mapa__pin.is-sede .edh-mapa__onda {
		animation: edh-mapa-onda 2.8s ease-out 2.1s infinite;
	}

	@keyframes edh-mapa-brote   { from { opacity: 0; transform: scale(.2); }
	                              to   { opacity: var(--o, 1); transform: scale(1); } }
	@keyframes edh-mapa-aparece { to { opacity: 1; } }
	@keyframes edh-mapa-cae     { from { transform: translateY(-16px) scale(.55); }
	                              to   { transform: translateY(0) scale(1); } }
	@keyframes edh-mapa-onda    { 0%   { opacity: .55; transform: scale(1); }
	                              70%  { opacity: 0;   transform: scale(2.3); }
	                              100% { opacity: 0;   transform: scale(2.3); } }
}

/* ──────────────────────────────────── Resaltado al recorrer la lista ── */

@media (hover: hover) {
	.edh-mapa__puntos circle[data-pais],
	.edh-mapa__mov {
		transition: opacity .25s var(--edh-mapa-curva),
		            transform .3s var(--edh-mapa-curva);
	}

	[data-activo] .edh-mapa__puntos circle:not([data-pais]) { opacity: calc(var(--o, 1) * .45); }
	[data-activo] .edh-mapa__puntos circle[data-pais]       { opacity: .3; }
	[data-activo] .edh-mapa__puntos circle.is-activo,
	[data-activo] .edh-mapa__puntos circle[data-pais].is-activo { opacity: 1; }
	[data-activo] .edh-mapa__pin:not(.is-activo) .edh-mapa__mov { opacity: .45; }
	[data-activo] .edh-mapa__pin.is-activo .edh-mapa__mov       { transform: translateY(-5px) scale(1.14); }
}

/* ───────────────────────────────────── El bloque dentro de WPBakery ── */
/* La fila lleva `edh-presencia` en «Extra class name».
   OJO: `vc_custom_heading` pone `el_class` EN EL PROPIO <h2>/<p>, no en un
   envoltorio. Los selectores tienen que apuntar al elemento, no a un
   descendiente suyo. */

.edh-presencia .edh-presencia__eyebrow {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--edh-mapa-sede);
}

.edh-presencia .edh-presencia__titulo {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #174163;
	text-wrap: balance;
}

/* El `<em>` del titular tiñe la segunda mitad; no debe salir en cursiva. */
.edh-presencia .edh-presencia__titulo em {
	font-style: normal;
	color: var(--edh-mapa-acento, #2270ae);
}

.edh-presencia .edh-presencia__lead,
.edh-presencia .edh-presencia__lead p {
	margin: 0 0 26px;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.65;
	color: #475569;
}

.edh-presencia .edh-presencia__cifras { margin-bottom: 26px; }

.edh-presencia .edh-presencia__cifras .vc_column-inner,
.edh-presencia .edh-presencia__cifras .wpb_wrapper { padding: 0; }

/* El contador es `stat_counter` de Ultimate Addons: aquí solo se le quita la
   caja, se colorea la etiqueta y se le pone la regla que separa las tres. */
.edh-presencia .edh-presencia__cifra .uvc-sub-heading,
.edh-presencia .edh-presencia__cifra .stats-block { margin: 0; }

/* El elemento reserva sitio para un icono aunque no se le ponga ninguno. */
.edh-presencia .edh-presencia__cifra .aio-icon-top { display: none; }

.edh-presencia .edh-presencia__cifra .stats-number {
	line-height: 1.05;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.edh-presencia .edh-presencia__cifra .stats-text {
	margin-top: 6px;
	line-height: 1.35;
	color: #94a3b8;
}

.edh-presencia .edh-presencia__cifra .stats-block,
.edh-presencia .edh-presencia__cifra .stats-desc { text-align: left; }

.edh-presencia .edh-presencia__cifra { position: relative; padding-right: 14px; }
.edh-presencia .edh-presencia__cifra + .edh-presencia__cifra { padding-left: 14px; }
.edh-presencia .edh-presencia__cifra + .edh-presencia__cifra::before {
	content: "";
	position: absolute;
	left: 0; top: 4px; bottom: 4px;
	width: 1px;
	background: #cbd5e1;
}

@media (max-width: 980px) {
	/*
	 * El globo primero: es lo que cuenta la historia de un vistazo.
	 *
	 * `order` por sí solo no hacía nada: la fila de WPBakery es `display: block`
	 * y en un contenedor de bloque el orden no existe. Hay que pasarla a flex, y
	 * aquí es inofensivo porque a este ancho las dos columnas ya ocupan el 100 %
	 * y no hay nada más dentro de la fila.
	 */
	.edh-presencia.vc_row {
		display: flex;
		flex-wrap: wrap;
	}
	.edh-presencia .edh-presencia__col-mapa  { order: -1; width: 100%; }
	.edh-presencia .edh-presencia__col-texto { order: 1;  width: 100%; }
}

@media (max-width: 767px) {
	/*
	 * Las tres cifras siguen en fila.
	 *
	 * WPBakery las monta como `vc_col-sm-4`, que por debajo de 768 px pasa a
	 * 100 % de ancho: se apilaban a pantalla completa, con sus reglas
	 * divisorias colgando en vertical. Tres números cortos caben de sobra en
	 * una fila y así se leen como lo que son, una ficha de datos.
	 */
	.edh-presencia .edh-presencia__cifras {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
	}
	.edh-presencia .edh-presencia__cifra {
		width: 33.333%;
		flex: 1 1 0;
		padding-right: 10px;
	}
	.edh-presencia .edh-presencia__cifra + .edh-presencia__cifra { padding-left: 10px; }
	.edh-presencia .edh-presencia__cifra .stats-number { font-size: 27px !important; }
	.edh-presencia .edh-presencia__cifra .stats-text   { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANILLO DE CERTIFICACIONES  ·  [edesac_normas]
   ───────────────────────────────────────────────────────────────────────────
   PREFIJO `edh-normas`, y no `edh-cert` ni `edh-sig`: los dos están cogidos en
   la página Nosotros (la banda azul que este bloque sustituye y el titular de
   la línea de tiempo). Reutilizarlos habría dejado entrar estilos ajenos.

   NINGUNA `font-family`: se hereda la del tema.
   NINGÚN `id`: todo se resuelve con clases y `data-norma`.

   Los colores de cada norma llegan como variables en línea (`--c` el sector,
   `--t` la flecha) desde el componente, así que se editan en el constructor y
   no aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

.edh-normas {
	--edh-n-ink:    #0f172a;
	--edh-n-texto:  #475569;
	--edh-n-suave:  #94a3b8;
	--edh-n-borde:  #e2e8f0;
	--edh-n-titulo: #174163;
	--edh-n-rojo:   #d73520;
	--edh-n-curva:  cubic-bezier(.23, 1, .32, 1);

	/*
	 * TIPOGRAFÍA: NO SE ELIGE AQUÍ, SE TOMA PRESTADA.
	 *
	 * La familia por defecto del tema es Roboto, pero esta página redefine la
	 * suya en el «Custom CSS» de WPBakery con dos tokens: `--nos-body` para los
	 * titulares y `--nos-alt` para el texto corrido. Heredar a secas dejaba el
	 * bloque en Roboto, descolgado del resto de la página.
	 *
	 * Se leen esos tokens con `inherit` de reserva: donde existen, el bloque
	 * habla el mismo idioma que la página y sigue cualquier cambio que hagan
	 * en ellos; donde no, cae en la familia del tema. En ningún caso se escribe
	 * aquí el nombre de una fuente, que sería congelarla.
	 */
	--edh-n-titular: var(--nos-body, inherit);
	--edh-n-cuerpo:  var(--nos-alt, inherit);

	padding: clamp(48px, 6vw, 96px) 0;
	font-family: var(--edh-n-cuerpo);
}

.edh-normas__antetitulo,
.edh-normas__titulo,
.edh-normas__cod,
.edh-normas__sigla,
.edh-normas__norma { font-family: var(--edh-n-titular); }

.edh-normas__lead,
.edh-normas__resumen,
.edh-normas__nota,
.edh-normas__ambito-txt,
.edh-normas__ambito,
.edh-normas__vig,
.edh-normas__vig-pill,
.edh-normas__hub-pie { font-family: var(--edh-n-cuerpo); }

.edh-normas__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* ── Columna de texto ─────────────────────────────────────────────────── */

.edh-normas__antetitulo {
	margin: 0 0 12px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .15em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--edh-n-rojo);
}

.edh-normas__titulo {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--edh-n-titulo);
	text-wrap: balance;
}

.edh-normas__titulo em { font-style: normal; color: var(--edh-mapa-acento, #2270ae); }
.edh-normas__t-corto   { display: none; }

.edh-normas__lead {
	margin: 0 0 30px;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.68;
	max-width: 52ch;
	color: var(--edh-n-texto);
}

/* ── Fichas ───────────────────────────────────────────────────────────── */

.edh-normas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

/* The7 impone viñetas, sangrado y `min-height` a los <li> del contenido; con
   una sola clase perdía por especificidad. `.edh-normas` delante la gana. */
.edh-normas .edh-normas__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 14px;
	margin: 0;
	min-height: 0;
	padding: 14px 16px;
	border: 1px solid var(--edh-n-borde);
	border-radius: 14px;
	background: #fff;
	transition: border-color .24s var(--edh-n-curva),
	            box-shadow   .24s var(--edh-n-curva),
	            transform    .24s var(--edh-n-curva),
	            opacity      .24s var(--edh-n-curva);
}

.edh-normas .edh-normas__item::before,
.edh-normas .edh-normas__item::marker { content: none; }

.edh-normas__punto {
	width: 10px;
	height: 10px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 0 4px var(--t);
}

.edh-normas__cuerpo  { display: block; min-width: 0; }
.edh-normas__cod     { display: block; font-size: 15.5px; font-weight: 700;
                       line-height: 1.25; color: var(--edh-n-ink); letter-spacing: -.01em; }
.edh-normas__ambito-txt { display: block; margin-top: 1px; font-size: 13px;
                       font-weight: 600; color: var(--c); }
.edh-normas__resumen { display: block; margin-top: 7px; font-size: 13.5px;
                       line-height: 1.55; color: var(--edh-n-texto); }

.edh-normas__vig-pill {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--edh-n-suave);
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 999px;
	background: #f1f5f9;
}

.edh-normas__nota {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--edh-n-borde);
	font-size: 13px;
	line-height: 1.6;
	color: var(--edh-n-suave);
}

.edh-normas__nota strong { color: var(--edh-n-texto); font-weight: 600; }

/* ── El anillo ────────────────────────────────────────────────────────── */

.edh-normas__rueda { position: relative; }
.edh-normas__svg   { display: block; width: 100%; height: auto; }

.edh-normas__sector { fill: var(--c); }
.edh-normas__arco   { fill: none; stroke: var(--t); stroke-width: 24; }
.edh-normas__punta  { fill: var(--t); }

.edh-normas__ambito { fill: #fff; font-size: 14.5px; font-weight: 600; text-anchor: middle; }
.edh-normas__norma  { fill: #fff; font-size: 16px;   font-weight: 800; text-anchor: middle;
                      letter-spacing: -.01em; }
.edh-normas__vig    { fill: rgba(255, 255, 255, .72); font-size: 10px; font-weight: 500;
                      text-anchor: middle; }

.edh-normas__hub     { fill: #fff; }
.edh-normas__hub-aro { fill: none; stroke: var(--edh-n-borde); stroke-width: 1.5; }
.edh-normas__sigla   { fill: var(--edh-n-titulo); font-size: 31px; font-weight: 800;
                       text-anchor: middle; letter-spacing: .02em; }
.edh-normas__hub-pie { fill: var(--edh-n-suave); font-size: 9.5px; font-weight: 600;
                       text-anchor: middle; letter-spacing: .09em; }

/* Capa de fuera: el desplazamiento por el bisector. Capa de dentro: la entrada.
   Separarlas evita que el `fill-mode: both` de la animación se coma el
   transform del señalado. */
.edh-normas__grupo { transform-box: view-box; transform-origin: center;
                     transition: transform .32s var(--edh-n-curva),
                                 opacity   .28s var(--edh-n-curva); }
.edh-normas__anim  { transform-box: view-box; transform-origin: center; }
.edh-normas__grupo .edh-normas__sector { transition: filter .28s var(--edh-n-curva); }

/* ── Señalado ─────────────────────────────────────────────────────────
   FUERA de `@media (hover: hover)`: en móvil la norma se elige tocándola, y
   dentro del media query el anillo no reaccionaría al toque. */

.edh-normas[data-activo] .edh-normas__grupo { opacity: .32; }
.edh-normas[data-activo] .edh-normas__grupo.is-activo {
	opacity: 1;
	transform: translate(calc(var(--u-x) * 14px), calc(var(--u-y) * 14px));
}
.edh-normas[data-activo] .edh-normas__grupo.is-activo .edh-normas__sector {
	filter: drop-shadow(0 10px 22px rgba(15, 23, 42, .28));
}

@media (hover: hover) {
	.edh-normas .edh-normas__item { cursor: default; }
	.edh-normas .edh-normas__item:hover,
	.edh-normas .edh-normas__item.is-activo {
		border-color: var(--c);
		transform: translateX(4px);
		box-shadow: 0 8px 22px -14px var(--c);
	}
	.edh-normas .edh-normas__item.is-activo .edh-normas__vig-pill {
		background: var(--t);
		color: var(--c);
	}
	.edh-normas[data-activo] .edh-normas__item:not(.is-activo) { opacity: .5; }
}

/* ── Entrada ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.edh-normas[data-listo] .edh-normas__anim   { opacity: 0; transform: scale(.9); }
	.edh-normas[data-listo] .edh-normas__nucleo { opacity: 0; }

	.edh-normas.is-dentro .edh-normas__anim {
		animation: edh-normas-entra .62s var(--edh-n-curva) var(--d) both;
	}
	.edh-normas.is-dentro .edh-normas__nucleo {
		animation: edh-normas-hub .5s var(--edh-n-curva) .62s both;
	}

	@keyframes edh-normas-entra { from { opacity: 0; transform: scale(.9); }
	                              to   { opacity: 1; transform: scale(1); } }
	@keyframes edh-normas-hub   { from { opacity: 0; } to { opacity: 1; } }
}

/* ── Móvil: todo el bloque en una pantalla ────────────────────────────────
   Sin esto la sección medía 1.471 px en un alto de 812. Se queda el anillo, un
   titular corto, el párrafo y las tres fichas plegadas; el detalle se despliega
   al tocar. No se duplica contenido: el antetítulo, la coletilla y la nota
   siguen en el HTML, solo se ocultan. */

@media (max-width: 980px) {
	.edh-normas__inner { grid-template-columns: 1fr; gap: 24px; }
	.edh-normas__rueda { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
	.edh-normas__lead  { max-width: none; }
}

@media (max-width: 767px) {
	.edh-normas       { padding: 32px 0; }
	.edh-normas__inner{ gap: 20px; }
	.edh-normas__rueda{ max-width: 268px; }

	.edh-normas__antetitulo,
	.edh-normas__nota,
	.edh-normas__mas,
	.edh-normas__t-largo { display: none; }

	.edh-normas__t-corto { display: inline; }
	.edh-normas__titulo  { margin-bottom: 12px; font-size: 26px; line-height: 1.16; }
	.edh-normas__lead    { margin-bottom: 18px; font-size: 14.5px; line-height: 1.55; }

	.edh-normas__lista { gap: 6px; }
	.edh-normas .edh-normas__item { padding: 10px 12px; gap: 11px; border-radius: 11px;
	                                cursor: pointer; }
	.edh-normas__cod        { font-size: 14.5px; }
	.edh-normas__ambito-txt { font-size: 12px; }
	.edh-normas__resumen    { display: none; font-size: 12.5px; line-height: 1.48; margin-top: 5px; }
	.edh-normas .edh-normas__item.is-activo .edh-normas__resumen { display: block; }
	.edh-normas .edh-normas__item.is-activo { border-color: var(--c);
		box-shadow: 0 6px 18px -12px var(--c); }
	/* Arriba y no centrada: junto a cinco líneas de texto, una píldora a media
	   altura queda flotando sin relación con ninguna. */
	.edh-normas__vig-pill { align-self: start; font-size: 10px; padding: 3px 8px; margin-top: 1px; }
}