/* =============================================================================
   KRAK STUDIO — Servicios, Proceso, Casos, Equipo, Modelos, FAQ, Contacto,
   Footer, FAB y reduced-motion (SPEC §9–§17, §2.9).
   ============================================================================= */

/* =============================================================================
   §9 SERVICIOS
   ============================================================================= */
.servicios { background: #eaedf0; }
.servicios .k-head__title { max-width: 14ch; }
.servicios__layout {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* 9.3 Panel Estrategia */
.estrategia {
	position: relative;
	background: #08407c;
	color: #fff;
	border-radius: 24px;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	box-shadow: var(--shadow-3);
	overflow: hidden;
	display: grid;
	gap: 1rem;
	align-content: start;
}
.estrategia__lines {
	position: absolute;
	top: -20%; right: -5%;
	display: flex;
	gap: 1.25rem;
	transform: rotate(18deg);
	pointer-events: none;
}
.estrategia__lines span {
	display: block;
	width: 1px;
	height: 200%;
	background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .28), transparent);
}
.estrategia__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
}
.estrategia__label strong {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.estrategia__label span { font-size: 0.9375rem; color: rgb(255 255 255 / .72); }
.estrategia__text {
	position: relative;
	z-index: 1;
	max-width: 68ch;
	font-size: clamp(1rem, .96rem + .25vw, 1.0938rem);
	line-height: 1.65;
	color: rgb(255 255 255 / .86);
}

/* El sticky va DESPUÉS de la regla base de .estrategia a propósito: una
   media query no suma especificidad, así que `position: relative` de §9.3
   pisaba a `position: sticky` sólo por orden de aparición. Ese es el modo de
   falla silencioso: el panel simplemente no se pega y no hay ningún error. */
@media (min-width: 1060px) {
	.servicios__layout {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.75fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: start;   /* sin esto el ítem se estira y el sticky no tiene recorrido */
	}
	/* 6.5rem = 104px, calculado contra el header scrolleado (4.25rem / 68px):
	   quedan ~36px de aire. Si cambia la altura del header, cambiar esto. */
	.estrategia { position: sticky; top: 6.5rem; }
}

/* 9.4 / 9.5 Grilla y service card */
.servicios__cards { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .servicios__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.service {
	padding: clamp(1.6rem, 2.5vw, 2.15rem);
	display: grid;
	align-content: start;
	gap: 1rem;
	overflow: hidden;
	background: #fff;
}
.service::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #08407c 30%, #396696 70%, transparent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .65s var(--ease-out-expo);
}
.service:hover::after { transform: scaleX(1); }
.service__title {
	font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
	letter-spacing: -0.03em;
	color: var(--st-text);
}
.service:hover .k-underline::after { width: 100%; }
.service__body { font-size: 0.9375rem; line-height: 1.65; color: var(--st-text-muted); }
.service__list {
	display: grid;
	gap: .55rem;
	margin-top: .35rem;
	padding-top: 1.1rem;
	border-top: 1px solid #d6dbe2;
}
.service__list li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--st-text);
	transition: transform .5s var(--ease-out-expo);
}
.service:hover .service__list li { transform: translateX(2px); }
.service__tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.125rem; height: 1.125rem;
	border-radius: 999px;
	background: #eef4fb;
	color: #08407c;
	transition: background-color .4s var(--ease-out-soft), color .4s var(--ease-out-soft);
}
.service__tick svg { width: 10px; height: 10px; }
.service:hover .service__tick { background: #08407c; color: #fff; }

/* =============================================================================
   §10 PROCESO
   ============================================================================= */
.proceso { background: #ffffff; }
.proceso__stage { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.proceso .k-head__title { max-width: 14ch; }
.proceso__listwrap { position: relative; margin-top: clamp(2.75rem, 5.5vw, 4.25rem); }
.proceso__list {
	position: relative;
	display: grid;
	gap: 2.25rem;
	padding-left: 2.25rem;
}
/* Riel vertical: sólo mobile. El riel del HUD (.proceso__rail) es otro elemento. */
.proceso__vrail {
	position: absolute;
	left: .4375rem;
	top: .5rem;
	bottom: .5rem;
	width: 1px;
	background: var(--st-borde);
	overflow: hidden;
}
.proceso__vrail-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--st-accent);
	transform-origin: top center;
}
html.js .proceso__vrail-fill { transform: scaleY(0); }

.paso { position: relative; display: grid; gap: .5rem; align-content: start; }
/* El estado por defecto es el ACTIVO: sin JS los 5 pasos se ven completos, con
   la línea llena y los numerales en azul (SPEC §10.3). El estado apagado sólo
   existe cuando el motor de movimiento está vivo, por eso va gateado en html.js.
   Nunca a opacidad 0: inactivo = 35%, el copy siempre se lee. */
.paso__dot {
	position: absolute;
	left: -2.25rem;
	top: .3rem;
	width: 0.9375rem; height: 0.9375rem;
	border-radius: 50%;
	background: var(--st-accent);
	border: 1px solid var(--st-accent);
	transform: scale(1.15);
	box-shadow: 0 0 0 5px color-mix(in srgb, #08407c 14%, transparent);
	transition: background-color .45s var(--ease-out-soft), border-color .45s var(--ease-out-soft),
	            box-shadow .45s var(--ease-out-soft), transform .5s var(--ease-out-expo);
}
html.js .paso:not(.is-active) .paso__dot {
	background: #ffffff;
	border-color: var(--st-borde);
	transform: none;
	box-shadow: none;
}
.paso__num {
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--st-accent);
	transition: color .5s var(--ease-out-soft);
}
html.js .paso:not(.is-active) .paso__num { color: var(--st-borde); }
.paso__title { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); letter-spacing: -0.028em; color: var(--st-text); }
.paso__body { font-size: 0.9375rem; line-height: 1.6; color: var(--st-text-muted); max-width: 34ch; }

/* Entregable como objeto: mini-card con esquina doblada. */
.paso__entregable {
	position: relative;
	justify-self: start;
	margin-top: .5rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8rem 1.25rem .8rem .9rem;
	background: var(--st-accent-wash);
	border: 1px solid color-mix(in srgb, var(--st-accent) 22%, transparent);
	border-radius: var(--r-sm);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
	color: var(--st-accent);
	transition: background-color .45s var(--ease-out-soft), border-color .45s var(--ease-out-soft);
}
.paso__entregable::after {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 14px; height: 14px;
	background: color-mix(in srgb, var(--st-accent) 22%, #fff);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.paso__entregable span { display: grid; gap: .15rem; font-size: .8125rem; font-weight: 600; }
.paso__entregable small {
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--st-text-faint);
}
.paso__doc { flex: none; }
.paso.is-active .paso__entregable { background: #fff; border-color: var(--st-accent); }

/* Copy inactivo al 35%: nunca vacío (gateado por html.js). */
html.js .paso :is(.paso__title, .paso__body, .paso__entregable) {
	opacity: .5;
	transform: translateY(6px);
	transition: opacity .6s var(--ease-out-soft), transform .7s var(--ease-out-expo),
	            background-color .45s var(--ease-out-soft), border-color .45s var(--ease-out-soft);
}
html.js .paso.is-active :is(.paso__title, .paso__body, .paso__entregable) { opacity: 1; transform: none; }
html.js .paso.is-active .paso__body { transition-delay: .06s; }
html.js .paso.is-active .paso__entregable { transition-delay: .12s; }

/* HUD: sólo en el modo horizontal. */
.proceso__hud { display: none; }

/* ---- Desktop horizontal: sólo con .is-horizontal (lo agrega el JS) ---- */
@media (min-width: 900px) {
	.proceso.is-horizontal { padding-block: 0; overflow: clip; }
	.proceso.is-horizontal .proceso__stage {
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100svh;
		display: grid;
		/* La columna tiene que ser 100% y no auto: con auto crece hasta el
		   max-content del track y el width del HUD (que es un 100%) se resuelve
		   contra ese ancho, así que el HUD se sale del viewport. */
		grid-template-columns: 100%;
		grid-template-rows: 1fr auto;
		padding-top: 4.25rem;                     /* alto del header compacto */
	}
	.proceso.is-horizontal .proceso__track {
		display: flex;
		align-items: center;
		gap: clamp(3rem, 6vw, 6rem);
		width: max-content;
		padding-inline: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
	}
	.proceso.is-horizontal .proceso__intro { flex: none; width: clamp(18rem, 28vw, 26rem); margin: 0; }
	.proceso.is-horizontal .proceso__listwrap { flex: none; margin-top: 0; }
	.proceso.is-horizontal .proceso__list { display: flex; gap: clamp(2.5rem, 5vw, 5rem); padding: 0; }
	.proceso.is-horizontal .paso {
		flex: none;
		width: clamp(20rem, 30vw, 27rem);
		display: grid;
		align-content: start;
		gap: .9rem;
	}
	.proceso.is-horizontal :is(.paso__dot, .proceso__vrail) { display: none; }
	.proceso.is-horizontal .paso__body { max-width: none; }

	.proceso.is-horizontal .paso__num {
		display: block;
		width: max-content;
		/* El letter-spacing negativo se aplica también DESPUÉS del último dígito,
		   así que max-content queda más angosto que la tinta del glifo. Como el
		   relleno es background-clip: text, ese sobrante se quedaba sin pintar
		   (se veía como un pedacito blanco abajo a la derecha). El padding agranda
		   la caja de pintado y el margen negativo lo descuenta del layout. */
		padding-inline: .1em;
		margin-inline: -.1em;
		font-size: min(clamp(7rem, 12vw, 12rem), 24vh);
		font-weight: 900;
		line-height: .9;
		letter-spacing: -.06em;
		color: transparent;
		-webkit-text-stroke: 1.5px var(--st-borde);
		background: linear-gradient(90deg, var(--st-accent) 50%, transparent 50%);
		background-size: 200% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		transition: background-position .9s var(--ease-out-expo),
		            -webkit-text-stroke-color .5s var(--ease-out-soft);
	}
	.proceso.is-horizontal .paso.is-active .paso__num {
		background-position: 0 0;
		-webkit-text-stroke-color: var(--st-accent);
	}

	.proceso.is-horizontal .proceso__hud {
		display: grid;
		grid-template-columns: 1fr auto;
		row-gap: .9rem;
		align-items: end;
		width: min(100% - 2 * var(--gutter), calc(1240px - 2 * var(--gutter)));
		margin-inline: auto;
		padding-bottom: clamp(1.5rem, 5vh, 3rem);
	}
	.proceso__label { overflow: hidden; line-height: 1.4; }
	.proceso__label-inner, .proceso__count {
		display: inline-block;
		font-size: .6875rem;
		font-weight: 600;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--st-text-faint);
	}
	.proceso__label-inner { color: var(--st-accent); }
	.proceso__rail { grid-column: 1 / -1; height: 2px; background: var(--st-borde); overflow: hidden; }
	.proceso__rail-fill {
		display: block;
		height: 100%;
		transform: scaleX(0);
		transform-origin: left center;
		background: linear-gradient(90deg, var(--st-accent), var(--st-accent-2));
	}
}

/* Fallback si el navegador no soporta text-stroke. */
@supports not (-webkit-text-stroke: 1px #000) {
	.proceso.is-horizontal .paso__num { color: var(--st-borde); background: none; }
	.proceso.is-horizontal .paso.is-active .paso__num { color: var(--st-accent); }
}

/* =============================================================================
   §11 CASOS
   ============================================================================= */
/* Sección negra. Sin border-top: Proceso (blanco) y Casos (negro) ya no se funden. */
.casos {
	position: relative;
	overflow: hidden;
	background: var(--st-ink);
	color: #fff;
	border-top: 0;
}
.casos__glow {
	position: absolute;
	bottom: -25%; left: -10%;
	width: 55vw; height: 55vw;
	max-width: 720px; max-height: 720px;
	background: radial-gradient(circle, color-mix(in srgb, #7fb0ff 14%, transparent) 0%, transparent 65%);
	pointer-events: none;
}
.casos__inner { position: relative; z-index: 1; }
.casos .k-head__title { max-width: 14ch; color: #fff; }
.casos .k-head__lead { color: rgb(255 255 255 / .68); }

.casos__list { margin-top: clamp(2.5rem, 5vw, 3.5rem); position: relative; }
.casos__list::before,
.caso::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: rgb(255 255 255 / .12);
	transform: scaleX(var(--line, 1));
	transform-origin: left center;
}
.casos__list::before { top: 0; }
.caso { position: relative; transition: opacity .45s var(--ease-out-soft); }
.caso::after { bottom: 0; }
html.js .casos__list, html.js .caso { --line: 0; }   /* lo anima GSAP; el failsafe lo lleva a 1 */

/* Layout base (touch y <900px): apilado con imagen. */
.caso__link {
	display: grid;
	gap: .75rem;
	padding-block: clamp(1.6rem, 3vw, 2.4rem);
	color: #fff;
	position: relative;
}
.caso__media {
	margin: 0 0 .5rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: #eef1f4;                          /* los mockups vienen sin fondo */
}
.caso__media img { width: 100%; height: 100%; object-fit: contain; }
.caso__ph {
	width: 100%; height: 100%;
	display: grid;
	place-items: center;
	background: var(--st-ink-raise);
	border: 1px dashed rgb(255 255 255 / .16);
	border-radius: inherit;
}
.caso__ph-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .42);
}
.caso__sector {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #7fb0ff;
}
.caso__name {
	overflow: hidden;
	padding-bottom: .06em;                        /* máscara del reveal */
	font-size: clamp(2rem, 1.1rem + 3.6vw, 4.25rem);
	line-height: 1;
	letter-spacing: -.04em;
	color: #fff;
	text-wrap: balance;
	transition: transform .6s var(--ease-out-expo);
}
.caso__name-inner { display: inline-block; }
.caso__servicios { font-size: .875rem; line-height: 1.55; color: rgb(255 255 255 / .55); max-width: 40ch; }
.caso__link:focus-visible { box-shadow: 0 0 0 2px var(--st-ink), 0 0 0 4px #7fb0ff; }

/* Desktop con puntero fino: fila editorial sin imagen (la imagen va al preview). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.caso__link {
		grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 17rem);
		align-items: center;
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}
	.caso__media { display: none; }
	.caso__link:is(:hover, :focus-visible) .caso__name { transform: translateX(12px); }
	.casos__list:hover .caso:not(:hover),
	.casos__list:has(.caso__link:focus-visible) .caso:not(:has(.caso__link:focus-visible)) { opacity: .3; }
	html.k-cursor-case .k-cursor { opacity: 0; transition: opacity .25s var(--ease-out-soft); }
}

/* Preview flotante: lo crea el JS y lo cuelga de <body>. */
.casos-preview {
	position: fixed;
	top: 0; left: 0;
	z-index: 85;                                  /* sobre el FAB (80), bajo el header (90) */
	width: clamp(21.5rem, 33.5vw, 31rem);
	aspect-ratio: 3 / 2;
	border-radius: var(--r-lg);
	overflow: hidden;
	pointer-events: none;
	clip-path: inset(100% 0% 0% 0% round 16px);
	background: #eef1f4;                          /* mismo panel claro que .caso__media */
}
.casos-preview__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .45s var(--ease-out-soft), transform .8s cubic-bezier(.25, .46, .45, .94);
}
.casos-preview__layer.is-active { opacity: 1; transform: scale(1); }
.casos-preview__layer > * { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: #eef1f4; }
.casos-preview__pill {
	position: absolute;
	left: .9rem; bottom: .9rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	border-radius: var(--r-full);
	background: color-mix(in srgb, var(--st-ink) 72%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid rgb(255 255 255 / .35);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
}

/* =============================================================================
   §12 EQUIPO
   ============================================================================= */
.equipo { background: #eaedf0; overflow: hidden; }
.equipo .k-head__title { max-width: 20ch; }
.equipo__marquee {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: grid;
	gap: .85rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.equipo__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.equipo__track {
	display: flex;
	gap: .85rem;
	width: max-content;
	padding-block: .35rem;
	/* El gap de cierre: sin él, 16 chips dejan 15 gaps y el -25% del keyframe
	   no cae exactamente sobre el borde de la 5ª chip (salto de ~3px por vuelta). */
	padding-right: .85rem;
	will-change: transform;
	animation: equipo-run 46s linear infinite;
}
.equipo__row--2 .equipo__track { animation-duration: 54s; animation-direction: reverse; }
@keyframes equipo-run { to { transform: translate3d(-25%, 0, 0); } }
.equipo__row:hover .equipo__track,
.equipo__row:focus-within .equipo__track { animation-play-state: paused; }

.role {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* ANCHO FIJO. El keyframe del loop desplaza -25% contando con 4 copias de
	   chips idénticas: si el ancho varía según el texto, el loop salta. */
	flex: none;
	width: 16.5rem;
	min-width: 0;
	padding: 1.15rem 1.25rem;
	background: #ffffff;
	border: 1px solid #d6dbe2;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: .75rem;
	transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo),
	            border-color .4s var(--ease-out-soft), color .4s var(--ease-out-soft);
}
.role::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #08407c;
	transform: translateY(101%);
	transition: transform .55s var(--ease-out-expo);
}
.role:hover {
	color: #ffffff;
	border-color: #08407c;
	transform: translateY(-3px);
	box-shadow: var(--shadow-3);
}
.role:hover::before { transform: translateY(0); }

/* Rol y función comparten celda: al hover el rol sale hacia arriba y entra la
   función, sin que el chip cambie de tamaño. */
.role__text { display: grid; overflow: hidden; min-width: 0; flex: 1; }
.role__label,
.role__desc {
	grid-area: 1 / 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform .55s var(--ease-out-expo), opacity .4s var(--ease-out-soft);
}
.role__label { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.role__desc {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	transform: translateY(100%);
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.role:hover .role__label { transform: translateY(-100%); opacity: 0; }
	.role:hover .role__desc { transform: none; opacity: 1; }
}

/* Sin hover: las dos líneas siempre visibles. */
@media (hover: none) {
	.role__label, .role__desc { grid-area: auto; }
	.role__desc { transform: none; opacity: 1; font-size: 0.8125rem; color: var(--st-text-muted); }
	.role__text { gap: .2rem; }
}

/* =============================================================================
   §13 MODELOS
   ============================================================================= */
.modelos { background: #ffffff; }
.modelos .k-head__title { max-width: 16ch; }
.modelos__grid {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* El gap de la grilla y la columna central de la línea de tiempo tienen que
   medir lo mismo, o los tramos no caen bajo su card. 1.25rem dejaba la flecha
   ilegible, así que ambos suben a 2rem en desktop (§2.3, nota de alineación). */
@media (min-width: 860px) { .modelos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }

.modelo {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: grid;
	align-content: start;
	gap: .85rem;
}
.modelo:hover { transform: translateY(-5px); }
.modelo--feat {
	border-color: color-mix(in srgb, #08407c 30%, #d6dbe2);
	background: linear-gradient(170deg, color-mix(in srgb, #08407c 4%, #fff) 0%, #ffffff 60%);
	box-shadow: 0 10px 34px -18px color-mix(in srgb, #08407c 55%, transparent);
}
.modelo__icon {
	display: grid;
	place-items: center;
	width: 2.75rem; height: 2.75rem;
	margin-bottom: .35rem;
	border: 1px solid color-mix(in srgb, #08407c 22%, transparent);
	border-radius: 10px;
	background: #eef4fb;
	color: #08407c;
	transition: background-color .45s var(--ease-out-soft), border-color .45s var(--ease-out-soft),
	            color .45s var(--ease-out-soft);
}
.modelo__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.modelo:hover .modelo__icon { background: #08407c; border-color: #08407c; color: #fff; }
.modelo__eyebrow {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #08407c;
}
.modelo__title { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); letter-spacing: -0.03em; color: var(--st-text); }
.modelo__body { font-size: 1rem; line-height: 1.65; color: var(--st-text-muted); }
.modelo__highlight {
	margin-top: .5rem;
	padding-top: 1.1rem;
	border-top: 1px solid #d6dbe2;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--st-text);
	transition: color .4s var(--ease-out-soft);
}
.modelo:hover .modelo__highlight { color: #0f62c4; }

/* Link de conversión de cada card */
.modelo__cta {
	justify-self: start;
	margin-top: .35rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--st-accent);
	padding-bottom: .2rem;
	border-bottom: 1px solid color-mix(in srgb, var(--st-accent) 35%, transparent);
	transition: border-color .3s var(--ease-out-soft);
}
.modelo__cta span { display: inline-block; transition: transform .45s var(--ease-out-expo); }
.modelo__cta:hover { border-bottom-color: var(--st-accent); }
.modelo__cta:hover span { transform: translateX(3px); }

/* Conector vertical: reemplaza a la línea de tiempo debajo de 860px */
.modelos__connector {
	display: grid;
	justify-items: center;
	gap: .4rem;
	padding-block: .25rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--st-text-faint);
}
.modelos__connector svg {
	width: 24px; height: 48px;
	stroke: var(--st-accent);
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.modelos__timeline { display: none; }

@media (min-width: 860px) {
	.modelos__connector { display: none; }

	.modelos__timeline {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
		margin-top: clamp(1.75rem, 3vw, 2.25rem);
		align-items: start;
	}
	.modelos__track { position: relative; height: 15px; display: flex; align-items: center; }
	.modelos__milestone {
		flex: none;
		width: 15px; height: 15px;
		border-radius: 50%;
		background: var(--st-accent);
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--st-accent) 14%, transparent);
	}
	.modelos__seg { flex: 1; height: 2px; transform-origin: left center; }
	.modelos__seg--oneshot { background: var(--st-accent-2); margin-left: .5rem; }
	.modelos__seg--fee { position: absolute; inset-inline: 0; top: 50%; margin-top: -1px; background: var(--st-accent); }
	.modelos__ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
	.modelos__tick {
		width: 9px; height: 9px;
		border-radius: 50%;
		background: #ffffff;
		border: 2px solid var(--st-accent);
	}

	.modelos__join { display: grid; justify-items: center; align-content: start; position: relative; }
	.modelos__join-label {
		position: absolute;
		bottom: calc(100% + .35rem);
		white-space: nowrap;
		font-size: .6875rem;
		font-weight: 600;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--st-text-faint);
	}
	.modelos__arrow {
		width: 100%; height: 15px;
		overflow: visible;
		stroke: var(--st-accent);
		stroke-width: 1.5;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.modelos__caption { margin-top: .9rem; font-size: .8125rem; color: var(--st-text-muted); }
	.modelos__caption strong { font-weight: 600; color: var(--st-text); }
	.modelos__caption--split { display: flex; justify-content: space-between; gap: 1rem; }
}

/* =============================================================================
   §14 FAQ
   ============================================================================= */
.faq { background: #eaedf0; }

/* Layout por áreas: en mobile el aside se "disuelve" (título arriba, card de
   contacto al final); en ≥940px vuelve a ser una columna sticky. */
.faq__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	grid-template-areas: "title" "list" "contact";
}
.faq__aside { display: contents; }
.faq__title { grid-area: title; max-width: 12ch; }
.faq__list { grid-area: list; }
.faq__contact { grid-area: contact; }

@media (min-width: 940px) {
	.faq__grid {
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		grid-template-areas: "aside list";
	}
	.faq__aside {
		display: grid;
		gap: 2rem;
		align-content: start;
		grid-area: aside;
		position: sticky;
		top: 7rem;
	}
	.faq__title, .faq__contact { grid-area: auto; }
}

/* Card de contacto del aside */
.faq__contact {
	max-width: 24rem;
	padding: clamp(1.35rem, 2.4vw, 1.75rem);
	background: #ffffff;
	border: 1px solid var(--st-borde);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
	display: grid;
	gap: .6rem;
}
.faq__contact-title { font-size: 1.0625rem; letter-spacing: -0.025em; color: var(--st-text); }
.faq__contact-text { font-size: 0.9375rem; line-height: 1.6; color: var(--st-text-muted); }
.faq__contact-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.faq__contact-actions svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

.faq__list { border-top: 1px solid var(--st-borde); }
.faq__item {
	position: relative;
	border-bottom: 1px solid var(--st-borde);
	border-radius: var(--r-lg);
	transition: background-color .4s var(--ease-out-soft), box-shadow .5s var(--ease-out-expo),
	            border-color .4s var(--ease-out-soft);
}
/* Barra de acento del ítem abierto: crece de arriba hacia abajo. */
.faq__item::before {
	content: '';
	position: absolute;
	left: 0; top: 1rem; bottom: 1rem;
	width: 2px;
	border-radius: 2px;
	background: var(--st-accent);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .5s var(--ease-out-expo);
}
.faq__item.is-open {
	background: #ffffff;
	box-shadow: var(--shadow-2);
	border-bottom-color: transparent;
}
.faq__item.is-open::before { transform: scaleY(1); }
.faq__item.is-open .faq__question,
.faq__item.is-open .faq__num { color: var(--st-accent); }
.faq__q { margin: 0; }
.faq__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: clamp(1.15rem, 2vw, 1.5rem) clamp(.5rem, 1.5vw, 1.25rem);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: var(--st-text);
	font-size: clamp(1.0313rem, .98rem + .3vw, 1.1875rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	line-height: 1.35;
	transition: color .3s var(--ease-out-soft);
}
.faq__trigger:hover { color: #08407c; }
.faq__num {
	flex: none;
	width: 2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--st-text-faint);
	transition: color .3s var(--ease-out-soft);
}
.faq__question { flex: 1; transition: color .3s var(--ease-out-soft); }

/* Foco: sólo teclado y dibujado hacia adentro. El anillo global de §1.13 se
   dibuja hacia afuera y desbordaba el ancho de la lista. */
.faq__trigger:focus { outline: none; box-shadow: none; }
.faq__trigger:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--st-accent);
	border-radius: var(--r-lg);
}
.faq__chev {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.375rem; height: 2.375rem;
	border: 1px solid #808a9a;
	border-radius: 50%;
	background: #ffffff;
	color: var(--st-text);
	transition: background-color .4s var(--ease-out-soft), border-color .4s var(--ease-out-soft),
	            color .4s var(--ease-out-soft);
}
.faq__trigger:hover .faq__chev { border-color: #08407c; }
.faq__chev svg {
	width: 14px; height: 14px;
	transition: transform .5s var(--ease-out-expo);
}
.faq__item.is-open .faq__chev { background: #08407c; border-color: #08407c; color: #fff; }
.faq__item.is-open .faq__chev svg { transform: rotate(180deg); }

.faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s var(--ease-out-expo);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panelInner {
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .4s var(--ease-out-soft), transform .5s var(--ease-out-expo);
}
.faq__item.is-open .faq__panelInner { opacity: 1; transform: none; }
.faq__answer {
	padding: 0 clamp(.5rem, 1.5vw, 1.25rem) clamp(1.35rem, 2.2vw, 1.75rem);
	/* La respuesta se alinea con el texto de la pregunta, no con el número:
	   padding lateral del trigger + ancho del número + gap del trigger. */
	padding-left: calc(clamp(.5rem, 1.5vw, 1.25rem) + 2rem + 1.5rem);
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.68;
	color: var(--st-text-muted);
}

/* =============================================================================
   §15 CONTACTO
   ============================================================================= */
.contacto { background: #ffffff; }
.contacto__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .contacto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contacto .k-head__title { max-width: 13ch; }

.contacto__steps { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.contacto__steps li {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding-top: 1.25rem;
	border-top: 1px solid #d6dbe2;
}
/* Marca del paso: el numeral y el disco de tilde comparten la misma celda,
   así el swap no mueve el texto de al lado. */
.contacto__step-mark {
	display: grid;
	flex: none;
	width: 1.375rem;
	padding-top: .2rem;
}
.contacto__step-mark > * { grid-area: 1 / 1; }
.contacto__num {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #08407c;
	transition: opacity .3s var(--ease-out-soft);
}
.contacto__step.is-done .contacto__num { opacity: 0; }
.contacto__step-check {
	width: 1.375rem; height: 1.375rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--st-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-accent) 12%, transparent);
	transform: scale(0);
}

/* Etiqueta de estado del paso */
.contacto__step-tag {
	display: inline-block;
	margin-left: .5rem;
	vertical-align: middle;
	padding: .2rem .5rem;
	border-radius: var(--r-full);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--st-accent-wash);
	color: var(--st-accent);
}
.contacto__step-tag:empty { display: none; }
.contacto__step { transition: opacity .4s var(--ease-out-soft); }
.contacto__steps.has-progress .contacto__step:not(.is-done):not(.is-next):not(.is-current) { opacity: .55; }

/* Alternativa de WhatsApp bajo el botón de envío */
.k-form__alt { margin-top: .9rem; text-align: center; font-size: .875rem; color: var(--st-text-muted); }
.k-form__alt a {
	font-weight: 600;
	color: var(--st-accent);
	border-bottom: 1px solid color-mix(in srgb, var(--st-accent) 35%, transparent);
	transition: border-color .3s var(--ease-out-soft);
}
.k-form__alt a:hover { border-bottom-color: var(--st-accent); }
.contacto__stepTitle { font-size: 1.0625rem; letter-spacing: -0.025em; color: #08407c; }
.contacto__stepText { margin-top: .3rem; font-size: 0.9375rem; line-height: 1.6; color: var(--st-text-muted); }

/* 15.3 Card del formulario */
.k-formCard {
	background: #ffffff;
	border: 1px solid #d6dbe2;
	border-radius: 24px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--shadow-2);
}
.k-formCard__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #d6dbe2;
}
.k-formCard__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Chip del modelo elegido (§2.5). Entra por JS; sin JS nunca deja de estar
   [hidden], así que el estado inicial oculto no depende de html.js. */
.k-form__modelo {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .5rem .3rem .65rem;
	border-radius: 999px;
	background: var(--st-accent-wash);
	font-size: 12px;
	font-weight: 500;
	color: var(--st-accent);
	opacity: 0;
	transform: scale(.9);
	transition: opacity .45s var(--ease-out-soft), transform .45s var(--ease-out-expo);
}
.k-form__modelo[hidden] { display: none; }
.k-form__modelo.is-in { opacity: 1; transform: none; }
.k-form__modelo-x {
	display: grid;
	place-items: center;
	width: 1rem; height: 1rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	transition: background-color .3s var(--ease-out-soft);
}
.k-form__modelo-x:hover { background: color-mix(in srgb, var(--st-accent) 15%, transparent); }
.k-form__modelo-x svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* Riel de progreso: reemplaza visualmente al border-bottom de la cabecera. */
.k-form__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.k-form__progress-fill {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--st-accent), var(--st-accent-2));
}
.k-formCard__title { font-size: 1.0625rem; letter-spacing: -0.025em; color: var(--st-text); }
.k-formCard__badge {
	flex: none;
	padding: .3rem .65rem;
	border-radius: 999px;
	background: color-mix(in srgb, #08407c 8%, transparent);
	border: 1px solid color-mix(in srgb, #08407c 22%, transparent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #08407c;
}
.k-form { display: grid; gap: 1.1rem; }
.k-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .k-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.k-field { position: relative; }
.k-field label {
	position: absolute;
	top: .92rem; left: .92rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--st-text-muted);
	pointer-events: none;
	transform-origin: left top;
	transition: transform .28s var(--ease-out-expo), color .28s var(--ease-out-soft);
}
.k-field label i { font-style: normal; color: #08407c; }
.k-field input,
.k-field select,
.k-field textarea {
	width: 100%;
	padding: 1.45rem .9rem .5rem;
	background: #fafafa;
	border: 1px solid #808a9a;
	border-radius: 6px;
	font-size: .9375rem;
	color: #10131a;
	transition: border-color .3s var(--ease-out-soft), box-shadow .3s var(--ease-out-soft),
	            background-color .3s var(--ease-out-soft);
}
.k-field textarea {
	padding-top: 1.6rem;
	resize: vertical;
	min-height: 7.5rem;
	line-height: 1.55;
}
.k-field input:hover, .k-field select:hover, .k-field textarea:hover { border-color: #396696; }
.k-field input:focus, .k-field select:focus, .k-field textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: #08407c;
	box-shadow: 0 0 0 4px color-mix(in srgb, #08407c 13%, transparent),
	            0 2px 10px -4px color-mix(in srgb, #08407c 40%, transparent);
}
.k-field:has(input:focus) label,
.k-field:has(textarea:focus) label,
.k-field:has(select:focus) label { color: #08407c; }
.k-field:has(input:not(:placeholder-shown)) label,
.k-field:has(textarea:not(:placeholder-shown)) label,
.k-field:has(input:focus) label,
.k-field:has(textarea:focus) label,
.k-field--always label { transform: translateY(-0.62rem) scale(0.74); }
@supports not selector(:has(*)) {
	.k-field label { transform: translateY(-0.62rem) scale(0.74); }
}

.k-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
}
.k-field__chev {
	position: absolute;
	right: .9rem; top: 58%;
	transform: translateY(-50%);
	width: 14px; height: 14px;
	pointer-events: none;
	color: var(--st-text-muted);
}
.k-field.is-error input,
.k-field.is-error select,
.k-field.is-error textarea { border-color: #b3261e; background: #fef6f5; }
.k-field__err {
	margin-top: .45rem;
	font-size: 12px;
	font-weight: 500;
	color: #b3261e;
}
.k-field__err:empty { display: none; }

.k-form__submit { width: 100%; margin-top: .35rem; background: #08407c; }
.k-form__submit:hover {
	background: linear-gradient(100deg, #062f5c 0%, #08407c 55%, #17569b 100%);
	transform: translateY(-2px) scale(1.015);
}
.k-form__spinner { display: none; }
.k-form__submit[data-state="sending"] { pointer-events: none; }
.k-form__submit[data-state="sending"] .k-form__spinner {
	display: block;
	width: 0.95rem; height: 0.95rem;
	border: 2px solid rgb(255 255 255 / .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: k-spin .7s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-form__submit[data-state="done"] { background: #157347; }
.k-form__note {
	font-size: 12px;
	line-height: 1.5;
	color: var(--st-text-faint);
	text-align: center;
}
.k-form__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.k-form__note a:hover { color: var(--st-text-muted); }

.k-form__status {
	font-size: 0.875rem;
	font-weight: 500;
	color: #08407c;
	text-align: center;
}
.k-form__status:empty { display: none; }
.k-form__status.is-error { color: #b3261e; }

/* =============================================================================
   §16 FOOTER
   ============================================================================= */
.k-footer {
	position: relative;
	background: #0d0f14;
	color: rgb(255 255 255 / .72);
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.k-footer__inner { position: relative; z-index: 1; }
.k-footer__top {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 860px) {
	.k-footer__top { grid-template-columns: minmax(240px, 1fr) 2fr; align-items: start; }
}
.k-footer__logo { display: inline-flex; color: #ffffff; }
.k-footer__logo .k-lockup__mark { width: 1.8rem; height: 2.25rem; }
.k-footer__logo .k-lockup__word > span { color: rgb(255 255 255 / .62); }
.k-footer__tagline {
	margin-top: 1.1rem;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #7fb0ff;
}
.k-footer__claim {
	margin-top: .6rem;
	max-width: 22ch;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgb(255 255 255 / .6);
}
.k-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(2rem, 4vw, 3rem);
}
.k-footer__colTitle {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .45);
	margin-bottom: 1.1rem;
}
.k-footer__list { display: grid; gap: .7rem; }
.k-footer__list a {
	display: inline-block;
	font-size: 0.9375rem;
	color: rgb(255 255 255 / .72);
	transition: color .3s var(--ease-out-soft), transform .35s var(--ease-out-expo);
}
.k-footer__list a:hover { color: #ffffff; transform: translateX(3px); }
.k-footer__list a.has-icon { display: inline-flex; align-items: center; gap: .5rem; }
.k-footer__list svg { width: 17px; height: 17px; flex: none; }
.k-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgb(255 255 255 / .1);
	font-size: 0.8125rem;
	color: rgb(255 255 255 / .45);
}
.k-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.k-footer__legal a { transition: color .3s var(--ease-out-soft); }
.k-footer__legal a:hover { color: #ffffff; }

/* 2.8 Footer reveal.
   La clase k-footer-reveal llega desde el servidor (body_class, inc/tecnico.php) para
   que el footer quede fijo desde el primer cuadro: cuando la agregaba el JS después de
   cargar, el paso a position:fixed contaba como layout shift (CLS 0.46 en desktop).
   El JS la sigue ajustando (la saca si el footer no entra en pantalla) y fija el
   margin-bottom del main. Sólo con JS (html.js) y sólo desde 900px. */
@media (min-width: 900px) {
	html.js body.k-footer-reveal .k-footer {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 0;
	}
	html.js body.k-footer-reveal .k-main {
		position: relative;
		z-index: 1;
		background: #ffffff;
		/* Sin sombra inferior: la sección de contacto corta plana contra el footer.
		   (§2.8 la pedía; se quitó por decisión de diseño.) */
	}
}
/* =============================================================================
   §17 FAB DE WHATSAPP
   ============================================================================= */
.k-wa {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 80;
	display: grid;
	place-items: center;
	width: 3.5rem; height: 3.5rem;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 16px -4px rgb(37 211 102 / .5), 0 14px 40px -18px rgb(20 22 28 / .5);
	transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo);
}
.k-wa:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 10px 24px -4px rgb(37 211 102 / .55), 0 22px 56px -20px rgb(20 22 28 / .55);
}
.k-wa svg { width: 26px; height: 26px; fill: currentColor; position: relative; z-index: 1; }
.k-wa i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25d366;
	opacity: .55;
	animation: k-wa-pulse 2.8s var(--ease-out-soft) infinite;
}
@keyframes k-wa-pulse {
	0%   { transform: scale(1);    opacity: .5; }
	70%  { transform: scale(1.55); opacity: 0;  }
	100% { transform: scale(1.55); opacity: 0;  }
}

/* =============================================================================
   §2.9 prefers-reduced-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.js [data-reveal] { opacity: 1 !important; transform: none !important; }
	.js .posic[data-blackwipe] { clip-path: none !important; }
	.js .hero__rule { transform: none !important; }
	.js .k-fillw { opacity: 1 !important; }
	.js .proceso__railFill { transform: none !important; }
	.js .step__title, .js .step__text, .js .step__deliv { opacity: 1 !important; transform: none !important; }
	.step__dot { background: #08407c !important; border-color: #08407c !important; }
	.step__num { color: #08407c !important; }
	.step__deliv { border-bottom-color: #08407c !important; }
	.hero__lineWrap > span { transform: none !important; }
	.hero__videoTag i { animation: none; }
	.k-wa i { opacity: 0; animation: none; }
	.k-cursor { display: none !important; }
	.adn__disc svg path, .adn__arrowH path, .adn__arrowV path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

	.marcas__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
	}
	.marcas__viewport { -webkit-mask-image: none; mask-image: none; }
	/* El aria-hidden vive en cada logo, no en la pista: sin esto la copia que
	   cierra el loop se apilaba abajo y duplicaba la pared de marcas. */
	.marcas__track > [aria-hidden="true"] { display: none; }
	.equipo__track { animation: none; flex-wrap: wrap; width: 100%; }
	.equipo__row { -webkit-mask-image: none; mask-image: none; }
	.equipo__marquee { width: auto; margin-inline: 0; }
	.equipo__track > [aria-hidden="true"] { display: none; }
}

/* =============================================================================
   Ajustes 2026-09
   ============================================================================= */

/* §7 Unidades con imagen de fondo (adjunto por unidad, vía --unit-bg).
   .unit:hover usa el shorthand `background`, por eso el hover repone la imagen. */
.unit.unit--img,
.unit.unit--img:hover {
	background-color: #0d0f14;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* La imagen y el overlay se pintan también debajo del borde: sin esto quedaba
	   un filo claro sin el efecto alrededor de la card. */
	background-origin: border-box;
	background-clip: border-box;
}
.unit.unit--img {
	/* Mismo tamaño que la card original: la imagen cubre y se recorta centrada. */
	overflow: hidden;
	border-color: rgb(255 255 255 / .14);
	background-image: linear-gradient(180deg, rgb(13 15 20 / .55) 0%, rgb(13 15 20 / .88) 100%), var(--unit-bg);
}
/* Hover: sin el glow azul ni el borde azul; sólo se aclara el overlay
   (la imagen gana brillo). */
.unit.unit--img:hover {
	border-color: rgb(255 255 255 / .22);
	background-image: linear-gradient(180deg, rgb(13 15 20 / .2) 0%, rgb(13 15 20 / .65) 100%), var(--unit-bg);
}
.unit.unit--img::after { display: none; }
.unit.unit--img,
.unit.unit--img:hover { transition: transform .5s var(--ease-out-expo), border-color .45s var(--ease-out-soft), background-image .45s var(--ease-out-soft); }
.unit.unit--img p { color: rgb(255 255 255 / .78); }

/* §4 Hero — la nota respira respecto de los CTAs en mobile. */
@media (max-width: 979px) {
	.hero__note { margin-top: .85rem; }
}

/* §5 Marcas — etiqueta centrada en mobile. */
@media (max-width: 859px) {
	.marcas__label { text-align: center; margin-inline: auto; max-width: none; }
}

/* §6 Dolores — el mazo también corre en mobile: se compacta para entrar en pantalla. */
@media (max-width: 899px) {
	.dolores.is-stacked { padding-block: calc(4rem + 1rem) 1rem; }
	.dolores.is-stacked .dolor__card { padding: 1.35rem 1.25rem; gap: .6rem; }
	.dolores.is-stacked .dolor__num { font-size: 1.75rem; }
	.dolores.is-stacked .dolor__sintoma { margin-top: .25rem; padding-top: .8rem; font-size: .875rem; }
}

/* §12 Equipo — estado activo (tap en touch = hover en desktop): el rol sale y
   entra su función en blanco sobre el azul. */
.role.is-on { color: #ffffff; border-color: #08407c; }
.role.is-on::before { transform: translateY(0); }
.role.is-on .role__label { transform: translateY(-100%); opacity: 0; }
.role.is-on .role__desc { transform: none; opacity: 1; color: #ffffff; }
@media (hover: none) {
	.role__label, .role__desc { grid-area: 1 / 1; }
	.role__text { gap: 0; }
	.role__desc { transform: translateY(100%); opacity: 0; font-size: .875rem; color: inherit; }
	/* El :hover "pegado" de los navegadores táctiles no debe pintar el chip. */
	.role:hover:not(.is-on) { color: inherit; border-color: #d6dbe2; transform: none; box-shadow: none; }
	.role:hover:not(.is-on)::before { transform: translateY(101%); }
}

/* §16 Footer centrado — sólo mobile. Desde 860px rige la grilla de arriba
   (logo a la izquierda, columnas a la derecha, legales en una fila). */
@media (max-width: 859px) {
.k-footer .k-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	gap: clamp(2rem, 4vw, 3rem);
}
.k-footer .k-footer__top > div { display: flex; flex-direction: column; align-items: center; }
.k-footer .k-footer__cols { justify-content: center; justify-items: center; text-align: center; width: 100%; max-width: 48rem; }
.k-footer .k-footer__list { display: grid; justify-items: center; }
.k-footer .k-footer__list .has-icon { justify-content: center; }
.k-footer .k-footer__legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .75rem;
}
.k-footer .k-footer__legal ul { justify-content: center; }
}

/* §14 FAQ: el número lo pone CSS. Se ve igual, pero ya no forma parte del texto del título. */
.faq__list { counter-reset: faq; }
.faq__item { counter-increment: faq; }
.faq__num::before { content: counter(faq, decimal-leading-zero); }

/* §16 Footer: ubicación. */
.k-footer__place {
	margin-top: .9rem;
	font-size: 0.8125rem;
	letter-spacing: .08em;
	color: rgb(255 255 255 / .45);
}

/* §15 Formulario: campo trampa antispam, fuera de la vista y del foco. */
.k-form__hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* §10 Proceso: contraste mínimo de los pasos inactivos (WCAG AA). El título es texto
   grande (3:1 con opacidad .5); cuerpo y entregable necesitan 4.5:1. */
html.js .paso:not(.is-active) :is(.paso__body, .paso__entregable) { opacity: .85; }
.paso__entregable small { color: var(--st-text-muted); }
/* En mobile el título del paso mide ~18px: no es "texto grande", necesita 4.5:1. */
@media (max-width: 899px) {
	html.js .paso:not(.is-active) .paso__title { opacity: .85; }
}

/* §11 Casos — flecha de link externo junto al nombre. */
.caso__arrow {
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-left: .22em;
	vertical-align: .42em;
	opacity: .45;
	transition: opacity .4s var(--ease-out-soft), transform .6s var(--ease-out-expo);
}
.caso__link:is(:hover, :focus-visible) .caso__arrow { opacity: 1; transform: translate(.08em, -.08em); }