/**
 * hachitec blocks - Plan (tarjeta)
 * Estilos compartidos entre el editor y el frontend.
 *
 * La tarjeta NO define variables propias: las hereda de la grilla. Cada uso lleva
 * su valor de respaldo en el propio var(), para que la tarjeta se vea bien incluso
 * si por algun motivo se renderiza fuera de una grilla.
 * El acento propio de una tarjeta llega como estilo inline desde el render, que
 * si pisa al heredado por estar puesto en el elemento.
 */

.hachitec-plan {
	/*
	 * Escala propia de la tarjeta: 1 en general, y la del plan destacado si se
	 * configuro una. Los hover la componen en vez de pisarla, para que agrandar
	 * el destacado no se pelee con elevarlo al pasar el mouse.
	 */
	--hachitec-plan-scale: 1;

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	/* Ocupa toda su columna: con columnas iguales, tarjetas iguales. */
	width: 100%;
	max-width: var(--hachitec-pricing-card-max, none);
	margin-left: auto;
	margin-right: auto;
	transform: scale(var(--hachitec-plan-scale));
	background: var(--hachitec-pricing-card-bg, #fff);
	border: var(--hachitec-pricing-border-width, 1px) solid var(--hachitec-pricing-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--hachitec-pricing-radius, 0px);
	padding: 34px 28px 28px;
	box-shadow: var(--hachitec-pricing-shadow, none);
}

.hachitec-plan.is-featured {
	--hachitec-plan-scale: var(--hachitec-pricing-featured-scale, 1);

	border-color: var(--hachitec-pricing-accent, currentColor);
	box-shadow: var(--hachitec-pricing-shadow-featured, none);
	/* Agrandado, tiene que quedar por encima de sus vecinas. */
	z-index: 1;
}

/*
 * VARIANTES DE COMPOSICION
 * Cambian como se arma la tarjeta, no solo como se pinta.
 */

/* Banda: el precio ocupa una franja de acento a todo el ancho de la tarjeta. */
.hachitec-pricing.is-variant-banda .hachitec-plan__pricing {
	margin-left: -28px;
	margin-right: -28px;
	padding: 16px 28px;
	background: var(--hachitec-pricing-accent, currentColor);
	color: #fff;
}

.hachitec-pricing.is-variant-banda .hachitec-plan__pricing,
.hachitec-pricing.is-variant-banda .hachitec-plan.is-featured .hachitec-plan__amount {
	border: 0;
	color: #fff;
}

.hachitec-pricing.is-variant-banda .hachitec-plan__note {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.hachitec-pricing.is-variant-banda .hachitec-plan__note .hachitec-plan__icon-note {
	color: #fff;
}

.hachitec-pricing.is-variant-banda.has-hover-price .hachitec-plan:hover .hachitec-plan__amount {
	color: #fff;
}

/* Cabecera: nombre, descripcion y precio comparten un bloque de acento arriba. */
.hachitec-pricing.is-variant-cabecera .hachitec-plan {
	padding-top: 0;
	overflow: hidden;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__head,
.hachitec-pricing.is-variant-cabecera .hachitec-plan__description,
.hachitec-pricing.is-variant-cabecera .hachitec-plan__pricing {
	background: var(--hachitec-pricing-accent, currentColor);
	color: #fff;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__head,
.hachitec-pricing.is-variant-cabecera .hachitec-plan__description,
.hachitec-pricing.is-variant-cabecera .hachitec-plan__pricing {
	margin-left: -28px;
	margin-right: -28px;
	padding-left: 28px;
	padding-right: 28px;
	border: 0;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__head {
	display: flex;
	padding-top: 30px;
	padding-bottom: 6px;
	margin-bottom: 0;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__icon {
	color: #fff;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__description {
	padding-top: 6px;
	opacity: 0.85;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__pricing {
	margin-top: 0;
	padding-top: 14px;
	padding-bottom: 18px;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__amount,
.hachitec-pricing.is-variant-cabecera.has-hover-price .hachitec-plan:hover .hachitec-plan__amount {
	color: #fff;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__note {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.hachitec-pricing.is-variant-cabecera .hachitec-plan__note .hachitec-plan__icon-note {
	color: #fff;
}

/* Compacto: sin icono y con todo mas apretado, para grillas de 4 o mas planes. */
.hachitec-pricing.is-variant-compacto .hachitec-plan {
	padding: 26px 22px 22px;
}

.hachitec-pricing.is-variant-compacto .hachitec-plan__icon {
	display: none;
}

.hachitec-pricing.is-variant-compacto .hachitec-plan__pricing {
	margin-top: 12px;
	padding-bottom: 12px;
}

.hachitec-pricing.is-variant-compacto .hachitec-plan__features {
	margin-top: 14px;
}

.hachitec-pricing.is-variant-compacto .hachitec-plan__feature {
	margin-bottom: 7px;
	font-size: 0.88em;
}

/*
 * FORMAS DE LA TARJETA
 * clip-path recorta tambien el borde y el box-shadow, asi que estas formas van
 * sin borde y la profundidad la da filter: drop-shadow, que sigue el contorno.
 * Al plan destacado lo distingue la cinta o la barra de acento, no el borde.
 */
.hachitec-pricing.is-card-flecha .hachitec-plan,
.hachitec-pricing.is-card-bisel .hachitec-plan {
	border: 0;
	box-shadow: none;
	filter: var(--hachitec-pricing-drop, none);
}

.hachitec-pricing.is-card-flecha .hachitec-plan {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
	padding-bottom: 56px;
}

.hachitec-pricing.is-card-bisel .hachitec-plan {
	clip-path: polygon(
		22px 0,
		100% 0,
		100% calc(100% - 22px),
		calc(100% - 22px) 100%,
		0 100%,
		0 22px
	);
}

.hachitec-pricing.is-card-flecha .hachitec-plan:hover,
.hachitec-pricing.is-card-flecha .hachitec-plan:focus-within,
.hachitec-pricing.is-card-bisel .hachitec-plan:hover,
.hachitec-pricing.is-card-bisel .hachitec-plan:focus-within {
	box-shadow: none;
	filter: var(--hachitec-pricing-drop-hover, none);
}

/*
 * Con clip-path o con overflow oculto, una cinta que sobresale del borde queda
 * cortada al medio. En esas variantes la cinta se mete adentro de la tarjeta.
 */
.hachitec-pricing.is-card-flecha .hachitec-plan__ribbon,
.hachitec-pricing.is-card-bisel .hachitec-plan__ribbon,
.hachitec-pricing.is-variant-cabecera .hachitec-plan__ribbon {
	top: 14px;
	transform: translateX(-50%);
}

.hachitec-pricing.is-card-flecha .hachitec-plan.is-featured:hover .hachitec-plan__ribbon,
.hachitec-pricing.is-card-flecha .hachitec-plan.is-featured:focus-within .hachitec-plan__ribbon,
.hachitec-pricing.is-card-bisel .hachitec-plan.is-featured:hover .hachitec-plan__ribbon,
.hachitec-pricing.is-card-bisel .hachitec-plan.is-featured:focus-within .hachitec-plan__ribbon,
.hachitec-pricing.is-variant-cabecera .hachitec-plan.is-featured:hover .hachitec-plan__ribbon,
.hachitec-pricing.is-variant-cabecera .hachitec-plan.is-featured:focus-within .hachitec-plan__ribbon {
	transform: translateX(-50%) scale(1.06);
}

.hachitec-pricing.is-card-flecha .hachitec-plan,
.hachitec-pricing.is-card-bisel .hachitec-plan {
	padding-top: 56px;
}

/* Sobre la cabecera de acento, una cinta de acento no se veria. */
.hachitec-pricing.is-variant-cabecera .hachitec-plan__ribbon {
	background: var(--hachitec-pricing-card-bg, #fff);
	color: var(--hachitec-pricing-accent, currentColor);
}

/* La cinta sale por encima del borde superior de la tarjeta. */
.hachitec-plan__ribbon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--hachitec-pricing-accent, currentColor);
	color: #fff;
	padding: 6px 22px;
	border-radius: var(--hachitec-pricing-radius-pill, 0px);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.4;
}

.hachitec-plan__body {
	flex: 1 1 auto;
	text-align: var(--hachitec-pricing-align, center);
}

.hachitec-plan__head {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 10px;
	max-width: 100%;
	margin: 0 0 8px;
	vertical-align: top;
}

.hachitec-plan__icon {
	display: inline-grid;
	place-items: center;
	line-height: 0;
	vertical-align: middle;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 0;
	background: transparent;
}

.hachitec-plan__icon > * {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
	margin: auto;
}

/* El contenedor lleva el acento para que un SVG con currentColor lo herede. */
.hachitec-plan__icon {
	color: var(--hachitec-pricing-accent, currentColor);
}

/*
 * Dashicons es una fuente de iconos, no un SVG: el glifo se ubica segun las
 * metricas de la fuente, asi que forzarle una caja de 34x34 como al resto lo
 * descoloca. Se le da solo el tamaño de fuente y la caja la calcula el glifo;
 * centrarla queda a cargo del flex del contenedor.
 */
.hachitec-plan__icon .dashicons {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: 30px;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
}

.hachitec-plan__icon .dashicons::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
}

.hachitec-plan__icon svg {
	display: block;
	width: 28px;
	height: 28px;
	overflow: visible;
	transform-box: view-box;
	transform-origin: center;
}

.hachitec-plan__name {
	min-width: 0;
	margin: 0;
	font-size: 1.35em;
	line-height: 1.25;
	color: inherit;
	text-align: left;
}

.hachitec-plan__description {
	margin: 0;
	opacity: var(--hachitec-pricing-muted, 0.68);
	font-size: 0.92em;
	line-height: 1.5;
}

/*
 * El precio y su aclaracion forman un grupo cerrado, separado del texto de
 * arriba y de las caracteristicas de abajo. Sin ese cierre inferior la
 * aclaracion se lee como si fuera la primera caracteristica de la lista.
 */
.hachitec-plan__pricing {
	margin-top: 12px;
	padding-bottom: 14px;
}

/* Las lineas divisorias las decide la grilla: ninguna, solo arriba, o ambas. */
.hachitec-pricing.has-dividers-top .hachitec-plan__pricing,
.hachitec-pricing.has-dividers-both .hachitec-plan__pricing {
	padding-top: 12px;
	border-top: var(--hachitec-pricing-border-width, 1px) solid var(--hachitec-pricing-border, rgba(0, 0, 0, 0.08));
}

.hachitec-pricing.has-dividers-both .hachitec-plan__pricing {
	border-bottom: var(--hachitec-pricing-border-width, 1px) solid var(--hachitec-pricing-border, rgba(0, 0, 0, 0.08));
}

.hachitec-plan__price {
	margin: 0;
	font-size: 2.1em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hachitec-plan.is-featured .hachitec-plan__amount {
	color: var(--hachitec-pricing-accent, currentColor);
}

.hachitec-plan__period {
	font-size: 0.45em;
	font-weight: 500;
	opacity: var(--hachitec-pricing-muted, 0.68);
	margin-left: 4px;
}

/*
 * La aclaracion del precio es una anotacion, no un control: fondo tenue del
 * acento y sin borde, para que no compita con el boton ni parezca un chip.
 */
.hachitec-plan__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 7px 15px;
	border-radius: var(--hachitec-pricing-radius-pill, 0px);
	background: color-mix(in srgb, var(--hachitec-pricing-accent, currentColor) 8%, transparent);
	font-size: 0.8em;
	font-weight: 500;
	line-height: 1.35;
}

.hachitec-plan__note .hachitec-plan__icon-note {
	color: var(--hachitec-pricing-accent, currentColor);
	flex: 0 0 auto;
	margin-top: -1px;
}

.hachitec-plan__features {
	list-style: none !important;
	margin: 26px 0 0 !important;
	padding: 0 !important;
	text-align: left;
}

.hachitec-plan__feature {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 0.92em;
	line-height: 1.45;
}

.hachitec-plan__feature .hachitec-plan__icon-check {
	color: var(--hachitec-pricing-accent, currentColor);
	flex: 0 0 auto;
	/* Alinea el icono con la primera linea del texto. */
	margin-top: 0.18em;
}

.hachitec-plan__feature.is-excluded {
	opacity: var(--hachitec-pricing-muted, 0.68);
}

.hachitec-plan__feature.is-excluded .hachitec-plan__icon-check {
	color: currentColor;
}

.hachitec-plan__footer {
	margin-top: 26px;
	padding-top: 4px;
}

.hachitec-plan__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 1px solid var(--hachitec-pricing-accent, currentColor);
	border-radius: var(--hachitec-pricing-radius-pill, 0px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--hachitec-pricing-hover-speed, 250ms) ease,
		color var(--hachitec-pricing-hover-speed, 250ms) ease,
		opacity var(--hachitec-pricing-hover-speed, 250ms) ease,
		transform var(--hachitec-pricing-hover-speed, 250ms) ease,
		box-shadow var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-plan__cta.is-style-outline {
	background-color: transparent;
	color: var(--hachitec-pricing-accent, currentColor);
}

.hachitec-plan__cta.is-style-solid {
	background-color: var(--hachitec-pricing-accent, currentColor);
	color: #fff;
}

/*
 * Barrido: el relleno entra desde la izquierda usando background-size sobre un
 * degradado plano. Sin pseudo-elementos ni z-index, asi el texto nunca queda
 * tapado y el boton sigue siendo un solo elemento.
 */
.hachitec-pricing.has-cta-sweep .hachitec-plan__cta.is-style-outline,
.hachitec-pricing.has-cta-both .hachitec-plan__cta.is-style-outline {
	background-image: linear-gradient(
		var(--hachitec-pricing-accent, currentColor),
		var(--hachitec-pricing-accent, currentColor)
	);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	transition: background-size var(--hachitec-pricing-hover-speed, 250ms) ease,
		color var(--hachitec-pricing-hover-speed, 250ms) ease,
		transform var(--hachitec-pricing-hover-speed, 250ms) ease,
		box-shadow var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-pricing.has-cta-sweep .hachitec-plan__cta.is-style-outline:hover,
.hachitec-pricing.has-cta-sweep .hachitec-plan__cta.is-style-outline:focus-visible,
.hachitec-pricing.has-cta-both .hachitec-plan__cta.is-style-outline:hover,
.hachitec-pricing.has-cta-both .hachitec-plan__cta.is-style-outline:focus-visible {
	background-size: 100% 100%;
	color: #fff;
}

/* Sin barrido, el relleno entra de golpe. */
.hachitec-pricing.has-cta-none .hachitec-plan__cta.is-style-outline:hover,
.hachitec-pricing.has-cta-none .hachitec-plan__cta.is-style-outline:focus-visible,
.hachitec-pricing.has-cta-lift .hachitec-plan__cta.is-style-outline:hover,
.hachitec-pricing.has-cta-lift .hachitec-plan__cta.is-style-outline:focus-visible {
	background-color: var(--hachitec-pricing-accent, currentColor);
	color: #fff;
}

.hachitec-plan__cta.is-style-solid:hover,
.hachitec-plan__cta.is-style-solid:focus-visible {
	opacity: 0.9;
	color: #fff;
}

.hachitec-pricing:not(.has-cta-none) .hachitec-plan__cta:hover,
.hachitec-pricing:not(.has-cta-none) .hachitec-plan__cta:focus-visible {
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

/*
 * Hover. Los valores replican el lenguaje que ya usa el sitio en sus tarjetas:
 * elevar 5px, borde de acento y sombra, en .25s ease. El boton levanta 2px y el
 * icono escala apenas, igual que las imagenes de producto.
 */
.hachitec-pricing.has-hover-lift .hachitec-plan,
.hachitec-pricing.has-hover-scale .hachitec-plan,
.hachitec-pricing.has-hover-border .hachitec-plan {
	transition: transform var(--hachitec-pricing-hover-speed, 250ms) ease,
		box-shadow var(--hachitec-pricing-hover-speed, 250ms) ease,
		border-color var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-pricing.has-hover-lift .hachitec-plan:hover,
.hachitec-pricing.has-hover-lift .hachitec-plan:focus-within {
	transform: translateY(var(--hachitec-pricing-hover-lift, -5px))
		scale(var(--hachitec-plan-scale));
}

.hachitec-pricing.has-hover-scale .hachitec-plan:hover,
.hachitec-pricing.has-hover-scale .hachitec-plan:focus-within {
	transform: scale(calc(var(--hachitec-plan-scale) * 1.025));
}

.hachitec-pricing.has-hover-lift .hachitec-plan:hover,
.hachitec-pricing.has-hover-lift .hachitec-plan:focus-within,
.hachitec-pricing.has-hover-scale .hachitec-plan:hover,
.hachitec-pricing.has-hover-scale .hachitec-plan:focus-within,
.hachitec-pricing.has-hover-border .hachitec-plan:hover,
.hachitec-pricing.has-hover-border .hachitec-plan:focus-within {
	border-color: var(--hachitec-pricing-accent, currentColor);
	box-shadow: var(--hachitec-pricing-shadow-hover, none);
}

/*
 * La tarjeta destacada ya tiene el borde de acento y una sombra mayor en reposo,
 * asi que el hover generico no se le nota: necesita su propia sombra, mas fuerte
 * que la que ya tiene puesta.
 */
.hachitec-pricing.has-hover-lift .hachitec-plan.is-featured:hover,
.hachitec-pricing.has-hover-lift .hachitec-plan.is-featured:focus-within,
.hachitec-pricing.has-hover-scale .hachitec-plan.is-featured:hover,
.hachitec-pricing.has-hover-scale .hachitec-plan.is-featured:focus-within,
.hachitec-pricing.has-hover-border .hachitec-plan.is-featured:hover,
.hachitec-pricing.has-hover-border .hachitec-plan.is-featured:focus-within {
	box-shadow: var(--hachitec-pricing-shadow-featured-hover, none);
}

/* Y la cinta acompaña, que es lo unico distintivo que le queda. */
.hachitec-plan__ribbon {
	transition: transform var(--hachitec-pricing-hover-speed, 250ms) ease,
		letter-spacing var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-pricing:not(.has-hover-none) .hachitec-plan.is-featured:hover .hachitec-plan__ribbon,
.hachitec-pricing:not(.has-hover-none) .hachitec-plan.is-featured:focus-within .hachitec-plan__ribbon {
	transform: translate(-50%, -50%) scale(1.06);
	letter-spacing: 0.11em;
}

/*
 * Barra de acento que crece desde el centro en el borde superior.
 * `transition: width` es el mismo recurso que ya usa el sitio en sus subrayados.
 */
.hachitec-pricing.has-hover-bar .hachitec-plan::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: var(--hachitec-pricing-accent, currentColor);
	transition: width var(--hachitec-pricing-hover-speed, 250ms) ease;
	pointer-events: none;
}

.hachitec-pricing.has-hover-bar .hachitec-plan:hover::before,
.hachitec-pricing.has-hover-bar .hachitec-plan:focus-within::before {
	width: 100%;
}

/* Icono: tres animaciones a elegir. */
.hachitec-plan__icon > * {
	transition: transform calc(var(--hachitec-pricing-hover-speed, 250ms) * 1.4) ease;
}

.hachitec-pricing.has-hover-icon-zoom .hachitec-plan:hover .hachitec-plan__icon > *,
.hachitec-pricing.has-hover-icon-zoom .hachitec-plan:focus-within .hachitec-plan__icon > * {
	transform: scale(1.12);
}

.hachitec-pricing.has-hover-icon-bounce .hachitec-plan:hover .hachitec-plan__icon > *,
.hachitec-pricing.has-hover-icon-bounce .hachitec-plan:focus-within .hachitec-plan__icon > * {
	transform: translateY(-5px);
}

.hachitec-pricing.has-hover-icon-rotate .hachitec-plan:hover .hachitec-plan__icon > *,
.hachitec-pricing.has-hover-icon-rotate .hachitec-plan:focus-within .hachitec-plan__icon > * {
	transform: rotate(-8deg) scale(1.06);
}

.hachitec-plan__icon {
	transition: color var(--hachitec-pricing-hover-speed, 250ms) ease;
}

/* El precio toma el acento al recorrer la tarjeta. */
.hachitec-plan__amount {
	transition: color var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-pricing.has-hover-price .hachitec-plan:hover .hachitec-plan__amount,
.hachitec-pricing.has-hover-price .hachitec-plan:focus-within .hachitec-plan__amount {
	color: var(--hachitec-pricing-accent, currentColor);
}

/* El tilde de cada caracteristica se marca un poco al recorrer la tarjeta. */
.hachitec-plan__feature .hachitec-plan__icon-check {
	transition: transform var(--hachitec-pricing-hover-speed, 250ms) ease;
}

.hachitec-pricing:not(.has-hover-none) .hachitec-plan:hover .hachitec-plan__feature:not(.is-excluded) .hachitec-plan__icon-check {
	transform: scale(1.12);
}

.hachitec-pricing.has-cta-lift .hachitec-plan__cta:hover,
.hachitec-pricing.has-cta-lift .hachitec-plan__cta:focus-visible,
.hachitec-pricing.has-cta-both .hachitec-plan__cta:hover,
.hachitec-pricing.has-cta-both .hachitec-plan__cta:focus-visible {
	transform: translateY(-2px);
}

.hachitec-plan__cta:focus-visible {
	outline: 2px solid var(--hachitec-pricing-accent, currentColor);
	outline-offset: 2px;
}

/* Sin movimiento: se conservan los cambios de color, que no desplazan nada. */
@media (prefers-reduced-motion: reduce) {
	.hachitec-plan,
	.hachitec-plan__cta,
	.hachitec-plan__icon > *,
	.hachitec-plan__ribbon,
	.hachitec-plan__icon-check {
		transition: none;
	}

	/*
	 * Sin movimiento, pero el hover sigue existiendo: cambian borde y sombra,
	 * que no desplazan nada. Un hover que no responde se siente roto.
	 */
	.hachitec-pricing .hachitec-plan:hover,
	.hachitec-pricing .hachitec-plan:focus-within {
		/* Sin movimiento de hover, pero conserva la escala del destacado. */
		transform: scale(var(--hachitec-plan-scale));
	}

	.hachitec-pricing .hachitec-plan:hover .hachitec-plan__icon > *,
	.hachitec-pricing .hachitec-plan:hover .hachitec-plan__icon-check,
	.hachitec-plan__cta:hover,
	.hachitec-plan__cta:focus-visible {
		transform: none;
	}

	.hachitec-pricing .hachitec-plan.is-featured:hover .hachitec-plan__ribbon,
	.hachitec-pricing .hachitec-plan.is-featured:focus-within .hachitec-plan__ribbon {
		transform: translate(-50%, -50%);
		letter-spacing: 0.08em;
	}
}

/*
 * MOBILE
 * En pantalla chica la tarjeta ocupa todo el ancho, asi que el padding grande y
 * el precio enorme del escritorio se vuelven desproporcionados.
 */
@media (max-width: 700px) {
	.hachitec-plan {
		padding: 30px 22px 24px;
	}

	.hachitec-pricing.is-card-flecha .hachitec-plan,
	.hachitec-pricing.is-card-bisel .hachitec-plan {
		padding-top: 50px;
	}

	.hachitec-plan__price {
		font-size: 1.85em;
	}

	.hachitec-plan__icon {
		width: 28px;
		height: 28px;
		margin: 0;
	}

	.hachitec-plan__icon > * {
		width: 28px;
		height: 28px;
	}

	.hachitec-plan__icon .dashicons {
		width: 28px;
		height: 28px;
		font-size: 28px;
		line-height: 28px;
	}

	.hachitec-plan__icon .dashicons::before {
		width: 28px;
		height: 28px;
		line-height: 28px;
	}

	.hachitec-plan__pricing {
		margin-top: 12px;
		padding-bottom: 14px;
	}

	.hachitec-pricing[class*="has-dividers-"]:not(.has-dividers-none) .hachitec-plan__pricing {
		padding-top: 12px;
	}

	.hachitec-pricing.is-variant-banda .hachitec-plan__pricing,
	.hachitec-pricing.is-variant-cabecera .hachitec-plan__head,
	.hachitec-pricing.is-variant-cabecera .hachitec-plan__description,
	.hachitec-pricing.is-variant-cabecera .hachitec-plan__pricing {
		margin-left: -22px;
		margin-right: -22px;
		padding-left: 22px;
		padding-right: 22px;
	}

	.hachitec-plan__features {
		margin-top: 22px !important;
	}

	.hachitec-plan__footer {
		margin-top: 22px;
	}

	.hachitec-plan__cta {
		padding: 13px 18px;
	}
}

/* color-mix es reciente: sin soporte, los fondos derivados quedan neutros. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.hachitec-plan__note {
		border: var(--hachitec-pricing-border-width, 1px) solid var(--hachitec-pricing-border, rgba(0, 0, 0, 0.08));
	}
}