/* ==========================================================================
   Landing ST1 — professional.incapto.com
   Diseño: Figma "Landing ST1_V4" (t3HQk2h0V10wQ7SywsNSUg, nodo 593:1042)

   Identidad propia y distinta del resto del sitio: fondo negro y verde lima,
   frente al crema + verde INCAPTO del resto de páginas. Todo va scopeado bajo
   .st1 para no contaminar el resto del sitio, y hay un bloque final que
   neutraliza los defaults de Divi (padding-bottom en p/h*, viñetas en ul).
   ========================================================================== */

.st1 {
	--st1-bg:        #000000;
	--st1-lime:      #b8f0a0;
	--st1-green:     #245644;
	--st1-ink:       #ffffff;
	--st1-muted:     rgba(255, 255, 255, .66);
	--st1-faint:     rgba(255, 255, 255, .45);
	--st1-line:      rgba(255, 255, 255, .14);
	--st1-surface:   rgba(255, 255, 255, .04);

	/* Una sola familia con sus pesos reales (400 Book / 500 Medium / 600
	   SemiBold / 700 Bold). Las @font-face las emite incapto_brand_font_face_css()
	   en functions.php. Mientras no se suba la Bold, el 700 usa la SemiBold. */
	--st1-font:      'PP Neue Montreal', Helvetica, Arial, sans-serif;
	--st1-mono:      'PT-Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--st1-wrap:      1290px;
	--st1-gutter:    clamp(20px, 5vw, 75px);
	--st1-radius:    12px;

	/* Aire vertical de cada sección, arriba y abajo. Entre dos secciones
	   seguidas queda el doble: 144 px a 1440, 102 a 1024 y 80 en móvil.
	   Antes eran unos 200 px en escritorio y se veían huecos de más; si
	   hay que retocar el ritmo de la página, se cambia aquí. */
	--st1-sec-y:     clamp(40px, 5vw, 72px);

	background: var(--st1-bg);
	color: var(--st1-ink);
	font-family: var(--st1-font);
	font-size: 15px;
	line-height: 1.5;
	overflow-x: clip;
}

.st1 *,
.st1 *::before,
.st1 *::after { box-sizing: border-box; }

/* --- Neutralizar defaults de Divi ---------------------------------------
   Divi mete padding-bottom en p y en los encabezados, y viñetas con padding
   en los ul/ol del contenido. Va aquí arriba, antes de los componentes, para
   que las reglas de cada bloque lo sobrescriban sin pelear por especificidad
   (es justo lo que rompía el padding de los dos timelines).
   ------------------------------------------------------------------------ */

body.st1-page #page-container,
body.st1-page #et-main-area,
body.st1-page #main-content { background: #000; }

.st1 p,
.st1 h1, .st1 h2, .st1 h3, .st1 h4 { padding-bottom: 0; }

/* :where() aporta especificidad 0, así que este reset queda en (0,1,0) —el peso
   de .st1— en vez de (0,1,1). Sin eso ganaría a las reglas de cada componente
   (.st1-adv__list, .st1-trad__steps) y les anularía el padding del timeline. */
.st1 :where(ul, ol) { list-style: none; padding: 0; margin: 0; line-height: inherit; }
.st1 :where(li) { list-style: none; }

.st1 img { max-width: 100%; }

.st1-wrap {
	width: 100%;
	max-width: var(--st1-wrap);
	margin-inline: auto;
	padding-inline: var(--st1-gutter);
}

/* --- Piezas compartidas -------------------------------------------------- */

.st1-h2 {
	font-family: var(--st1-font);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: -.01em;
	margin: 0;
	color: var(--st1-ink);
}

.st1-accent {
	color: var(--st1-lime);
	font-weight: 700;
}

.st1-eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--st1-lime);
	font-weight: 500;
}

.st1-pill {
	display: inline-block;
	margin: 0;
	padding: 8px 17px;
	border: 1px solid var(--st1-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--st1-muted);
}

.st1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 51px;
	padding: 0 34px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.st1-btn--solid {
	background: var(--st1-lime);
	color: #0a1a10;
	border: 1px solid var(--st1-lime);
}
.st1-btn--solid:hover,
.st1-btn--solid:focus-visible { background: #cdf7bb; border-color: #cdf7bb; color: #0a1a10; }

.st1-btn--ghost {
	background: transparent;
	color: var(--st1-ink);
	border: 1px solid rgba(255, 255, 255, .55);
}
.st1-btn--ghost:hover,
.st1-btn--ghost:focus-visible { background: var(--st1-lime); border-color: var(--st1-lime); color: #0a1a10; }

.st1 a:focus-visible,
.st1 button:focus-visible,
.st1 input:focus-visible,
.st1 select:focus-visible,
.st1 textarea:focus-visible {
	outline: 2px solid var(--st1-lime);
	outline-offset: 3px;
}

.st1-icon { display: inline-flex; }
.st1-icon svg { width: 100%; height: 100%; display: block; }

/* ============================ 01 · HERO ================================== */

.st1-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 74vh, 828px);
	padding-block: clamp(64px, 9vw, 130px);
	overflow: hidden;
}

.st1-hero__media { position: absolute; inset: 0; z-index: 0; }

.st1-hero__poster,
.st1-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* El vídeo entra fundiendo sobre el póster, que es el mismo fotograma: sin
   este fundido se ve un parpadeo al empezar la reproducción. Arranca oculto
   para que, si no llega a reproducirse (datos ahorrados, menos animación, un
   códec no soportado), lo que quede a la vista sea el póster. */
.st1-hero__video {
	opacity: 0;
	transition: opacity .6s ease;
}
.st1-hero__video.is-playing { opacity: 1; }

/* Doble velo: uno horizontal para que el texto lea sobre la máquina y otro
   inferior para fundir con la sección siguiente. */
.st1-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.45) 100%),
		linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.85) 100%);
}

.st1-hero__inner { position: relative; z-index: 1; }

.st1-hero__brand {
	margin: 0 0 26px;
	font-family: 'Halvar-Engschrift-Light', var(--st1-font);
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: .02em;
	color: var(--st1-ink);
}
.st1-hero__brand span { font-weight: 700; letter-spacing: -.01em; }

.st1-hero__title { margin: 0; }

.st1-hero__title .st1-accent,
.st1-hero__sub {
	display: block;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.02em;
}

.st1-hero__title .st1-accent { font-size: clamp(38px, 5.2vw, 58px); }
.st1-hero__sub { font-size: clamp(27px, 3.7vw, 41px); color: var(--st1-ink); margin-top: 2px; }

.st1-hero__lead {
	max-width: 580px;
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.62;
	color: rgba(255, 255, 255, .86);
}

.st1-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 38px 0 0;
}

/* ============================ 02 · CIFRAS ================================ */

.st1-stats-sec { padding-block: clamp(28px, 4vw, 40px); }

.st1-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(22px, 3vw, 28px) clamp(24px, 4vw, 68px);
	border-radius: var(--st1-radius);
	background: var(--st1-lime);
	color: var(--st1-green);
}

.st1-stats__claim {
	margin: 0;
	font-weight: 700;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.32;
	color: #0a1a10;
}

.st1-stats__list {
	--st1-stat-gap: clamp(20px, 3vw, 44px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st1-stat-gap);
	margin: 0;
	padding: 0;
}

.st1-stat { text-align: center; position: relative; }

/* Separadores finos entre cifras, como en el diseño. */
.st1-stat + .st1-stat::before {
	content: '';
	position: absolute;
	left: calc(-1 * var(--st1-stat-gap) / 2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 26px;
	background: rgba(36, 86, 68, .35);
}

.st1-stat dt {
	margin: 0;
	font-weight: 700;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
	letter-spacing: -.02em;
	color: #0a1a10;
}
.st1-stat dt sup { font-size: .46em; vertical-align: super; }

.st1-stat dd {
	margin: 6px 0 0;
	font-size: 12px;
	color: rgba(10, 26, 16, .72);
}

/* ========================= 03 · DIAGNÓSTICO ============================== */

.st1-diag { padding-block: var(--st1-sec-y); }

.st1-diag__grid {
	display: grid;
	grid-template-columns: minmax(0, 382px) minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.st1-diag__intro .st1-h2 { margin: 26px 0 0; }

.st1-diag__count {
	margin: 44px 0 0;
	font-size: clamp(32px, 3.4vw, 44px);
	line-height: 1;
	color: var(--st1-ink);
	font-weight: 400;
}

.st1-diag__note {
	max-width: 240px;
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--st1-muted);
}

.st1-diag__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st1-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 415 / 341;
	padding: 22px;
	border-radius: var(--st1-radius);
	overflow: hidden;
	isolation: isolate;
}

.st1-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* El degradado es lo que hace legible el titular sobre la foto. */
.st1-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.10) 38%, rgba(4,14,8,.86) 78%, rgba(2,8,4,.96) 100%);
}

.st1-card__tag {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 7px 15px;
	border-radius: 999px;
	background: rgba(8, 20, 12, .72);
	border: 1px solid rgba(184, 240, 160, .28);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--st1-lime);
	backdrop-filter: blur(6px);
}

.st1-card__body h3 {
	margin: 0;
	font-weight: 700;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.25;
	color: var(--st1-ink);
}

.st1-card__body p {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .74);
}

/* ======================= 04 · VENTAJA COMPETITIVA ======================== */

.st1-adv { padding-block: var(--st1-sec-y); }

.st1-adv__title { max-width: 760px; }

.st1-adv__band { margin-top: clamp(40px, 5vw, 72px); }

.st1-adv__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0 0 40px;
	list-style: none;
	/* v4 quitó el timeline (tallos, puntos y reglas) y tampoco lleva filete:
	   en el diseño (593:1195) los cuatro puntos van sobre negro, sin líneas. */
}

.st1-adv__item { position: relative; }

.st1-adv__num {
	margin: 0;
	font-weight: 700;
	font-size: clamp(32px, 3.3vw, 44px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--st1-lime);
}

.st1-adv__head {
	max-width: 215px;
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.28;
	color: var(--st1-ink);
}

.st1-adv__text {
	max-width: 205px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--st1-muted);
}

.st1-adv__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-top: 26px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: var(--st1-surface);
	color: var(--st1-lime);
}
.st1-adv__icon .st1-icon { width: 26px; height: 26px; }

.st1-adv__cta { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

/* ========================== 05 · TECNOLOGÍA ============================== */

.st1-tech { padding-block: var(--st1-sec-y); }

.st1-tech__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: clamp(36px, 4.5vw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

/* Bloque, no flex: como ítem flex la imagen resolvía su altura desde el
   atributo height del <img> y aspect-ratio no llegaba a aplicarse. */
.st1-tech__card {
	display: block;
	padding: 12px 12px 26px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: var(--st1-radius);
	background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
}

.st1-tech__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 280 / 210;
	object-fit: cover;
	border-radius: 8px;
}

.st1-tech__label {
	margin: 24px 14px 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--st1-faint);
}

.st1-tech__sigla {
	margin: 6px 14px 0;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.1;
	color: var(--st1-ink);
	font-weight: 400;
}

.st1-tech__text {
	margin: 18px 14px 0;
	font-size: 13px;
	line-height: 1.58;
	color: var(--st1-muted);
}

.st1-tech__cta { margin: clamp(36px, 4.5vw, 52px) 0 0; text-align: center; }

/* ========================== 06 · TRADICIÓN =============================== */

.st1-trad {
	padding-block: var(--st1-sec-y);
	background: radial-gradient(120% 70% at 50% 45%, rgba(24, 66, 42, .55) 0%, rgba(0, 0, 0, 0) 68%);
}

.st1-trad__inner { text-align: center; }

.st1-trad__title { margin: 18px auto 0; max-width: 680px; }

.st1-trad__lead {
	max-width: 620px;
	margin: 24px auto 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--st1-muted);
}
.st1-trad__lead strong { color: var(--st1-ink); font-weight: 700; }

.st1-trad__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 clamp(12px, 2vw, 24px);
	align-items: end;
	margin: clamp(36px, 4vw, 52px) 0 0;
	padding: 0 0 96px;
	list-style: none;
}

/* Línea discontinua sobre la que se apoyan los cuatro puntos. */
.st1-trad__steps::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 96px;
	border-top: 1px dashed rgba(184, 240, 160, .38);
}

.st1-trad__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.st1-trad__step h3 {
	margin: 0;
	max-width: 215px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.32;
	color: var(--st1-ink);
}

.st1-trad__step p {
	margin: 10px 0 0;
	max-width: 190px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--st1-muted);
}

.st1-trad__stem {
	width: 1px;
	background: rgba(184, 240, 160, .45);
	margin-top: 18px;
}
.st1-trad__step--alto .st1-trad__stem { height: 58px; }
.st1-trad__step--bajo .st1-trad__stem { height: 18px; }

.st1-trad__dot {
	position: relative;
	z-index: 1;
	width: 9px;
	height: 9px;
	margin-bottom: -5px;
	border-radius: 50%;
	background: var(--st1-lime);
}

.st1-trad__num {
	position: absolute;
	left: 50%;
	bottom: -74px;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 50px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-family: var(--st1-mono);
	font-size: 12px;
	color: var(--st1-ink);
}

.st1-trad__cta { margin: clamp(28px, 4vw, 44px) 0 0; }

/* ========================= 07 · PLATAFORMA =============================== */

.st1-plat { padding-block: var(--st1-sec-y); }

.st1-plat__top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

/* En el Figma el titular empieza un 12 % de la altura de los paneles por
   debajo de su borde superior (45 de 371 px). Centrado lo bajaba el doble y
   dejaba mucho vacío sobre él. El padding en % se calcula sobre el ancho de
   la columna, y los paneles escalan con ese mismo ancho (531:371), así que
   8,5 % de ancho = 12 % de su alto a cualquier tamaño. */
.st1-plat__intro { padding-top: 8.5%; }

.st1-plat__intro p {
	margin: 26px 0 0;
	max-width: 600px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--st1-muted);
}

/* Dos capturas desplazadas en diagonal, como en el diseño: la de consumos
   arriba a la izquierda y la del mapa abajo a la derecha, montada encima.
   Las cotas salen del Figma (593:1391 y 672:414): entre las dos ocupan
   531x371, cada una mide 428x242 y 423x242 y llevan un trazo negro de 3 px
   que, sobre el fondo negro, solo se ve donde se solapan: hace de separador.
   El contenedor reserva su alto con aspect-ratio para que nada salte. */
.st1-plat__paneles {
	position: relative;
	aspect-ratio: 531 / 371;
}

.st1-plat__panel {
	position: absolute;
	box-sizing: border-box;
	display: block;
	height: auto;
	border: 3px solid #000;
	border-radius: clamp(12px, 1.4vw, 20px);
	object-fit: cover;
}
.st1-plat__panel--1 { top: 0;    left: 0;  width: 80.6%; aspect-ratio: 428 / 242; }
.st1-plat__panel--2 { bottom: 0; right: 0; width: 79.7%; aspect-ratio: 423 / 242; }

.st1-plat__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 54px) clamp(28px, 4vw, 56px);
	margin: clamp(44px, 5vw, 72px) 0 0;
	padding: 0;
	list-style: none;
}

/* v4: cuadrado redondeado sin borde, en vez del círculo con anillo. */
.st1-plat__icon {
	display: grid;
	place-items: center;
	width: 55px;
	height: 55px;
	border-radius: 16px;
	background: var(--st1-surface);
	color: var(--st1-lime);
}
.st1-plat__icon .st1-icon { width: 24px; height: 24px; }

.st1-plat__cell h3 {
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--st1-ink);
}

.st1-plat__cell p {
	margin: 14px 0 0;
	max-width: 310px;
	font-size: 13px;
	line-height: 1.58;
	color: var(--st1-muted);
}

/* ========================= 08 · PERSONALIZA ============================== */

.st1-custom { padding-block: var(--st1-sec-y); }

/* v4: el degradado sangra de lado a lado, ya no es una caja centrada. */
.st1-custom__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 4vw, 60px);
	align-items: center;
	padding: clamp(32px, 4vw, 64px);
	border-radius: 20px;
	background:
		radial-gradient(90% 120% at 12% 20%, rgba(28, 76, 48, .85) 0%, rgba(8, 20, 13, .92) 55%, rgba(0, 0, 0, .96) 100%);
}

.st1-custom__intro .st1-h2 { margin: 18px 0 0; max-width: 340px; }

.st1-custom__intro p {
	margin: 24px 0 0;
	max-width: 520px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--st1-muted);
}

.st1-custom__intro .st1-btn { margin-top: 34px; }

.st1-custom__img { display: block; width: 100%; height: auto; border-radius: var(--st1-radius); }

/* El render 3D comparte caja con la foto a la que sustituye; object-fit
   evita que un póster que aún no ha cargado descuadre la rejilla. */
.st1-custom__video { aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

.st1-custom__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: clamp(32px, 4vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.st1-custom__cell {
	padding: 31px 27px;
	min-height: 208px;
	border: 1px solid var(--st1-line);
	border-radius: var(--st1-radius);
	background: var(--st1-surface);
}

.st1-custom__num {
	margin: 0;
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--st1-lime);
}

.st1-custom__text {
	margin: 22px 0 0;
	font-size: 15px;
	line-height: 1.38;
	color: var(--st1-ink);
}

/* ================== 09 · ¿POR QUÉ ELEGIR INCAPTO ST1? ==================== */

.st1-video { padding-block: var(--st1-sec-y); }

.st1-video__inner { text-align: center; }

.st1-video__title { margin: 0 auto; max-width: 720px; }

.st1-video__frame {
	position: relative;
	margin: clamp(32px, 4vw, 52px) auto 0;
	border-radius: var(--st1-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
}

.st1-video__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Botón de play propio, como pide el diseño. Es un <button> real para que
   responda a teclado y lectores de pantalla; al pulsarlo, el JS activa los
   controles nativos y lo oculta. */
.st1-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: background-color .25s ease;
}
.st1-video__play:hover { background: rgba(0, 0, 0, .12); }
.st1-video__play[hidden] { display: none; }

.st1-video__play-icono {
	display: grid;
	place-items: center;
	width: clamp(68px, 7vw, 96px);
	aspect-ratio: 1;
	border: 2px solid var(--st1-lime);
	border-radius: 50%;
	color: var(--st1-lime);
	background: rgba(0, 0, 0, .25);
	transition: transform .25s ease, background-color .25s ease;
}
.st1-video__play:hover .st1-video__play-icono {
	transform: scale(1.06);
	background: rgba(184, 240, 160, .18);
}
.st1-video__play-icono svg { width: 42%; height: 42%; margin-left: 8%; }

/* Texto solo para lectores de pantalla. */
.st1 .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ===================== ESTADO: PROTEGIDA CON CONTRASEÑA =================== */

/* Divi filtra the_password_form y emite su propio marcado
   (.et_password_protected_form), así que estilamos ese y no el de WordPress. */
.st1-bloqueada {
	max-width: 560px;
	margin-inline: auto;
	padding-block: clamp(80px, 14vw, 180px);
}

.st1-bloqueada .et_password_protected_form { text-align: left; }

.st1-bloqueada .et_password_protected_form h1 {
	margin: 0 0 12px;
	font-size: clamp(26px, 2.7vw, 34px);
	line-height: 1.16;
	font-weight: 400;
	color: var(--st1-ink);
}

.st1-bloqueada .et_password_protected_form p { color: var(--st1-muted); font-size: 15px; }

.st1-bloqueada .et_password_protected_form label {
	display: block;
	margin-top: 22px;
	font-size: 13px;
	color: var(--st1-muted);
}

.st1-bloqueada .et_password_protected_form input[type="password"] {
	width: 100%;
	margin-top: 8px;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--st1-line);
	background: transparent;
	color: var(--st1-ink);
	font-family: var(--st1-font);
	font-size: 16px;
}
.st1-bloqueada .et_password_protected_form input[type="password"]:focus { border-bottom-color: var(--st1-lime); }

.st1-bloqueada .et_password_protected_form .et_pb_button {
	margin-top: 26px;
	min-height: 51px;
	padding: 0 34px;
	border: 1px solid var(--st1-lime);
	border-radius: 999px;
	background: var(--st1-lime);
	color: #0a1a10;
	font-family: var(--st1-font);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
}
.st1-bloqueada .et_password_protected_form .et_pb_button:hover { background: #cdf7bb; }
.st1-bloqueada .et_password_protected_form .et_pb_button::after { display: none; }

/* ========================== 09 · CONTACTO ================================ */

.st1-contact {
	padding-block: var(--st1-sec-y);
	background: radial-gradient(100% 80% at 50% 100%, rgba(20, 58, 37, .55) 0%, rgba(0, 0, 0, 0) 70%);
}

/* En Figma este titular es menor que el resto de H2 (~34px) y el filete cruza
   todo el contenedor, no solo el ancho del texto: de ahí que el borde vaya en
   el formulario y no en el título. */
.st1-contact__title {
	max-width: 480px;
	font-size: clamp(26px, 2.7vw, 34px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.st1-contact__form {
	padding-top: clamp(32px, 4vw, 44px);
	border-top: 1px solid var(--st1-line);
}

/* --- Reestilado del formulario embebido de HubSpot ----------------------- */

.st1-contact__form .hs-form fieldset { max-width: none !important; width: 100% !important; }

.st1-contact__form .hs-form .form-columns-2,
.st1-contact__form .hs-form .form-columns-1 {
	display: grid;
	gap: 0 clamp(20px, 3vw, 64px);
	margin-bottom: 22px;
}
.st1-contact__form .hs-form .form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st1-contact__form .hs-form .form-columns-1 { grid-template-columns: minmax(0, 1fr); }

.st1-contact__form .hs-form .hs-form-field {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin-bottom: 22px;
}

.st1-contact__form .hs-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--st1-muted);
}
.st1-contact__form .hs-form label .hs-form-required { color: var(--st1-lime); }

.st1-contact__form .hs-form .input { margin: 0 !important; }

.st1-contact__form .hs-form input[type="text"],
.st1-contact__form .hs-form input[type="email"],
.st1-contact__form .hs-form input[type="tel"],
.st1-contact__form .hs-form input[type="number"],
.st1-contact__form .hs-form select,
.st1-contact__form .hs-form textarea {
	width: 100% !important;
	max-width: none !important;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--st1-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--st1-ink);
	font-family: var(--st1-font);
	font-size: 15px;
	transition: border-color .2s ease;
}

.st1-contact__form .hs-form textarea { min-height: 116px; resize: vertical; }

.st1-contact__form .hs-form input::placeholder,
.st1-contact__form .hs-form textarea::placeholder { color: var(--st1-faint); }

.st1-contact__form .hs-form input:focus,
.st1-contact__form .hs-form select:focus,
.st1-contact__form .hs-form textarea:focus { border-bottom-color: var(--st1-lime); }

/* El desplegable nativo hereda el fondo del sistema: hay que forzar el color
   de las opciones o se ven en blanco sobre blanco en Windows. */
.st1-contact__form .hs-form select option { background: #0b150e; color: var(--st1-ink); }

.st1-contact__form .hs-form .hs-error-msgs {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.st1-contact__form .hs-form .hs-error-msgs label { color: #ff9c8a; font-size: 12px; margin: 0; }

.st1-contact__form .hs-form .hs-richtext,
.st1-contact__form .hs-form .legal-consent-container {
	font-size: 12px;
	line-height: 1.55;
	color: var(--st1-faint);
}
.st1-contact__form .hs-form .legal-consent-container a { color: var(--st1-lime); }

.st1-contact__form .hs-form .hs-submit { margin-top: 34px; text-align: center; }

.st1-contact__form .hs-form .hs-button.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 53px;
	padding: 0 44px;
	border: 1px solid var(--st1-lime);
	border-radius: 999px;
	background: var(--st1-lime);
	color: #0a1a10;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease;
}
.st1-contact__form .hs-form .hs-button.primary:hover { background: #cdf7bb; }

/* Alternativa a rellenar el formulario: agendar llamada directamente. */
.st1-contact__alt {
	margin: 26px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--st1-muted);
}
.st1-contact__alt a {
	color: var(--st1-lime);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.st1-contact__alt a:hover { text-decoration-thickness: 2px; }

.st1-contact__form .submitted-message {
	padding: 28px;
	border: 1px solid rgba(184, 240, 160, .35);
	border-radius: var(--st1-radius);
	color: var(--st1-ink);
}

/* ============================ RESPONSIVE ================================= */

@media (max-width: 1100px) {
	.st1-diag__grid    { grid-template-columns: minmax(0, 1fr); }
	.st1-diag__note    { max-width: 420px; }
	.st1-tech__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st1-plat__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st1-custom__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st1-adv__head,
	.st1-adv__text     { max-width: none; }
}

@media (max-width: 860px) {
	.st1-plat__top     { grid-template-columns: minmax(0, 1fr); }
	.st1-plat__intro   { padding-top: 0; }
	.st1-custom__panel { grid-template-columns: minmax(0, 1fr); }
	.st1-custom__intro .st1-h2 { max-width: none; }

	/* En móvil el timeline horizontal deja de tener sentido: se apila y se
	   sustituyen las reglas por un filete a la izquierda de cada punto. */
	.st1-adv__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.st1-trad__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-bottom: 0;
	}
	.st1-trad__steps::after { display: none; }
	.st1-trad__stem,
	.st1-trad__dot { display: none; }
	.st1-trad__num {
		position: static;
		transform: none;
		order: -1;
		margin: 0 0 16px;
	}
	.st1-trad__step h3, .st1-trad__step p { max-width: 420px; }
}

@media (max-width: 700px) {
	.st1-diag__cards   { grid-template-columns: minmax(0, 1fr); }
	.st1-tech__grid    { grid-template-columns: minmax(0, 1fr); }
	.st1-plat__grid    { grid-template-columns: minmax(0, 1fr); }
	.st1-custom__grid  { grid-template-columns: minmax(0, 1fr); }
	.st1-custom__cell  { min-height: 0; }
	.st1-stats         { flex-direction: column; align-items: flex-start; }
	.st1-stats__list   { gap: 28px; }
	.st1-stat + .st1-stat::before { display: none; }
	.st1-hero__actions .st1-btn { flex: 1 1 auto; }
	.st1-contact__form .hs-form .form-columns-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.st1 *, .st1 *::before, .st1 *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* Anclas: el header de Divi es fijo, así que los destinos necesitan holgura. */
.st1 [id] { scroll-margin-top: 100px; }

html:has(body.st1-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html:has(body.st1-page) { scroll-behavior: auto; }
}