/**
 * Pricing Suite — capa visual de la página /precios/ y /prices/.
 *
 * Reglas:
 *  - Aditivo. NO sobrescribir las reglas de pricing.css de forma destructiva.
 *  - Las cards (.pb-plan-card) las renderiza el plugin; aquí sólo añadimos
 *    border-beam y mejoras de hover al destacado.
 *  - Las nuevas secciones (hero, toggle, comparativa, ROI, social) viven con
 *    prefijo .pricing-suite- para no chocar con .pb-pricing.
 *
 * Filosofía visual: minimal, profesional, sin gradientes innecesarios.
 * Funciona idéntico en modo claro y oscuro a través de tokens semánticos.
 *
 * @package Puente
 */

/* =========================================================
   HERO — announce + título + lede + toggle
   ========================================================= */
.pricing-suite-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	/* Mismo respiro vertical que el hero de la home — separa el título del
	   menú superior con el espaciado de sección estándar. */
	padding-block: var(--space-section) clamp(20px, 3vw, 40px);
	text-align: center;
}

.pricing-suite-hero__announce {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 5px;
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: var(--space-xl);
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.pricing-suite-hero__announce:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--divider));
	transform: translateY(-1px);
}

.pricing-suite-hero__announce-pill {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accent-blue);
	color: #fff;
}

.pricing-suite-hero h1 {
	font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
	letter-spacing: -0.025em;
	line-height: 1.1;
	font-weight: 800;
	margin: 0 auto var(--space-lg);
	max-width: 22ch;
	color: var(--text-primary);
}

/* Acento de marca — color sólido, sin gradiente arcoíris. Más profesional
   y legible en ambos modos. */
.pricing-suite-hero h1 .accent {
	color: var(--accent-blue);
}

.pricing-hero__lede {
	font-size: var(--text-lg);
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 auto var(--space-xl);
	color: var(--text-secondary);
}

/* Toggle billing — píldora con el botón activo en sólido. Sin gradientes.
   Hace scroll-into-view a la card del periodo via pricing.js. */
.pricing-suite-toggle {
	display: inline-flex;
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: 999px;
	padding: 4px;
	margin-top: var(--space-md);
	gap: 2px;
	font-size: var(--text-sm);
	box-shadow: var(--shadow-card);
}

.pricing-suite-toggle button {
	all: unset;
	cursor: pointer;
	padding: 9px 20px;
	border-radius: 999px;
	font-weight: 600;
	color: var(--text-secondary);
	font-family: var(--font);
	transition: background-color .2s ease, color .2s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pricing-suite-toggle button:hover { color: var(--text-primary); }

.pricing-suite-toggle button.is-active {
	background: var(--accent-blue);
	color: #fff;
}

.pricing-suite-toggle__save {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent-green) 18%, transparent);
	color: var(--accent-green);
}

.pricing-suite-toggle button.is-active .pricing-suite-toggle__save {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

@media (max-width: 540px) {
	.pricing-suite-toggle button { padding: 8px 14px; }
}

/* =========================================================
   BORDER-BEAM en card destacada — único pseudo decorativo
   que añade pricing-suite. Los demás estilos (fondo, borde,
   sombra, ribbon) ya viven en pricing.css con el rediseño V2.
   ========================================================= */
@property --pricing-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.pb-pricing .pb-plan-card--featured::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--pricing-beam, 0deg),
		transparent 0deg,
		transparent 250deg,
		var(--accent-blue) 290deg,
		var(--nav-active) 320deg,
		var(--accent-green) 340deg,
		transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
	animation: pricing-beam-spin 6s linear infinite;
}

@keyframes pricing-beam-spin {
	to { --pricing-beam: 360deg; }
}

/* =========================================================
   COMPARATIVA Free vs Pro — tabla limpia, sin gradientes
   ========================================================= */
.pricing-suite-compare {
	padding-block: clamp(48px, 6vw, 88px);
}

.pricing-suite-compare__head {
	text-align: center;
	margin-bottom: var(--space-2xl);
	max-width: 640px;
	margin-inline: auto;
}

.pricing-suite-compare__head .section-header__label {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
	color: var(--text-secondary); margin-bottom: var(--space-md);
}
.pricing-suite-compare__head .section-header__label::before {
	content: ''; width: 3px; height: 12px;
	background: var(--accent-blue); border-radius: 2px;
}
.pricing-suite-compare__head .section-header__title {
	font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--text-primary);
}

.pricing-suite-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.pricing-suite-compare__table thead th {
	padding: var(--space-lg) var(--space-lg);
	text-align: left;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-secondary);
	background: var(--bg-pill);
	border-bottom: 1px solid var(--divider);
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Columna Pro: marcada con el accent-blue, sin gradient */
.pricing-suite-compare__table thead th.is-pro {
	color: var(--accent-blue);
	background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-pill));
	position: relative;
}

.pricing-suite-compare__table tbody td {
	padding: var(--space-lg) var(--space-lg);
	font-size: var(--text-sm);
	border-bottom: 1px solid var(--divider);
	color: var(--text-primary);
	vertical-align: middle;
}

.pricing-suite-compare__table tbody tr:last-child td {
	border-bottom: none;
}

.pricing-suite-compare__table tbody tr:hover td {
	background: color-mix(in srgb, var(--accent-blue) 3%, transparent);
}

.pricing-suite-compare__table .feat {
	color: var(--text-primary);
	font-weight: 600;
	font-size: var(--text-base);
	width: 50%;
}

.pricing-suite-compare__table .feat-desc {
	display: block;
	font-size: var(--text-xs);
	color: var(--text-secondary);
	font-weight: 400;
	margin-top: 4px;
	line-height: 1.5;
}

.pricing-suite-compare__cell {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--text-primary);
}

.pricing-suite-compare__cell--limited { color: var(--text-secondary); font-weight: 500; }

.pricing-suite-compare__check {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent-green) 16%, transparent);
	color: var(--accent-green);
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
}

.pricing-suite-compare__cross {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bg-pill);
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	/* Stack cards — cada feature una "card-row" */
	.pricing-suite-compare__table thead { display: none; }
	.pricing-suite-compare__table tbody td {
		display: block;
		border-bottom: none;
		padding: 4px var(--space-lg);
	}
	.pricing-suite-compare__table tbody tr {
		display: block;
		padding: var(--space-md) 0;
		border-bottom: 1px solid var(--divider);
	}
	.pricing-suite-compare__table .feat {
		width: 100%;
		font-size: var(--text-base);
		font-weight: 700;
		padding-top: var(--space-md);
	}
	.pricing-suite-compare__table tbody td[data-col]::before {
		content: attr(data-col) ":  ";
		font-weight: 700;
		color: var(--text-secondary);
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: .5px;
		margin-right: 8px;
	}
}

/* =========================================================
   ROI — 12 h/mes con cifra destacada + bullets
   ========================================================= */
.pricing-suite-roi {
	padding-block: clamp(48px, 6vw, 88px);
}

.pricing-suite-roi__inner {
	background: var(--bg-card);
	border: 1px solid var(--divider);
	border-radius: var(--radius-card);
	padding: clamp(32px, 4vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	box-shadow: var(--shadow-card);
}

.pricing-suite-roi__big {
	font-size: clamp(var(--text-5xl), 8vw, var(--text-6xl));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--accent-blue);
}

.pricing-suite-roi__caption {
	color: var(--text-secondary);
	font-size: var(--text-base);
	line-height: 1.6;
	margin-top: var(--space-md);
	max-width: 42ch;
}

.pricing-suite-roi__list {
	display: grid;
	gap: var(--space-sm);
}

.pricing-suite-roi__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-md);
	align-items: start;
	padding: var(--space-md) var(--space-lg);
	background: var(--bg-primary);
	border: 1px solid var(--divider);
	border-radius: var(--radius-button);
	transition: border-color .2s ease, transform .2s ease;
}
.pricing-suite-roi__item:hover {
	border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--divider));
	transform: translateY(-1px);
}

.pricing-suite-roi__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
	color: var(--accent-blue);
	/* grid + place-items es el método más fiable para centrar un glifo de
	   emoji: el tracking baseline/ascender de cada SO (Apple, Win, Linux)
	   varía mucho y flex con align/justify a veces deja huecos asimétricos.
	   font-size 17px + line-height 1 + overflow hidden mantiene el glifo
	   "encajado" dentro del cuadrado en cualquier plataforma. */
	display: grid;
	place-items: center;
	font-size: 17px;
	line-height: 1;
	text-align: center;
	flex-shrink: 0;
	overflow: hidden;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", var(--font);
}

.pricing-suite-roi__title {
	font-weight: 700;
	font-size: var(--text-sm);
	margin: 0 0 4px;
	color: var(--text-primary);
}

.pricing-suite-roi__desc {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 860px) {
	.pricing-suite-roi__inner {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		text-align: center;
	}
	.pricing-suite-roi__caption { margin-inline: auto; }
	.pricing-suite-roi__item { text-align: left; }
}

/* =========================================================
   SOCIAL PROOF — cita + garantías
   ========================================================= */
.pricing-suite-social {
	padding-block: clamp(40px, 5vw, 72px);
	text-align: center;
}

.pricing-suite-social__quote {
	max-width: 62ch;
	margin: 0 auto;
	font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.5;
	letter-spacing: -0.01em;
	position: relative;
}

.pricing-suite-social__quote::before {
	content: "“";
	color: var(--accent-blue);
	font-size: 1.4em;
	line-height: 0;
	vertical-align: -0.35em;
	margin-right: 4px;
	font-family: Georgia, serif;
}
.pricing-suite-social__quote::after {
	content: "”";
	color: var(--accent-blue);
	font-size: 1.4em;
	line-height: 0;
	vertical-align: -0.35em;
	margin-left: 4px;
	font-family: Georgia, serif;
}

.pricing-suite-social__author {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.pricing-suite-social__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent-blue);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
}

.pricing-suite-social__guarantees {
	display: flex;
	gap: clamp(16px, 3vw, 40px);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--divider);
	font-size: var(--text-xs);
	color: var(--text-secondary);
}

.pricing-suite-social__guarantees span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pricing-suite-social__guarantees i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent-green) 16%, transparent);
	color: var(--accent-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}

/* Destello cuando el toggle ha hecho scroll a una card concreta */
.pb-pricing .pb-plan-card.is-toggle-target {
	animation: pricing-target-flash 1.6s ease-out;
}

@keyframes pricing-target-flash {
	0%, 100% { box-shadow: var(--shadow-card); }
	30%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 22%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--accent-blue) 30%, transparent); }
}

/* =========================================================
   PROMO MODE — sólo se aplica cuando .pricing-suite-page lleva
   `.has-pricing-promo`. Todas las reglas viven scope-d para
   no afectar la página fuera del estado promo.

   Decisión de arquitectura: NO emitimos un strip propio sobre
   el hero. Toda la riqueza visual (sweep, llama, tiles de
   countdown) se inyecta en el banner que ya emite el plugin
   (`.pb-pricing__promo-banner`) sobre el grid de precios. Eso
   evita duplicar UI promocional en la misma página.
   ========================================================= */

@keyframes promo-sweep   { to { transform: translateX(100%); } }
@keyframes promo-flame   { 0%,100%{transform:scale(1) rotate(-3deg);} 50%{transform:scale(1.08) rotate(4deg);} }
@keyframes promo-twinkle { 0%,100%{opacity:0;transform:scale(0.6);} 50%{opacity:.9;transform:scale(1);} }

/* — Hero pill: cuando hay promo, gradient cálido en lugar de blanco — */
.pricing-suite-page.has-pricing-promo .pricing-suite-hero__announce {
	border-color: rgba(255, 68, 68, 0.30);
	background: linear-gradient(135deg, rgba(255, 68, 68, 0.06), rgba(255, 176, 0, 0.06));
}

.pricing-suite-page.has-pricing-promo .pricing-suite-hero__announce-pill {
	background: linear-gradient(135deg, var(--text-error), #FF7A3D);
	color: #fff;
	box-shadow: 0 6px 16px rgba(255, 68, 68, 0.35);
}

/* En promo NO cambiamos el color del título — mantiene el azul del
   tema en ambos estados (decisión del usuario, mejor para coherencia
   visual). La urgencia de la promo vive en el pill anunciante, el
   banner del grid, el sticker y el halo cálido del CTA. */

/* Footnote del shortcode oculto SOLO en la página de precios.
   El plugin lo sigue emitiendo (lo usa el modal de cuenta donde sí
   tiene sentido). Aquí redunda con la sección "trust strip" justo
   debajo y añade ruido visual debajo de las cards. */
.pricing-suite-page .pb-pricing__footnote {
	display: none;
}

/* Toggle save chips: quemados cuando promo */
.pricing-suite-page.has-pricing-promo .pricing-suite-toggle__save {
	background: rgba(255, 68, 68, 0.18);
	color: #B22020;
}

.pricing-suite-page.has-pricing-promo .pricing-suite-toggle button.is-active .pricing-suite-toggle__save {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Orb extra — cálido sobre el hero cuando promo */
.home-orb--promo {
	width: 540px;
	height: 540px;
	background: radial-gradient(circle,
		rgba(255, 68, 68, 0.45) 0%,
		rgba(255, 122, 61, 0.20) 40%,
		rgba(255, 176, 0, 0) 70%);
	bottom: -200px;
	left: 40%;
	opacity: 0.55;
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	z-index: -1;
}

/* — Banner del plugin: el único bloque promocional de la página — */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--space-md) var(--space-lg);
	gap: var(--space-md) var(--space-xl);
	color: #fff;
	background:
		radial-gradient(120% 200% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 60%),
		linear-gradient(120deg, #B22020 0%, var(--text-error) 35%, #FF7A3D 70%, #FFB000 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.18) inset,
		0 18px 36px -16px rgba(255, 68, 68, 0.55);
	animation: none; /* sustituye la pulse del plugin por el sweep + twinkles */
}

/* Sweep blanco translúcido recorriendo el banner */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg,
		transparent 30%,
		rgba(255, 255, 255, 0.20) 50%,
		transparent 70%);
	transform: translateX(-100%);
	animation: promo-sweep 6s linear infinite;
	pointer-events: none;
	z-index: 0;
}

/* Chispa decorativa */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner::after {
	content: "";
	position: absolute;
	top: 30%; left: 10%;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px rgba(255,255,255,0.8);
	animation: promo-twinkle 2.4s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* Llama animada */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-icon {
	display: inline-block;
	animation: promo-flame 1.6s ease-in-out infinite;
	transform-origin: 50% 70%;
	font-size: var(--text-2xl);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.30));
	position: relative;
	z-index: 1;
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-title {
	position: relative;
	z-index: 1;
}

/* Badge de descuento — píldora blanca con sombra */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-discount {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #B22020;
	font-weight: 900;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
}

/* Countdown del plugin: lo escondemos visualmente — los tiles que inyecta
   pricing.js viven justo al lado, con la misma fuente data-ends-at, y
   ofrecen presentación dashboard moderno (DD : HH : MM : SS). El plugin
   sigue actualizando este span (su JS no se rompe) pero queda invisible. */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-countdown {
	display: none;
}

/* Tiles inyectados por pricing.js dentro del banner */
.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tiles {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tiles__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-right: 6px;
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tile {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 5px 9px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: 10px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	line-height: 1;
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tile span {
	font-size: var(--text-lg);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tile label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 2px;
}

.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tiles__sep {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 800;
	font-size: var(--text-base);
	user-select: none;
}

@media (max-width: 540px) {
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tile { min-width: 38px; padding: 4px 7px; }
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-tile span { font-size: var(--text-base); }
}

/* — Card en promo: border-beam cálido + restyling del ribbon —
   .pb-plan-card--promo-target la añade pricing.js a CADA plan que entra
   en la promo (ver tabla en initPromoSticker). Ej.: si la promo cubre
   trimestral + anual, ambas cards se ponen en rojo; el sticker rotativo
   "-N%", en cambio, se monta en UNA sola card (la "ganadora": más cara
   de las promocionadas, o trimestral si las 3 están en promo).
   El blue glow ambiental de .pb-plan-card--featured (líneas 110-120)
   sigue funcionando para destacar la quarterly cuando NO entra en la
   promo. z-index: 3 para que el sticker (top/right negativos) no quede
   debajo de la card adyacente. */
.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card--promo-target {
	position: relative;     /* requerido para el sticker absoluto del JS */
	z-index: 3;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 68, 68, 0.10) 0%, transparent 60%),
		var(--bg-primary);
	border-color: rgba(255, 68, 68, 0.40);
	box-shadow:
		0 24px 48px -16px rgba(255, 68, 68, 0.30),
		0 12px 24px -8px rgba(0, 0, 0, 0.10);
}

.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card--promo-target::after {
	/* Si la promo-target además es la featured, sobrescribimos el beam azul
	   por el cálido; si es otra card (sin pseudo-elemento ::after definido
	   en base), creamos uno completo aquí. */
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--pricing-beam, 0deg),
		transparent 0deg,
		transparent 250deg,
		var(--text-error) 285deg,
		#FF7A3D 315deg,
		#FFB000 340deg,
		transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
	animation: pricing-beam-spin 4s linear infinite;
}

.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card--promo-target .pb-plan-card__ribbon {
	background: linear-gradient(135deg, var(--text-error), #FF7A3D);
	box-shadow: 0 6px 18px rgba(255, 68, 68, 0.45);
}

/* Sticker circular rotando — usa el % de la promo vía --promo-pct */
/* Sticker generado vía <span> auxiliar inyectado por pricing.js. CSS no
   puede leer var(--promo-pct) dentro de `content:`, por eso JS lo monta
   con el % real. Sin JS, el sticker simplemente no aparece. */

.pricing-suite-page.has-pricing-promo .pricing-suite-sticker {
	position: absolute;
	top: -22px;
	right: -22px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 900;
	font-size: var(--text-base);
	font-family: var(--font);
	letter-spacing: -0.01em;
	background:
		radial-gradient(circle at 30% 30%, #FFB000 0%, #FF7A3D 50%, var(--text-error) 100%);
	box-shadow:
		0 10px 24px rgba(255, 68, 68, 0.45),
		inset 0 0 0 2px rgba(255, 255, 255, 0.30);
	z-index: 5;
	animation: pricing-sticker-spin 8s linear infinite;
	pointer-events: none;
	user-select: none;
	transform-origin: center center;
}

.pricing-suite-page.has-pricing-promo .pricing-suite-sticker::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	animation: pricing-sticker-spin-rev 12s linear infinite;
}

.pricing-suite-page.has-pricing-promo .pricing-suite-sticker__text {
	position: relative;
	z-index: 1;
	font-size: var(--text-lg);
	line-height: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

.pricing-suite-page.has-pricing-promo .pricing-suite-sticker__text small {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	margin-top: 2px;
	opacity: .9;
}

@keyframes pricing-sticker-spin {
	to { transform: rotate(360deg); }
}
@keyframes pricing-sticker-spin-rev {
	to { transform: rotate(-360deg); }
}

@media (max-width: 720px) {
	.pricing-suite-page.has-pricing-promo .pricing-suite-sticker { width: 64px; height: 64px; top: -16px; right: -10px; }
	.pricing-suite-page.has-pricing-promo .pricing-suite-sticker__text { font-size: var(--text-base); }
}

/* — Precio tachado: línea SOLO sobre el texto, no a lo ancho del bloque.
   El padre .pb-plan-card__price-block es flex column con align-items
   stretch por defecto, por lo que un line-through pintado vía pseudo-
   element posicionado con left/right cubría toda la columna del card.
   Usamos text-decoration nativo (que recorre sólo los glifos) + color
   rojo + grosor 2px, y reservamos la animación para el span entero
   (fade + slide), no para la línea. */
.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card__price-original {
	align-self: flex-start;        /* evita stretch del flex padre */
	color: var(--text-secondary);
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-color: var(--text-error);
	text-decoration-thickness: 2px;
	text-underline-offset: 0;
	animation: pricing-original-in 500ms ease-out 100ms backwards;
}

@keyframes pricing-original-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* — Savings badge: rojo SÓLO en la card promocionada —
   BUG-FIX-PROMO-3B (follow-up): antes este selector aplicaba el badge rojo
   a TODAS las cards con .pb-plan-card__savings en cuanto la página tenía
   cualquier promo, así que el "ahorra $X vs mensual" de quarterly/annual
   (que NO viene de la promo) también salía en rojo y simulaba ser una
   promo. Restringido a .pb-plan-card--promo-target.
   Las otras cards conservan el estilo por defecto del plugin. */
.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card--promo-target .pb-plan-card__savings {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--text-error), #FF7A3D);
	color: #fff;
	font-weight: 800;
	font-size: var(--text-xs);
	box-shadow: 0 6px 14px rgba(255, 68, 68, 0.30);
}

/* TRUST STRIP — los estilos viven en pricing.css para que se carguen
   también cuando el template Suite no llega a engancharse (traducciones
   Polylang sin plantilla asignada, builds con caché de assets, etc.). */

/* PLAN CARDS — diseño base, tick, savings y dark-mode viven en pricing.css
   (rediseño V2). Aquí solo conservamos lo único que pertenece al wrapper
   .pricing-suite-page: ROI/Compare/Social (que sí son scope de la página). */

/* ROI / Compare / Social en dark — la table no usa fondos hardcoded. */
[data-theme="dark"] .pricing-suite-compare__table {
	background: var(--bg-card);
}
[data-theme="dark"] .pricing-suite-compare__table thead th { background: var(--bg-pill); }

/* PROMO PRICE COLOR — el precio actual mantiene el color por defecto
   del tema (negro en light, blanco en dark). El énfasis cromático va a
   los acentos cálidos (badge "Ahorra", precio tachado en rojo, halo CTA,
   sticker). Mantener el número en color neutro hace que la cifra "salte"
   por contraste con el resto del bloque, sin competir con el banner y el
   CTA por la atención del usuario. */

/* =========================================================
   Reduced motion — corte total
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.pb-pricing .pb-plan-card--featured::after,
	.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card--promo-target::after,
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner,
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner::before,
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner::after,
	.pricing-suite-page.has-pricing-promo .pb-pricing__promo-banner-icon,
	.pricing-suite-page.has-pricing-promo .pricing-suite-sticker,
	.pricing-suite-page.has-pricing-promo .pricing-suite-sticker::before,
	.pricing-suite-page.has-pricing-promo .pb-pricing .pb-plan-card__price-original { animation: none !important; }
}