/* Ethic Lines: secciones de página. Medidas del Figma: 1440 desktop, 375 mobile. */

:root {
	--el-gutter: clamp(20px, 5.56vw, 80px);
	--el-inline: max(var(--el-gutter), calc((100% - 1280px) / 2));
}

.wp-block-post-content > * + * { margin-block-start: 0; }
.el-section { margin: 0; padding-inline: var(--el-inline); }
.el-section > * { margin-block: 0; }

/* Píldora azul ("Linea de denuncia…", "El punto ciego", etc.) */
.el-badge {
	justify-self: start; align-self: center;
	width: fit-content; padding: 8px 16px; border-radius: 999px;
	background: var(--wp--preset--color--azul-cielo); color: #fff;
	font-size: 13px; font-weight: 600; line-height: normal;
}

/* Botón con borde */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--navy);
	padding: 12.5px 26.5px; background: transparent; color: var(--wp--preset--color--navy);
}
.wp-block-button__link { transition: transform 0.2s var(--el-ease), box-shadow 0.2s var(--el-ease), background-color 0.2s; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 44, 58, 0.14); }

/* ---------- Hero ---------- */

.el-hero {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	padding-block: 20px 32px; text-align: center;
	background: var(--wp--preset--color--hueso);
}
.el-hero__badge { text-transform: uppercase; }
.el-hero__title { max-width: 305px; font-size: 28px; line-height: 1.1; }
.el-hero__title strong {
	font-weight: inherit; color: transparent;
	background: linear-gradient(to bottom, #88abe3 4.787%, #1a2c3a 91.128%);
	-webkit-background-clip: text; background-clip: text;
}
.el-hero__lead { font-size: 14px; font-weight: 500; line-height: normal; color: var(--wp--preset--color--gris-medio); text-align: left; }
.el-hero__ctas { gap: 12px; justify-content: center; }
.el-trust {
	position: relative; max-width: 266px; min-height: 31px; margin: 0;
	padding: 8.76px 0 0 41.5px; text-align: left;
	font-size: 13px; font-weight: 400; line-height: normal; color: var(--wp--preset--color--verde-agua);
}
.el-trust strong { font-weight: 600; color: #141414; }
.el-trust__icon {
	position: absolute; left: 0; top: 50%; translate: 0 calc(-50% + 4.38px);
	box-sizing: border-box; width: 32.74px; height: 31.1px; padding: 7px 7.8px;
	border-radius: 3.9px; background: var(--wp--preset--color--azul-cielo);
}

/* Collage: se diseña en px del Figma (717×465) y escala con el ancho (1u = 1px a 717 de ancho). */
.el-hero__visual {
	--u: calc(100cqw / 717);
	position: relative; width: 100%; aspect-ratio: 717 / 465;
	container-type: inline-size; overflow: hidden; border-radius: 16px;
	background: linear-gradient(#b2c8eb, #d2dbe7);
	text-align: left;
}
.el-hero__visual > * { position: absolute; margin: 0 !important; }
.el-hero__tile {
	left: calc(34 * var(--u)); top: calc(28 * var(--u)); z-index: 1;
	display: grid; place-items: center;
	width: calc(69.406 * var(--u)); height: calc(65.936 * var(--u));
	border-radius: calc(8.25 * var(--u)); background: var(--wp--preset--color--azul-cielo);
}
.el-hero__tile img { width: calc(36.3 * var(--u)); height: auto; }
.el-chatbar {
	left: calc(22.5 * var(--u)); top: calc(190.5 * var(--u)); z-index: 2;
	display: flex; align-items: center; gap: calc(12 * var(--u));
	box-sizing: border-box; width: calc(466 * var(--u)); height: calc(86 * var(--u));
	padding: 0 calc(15 * var(--u)) 0 calc(25 * var(--u));
	border: 1px solid rgba(136, 171, 227, 0.22); border-radius: calc(28 * var(--u));
	background: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	font-size: calc(16 * var(--u)); color: var(--wp--preset--color--gris-medio);
}
.el-chatbar > img { width: calc(20 * var(--u)); height: auto; }
.el-chatbar span { flex: 1; }
.el-chatbar i {
	display: grid; place-items: center; width: calc(44 * var(--u)); aspect-ratio: 1;
	border-radius: 50%; background: var(--wp--preset--color--navy);
}
.el-chatbar i img { width: calc(20 * var(--u)); height: auto; }
.el-hero__photo { left: calc(444.5 * var(--u)); top: calc(1 * var(--u)); z-index: 3; width: calc(430 * var(--u)); }
.el-hero__photo img { display: block; width: 100%; height: auto; }
.el-pill {
	z-index: 1; display: grid; place-items: center;
	height: calc(59.942 * var(--u)); border-radius: calc(19 * var(--u));
	background: linear-gradient(to top, #e3eaf4 0.546%, rgba(232, 232, 232, 0.14) 73.797%);
	font-size: calc(28 * var(--u)); font-weight: 700; line-height: 1.1; color: #fff; white-space: nowrap;
}
.el-pill--confidencial { left: calc(190.25 * var(--u)); top: calc(61 * var(--u)); width: calc(302.865 * var(--u)); }
.el-pill--neutral { left: calc(332 * var(--u)); top: calc(378 * var(--u)); width: calc(146.174 * var(--u)); }
.el-bubble {
	z-index: 4; display: flex; align-items: center;
	height: calc(57 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(19 * var(--u));
	background: #fff; font-size: calc(16 * var(--u)); font-weight: 700; line-height: normal; white-space: nowrap;
}
.el-bubble--1 { left: calc(32.97 * var(--u)); top: calc(147 * var(--u)); }
.el-bubble--2 { left: calc(248.16 * var(--u)); top: calc(264 * var(--u)); }
.el-bubble--3 { left: calc(47.62 * var(--u)); top: calc(349 * var(--u)); }

@media (min-width: 1024px) {
	.el-hero {
		display: grid; align-items: start; gap: 0 31px; text-align: left;
		grid-template-columns: minmax(0, 524px) minmax(0, 717px);
		grid-template-rows: 1fr repeat(5, auto) 1fr;
		justify-content: start; padding-block: 88px;
	}
	.el-hero > * { grid-column: 1; }
	.el-hero__badge { grid-row: 2; align-self: start; margin-bottom: 20.8px !important; padding: 8.76px 17.52px; font-size: 14.235px; text-transform: none; }
	.el-hero__title { grid-row: 3; max-width: 455.52px; margin-bottom: 24.09px !important; font-size: 43.8px; line-height: 1.13; }
	.el-hero__lead { grid-row: 4; max-width: 456px; margin-bottom: 30.66px !important; font-size: 15.33px; font-weight: 700; }
	.el-hero__ctas { grid-row: 5; justify-content: flex-start; gap: 15.33px; margin-bottom: 32.85px !important; }
	.el-hero__ctas .wp-block-button__link { padding: 15.33px 30.66px; font-size: 17.52px; }
	.el-hero__ctas .is-style-outline .wp-block-button__link { padding: 13.69px 29.02px; border-width: 1.643px; }
	.el-trust { grid-row: 6; max-width: none; padding: 0 0 0 41.5px; font-size: 14.235px; }
	.el-trust strong { display: block; }
	.el-trust__icon { translate: 0 -50%; }
	.el-hero__visual { grid-column: 2; grid-row: 1 / -1; align-self: center; border-radius: 13px; }
}

/* ---------- Video (imagen de portada con enlace a YouTube; video.js lo reproduce aquí) ---------- */

.el-video-wrap { padding-block: 41.5px; background: #fff; }
.el-video {
	position: relative; aspect-ratio: 1280 / 508; margin: 0 !important; overflow: clip;
	border: 1px solid #dddddb; border-radius: 9px; box-shadow: 0 5.7px 14.3px rgba(0, 0, 0, 0.08);
	transition: aspect-ratio 0.6s var(--el-ease);
}
.el-video a { display: block; height: 100%; }
.el-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--el-ease); }
.el-video a::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: clamp(48px, 7%, 84px); aspect-ratio: 1; translate: -50% -50%;
	border-radius: 50%; background: url(../img/icon-circle-play.svg) center / contain no-repeat;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.18)); transition: scale 0.3s var(--el-ease);
}
.el-video a:hover::after { scale: 1.12; }
.el-video a:hover img { scale: 1.02; }
.el-video a:focus-visible { outline: 3px solid var(--wp--preset--color--azul-cielo); outline-offset: -3px; }
.el-video.is-playing { aspect-ratio: 16 / 9; }
.el-video.is-playing a { visibility: hidden; }
.el-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; animation: el-fade 0.4s var(--el-ease) both; }

@media (min-width: 1024px) {
	.el-video-wrap { padding-block: 62px 79px; }
	.el-video { border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); }
}

/* ---------- Logos (marquee) ---------- */

.el-logos { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 0; background: var(--wp--preset--color--hueso); }
.el-logos__title { padding-inline: 20px; font-size: 13px; font-weight: 600; line-height: normal; text-align: center; color: #8c9499; }
.el-marquee { width: 100%; overflow: hidden; }
.el-marquee__track { display: flex; width: max-content; animation: el-marquee 40s linear infinite; }
.el-marquee__track > img { display: block; width: auto; height: 43px; padding-right: 25px; }
@keyframes el-marquee { to { transform: translateX(-50%); } }

@media (min-width: 1024px) {
	.el-logos { gap: 32px; padding: 56px 0 72px; }
	.el-logos__title { color: var(--wp--preset--color--navy); }
	.el-marquee__track > img { height: 95px; padding-right: 56px; }
}

/* ---------- El punto ciego ---------- */

.el-center { justify-content: center; }
.el-ciego {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
	padding-block: 40px; background: #f3f3f3; text-align: center;
}
.el-ciego__head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.el-ciego__head > * { margin: 0 !important; }
.el-ciego__badge { background: #fafafa; color: var(--wp--preset--color--navy); }
.el-ciego__title { font-size: 20px; line-height: normal; }
.el-ciego__title strong { color: var(--wp--preset--color--azul-cielo); }
.el-ciego__lead { font-size: 16px; line-height: normal; color: #8c9499; }
.el-stats { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.el-stats > * { margin: 0 !important; }
.el-stat {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.65); text-align: left;
}
.el-stat > * { margin: 0 !important; }
.el-stat__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6.3px; background: var(--wp--preset--color--navy); }
.el-stat__icon img { width: 20px !important; height: 20px; }
.el-stat__label { font-size: 13px; font-weight: 600; line-height: normal; color: #8c9499; }
.el-stat__value { font-family: var(--wp--preset--font-family--gelasio); font-style: italic; font-size: 32px; line-height: normal; white-space: nowrap; }
.el-stat__desc { font-size: 14px; font-weight: 500; line-height: normal; color: #8c9499; }
.el-ciego__note { max-width: 324px; font-size: 13px; font-weight: 600; line-height: normal; color: #888; text-align: left; }
.el-ciego__note strong { font-weight: inherit; color: var(--wp--preset--color--navy); }

@media (min-width: 1024px) {
	.el-ciego { padding-block: 96px; border-top: 1px solid #dddddb; }
	.el-ciego__head {
		display: grid; grid-template-columns: auto 1fr; gap: 0 40px; align-items: start;
		align-self: stretch; padding: 12px 80px 0; text-align: left;
	}
	.el-ciego__badge { grid-row: 1 / 3; align-self: start; background: var(--wp--preset--color--azul-cielo); color: #fff; }
	.el-ciego__title { max-width: 766px; font-size: 28px; line-height: 1.1; }
	.el-ciego__title strong { display: block; }
	.el-ciego__lead { grid-column: 2; max-width: 575px; padding-top: 16px; color: #595959; }
	.el-stats { flex-direction: row; gap: 24px; padding: 32px 80px 0; }
	.el-stat { flex: 1 1 0; min-width: 0; height: 241px; box-sizing: border-box; padding: 24px; border: 1px solid #d9d9d9; border-radius: 16px; }
	.el-stat__icon { width: 50.67px; height: 50.67px; border-radius: 10px; }
	.el-stat__icon img { width: 32px !important; height: 32px; }
	.el-stat__label { color: var(--wp--preset--color--navy); }
	.el-stat__value { font-size: clamp(26px, calc(26px + (100vw - 1024px) * 0.0433), 44px); }
	.el-stat__desc { max-width: 320px; color: #8c8c8c; }
	.el-ciego__note { max-width: 852px; font-size: 16px; font-weight: 400; text-align: center; }
	.el-ciego__note strong { font-weight: 700; }
}

/* ---------- La solución (pasos) ---------- */

:root { --el-glass: linear-gradient(to bottom, rgba(136, 171, 227, 0.22) 0.975%, rgba(211, 216, 219, 0.22) 143.17%); }

.el-solucion { padding-block: 40px; background: var(--el-glass), var(--wp--preset--color--hueso); }
.el-solucion__card { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.el-solucion__card > * { margin: 0 !important; }
.el-solucion__card > .el-badge { align-self: center; }
.el-solucion__title { font-size: 28px; line-height: 1.1; }
.el-solucion__lead { font-size: 16px; line-height: normal; color: #8c9499; }

.el-steps { width: 100%; }
.el-steps__list { overflow: hidden; border: 1px solid var(--wp--preset--color--azul-hielo); border-radius: 12px; background: #fff; text-align: left; }
.el-steps__list > * { margin: 0 !important; }
.el-step { position: relative; display: flex; flex-direction: column; gap: 0; padding: 20px; interpolate-size: allow-keywords; border-bottom: 1px solid #dee0e3; cursor: pointer; transition: background-color 0.3s; }
.el-step:last-child { border-bottom: 0; }
.el-step > * { margin: 0 !important; }
.el-step.is-active { background: var(--el-glass); }
.el-step:focus-visible { outline: 2px solid var(--wp--preset--color--azul-cielo); outline-offset: -2px; }
.el-step__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: normal; }
.el-step__icon { box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 5px; background: var(--el-step-color); }
/* La descripción se despliega con altura animada (donde el navegador lo permite; si no, aparece directo). */
.el-step > .el-step__desc {
	height: 0; margin-top: 0 !important; overflow: hidden; opacity: 0;
	font-size: 14px; font-weight: 500; line-height: normal; color: #8c9499;
	transition: height 0.35s var(--el-ease), margin-top 0.35s var(--el-ease), opacity 0.3s;
}
.el-step.is-active > .el-step__desc { height: auto; margin-top: var(--el-step-gap, 8px) !important; opacity: 1; }
/* El icono del paso activo da un pequeño salto. */
@keyframes el-icon-pop { 40% { scale: 1.18; } }
.el-step.is-active .el-step__icon { animation: el-icon-pop 0.4s var(--el-ease); }
.el-step:nth-child(1), .el-panel:nth-child(1) { --el-step-color: var(--wp--preset--color--crema); }
.el-step:nth-child(2), .el-panel:nth-child(2) { --el-step-color: var(--wp--preset--color--azul-cielo); }
.el-step:nth-child(3), .el-panel:nth-child(3) { --el-step-color: var(--wp--preset--color--verde-agua); }
.el-step:nth-child(4), .el-panel:nth-child(4) { --el-step-color: var(--wp--preset--color--navy); --el-step-ink: #fff; }
.el-step:nth-child(5), .el-panel:nth-child(5) { --el-step-color: #e9ecf1; }
.el-steps__panels { display: none; }

.el-tags {
	display: flex; gap: 10px; width: calc(100% + 40px); margin-inline: -20px !important;
	padding: 5px 20px; overflow-x: auto; scrollbar-width: none;
}
.el-tags > * { margin: 0 !important; }
.el-tag {
	flex: none; padding: 9px 16px; border: 1px solid rgba(136, 171, 227, 0.22); border-radius: 100px;
	background: var(--el-glass); font-size: 14px; font-weight: 500; line-height: normal; white-space: nowrap;
}

.el-solucion__cta { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 32px 20px; border-radius: 10px; background: #fff; }
.el-solucion__cta > * { margin: 0 !important; }
.el-solucion__cta-title { max-width: 248px; font-size: 20px; font-weight: 700; line-height: 1.77; }
.el-solucion__cta-text { max-width: 248px; margin-top: -24px !important; font-size: 14px; font-weight: 500; line-height: 1.77; color: #6b6b66; }

@media (min-width: 1024px) {
	.el-solucion { padding: 28px 24px; background: var(--wp--preset--color--hueso); }
	.el-solucion__card { gap: 16px; padding: 72px; border-radius: 28px; background: var(--el-glass); }
	.el-solucion__title, .el-solucion__lead { max-width: 640px; }
	.el-solucion__lead { color: var(--wp--preset--color--gris-medio); }

	.el-steps { display: flex; justify-content: center; align-items: center; gap: 40px; padding-top: 36px; }
	.el-steps__list { display: flex; flex-direction: column; gap: 10px; width: 320px; flex: none; overflow: visible; border: 0; border-radius: 0; background: none; }
	.el-step {
		--el-step-gap: 4px; padding: 18px 20px; overflow: hidden; border: 1px solid rgba(136, 171, 227, 0.22); border-radius: 12px;
		background: rgba(255, 255, 255, 0.64);
	}
	.el-step:last-child { border-bottom: 1px solid rgba(136, 171, 227, 0.22); }
	.el-step.is-active { border-color: transparent; }
	.el-step:not(.is-active):hover { background: #fff; }
	.el-step > .el-step__desc { max-width: 207px; color: var(--wp--preset--color--navy); }

	.el-steps__panels { display: grid; flex: none; width: 630px; height: 340px; }
	.el-steps__panels > * { margin: 0 !important; }
	.el-panel {
		grid-area: 1 / 1; box-sizing: border-box; padding: 26.5px 27px;
		border: 1px solid #dddddb; border-radius: 16px; background: rgba(255, 255, 255, 0.49); text-align: left;
		opacity: 0; visibility: hidden; transform: translateY(8px);
		transition: opacity 0.4s var(--el-ease), transform 0.4s var(--el-ease), visibility 0s 0.4s;
	}
	.el-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	/* Al cambiar de paso, el contenido del panel entra en orden: título, etiqueta y fichas una por una. */
	.el-panel.is-active > *, .el-panel.is-active .el-tile { animation: el-pop 0.45s var(--el-ease) both; }
	.el-panel.is-active > :nth-child(2) { animation-delay: 0.06s; }
	.el-panel.is-active .el-tile { animation-delay: calc(0.12s + var(--t, 0) * 0.06s); }
	.el-panel.is-active .el-tile:nth-child(2) { --t: 1; }
	.el-panel.is-active .el-tile:nth-child(3) { --t: 2; }
	.el-panel.is-active .el-tile:nth-child(4) { --t: 3; }
	/* Barra de avance del paso activo: se llena con el scroll hasta el siguiente paso (steps.js pone --p). */
	.el-step::after {
		content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--el-step-color);
		transform-origin: left; scale: var(--p, 0) 1; opacity: 0; transition: opacity 0.3s;
	}
	.el-step.is-active::after { opacity: 1; }
	.el-panel > * { margin: 0 !important; }
	.el-panel__kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; line-height: normal; }
	.el-panel__name {
		display: inline-flex; align-items: center; height: 41px; margin-top: 9px !important; padding: 0 10px;
		box-sizing: border-box; border-radius: 20px; background: var(--el-step-color); color: var(--el-step-ink, var(--wp--preset--color--navy));
		font-family: var(--wp--preset--font-family--gelasio); font-style: italic; font-size: 24px; line-height: normal;
	}
	.el-panel__tiles { display: grid; grid-template-columns: repeat(2, 258px); gap: 12px; margin-top: 21px !important; }
	.el-panel__tiles > * { margin: 0 !important; }
	.el-tile {
		display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 13px 0 18px;
		box-sizing: border-box; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; line-height: normal;
	}
	.el-tile__icon { box-sizing: content-box; width: 22px; height: 22px; padding: 8px 9px; border-radius: 5px; background: var(--el-glass); }
	.el-panel:nth-child(n+2) .el-tile__icon { width: 16px; height: 16px; padding: 11px 12px; }

	.el-tags { justify-content: center; flex-wrap: wrap; width: auto; margin-inline: 0 !important; padding: 5px 0 0; overflow: visible; }
	.el-solucion__cta { gap: 16px; width: 990px; max-width: 100%; box-sizing: border-box; padding: 46px 24px 24px; border-radius: 15px; }
	.el-solucion__cta-title { max-width: 558px; margin-bottom: 35.4px !important; }
	.el-solucion__cta-text { max-width: 558px; margin-top: -16px !important; }
}

/* ---------- Encabezados de sección compartidos ---------- */

.el-badge--navy { background: var(--wp--preset--color--navy); }
.el-badge--gris { background: var(--wp--preset--color--gris-claro); color: var(--wp--preset--color--navy); }
.el-h2 { max-width: 640px; font-size: 20px; line-height: normal; text-align: center; }
.el-lead { max-width: 708px; font-size: 16px; line-height: normal; text-align: center; color: #8c9499; }
.el-link { margin: 0; font-size: 14px; font-weight: 700; line-height: normal; }
.el-link a { display: inline-flex; gap: 5px; transition: gap 0.2s var(--el-ease); }
.el-link a:hover { gap: 9px; }
@media (min-width: 1024px) {
	.el-h2 { font-size: 28px; line-height: 1.1; }
	.el-lead { color: var(--wp--preset--color--gris-medio); }
}

/* ---------- Para quién es (áreas) ---------- */

.el-areas { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 40px; background: var(--wp--preset--color--hueso); }
.el-areas__title { color: var(--wp--preset--color--azul-cielo); }
.el-areas__title strong {
	color: transparent; background: linear-gradient(to bottom, #88abe3 4.787%, #1a2c3a 91.128%);
	-webkit-background-clip: text; background-clip: text;
}
.el-areas__grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.el-areas__grid > * { margin: 0 !important; }
.el-area {
	display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px;
	border: 1px solid var(--wp--preset--color--azul-hielo); border-radius: 12px; text-align: center;
	background: linear-gradient(to top, #e3eaf4 0.546%, rgba(232, 232, 232, 0.14) 73.797%);
	transition: transform 0.3s var(--el-ease), box-shadow 0.3s var(--el-ease);
}
.el-area > * { margin: 0 !important; }

/* Hover de las tarjetas de área: toda la tarjeta es enlace, se eleva, una luz sigue al cursor (motion.js pone
   --mx/--my), la persona "sale" un poco de su círculo y la flecha avanza. Con teclado igual (focus-within). */
.el-area { position: relative; isolation: isolate; }
.el-area .el-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.el-area::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(136, 171, 227, 0.28), transparent 70%);
	opacity: 0; transition: opacity 0.4s var(--el-ease);
}
.el-area__photo { overflow: hidden; transition: box-shadow 0.4s var(--el-ease); }
.el-area__photo img { transform-origin: 50% 100%; transition: scale 0.5s var(--el-ease), translate 0.5s var(--el-ease); }
.el-area__name { transition: color 0.3s; }
.el-area .el-link a { position: static; }
.el-area:active { scale: 0.98; }
@media (hover: hover) {
	.el-area:is(:hover, :focus-within) {
		transform: translateY(-6px); border-color: rgba(136, 171, 227, 0.6);
		box-shadow: 0 20px 40px -12px rgba(26, 44, 58, 0.18);
	}
	.el-area:is(:hover, :focus-within)::before { opacity: 1; }
	.el-area:is(:hover, :focus-within) .el-area__photo { box-shadow: 0 0 0 6px rgba(136, 171, 227, 0.25); }
	.el-area:is(:hover, :focus-within) .el-area__photo img { scale: 1.07; translate: 0 -3px; }
	.el-area:is(:hover, :focus-within) .el-link a { gap: 9px; }
}
.el-area__photo { width: 76px; aspect-ratio: 1; border-radius: 50%; background: url(../img/avatar-bg.svg) center / cover; }
.el-area__photo img { display: block; width: 100% !important; height: auto; }
.el-area__name { font-size: 16px; font-weight: 700; line-height: normal; }
.el-area__tags { font-size: 14px; font-weight: 500; line-height: normal; color: var(--wp--preset--color--azul-cielo); }
.el-area__desc { max-width: 260px; font-size: 14px; font-weight: 500; line-height: normal; color: var(--wp--preset--color--gris-medio); }

@media (min-width: 1024px) {
	.el-areas { gap: 16px; padding-block: 100px; }
	.el-areas__title { max-width: 600px; }
	.el-areas__grid { flex-direction: row; gap: 20px; padding-top: 28px; }
	.el-area { flex: 1 1 0; min-width: 0; height: 378px; box-sizing: border-box; gap: 14px; padding: 28px 24px; border-radius: 20px; }
	.el-area__photo { width: 150px; }
	.el-area__tags { font-size: 13px; font-weight: 600; }
	.el-area__desc { max-width: 235px; }
}

/* ---------- Comparativa ---------- */

.el-cmp { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 40px; background: #f4f4f4; }
.el-cmp__table { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.el-cmp__table > * { margin: 0 !important; }
.el-cmp__row.el-cmp__row--head { display: none; }
.el-cmp__row { display: flex; flex-direction: column; padding: 20px; border: 1px solid #dddddb; border-radius: 12px; background: #fff; }
.el-cmp__row > * { margin: 0 !important; font-size: 14px; line-height: normal; }
.el-cmp__row > :nth-child(1) { margin-bottom: 14px !important; font-weight: 700; }
.el-cmp__row > :nth-child(2) { color: #999994; }
.el-cmp__row > :nth-child(3) { font-weight: 700; }
.el-cmp__row > :nth-child(2)::before,
.el-cmp__row > :nth-child(3)::before { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.el-cmp__row > :nth-child(2)::before { content: "Buzón interno"; color: var(--wp--preset--color--gris-medio); }
.el-cmp__row > :nth-child(3)::before { content: "Ethic Lines"; margin-top: 10px; color: var(--wp--preset--color--navy); }
:lang(en) .el-cmp__row > :nth-child(2)::before { content: "Internal mailbox"; }

@media (min-width: 1024px) {
	.el-cmp { gap: 16px; padding-block: 96px; border-top: 1px solid #dddddb; }
	.el-cmp__table { gap: 0; width: 840px; padding-top: 28px; }
	.el-cmp__row, .el-cmp__row.el-cmp__row--head {
		display: grid; grid-template-columns: 240px 300px 300px;
		padding: 0; border: 0; border-bottom: 1px solid #dddddb; border-radius: 0; background: none;
	}
	.el-cmp__row.el-cmp__row--head { border-bottom: 1.5px solid rgba(136, 171, 227, 0.22); }
	.el-cmp__row > *, .el-cmp__row > :nth-child(1) { padding: 18px 20px; margin: 0 !important; font-size: 13px; font-weight: 600; }
	.el-cmp__row > :nth-child(2) { font-size: 14px; font-weight: 500; }
	.el-cmp__row:not(.el-cmp__row--head) > :nth-child(3) { background: rgba(255, 255, 255, 0.35); }
	.el-cmp__row:nth-child(2) > :nth-child(2) { color: var(--wp--preset--color--navy); }
	.el-cmp__row > :nth-child(2)::before, .el-cmp__row > :nth-child(3)::before { content: none; }
	.el-cmp__row--head > * { padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy) !important; }
	.el-cmp__row--head > :nth-child(3) { border-top-right-radius: 10px; background: var(--el-glass); }
	.el-cmp__row:last-child > :nth-child(3) { border-bottom-right-radius: 10px; }
}

/* ---------- Casos reales ---------- */

.el-casos { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 40px; background: #fff; }
.el-casos__lead { max-width: 518px; }
.el-caso { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 24px; border-radius: 16px; background: #fafafa; }
.el-caso > * { margin: 0 !important; }
.el-caso__photo { overflow: hidden; border-radius: 12px; aspect-ratio: 287 / 180; }
.el-caso__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.el-caso__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.el-caso__body > * { margin: 0 !important; }
.el-caso__company { font-size: 14px; font-weight: 700; line-height: normal; }
.el-caso__quote { font-size: 15px; line-height: 1.4; color: var(--wp--preset--color--gris-medio); }
.el-quotes { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.el-quotes > * { margin: 0 !important; }
.el-quote { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; background: #fafafa; }
.el-quote > * { margin: 0 !important; line-height: normal; }
.el-quote__text { font-family: var(--wp--preset--font-family--gelasio); font-style: italic; font-size: 15px; color: #141414; }
.el-quote__meta { font-size: 13px; font-weight: 600; color: #999994; }

@media (min-width: 1024px) {
	.el-casos { gap: 16px; padding-block: 96px; border-top: 1px solid #dddddb; }
	.el-caso { flex-direction: row-reverse; align-items: center; gap: 40px; padding: 44px 48px; border-radius: 20px; }
	.el-caso__photo { flex: 1 1 0; min-width: 0; height: 360px; aspect-ratio: auto; border-radius: 16px; }
	.el-caso__body { flex: none; width: 560px; gap: 16px; }
	.el-caso__company { color: #999994; }
	.el-caso__quote { max-width: 500px; font-family: var(--wp--preset--font-family--gelasio); font-style: italic; font-size: 24px; line-height: normal; color: #141414; }
	.el-caso__body .el-link { color: #141414; }
	.el-quotes { flex-direction: row; padding-top: 4px; }
	.el-quote { flex: 1 1 0; min-width: 0; }
}

/* ---------- CTA final ---------- */

.el-cta { padding-block: 48px; background: #fff; }
.el-cta__card {
	display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 80px 28px; border-radius: 12px; text-align: center;
	background: linear-gradient(136.7deg, #6884b0 0%, #1a2c3a 46%); /* ajustado al render del Figma */
	box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.18);
}
.el-cta__card > * { margin: 0 !important; }
.el-cta__title { max-width: 880px; font-size: 30px; line-height: 1.13; color: #fff; }
.el-cta__text { max-width: 640px; font-size: 14px; line-height: 1.5; color: #d9d9d9; }

@media (min-width: 1024px) {
	.el-cta { padding-block: 96px 112px; }
	.el-cta__card { gap: 32px; padding: 80px; border-radius: 28px; }
	.el-cta__title { font-size: 40px; }
	.el-cta__text { font-size: 16px; line-height: normal; }
}

/* Escritorio: la fila de pasos se queda fija y el scroll avanza el paso activo (steps.js). */
.el-steps__track { position: relative; }
.el-steps__track > .el-steps { position: sticky; top: calc(50vh - 170px); }

@media (prefers-reduced-motion: reduce) {
	.el-marquee__track { animation: none; }
}

/* ---------- Movimiento (motion.js + CSS). Solo opacity/translate/scale; se apaga con movimiento reducido. ---------- */

/* Aparición al entrar al viewport. Usa `translate` para no chocar con el `transform` del hover. */
.el-reveal { opacity: 0; translate: 0 16px; }
.el-reveal.is-in {
	opacity: 1; translate: none;
	transition: opacity 0.6s cubic-bezier(.215, .61, .355, 1) var(--el-delay, 0s), translate 0.6s cubic-bezier(.215, .61, .355, 1) var(--el-delay, 0s);
}

/* Tarjetas dentro de tiras deslizables: entran de lado (subiendo, la tira se podía desplazar en vertical mientras aparecían). */
@media (max-width: 1023px) {
	:is(.el-fuentes:not(.el-fuentes--ms), .el-carousel__track) { overflow-y: hidden; }
	:is(.el-fuentes:not(.el-fuentes--ms), .el-carousel__track) > .el-reveal:not(.is-in) { translate: 24px 0; }
}
@media (min-width: 1024px) { .el-strip-clone { display: none !important; } }

/* Cifras que cuentan: dígitos de ancho fijo para que el texto no tiemble mientras sube el número. */
.el-stat__value, .el-fuente__value { font-variant-numeric: tabular-nums; }

/* Hero: las burbujas y píldoras del chat aparecen en secuencia al cargar. */
@keyframes el-pop { from { opacity: 0; translate: 0 12px; scale: 0.94; } }
.el-hero__visual .el-pill,
.el-hero__visual .el-bubble { animation: el-pop 0.6s cubic-bezier(.215, .61, .355, 1) both; }
.el-pill--confidencial { animation-delay: 0.3s !important; }
.el-bubble--1 { animation-delay: 0.6s !important; }
.el-bubble--2 { animation-delay: 1.1s !important; }
.el-pill--neutral { animation-delay: 1.4s !important; }
.el-bubble--3 { animation-delay: 1.6s !important; }

/* Escenario "Presentar denuncia": crece a su tamaño conforme entra al viewport (scroll-driven, nativo). */
@supports (animation-timeline: view()) {
	@keyframes el-grow { from { scale: 0.9; opacity: 0.6; } }
	.el-video { animation: el-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}

/* Microinteracciones táctiles: lo que se toca se hunde un poco (en móvil no hay hover). */
.wp-block-button__link, .el-fotocard, .el-post-card, .el-related__card, .el-tabs__tab, .el-carousel__btn, .el-faq__item summary, .el-paso summary {
	transition: scale 0.15s var(--el-ease), transform 0.3s var(--el-ease), box-shadow 0.3s var(--el-ease), background-color 0.2s, color 0.2s;
}
.wp-block-button__link:active, .el-tabs__tab:active, .el-carousel__btn:active { scale: 0.96; }
.el-fotocard:active, .el-post-card:active, .el-related__card:active, .el-faq__item summary:active, .el-paso summary:active { scale: 0.98; }
@media (hover: hover) {
	.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 44, 58, 0.14); }
}

/* Acordeones (preguntas y pasos): abren con altura animada donde el navegador lo permite; si no, el texto aparece suave. */
@supports selector(::details-content) {
	.el-faq__item, .el-paso { interpolate-size: allow-keywords; }
	.el-faq__item::details-content {
		height: 0; overflow: clip;
		transition: height 0.35s var(--el-ease), content-visibility 0.35s allow-discrete;
	}
	.el-faq__item[open]::details-content { height: auto; }
}
@keyframes el-fade { from { opacity: 0; translate: 0 -4px; } }
.el-faq__item[open] > :not(summary), .el-paso[open] > :not(summary) { animation: el-fade 0.35s var(--el-ease) both; }

/* Imágenes grandes: un parallax ligero conforme cruzan la pantalla (scroll-driven, nativo). */
@supports (animation-timeline: view()) {
	@keyframes el-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
	.el-ms-equipo__photo, .el-article__img, .el-historia__photo { overflow: hidden; border-radius: 16px; }
	.el-ms-equipo__photo img, .el-article__img img, .el-historia__photo img, .el-experiencia .wp-block-cover__image-background {
		scale: 1.12; animation: el-parallax linear both; animation-timeline: view();
	}
}

/* Entrada de los heros: CSS puro para que corra desde el primer pintado (motion.js los omite). */
@keyframes el-hero-in { from { opacity: 0; translate: 0 20px; } }
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > *, .el-ms-hero__visual {
	animation: el-hero-in 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) calc(0.05s + var(--n, 0) * 0.1s) both;
}
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > :nth-child(2) { --n: 1; }
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > :nth-child(3) { --n: 2; }
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > :nth-child(4) { --n: 3; }
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > :nth-child(n+5) { --n: 4; }

/* Globos del hero: entran uno por uno, luego flotan; el escudo late. */
@keyframes el-globo-in { from { opacity: 0; scale: 0.6; } }
@keyframes el-globo-float { to { translate: 0 calc(-6 * var(--u)); } }
@keyframes el-shield-pulse { 0% { box-shadow: 0 0 0 0 var(--ring); } 70%, 100% { box-shadow: 0 0 0 calc(16 * var(--u)) transparent; } }
.el-globo, .el-globos__shield {
	--d: calc(0.5s + var(--i) * 0.18s);
	animation: el-globo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) backwards,
		el-globo-float 3.2s ease-in-out calc(var(--d) + 0.6s + var(--i) * 0.4s) infinite alternate;
}
.el-globos__shield { animation-name: el-globo-in, el-shield-pulse; animation-duration: 0.6s, 2.6s; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-out; animation-direction: normal; }

/* Palabras destacadas de los títulos: se "pintan" de izquierda a derecha al aparecer (máscara: respeta su color o degradado). */
@keyframes el-paint { from { mask-position: 100% 0; } }
:is(.el-hero__title strong, .el-areas__title strong, .el-ciego__title strong, .el-section :is(h1, h2) mark) {
	mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, 0.2) 55%); mask-size: 220% 100%; mask-position: 0 0;
}
:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) :is(strong, mark) { animation: el-paint 1s var(--el-ease) 0.55s backwards; }
.el-reveal.is-in :is(strong, mark), .el-reveal.is-in:is(strong, mark) { animation: el-paint 1s var(--el-ease) calc(var(--el-delay, 0s) + 0.3s) backwards; }

/* Chat del hero: escribe frases solo (motion.js); el cursor parpadea. */
@keyframes el-caret { 50% { opacity: 0; } }
.el-chatbar span { overflow: hidden; white-space: nowrap; }
.el-chatbar span.is-typing { color: var(--wp--preset--color--navy); }
.el-chatbar span.is-typing::after {
	content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em;
	background: currentColor; animation: el-caret 1s steps(1) infinite;
}

/* Degradados vivos: una luz difusa se desplaza muy lento detrás del contenido. */
@keyframes el-drift { from { translate: -8% -6%; } to { translate: 8% 6%; } }
.el-cta__card, .el-hero__visual { position: relative; isolation: isolate; overflow: hidden; }
.el-cta__card::before, .el-hero__visual::before {
	content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at 30% 30%, rgba(136, 171, 227, 0.45), transparent 42%),
		radial-gradient(circle at 72% 68%, rgba(157, 185, 191, 0.4), transparent 40%);
	animation: el-drift 16s ease-in-out infinite alternate;
}
.el-hero__visual::before { background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.55), transparent 40%), radial-gradient(circle at 25% 75%, rgba(136, 171, 227, 0.5), transparent 42%); }

/* Comparativa: la columna de Ethic Lines brilla fila por fila conforme aparece. */
@keyframes el-glow { from { background-color: rgba(136, 171, 227, 0.45); } }
.el-cmp__row.is-in > :nth-child(3) { animation: el-glow 1.4s var(--el-ease) calc(var(--el-delay, 0s) + 0.25s) backwards; }

/* Flechas "→" de los enlaces: se adelantan un poco con el hover (motion.js las envuelve en .el-arrow). */
.el-arrow { display: inline-block; transition: translate 0.25s var(--el-ease); }
@media (hover: hover) { a:hover .el-arrow { translate: 3px 0; } }

@media (prefers-reduced-motion: reduce) {
	.el-reveal { opacity: 1; translate: none; }
	.el-hero__visual .el-pill, .el-hero__visual .el-bubble, .el-video, .el-globo, .el-globos__shield,
	:is(.el-hero, .el-mini-hero, .el-nos-hero, .el-pqe-hero, .el-ms-hero__copy) > *, .el-ms-hero__visual,
	:is(strong, mark), .el-cta__card::before, .el-hero__visual::before, .el-cmp__row > *, .el-step__icon, .el-panel > *, .el-tile { animation: none; }
	.el-step > .el-step__desc { transition: none; }
	.el-ms-equipo__photo img, .el-article__img img, .el-historia__photo img, .el-experiencia .wp-block-cover__image-background { animation: none; scale: none; }
	.el-area, .el-area__photo img { transform: none !important; scale: none !important; translate: none !important; }
	.wp-block-button__link:active, .el-fotocard:active, .el-post-card:active { scale: none; }
}