/* =========================================================================
   SUBE · Landing Pages transaccionales
   Línea gráfica: Montserrat + morado #6D0FF2 (tema phlox-pro-child)

   NOTA DE ESPECIFICIDAD
   Los títulos y enlaces se declaran siempre con el contexto de sección
   (.sube-hero, .sube-sec--dark, .sube-cta) para que ninguna regla genérica
   del tema ni de esta hoja los pise. Por eso verás selectores largos.
   ========================================================================= */

:root {
	--sube-purple: #6d0ff2;
	--sube-purple-dark: #5005f2;
	--sube-purple-deep: #4a05e1;
	--sube-purple-night: #2c0069;
	--sube-ink: #23282d;
	--sube-body: #444444;
	--sube-muted: #6b7280;
	--sube-grey: #f2f2f2;
	--sube-line: #e4e4e7;
	--sube-radius: 6px;
	--sube-wrap: 1180px;
	--sube-font: "Montserrat", Sans-serif;
}

.sube-lp {
	font-family: var(--sube-font);
	color: var(--sube-body);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
}

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

.sube-wrap {
	width: 100%;
	max-width: var(--sube-wrap);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}

.sube-wrap--narrow {
	max-width: 860px;
}

/* =========================================================================
   1. TIPOGRAFÍA
   ========================================================================= */

.sube-lp h1,
.sube-lp h2,
.sube-lp h3,
.sube-lp h4,
.sube-lp summary {
	font-family: var(--sube-font);
	margin: 0 0 .6em;
	line-height: 1.2;
}

/* Color por defecto solo en secciones claras (especificidad baja a propósito) */
.sube-lp .sube-sec h2,
.sube-lp .sube-sec h3 {
	color: var(--sube-ink);
}

.sube-lp h2 {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.4px;
}

.sube-lp h3 {
	font-size: 19px;
	font-weight: 700;
}

.sube-lp p {
	margin: 0 0 1.1em;
}

.sube-eyebrow {
	font-family: var(--sube-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.sube-eyebrow::before {
	content: '';
	width: 26px;
	height: 2px;
	background: currentColor;
	display: inline-block;
	opacity: .8;
}

.sube-sec__intro {
	max-width: 780px;
	font-size: 17px;
	color: var(--sube-muted);
	margin-bottom: 34px;
}

.sube-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--sube-muted);
	margin-top: 18px;
	padding: 14px 18px;
	background: #f8f5ff;
	border-left: 3px solid var(--sube-purple);
	border-radius: 0 var(--sube-radius) var(--sube-radius) 0;
}

.sube-note .sube-ico {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 2px;
	color: var(--sube-purple);
}

/* --- Etiqueta de sección (rompe el bloque de texto) --------------------- */

.sube-tag {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 7px 14px 7px 11px;
	border-radius: 100px;
	background: #f2ebff;
	border: 1px solid #e0cfff;
	color: var(--sube-purple-deep);
	font-family: var(--sube-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1;
}

.sube-tag .sube-ico {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}

.sube-sec--alt .sube-tag {
	background: #fff;
}

.sube-tag--light {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .28);
	color: #e6d9ff;
}

/* --- Icono base -------------------------------------------------------- */

.sube-ico {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* --- Curva de separación entre secciones -------------------------------
   Replica el shape divider "curve" de Elementor que ya usa el home.
   El path es el mismo; la rotación de 180 grados en --bottom es la que
   aplica Elementor con data-negative="false".
   ---------------------------------------------------------------------- */

.sube-shape {
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	direction: ltr;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

.sube-shape--bottom {
	bottom: 0;
	transform: rotate(180deg);
}

.sube-shape--top {
	top: 0;
}

.sube-shape svg {
	display: block;
	width: calc(100% + 1.3px);
	height: 72px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================================
   2. ENLACES POR CONTEXTO
   ========================================================================= */

/* Secciones claras: morado */
.sube-lp .sube-sec a:not(.sube-btn):not(.sube-rel) {
	color: var(--sube-purple);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(109, 15, 242, .38);
	transition: text-decoration-color .18s ease;
}

.sube-lp .sube-sec a:not(.sube-btn):not(.sube-rel):hover {
	text-decoration-color: var(--sube-purple);
}

/* Fondos oscuros o morados: blanco. Nunca morado sobre morado. */
.sube-lp .sube-hero a:not(.sube-btn),
.sube-lp .sube-sec--dark a:not(.sube-btn),
.sube-lp .sube-cta a:not(.sube-btn) {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255, 255, 255, .55);
}

.sube-lp .sube-hero a:not(.sube-btn):hover,
.sube-lp .sube-sec--dark a:not(.sube-btn):hover,
.sube-lp .sube-cta a:not(.sube-btn):hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}

/* =========================================================================
   3. BOTONES
   ========================================================================= */

.sube-lp .sube-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	border-radius: 4px;
	font-family: var(--sube-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, color .18s ease,
		border-color .18s ease, box-shadow .18s ease;
}

.sube-lp .sube-btn:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.sube-lp .sube-btn::after {
	content: '';
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .18s ease;
}

.sube-lp .sube-btn:hover::after {
	transform: translateX(4px);
}

/* --- Primario: blanco sólido. Máximo contraste sobre el hero morado. --- */
.sube-lp .sube-btn--primary,
.sube-lp .sube-btn--light {
	background: #ffffff;
	color: var(--sube-purple-deep);
	border-color: #ffffff;
	box-shadow: 0 10px 26px rgba(20, 0, 60, .28);
}

.sube-lp .sube-btn--primary:hover,
.sube-lp .sube-btn--light:hover {
	background: #f5f0ff;
	border-color: #f5f0ff;
	color: var(--sube-purple-deep);
	box-shadow: 0 14px 32px rgba(20, 0, 60, .34);
}

.sube-lp .sube-btn--primary::after,
.sube-lp .sube-btn--light::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a05e1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- Secundario: contorno blanco grueso, claramente distinto. --- */
.sube-lp .sube-btn--ghost {
	background: rgba(255, 255, 255, .08);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .85);
	backdrop-filter: blur(2px);
}

.sube-lp .sube-btn--ghost:hover {
	background: rgba(255, 255, 255, .2);
	border-color: #ffffff;
	color: #ffffff;
}

.sube-lp .sube-btn--ghost::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* =========================================================================
   4. BREADCRUMB
   Vive dentro de .sube-hero__copy, sobre el fondo morado. Al estar en la
   columna de texto queda siempre por debajo del header superpuesto del
   tema, sin depender de ningún cálculo de altura.
   ========================================================================= */

.sube-breadcrumb {
	background: transparent;
	font-size: 12.5px;
	padding: 0;
	margin: 0 0 18px;
}

.sube-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sube-breadcrumb li + li::before {
	content: '›';
	margin-right: 8px;
	color: rgba(255, 255, 255, .5);
}

/* Gana a la regla general de enlaces del hero. */
.sube-lp .sube-hero .sube-breadcrumb a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.sube-lp .sube-hero .sube-breadcrumb a:hover {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sube-breadcrumb span {
	color: rgba(255, 255, 255, .95);
	font-weight: 600;
}

/* El eyebrow va justo debajo del breadcrumb: menos aire entre los dos. */
.sube-breadcrumb + .sube-eyebrow {
	margin-top: 0;
}

/* =========================================================================
   5. HERO
   ========================================================================= */

.sube-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(900px 520px at 88% 12%, rgba(157, 90, 255, .55) 0%, rgba(157, 90, 255, 0) 62%),
		linear-gradient(118deg, var(--sube-purple-night) 0%, var(--sube-purple-deep) 52%, var(--sube-purple) 100%);
	color: #fff;
	padding: 82px 0 150px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Hueco para el header superpuesto del tema.

   Phlox monta #site-elementor-header.aux-overlay-header con
   position:absolute; top:0 encima del contenido (103px de alto, fondo
   transparente y menú en blanco). El hero sale a sangre por debajo, como
   en el home, y aquí reservamos su altura para que el breadcrumb y el H1
   no queden tapados.

   La regla usa el selector de hermano adyacente, así que solo se aplica
   cuando ese header existe de verdad. Si algún día el tema deja de usar
   header superpuesto, el hero recupera su padding normal solo.
   ------------------------------------------------------------------ */
.aux-overlay-header + .sube-lp .sube-hero,
.aux-overlay-header + * .sube-hero {
	padding-top: 126px;
}

/* Trama de puntos */
.sube-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: linear-gradient(160deg, #000 0%, transparent 62%);
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 62%);
	pointer-events: none;
}

/* Órbitas decorativas */
.sube-hero::after {
	content: '';
	position: absolute;
	right: -180px;
	top: 50%;
	transform: translateY(-50%);
	width: 720px;
	height: 720px;
	z-index: 0;
	opacity: .55;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1.4'%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3Ccircle cx='300' cy='300' r='190'/%3E%3Ccircle cx='300' cy='300' r='262'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.5'%3E%3Ccircle cx='300' cy='180' r='4'/%3E%3Ccircle cx='490' cy='300' r='3'/%3E%3Ccircle cx='170' cy='390' r='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.sube-hero__grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 56px;
	align-items: center;
}

.sube-hero .sube-eyebrow {
	color: #e6d9ff;
}

/* H1 — selector con contexto para ganar a cualquier regla genérica */
.sube-lp .sube-hero .sube-hero__title,
.sube-lp .sube-hero h1 {
	font-family: var(--sube-font);
	font-size: 46px;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: -.5px;
	margin-bottom: 20px;
	text-shadow: 0 2px 18px rgba(20, 0, 60, .3);
}

.sube-hero__lead {
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .93);
	max-width: 640px;
}

.sube-hero__bullets {
	list-style: none;
	margin: 26px 0 34px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sube-hero__bullets li {
	position: relative;
	padding-left: 32px;
	font-size: 15.5px;
	color: rgba(255, 255, 255, .93);
}

.sube-hero__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .18em;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	background-color: rgba(255, 255, 255, .16);
	border-radius: 50%;
}

.sube-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sube-hero__trust {
	margin-top: 24px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .84);
	padding-left: 26px;
	position: relative;
}

.sube-hero__trust::before {
	content: '';
	position: absolute;
	left: 0;
	top: .1em;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sube-hero__kpis {
	display: grid;
	gap: 14px;
}

.sube-kpi {
	position: relative;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--sube-radius);
	padding: 20px 22px 20px 68px;
	backdrop-filter: blur(4px);
}

.sube-kpi__ico {
	position: absolute;
	left: 20px;
	top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.sube-kpi__ico .sube-ico {
	width: 19px;
	height: 19px;
}

.sube-kpi__value {
	display: block;
	font-family: var(--sube-font);
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}

.sube-kpi__label {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.45;
}

/* =========================================================================
   6. SECCIONES
   ========================================================================= */

/* Fondo explícito: la curva de la sección contigua se rellena en blanco,
   así que las secciones claras no pueden quedar transparentes. */
.sube-sec {
	padding: 76px 0;
	position: relative;
	background: #ffffff;
}

.sube-sec--alt {
	background: var(--sube-grey);
}

/* Marca de agua geométrica en la sección "por qué SUBE" */
.sube-sec--mark {
	overflow: hidden;
}

.sube-sec--mark::before {
	content: '';
	position: absolute;
	left: -120px;
	bottom: -140px;
	width: 460px;
	height: 460px;
	z-index: 0;
	opacity: .5;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%236d0ff2' stroke-opacity='0.14' stroke-width='1.4'%3E%3Ccircle cx='200' cy='200' r='90'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='190'/%3E%3C/g%3E%3Cg stroke='%236d0ff2' stroke-opacity='0.2' stroke-width='1.4'%3E%3Cpath d='M200 10v380M10 200h380'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* Acento decorativo bajo cada H2 de sección clara */
.sube-lp .sube-sec > .sube-wrap > h2::after,
.sube-lp .sube-sec > .sube-wrap > .sube-cols__main > h2::after {
	content: '';
	display: block;
	width: 54px;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sube-purple) 0%, #b58bff 100%);
}

.sube-sec--dark {
	background:
		radial-gradient(700px 400px at 10% 0%, rgba(109, 15, 242, .35) 0%, rgba(109, 15, 242, 0) 60%),
		var(--sube-ink);
	overflow: hidden;
	padding: 130px 0;
}

.sube-lp .sube-sec--dark h2,
.sube-lp .sube-sec--dark h3 {
	color: #ffffff;
}

.sube-sec--dark p {
	color: rgba(255, 255, 255, .8);
}

.sube-sec--dark .sube-sec__intro {
	color: rgba(255, 255, 255, .74);
}

.sube-lp .sube-sec--dark > .sube-wrap > h2::after {
	content: '';
	display: block;
	width: 54px;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: linear-gradient(90deg, #b58bff 0%, var(--sube-purple) 100%);
}

.sube-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 48px;
	align-items: start;
}

.sube-cols__main p {
	font-size: 16.5px;
}

/* =========================================================================
   7. CALLOUT
   ========================================================================= */

.sube-callout {
	background: linear-gradient(160deg, #ffffff 0%, #f7f2ff 100%);
	border: 1px solid #e5d9ff;
	border-left: 4px solid var(--sube-purple);
	border-radius: var(--sube-radius);
	padding: 26px 28px;
	box-shadow: 0 8px 26px rgba(80, 5, 242, .07);
}

.sube-lp .sube-callout h3 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--sube-purple-deep);
	display: flex;
	align-items: center;
	gap: 9px;
}

.sube-lp .sube-callout h3::before {
	content: '';
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d0ff2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sube-callout p {
	margin: 0;
	font-size: 15px;
}

/* =========================================================================
   8. GRIDS Y TARJETAS
   ========================================================================= */

.sube-grid {
	display: grid;
	gap: 22px;
}

.sube-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.sube-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.sube-card {
	background: #fff;
	border: 1px solid var(--sube-line);
	border-radius: var(--sube-radius);
	padding: 28px 26px;
	position: relative;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* Marca de agua diagonal en la esquina */
.sube-card::after {
	content: '';
	position: absolute;
	top: -34px;
	right: -34px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: #f6f1ff;
	z-index: 0;
	transition: background .2s ease;
}

.sube-card:hover::after {
	background: #ece0ff;
}

.sube-card > * {
	position: relative;
	z-index: 1;
}

.sube-card__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--sube-purple) 0%, var(--sube-purple-deep) 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(80, 5, 242, .26);
}

.sube-card__ico .sube-ico {
	width: 23px;
	height: 23px;
	stroke-width: 1.7;
}

.sube-card:hover {
	box-shadow: 0 14px 34px rgba(80, 5, 242, .13);
	border-color: #d9c6ff;
	transform: translateY(-3px);
}

.sube-lp .sube-card h3 {
	color: var(--sube-purple-deep);
}

.sube-card p {
	margin: 0;
	font-size: 15px;
}

.sube-benefit {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.sube-benefit__ico {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f2ebff;
	border: 1px solid #e0cfff;
	color: var(--sube-purple-deep);
}

.sube-benefit__ico .sube-ico {
	width: 21px;
	height: 21px;
}

.sube-lp .sube-benefit h3 {
	margin-bottom: .35em;
}

.sube-benefit p {
	margin: 0;
	font-size: 15.5px;
}

/* =========================================================================
   9. TABLA
   ========================================================================= */

.sube-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sube-line);
	border-radius: var(--sube-radius);
	box-shadow: 0 6px 22px rgba(35, 40, 45, .05);
}

.sube-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
	min-width: 640px;
}

.sube-table thead th {
	background: linear-gradient(120deg, var(--sube-purple-deep) 0%, var(--sube-purple) 100%);
	color: #fff;
	font-family: var(--sube-font);
	font-size: 13.5px;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 16px 18px;
}

.sube-table tbody th,
.sube-table tbody td {
	padding: 15px 18px;
	border-top: 1px solid var(--sube-line);
	vertical-align: top;
	text-align: left;
}

.sube-table tbody th {
	font-weight: 700;
	color: var(--sube-ink);
	width: 26%;
}

.sube-table tbody tr:nth-child(even) {
	background: #faf8ff;
}

/* =========================================================================
   10. PROCESO
   ========================================================================= */

.sube-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 26px;
}

.sube-step {
	position: relative;
	padding-top: 8px;
}

/* Línea conectora entre pasos */
.sube-step::before {
	content: '';
	position: absolute;
	top: 30px;
	left: 52px;
	right: -26px;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(181, 139, 255, .55) 0 6px, transparent 6px 12px);
}

.sube-step:last-child::before {
	display: none;
}

.sube-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-family: var(--sube-font);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0;
	color: #ffffff;
	margin-bottom: 20px;
	background: linear-gradient(140deg, var(--sube-purple) 0%, var(--sube-purple-deep) 100%);
	box-shadow: 0 0 0 6px rgba(109, 15, 242, .18);
	position: relative;
	z-index: 1;
}

.sube-lp .sube-step h3 {
	font-size: 17px;
}

.sube-step p {
	font-size: 14.5px;
	margin: 0;
}

/* =========================================================================
   11. CHECKS
   ========================================================================= */

.sube-checks-box {
	background: #fff;
	border: 1px solid var(--sube-line);
	border-radius: var(--sube-radius);
	overflow: hidden;
	box-shadow: 0 8px 26px rgba(35, 40, 45, .06);
}

.sube-checks-box__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 24px;
	background: linear-gradient(120deg, var(--sube-purple-deep) 0%, var(--sube-purple) 100%);
	color: #fff;
	font-family: var(--sube-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.sube-checks-box__head .sube-ico {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
}

.sube-checks {
	list-style: none;
	margin: 0;
	padding: 24px;
	display: grid;
	gap: 13px;
}

.sube-checks li {
	position: relative;
	padding-left: 32px;
	font-size: 15px;
}

.sube-checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .15em;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #f2ebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d0ff2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}

/* =========================================================================
   12. FAQ
   ========================================================================= */

.sube-faq {
	border-top: 1px solid var(--sube-line);
}

.sube-faq__item {
	border-bottom: 1px solid var(--sube-line);
}

.sube-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 48px 20px 0;
	position: relative;
	margin: 0;
	transition: color .18s ease;
}

.sube-faq__item summary::-webkit-details-marker {
	display: none;
}

.sube-lp .sube-faq__item summary h3 {
	display: inline;
	font-size: 17px;
	margin: 0;
	transition: color .18s ease;
}

.sube-lp .sube-faq__item summary:hover h3,
.sube-lp .sube-faq__item[open] summary h3 {
	color: var(--sube-purple-deep);
}

.sube-faq__item summary::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 18px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f2ebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d0ff2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
	transition: transform .22s ease, background-color .18s ease;
}

.sube-faq__item[open] summary::after {
	transform: rotate(180deg);
	background-color: #e2d2ff;
}

.sube-faq__answer {
	padding: 0 48px 24px 0;
}

.sube-faq__answer p {
	margin: 0;
	font-size: 15.5px;
	color: var(--sube-muted);
}

/* =========================================================================
   13. RELACIONADOS
   ========================================================================= */

.sube-lp .sube-rel {
	display: block;
	background: #fff;
	border: 1px solid var(--sube-line);
	border-radius: var(--sube-radius);
	padding: 26px 24px;
	position: relative;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sube-lp .sube-rel:hover {
	border-color: var(--sube-purple);
	text-decoration: none;
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(80, 5, 242, .13);
}

.sube-lp .sube-rel h3 {
	font-size: 17px;
	color: var(--sube-purple-deep);
	margin-bottom: 8px;
}

.sube-rel p {
	font-size: 14.5px;
	color: var(--sube-muted);
	margin: 0 0 18px;
}

.sube-rel__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: #f2ebff;
	color: var(--sube-purple-deep);
	transition: background .2s ease, color .2s ease;
}

.sube-rel__ico .sube-ico {
	width: 22px;
	height: 22px;
}

.sube-lp .sube-rel:hover .sube-rel__ico {
	background: var(--sube-purple);
	color: #fff;
}

.sube-rel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f2ebff;
	color: var(--sube-purple-deep);
	transition: transform .2s ease, background-color .2s ease;
}

.sube-rel__arrow .sube-ico {
	width: 16px;
	height: 16px;
	stroke-width: 2.2;
}

.sube-lp .sube-rel:hover .sube-rel__arrow {
	transform: translateX(5px);
	background-color: #e2d2ff;
}

/* =========================================================================
   14. CTA FINAL
   ========================================================================= */

.sube-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(800px 420px at 15% 110%, rgba(157, 90, 255, .5) 0%, rgba(157, 90, 255, 0) 60%),
		linear-gradient(118deg, var(--sube-purple-deep) 0%, var(--sube-purple) 100%);
	color: #fff;
	text-align: center;
	padding: 140px 0 84px;
}

.sube-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(60% 90% at 50% 50%, transparent 30%, #000 100%);
	-webkit-mask-image: radial-gradient(60% 90% at 50% 50%, transparent 30%, #000 100%);
	pointer-events: none;
}

.sube-cta__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
}

.sube-cta__ico .sube-ico {
	width: 30px;
	height: 30px;
	stroke-width: 1.6;
}

.sube-lp .sube-cta h2 {
	color: #ffffff;
	font-size: 34px;
}

.sube-cta p {
	font-size: 17.5px;
	color: rgba(255, 255, 255, .92);
	margin-bottom: 30px;
}

.sube-cta__note {
	margin: 24px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .86);
}

/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {

	.sube-hero__grid,
	.sube-cols {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.sube-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sube-hero__kpis {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.sube-hero::after {
		right: -320px;
		opacity: .35;
	}

	.sube-step::before {
		display: none;
	}
}

@media (max-width: 680px) {

	.sube-hero {
		padding: 56px 0 90px;
	}

	.aux-overlay-header + .sube-lp .sube-hero,
	.aux-overlay-header + * .sube-hero {
		padding-top: 104px;
	}

	.sube-breadcrumb {
		margin-bottom: 14px;
	}

	.sube-sec--dark {
		padding: 86px 0;
	}

	.sube-cta {
		padding: 96px 0 60px;
	}

	.sube-lp .sube-hero .sube-hero__title,
	.sube-lp .sube-hero h1 {
		font-size: 30px;
	}

	.sube-lp h2,
	.sube-lp .sube-cta h2 {
		font-size: 26px;
	}

	.sube-sec {
		padding: 54px 0;
	}

	.sube-grid--2,
	.sube-grid--3 {
		grid-template-columns: 1fr;
	}

	.sube-lp .sube-btn {
		width: 100%;
	}

	.sube-hero::after {
		display: none;
	}

	.sube-shape svg {
		height: 40px;
	}

	.sube-sec--mark::before {
		display: none;
	}

	.sube-benefit__ico {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
	}
}

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

	.sube-lp * {
		transition: none !important;
	}
}