/* Contoda Planes — frontend.
 * Solo el bloque de planes: sin títulos, header ni footer (eso vive en Elementor).
 * Paleta y tipografía de contoda.co (Poppins, tonos claros, pasteles suaves).
 * Selectores prefijados con .cp-planes para ganarle a los estilos globales
 * del theme/kit de Elementor (ej. botones oscuros).
 */

.cp-planes {
	--cp-morado: #7c3aed;
	--cp-morado-2: #a06cf5;
	--cp-verde: #12c2a4;
	--cp-naranja: #f5a623;
	--cp-rojo: #f0564a;
	--cp-texto: #4a5568;
	--cp-titulo: #2d3748;
	--cp-gris: #a0aec0;
	--cp-borde: #eef0f4;
	--cp-detail-font: 12px;
	color: var(--cp-texto);
	max-width: 1320px;
	margin: 0 auto;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Animación de entrada suave (cambio de precio, cambio de industria) */
@keyframes cpFadeUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cp-planes .cp-swap {
	animation: cpFadeUp .4s var(--cp-ease, ease);
}

.cp-ind-panel.cp-swap {
	animation: cpFadeUp .45s cubic-bezier(.22, 1, .36, 1);
}


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

/* Blindaje: ningún botón del bloque hereda estilos del theme */
.cp-planes button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	background: none;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

/* Alternador de precios: solo se ve el periodo activo */
.cp-planes[data-period="anual"] .cp-per-trim,
.cp-planes[data-period="trim"] .cp-per-anual {
	display: none;
}

/* Fila de cabecera: el negocio a la izquierda, la forma de pago a la derecha.
   Apilados y centrados se comían media pantalla de móvil antes de que se viera
   un solo precio; compartiendo fila ocupan el alto de uno. */
.cp-planes .cp-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin: 0 0 24px;
}

/* El toggle traía su propio centrado y su aire de abajo: aquí los pone la fila. */
.cp-planes .cp-cab .cp-toggle {
	margin: 0;
}

/* Con uno solo de los dos —sin toggle, o sin nombre— se centra como antes.
   Va DESPUÉS de la regla del toggle: las dos pesan lo mismo (tres clases), así
   que si fuera antes, el margin:0 de arriba le ganaría por orden y el toggle
   solitario se quedaría pegado a la izquierda. */
.cp-planes .cp-cab > :only-child {
	margin-left: auto;
	margin-right: auto;
}

/* Nombre del negocio: en horizontal para que ocupe el alto de una sola línea.
   Conserva la pastilla de menta del icono de la pantalla inicial, que es lo
   que lo liga con la opción que el visitante acaba de tocar. */
.cp-planes .cp-ind-cabecera {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	margin: 0;
	text-align: left;
}

.cp-planes .cp-ind-cabecera-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #dcf4ed;
	font-size: 20px;
	line-height: 1;
}

.cp-planes .cp-ind-cabecera-texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cp-planes .cp-ind-cabecera-pre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--cp-gris);
}

.cp-planes h2.cp-ind-cabecera-tit {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--cp-titulo);
}

@media (max-width: 900px) {
	.cp-planes .cp-cab {
		gap: 12px 16px;
		margin-bottom: 18px;
	}

	.cp-planes .cp-ind-cabecera-ico {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		font-size: 17px;
	}

	.cp-planes h2.cp-ind-cabecera-tit {
		font-size: 18px;
	}
}

/* En el teléfono no caben en la misma línea: el nombre se queda a la
   izquierda y el toggle, que es un control, se centra en la suya. */
@media (max-width: 640px) {
	.cp-planes .cp-cab .cp-toggle {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Cintillo de promoción */
.cp-planes .cp-promo {
	width: -moz-max-content;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 18px;
	background: var(--cp-promo, #f5a623);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 8px 26px;
	border-radius: 999px;
	text-align: center;
	box-shadow: 0 8px 18px -10px var(--cp-promo, #f5a623);
}

/* CTA secundaria de WhatsApp */
.cp-planes a.cp-btn-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 9px;
	width: 100%;
	color: #25d366;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.cp-planes a.cp-btn-wa:hover {
	text-decoration: underline;
}

.cp-planes .cp-wa-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}

/* Toggle anual / trimestral — control segmentado */
/* Tercer nivel: no es navegación, es un modificador del precio. Va neutro
   —pista gris, pastilla blanca— para no competir con las dos decisiones de
   arriba. El gancho comercial lo lleva la pastilla del descuento. */
.cp-planes .cp-toggle {
	display: flex;
	align-items: center;
	width: -moz-max-content;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 32px;
	background: #f1f3f6;
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
	flex-wrap: wrap;
	justify-content: center;
}

.cp-planes button.cp-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #5b6b7f;
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.cp-planes button.cp-toggle-btn:hover {
	background: rgba(255, 255, 255, .65);
	color: #343a40;
}

.cp-planes button.cp-toggle-btn.is-active {
	background: #fff;
	color: #343a40;
	box-shadow: 0 2px 6px -2px rgba(52, 58, 64, .22);
}

/* La opción anual, cuando está elegida, lleva un lavado de menta apenas
   perceptible: la distingue del trimestral sin romper el tono neutro que
   mantiene a este control en el tercer nivel de la jerarquía. */
.cp-planes button.cp-toggle-btn.is-active[data-period="anual"] {
	background: linear-gradient(115deg, #ffffff 0%, #ffffff 48%, #f7fdfb 100%);
	box-shadow: 0 2px 6px -2px rgba(11, 146, 114, .15);
}

/* El descuento: lo único con color en este control, para que la vista se
   incline al pago anual. */
.cp-planes .cp-toggle-badge {
	display: inline-block;
	background: linear-gradient(120deg, #11d1a4, #0b9272);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 9px;
	line-height: 1.25;
	white-space: nowrap;
	box-shadow: 0 4px 10px -5px rgba(11, 146, 114, .9);
}

/* Cuando esa opción no está elegida, el descuento se ve pero sin gritar */
.cp-planes button.cp-toggle-btn:not(.is-active) .cp-toggle-badge {
	background: #dcf4ed;
	color: #0b9272;
	box-shadow: none;
}

/* Tarjetas */
.cp-planes .cp-cards {
	display: grid;
	grid-template-columns: repeat(var(--cp-cols, 4), minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 26px;
	align-items: start;
	padding-top: 6px;
}

/* En desktop el contenedor no recorta: la tarjeta se eleva en hover y el
   borde/sombra deben verse completos (el scroll solo aplica en móvil) */
.cp-planes .cp-cards.cp-scroll {
	overflow: visible;
}

/* Aviso de deslizar: en escritorio las tarjetas caben todas y sobra. */
.cp-planes .cp-cards-desliza {
	display: none;
}

@media (max-width: 900px) {
	.cp-planes .cp-cards-desliza {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		margin: 0 0 10px;
		font-size: 12.5px;
		font-weight: 600;
		color: var(--cp-gris);
		transition: opacity .35s ease;
	}

	/* Cumplido su papel, se retira: el JS la apaga al primer deslizamiento
	   y también si las tarjetas resultaron caber sin desplazamiento. */
	.cp-planes .cp-cards-desliza.is-oculta {
		opacity: 0;
		pointer-events: none;
	}

	/* Mismo trazo que el cheurón de los acordeones, apuntando a la derecha */
	.cp-planes .cp-cards-desliza-flecha {
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		border-top: 2px solid var(--cp-morado);
		border-right: 2px solid var(--cp-morado);
		transform: rotate(45deg);
		animation: cpDesliza 1.5s ease-in-out infinite;
	}
}

/* El vaivén va sobre el cheurón YA girado: en un elemento rotado 45°,
   translate(x, -x) resulta en un movimiento horizontal puro. */
@keyframes cpDesliza {
	0%,
	100% {
		transform: rotate(45deg) translate(0, 0);
		opacity: .5;
	}
	50% {
		transform: rotate(45deg) translate(3px, -3px);
		opacity: 1;
	}
}

/* Flecha de "siguiente plan", flotando sobre el borde derecho del carrusel.
   El aviso de texto solo alcanza a quien lo lee; esta se entiende sin leer.
   La zona es el ancla: el carrusel se desplaza por dentro y la flecha se
   queda quieta encima de la tarjeta que asoma. */
.cp-planes .cp-cards-zona {
	position: relative;
}

.cp-planes button.cp-cards-sig {
	display: none;
}

@media (max-width: 900px) {
	.cp-planes button.cp-cards-sig {
		position: absolute;
		/* A la altura del precio: es donde está mirando el visitante, y queda
		   muy por encima del final de una tarjeta más alta que la pantalla. */
		top: 150px;
		right: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .93);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		box-shadow: 0 6px 20px -6px rgba(45, 55, 72, .4);
		cursor: pointer;
		transition: opacity .35s ease;
		animation: cpLlamaFlecha 1.9s ease-in-out infinite;
	}

	/* Cumplido su papel de llamar la atención deja de moverse, pero sigue
	   sirviendo de botón mientras queden tarjetas a la derecha. */
	.cp-planes button.cp-cards-sig.is-quieta {
		animation: none;
	}

	/* En la última tarjeta ya no tiene a dónde llevar. */
	.cp-planes button.cp-cards-sig.is-oculta {
		opacity: 0;
		pointer-events: none;
	}

	.cp-planes .cp-cards-sig-flecha {
		width: 9px;
		height: 9px;
		/* Corrido 2px a la izquierda: al girar 45° el cheurón se ve descentrado
		   hacia la derecha dentro del círculo. */
		margin-left: -2px;
		border-top: 2.5px solid var(--cp-morado);
		border-right: 2.5px solid var(--cp-morado);
		transform: rotate(45deg);
	}
}

/* Latido suave: se asoma hacia la derecha y crece apenas, como invitando. */
@keyframes cpLlamaFlecha {
	0%,
	100% {
		transform: translateX(0) scale(1);
		box-shadow: 0 6px 20px -6px rgba(45, 55, 72, .4);
	}
	50% {
		transform: translateX(-4px) scale(1.06);
		box-shadow: 0 8px 22px -6px rgba(124, 58, 237, .5);
	}
}

.cp-planes .cp-card {
	position: relative;
	/* overflow visible: los tooltips "?" pueden salirse de la tarjeta */
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cp-borde);
	border-radius: 16px;
	padding: 32px 22px 26px;
	text-align: center;
	scroll-snap-align: start;
	box-shadow: 0 3px 12px -10px rgba(45, 55, 72, .07);
	transition: transform .25s ease, box-shadow .25s ease;
}

/* Tinte pastel superior con el color del plan, como en contoda.co/planes */
.cp-planes .cp-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 150px;
	background: linear-gradient(180deg, var(--cp-accent), transparent);
	opacity: .06;
	pointer-events: none;
	border-radius: 16px 16px 0 0;
}

.cp-planes .cp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -18px rgba(45, 55, 72, .16);
}

/* Plan destacado: destello de luz que barre la tarjeta cada ~7s.
   Animamos background-position (no un elemento móvil), así el brillo queda
   contenido en la tarjeta y respeta las esquinas redondeadas. */
@keyframes cpShine {
	0%,
	48% {
		background-position: 190% 0;
	}
	96%,
	100% {
		background-position: -90% 0;
	}
}

.cp-planes .cp-card.cp-destacada::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	pointer-events: none;
	background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
	background-size: 280% 100%;
	background-repeat: no-repeat;
	background-position: 190% 0;
	animation: cpShine 5.5s ease-in-out infinite;
	animation-delay: 1s;
}

.cp-planes .cp-card-top {
	position: relative;
}

/* Slot del badge siempre presente: las 4 tarjetas alinean precio y secciones
   a la misma altura, tenga o no etiqueta el plan */
.cp-planes .cp-badge-slot {
	min-height: 24px;
	margin-top: 6px;
}

/* Descripción del plan: "card" sutil con borde degradado que se desvanece
   (guiño a los acordeones, sin serlo) para darle un poco más de presencia */
.cp-planes .cp-card-desc {
	margin: 10px 0 0;
	padding: 9px 13px;
	font-size: 13px;
	line-height: 1.55;
	color: #6e7480;
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	border: 1px solid transparent;
	background:
		linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)) padding-box,
		linear-gradient(180deg, #dfe2e8, rgba(223, 226, 232, 0)) border-box;
}

/* Etiquetas de sección dentro de la tarjeta (estilo ContaPyme) */
.cp-planes .cp-sec-label {
	position: relative;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cp-gris);
	margin: 2px 4px 8px;
}

.cp-planes h3.cp-card-nombre {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cp-accent);
	line-height: 1.25;
}

.cp-planes .cp-badge {
	display: inline-block;
	background: var(--cp-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 14px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cp-planes .cp-price {
	position: relative;
	font-size: 30px;
	font-weight: 700;
	color: var(--cp-titulo);
	margin-top: 8px;
	line-height: 1.15;
}

.cp-planes .cp-price-nota {
	position: relative;
	font-size: 14px;
	color: var(--cp-gris);
	min-height: 21px;
	margin: 2px 0 16px;
}

/* Ítems destacados dentro de la tarjeta */
.cp-planes ul.cp-items {
	position: relative;
	list-style: none;
	margin: 4px 0 16px;
	padding: 0;
	text-align: left;
	flex: 1;
}

.cp-planes .cp-item-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 4px;
}

.cp-planes .cp-item-row:not(:last-child) {
	border-bottom: 1px solid var(--cp-borde);
}

.cp-planes .cp-ico {
	flex: 0 0 20px;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
}

.cp-planes .cp-ico-check { color: var(--cp-verde); }
.cp-planes .cp-ico-star  { color: var(--cp-naranja); }
.cp-planes .cp-ico-star2 { color: var(--cp-morado); }
.cp-planes .cp-ico-x     { color: var(--cp-rojo); }

.cp-planes .cp-item-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.cp-planes .cp-item-titulo {
	font-size: 14px;
	font-weight: 500;
	color: var(--cp-titulo);
}

.cp-planes .cp-item-desc {
	font-size: 12px;
	color: var(--cp-gris);
	line-height: 1.45;
}

/* Acordeones por categoría dentro de la tarjeta (estilo ContaPyme) */
.cp-planes .cp-card-accs {
	position: relative;
	margin: 0 0 18px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cp-planes .cp-mini-acc {
	border: 1px solid var(--cp-borde);
	border-radius: 10px;
	background: #fff;
	/* overflow visible para que los tooltips "?" no se recorten */
}

.cp-planes .cp-mini-acc .cp-mini-head {
	border-radius: 9px;
}

.cp-planes .cp-mini-acc.is-open .cp-mini-head {
	border-radius: 9px 9px 0 0;
}

.cp-planes button.cp-mini-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	color: var(--cp-titulo);
	padding: 9px 12px;
	cursor: pointer;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s ease;
}

.cp-planes button.cp-mini-head:hover {
	background: #f8f6fd;
	color: var(--cp-morado);
}

/* El título manda: antes se cortaba en "Restaura…" porque el contador ocupaba
   ancho fijo. Ahora el título parte en dos líneas y el contador se abrevia. */
.cp-planes .cp-mini-title {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.25;
}

.cp-planes .cp-mini-count {
	flex: 0 0 auto;
	background: #f3f0fb;
	color: var(--cp-morado);
	font-size: 10px;
	font-weight: 600;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* En tarjetas angostas queda solo el número. */
@media (max-width: 1180px) {
	.cp-planes .cp-mini-count-txt {
		display: none;
	}
}

.cp-planes ul.cp-mini-body {
	list-style: none;
	margin: 0;
	padding: 4px 12px 10px;
	border-top: 1px solid var(--cp-borde);
}

.cp-planes .cp-mini-body li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 13px;
	color: var(--cp-texto);
}

.cp-planes .cp-mini-off .cp-mini-nombre {
	color: var(--cp-gris);
}

/* Botón Elegir plan */
.cp-planes .cp-card-cta {
	position: relative;
	margin-top: auto;
}

.cp-planes a.cp-btn,
.cp-planes span.cp-btn {
	display: inline-block;
	border: 1.5px solid var(--cp-accent);
	color: var(--cp-accent);
	background: #fff;
	border-radius: 8px;
	padding: 10px 30px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.cp-planes a.cp-btn:hover {
	background: var(--cp-accent);
	color: #fff;
	box-shadow: 0 8px 18px -10px var(--cp-accent);
	text-decoration: none;
}

.cp-planes .cp-btn-disabled {
	opacity: .5;
	cursor: default;
}

/* Botón Ver detalle — barra morada como en la página actual */
.cp-planes button.cp-detail-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(95deg, var(--cp-morado), var(--cp-morado-2));
	color: #fff;
	border-radius: 10px;
	padding: 13px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s ease;
}

.cp-planes button.cp-detail-toggle:hover {
	opacity: .92;
}

.cp-planes .cp-detail-plus {
	font-size: 17px;
	line-height: 1;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .2);
	border-radius: 6px;
}

/* Acordeones de la tabla comparativa */
.cp-planes .cp-detail {
	margin-top: 14px;
	font-size: var(--cp-detail-font);
}

.cp-planes .cp-acc {
	border: 1px solid var(--cp-borde);
	border-radius: 12px;
	margin-bottom: 10px;
	background: #fff;
}

.cp-planes button.cp-acc-head {
	border-radius: 11px;
}

.cp-planes .cp-acc.is-open button.cp-acc-head {
	border-radius: 11px 11px 0 0;
}

.cp-planes button.cp-acc-head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: #fff;
	color: var(--cp-titulo);
	padding: 14px 18px;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease;
}

.cp-planes button.cp-acc-head:hover {
	background: #faf9fe;
}

.cp-planes .cp-acc.is-open button.cp-acc-head {
	background: #f8f6fd;
	border-bottom: 1px solid var(--cp-borde);
}

.cp-planes .cp-acc-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--cp-titulo);
	white-space: nowrap;
}

.cp-planes .cp-acc-teaser {
	flex: 1;
	color: var(--cp-gris);
	font-size: var(--cp-detail-font);
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-planes .cp-acc-chevron {
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--cp-morado);
	border-bottom: 2px solid var(--cp-morado);
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex: 0 0 auto;
}

.cp-planes .cp-acc.is-open > button .cp-acc-chevron,
.cp-planes .cp-mini-acc.is-open > button .cp-acc-chevron,
.cp-planes .cp-adic.is-open > button .cp-acc-chevron {
	transform: rotate(-135deg);
}

/* Tabla comparativa */
.cp-planes table.cp-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cp-detail-font);
	table-layout: fixed;
	margin: 0;
}

.cp-planes .cp-tabla th,
.cp-planes .cp-tabla td {
	padding: 9px 12px;
	text-align: center;
	border: 0;
	border-top: 1px solid var(--cp-borde);
	background: transparent;
}

.cp-planes .cp-tabla thead th {
	border-top: 0;
	font-weight: 600;
	color: var(--cp-accent, var(--cp-texto));
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: var(--cp-detail-font);
	padding-top: 12px;
}

.cp-planes .cp-tabla tbody tr:hover td {
	background: #faf9fe;
}

.cp-planes .cp-tabla .cp-col-feature {
	text-align: left;
	width: 34%;
	font-weight: 400;
	color: var(--cp-texto);
}

/* Estados ✓ / ✗ */
.cp-planes .cp-si,
.cp-planes .cp-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	flex: 0 0 20px;
}

.cp-planes .cp-si {
	background: rgba(18, 194, 164, .10);
	color: var(--cp-verde);
}

.cp-planes .cp-no {
	background: rgba(240, 86, 74, .08);
	color: var(--cp-rojo);
}

.cp-planes .cp-texto {
	font-weight: 600;
	color: var(--cp-titulo);
	font-size: 12px;
}

/* Selector de industrias por pestañas (modelo +Control) */
.cp-selector {
	max-width: 1320px;
	margin: 0 auto;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	--cp-morado: #7c3aed;
	--cp-morado-2: #a06cf5;
	--cp-texto: #4a5568;
	--cp-titulo: #2d3748;
	--cp-gris: #a0aec0;
	--cp-borde: #eef0f4;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ===== Recuperado: estilos base del selector, tooltips y adicionales ===== */

.cp-selector .cp-ind-tabs {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 22px;
}

.cp-selector button.cp-ind-tab {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	background: #f6f4fb;
	border: 1px solid transparent;
	color: #4a5568;
	border-radius: 999px;
	padding: 9px 19px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}

.cp-selector button.cp-ind-tab:hover {
	background: #efeaf9;
	color: #7c3aed;
}

/* Contorno y no relleno: es navegación dentro de una vista ya elegida, y no
   debe pesar tanto como las tarjetas de plan que tiene debajo. */
.cp-selector button.cp-ind-tab.is-active {
	background: #fff;
	border-color: var(--cp-cat, #7c3aed);
	color: var(--cp-cat, #7c3aed);
	box-shadow: 0 2px 8px -4px var(--cp-cat, #7c3aed);
}

/* Desplegable de industria (solo móvil; en desktop van las pestañas).
   Desplegable propio: el <select> nativo no permite estilizar su lista. */
.cp-selector .cp-ind-select-wrap {
	display: none;
	position: relative;
	margin: 0 0 24px;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	z-index: 20;
}

.cp-selector button.cp-ind-dd {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	font-family: inherit;
	text-align: left;
	background: #fff;
	border: 1px solid #e4e6ea;
	border-radius: 14px;
	padding: 11px 18px;
	cursor: pointer;
	box-shadow: 0 4px 14px -10px rgba(45, 55, 72, .35);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cp-selector .cp-ind-select-wrap.is-open button.cp-ind-dd {
	border-color: #cdbdf6;
	box-shadow: 0 6px 18px -10px rgba(124, 58, 237, .45);
}

.cp-selector .cp-ind-dd-cap {
	position: absolute;
	top: 9px;
	left: 19px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #a0aec0;
	pointer-events: none;
}

.cp-selector .cp-ind-dd-valor {
	flex: 1;
	margin-top: 13px;
	font-size: 15px;
	font-weight: 600;
	color: #2d3748;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cp-selector button.cp-ind-dd .cp-acc-chevron {
	margin-left: auto;
	margin-top: 8px;
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid #7c3aed;
	border-bottom: 2px solid #7c3aed;
	transform: rotate(45deg);
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.cp-selector .cp-ind-select-wrap.is-open .cp-acc-chevron {
	transform: rotate(-135deg);
}

/* Panel de opciones */
.cp-selector ul.cp-ind-lista {
	list-style: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	background: #fff;
	border: 1px solid #eceef2;
	border-radius: 14px;
	box-shadow: 0 18px 40px -20px rgba(45, 55, 72, .45);
	max-height: 58vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	animation: cpDropIn .25s cubic-bezier(.22, 1, .36, 1);
}

@keyframes cpDropIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cp-selector .cp-ind-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #4a5568;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cp-selector .cp-ind-opt:hover,
.cp-selector .cp-ind-opt:focus {
	background: #f6f4fb;
	color: #7c3aed;
	outline: none;
}

.cp-selector .cp-ind-opt.is-active {
	background: linear-gradient(100deg, #7c3aed, #a06cf5);
	color: #fff;
	font-weight: 600;
}

/* Check de la opción activa */
.cp-selector .cp-ind-opt.is-active::after {
	content: "";
	margin-left: auto;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-1px, -1px);
	flex: 0 0 auto;
}

/* Modo lista abierta (categorías desplegadas estilo +Control) */
.cp-planes .cp-mini-acc.is-static {
	border: 0;
	border-radius: 0;
}

.cp-planes .cp-mini-static {
	padding: 10px 4px 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cp-titulo);
	border-bottom: 1px solid var(--cp-borde);
}

.cp-planes .cp-mini-acc.is-static ul.cp-mini-body {
	border-top: 0;
	padding: 4px 4px 6px;
}

/* Tooltips "?" */
.cp-planes .cp-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgba(18, 194, 164, .15);
	color: var(--cp-verde);
	font-size: 10px;
	font-weight: 700;
	cursor: help;
	position: relative;
	vertical-align: middle;
	margin-left: 4px;
}

/* El globo del tooltip vive en una capa pegada al <body>, no dentro del "?".
   Antes era un ::after del propio "?" y desaparecía en cuanto había un
   contenedor con scroll por encima: la tabla del detalle y el carrusel de
   tarjetas en móvil scrollean en horizontal, y overflow-x:auto obliga al
   navegador a recortar también en vertical. El texto estaba, pero el globo
   se dibujaba fuera de la caja y nadie lo veía nunca.
   Lo coloca front.js, que además lo mantiene dentro de la pantalla. */
.cp-tip-flotante {
	position: fixed;
	top: 0;
	left: -9999px;
	z-index: 999999;
	max-width: 260px;
	padding: 8px 11px;
	border-radius: 8px;
	background: #2d3748;
	color: #fff;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 10px 26px -12px rgba(45, 55, 72, .7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease;
}

.cp-tip-flotante.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Módulos y servicios adicionales — dos tarjetas modernas lado a lado */
.cp-planes .cp-adics {
	margin-top: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: start;
}

.cp-planes .cp-adic {
	border: 1px solid var(--cp-borde);
	border-radius: 14px;
	background: #fff;
	/* overflow visible para que los tooltips "?" no se recorten */
	transition: box-shadow .2s ease;
}

.cp-planes button.cp-adic-toggle {
	border-radius: 13px;
}

.cp-planes .cp-adic.is-open button.cp-adic-toggle {
	border-radius: 13px 13px 0 0;
}

.cp-planes .cp-adic.is-open {
	box-shadow: 0 12px 26px -18px rgba(124, 58, 237, .28);
}

.cp-planes button.cp-adic-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: #fff;
	color: var(--cp-titulo);
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease;
}

.cp-planes button.cp-adic-toggle:hover {
	background: #faf9fe;
}

.cp-planes .cp-adic.is-open button.cp-adic-toggle {
	background: #f8f6fd;
	border-bottom: 1px solid var(--cp-borde);
}

.cp-planes .cp-adic-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(124, 58, 237, .10);
	color: var(--cp-morado);
	font-size: 13px;
	flex: 0 0 30px;
}

.cp-planes .cp-adic-label {
	flex: 1;
}

.cp-planes .cp-adic-body {
	padding: 4px 6px 8px;
}

.cp-planes ul.cp-adic-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.cp-planes .cp-adic-lista li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	transition: background .15s ease;
}

.cp-planes .cp-adic-lista li:hover {
	background: #faf9fe;
}

.cp-planes .cp-adic-lista li:not(:last-child) {
	border-bottom: 1px solid var(--cp-borde);
	border-radius: 0;
}

.cp-planes .cp-adic-nombre {
	font-weight: 500;
	color: var(--cp-titulo);
}

.cp-planes .cp-adic-precio {
	color: #5b3a9e; /* morado profundo: destaca sin chillar */
	font-weight: 600;
	white-space: nowrap;
}

/* Video del bloque: entre los adicionales y la salida a Facturación/Nómina.
   Ocupa el ancho completo del bloque, igual que la barra "Ver detalle Planes"
   y las tarjetas de adicionales que tiene encima: cualquier medida propia lo
   dejaba desalineado con todo lo demás. El tope son los 1320px de .cp-planes. */
.cp-planes .cp-video {
	margin: 34px 0 0;
	text-align: center;
}

.cp-planes h3.cp-video-titulo {
	margin: 0 0 14px;
	padding: 0;
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	color: var(--cp-titulo);
	line-height: 1.3;
}

.cp-planes .cp-video-marco {
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--cp-borde);
	background: #0f1115;
	box-shadow: 0 18px 40px -26px rgba(45, 55, 72, .5);
	line-height: 0;
}

/* height:auto conserva la proporción del archivo: si el equipo sube uno que
   no es 16:9, se ve completo en vez de recortado. */
.cp-planes video.cp-video-el {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (max-width: 900px) {
	.cp-planes .cp-video {
		margin-top: 26px;
	}

	.cp-planes h3.cp-video-titulo {
		font-size: 17px;
	}

	.cp-planes .cp-video-marco {
		border-radius: 12px;
	}
}

/* Accesibilidad */
.cp-planes button:focus-visible,
.cp-planes a:focus-visible {
	outline: 2px solid var(--cp-morado-2);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cp-planes *,
	.cp-selector * {
		transition: none !important;
		animation: none !important;
	}
	.cp-planes .cp-card:hover {
		transform: none;
	}
}

/* Contenedores con scroll horizontal (móvil) */
.cp-planes .cp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
	/* Aire de 20px contra los bordes de la pantalla */
	.cp-selector {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Las pestañas ocupan mucho: en móvil se usa el desplegable */
	.cp-selector .cp-ind-tabs {
		display: none;
	}

	.cp-selector .cp-ind-select-wrap {
		display: block;
	}

	.cp-planes {
		padding-left: 20px;
		padding-right: 20px;
	}

	.cp-ind-panel .cp-planes {
		padding-left: 0;
		padding-right: 0;
	}

	.cp-planes .cp-adics {
		grid-template-columns: 1fr;
	}

	.cp-planes .cp-cards,
	.cp-planes .cp-cards.cp-scroll {
		display: flex;
		scroll-snap-type: x mandatory;
		padding: 4px 8px 12px;
		overflow-x: auto;
	}

	/* Snap centrado: al soltar el dedo, la tarjeta queda centrada en pantalla */
	.cp-planes .cp-card {
		flex: 0 0 84%;
		max-width: 330px;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.cp-planes .cp-card:hover {
		transform: none;
	}

	.cp-planes table.cp-tabla {
		min-width: 560px;
		table-layout: auto;
	}

	/* Primera columna fija al deslizar la tabla */
	.cp-planes .cp-tabla .cp-col-feature {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		background: #fff;
		z-index: 1;
		min-width: 160px;
		box-shadow: 2px 0 0 var(--cp-borde);
	}

	.cp-planes .cp-acc-teaser {
		display: none;
	}
}


/* Entrada al cargar/aparecer en pantalla: rápida y sutil (solo opacity y
   transform — GPU, sin relayout). Va al FINAL del archivo para ganarle a las
   transiciones propias de cada elemento; el JS retira las clases al terminar
   para no interferir con el hover. */
.cp-planes .cp-pre {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s var(--cp-ease, ease), transform .45s var(--cp-ease, ease);
	will-change: opacity, transform;
}

.cp-planes .cp-pre.cp-in {
	opacity: 1;
	transform: none;
}

/* ===========================================================================
   PANTALLA INICIAL — "¿Cuál es tu tipo de negocio?"
   Requisito de Julian (24 jul): una sola pantalla, sin scroll, minimalista,
   que invite a elegir antes de mostrar nada.
   Paleta tomada del home de contoda.co: lavado de menta muy suave, titulares
   en azul-tinta, y el MORADO como color de acción y de estado activo. El verde
   se usa solo como decoración — quedó decidido que no sirve para estados
   activos (rediseño v1.5, rechazado).
   =========================================================================== */
/* display:flex le gana a la regla [hidden]{display:none} del navegador: sin
   esto, al elegir una opción la pantalla se volvía invisible pero seguía
   ocupando el alto completo y empujaba los planes muy abajo. */
.cp-gate[hidden],
.cp-selector-body[hidden] {
	display: none !important;
}

.cp-gate {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: var(--cp-alto, 100svh);
	overflow: hidden;
	isolation: isolate;

	/* Paleta tomada de signup.contoda.com.co, la línea gráfica nueva */
	--cp-menta: #11d1a4;
	--cp-menta-honda: #0b9272;
	--cp-menta-suave: #dcf4ed;
	--cp-menta-humo: #effdfa;
	--cp-tinta: #343a40;
	--cp-borde-suave: #dbe3ea;

	/* Fondo a lo ancho de la ventana, contenido dentro de los 1320px del sitio.
	   El desfase lo mide front.js con clientWidth (excluye la barra de scroll,
	   que es lo que rompe el truco de 100vw). */
	width: var(--cp-bleed-w, 100%);
	margin-left: calc(var(--cp-bleed-l, 0px) * -1);
	margin-right: calc(var(--cp-bleed-r, 0px) * -1);
}

/* Lavado de menta como el hero del sitio, más dos halos difusos.
   Todo en pseudo-elementos: no añade nodos ni pesa en el HTML. */
/* Arranca en blanco puro y el verde crece hacia abajo: el bloque no siempre
   queda pegado al menú, y con el verde arriba se veía un corte de color contra
   lo que tuviera encima. */
.cp-gate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90% 70% at 14% 100%, rgba(17, 209, 164, .11), transparent 60%),
		radial-gradient(80% 55% at 100% 88%, rgba(11, 146, 114, .06), transparent 64%),
		linear-gradient(180deg, #ffffff 0%, #ffffff 22%, #fbfefd 58%, #f4fdfa 100%);
}

/* Luces de fondo en movimiento — solo en la mitad inferior.
   El degradado de la pantalla era estático; estas tres manchas verdes se
   desplazan muy despacio y en tiempos distintos, así que nunca se repiten en
   el mismo punto y el fondo respira sin distraer.
   La capa se desvanece hacia arriba con una máscara: el borde superior sigue
   blanco puro y no corta contra el menú del sitio. */
.cp-gate-aurora {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 66%;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
}

.cp-gate-aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(64px);
	/* Solo se anima transform: lo resuelve el compositor y no repinta la página */
	will-change: transform;
}

.cp-gate-aurora span:nth-child(1) {
	width: 46vmax;
	height: 34vmax;
	left: -12vmax;
	bottom: -14vmax;
	background: radial-gradient(circle, rgba(17, 209, 164, .22), transparent 70%);
	animation: cpAuroraA 11s ease-in-out infinite alternate;
}

.cp-gate-aurora span:nth-child(2) {
	width: 40vmax;
	height: 30vmax;
	right: -10vmax;
	bottom: -10vmax;
	background: radial-gradient(circle, rgba(11, 146, 114, .15), transparent 72%);
	animation: cpAuroraB 14s ease-in-out infinite alternate;
}

.cp-gate-aurora span:nth-child(3) {
	width: 32vmax;
	height: 26vmax;
	left: 38%;
	bottom: -16vmax;
	background: radial-gradient(circle, rgba(78, 233, 196, .18), transparent 74%);
	animation: cpAuroraC 9s ease-in-out infinite alternate;
}

@keyframes cpAuroraA {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(19vmax, -7vmax, 0) scale(1.2); }
}

@keyframes cpAuroraB {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-17vmax, -9vmax, 0) scale(.88); }
}

@keyframes cpAuroraC {
	from { transform: translate3d(0, 0, 0) scale(.92); }
	to   { transform: translate3d(-13vmax, -6vmax, 0) scale(1.26); }
}

@media (max-width: 900px) {
	.cp-gate-aurora {
		height: 58%;
	}

	.cp-gate-aurora span {
		filter: blur(48px);
	}
}

.cp-gate.cp-gate-saliendo {
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity .3s ease, transform .3s var(--cp-ease);
	pointer-events: none;
}

/* El banner, si va dentro, toma su alto y la pregunta se queda con el resto:
   así la primera pantalla sigue sin scroll. */
.cp-gate > .cp-banner {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.cp-gate-inner {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	/* Más aire abajo que arriba: centrado óptico, se lee mejor que el
	   centrado geométrico exacto. */
	padding: 24px 20px 56px;
	min-height: 0;
}

/* La imagen de Ajustes, si la hay, es un telón de fondo de toda la pantalla:
   el contenido va centrado y ya no hay columna lateral. */
.cp-gate-fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .08;
	pointer-events: none;
}

.cp-gate-fondo img,
.cp-gate-fondo .cp-gate-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Texto y opciones ---------- */
/* Todo centrado: título, frase, opciones y la salida a Facturación/Nómina */
.cp-gate-body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

@keyframes cpGateSube {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Titular con degradado de marca. El color plano queda de respaldo para los
   navegadores que no recortan el fondo al texto. */
.cp-gate .cp-gate-titulo {
	font-family: inherit;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1.1;
	letter-spacing: -.025em;
	font-weight: 700;
	color: var(--cp-tinta);
	margin: 0 0 14px;
	padding-bottom: .08em;
	background-color: transparent;
	/* Dos capas recortadas al texto: el brillo que viaja, y debajo el degradado
	   de marca. Como el fondo de la página es claro, el destello es un verde
	   luminoso y no blanco —si fuera blanco las letras desaparecerían al pasar. */
	background-image:
		linear-gradient(100deg, transparent 40%, rgba(78, 233, 196, .95) 50%, transparent 60%),
		linear-gradient(to left, #00d0a1, #007f6e, #2e2e2e);
	background-size: 200% 100%, 100% 100%;
	background-repeat: no-repeat, no-repeat;
	background-position: 150% 0, 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	animation:
		cpGateSube .6s var(--cp-ease) both,
		cpBrilloTitulo 4.5s linear 1s infinite;
}

/* Destello de izquierda a derecha.
   Ojo con los porcentajes: cuando el fondo es más ancho que el elemento, la
   escala de background-position se invierte —150% deja la banda fuera por la
   IZQUIERDA y -50% fuera por la DERECHA—. Por eso el recorrido va de mayor a
   menor; al revés el brillo viajaba hacia atrás.
   Con velocidad constante (linear) cruza el título en ~1,5 s y descansa el
   resto del ciclo de 4,5 s. */
@keyframes cpBrilloTitulo {
	0%,
	54% {
		background-position: 150% 0, 0 0;
	}
	100% {
		background-position: -50% 0, 0 0;
	}
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.cp-gate .cp-gate-titulo {
		-webkit-text-fill-color: transparent;
	}
}

/* Barrita de marca bajo el titular, como los acentos del sitio */
.cp-gate .cp-gate-titulo::after {
	content: "";
	display: block;
	width: 76px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cp-menta), var(--cp-menta-honda));
	animation: cpGateBarra .8s var(--cp-ease) .25s both;
	transform-origin: left center;
}

@keyframes cpGateBarra {
	from { transform: scaleX(0); opacity: 0; }
	to   { transform: scaleX(1); opacity: 1; }
}

.cp-gate .cp-gate-sub {
	font-size: 17px;
	line-height: 1.6;
	color: #5b6b7f;
	margin: 22px auto 34px;
	max-width: 58ch;
	animation: cpGateSube .6s var(--cp-ease) .08s both;
}

.cp-gate-opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
	gap: 12px;
	text-align: left;
}

.cp-gate button.cp-gate-opt {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--cp-borde-suave);
	border-radius: 12px;
	padding: 15px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cp-tinta);
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(52, 58, 64, .05);
	transition: transform .28s var(--cp-ease), border-color .22s ease, box-shadow .28s var(--cp-ease);
	animation: cpGateSube .55s var(--cp-ease) both;
	animation-delay: calc(.16s + var(--cp-i, 0) * .045s);
}

/* Tinte que entra al pasar el mouse */
.cp-gate button.cp-gate-opt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(17, 209, 164, .12), rgba(11, 146, 114, .06));
	opacity: 0;
	transition: opacity .28s ease;
}

.cp-gate button.cp-gate-opt:hover,
.cp-gate button.cp-gate-opt:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(17, 209, 164, .55);
	box-shadow: 0 18px 34px -20px rgba(11, 146, 114, .45);
	outline: none;
}

.cp-gate button.cp-gate-opt:hover::before,
.cp-gate button.cp-gate-opt:focus-visible::before {
	opacity: 1;
}

.cp-gate button.cp-gate-opt:active {
	transform: translateY(-1px);
}

/* Los emojis los escribe el equipo y no siempre combinan entre sí: la pastilla
   de menta les da un marco común y hace que la fila se lea pareja. */
.cp-gate-opt-ico {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--cp-menta-suave);
	font-size: 20px;
	line-height: 1;
	transition: transform .28s var(--cp-ease), background .22s ease;
}

.cp-gate button.cp-gate-opt:hover .cp-gate-opt-ico {
	transform: scale(1.08) rotate(-4deg);
	background: #ddf6ee;
}

.cp-gate-opt-nombre {
	position: relative;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: none;
}

/* Flechita que asoma al pasar el mouse */
/* Flotante y no en el flujo: si ocupara ancho, nombres como "Parqueaderos"
   se partirían a la mitad en las tarjetas angostas. */
.cp-gate button.cp-gate-opt::after {
	content: "\2192";
	position: absolute;
	right: 13px;
	top: 50%;
	margin-top: -.62em;
	font-size: 15px;
	line-height: 1;
	color: var(--cp-menta-honda);
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity .24s ease, transform .24s var(--cp-ease);
}

.cp-gate button.cp-gate-opt:hover::after,
.cp-gate button.cp-gate-opt:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* La destacada ("General") ocupa la fila entera y pesa más. Es la única con el
   contenido centrado: en una fila tan ancha, el icono y el nombre pegados al
   borde izquierdo se leían como una opción más que quedó suelta. */
.cp-gate button.cp-gate-opt.is-destacada {
	grid-column: 1 / -1;
	justify-content: center;
	text-align: center;
	background: linear-gradient(120deg, #ffffff, #fcfffe);
	border-color: rgba(17, 209, 164, .24);
	font-size: 16px;
	padding: 20px;
	box-shadow: 0 6px 18px -14px rgba(52, 58, 64, .18);
}

.cp-gate button.cp-gate-opt.is-destacada .cp-gate-opt-ico {
	width: 46px;
	height: 46px;
	font-size: 23px;
	background: var(--cp-menta-humo);
}

/* ---------- Salida alterna: Facturación y Nómina ----------
   No se preguntan, se muestran: van debajo y más discretas que la pregunta
   principal ("no quiero preguntarle eso antes, sino ahí mostrarlo", 22:05). */
.cp-gate-alt {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--cp-borde-suave);
	text-align: center;
	animation: cpGateSube .6s var(--cp-ease) .42s both;
}

.cp-gate-alt-titulo {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cp-tinta);
}

.cp-gate-alt-texto {
	display: block;
	font-size: 13.5px;
	color: #8a97a8;
	margin-top: 3px;
}

.cp-gate-alt-opts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.cp-gate button.cp-gate-alt-opt {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid rgba(17, 209, 164, .4);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cp-menta-honda);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .24s var(--cp-ease), box-shadow .24s ease;
}

.cp-gate button.cp-gate-alt-opt:hover,
.cp-gate button.cp-gate-alt-opt:focus-visible {
	background: var(--cp-menta-humo);
	border-color: var(--cp-menta);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -14px rgba(11, 146, 114, .55);
	outline: none;
}

.cp-gate-alt-ico {
	font-size: 15px;
	line-height: 1;
}

/* ---------- Volver a elegir ---------- */
.cp-selector button.cp-gate-volver {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: #8a97a8;
	cursor: pointer;
	transition: color .18s ease;
}

.cp-selector button.cp-gate-volver:hover {
	color: #0b9272;
}

/* En anchos medianos la tarjeta se angosta y nombres como "Parqueaderos" o
   "Restaurantes" no caben al lado del icono. Apilarlos les devuelve todo el
   ancho y ninguna palabra se parte. */
@media (max-width: 1100px) {
	.cp-gate button.cp-gate-opt {
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
	}

	.cp-gate button.cp-gate-opt.is-destacada {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.cp-gate button.cp-gate-opt::after {
		top: 15px;
		margin-top: 0;
	}

	.cp-gate button.cp-gate-opt.is-destacada::after {
		top: 50%;
		margin-top: -.62em;
	}
}

@media (max-width: 900px) {
	.cp-gate-inner {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 22px;
		padding: 22px 18px;
	}

	.cp-gate .cp-gate-titulo::after {
		margin: 12px auto 0;
	}

	.cp-gate .cp-gate-sub {
		margin: 16px auto 22px;
		font-size: 15px;
	}

	.cp-gate-opts {
		grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
		gap: 10px;
	}

	.cp-gate button.cp-gate-opt {
		padding: 12px 13px;
		font-size: 13.5px;
		border-radius: 10px;
	}

	.cp-gate-opt-ico {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}

	.cp-gate-alt {
		margin-top: 22px;
		padding-top: 16px;
	}
}

/* Quien pide menos movimiento no ve ninguno */
@media (prefers-reduced-motion: reduce) {
	.cp-gate *,
	.cp-gate::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ===========================================================================
   FACTURACIÓN Y NÓMINA COMO VISTAS APARTE
   Ya no hay conmutador de pastillas encima de los planes: a cada servicio se
   entra desde "¿Solo te falta facturar o pagar la nómina?" y se vuelve con el
   puente del final. Quedan los paneles y los puentes que los enlazan.
   =========================================================================== */
.cp-cat-ico {
	font-size: 15px;
	line-height: 1;
}

.cp-cat-panel.cp-swap {
	animation: cpFadeUp .4s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Puentes entre vistas ----------
   Ahora son el único paso entre los planes y los servicios: al final de los
   planes se ofrecen Facturación y Nómina, y al final de un servicio se vuelve
   a los planes. Van al cierre de cada vista, donde termina la lectura. */
.cp-puentes {
	max-width: 1320px;
	margin: 40px auto 0;
	padding: 24px 20px;
	background: linear-gradient(120deg, #f7fdfb, #faf8ff);
	border: 1px solid rgba(22, 35, 58, .06);
	border-radius: 18px;
	text-align: center;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.cp-puentes-tit {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #16233a;
	margin-bottom: 14px;
}

.cp-puentes-opts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.cp-puentes button.cp-puente {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid rgba(124, 58, 237, .2);
	border-radius: 999px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #7c3aed;
	cursor: pointer;
	transition: transform .24s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .24s ease;
}

.cp-puentes button.cp-puente:hover {
	transform: translateY(-2px);
	border-color: #7c3aed;
	box-shadow: 0 12px 22px -16px rgba(124, 58, 237, .85);
}

.cp-puente-flecha {
	transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}

.cp-puentes button.cp-puente:hover .cp-puente-flecha {
	transform: translateX(3px);
}

.cp-puentes button.cp-puente:hover .cp-puente-atras {
	transform: translateX(-3px);
}

.cp-puentes-volver {
	background: none;
	border: 0;
	padding: 18px 20px 0;
	margin-top: 26px;
	border-top: 1px solid rgba(22, 35, 58, .07);
	border-radius: 0;
}

/* ===========================================================================
   SERVICIOS TRANSVERSALES — Facturación y Nómina Electrónica
   "Tipo cuadro, no tipo lista como los tenemos ahorita, que se ve como muy
   escueto" (Julian, 24 jul 21:04).
   Con 9 tramos, forzar 9 columnas iguales partía las palabras: aquí la rejilla
   se acomoda sola en varias filas y lo que se repite se dice una sola vez.
   =========================================================================== */
.cp-trans {
	max-width: 1320px;
	margin: 0 auto;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	color: #4a5568;
	--cp-borde: #eef0f4;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
}

.cp-trans .cp-trans-intro {
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: #5b6b7f;
	max-width: 62ch;
	margin: 0 auto 30px;
}

.cp-trans .cp-trans-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	align-items: stretch;
}

.cp-trans .cp-trans-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cp-borde);
	border-radius: 16px;
	padding: 18px 16px 16px;
	text-align: center;
	transition: transform .24s var(--cp-ease), box-shadow .24s var(--cp-ease), border-color .2s ease;
	animation: cpFadeUp .5s var(--cp-ease) both;
	animation-delay: calc(var(--cp-i, 0) * .04s);
}

.cp-trans .cp-trans-card:hover {
	transform: translateY(-4px);
	border-color: var(--cp-accent);
	box-shadow: 0 18px 34px -22px var(--cp-accent);
}

.cp-trans .cp-trans-card.cp-destacada {
	border-color: var(--cp-accent);
	box-shadow: 0 12px 28px -20px var(--cp-accent);
}

.cp-trans .cp-badge-slot {
	min-height: 22px;
	margin-bottom: 4px;
}

.cp-trans .cp-badge {
	display: inline-block;
	background: var(--cp-accent);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
}

/* Sin nowrap: etiquetas largas como "Hasta 50 empleados" se parten en dos
   líneas antes que desbordar la tarjeta. */
.cp-trans .cp-trans-cant {
	font-size: 18px;
	font-weight: 700;
	color: #16233a;
	line-height: 1.2;
	text-wrap: balance;
}

.cp-trans .cp-trans-sub {
	font-size: 11.5px;
	color: #a0aec0;
	margin-top: 3px;
	line-height: 1.35;
}

.cp-trans .cp-trans-precio {
	font-size: 24px;
	font-weight: 700;
	color: var(--cp-accent);
	margin-top: 12px;
	line-height: 1.1;
	white-space: nowrap;
}

.cp-trans .cp-trans-nota {
	font-size: 11.5px;
	color: #a0aec0;
	margin-top: 1px;
}

/* Lo propio de ese tramo (lo común se dice una vez, más abajo) */
.cp-trans ul.cp-trans-extra {
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed var(--cp-borde);
	text-align: left;
}

.cp-trans ul.cp-trans-extra li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12px;
	padding: 3px 0;
	line-height: 1.35;
}

.cp-trans .cp-ico {
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 1.35;
}

.cp-trans .cp-ico-check { color: #12c2a4; }
.cp-trans .cp-ico-star { color: #f5a623; }
.cp-trans .cp-ico-star2 { color: #7c3aed; }
.cp-trans .cp-ico-x { color: #f0564a; }

.cp-trans .cp-trans-cta {
	margin-top: auto;
	padding-top: 14px;
}

.cp-trans a.cp-btn,
.cp-trans span.cp-btn {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border: 1.5px solid var(--cp-accent);
	color: var(--cp-accent);
	background: #fff;
	border-radius: 9px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.cp-trans a.cp-btn:hover {
	background: var(--cp-accent);
	color: #fff;
	box-shadow: 0 10px 20px -12px var(--cp-accent);
	text-decoration: none;
}

.cp-trans .cp-btn-disabled {
	opacity: .45;
	cursor: default;
}

/* Lo que traen todos los paquetes: una sola vez, en franja */
.cp-trans .cp-trans-comunes {
	margin-top: 22px;
	padding: 20px 22px;
	background: linear-gradient(120deg, #f7fdfb, #fbfdff);
	border: 1px solid rgba(22, 35, 58, .06);
	border-radius: 16px;
}

.cp-trans .cp-trans-comunes-tit {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a97a8;
	margin-bottom: 12px;
	text-align: center;
}

.cp-trans .cp-trans-comunes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}

.cp-trans .cp-trans-comunes li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: #4a5568;
}

@media (max-width: 600px) {
	.cp-trans .cp-trans-cards {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 10px;
	}

	.cp-trans .cp-trans-cant { font-size: 16px; }
	.cp-trans .cp-trans-precio { font-size: 20px; }

	.cp-trans .cp-trans-comunes ul {
		justify-content: flex-start;
		gap: 6px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-trans .cp-trans-card {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Invitación a Facturación / Nómina en las landings por industria.
   El cliente reportó que abrir los 17 precios de una, justo debajo de los
   planes, confundía al visitante. Ahora es una sola tarjeta discreta y cada
   servicio se despliega solo si lo piden.
   --------------------------------------------------------------------------- */
.cp-trans-invita {
	max-width: 1320px;
	margin: 44px auto 0;
	font-family: 'Poppins', 'Segoe UI', sans-serif;
	color: #4a5568;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
}

.cp-trans-invita-cara {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 22px 26px;
	background: linear-gradient(120deg, #ffffff, #f7fdfb);
	border: 1px solid #dbe3ea;
	border-radius: 16px;
}

.cp-trans-invita-texto {
	min-width: 0;
}

.cp-trans-invita-titulo {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #343a40;
	line-height: 1.3;
}

.cp-trans-invita-sub {
	display: block;
	font-size: 14px;
	color: #8a97a8;
	margin-top: 3px;
}

.cp-trans-invita-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cp-trans-invita button.cp-trans-abre {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid #dbe3ea;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #4a5568;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, box-shadow .24s ease, transform .24s var(--cp-ease);
}

.cp-trans-invita button.cp-trans-abre:hover,
.cp-trans-invita button.cp-trans-abre:focus-visible {
	transform: translateY(-2px);
	border-color: var(--cp-accent);
	color: var(--cp-accent);
	box-shadow: 0 12px 22px -16px var(--cp-accent);
	outline: none;
}

.cp-trans-invita button.cp-trans-abre.is-active {
	border-color: var(--cp-accent);
	color: var(--cp-accent);
	background: #fbfefe;
	transform: none;
}

.cp-trans-abre-ico {
	font-size: 16px;
	line-height: 1;
}

.cp-trans-invita .cp-acc-chevron {
	transition: transform .24s var(--cp-ease);
}

.cp-trans-invita button.cp-trans-abre.is-active .cp-acc-chevron {
	transform: rotate(180deg);
}

/* El detalle desplegado: separado de la tarjeta para que se lea como una
   sección aparte y no como parte del bloque de planes. */
.cp-trans-detalle {
	padding-top: 30px;
}

.cp-trans-detalle .cp-trans-intro {
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.cp-trans-invita-cara {
		flex-direction: column;
		align-items: stretch;
		padding: 20px;
	}

	.cp-trans-invita-opts {
		flex-direction: column;
	}

	.cp-trans-invita button.cp-trans-abre {
		justify-content: space-between;
		width: 100%;
	}
}

/* ===========================================================================
   BLINDAJE DE LOS SELECTORES
   Reportado el 25 jul: al activar una sección aparecía una línea blanca fina
   dentro de la pastilla. En un entorno limpio no se reproduce, así que sale de
   los estilos globales del theme / kit de Elementor, que suelen pintar bordes,
   anillos de foco o pseudo-elementos sobre cualquier <button>.
   Aquí se neutraliza todo eso con selectores más específicos, y el foco por
   teclado se vuelve a dibujar limpio y por fuera de la pastilla.
   =========================================================================== */
.cp-selector .cp-ind-tabs button.cp-ind-tab:focus,
.cp-selector .cp-ind-tabs button.cp-ind-tab:active,
.cp-planes .cp-toggle button.cp-toggle-btn:focus,
.cp-planes .cp-toggle button.cp-toggle-btn:active {
	outline: 0;
	text-shadow: none;
	background-clip: padding-box;
}

.cp-planes .cp-toggle button.cp-toggle-btn::before,
.cp-planes .cp-toggle button.cp-toggle-btn::after {
	content: none;
	display: none;
}

/* El foco de teclado sí debe verse: anillo limpio, por fuera y del color del
   propio control, sin tocar el interior de la pastilla. */
.cp-selector .cp-ind-tabs button.cp-ind-tab:focus-visible,
.cp-planes .cp-toggle button.cp-toggle-btn:focus-visible {
	outline: 2px solid var(--cp-cat, #7c3aed);
	outline-offset: 2px;
}

/* ===========================================================================
   AJUSTES DE MÓVIL
   El 80% del tráfico de la página de planes entra desde el teléfono, así que
   estas reglas no son un remate: son el caso principal.
   Medido en un iPhone de 390x844 con un menú de 64px encima.
   =========================================================================== */

/* --- Zonas táctiles: nada por debajo de 44px de alto --- */
@media (max-width: 900px) {
	.cp-planes button.cp-toggle-btn {
		min-height: 44px;
		padding: 11px 18px;
	}

	.cp-planes button.cp-mini-head,
	.cp-planes .cp-mini-head {
		min-height: 44px;
	}

	.cp-planes a.cp-btn-wa {
		min-height: 44px;
		padding: 10px 12px;
		margin-top: 6px;
	}

	.cp-planes a.cp-btn,
	.cp-planes span.cp-btn,
	.cp-trans a.cp-btn,
	.cp-trans span.cp-btn,
	.cp-selector button.cp-ind-tab,
	.cp-trans-invita button.cp-trans-abre,
	.cp-puentes button.cp-puente,
	.cp-gate button.cp-gate-alt-opt,
	.cp-selector button.cp-gate-volver {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* El "?" de ayuda también se toca: en escritorio son 15px */
	.cp-planes .cp-tip {
		min-width: 22px;
		min-height: 22px;
		line-height: 22px;
	}

	/* --- Letra: nada por debajo de 11.5px en pantalla pequeña --- */
	.cp-planes .cp-toggle-badge {
		font-size: 11px;
		padding: 4px 10px;
	}

	.cp-planes .cp-badge,
	.cp-trans .cp-badge {
		font-size: 11.5px;
	}

	.cp-planes .cp-sec-label {
		font-size: 11.5px;
	}
}

/* --- La pantalla inicial tiene que caber sin scroll ---
   Con 8 industrias más la salida a Facturación/Nómina, en un teléfono se
   pasaba 161px del alto disponible. Aquí se recorta todo lo prescindible:
   el titular baja de tamaño, se retira la barrita decorativa y las opciones
   se compactan. El contenido y el orden no cambian. */
@media (max-width: 640px) {
	.cp-gate-inner {
		padding: 14px 16px 22px;
	}

	.cp-gate .cp-gate-titulo {
		font-size: clamp(25px, 7.2vw, 32px);
		line-height: 1.12;
		margin-bottom: 8px;
	}

	/* La barrita se come 22px de alto y no aporta información */
	.cp-gate .cp-gate-titulo::after {
		display: none;
	}

	.cp-gate .cp-gate-sub {
		font-size: 14px;
		line-height: 1.45;
		margin: 0 auto 18px;
		max-width: 40ch;
	}

	.cp-gate-opts {
		gap: 8px;
	}

	.cp-gate button.cp-gate-opt {
		padding: 10px 12px;
		font-size: 13px;
		gap: 8px;
		/* En el teléfono el icono va al lado y no arriba: ahorra una línea
		   por tarjeta, que con ocho industrias son cuatro filas menos. */
		flex-direction: row;
		align-items: center;
	}

	.cp-gate-opt-ico {
		width: 30px;
		height: 30px;
		border-radius: 9px;
		font-size: 15px;
	}

	.cp-gate button.cp-gate-opt.is-destacada {
		padding: 12px;
		font-size: 14.5px;
	}

	.cp-gate button.cp-gate-opt.is-destacada .cp-gate-opt-ico {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}

	.cp-gate-alt {
		margin-top: 18px;
		padding-top: 14px;
	}

	.cp-gate-alt-titulo {
		font-size: 13.5px;
	}

	.cp-gate-alt-texto {
		font-size: 12.5px;
	}

	.cp-gate-alt-opts {
		gap: 8px;
		margin-top: 10px;
	}

	.cp-gate button.cp-gate-alt-opt {
		padding: 10px 14px;
		font-size: 12.5px;
		min-height: 44px;
	}
}

/* Teléfonos angostos (360px y menos): un punto más de compresión */
@media (max-width: 380px) {
	.cp-gate-opts {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	}

	.cp-gate button.cp-gate-opt {
		font-size: 12.5px;
		padding: 9px 10px;
	}

	.cp-gate-opt-ico {
		width: 27px;
		height: 27px;
		font-size: 14px;
	}
}

/* ===========================================================================
   Con pantalla inicial, fuera el selector de industrias.
   La industria ya se eligió en la pregunta de entrada; repetir la fila de
   pastillas —más el banner y el toggle de pago— dejaba tres controles
   apilados antes de ver un solo precio. Para cambiar de negocio se
   vuelve atrás con "← Ver otro tipo de negocio", que reabre la pregunta.
   Si el widget se usa SIN pantalla inicial, las pestañas siguen siendo la
   única navegación y se conservan.
   =========================================================================== */
.cp-selector.cp-con-gate .cp-ind-tabs,
.cp-selector.cp-con-gate .cp-ind-select-wrap {
	display: none;
}

/* Al quedar como único camino de vuelta, el enlace gana algo de presencia */
.cp-selector.cp-con-gate button.cp-gate-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 22px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid #dbe3ea;
	border-radius: 999px;
	color: #5b6b7f;
	transition: border-color .2s ease, color .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.cp-selector.cp-con-gate button.cp-gate-volver:hover {
	border-color: #11d1a4;
	color: #0b9272;
	transform: translateX(-2px);
}

/* En el teléfono ese botón va centrado: es el único camino de regreso a la
   pregunta y, arrinconado contra el borde, se lee como un resto de la pantalla
   anterior. En escritorio se queda a la izquierda, donde empieza la lectura.
   Va aquí, después de la regla de arriba, porque es esa la que fija los
   márgenes laterales en 0 y el display en línea. */
@media (max-width: 900px) {
	.cp-selector button.cp-gate-volver,
	.cp-selector.cp-con-gate button.cp-gate-volver {
		display: flex;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ===========================================================================
   Respiros del bloque
   =========================================================================== */

/* El banner de Elementor iba pegado al enlace de volver: necesita su aire */
.cp-selector-body > .cp-banner {
	display: block;
	margin-bottom: 28px;
}

/* Y el bloque no debe quedar pegado a lo que venga después —el pie del sitio,
   normalmente—, sobre todo cuando cierra con la salida a Facturación/Nómina. */
.cp-selector-body,
.cp-trans-invita {
	padding-bottom: 25px;
}

@media (max-width: 900px) {
	.cp-selector-body > .cp-banner {
		margin-bottom: 20px;
	}
}