/**
 * Hoolistic Precio por Mes
 * Estilos de las dos casillas de precio (precio normal + precio por mes).
 */

.hpm-precio-normal,
.hpm-precio-mes {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	padding: 0.15em 0.6em;
	border-radius: 6px;
	line-height: 1.2;
}

/* Casilla del precio normal */
.hpm-precio-normal {
	background: rgba(0, 0, 0, 0.04);
}

/* Casilla del precio por mes */
.hpm-precio-mes {
	margin-left: 0.5em;
	background: rgba(0, 0, 0, 0.04);
	font-weight: 600;
}

.hpm-precio-mes__label {
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.75;
}

/* En pantallas pequeñas, apilar las dos casillas */
@media (max-width: 480px) {
	.hpm-precio-normal,
	.hpm-precio-mes {
		display: flex;
		width: fit-content;
		margin: 0.15em 0 0;
	}
}