/* ==========================================================================
   CumpleTech · Estilos de los widgets de Elementor
   Se carga solo en páginas con Elementor. Cada widget añade su bloque aquí.
   ========================================================================== */

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

.ct-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	/* Los halos y las guías se salen del borde a propósito: se recortan acá
	   para que nunca ensanchen el documento ni provoquen scroll horizontal.
	   `clip` en vez de `hidden` para no crear un contenedor de scroll. */
	overflow-x: clip;
}

.ct-hero--image-left .ct-hero__content {
	order: 2;
}

.ct-hero--image-left .ct-hero__media {
	order: 1;
}

.ct-hero--centered {
	grid-template-columns: 1fr;
	max-width: 1040px;
	margin-inline: auto;
	text-align: center;
}

.ct-hero--centered .ct-hero__actions {
	justify-content: center;
}

/* --- Hero apilado: texto centrado y el dashboard entrando por abajo ------ */

.ct-hero--stacked {
	position: relative;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 56px);
	text-align: center;
}

.ct-hero--stacked .ct-hero__content {
	max-width: min(1040px, 100%);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.ct-hero--stacked .ct-hero__subtitle {
	margin-inline: auto;
}

.ct-hero--stacked .ct-hero__actions {
	justify-content: center;
}

/* La imagen se recorta por abajo: sugiere que el producto continúa. */
.ct-hero--stacked .ct-hero__media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(1060px, 100%);
	/* Elementor anula el margen de todo <figure> dentro de un widget con
	   `.elementor .elementor-widget:not(...) figure { margin: 0 }`, y esa regla
	   gana por especificidad. Por eso el centrado se resuelve con la alineación
	   de grid, que ese reset no toca; el margen queda solo de respaldo para
	   contextos que no sean grid. */
	justify-self: center;
	margin-inline: auto;
	max-height: 480px;
	overflow: hidden;
	border-radius: var(--ct-r-lg) var(--ct-r-lg) 0 0;
	border: 1px solid var(--ct-line);
	border-bottom: 0;
	box-shadow: 0 -2px 60px rgba(0, 34, 116, 0.13);
	background: var(--ct-card);
}

.ct-hero--stacked .ct-hero__media::before,
.ct-hero--stacked .ct-hero__media::after {
	content: none;
}

.ct-hero--stacked .ct-hero__image {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ct-hero--stacked .ct-hero__media figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 26px 0 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ct-card) 70%);
}

/* Guías punteadas: dos verticales que enmarcan el contenido. Se mantienen
   dentro del ancho disponible, nunca lo exceden. */
.ct-hero--guides::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1100px, 100%);
	border-left: 1px dashed var(--ct-line);
	border-right: 1px dashed var(--ct-line);
	pointer-events: none;
	z-index: 0;
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
}

.ct-hero__proof {
	margin: var(--ct-space-5) 0 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-hero--stacked .ct-hero__proof,
.ct-hero--centered .ct-hero__proof {
	text-align: center;
}

@media (max-width: 860px) {
	.ct-hero--stacked .ct-hero__media {
		max-height: 320px;
	}
}

.ct-hero__title {
	font-size: clamp(2.1rem, 4.2vw, var(--ct-fs-5xl));
	margin-bottom: var(--ct-space-4);
}

.ct-hero__subtitle {
	font-size: var(--ct-fs-lg);
	line-height: var(--ct-lh-snug);
	color: var(--ct-body);
	margin-bottom: var(--ct-space-5);
	max-width: 56ch;
}

.ct-hero--centered .ct-hero__subtitle {
	margin-inline: auto;
}

.ct-hero__media {
	margin: 0;
	position: relative;
}

/* Halo cálido detrás de la captura: evita que el hero sea un bloque azul. */
.ct-hero__media::before {
	content: "";
	position: absolute;
	top: -12%;
	right: -14%;
	width: 62%;
	height: 62%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 106, 31, 0.34) 0%, rgba(255, 106, 31, 0) 70%);
	filter: blur(6px);
	pointer-events: none;
}

.ct-hero__media::after {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -16%;
	width: 46%;
	height: 46%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 180, 252, 0.26) 0%, rgba(0, 180, 252, 0) 70%);
	pointer-events: none;
}

.ct-hero__image {
	position: relative;
	z-index: 1;
	width: 100%;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	box-shadow: var(--ct-shadow-lg);
}

.ct-hero__media figcaption {
	margin-top: var(--ct-space-3);
	text-align: center;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

@media (max-width: 860px) {
	.ct-hero {
		grid-template-columns: 1fr;
	}

	.ct-hero--image-left .ct-hero__content {
		order: 1;
	}

	.ct-hero--image-left .ct-hero__media {
		order: 2;
	}
}

/* --- Barra de confianza ------------------------------------------------- */

.ct-trust {
	text-align: center;
}

.ct-trust__title {
	margin-bottom: var(--ct-space-4);
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ct-muted);
}

.ct-trust__title--logos {
	margin-top: var(--ct-space-7);
}

/* --- Marquesina de normativas ------------------------------------------- */

.ct-marquee {
	--ct-marquee-duration: 45s;
	overflow: hidden;
	/* Se desvanece en los extremos: el texto entra y sale sin cortarse en seco. */
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.ct-marquee__track {
	display: flex;
	width: max-content;
	animation: ct-marquee-scroll var(--ct-marquee-duration) linear infinite;
	will-change: transform;
}

.ct-marquee--right .ct-marquee__track {
	animation-direction: reverse;
}

.ct-marquee--pausable:hover .ct-marquee__track {
	animation-play-state: paused;
}

.ct-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
}

.ct-marquee__item {
	font-weight: 600;
	color: var(--ct-navy);
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.ct-marquee__sep {
	color: var(--ct-orange);
	padding-inline: 0.75em;
	font-weight: 700;
}

.ct-marquee--sm .ct-marquee__item,
.ct-marquee--sm .ct-marquee__sep {
	font-size: var(--ct-fs-sm);
}

.ct-marquee--md .ct-marquee__item,
.ct-marquee--md .ct-marquee__sep {
	font-size: var(--ct-fs-lg);
}

.ct-marquee--lg .ct-marquee__item,
.ct-marquee--lg .ct-marquee__sep {
	font-size: clamp(1.35rem, 2.6vw, var(--ct-fs-2xl));
}

/* La pista mide dos grupos idénticos: desplazar la mitad deja la copia
   exactamente donde estaba el original, sin salto visible. */
@keyframes ct-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Sin animación, la marquesina queda como una línea de texto centrada. */
@media (prefers-reduced-motion: reduce) {
	.ct-marquee {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.ct-marquee__track {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.ct-marquee__group:last-child {
		display: none;
	}

	.ct-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.ct-trust__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 56px);
}

.ct-trust__logo img {
	max-height: 46px;
	width: auto;
	opacity: 0.9;
	transition: filter var(--ct-t-base), opacity var(--ct-t-base);
}

.ct-trust__logos.is-grayscale .ct-trust__logo img {
	filter: grayscale(1);
	opacity: 0.6;
}

.ct-trust__logos.is-grayscale .ct-trust__logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Grilla de módulos -------------------------------------------------- */

.ct-modules__header {
	margin-bottom: var(--ct-space-6);
}

.ct-modules__header--center {
	text-align: center;
}

.ct-modules__header--center .ct-lead {
	max-width: 62ch;
	margin-inline: auto;
}

.ct-modules__title {
	margin-bottom: var(--ct-space-3);
}

.ct-module-card {
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-3);
	color: inherit;
}

.ct-module-card__name {
	margin: 0;
	font-size: var(--ct-fs-base);
	font-weight: 700;
	color: var(--ct-ink);
}

.ct-module-card__text {
	margin: 0;
	font-size: var(--ct-fs-sm);
	line-height: var(--ct-lh-snug);
	color: var(--ct-muted);
}

/* Variante compacta: icono y texto centrados. */
.ct-modules__grid--compact .ct-module-card {
	align-items: center;
	text-align: center;
}

/* Los iconos alternan entre navy, cyan y naranjo para que la grilla no se lea
   como un bloque monocromo. La alternancia se apaga con la variante --mono,
   que es la que usa el control de color del panel de Elementor: así el ajuste
   manual no tiene que pelear especificidad contra estas reglas. */
.ct-modules__grid:not(.ct-modules__grid--mono) .ct-module-card:nth-child(3n + 2) .ct-icon-box {
	background: var(--ct-blue-100);
	color: var(--ct-blue-600);
}

.ct-modules__grid:not(.ct-modules__grid--mono) .ct-module-card:nth-child(3n + 3) .ct-icon-box {
	background: var(--ct-orange-100);
	color: var(--ct-orange-600);
}

/* En tarjetas enlazadas, el acento naranjo marca el hover. */
a.ct-module-card:hover .ct-module-card__name {
	color: var(--ct-navy);
}

.ct-modules__grid:not(.ct-modules__grid--mono) a.ct-module-card:hover .ct-icon-box {
	background: var(--ct-grad-warm);
	color: #fff;
	box-shadow: var(--ct-shadow-accent);
}

.ct-modules__note {
	margin-top: var(--ct-space-5);
	text-align: center;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

/* --- Bloque de módulo --------------------------------------------------- */

.ct-module {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	scroll-margin-top: calc(var(--ct-header-real, var(--ct-header-h)) + 24px);
}

.ct-module--tint {
	background: var(--ct-bg);
	border-radius: var(--ct-r-lg);
	padding: clamp(24px, 4vw, 48px);
}

.ct-module--media-left .ct-module__content {
	order: 2;
}

.ct-module--media-left .ct-module__media {
	order: 1;
}

.ct-module__icon {
	margin-bottom: var(--ct-space-4);
	background: var(--ct-grad-warm);
	color: #fff;
	box-shadow: var(--ct-shadow-accent);
}

.ct-module__title {
	font-size: clamp(1.5rem, 2.6vw, var(--ct-fs-2xl));
	margin-bottom: var(--ct-space-3);
}

.ct-module__text {
	font-size: var(--ct-fs-md);
	margin-bottom: var(--ct-space-5);
}

.ct-module__list-title {
	margin-bottom: var(--ct-space-3);
}

.ct-module__list {
	margin: 0 0 var(--ct-space-4);
	padding: 0;
	list-style: none;
}

.ct-module__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--ct-space-3);
	margin-bottom: var(--ct-space-3);
	font-size: var(--ct-fs-base);
}

.ct-module__list svg {
	flex: none;
	margin-top: 4px;
	color: var(--ct-orange);
}

.ct-module__legal {
	background: var(--ct-navy-50);
	border-color: var(--ct-navy-100);
	font-size: var(--ct-fs-xs);
	white-space: normal;
}

.ct-module__legal svg {
	flex: none;
	color: var(--ct-navy);
}

.ct-module__media {
	margin: 0;
}

.ct-module__image {
	width: 100%;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	box-shadow: var(--ct-shadow-md);
}

.ct-module__media figcaption {
	margin-top: var(--ct-space-3);
	text-align: center;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

@media (max-width: 860px) {
	.ct-module {
		grid-template-columns: 1fr;
	}

	.ct-module--media-left .ct-module__content {
		order: 1;
	}

	.ct-module--media-left .ct-module__media {
		order: 2;
	}
}

/* --- Beneficios ---------------------------------------------------------
   Es la única sección con tarjetas de color: rompe la seguidilla de grillas
   blancas del Home y da respiro antes de la prueba social.
   ------------------------------------------------------------------------ */

.ct-benefits__header {
	margin-bottom: var(--ct-space-6);
}

.ct-benefits__header--center {
	text-align: center;
}

.ct-benefits__header--center .ct-lead {
	max-width: 62ch;
	margin-inline: auto;
}

.ct-benefits__title {
	margin-bottom: var(--ct-space-3);
}

.ct-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ct-space-5);
}

/* Los tonos no pintan directamente: definen variables en la tarjeta. El color
   se aplica en reglas de una sola clase, así los controles de Elementor
   —que valen (0,2,0)— siempre pueden sobrescribirlas. */
.ct-benefit {
	--ct-benefit-bg: var(--ct-bg);
	--ct-benefit-title: var(--ct-ink);
	--ct-benefit-text: var(--ct-body);
	--ct-benefit-number: var(--ct-navy);
	--ct-benefit-icon-bg: var(--ct-navy-100);
	--ct-benefit-icon-color: var(--ct-navy);
	--ct-benefit-border: transparent;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ct-space-3);
	padding: var(--ct-space-6) var(--ct-space-5) var(--ct-space-5);
	border: 1px solid var(--ct-benefit-border);
	border-radius: var(--ct-r-lg);
	background: var(--ct-benefit-bg);
	overflow: hidden;
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base);
}

.ct-benefit:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-md);
}

.ct-benefit__number {
	position: absolute;
	top: 14px;
	right: 20px;
	font-family: var(--ct-font-display);
	font-optical-sizing: auto;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.16;
	pointer-events: none;
	color: var(--ct-benefit-number);
}

.ct-benefit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: var(--ct-r-md);
	margin-bottom: var(--ct-space-2);
	background: var(--ct-benefit-icon-bg);
	color: var(--ct-benefit-icon-color);
}

.ct-benefit__icon svg {
	width: 23px;
	height: 23px;
}

.ct-benefit__icon i {
	font-size: 21px;
}

.ct-benefit__name {
	margin: 0;
	font-size: var(--ct-fs-lg);
	font-weight: 700;
	color: var(--ct-benefit-title);
}

.ct-benefit__text {
	margin: 0;
	font-size: var(--ct-fs-sm);
	line-height: var(--ct-lh-base);
	color: var(--ct-benefit-text);
}

/* Tono 1: fondos alternados en los tres colores de marca. */
.ct-benefits--tinted .ct-benefit:nth-child(3n + 1) {
	--ct-benefit-bg: var(--ct-navy-100);
	--ct-benefit-icon-bg: var(--ct-navy);
	--ct-benefit-icon-color: #fff;
	--ct-benefit-number: var(--ct-navy);
}

.ct-benefits--tinted .ct-benefit:nth-child(3n + 2) {
	--ct-benefit-bg: var(--ct-blue-100);
	--ct-benefit-icon-bg: var(--ct-blue-600);
	--ct-benefit-icon-color: #fff;
	--ct-benefit-number: var(--ct-blue-600);
}

.ct-benefits--tinted .ct-benefit:nth-child(3n + 3) {
	--ct-benefit-bg: var(--ct-orange-100);
	--ct-benefit-icon-bg: var(--ct-orange);
	--ct-benefit-icon-color: #fff;
	--ct-benefit-number: var(--ct-orange-600);
}

/* Tono 2: navy sólido. */
.ct-benefits--navy .ct-benefit {
	--ct-benefit-bg: var(--ct-navy);
	--ct-benefit-title: #fff;
	--ct-benefit-text: rgba(255, 255, 255, 0.74);
	--ct-benefit-number: #fff;
	--ct-benefit-icon-bg: rgba(255, 255, 255, 0.12);
	--ct-benefit-icon-color: #fff;
}

.ct-benefits--navy .ct-benefit:nth-child(even) {
	--ct-benefit-bg: var(--ct-navy-900);
}

.ct-benefits--navy .ct-benefit:nth-child(3n + 3) {
	--ct-benefit-icon-bg: var(--ct-orange);
}

.ct-benefits--navy .ct-benefit__number {
	opacity: 0.2;
}

/* Tono 3: blancas con filo de color arriba. */
.ct-benefits--gradient .ct-benefit {
	--ct-benefit-bg: var(--ct-card);
	--ct-benefit-border: var(--ct-line);
}

.ct-benefits--gradient .ct-benefit::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
}

.ct-benefits--gradient .ct-benefit:nth-child(3n + 1)::before {
	background: var(--ct-grad-brand);
}

.ct-benefits--gradient .ct-benefit:nth-child(3n + 2)::before {
	background: var(--ct-blue);
}

.ct-benefits--gradient .ct-benefit:nth-child(3n + 3)::before {
	background: var(--ct-grad-accent);
}

.ct-benefits--gradient .ct-benefit:nth-child(3n + 2) {
	--ct-benefit-icon-bg: var(--ct-blue-100);
	--ct-benefit-icon-color: var(--ct-blue-600);
}

.ct-benefits--gradient .ct-benefit:nth-child(3n + 3) {
	--ct-benefit-icon-bg: var(--ct-orange-100);
	--ct-benefit-icon-color: var(--ct-orange-600);
}

@media (max-width: 860px) {
	.ct-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ct-benefits__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Carrusel ------------------------------------------------------------
   Sin librerías: scroll horizontal con scroll-snap. Las flechas y los puntos
   solo empujan el scroll, así que el gesto táctil funciona igual sin JS.
   ------------------------------------------------------------------------ */

.ct-carousel {
	--ct-slides: 3;
	--ct-gap: var(--ct-space-5);
	position: relative;
}

.ct-carousel__track {
	display: flex;
	gap: var(--ct-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Espacio para que la sombra del hover no se recorte. */
	padding: 6px 4px 14px;
	margin: -6px -4px -14px;
}

.ct-carousel__track::-webkit-scrollbar {
	display: none;
}

.ct-carousel__track>* {
	flex: 0 0 calc((100% - (var(--ct-slides) - 1) * var(--ct-gap)) / var(--ct-slides));
	scroll-snap-align: start;
}

.ct-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	color: var(--ct-navy);
	cursor: pointer;
	box-shadow: var(--ct-shadow-md);
	transition: background var(--ct-t-fast), color var(--ct-t-fast), opacity var(--ct-t-fast);
	z-index: 2;
}

.ct-carousel__nav svg {
	width: 20px;
	height: 20px;
}

.ct-carousel__nav:hover {
	background: var(--ct-orange);
	border-color: var(--ct-orange);
	color: #fff;
}

.ct-carousel__nav--prev {
	left: -18px;
}

.ct-carousel__nav--next {
	right: -18px;
}

.ct-carousel__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ct-carousel__nav[disabled]:hover {
	background: var(--ct-card);
	color: var(--ct-navy);
	border-color: var(--ct-line);
}

@media (max-width: 1240px) {
	.ct-carousel__nav--prev {
		left: 4px;
	}

	.ct-carousel__nav--next {
		right: 4px;
	}
}

.ct-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--ct-space-2);
	margin-top: var(--ct-space-5);
}

.ct-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ct-line);
	cursor: pointer;
	transition: width var(--ct-t-base), background var(--ct-t-fast);
}

.ct-carousel__dot.is-active {
	width: 26px;
	border-radius: var(--ct-r-pill);
	background: var(--ct-orange);
}

@media (prefers-reduced-motion: reduce) {
	.ct-carousel__track {
		scroll-behavior: auto;
	}
}

/* --- La solución -------------------------------------------------------- */

.box_respaldo .ct-solution__content img {
	background-color: #fff;
	padding: 5px 10px;
	border-radius: 7px;
}

.ct-solution {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
}

.ct-solution--tint {
	background: var(--ct-bg);
	border-radius: var(--ct-r-lg);
	padding: clamp(24px, 4vw, 52px);
}

.ct-solution--media-left .ct-solution__content {
	order: 2;
}

.ct-solution--media-left .ct-solution__media {
	order: 1;
}

.ct-solution__title {
	font-size: clamp(1.6rem, 3vw, var(--ct-fs-3xl));
	margin-bottom: var(--ct-space-4);
}

.ct-solution__text {
	font-size: var(--ct-fs-md);
	margin-bottom: var(--ct-space-5);
}

.ct-solution__chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ct-space-3);
}

/* La frase clave del documento: se destaca en cálido, no en azul. */
.ct-solution__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ct-space-2);
	padding: 10px 18px;
	background: var(--ct-orange-100);
	border: 1px solid transparent;
	border-radius: var(--ct-r-pill);
	font-size: var(--ct-fs-sm);
	font-weight: 600;
	color: var(--ct-orange-600);
}

.ct-solution__chip svg {
	flex: none;
	color: var(--ct-orange);
}

.ct-solution__actions {
	margin-top: var(--ct-space-5);
}

.ct-solution__media {
	margin: 0;
	position: relative;
}

.ct-solution__image {
	width: 100%;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	box-shadow: var(--ct-shadow-md);
}

.ct-solution__media figcaption {
	margin-top: var(--ct-space-3);
	text-align: center;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

@media (max-width: 860px) {
	.ct-solution {
		grid-template-columns: 1fr;
	}

	.ct-solution--media-left .ct-solution__content {
		order: 1;
	}

	.ct-solution--media-left .ct-solution__media {
		order: 2;
	}
}

/* --- Pasos -------------------------------------------------------------- */

.ct-steps__header {
	margin-bottom: var(--ct-space-6);
}

.ct-steps__header--center {
	text-align: center;
}

.ct-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ct-grad-warm);
	color: #fff;
	font-size: var(--ct-fs-base);
	font-weight: 700;
	box-shadow: var(--ct-shadow-accent);
}

.ct-steps__title {
	margin-bottom: var(--ct-space-2);
	font-size: var(--ct-fs-lg);
}

.ct-steps__text {
	margin: 0;
	color: var(--ct-muted);
	line-height: var(--ct-lh-snug);
}

/* Variante en columnas. */
.ct-steps--columns .ct-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ct-space-5);
}

.ct-steps--columns .ct-steps__item {
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-4);
	padding: var(--ct-space-5);
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	box-shadow: var(--ct-shadow-sm);
	margin: 0;
}

/* Variante en filas, con la línea vertical uniendo los pasos. */
.ct-steps--rows .ct-steps__list {
	position: relative;
}

.ct-steps--rows .ct-steps__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ct-space-5);
	position: relative;
	margin: 0 0 var(--ct-space-6);
}

.ct-steps--rows .ct-steps__item:last-child {
	margin-bottom: 0;
}

.ct-steps--rows .ct-steps__item::before {
	content: "";
	position: absolute;
	top: 52px;
	left: 21px;
	bottom: calc(-1 * var(--ct-space-6));
	width: 2px;
	background: var(--ct-line);
}

.ct-steps--rows .ct-steps__item:last-child::before {
	display: none;
}

@media (max-width: 860px) {
	.ct-steps--columns .ct-steps__list {
		grid-template-columns: 1fr;
	}
}

/* --- Testimonios -------------------------------------------------------- */

.ct-testimonials__header {
	margin-bottom: var(--ct-space-6);
	text-align: center;
}

.ct-testimonial {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ct-space-5);
	margin: 0;
}

.ct-testimonial__quote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	/* La cita en serif: es la voz de otra persona, no del sitio. */
	font-family: var(--ct-font-display);
	font-optical-sizing: auto;
	font-size: var(--ct-fs-lg);
	line-height: 1.45;
	color: var(--ct-ink);
}

.ct-testimonial__quote::before {
	content: "\201C";
	display: block;
	margin-bottom: -12px;
	font-size: 3rem;
	line-height: 1;
	color: var(--ct-orange-300);
}

.ct-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--ct-space-3);
	padding-top: var(--ct-space-4);
	border-top: 1px solid var(--ct-line-soft);
}

.ct-testimonial__photo {
	display: block;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ct-bg-alt);
}

.ct-testimonial__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct-testimonial__name {
	display: block;
	color: var(--ct-ink);
	font-size: var(--ct-fs-sm);
}

.ct-testimonial__role {
	display: block;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

/* --- Preguntas frecuentes ----------------------------------------------- */

.ct-faq__header {
	margin-bottom: var(--ct-space-6);
	text-align: center;
}

.ct-faq__item {
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	margin-bottom: var(--ct-space-3);
	box-shadow: var(--ct-shadow-sm);
	transition: border-color var(--ct-t-base), box-shadow var(--ct-t-base);
}

.ct-faq__item:last-child {
	margin-bottom: 0;
}

.ct-faq__item.is-open {
	border-color: var(--ct-orange-300);
	box-shadow: var(--ct-shadow-md);
}

.ct-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ct-space-4);
	width: 100%;
	padding: var(--ct-space-5);
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--ct-fs-md);
	font-weight: 600;
	line-height: var(--ct-lh-snug);
	color: var(--ct-ink);
	text-align: left;
	cursor: pointer;
}

.ct-faq__marker {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ct-orange-100);
	transition: background var(--ct-t-fast);
}

.ct-faq__marker::before,
.ct-faq__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	background: var(--ct-orange-600);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform var(--ct-t-base), opacity var(--ct-t-fast);
}

.ct-faq__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ct-faq__item.is-open .ct-faq__marker {
	background: var(--ct-orange);
}

.ct-faq__item.is-open .ct-faq__marker::before,
.ct-faq__item.is-open .ct-faq__marker::after {
	background: #fff;
}

.ct-faq__item.is-open .ct-faq__marker::after {
	opacity: 0;
}

.ct-faq__answer {
	padding: 0 var(--ct-space-5) var(--ct-space-5);
	color: var(--ct-body);
}

.ct-faq__answer p {
	margin: 0;
}

/* --- Línea de tiempo ---------------------------------------------------- */

.ct-timeline__header {
	margin-bottom: var(--ct-space-6);
}

.ct-timeline__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-timeline__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ct-space-5);
	position: relative;
	margin-bottom: var(--ct-space-5);
}

.ct-timeline__item:last-child {
	margin-bottom: 0;
}

.ct-timeline__item::before {
	content: "";
	position: absolute;
	top: 44px;
	left: 19px;
	bottom: calc(-1 * var(--ct-space-5));
	width: 2px;
	background: var(--ct-line);
}

.ct-timeline__item:last-child::before {
	display: none;
}

.ct-timeline__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ct-card);
	border: 2px solid var(--ct-orange);
	color: var(--ct-orange-600);
	font-size: var(--ct-fs-sm);
	font-weight: 700;
	z-index: 1;
}

.ct-timeline__card {
	flex: 1;
}

.ct-timeline__period {
	margin-bottom: var(--ct-space-2);
	color: var(--ct-orange-600);
}

.ct-timeline__title {
	margin-bottom: var(--ct-space-2);
	font-size: var(--ct-fs-lg);
}

.ct-timeline__text {
	margin: 0;
	color: var(--ct-muted);
}

@media (max-width: 600px) {
	.ct-timeline__item {
		gap: var(--ct-space-4);
	}

	.ct-timeline__item::before {
		left: 15px;
		top: 36px;
	}

	.ct-timeline__dot {
		width: 32px;
		height: 32px;
		font-size: var(--ct-fs-xs);
	}
}

/* --- Mapa de cumplimiento legal ----------------------------------------- */

.ct-legal-map__header {
	margin-bottom: var(--ct-space-6);
}

.ct-legal-map__law {
	margin: 0 0 var(--ct-space-4);
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
	max-width: 78ch;
}

/* Pestañas de modelo: MPD, MPI y Programa de Integridad comparten módulos, así
   que las tres tablas viven en el mismo bloque y se conmutan. */
.ct-legal-map__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-space-2);
	margin-bottom: var(--ct-space-5);
}

.ct-legal-map__tab {
	padding: 10px 18px;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-pill);
	background: var(--ct-card);
	color: var(--ct-body);
	font-family: var(--ct-font);
	font-size: var(--ct-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--ct-t-fast), color var(--ct-t-fast), border-color var(--ct-t-fast);
}

.ct-legal-map__tab:hover {
	border-color: var(--ct-orange-300);
	color: var(--ct-orange-600);
}

.ct-legal-map__tab.is-active {
	background: var(--ct-navy);
	border-color: var(--ct-navy);
	color: #fff;
}

/* Sin pestañas los tres modelos quedan apilados, cada uno con su título. */
.ct-legal-map__group-title {
	margin: 0 0 var(--ct-space-2);
	font-size: var(--ct-fs-lg);
}

.ct-legal-map--tabs .ct-legal-map__panel[hidden] {
	display: none;
}

.ct-legal-map:not(.ct-legal-map--tabs) .ct-legal-map__panel+.ct-legal-map__panel {
	margin-top: var(--ct-space-7);
}

/* La tabla es ancha: hace scroll dentro de su caja, nunca la página. */
.ct-legal-map__scroll {
	overflow-x: auto;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	background: var(--ct-card);
	box-shadow: var(--ct-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

.ct-legal-map__table {
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--ct-fs-sm);
}

.ct-legal-map__table th,
.ct-legal-map__table td {
	padding: var(--ct-space-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ct-line-soft);
}

.ct-legal-map__table thead th {
	position: sticky;
	top: 0;
	background: var(--ct-navy);
	color: #fff;
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.ct-legal-map__table tbody th {
	width: 22%;
	color: var(--ct-ink);
	font-weight: 700;
}

.ct-legal-map__table tbody tr:last-child th,
.ct-legal-map__table tbody tr:last-child td {
	border-bottom: 0;
}

.ct-legal-map__table tbody tr {
	transition: background var(--ct-t-fast);
}

.ct-legal-map__table tbody tr:hover {
	background: var(--ct-orange-100);
}

.ct-legal-map__table tbody th a {
	color: var(--ct-navy);
}

.ct-legal-map__table tbody th a:hover {
	color: var(--ct-orange-600);
}

.ct-legal-map__note {
	margin-top: var(--ct-space-4);
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

/* --- Sellos y perfiles -------------------------------------------------- */

.ct-profiles__seals {
	margin-bottom: var(--ct-space-7);
}

.ct-profiles__seal {
	text-align: left;
}

.ct-profiles__seal .ct-icon-box {
	margin-bottom: var(--ct-space-4);
}

/* Un sello por color: trazable navy, encriptado cyan, escalable naranjo. */
.ct-profiles__seals .ct-profiles__seal:nth-child(1) .ct-icon-box {
	background: var(--ct-navy-100);
	color: var(--ct-navy);
}

.ct-profiles__seals .ct-profiles__seal:nth-child(3) .ct-icon-box {
	background: var(--ct-orange-100);
	color: var(--ct-orange-600);
}

.ct-profiles__seal-title {
	margin-bottom: var(--ct-space-2);
	font-size: var(--ct-fs-lg);
}

.ct-profiles__seal-text {
	margin: 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-profiles__list .ct-eyebrow {
	display: block;
	margin-bottom: var(--ct-space-4);
}

.ct-profiles__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-space-3);
}

/* --- Índice de módulos -------------------------------------------------- */

.ct-index {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-block: 1px solid var(--ct-line-soft);
	overflow-x: auto;
	scrollbar-width: none;
}

.ct-index::-webkit-scrollbar {
	display: none;
}

.ct-index.is-sticky {
	position: sticky;
	top: var(--ct-header-real, var(--ct-header-h));
	z-index: 400;
}

.admin-bar .ct-index.is-sticky {
	top: calc(var(--ct-header-h) + 32px);
}

/* Elementor envuelve cada widget en su propio div y position:sticky está
   acotado por el padre: pegada solo al <nav>, la barra se despega en el mismo
   píxel en que se pega. Quien tiene que pegarse es el envoltorio del widget,
   que sí es hijo directo del contenedor largo de los módulos. */
.elementor-widget-cumpletech-modules-index:has(.ct-index.is-sticky) {
	position: sticky;
	top: var(--ct-header-h);
	z-index: 400;
}

.admin-bar .elementor-widget-cumpletech-modules-index:has(.ct-index.is-sticky) {
	top: calc(var(--ct-header-h) + 32px);
}

.ct-index__inner {
	display: flex;
	align-items: center;
	gap: var(--ct-space-4);
	padding-block: var(--ct-space-3);
	white-space: nowrap;
}

.ct-index__label {
	flex: none;
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ct-muted);
}

.ct-index__links {
	display: flex;
	gap: var(--ct-space-2);
}

.ct-index__link {
	padding: 7px 14px;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-pill);
	font-size: var(--ct-fs-xs);
	font-weight: 600;
	color: var(--ct-body);
	background: var(--ct-card);
	transition: background var(--ct-t-fast), color var(--ct-t-fast), border-color var(--ct-t-fast);
}

.ct-index__link:hover {
	border-color: var(--ct-orange-300);
	color: var(--ct-orange-600);
}

.ct-index__link.is-active {
	background: var(--ct-orange);
	border-color: var(--ct-orange);
	color: #fff;
	box-shadow: var(--ct-shadow-accent);
}

@media (max-width: 600px) {
	.ct-index__label {
		display: none;
	}
}

/* --- Recorrido horizontal de módulos ------------------------------------ */

/* El JS envuelve los bloques en viewport + pista y fija el alto de la
   sección. Sin JS —o en móvil, o con "reducir movimiento"— nada de esto
   existe y los bloques quedan apilados como cualquier otra sección. */

.ct-hscroll {
	position: relative;
}

/* Lo que se fija es el bloque completo: el índice arriba y la pista abajo.
   Así la barra queda a la vista todo el recorrido sin sticky propio. */
.ct-hscroll__viewport {
	position: sticky;
	top: var(--ct-hscroll-top, 76px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Dentro del bloque fijado la barra ya no necesita pegarse sola. */
.ct-hscroll__bar {
	flex: none;
}

.ct-hscroll__bar .ct-index.is-sticky {
	position: static;
}

.ct-hscroll__track {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: var(--ct-space-8);
	/* Recorta el viewport, no la pista: la pista se mueve con sus bloques. */
	/* Centra el bloque en reposo dentro de la sección. El porcentaje se
	   resuelve contra el ancho real de la sección y no contra 100vw: si el
	   contenedor de Elementor está en ancho fijo, medirlo contra la ventana
	   metía un relleno de más y cada módulo quedaba corrido a la derecha, con
	   la cola cortada por el recorte. */
	padding-inline: max(0px, (100% - min(var(--ct-container), 88vw)) / 2);
	will-change: transform;
}

/* Tres clases: Elementor escribe el ancho y el relleno del contenedor hijo
   con `.elementor-element.elementor-element-xxx`, que vale (0,2,0) y carga
   después. Con (0,3,0) mandan estas reglas sin recurrir a !important. */
.ct-hscroll .ct-hscroll__viewport .ct-hscroll__panel {
	flex: 0 0 auto;
	width: min(var(--ct-container), 88vw);
	max-width: none;
	padding: 0;
}

.ct-hscroll .ct-hscroll__panel .ct-module {
	margin: 0;
	scroll-margin-top: 0;
}

/* Dentro del recorrido todos los bloques van igual: el texto a la izquierda y
   la captura a la derecha. La alternancia que da ritmo cuando los bloques se
   leen uno bajo otro, pasando de lado se lee como desorden: el ojo tiene que
   volver a buscar dónde empieza el texto en cada módulo. Se resuelve acá y no
   en los widgets para no tocar la disposición del modo vertical. */
.ct-hscroll .ct-hscroll__panel .ct-module__content {
	order: 1;
}

.ct-hscroll .ct-hscroll__panel .ct-module__media {
	order: 2;
}

/* --- Maqueta del dashboard en SVG --------------------------------------- */

/* Dibujada en template-parts/dashboard-mockup.php. Va cortada por el borde
   derecho: se ve el menú completo y el arranque del panel, como si la
   aplicación siguiera fuera de cuadro. */

.ct-hero__media--mockup::before,
.ct-hero__media--mockup::after {
	content: none;
}

.ct-mockup {
	position: relative;
	border: 1px solid var(--ct-line);
	border-right: 0;
	border-radius: var(--ct-r-lg) 0 0 var(--ct-r-lg);
	overflow: hidden;
	background: var(--ct-card);
	box-shadow: var(--ct-shadow-lg);
	/* Se estira hacia la derecha más allá de su columna: refuerza que la
	   pantalla continúa fuera del encuadre. */
	margin-right: clamp(-72px, -4vw, -24px);
	/* Tope de alto: la maqueta acompaña al texto, no lo desborda. Lo que
	   sobra se recorta por abajo, que es coherente con el encuadre. */
	max-height: min(78vh, 720px);
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base);
}

.ct-mockup:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 60px rgba(0, 34, 116, 0.18);
}

.ct-mockup__svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--ct-font);
}

/* --- Menú lateral --- */

.ct-mockup__aside {
	fill: #001a4d;
}

.ct-mockup__logo {
	fill: var(--ct-orange);
}

.ct-mockup__check {
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ct-mockup__brand-text {
	fill: #fff;
	font-size: 14px;
	font-weight: 700;
}

.ct-mockup__label {
	fill: rgba(255, 255, 255, 0.42);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.ct-mockup__item-bg {
	fill: transparent;
	transition: fill var(--ct-t-fast);
}

.ct-mockup__item-icon {
	fill: rgba(255, 255, 255, 0.5);
	transition: fill var(--ct-t-fast);
}

.ct-mockup__item-text {
	fill: rgba(255, 255, 255, 0.72);
	font-size: 11.5px;
	transition: fill var(--ct-t-fast);
}

/* Responde al mouse: el SVG es interfaz, no una captura. */
.ct-mockup__item:hover .ct-mockup__item-bg {
	fill: rgba(255, 255, 255, 0.09);
}

.ct-mockup__item:hover .ct-mockup__item-text,
.ct-mockup__item:hover .ct-mockup__item-icon {
	fill: #fff;
}

.ct-mockup__item.is-active .ct-mockup__item-bg {
	fill: var(--ct-orange);
}

.ct-mockup__item.is-active .ct-mockup__item-text {
	fill: #fff;
	font-weight: 700;
}

.ct-mockup__item.is-active .ct-mockup__item-icon {
	fill: #fff;
}

.ct-mockup__aside-line {
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 1;
}

.ct-mockup__aside-org {
	fill: #fff;
	font-size: 11px;
	font-weight: 600;
}

.ct-mockup__aside-mail {
	fill: rgba(255, 255, 255, 0.45);
	font-size: 8.5px;
}

/* --- Panel --- */

.ct-mockup__title {
	fill: var(--ct-ink);
	font-size: 19px;
	font-weight: 700;
}

.ct-mockup__muted {
	fill: var(--ct-muted);
	font-size: 11px;
}

.ct-mockup__section {
	fill: var(--ct-ink);
	font-size: 13px;
	font-weight: 700;
}

.ct-mockup__card {
	fill: #fff;
	stroke: var(--ct-line);
	stroke-width: 1;
}

.ct-mockup__avatar-bg {
	fill: var(--ct-navy-100, #e6ecf8);
}

.ct-mockup__avatar-text {
	fill: var(--ct-navy);
	font-size: 10px;
	font-weight: 700;
	text-anchor: middle;
}

.ct-mockup__kpi-num {
	fill: var(--ct-ink);
	font-size: 26px;
	font-weight: 800;
}

.ct-mockup__kpi-cap {
	fill: var(--ct-muted);
	font-size: 10.5px;
}

.ct-mockup__track {
	fill: var(--ct-line-soft);
}

.ct-mockup__fill {
	fill: url(#ct-mockup-bar);
	transform-origin: left center;
}

.ct-mockup__fill--b {
	fill: var(--ct-blue);
}

.ct-mockup__fill--c {
	fill: var(--ct-navy);
}

.ct-mockup__fill--d {
	fill: var(--ct-peach);
}

.ct-mockup__code {
	fill: var(--ct-navy);
	font-size: 10.5px;
	font-weight: 700;
}

.ct-mockup__desc {
	fill: var(--ct-body);
	font-size: 11px;
}

.ct-mockup__row-line {
	stroke: var(--ct-line-soft);
	stroke-width: 1;
}

.ct-mockup__tag-text {
	fill: #fff;
	font-size: 7.5px;
	font-weight: 700;
	text-anchor: middle;
}

.ct-mockup__tag--den {
	fill: var(--ct-red);
}

.ct-mockup__tag--dd {
	fill: var(--ct-navy);
}

.ct-mockup__tag--tv {
	fill: var(--ct-orange);
}

.ct-mockup__tag--cap {
	fill: var(--ct-blue);
}

.ct-mockup__tag--reu {
	fill: var(--ct-navy-600, #234a9e);
}

.ct-mockup__tag--rep {
	fill: var(--ct-peach);
}

/* --- Animación de entrada ---------------------------------------------- */

/* Las barras crecen y las filas entran escalonadas, una sola vez: da la
   sensación de un panel que termina de cargar. El punto de "en vivo" y el
   aviso del avatar laten en bucle, que es el único movimiento permanente. */

.ct-mockup__fill {
	animation: ct-mockup-grow 1.1s var(--ct-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
	animation-delay: calc(var(--ct-delay, 0s) + 0.2s);
}

.ct-mockup__kpi {
	animation: ct-mockup-rise 0.6s ease-out both;
	animation-delay: var(--ct-delay, 0s);
}

.ct-mockup__row {
	animation: ct-mockup-slide 0.5s ease-out both;
	animation-delay: var(--ct-delay, 0s);
}

.ct-mockup__live,
.ct-mockup__ping {
	fill: var(--ct-success, #1f9d55);
	animation: ct-mockup-pulse 2.4s ease-in-out infinite;
}

.ct-mockup__ping {
	fill: var(--ct-orange);
}

@keyframes ct-mockup-grow {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes ct-mockup-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ct-mockup-slide {
	from {
		opacity: 0;
		transform: translateX(-14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ct-mockup-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.25;
	}
}

/* Con "reducir movimiento" la maqueta se muestra completa y quieta. */
@media (prefers-reduced-motion: reduce) {

	.ct-mockup__fill,
	.ct-mockup__kpi,
	.ct-mockup__row,
	.ct-mockup__live,
	.ct-mockup__ping {
		animation: none;
	}
}

@media (max-width: 860px) {
	.ct-mockup {
		margin-right: 0;
		border-right: 1px solid var(--ct-line);
		border-radius: var(--ct-r-lg);
	}
}

/* --- Perfil de la fundadora --------------------------------------------- */

.ct-founder {
	--ct-founder-media: 340px;
	display: grid;
	grid-template-columns: var(--ct-founder-media) 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.ct-founder--media-right .ct-founder__media {
	order: 2;
}

.ct-founder--media-right .ct-founder__content {
	order: 1;
}

.ct-founder__media {
	position: sticky;
	top: calc(var(--ct-header-h) + 24px);
}

.ct-founder__image {
	width: 100%;
	border-radius: var(--ct-r-lg);
	box-shadow: var(--ct-shadow-lg);
}

/* Sin fotografía, un marcador sobrio: deja claro que falta el material sin
   romper la maqueta ni dejar un hueco vacío. */
.ct-founder__image--empty {
	display: grid;
	place-items: center;
	gap: var(--ct-space-2);
	aspect-ratio: 4 / 5;
	color: var(--ct-muted);
	font-size: var(--ct-fs-xs);
	background: var(--ct-bg-alt);
	border: 1px dashed var(--ct-line);
	box-shadow: none;
}

.ct-founder__quote {
	/* La columna puede quedar en flex si se alinea la foto: que la cita ocupe
	   el ancho completo igual, y no se encoja al largo de su texto. */
	align-self: stretch;
	margin: var(--ct-space-5) 0 0;
	padding: var(--ct-space-4) var(--ct-space-5);
	border-inline-start: 3px solid var(--ct-orange);
	background: var(--ct-bg);
	border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0;
	font-family: var(--ct-font-display);
	font-size: var(--ct-fs-lg);
	line-height: var(--ct-lh-snug);
	color: var(--ct-ink);
}

.ct-founder__name {
	margin: var(--ct-space-3) 0 var(--ct-space-2);
}

.ct-founder__role {
	margin: 0 0 var(--ct-space-5);
	font-weight: 600;
	color: var(--ct-orange-600);
}

.ct-founder__bio p {
	margin: 0 0 var(--ct-space-4);
	color: var(--ct-body);
	max-width: 68ch;
}

.ct-founder__career-title {
	margin-top: var(--ct-space-6);
}

.ct-founder__career {
	list-style: none;
	margin: 0 0 var(--ct-space-5);
	padding: 0;
	border-inline-start: 2px solid var(--ct-line);
}

.ct-founder__career li {
	position: relative;
	padding: 0 0 var(--ct-space-3) var(--ct-space-5);
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-founder__career li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ct-orange);
}

.ct-founder__career strong {
	display: block;
	color: var(--ct-ink);
	font-size: var(--ct-fs-base);
}

.ct-founder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-space-2);
	margin-bottom: var(--ct-space-5);
}

.ct-founder__link {
	margin: 0;
}

.ct-founder__link a {
	font-weight: 600;
	color: var(--ct-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ct-founder__link a:hover {
	color: var(--ct-orange-600);
}

@media (max-width: 860px) {
	.ct-founder {
		grid-template-columns: 1fr;
	}

	.ct-founder__media {
		position: static;
	}

	.ct-founder--media-right .ct-founder__media {
		order: 1;
	}

	.ct-founder--media-right .ct-founder__content {
		order: 2;
	}

	.ct-founder__image--empty {
		aspect-ratio: 3 / 2;
	}
}

/* --- Biografías del equipo ---------------------------------------------- */

.ct-team__header {
	margin-bottom: var(--ct-space-6);
	max-width: 62ch;
}

.ct-team__header h2 {
	margin-bottom: var(--ct-space-3);
}

.ct-person {
	text-align: left;
}

.ct-person__head {
	display: flex;
	align-items: center;
	gap: var(--ct-space-4);
	margin-bottom: var(--ct-space-4);
}

.ct-person__photo {
	flex: none;
	width: 112px;
	height: 112px;
	/* El cuadrado se sostiene aunque una regla de Elementor toque el alto: el
	   reset del theme pone `height: auto` a todas las imágenes. */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
}

.ct-person__photo--empty {
	display: grid;
	place-items: center;
	color: var(--ct-navy);
	background: var(--ct-navy-100);
}

.ct-person__name {
	margin: 0 0 2px;
	font-size: var(--ct-fs-md);
}

.ct-person__role {
	margin: 0;
	font-size: var(--ct-fs-sm);
	font-weight: 600;
	color: var(--ct-orange-600);
}

.ct-person__bio {
	margin: 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

/* Sin biografías las tarjetas son solo la ficha: se compactan. */
.ct-team__grid--compact .ct-person__head {
	margin-bottom: 0;
}

.ct-team__note {
	margin-top: var(--ct-space-5);
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

/* En pantallas angostas la foto grande deja sin aire al nombre y al cargo. */
@media (max-width: 600px) {
	.ct-person__photo {
		width: 88px;
		height: 88px;
	}
}

/* --- Video de YouTube con carátula -------------------------------------- */

/* El reproductor se carga al hacer clic (assets/js/theme.js). Hasta entonces
   esto es una imagen y un botón: la página no arrastra el megabyte de scripts
   ni las cookies de YouTube solo por tener un video incrustado. */

.ct-video {
	margin: 0;
}

.ct-video__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	overflow: hidden;
	background: var(--ct-navy);
	box-shadow: var(--ct-shadow-lg);
	cursor: pointer;
}

.ct-video__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* La miniatura de YouTube viene en 4:3 con franjas negras; el recorte las
	   deja fuera y el encuadre queda limpio. */
	transition: transform var(--ct-t-base), opacity var(--ct-t-base);
}

.ct-video__frame:hover .ct-video__cover {
	transform: scale(1.03);
	opacity: 0.9;
}

.ct-video__play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	padding-left: 4px;
	border-radius: 50%;
	color: #fff;
	background: var(--ct-orange);
	box-shadow: var(--ct-shadow-accent);
	transition: transform var(--ct-t-fast), background var(--ct-t-fast);
}

.ct-video__frame:hover .ct-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--ct-orange-600);
}

.ct-video__frame:focus-visible {
	outline: 3px solid var(--ct-orange);
	outline-offset: 3px;
}

.ct-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ct-video figcaption {
	margin-top: var(--ct-space-3);
	text-align: center;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

@media (prefers-reduced-motion: reduce) {

	.ct-video__cover,
	.ct-video__play {
		transition: none;
	}

	.ct-video__frame:hover .ct-video__cover {
		transform: none;
	}

	.ct-video__frame:hover .ct-video__play {
		transform: translate(-50%, -50%);
	}
}

/* Video propio, servido desde la biblioteca de medios. No lleva fachada:
   el archivo es nuestro, así que no hay nada de terceros que diferir. */
.ct-video-file {
	width: 100%;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	box-shadow: var(--ct-shadow-lg);
	background: var(--ct-navy);
}

/* Dentro de un bloque de módulo el visual acompaña al texto, no manda: se
   iguala al radio y a la sombra que ya usa la captura. */
.ct-module__media--video .ct-video__frame,
.ct-module__media--video .ct-video-file {
	border-radius: var(--ct-r-md);
	box-shadow: var(--ct-shadow-md);
}

/* --- Formulario de contacto --------------------------------------------- */

.ct-form {
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-lg);
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--ct-shadow-md);
}

.ct-form__header {
	margin-bottom: var(--ct-space-6);
}

.ct-form__header h2 {
	margin-bottom: var(--ct-space-3);
}

.ct-form__notice {
	margin: 0 0 var(--ct-space-5);
	padding: var(--ct-space-4) var(--ct-space-5);
	border-radius: var(--ct-r-md);
	border-inline-start: 3px solid;
	font-size: var(--ct-fs-sm);
}

.ct-form__notice--ok {
	border-color: var(--ct-success);
	background: rgba(31, 157, 85, 0.08);
	color: var(--ct-ink);
}

.ct-form__notice--error {
	border-color: var(--ct-danger);
	background: rgba(246, 24, 0, 0.07);
	color: var(--ct-ink);
}

.ct-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ct-space-4);
}

.ct-field {
	margin: 0;
}

.ct-field--wide {
	grid-column: 1 / -1;
}

.ct-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ct-fs-sm);
	font-weight: 600;
	color: var(--ct-ink);
}

.ct-field__optional {
	margin-inline-start: 6px;
	font-weight: 400;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

.ct-field__input {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--ct-font);
	font-size: var(--ct-fs-base);
	color: var(--ct-ink);
	background: var(--ct-bg);
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-r-md);
	transition: border-color var(--ct-t-fast), box-shadow var(--ct-t-fast);
}

.ct-field__input:focus {
	outline: none;
	border-color: var(--ct-orange);
	box-shadow: 0 0 0 3px var(--ct-orange-100);
}

textarea.ct-field__input {
	resize: vertical;
	min-height: 120px;
}

/* La trampa antispam: fuera de la vista, pero no con display:none, que algunos
   robots detectan y saltan. */
.ct-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ct-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--ct-space-5) 0 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-form__consent input {
	margin-top: 3px;
	flex: none;
}

.ct-form__consent a {
	color: var(--ct-navy);
	text-decoration: underline;
}

.ct-form__actions {
	display: flex;
	margin-top: var(--ct-space-5);
}

.ct-form__submit {
	border: 1px solid transparent;
}

.ct-form__submit--full {
	width: 100%;
	justify-content: center;
}

.ct-field__req {
	color: var(--ct-orange);
	margin-inline-start: 3px;
}

.ct-form__note {
	margin: var(--ct-space-4) 0 0;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

@media (max-width: 600px) {
	.ct-form__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Datos de contacto --------------------------------------------------- */

.ct-contact__title {
	margin-bottom: var(--ct-space-3);
}

.ct-contact__text {
	margin: 0 0 var(--ct-space-6);
	color: var(--ct-body);
	max-width: 46ch;
}

.ct-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ct-space-4);
}

.ct-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ct-space-4);
}

.ct-contact__icon {
	flex: none;
	width: 42px;
	height: 42px;
}

.ct-contact__icon--wa {
	background: var(--ct-success);
	color: #fff;
}

.ct-contact__label {
	display: block;
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ct-muted);
}

.ct-contact__value {
	display: block;
	font-weight: 600;
	color: var(--ct-ink);
	transition: color var(--ct-t-fast);
}

a.ct-contact__value:hover {
	color: var(--ct-orange-600);
}

.ct-contact__hours {
	margin: var(--ct-space-5) 0 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-contact__social {
	display: flex;
	gap: var(--ct-space-3);
	margin-top: var(--ct-space-5);
	padding-top: var(--ct-space-5);
	border-top: 1px solid var(--ct-line);
}

.ct-contact__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ct-navy);
	background: var(--ct-navy-100);
	transition: background var(--ct-t-fast), color var(--ct-t-fast);
}

.ct-contact__social a:hover {
	background: var(--ct-orange);
	color: #fff;
}

/* --- Últimas entradas (widget) ------------------------------------------ */

/* Las tarjetas son las mismas del blog: .ct-post-card vive en layout.css. */

.ct-posts__header {
	margin-bottom: var(--ct-space-6);
}

.ct-posts__header h2 {
	margin-bottom: 0;
}

.ct-posts__link {
	margin: var(--ct-space-6) 0 0;
	text-align: center;
}

.ct-posts__empty {
	padding: var(--ct-space-6);
	border: 1px dashed var(--ct-line);
	border-radius: var(--ct-r-md);
	color: var(--ct-muted);
	text-align: center;
}

@media (max-width: 860px) {
	.ct-posts .ct-archive-grid {
		grid-template-columns: 1fr !important;
	}
}

/* --- Módulos por modelo, en pestañas ------------------------------------ */

/* Las pestañas reutilizan .ct-legal-map__tab: mismo aspecto, mismo JS. */

.ct-modtabs__tabs {
	justify-content: center;
	margin-bottom: var(--ct-space-6);
}

.ct-modtabs__count {
	margin-inline-start: 8px;
	padding: 1px 8px;
	border-radius: var(--ct-r-pill);
	background: var(--ct-navy-100);
	color: var(--ct-navy);
	font-size: var(--ct-fs-xs);
	font-weight: 700;
}

.ct-legal-map__tab.is-active .ct-modtabs__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.ct-modtabs__panel[hidden] {
	display: none;
}

.ct-modtabs__link {
	margin: var(--ct-space-6) 0 0;
	text-align: center;
}

@media (max-width: 600px) {
	.ct-modtabs__tabs {
		justify-content: flex-start;
	}

	.ct-modtabs__count {
		display: none;
	}
}

/* --- Fondo de video en el hero ------------------------------------------ */

/* El reproductor lo inserta theme.js cuando la sección entra en pantalla, y
   solo en pantallas anchas: en móvil se queda la imagen de respaldo. */

.ct-hero--bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--ct-r-lg);
	background: var(--ct-navy);
}

.ct-hero--bg>.ct-hero__content,
.ct-hero--bg>.ct-hero__media {
	position: relative;
	z-index: 1;
}

.ct-hero__bg {
	/* Cuánto se amplía el video. Lo maneja el control "Ampliar el video" del
	   panel; acá va el valor de partida. */
	--ct-bg-zoom: 1.35;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* Sin eventos de mouse el iframe nunca recibe un hover, y sin hover
	   YouTube no despliega su barra de título ni los botones de compartir. */
	pointer-events: none;
}

.ct-hero__bg-poster,
.ct-hero__bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
}

.ct-hero__bg-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El video de YouTube viene en 16:9 y hay que recortarlo para que cubra la
   caja: se estira al mayor de los dos ejes y el resto se sale del cuadro. La
   ampliación además empuja fuera de vista la franja donde YouTube pinta su
   interfaz, que no se puede quitar con parámetros. */
.ct-hero__bg iframe {
	width: calc(100vw * var(--ct-bg-zoom));
	height: calc(56.25vw * var(--ct-bg-zoom));
	min-height: calc(100% * var(--ct-bg-zoom));
	min-width: calc(177.78vh * var(--ct-bg-zoom));
}

/* Video propio: sin marca, sin peticiones a terceros y con recorte propio. */
.ct-hero__bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%) scale(var(--ct-bg-zoom));
	border: 0;
}

/* El velo lo pinta el control del panel; este es el valor de partida. */
.ct-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 34, 116, 0.72);
}

/* Sobre el video, el texto va en claro. */
.ct-hero--on-dark .ct-hero__title,
.ct-hero--on-dark .ct-hero__subtitle,
.ct-hero--on-dark .ct-hero__proof {
	color: #fff;
}

.ct-hero--on-dark .ct-hero__subtitle,
.ct-hero--on-dark .ct-hero__proof {
	color: rgba(255, 255, 255, 0.85);
}

.ct-hero--on-dark .ct-kicker {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.ct-hero--on-dark .ct-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.ct-hero--on-dark .ct-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Con fondo, los halos decorativos de la captura estorban. */
.ct-hero--bg .ct-hero__media::before,
.ct-hero--bg .ct-hero__media::after {
	content: none;
}

/* --- Misión y visión ----------------------------------------------------- */

.ct-mv__header {
	margin-bottom: var(--ct-space-7);
}

.ct-mv__header--center {
	text-align: center;
}

.ct-mv__title {
	margin-bottom: var(--ct-space-4);
}

.ct-mv__header .ct-lead {
	margin: 0;
	/* Sin tope: ocupa el ancho del bloque. El límite de lectura se fija desde
	   el control "Ancho máximo de la bajada" cuando la línea queda muy larga. */
	max-width: none;
}

.ct-mv__header--center .ct-lead {
	margin-inline: auto;
}

.ct-mv__grid {
	display: grid;
	gap: var(--ct-space-5);
}

.ct-mv__grid--duo.ct-mv__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-mv__grid--duo.ct-mv__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ct-mv__grid--rows {
	grid-template-columns: 1fr;
}

.ct-mv__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-5);
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--ct-r-lg);
	overflow: hidden;
}

/* En filas anchas el icono se va al costado y el texto ocupa el resto. */
.ct-mv__grid--rows .ct-mv__card {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ct-space-6);
}

.ct-mv__body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.ct-mv__icon {
	position: relative;
	z-index: 1;
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: var(--ct-r-md);
}

.ct-mv__icon svg {
	width: 26px;
	height: 26px;
}

.ct-mv__icon i {
	font-size: 24px;
}

/* Los dos degradados del logo, uno por bloque: el cálido para la misión, el de
   marca para la visión. Con "uniforme" en el panel se apaga la alternancia y
   manda el color elegido (ver la nota de especificidad del README). */
.ct-mv__grid:not(.ct-mv__grid--mono) .ct-mv__card:nth-child(odd) .ct-mv__icon {
	background: var(--ct-grad-warm);
	color: #fff;
	box-shadow: var(--ct-shadow-accent);
}

.ct-mv__grid:not(.ct-mv__grid--mono) .ct-mv__card:nth-child(even) .ct-mv__icon {
	background: var(--ct-grad-brand);
	color: #fff;
}

.ct-mv__label {
	display: inline-block;
	margin-bottom: var(--ct-space-3);
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ct-orange-600);
}

.ct-mv__phrase {
	margin: 0 0 var(--ct-space-4);
	font-family: var(--ct-font-display);
	font-size: var(--ct-fs-xl);
	line-height: var(--ct-lh-snug);
	color: var(--ct-ink);
}

.ct-mv__text {
	margin: 0;
	color: var(--ct-body);
	line-height: var(--ct-lh-base);
}

/* Variante en navy: el halo cyan repite el degradado de marca sin agregar otro
   elemento naranjo al bloque. */
.ct-mv__card--dark {
	background: var(--ct-navy);
	border-color: transparent;
	box-shadow: var(--ct-shadow-md);
}

.ct-mv__card--dark::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 180, 252, 0.32), transparent 70%);
	pointer-events: none;
}

.ct-mv__card--dark .ct-mv__label {
	color: var(--ct-peach);
}

.ct-mv__card--dark .ct-mv__phrase {
	color: #fff;
}

.ct-mv__card--dark .ct-mv__text {
	color: rgba(255, 255, 255, 0.8);
}

.ct-mv__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ct-space-4);
	margin-top: var(--ct-space-6);
	text-align: center;
}

.ct-mv__note {
	margin: 0;
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

/* --- Misión y visión: reacción al mouse --- */

/* Tres capas que se mueven a distinta velocidad: la tarjeta se eleva, el icono
   se adelanta y el halo se expande. Es lo que separa una tarjeta viva de una
   lámina impresa, sin caer en efectos que distraigan de la lectura. */

.ct-mv__grid--hover .ct-mv__card {
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base), border-color var(--ct-t-base);
	will-change: transform;
}

.ct-mv__grid--hover .ct-mv__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ct-shadow-lg);
}

.ct-mv__grid--hover .ct-mv__card--light:hover {
	border-color: var(--ct-orange-300);
}

.ct-mv__grid--hover .ct-mv__icon {
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base);
}

.ct-mv__grid--hover .ct-mv__card:hover .ct-mv__icon {
	transform: translateY(-2px) scale(1.06) rotate(-4deg);
}

/* El halo de la tarjeta navy crece y se acerca: da profundidad sin mover el
   texto de sitio. */
.ct-mv__grid--hover .ct-mv__card--dark::after {
	transition: transform var(--ct-t-base), opacity var(--ct-t-base);
}

.ct-mv__grid--hover .ct-mv__card--dark:hover::after {
	transform: scale(1.35) translate(-12px, 12px);
	opacity: 1;
}

/* Una línea de acento que se despliega bajo la frase. Nace en el borde
   izquierdo y no ocupa alto propio, así nada se recoloca al pasar el mouse. */
.ct-mv__grid--hover .ct-mv__phrase {
	position: relative;
	padding-bottom: 10px;
}

.ct-mv__grid--hover .ct-mv__phrase::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--ct-grad-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ct-t-base);
}

.ct-mv__grid--hover .ct-mv__card--dark .ct-mv__phrase::after {
	background: var(--ct-blue);
}

.ct-mv__grid--hover .ct-mv__card:hover .ct-mv__phrase::after {
	transform: scaleX(1);
}

/* Con el teclado, el mismo trato: la tarjeta reacciona al foco de lo que tenga
   dentro. */
.ct-mv__grid--hover .ct-mv__card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--ct-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {

	.ct-mv__grid--hover .ct-mv__card,
	.ct-mv__grid--hover .ct-mv__icon,
	.ct-mv__grid--hover .ct-mv__phrase::after,
	.ct-mv__grid--hover .ct-mv__card--dark::after {
		transition: none;
	}

	.ct-mv__grid--hover .ct-mv__card:hover,
	.ct-mv__grid--hover .ct-mv__card:focus-within {
		transform: none;
	}

	.ct-mv__grid--hover .ct-mv__card:hover .ct-mv__icon {
		transform: none;
	}
}

@media (max-width: 860px) {

	.ct-mv__grid--duo.ct-mv__grid--cols-2,
	.ct-mv__grid--duo.ct-mv__grid--cols-3 {
		grid-template-columns: 1fr;
	}

	.ct-mv__grid--rows .ct-mv__card {
		flex-direction: column;
		gap: var(--ct-space-5);
	}
}

/* Frases con enlace: se distinguen de las que son solo texto. La flecha
   aparece al pasar el mouse para no ensuciar la lectura en reposo. */
.ct-solution__chip--link {
	cursor: pointer;
	transition: background var(--ct-t-fast), color var(--ct-t-fast), border-color var(--ct-t-fast);
}

.ct-solution__chip--link:hover {
	background: var(--ct-orange);
	border-color: var(--ct-orange);
	color: #fff;
}

.ct-solution__chip-arrow {
	width: 14px;
	height: 14px;
	max-width: 0;
	opacity: 0;
	transition: max-width var(--ct-t-fast), opacity var(--ct-t-fast), transform var(--ct-t-fast);
}

.ct-solution__chip--link:hover .ct-solution__chip-arrow {
	max-width: 20px;
	opacity: 1;
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.ct-solution__chip-arrow {
		transition: none;
	}
}

/* --- Llamado a la acción ------------------------------------------------ */

.ct-cta {
	padding: clamp(28px, 4vw, 52px);
	border-radius: var(--ct-r-lg);
}

.ct-cta--navy {
	background: var(--ct-navy);
	color: #fff;
}

.ct-cta--tint {
	background: var(--ct-bg-alt);
}

.ct-cta--outline {
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	box-shadow: var(--ct-shadow-sm);
}

.ct-cta__logo {
	display: block;
	height: auto;
	margin-bottom: var(--ct-space-5);
}

.ct-cta__title {
	margin: var(--ct-space-3) 0 var(--ct-space-3);
}

.ct-cta__text {
	margin: 0;
	max-width: 62ch;
	color: var(--ct-body);
}

.ct-cta__note {
	margin: var(--ct-space-3) 0 0;
	font-size: var(--ct-fs-xs);
	color: var(--ct-muted);
}

/* Sobre navy, los textos y el botón de contorno se invierten. */
.ct-cta--navy .ct-cta__title {
	color: #fff;
}

.ct-cta--navy .ct-cta__text {
	color: rgba(255, 255, 255, 0.85);
}

.ct-cta--navy .ct-cta__note {
	color: rgba(255, 255, 255, 0.6);
}

.ct-cta--navy .ct-kicker {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.ct-cta--navy .ct-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.ct-cta--navy .ct-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Centrado: todo al medio, incluido el logo. */
.ct-cta--center {
	text-align: center;
	display: grid;
	justify-items: center;
}

.ct-cta--center .ct-cta__text {
	margin-inline: auto;
}

.ct-cta--center .ct-actions {
	justify-content: center;
}

.ct-cta--center .ct-cta__actions {
	margin-top: var(--ct-space-6);
}

/* Partido: el texto pide y el botón responde, en la misma línea. */
.ct-cta--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 56px);
	flex-wrap: wrap;
}

.ct-cta--split .ct-cta__body {
	flex: 1 1 420px;
}

.ct-cta--split .ct-cta__actions {
	flex: none;
}

.ct-cta--split .ct-cta__logo {
	margin-bottom: var(--ct-space-4);
}

@media (max-width: 700px) {
	.ct-cta--split {
		display: grid;
	}

	.ct-cta--split .ct-actions {
		justify-content: flex-start;
	}
}

/* Logo del bloque de respaldo: va sobre el antetítulo, alineado con el texto. */
.ct-solution__logo {
	display: block;
	height: auto;
	max-width: 100%;
	margin-bottom: var(--ct-space-5);
}

/* --- La solución con tarjetas -------------------------------------------
   Titular, bajada y las tarjetas de los modelos. La sección son las tarjetas:
   cada una trae su color en `--ct-accent` —navy, cyan y naranjo— y reacciona
   al puntero con tres capas que se mueven a distinta velocidad: el brillo
   sigue al cursor, la tarjeta se inclina y los puntos se despliegan.

   Todo lo que se mueve es mejora: sin JavaScript quedan las tarjetas puestas,
   con sus puntos a la vista y su enlace.
   ------------------------------------------------------------------------ */

.ct-solution-cards {
	--ct-lift: 8px;
	--ct-tilt: 6deg;
}

/* --- Encabezado --------------------------------------------------------- */

.ct-solution-cards__header {
	margin-bottom: clamp(32px, 4vw, 56px);
}

/* El envoltorio del antetítulo y el titular: sin él, la alineación a los
   costados tendría tres hijos y la grilla de dos columnas se descuadraría. */
.ct-solution-cards__headline {
	margin: 0;
}

.ct-solution-cards__title {
	margin: 0 0 var(--ct-space-4);
}

.ct-solution-cards__lead {
	margin: 0;
	max-width: 68ch;
}

.ct-solution-cards--align-center .ct-solution-cards__header {
	text-align: center;
}

.ct-solution-cards--align-center .ct-solution-cards__lead {
	margin-inline: auto;
}

.ct-solution-cards--align-right .ct-solution-cards__header {
	text-align: right;
}

.ct-solution-cards--align-right .ct-solution-cards__lead {
	margin-left: auto;
}

/* A los costados: el titular sostiene la izquierda y la bajada equilibra a la
   derecha, alineada con la última línea del titular. */
.ct-solution-cards--align-split .ct-solution-cards__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	gap: var(--ct-space-5) clamp(24px, 5vw, 72px);
}

.ct-solution-cards--align-split .ct-solution-cards__title {
	margin-bottom: 0;
}

/* La bajada se alinea con la última línea del titular, no con el antetítulo. */
.ct-solution-cards--align-split .ct-solution-cards__headline {
	align-self: end;
}

.ct-solution-cards--align-split .ct-solution-cards__lead {
	max-width: none;
}

/* --- Grilla ------------------------------------------------------------- */

.ct-solution-cards__grid {
	display: grid;
	gap: var(--ct-space-5);
	/* La perspectiva vive en la grilla: si se pone en cada tarjeta, la
	   inclinación se calcula con el ojo al centro de la tarjeta y las de los
	   costados se ven deformadas. */
	perspective: 1200px;
}

.ct-solution-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-solution-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-solution-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Tarjeta ------------------------------------------------------------ */

.ct-solution-cards__card {
	--ct-accent: var(--ct-navy);
	--ct-accent-soft: var(--ct-navy-100);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-4);
	padding: clamp(24px, 2.4vw, 34px);
	border-radius: var(--ct-r-lg);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	transform-style: preserve-3d;
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base), border-color var(--ct-t-base);
}

/* Los tres colores de la marca, uno por tarjeta. Con "uniforme" en el panel se
   apaga la alternancia y manda el color elegido (ver la nota de especificidad
   del README). */
.ct-solution-cards:not(.ct-solution-cards--mono) .ct-solution-cards__card:nth-child(3n + 2) {
	--ct-accent: var(--ct-blue-600);
	--ct-accent-soft: var(--ct-blue-100);
}

.ct-solution-cards:not(.ct-solution-cards--mono) .ct-solution-cards__card:nth-child(3n + 3) {
	--ct-accent: var(--ct-orange-600);
	--ct-accent-soft: var(--ct-orange-100);
}

a.ct-solution-cards__card:hover,
a.ct-solution-cards__card:focus-visible {
	border-color: color-mix(in srgb, var(--ct-accent) 45%, var(--ct-line));
	box-shadow: var(--ct-shadow-lg);
}

/* El filo de color que se despliega desde la izquierda. No ocupa alto propio,
   así nada se recoloca al pasar el mouse. */
.ct-solution-cards--sheen .ct-solution-cards__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--ct-accent), color-mix(in srgb, var(--ct-accent) 30%, #fff));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ct-t-base);
}

.ct-solution-cards--sheen .ct-solution-cards__card:hover::before,
.ct-solution-cards--sheen .ct-solution-cards__card:focus-within::before {
	transform: scaleX(1);
}

/* --- Brillo que sigue al puntero ---------------------------------------- */

/* El JS escribe `--ct-mx` y `--ct-my` con la posición del cursor dentro de la
   tarjeta; el gradiente se dibuja ahí. Sin JS el brillo nunca se enciende. */
.ct-solution-cards__glow {
	position: absolute;
	inset: -1px;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(
		320px circle at var(--ct-mx, 50%) var(--ct-my, 0%),
		color-mix(in srgb, var(--ct-accent) 22%, transparent),
		transparent 68%
	);
	transition: opacity var(--ct-t-base);
	pointer-events: none;
}

.ct-solution-cards--fx-none .ct-solution-cards__glow {
	display: none;
}

.ct-solution-cards__card.is-pointed .ct-solution-cards__glow {
	opacity: 1;
}

/* --- Número de fondo ---------------------------------------------------- */

.ct-solution-cards__num {
	position: absolute;
	top: 6px;
	right: 14px;
	z-index: -1;
	font-family: var(--ct-font-display);
	font-size: 5.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ct-accent);
	opacity: 0.07;
	transition: opacity var(--ct-t-base), transform var(--ct-t-base);
	pointer-events: none;
}

.ct-solution-cards__card:hover .ct-solution-cards__num {
	opacity: 0.13;
	transform: translateY(2px) scale(1.04);
}

/* --- Piezas de la tarjeta ----------------------------------------------- */

.ct-solution-cards__top {
	display: flex;
	align-items: center;
	gap: var(--ct-space-3);
}

.ct-solution-cards__icon {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: var(--ct-r-md);
	background: var(--ct-accent-soft);
	color: var(--ct-accent);
	transition: transform var(--ct-t-base), background var(--ct-t-base), color var(--ct-t-base), box-shadow var(--ct-t-base);
}

.ct-solution-cards__icon svg { width: 24px; height: 24px; }
.ct-solution-cards__icon i { font-size: 22px; }

.ct-solution-cards__card:hover .ct-solution-cards__icon,
.ct-solution-cards__card:focus-within .ct-solution-cards__icon {
	background: var(--ct-accent);
	color: #fff;
	transform: translateY(-2px) rotate(-4deg);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--ct-accent) 32%, transparent);
}

/* Un SVG subido a la biblioteca se pinta como <img> y no hereda el color: si
   viene negro, sobre el fondo de color desaparece. El interruptor del panel lo
   lleva a blanco puro. Los iconos de la galería no pasan por acá. */
.ct-solution-cards--icon-invert .ct-solution-cards__card:hover .ct-solution-cards__icon img,
.ct-solution-cards--icon-invert .ct-solution-cards__card:focus-within .ct-solution-cards__icon img {
	filter: brightness(0) invert(1);
}

.ct-solution-cards__tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: var(--ct-r-pill);
	background: var(--ct-accent-soft);
	color: var(--ct-accent);
	font-size: var(--ct-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ct-solution-cards__name {
	margin: 0;
	font-size: var(--ct-fs-lg);
	line-height: var(--ct-lh-snug);
	color: var(--ct-ink);
}

.ct-solution-cards__card-text {
	margin: 0;
	color: var(--ct-body);
	line-height: var(--ct-lh-base);
}

/* --- Puntos que se despliegan ------------------------------------------- */

/* De 0fr a 1fr: la lista se mide sola, sin alto fijo que después se descuadre
   al cambiar el texto. */
.ct-solution-cards__details {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ct-t-base), opacity var(--ct-t-base);
	opacity: 0;
}

.ct-solution-cards__points {
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ct-space-2);
	font-size: var(--ct-fs-sm);
	color: var(--ct-muted);
}

.ct-solution-cards__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--ct-space-2);
}

.ct-solution-cards__points svg {
	flex: none;
	margin-top: 3px;
	color: var(--ct-accent);
}

.ct-solution-cards__card:hover .ct-solution-cards__details,
.ct-solution-cards__card:focus-within .ct-solution-cards__details,
.ct-solution-cards--points-open .ct-solution-cards__details {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* En pantalla táctil no hay "pasar el mouse": los puntos van siempre puestos,
   o quedarían escondidos para siempre. */
@media (hover: none) {

	.ct-solution-cards__details {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

/* --- Enlace ------------------------------------------------------------- */

.ct-solution-cards__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ct-space-2);
	margin-top: auto;
	padding-top: var(--ct-space-2);
	color: var(--ct-accent);
	font-size: var(--ct-fs-sm);
	font-weight: 700;
}

.ct-solution-cards__arrow {
	transition: transform var(--ct-t-base);
}

.ct-solution-cards__card:hover .ct-solution-cards__arrow,
.ct-solution-cards__card:focus-within .ct-solution-cards__arrow {
	transform: translateX(4px);
}

/* --- Entrada escalonada -------------------------------------------------
   Las tarjetas suben una tras otra cuando la sección llega a pantalla. El
   retardo sale de `--ct-i`, el índice que pone el widget en cada tarjeta. */

.ct-solution-cards--reveal.is-js .ct-solution-cards__card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s var(--ct-ease), transform 0.5s var(--ct-ease);
	transition-delay: calc(var(--ct-i, 0) * 90ms);
}

.ct-solution-cards--reveal.is-in .ct-solution-cards__card {
	opacity: 1;
	transform: none;
}

/* Terminada la entrada, la tarjeta vuelve a su transición corta: con los 500 ms
   de la entrada, la inclinación seguiría al cursor medio segundo tarde. */
.ct-solution-cards--reveal.is-settled .ct-solution-cards__card {
	transition: transform var(--ct-t-base), box-shadow var(--ct-t-base), border-color var(--ct-t-base);
}

/* --- Elevación e inclinación -------------------------------------------- */

/* Sin puntero fino —teléfonos y tablets— no hay inclinación: queda el realce
   al tocar, que es lo que ese gesto espera. */
@media (hover: hover) and (pointer: fine) {

	.ct-solution-cards--fx-glow .ct-solution-cards__card:hover,
	.ct-solution-cards--fx-none .ct-solution-cards__card:hover {
		transform: translateY(calc(-1 * var(--ct-lift)));
	}

	/* El JS escribe en `--ct-rx` y `--ct-ry` un factor entre -1 y 1; acá se
	   multiplica por los grados del panel. La elevación va en la misma
	   transformación: dos `transform` sobre el mismo elemento se pisan, y el
	   último gana. */
	.ct-solution-cards--fx-tilt .ct-solution-cards__card.is-pointed {
		transform:
			translateY(calc(-1 * var(--ct-lift)))
			rotateX(calc(var(--ct-rx, 0) * var(--ct-tilt)))
			rotateY(calc(var(--ct-ry, 0) * var(--ct-tilt)));
	}
}

.ct-solution-cards__card:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: 3px;
}

/* --- Pantallas angostas -------------------------------------------------- */

@media (max-width: 1024px) {

	.ct-solution-cards__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {

	.ct-solution-cards--align-split .ct-solution-cards__header {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 860px) {

	.ct-solution-cards__grid--2,
	.ct-solution-cards__grid--3,
	.ct-solution-cards__grid--4 {
		grid-template-columns: 1fr;
	}

	.ct-solution-cards__num {
		font-size: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ct-solution-cards__card,
	.ct-solution-cards__icon,
	.ct-solution-cards__details,
	.ct-solution-cards__arrow,
	.ct-solution-cards__num,
	.ct-solution-cards__glow {
		transition: none;
	}

	/* Quieto y a la vista: ni entrada escalonada ni inclinación. */
	.ct-solution-cards--reveal.is-js .ct-solution-cards__card {
		opacity: 1;
		transform: none;
	}

	.ct-solution-cards--fx-tilt .ct-solution-cards__card.is-pointed {
		transform: none;
	}
}