/**
 * Pro Profile SaaS — el híbrido de precios (0.99.745)
 *
 * ============================================================
 * QUÉ ES ESTO
 * ------------------------------------------------------------
 * El boceto P6: interruptor + foco + cinta, encadenados sobre la
 * tabla de precios que YA existe. No se toca el PHP ni el JS de
 * `pricing.php`: los precios, el cambio individual/agencia, el
 * cotizador de asientos y la regla de que el plan de micrositio no
 * aplica en agencia siguen saliendo del mismo sitio de siempre.
 * Esta hoja solo cambia cómo se ve lo que ya se calcula.
 *
 * Las tres piezas:
 *
 *   Interruptor — el cambio de modo ya estaba. Lo que se añade es
 *                 que los planes se REPINTEN al cambiar, para que
 *                 el salto se vea y no parezca que no pasó nada.
 *   Foco        — el plan recomendado se ilumina y los demás se
 *                 apagan. Se apaga en cuanto el visitante señala
 *                 otro: el foco acompaña la mirada, no la secuestra.
 *   Cinta       — el distintivo de «Recomendado» pasa de pastilla a
 *                 cinta diagonal en la esquina, y cae al entrar.
 *
 * ============================================================
 * CÓMO GANA
 * ------------------------------------------------------------
 * Carga después de `marketing-pro.css` y gana por orden de cascada.
 * Sin `!important`.
 */

/* ============================================================
 * Entrada escalonada de los planes
 * ============================================================
 * `both` mantiene el estado inicial antes de arrancar: sin eso los
 * tres planes parpadean a tamaño completo en el primer fotograma.
 */
@keyframes ppsa-tier-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ppsa-mkt-tiers .ppsa-mkt-tier {
	animation: ppsa-tier-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ppsa-mkt-tiers .ppsa-mkt-tier:nth-child(1) { animation-delay: 0.05s; }
.ppsa-mkt-tiers .ppsa-mkt-tier:nth-child(2) { animation-delay: 0.16s; }
.ppsa-mkt-tiers .ppsa-mkt-tier:nth-child(3) { animation-delay: 0.27s; }

/* ============================================================
 * El foco
 * ============================================================
 * En reposo, el recomendado manda: crece un punto y los otros dos
 * bajan de saturación. En cuanto el visitante señala CUALQUIER
 * plan, el foco se apaga entero y todos vuelven a su sitio — para
 * comparar hace falta ver los tres iguales.
 *
 * `:has()` es lo que permite que el hover sobre un hijo cambie a
 * sus hermanos. Donde no exista, no se pierde nada: se queda el
 * foco fijo, que es el estado de reposo y es correcto por sí solo.
 */
.ppsa-mkt-tiers .ppsa-mkt-tier {
	transition:
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.3s ease,
		filter 0.3s ease,
		box-shadow 0.3s ease;
}

.ppsa-mkt-tiers:not(:hover) .ppsa-mkt-tier:not(.ppsa-mkt-tier--featured) {
	opacity: 0.72;
	filter: saturate(0.7);
}

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

/*
 * El halo del recomendado. Va en un pseudo-elemento por detrás
 * (`z-index: -1`) para no tapar el texto ni robar el clic del
 * botón, y se recorta con `border-radius` heredado del plan.
 */
.ppsa-mkt-tier--featured::after {
	content: "";
	position: absolute;
	inset: -14px;
	z-index: -1;
	border-radius: calc(var(--mkt-radius, 16px) + 14px);
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--mkt-teal, #0f766e) 16%, transparent),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.ppsa-mkt-tiers:not(:hover) .ppsa-mkt-tier--featured::after {
	opacity: 1;
}

/* ============================================================
 * La cinta
 * ============================================================
 * El distintivo del recomendado deja de ser pastilla y pasa a cinta
 * diagonal en la esquina superior derecha.
 *
 * El plan necesita `overflow: hidden` para recortar los extremos de
 * la cinta, pero eso también recortaría el halo de arriba — por eso
 * el halo vive FUERA del recorte, en un `::after` con inset
 * negativo, y el recorte se aplica solo con `clip-path` a la zona
 * de la cinta. Se resuelve dando el recorte a un envoltorio propio.
 */
.ppsa-mkt-tier--featured {
	position: relative;
}

.ppsa-mkt-tier--featured > .ppsa-mkt-tier__badge:not(.ppsa-mkt-tier__badge--soft) {
	position: absolute;
	top: 14px;
	right: -38px;
	margin: 0;
	transform: rotate(38deg) translateX(52px);
	transform-origin: center;
	padding: 5px 42px;
	border-radius: 0;
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	box-shadow: 0 4px 12px -4px rgba(7, 24, 22, 0.4);
	animation: ppsa-ribbon-in 0.55s 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	pointer-events: none;
	z-index: 2;
}

@keyframes ppsa-ribbon-in {
	to {
		opacity: 1;
		transform: rotate(38deg) translateX(0);
	}
}

/*
 * En pantallas estrechas la cinta se sale del plan y tapa el precio.
 * Ahí vuelve a ser pastilla, que es lo que cabe.
 */
@media (max-width: 560px) {
	.ppsa-mkt-tier--featured > .ppsa-mkt-tier__badge:not(.ppsa-mkt-tier__badge--soft) {
		position: static;
		transform: none;
		animation: none;
		opacity: 1;
		padding: 4px 12px;
		border-radius: 999px;
		text-transform: none;
		letter-spacing: 0.02em;
		box-shadow: none;
	}
}

/* ============================================================
 * El interruptor: que se vea el salto
 * ============================================================
 * Al cambiar de individual a agencia cambian los precios, el pie
 * («/mes · perfil» → «/mes · asiento») y desaparece un plan. Sin
 * marcar el cambio, el visitante lee el mismo número dos veces y
 * cree que el interruptor no hizo nada.
 *
 * El pulso engancha en `aria-selected`, que el JS de marketing ya
 * mantiene al día en los dos botones. No hace falta tocar ese JS.
 */
.ppsa-mkt-switch__btn {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.ppsa-mkt-switch__btn:hover {
	transform: translateY(-1px);
}

.ppsa-mkt-switch__btn[aria-selected="true"] {
	transform: none;
}

/*
 * El precio y el pie parpadean cuando cambia el modo. Se dispara
 * con la clase que el JS pone en el contenedor al recalcular; si
 * no la pusiera, simplemente no hay pulso y todo lo demás sigue.
 */
@keyframes ppsa-price-flip {
	0% {
		opacity: 1;
		transform: none;
	}
	40% {
		opacity: 0.25;
		transform: translateY(-4px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.ppsa-mkt-tiers.is-switching .ppsa-mkt-tier__price,
.ppsa-mkt-tiers.is-switching .ppsa-mkt-tier__period {
	animation: ppsa-price-flip 0.42s ease both;
}

/* ============================================================
 * T4 · El botón que se levanta, también aquí
 * ============================================================
 * Mismo gesto que en el editor. Que el botón de pagar se comporte
 * igual que los del panel es la mitad de la sensación de producto.
 */
.ppsa-mkt-btn {
	transition:
		transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
		background-color 0.18s ease;
}

.ppsa-mkt-btn:hover:not([disabled]) {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(7, 24, 22, 0.45);
}

.ppsa-mkt-btn:active:not([disabled]) {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(7, 24, 22, 0.25);
}

/* ============================================================
 * Sin movimiento
 * ============================================================
 * Se quedan el foco y la cinta — son jerarquía, no adorno — pero
 * sin entrada, sin pulso y sin desplazamientos.
 */
@media (prefers-reduced-motion: reduce) {
	.ppsa-mkt-tiers .ppsa-mkt-tier,
	.ppsa-mkt-tiers.is-switching .ppsa-mkt-tier__price,
	.ppsa-mkt-tiers.is-switching .ppsa-mkt-tier__period {
		animation: none;
	}

	.ppsa-mkt-tier--featured > .ppsa-mkt-tier__badge:not(.ppsa-mkt-tier__badge--soft) {
		animation: none;
		opacity: 1;
		transform: rotate(38deg);
	}

	.ppsa-mkt-btn:hover,
	.ppsa-mkt-switch__btn:hover {
		transform: none;
	}
}