/**
 * Pro Profile SaaS — capa PRO de marketing (0.99.686)
 *
 * ============================================================
 * QUÉ ES ESTO Y POR QUÉ NO ES UN REESCRITO
 * ------------------------------------------------------------
 * `marketing.css` define 119 clases, y buena parte son rejillas,
 * posicionamiento absoluto y proporciones del mock del teléfono.
 * Rehacer eso a ciegas rompería la maqueta con total seguridad.
 *
 * Así que la estructura se respeta y lo que se reescribe es TODO
 * el lenguaje visual: paleta, profundidad, movimiento y ritmo.
 * Esta hoja carga después y gana por cascada. El resultado es el
 * de una versión nueva; el riesgo, el de una capa reversible.
 *
 * EL CAMBIO GRANDE: UNA SOLA IDENTIDAD
 * ------------------------------------------------------------
 * La landing iba en bosque + teal (#071816 / #0f766e) y el
 * producto —portal, editor, admin— en slate + azul (#0f172a /
 * #2563eb). Eran dos marcas pegadas: el visitante entraba en una
 * página teal, pulsaba «Empezar» y aterrizaba en un producto
 * azul que no se parecía a lo que le habían enseñado.
 *
 * Aquí se redefinen los tokens `--mkt-*` para que apunten a la
 * paleta real del producto. Al ser variables, TODA la hoja
 * anterior se recolorea sola: no hay que tocar sus 214 reglas.
 * El violeta entra como acento, igual que en el editor.
 * ============================================================
 */

/* ------------------------------------------------------------
   1. Reasignación de la paleta
   ------------------------------------------------------------ */
.ppsa-mkt {
	/* Tinta: la misma escala slate del portal. */
	--mkt-ink: #0f172a;
	--mkt-ink-soft: #334155;
	--mkt-muted: #64748b;

	/* Marca: azul del producto, con el violeta como acento. */
	--mkt-teal: #2563eb;
	--mkt-teal-bright: #6366f1;
	--mkt-violet: #7c3aed;

	/* Superficies frías, no verdosas. */
	--mkt-foam: #f1f5f9;
	--mkt-mist: #e2e8f0;
	--mkt-paper: #f8fafc;
	--mkt-line: rgba(15, 23, 42, 0.1);

	/* Profundidad por capas: el original no tenía escala de sombra. */
	--mkt-e1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);
	--mkt-e2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.09);
	--mkt-e3: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 52px rgba(15, 23, 42, 0.14);
	--mkt-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--mkt-radius: 1.25rem;
	/* Ritmo vertical fluido: el aire crece con la pantalla. */
	--mkt-gap: clamp(3rem, 7vw, 6rem);
}

/* ------------------------------------------------------------
   2. Héroe
   ------------------------------------------------------------
   El fondo era un degradado plano en tres paradas. Ahora son dos
   halos de color sobre lienzo claro, que es lo que da esa
   sensación de profundidad de las landings actuales.
   ------------------------------------------------------------ */
.ppsa-mkt-hero__plane {
	background:
		radial-gradient(120% 80% at 12% 0%, rgba(99, 102, 241, 0.16) 0%, transparent 55%),
		radial-gradient(100% 70% at 92% 12%, rgba(124, 58, 237, 0.14) 0%, transparent 52%),
		linear-gradient(180deg, #ffffff 0%, var(--mkt-paper) 60%, #eef2ff 100%);
}

.ppsa-mkt-hero__glow--a { background: rgba(37, 99, 235, 0.34); }
.ppsa-mkt-hero__glow--b { background: rgba(124, 58, 237, 0.26); }

/* El grano se reduce: a máxima opacidad ensuciaba el texto. */
.ppsa-mkt-hero__grain {
	opacity: 0.16;
	background-image: radial-gradient(rgba(15, 23, 42, 0.07) 0.8px, transparent 0.8px);
}

.ppsa-mkt-brand {
	background: linear-gradient(120deg, var(--mkt-ink) 30%, var(--mkt-teal) 70%, var(--mkt-violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Reserva: si el recorte falla, el título se ve en tinta, no invisible. */
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.ppsa-mkt-brand {
		color: var(--mkt-ink);
		-webkit-text-fill-color: currentColor;
	}
}

/* ------------------------------------------------------------
   3. Botones
   ------------------------------------------------------------
   Antes: tinta plana y un `translateY` al pasar. Ahora tienen
   peso, sombra que responde y un brillo que cruza al pulsar.
   ------------------------------------------------------------ */
.ppsa-mkt-btn {
	position: relative;
	overflow: hidden;
	padding: 0.85rem 1.5rem;
	border-radius: 0.85rem;
	letter-spacing: -0.01em;
	transition: transform 0.2s var(--mkt-ease), box-shadow 0.2s var(--mkt-ease),
		background 0.2s var(--mkt-ease), border-color 0.2s var(--mkt-ease);
}

.ppsa-mkt-btn--primary {
	background: linear-gradient(135deg, var(--mkt-teal), var(--mkt-teal-bright));
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
		0 8px 20px rgba(37, 99, 235, 0.32);
}

.ppsa-mkt-btn--primary:hover {
	background: linear-gradient(135deg, #1d4ed8, var(--mkt-violet));
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1),
		0 14px 30px rgba(37, 99, 235, 0.4);
}

/* Destello que cruza el botón principal al pasar por encima. */
.ppsa-mkt-btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.6s var(--mkt-ease);
	pointer-events: none;
}

.ppsa-mkt-btn--primary:hover::after { transform: translateX(120%); }

.ppsa-mkt-btn--ghost {
	background: rgba(255, 255, 255, 0.72);
	border-color: var(--mkt-line);
	box-shadow: var(--mkt-e1);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
}

.ppsa-mkt-btn--ghost:hover {
	background: #fff;
	border-color: rgba(37, 99, 235, 0.4);
	transform: translateY(-2px);
	box-shadow: var(--mkt-e2);
}

/* ------------------------------------------------------------
   4. Bloques, tarjetas y paneles
   ------------------------------------------------------------ */
.ppsa-mkt-block,
.ppsa-mkt-tour,
.ppsa-mkt-forge,
.ppsa-mkt-compare,
.ppsa-mkt-calc,
.ppsa-mkt-report,
.ppsa-mkt-chatdemo {
	border-radius: var(--mkt-radius);
	border: 1px solid var(--mkt-line);
	background: #fff;
	box-shadow: var(--mkt-e1);
	transition: box-shadow 0.25s var(--mkt-ease), border-color 0.25s var(--mkt-ease);
}

.ppsa-mkt-block:hover,
.ppsa-mkt-tour:hover,
.ppsa-mkt-forge:hover {
	border-color: rgba(37, 99, 235, 0.22);
	box-shadow: var(--mkt-e2);
}

/* Ritmo entre secciones, ligado al ancho de pantalla. */
.ppsa-mkt-block { margin-block: var(--mkt-gap); }

.ppsa-mkt-kicker {
	color: var(--mkt-teal);
	font-weight: 800;
	letter-spacing: 0.16em;
}

/* ------------------------------------------------------------
   5. Pestañas del tour
   ------------------------------------------------------------
   La activa se marcaba con un cambio de color muy sutil. Ahora
   es una píldora sólida: se ve dónde estás de un vistazo.
   ------------------------------------------------------------ */
.ppsa-mkt-tour__tab {
	border-radius: 0.7rem;
	font-weight: 600;
	border: 1px solid transparent;
	transition: background 0.16s var(--mkt-ease), color 0.16s var(--mkt-ease),
		border-color 0.16s var(--mkt-ease), transform 0.16s var(--mkt-ease);
}

.ppsa-mkt-tour__tab:hover {
	background: var(--mkt-foam);
	transform: translateX(2px);
}

.ppsa-mkt-tour__tab[aria-selected='true'],
.ppsa-mkt-tour__tab.is-active {
	background: linear-gradient(135deg, var(--mkt-teal), var(--mkt-teal-bright));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

/* ------------------------------------------------------------
   6. Precios
   ------------------------------------------------------------ */
.ppsa-mkt-tier {
	border-radius: var(--mkt-radius);
	border: 1px solid var(--mkt-line);
	background: #fff;
	box-shadow: var(--mkt-e1);
	transition: transform 0.25s var(--mkt-ease), box-shadow 0.25s var(--mkt-ease),
		border-color 0.25s var(--mkt-ease);
}

.ppsa-mkt-tier:hover {
	transform: translateY(-4px);
	box-shadow: var(--mkt-e2);
	border-color: rgba(37, 99, 235, 0.3);
}

/* El plan recomendado: elevado y con filo de color arriba. */
.ppsa-mkt-tier--featured {
	position: relative;
	border-color: transparent;
	box-shadow: var(--mkt-e3);
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--mkt-teal), var(--mkt-violet)) border-box;
	border: 2px solid transparent;
}

.ppsa-mkt-tier--featured:hover {
	transform: translateY(-6px);
}

.ppsa-mkt-tier__amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.ppsa-mkt-tier__badge {
	background: linear-gradient(135deg, var(--mkt-teal), var(--mkt-violet));
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ppsa-mkt-tier__badge--soft {
	background: var(--mkt-foam);
	color: var(--mkt-teal);
}

/* Cifras del cálculo, alineadas: sin esto bailan al mover el deslizador. */
.ppsa-mkt-calc__total,
.ppsa-mkt-calc__equiv,
.ppsa-mkt-tier__price {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   7. Selector de moneda y periodo
   ------------------------------------------------------------ */
.ppsa-mkt-switch {
	background: var(--mkt-foam);
	border: 1px solid var(--mkt-line);
	border-radius: 999px;
	padding: 0.2rem;
}

.ppsa-mkt-switch__btn {
	border-radius: 999px;
	border: 0;
	background: transparent;
	font-weight: 600;
	color: var(--mkt-muted);
	transition: background 0.16s var(--mkt-ease), color 0.16s var(--mkt-ease),
		box-shadow 0.16s var(--mkt-ease);
}

/* Solo `.is-active`: las vistas no usan `aria-pressed` en ningún sitio. */
.ppsa-mkt-switch__btn.is-active {
	background: #fff;
	color: var(--mkt-ink);
	box-shadow: var(--mkt-e1);
}

/* ------------------------------------------------------------
   8. El mock del teléfono
   ------------------------------------------------------------
   Es la pieza que más se mira: se le sube la profundidad y se
   recolorea el contenido simulado a la paleta nueva.
   ------------------------------------------------------------ */
.ppsa-mkt-device {
	filter: drop-shadow(0 30px 60px rgba(15, 23, 42, 0.26));
}

.ppsa-mkt-device__bezel {
	background: linear-gradient(160deg, #1e293b, #0f172a 55%, #1e1b4b);
	border-radius: 2.1rem;
}

.ppsa-mkt-device__screen {
	background: linear-gradient(180deg, #ffffff, #f1f5f9);
	border-radius: 1.6rem;
}

.ppsa-mkt-mock__avatar {
	background: linear-gradient(145deg, var(--mkt-teal-bright), var(--mkt-teal) 55%, var(--mkt-violet));
}

.ppsa-mkt-mock__btn {
	background: linear-gradient(135deg, var(--mkt-teal), var(--mkt-teal-bright));
}

.ppsa-mkt-mock__btn--soft {
	background: rgba(37, 99, 235, 0.14);
}

.ppsa-mkt-mock__name { background: var(--mkt-ink); }
.ppsa-mkt-mock__role { background: rgba(15, 23, 42, 0.2); }

/* Transición entre pantallas del mock: antes era un salto de 0.35s. */
.ppsa-mkt-mock {
	transition: opacity 0.45s var(--mkt-ease), transform 0.45s var(--mkt-ease);
}

/* ------------------------------------------------------------
   9. Chat de demostración
   ------------------------------------------------------------ */
.ppsa-mkt-chatdemo__msg {
	border-radius: 1rem;
	box-shadow: var(--mkt-e1);
	animation: ppsaMktMsgIn 0.32s var(--mkt-ease) both;
}

.ppsa-mkt-chatdemo__msg--bot {
	background: linear-gradient(135deg, var(--mkt-teal), var(--mkt-teal-bright));
	color: #fff;
}

@keyframes ppsaMktMsgIn {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   10. Campos
   ------------------------------------------------------------ */
.ppsa-mkt-input,
.ppsa-mkt-field input,
.ppsa-mkt-field select {
	border-radius: 0.75rem;
	border: 1px solid var(--mkt-line);
	background: #fff;
	transition: border-color 0.16s var(--mkt-ease), box-shadow 0.16s var(--mkt-ease);
}

.ppsa-mkt-input:focus,
.ppsa-mkt-field input:focus,
.ppsa-mkt-field select:focus {
	outline: none;
	border-color: var(--mkt-teal);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ------------------------------------------------------------
   11. Cierre
   ------------------------------------------------------------ */
.ppsa-mkt-finale {
	border-radius: var(--mkt-radius);
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(99, 102, 241, 0.28) 0%, transparent 60%),
		linear-gradient(135deg, #0f172a, #1e1b4b 60%, #312e81);
	box-shadow: var(--mkt-e3);
	color: #e2e8f0;
}

.ppsa-mkt-finale .ppsa-mkt-h2,
.ppsa-mkt-finale__text { color: #f8fafc; }

/* ------------------------------------------------------------
   12. Entrada por scroll
   ------------------------------------------------------------
   Las secciones aparecen al entrar en pantalla. Se hace solo con
   CSS: `animation-timeline` donde exista, y donde no, el bloque
   simplemente se ve —sin JS y sin quedarse invisible nunca.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ppsa-mkt-block,
		.ppsa-mkt-tier {
			animation: ppsaMktReveal linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}

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

/* ------------------------------------------------------------
   13. Foco y movimiento reducido
   ------------------------------------------------------------ */
.ppsa-mkt :is(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mkt-teal-bright);
	outline-offset: 3px;
	border-radius: 0.6rem;
}

.ppsa-mkt-finale :is(a, button):focus-visible {
	outline-color: #c7d2fe;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-mkt-btn,
	.ppsa-mkt-tier,
	.ppsa-mkt-block,
	.ppsa-mkt-tour__tab,
	.ppsa-mkt-mock {
		transition: none;
	}
	.ppsa-mkt-btn:hover,
	.ppsa-mkt-tier:hover,
	.ppsa-mkt-tour__tab:hover {
		transform: none;
	}
	.ppsa-mkt-btn--primary::after { display: none; }
	.ppsa-mkt-chatdemo__msg { animation: none; }
}